zoom out with ranges logic

2 months ago · 8aca72ce04
3 changed files with 57 additions and 2 deletions
--- a/examples/zoom_out.html
+++ b/examples/zoom_out.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <script type="text/javascript">
+      const startTime = 1590590148;
+      const data = Array.from(
+        { length: 20 },
+        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
+      );
+      let options = {
+        renderLegend: false, usePanning: false,
+        axis: { y: { range: [0, 50] } },
+        zoomEvents: { mouse: {
+          zoom: { isActive: true, orientation: "horizontal" },
+          pan: { isActive: false },
+        }},
+        eventsCallbacks: {
+          zoomOut: function(centers, ranges) {
+            console.log('zoomOut', centers, ranges);
+          }
+        }
+      }
+      var pod = new LinePod(
+        document.getElementById('chart'),
+        [{ datapoints: data }],
+        options
+      );
+      pod.render();
+    </script>
+  </body>
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@ -443,7 +443,17 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
      x: xAxisMiddleValue,
      y: yAxisMiddleValue
    }
-    this.options.callbackZoomOut(centers);
+
+    // TODO: refactor core not to take _options explicitly
+    if(
+      this.options._options.eventsCallbacks !== undefined && 
+      this.options._options.eventsCallbacks.zoomOut !== undefined
+    ) {
+      this.options._options.eventsCallbacks.zoomOut(
+        centers,
+        [this.state.xValueRange, this.state.yValueRange]
+      );
+    }
  }
 }

--- a/src/types.ts
+++ b/src/types.ts
@ -1,4 +1,5 @@
 import { Serie, Options } from '@chartwerk/core';
+import { AxisRange } from '@chartwerk/core/dist/types';

 type LineTimeSerieParams = {
  maxLength: number,
@ -10,7 +11,14 @@ type LineTimeSerieParams = {
 }

 export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
-export type LineOptions = Options;
+export type LineOptions = Options & {
+  eventsCallbacks? : {
+    zoomOut?: (centers: {
+      x: number;
+      y: number;
+    }, range: AxisRange[]) => void;
+  }
+}

 export type MouseObj = {
  x: number,