update demo with an examples of zoomin/zoomout

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;
     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);