Zoom out on dbl click

dist/index.d.ts

@@ -41,6 +41,7 @@ export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange?: boolean): boolean;
     onMouseOver(): void;
     onMouseOut(): void;
+    protected zoomOut(): void;
 }
 export declare const VueChartwerkLineChartObject: {
     render(createElement: any): any;

examples/demo.html

@@ -16,14 +16,14 @@
       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) => { 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' } },
         zoomEvents: {
+          mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
           scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
         },
-        eventsCallbacks: { zoomIn: zoomIn, zoomOut, panningEnd }
+        eventsCallbacks: { zoomIn: zoomIn, panningEnd }
       }
       var pod = new LinePod(
         document.getElementById('chart'),

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Chartwerk line chart",
   "main": "dist/index.js",
   "scripts": {

src/index.ts

@@ -1,4 +1,4 @@
-import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation } from '@chartwerk/core';
+import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core';
 import { LineTimeSerie, LineOptions, Mode } from './types';
 
 import * as d3 from 'd3';
@@ -435,6 +435,52 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     }
     this.crosshair.style('display', 'none');
   }
+
+  // methods below rewrite cores, (move more methods here)
+  protected zoomOut(): void {
+    // TODO: test to remove, seems its depricated
+    if(this.isOutOfChart() === true) {
+      return;
+    }
+    // TODO: its not clear, why we use this orientation here. Mb its better to use separate option
+    const orientation: BrushOrientation = this.options.zoomEvents.mouse.zoom.orientation;
+    const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0];
+    const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0];
+    switch(orientation) {
+      case BrushOrientation.HORIZONTAL:
+        this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2];
+        break;
+      case BrushOrientation.VERTICAL:
+        this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2];
+        break;
+      case BrushOrientation.RECTANGLE:
+        this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2];
+        this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2];
+        break;
+      case BrushOrientation.SQUARE:
+        this.state.xValueRange = [this.state.xValueRange[0] - xInterval / 2, this.state.xValueRange[1] + xInterval / 2];
+        this.state.yValueRange = [this.state.yValueRange[0] - yInterval / 2, this.state.yValueRange[1] + yInterval / 2];
+        break;
+      default:
+        throw new Error(`Unknown type of orientation: ${orientation}, path: options.zoomEvents.mouse.zoom.orientation`);;
+    }
+
+    // TODO: it shouldn't be here. Add smth like vue watchers in core components. Optimize!
+    this.renderMetrics();
+    this.renderXAxis();
+    this.renderYAxis();
+    this.renderGrid()
+    
+    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) {
+      let xAxisMiddleValue: number = this.xScale.invert(this.width / 2);
+      let yAxisMiddleValue: number = this.yScale.invert(this.height / 2);
+      const centers = {
+        x: xAxisMiddleValue,
+        y: yAxisMiddleValue
+      }
+      this.options.eventsCallbacks.zoomOut(centers);
+    }
+  }
 }
 
 // it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLineChartObject)