fix live demo

examples/demo_live.html

@@ -15,9 +15,9 @@
     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]);
+    var data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+    var data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
+    var data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
     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 } };
@@ -37,9 +37,17 @@
       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];
+      console.log('d1', data1)
       const shouldRerender = !this.isZoomed;
       console.time('rerender');
-      pod.appendData([d1, d2, d3], shouldRerender);
+      data1.push(d1);
+      data2.push(d2);
+      data3.push(d3);
+      pod.updateData([
+        { target: 'test1', datapoints: data1, color: 'green', maxLength: arrayLength + 30, renderDots: false },
+        { target: 'test2', datapoints: data2, color: 'blue', maxLength: arrayLength + 30, renderDots: false },
+        { target: 'test3', datapoints: data3, color: 'orange', maxLength: arrayLength + 30, renderDots: false },
+      ]);
       console.timeEnd('rerender');
       if(rerenderIdx > arrayLength + 100) {
         clearInterval(test);

src/index.ts

@@ -62,38 +62,6 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     return this.lineGenerator;
   }
 
-  public appendData(data: [number, number][], shouldRerender = true): void {
-    for(const serie of this.coreSeries.visibleSeries) {
-      serie.datapoints.push(data[serie.idx]);
-      const maxLength = serie.maxLength;
-      if(maxLength !== undefined && serie.datapoints.length > maxLength) {
-        serie.datapoints.shift();
-      }
-    }
-
-    for(const serie of this.coreSeries.visibleSeries) {
-      this.metricContainer.select(`.metric-path-${serie.idx}`)
-        .datum(serie.datapoints)
-        .attr('d', this.getRenderGenerator(serie.renderArea));
-
-      if(serie.renderDots === true) {
-        this.metricContainer.selectAll(`.metric-circle-${serie.idx}`)
-          .data(serie.datapoints)
-          .attr('cx', d => this.state.xScale(d[0]))
-          .attr('cy', d => this.state.yScale(d[1]));
-
-        this._renderDots(serie);
-      }
-    }
-    if(shouldRerender) {
-      const rightBorder = _.last(data)[0];
-      this.state.xValueRange = [this.state.getMinValueX(), rightBorder];
-      this.renderXAxis();
-      this.renderYAxis();
-      this.renderGrid();
-    }
-  }
-
   _renderDots(serie: LineTimeSerie): void {
     this.metricContainer.selectAll(null)
       .data(serie.datapoints)