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;
conf.devtool = 'inline-source-map';
conf.watch = true;
conf.mode = 'development';
conf.output.filename = 'index.dev.js';
module.exports = conf;

3
build/webpack.prod.conf.js

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

2
examples/demo.html

@ -4,7 +4,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<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>
<body>
<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="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>
<body>

2
examples/demo_vertical.html

@ -4,7 +4,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<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>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>

12
package.json

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

20
src/index.ts

@ -14,7 +14,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
areaGenerator = null;
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(d3, _el, _series, _options);
super(_el, _series, _options);
}
renderMetrics(): void {
@ -62,13 +62,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
initLineGenerator(): void {
this.lineGenerator = this.d3.line()
this.lineGenerator = d3.line()
.x(d => this.xScale(d[0]))
.y(d => this.yScale(d[1]));
}
initAreaGenerator(): void {
this.areaGenerator = this.d3.area()
this.areaGenerator = d3.area()
.x(d => this.xScale(d[0]))
.y1(d => this.yScale(d[1]))
.y0(d => this.height);
@ -169,7 +169,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
if(metricOptions.mode === Mode.CHARGE) {
const dataPairs = this.d3.pairs(datapoints);
const dataPairs = d3.pairs(datapoints);
this.metricContainer.selectAll(null)
.data(dataPairs)
.enter()
@ -325,7 +325,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
// 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);
// TODO: refactor corner cases
@ -364,8 +364,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
onMouseMove(): void {
const eventX = this.d3.mouse(this.chartContainer.node())[0];
const eventY = this.d3.mouse(this.chartContainer.node())[1];
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.yScale.invert(eventY);
// 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
// TODO: need to refactor this object
this.options.eventsCallbacks.mouseMove({
x: this.d3.event.pageX,
y: this.d3.event.pageY,
x: d3.event.pageX,
y: d3.event.pageY,
xVal: xValue,
yVal: yValue,
series: datapoints,
@ -481,7 +481,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
if(this.isOutOfChart() === true) {
return;
}
if(this.d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
return;
}
// 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