Browse Source

Merge branch '0.5.0-beta2' into 'main'

0.5.0

See merge request chartwerk/line-pod!23
some-tests
rozetko 2 years ago
parent
commit
998a13c1ba
  1. 2
      build/webpack.dev.conf.js
  2. 3
      build/webpack.prod.conf.js
  3. 2
      examples/demo.html
  4. 2
      examples/demo_live.html
  5. 2
      examples/demo_vertical.html
  6. 12
      package.json
  7. 20
      src/index.ts
  8. 6158
      yarn.lock

2
build/webpack.dev.conf.js

@ -2,7 +2,7 @@ const baseWebpackConfig = require('./webpack.base.conf');
var conf = baseWebpackConfig; var conf = baseWebpackConfig;
conf.devtool = 'inline-source-map'; conf.devtool = 'inline-source-map';
conf.watch = true;
conf.mode = 'development'; conf.mode = 'development';
conf.output.filename = 'index.dev.js';
module.exports = conf; module.exports = conf;

3
build/webpack.prod.conf.js

@ -2,5 +2,8 @@ const baseWebpackConfig = require('./webpack.base.conf');
var conf = baseWebpackConfig; var conf = baseWebpackConfig;
conf.mode = 'production'; conf.mode = 'production';
conf.externals = [
'@chartwerk/core', 'd3', 'lodash'
];
module.exports = baseWebpackConfig; module.exports = baseWebpackConfig;

2
examples/demo.html

@ -4,7 +4,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.js" type="text/javascript"></script> <script src="../dist/index.dev.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 50%; height: 500px;"></div> <div id="chart" style="width: 50%; height: 500px;"></div>

2
examples/demo_live.html

@ -5,7 +5,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.js" type="text/javascript"></script> <script src="../dist/index.dev.js" type="text/javascript"></script>
</head> </head>
<body> <body>

2
examples/demo_vertical.html

@ -4,7 +4,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.js" type="text/javascript"></script> <script src="../dist/index.dev.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 50%; height: 500px;"></div> <div id="chart" style="width: 50%; height: 500px;"></div>

12
package.json

@ -1,11 +1,11 @@
{ {
"name": "@chartwerk/line-pod", "name": "@chartwerk/line-pod",
"version": "0.4.15", "version": "0.5.0",
"description": "Chartwerk line chart", "description": "Chartwerk line chart",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {
"build": "webpack --config build/webpack.prod.conf.js", "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --config build/webpack.dev.conf.js", "dev": "webpack --watch --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
@ -15,14 +15,10 @@
"author": "CorpGlory", "author": "CorpGlory",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chartwerk/core": "^0.4.0" "@chartwerk/core": "^0.5.0"
}, },
"devDependencies": { "devDependencies": {
"@types/d3": "5.16.4",
"@types/lodash": "^4.14.149",
"css-loader": "^3.4.2", "css-loader": "^3.4.2",
"d3": "5.16.0",
"lodash": "^4.17.15",
"style-loader": "^1.1.3", "style-loader": "^1.1.3",
"ts-loader": "^6.2.1", "ts-loader": "^6.2.1",
"typescript": "^3.8.3", "typescript": "^3.8.3",

20
src/index.ts

@ -14,7 +14,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
areaGenerator = null; areaGenerator = null;
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(d3, _el, _series, _options); super(_el, _series, _options);
} }
renderMetrics(): void { renderMetrics(): void {
@ -62,13 +62,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
initLineGenerator(): void { initLineGenerator(): void {
this.lineGenerator = this.d3.line() this.lineGenerator = d3.line()
.x(d => this.xScale(d[0])) .x(d => this.xScale(d[0]))
.y(d => this.yScale(d[1])); .y(d => this.yScale(d[1]));
} }
initAreaGenerator(): void { initAreaGenerator(): void {
this.areaGenerator = this.d3.area() this.areaGenerator = d3.area()
.x(d => this.xScale(d[0])) .x(d => this.xScale(d[0]))
.y1(d => this.yScale(d[1])) .y1(d => this.yScale(d[1]))
.y0(d => this.height); .y0(d => this.height);
@ -169,7 +169,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
if(metricOptions.mode === Mode.CHARGE) { if(metricOptions.mode === Mode.CHARGE) {
const dataPairs = this.d3.pairs(datapoints); const dataPairs = d3.pairs(datapoints);
this.metricContainer.selectAll(null) this.metricContainer.selectAll(null)
.data(dataPairs) .data(dataPairs)
.enter() .enter()
@ -325,7 +325,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
// TODO: d3.bisect is not the best way. Use binary search // TODO: d3.bisect is not the best way. Use binary search
const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left; const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left;
let closestIdx = bisectIndex(datapoints, value); let closestIdx = bisectIndex(datapoints, value);
// TODO: refactor corner cases // TODO: refactor corner cases
@ -364,8 +364,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
onMouseMove(): void { onMouseMove(): void {
const eventX = this.d3.mouse(this.chartContainer.node())[0]; const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = this.d3.mouse(this.chartContainer.node())[1]; const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.xScale.invert(eventX); // mouse x position in xScale const xValue = this.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.yScale.invert(eventY); const yValue = this.yScale.invert(eventY);
// TODO: isOutOfChart is a hack, use clip path correctly // TODO: isOutOfChart is a hack, use clip path correctly
@ -383,8 +383,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
// TDOO: is shift key pressed // TDOO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.options.eventsCallbacks.mouseMove({ this.options.eventsCallbacks.mouseMove({
x: this.d3.event.pageX, x: d3.event.pageX,
y: this.d3.event.pageY, y: d3.event.pageY,
xVal: xValue, xVal: xValue,
yVal: yValue, yVal: yValue,
series: datapoints, series: datapoints,
@ -481,7 +481,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
if(this.isOutOfChart() === true) { if(this.isOutOfChart() === true) {
return; return;
} }
if(this.d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
return; return;
} }
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option // TODO: its not clear, why we use this orientation here. Mb its better to use separate option

6158
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save