From 7b07cdfb473dbc4f7070caee7c83bec8a9486115 Mon Sep 17 00:00:00 2001 From: vargburz Date: Wed, 3 Nov 2021 17:31:10 +0300 Subject: [PATCH 1/4] update appendData && use new core --- package.json | 4 ++-- src/index.ts | 14 ++++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index db9e4ed..66d1948 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@chartwerk/line-pod", - "version": "0.4.3", + "version": "0.4.4", "description": "Chartwerk line chart", "main": "dist/index.js", "scripts": { @@ -15,7 +15,7 @@ "author": "CorpGlory", "license": "ISC", "dependencies": { - "@chartwerk/core": "^0.3.1" + "@chartwerk/core": "^0.3.2" }, "devDependencies": { "@types/d3": "5.16.4", diff --git a/src/index.ts b/src/index.ts index f276ce4..64430fe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -65,8 +65,7 @@ export class LinePod extends ChartwerkPod { .y(d => this.yScale(d[1])); } - public appendData(data: [number, number][]): void { - + public appendData(data: [number, number][], shouldRerender = true): void { for(let idx = 0; idx < this.series.length; ++idx) { if(this.series[idx].visible === false) { continue; @@ -92,10 +91,13 @@ export class LinePod extends ChartwerkPod { this._renderDots([data[idx]], idx); } } - - this.renderXAxis(); - this.renderYAxis(); - this.renderGrid(); + if(shouldRerender) { + const rightBorder = _.last(data)[0]; + this.state.xValueRange = [this.state.getMinValueX(), rightBorder]; + this.renderXAxis(); + this.renderYAxis(); + this.renderGrid(); + } } _renderDots(datapoints: number[][], serieIdx: number): void { From 2420ac32514c45f87ba31bbe7e6c87f60c5e54a4 Mon Sep 17 00:00:00 2001 From: vargburz Date: Wed, 3 Nov 2021 17:31:50 +0300 Subject: [PATCH 2/4] update demo with an examples of zoomin/zoomout --- examples/demo.html | 7 ++++--- examples/demo_live.html | 9 ++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/examples/demo.html b/examples/demo.html index cdf57d0..30dad1e 100755 --- a/examples/demo.html +++ b/examples/demo.html @@ -15,11 +15,12 @@ const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]); const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]); const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]); - const zoomIn = (ranges) => { pod.render(); } - const zoomOut = (ranges) => { pod.state.xValueRange = [startTime, startTime + arrayLength * 10000]; pod.render(); } + const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); } + const zoomOut = (ranges) => { options.axis.x.range = [startTime, startTime + arrayLength * 10000]; pod.updateData(undefined, options); } + const panningEnd = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); } let options = { renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } }, - eventsCallbacks: { zoomIn: zoomIn, zoomOut } + eventsCallbacks: { zoomIn: zoomIn, zoomOut, panningEnd } } var pod = new LinePod( document.getElementById('chart'), diff --git a/examples/demo_live.html b/examples/demo_live.html index 2c9a4d9..0e1e625 100755 --- a/examples/demo_live.html +++ b/examples/demo_live.html @@ -14,10 +14,13 @@