Merge branch 'use-core-with-updated-state' into 'main'

fix examples live data doesnt update

See merge request chartwerk/line-pod!13

dist/index.d.ts

@@ -6,7 +6,7 @@ export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     renderMetrics(): void;
     clearAllMetrics(): void;
     initLineGenerator(): void;
-    appendData(data: [number, number][]): void;
+    appendData(data: [number, number][], shouldRerender?: boolean): void;
     _renderDots(datapoints: number[][], serieIdx: number): void;
     _renderLines(datapoints: number[][], serieIdx: number): void;
     _renderMetric(datapoints: number[][], metricOptions: {

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'),

examples/demo_live.html

@@ -14,10 +14,13 @@
   <script type="text/javascript">
     const startTime = 1590590148;
     const arrayLength = 100;
+    this.isZoomed = false; // TODO: temporary hack to have zoomin|zoomout with `appendData`. It will be moved to Pod.
     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]);
-    let options = { renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } } };
+    const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); this.isZoomed = true }
+    const zoomOut = (ranges) => { options.axis.x.range = undefined; pod.updateData(undefined, options); this.isZoomed = false }
+    let options = { renderLegend: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },  eventsCallbacks: { zoomIn: zoomIn, zoomOut } };
     var pod = new LinePod(
       document.getElementById('chart'),
       [
@@ -34,9 +37,9 @@
       const d1 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
       const d2 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 100)];
       const d3 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
-
+      const shouldRerender = !this.isZoomed;
       console.time('rerender');
-      pod.appendData([d1, d2, d3]);
+      pod.appendData([d1, d2, d3], shouldRerender);
       console.timeEnd('rerender');
       if(rerenderIdx > arrayLength + 100) {
         clearInterval(test);

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@chartwerk/core": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.1.tgz",
-      "integrity": "sha512-7uTNeV2+ln2WFQQpbJaYR8o0DmCoLhiMjQagLH8VsETVVCxI7YmgxYVVhx6OGE25miJHXwhRlplopDs6dWF5KQ=="
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.2.tgz",
+      "integrity": "sha512-E4Bb2rDBDTNXRM7koSXDwM6IYYNdLnqxJel1y2BmH4p9R0Z+3L0C4B+jYurkiwcnIWdGlHXVFL0E0khPeLypfA=="
     },
     "@types/d3": {
       "version": "5.16.4",

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",

src/index.ts

@@ -65,8 +65,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .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<LineTimeSerie, LineOptions> {
         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 {