@fc-plot/ts-graph 0.16.3 → 0.17.0

package/src/index.ts

@@ -1,18 +1,36 @@
-import * as d3 from 'd3';
-import { assign, merge, debounce, throttle, uniqueId, isEmpty, find, sortBy } from 'lodash';
-import { addListener, removeListener } from 'resize-detector';
-import EventEmitter from 'events';
-import XAxis from './xAxis';
-import YAxis from './yAxis';
-import Tooltip from './tooltip';
-import Line from './line';
-import Bar from './bar';
-import Zoom from './zoom';
-import Legend from './legend';
-import Shapes from './shapes';
-import { TsGraphType, Options, EventPosition, Transform, Serie, SerieDataItem, XScales, YScales } from './interface';
-import { getTouchPosition, getYkeyValue } from './utils';
-import '../assets/style.less';
+import * as d3 from "d3";
+import {
+  assign,
+  merge,
+  debounce,
+  throttle,
+  uniqueId,
+  isEmpty,
+  find,
+  sortBy,
+} from "lodash";
+import { addListener, removeListener } from "resize-detector";
+import EventEmitter from "events";
+import XAxis from "./xAxis";
+import YAxis from "./yAxis";
+import Tooltip from "./tooltip";
+import Line from "./line";
+import Bar from "./bar";
+import Zoom from "./zoom";
+import Legend from "./legend";
+import Shapes from "./shapes";
+import {
+  TsGraphType,
+  Options,
+  EventPosition,
+  Transform,
+  Serie,
+  SerieDataItem,
+  XScales,
+  YScales,
+} from "./interface";
+import { getTouchPosition, getYkeyValue } from "./utils";
+import "../assets/style.less";
 
 const eventEmitter = new EventEmitter();
 export default class TsGraph {
@@ -39,11 +57,28 @@ export default class TsGraph {
       ratio: window.devicePixelRatio || 1,
       xkey: 0,
       ykey: 1,
-      oykey: '__originValue', // stack area 用于缓存原始值
-      timestamp: 'x',
+      ykey2: 2,
+      oykey: "__originValue", // stack area 用于缓存原始值
+      timestamp: "x",
       chart: {
-        id: uniqueId('ts-graph-'),
-        colors: ['#3399CC', '#CC9933', '#9966CC', '#66CC66', '#CC3333', '#99CCCC', '#CCCC66', '#CC99CC', '#99CC99', '#CC6666', '#336699', '#996633', '#993399', '#339966', '#993333'],
+        id: uniqueId("ts-graph-"),
+        colors: [
+          "#3399CC",
+          "#CC9933",
+          "#9966CC",
+          "#66CC66",
+          "#CC3333",
+          "#99CCCC",
+          "#CCCC66",
+          "#CC99CC",
+          "#99CC99",
+          "#CC6666",
+          "#336699",
+          "#996633",
+          "#993399",
+          "#339966",
+          "#993333",
+        ],
         width: userOptions.chart.renderTo.offsetWidth,
         height: userOptions.chart.renderTo.offsetHeight || 350,
         marginTop: 10,
@@ -53,13 +88,13 @@ export default class TsGraph {
       },
       xAxis: {
         visible: true,
-        lineColor: '#ccc',
+        lineColor: "#ccc",
         lineWidth: 1,
         tickLength: 5,
         tickpadding: 5,
-        tickColor: '#ccc',
+        tickColor: "#ccc",
         labels: {
-          color: '#999',
+          color: "#999",
           fontSize: 11,
         },
       },
@@ -67,18 +102,18 @@ export default class TsGraph {
         // min: -Infinity,
         // max: Infinity,
         visible: true,
-        lineColor: '#ccc',
+        lineColor: "#ccc",
         lineWidth: 1,
         tickLength: 5,
         tickpadding: 5,
-        tickColor: '#ccc',
-        gridLineColor: '#efefef',
+        tickColor: "#ccc",
+        gridLineColor: "#efefef",
         labels: {
-          color: '#999',
+          color: "#999",
           fontSize: 11,
         },
       },
-      type: 'line',
+      type: "line",
       line: {
         enable: true,
         width: 2,
@@ -99,12 +134,12 @@ export default class TsGraph {
         shared: true,
         cascade: false, // tooltip 联动
         cascadeScope: undefined, // tooltip 联动的范围
-        timeFormat: '%Y-%m-%d %H:%M:%S',
+        timeFormat: "%Y-%m-%d %H:%M:%S",
       },
       series: [],
       legend: {
-        align: 'center',
-        verticalAlign: 'top',
+        align: "center",
+        verticalAlign: "top",
         enabled: false,
       },
       fillNull: undefined,
@@ -130,17 +165,19 @@ export default class TsGraph {
     this.options.notDisplayedSeries = [];
     this.options.chart.containerWidth = chart.width;
     this.options.chart.containerHeight = chart.height;
-    this.options.chart.width = chart.width - chart.marginLeft - chart.marginRight;
-    this.options.chart.height = chart.height - chart.marginTop - chart.marginBottom;
+    this.options.chart.width =
+      chart.width - chart.marginLeft - chart.marginRight;
+    this.options.chart.height =
+      chart.height - chart.marginTop - chart.marginBottom;
     this.createContainer();
     this.createCanvas();
     this.initSeries();
     this.initScales();
     this.initEvent();
-    if (this.options.type === 'line') {
+    if (this.options.type === "line") {
       this.initLine();
     }
-    if (this.options.type === 'bar') {
+    if (this.options.type === "bar") {
       this.initBar();
     }
     this.initLegend();
@@ -151,7 +188,9 @@ export default class TsGraph {
   }
 
   clearRect(ctx: CanvasRenderingContext2D) {
-    const { chart: { containerWidth, containerHeight } } = this.options;
+    const {
+      chart: { containerWidth, containerHeight },
+    } = this.options;
 
     ctx.clearRect(0, 0, containerWidth, containerHeight);
   }
@@ -161,10 +200,10 @@ export default class TsGraph {
     if (this.options.xAxis.visible) {
       this.yAxis.drawGridLine(this.yScales);
     }
-    if (this.options.type === 'line') {
+    if (this.options.type === "line") {
       this.line.draw(this.xScales, this.yScales);
     }
-    if (this.options.type === 'bar') {
+    if (this.options.type === "bar") {
       this.bar.draw(this.xScales, this.yScales, transform);
     }
     if (this.options.xAxis.visible) {
@@ -195,13 +234,14 @@ export default class TsGraph {
     this.initSeries();
     this.initScales();
     this.initEvent();
-    if (this.options.type === 'line') {
+    if (this.options.type === "line") {
       this.initLine();
     }
-    if (this.options.type === 'bar') {
+    if (this.options.type === "bar") {
       this.initBar();
     }
     this.initTooltip();
+    this.initShapes();
     this.legend.updateOptions(options);
     this.draw();
   }
@@ -212,16 +252,18 @@ export default class TsGraph {
 
   showTooltip = (eventPosition: EventPosition) => {
     this.tooltip.draw(eventPosition, this);
-  }
+  };
 
   hideTooltip = () => {
     this.tooltip.clear();
-  }
+  };
 
   initEvent() {
     const { cascade, cascadeScope } = this.options.tooltip;
-    const plotmoveType = cascadeScope ? `plotmove:${cascadeScope}` : 'plotmove';
-    const plotleaveType = cascadeScope ? `plotleave:${cascadeScope}` : 'plotleave';
+    const plotmoveType = cascadeScope ? `plotmove:${cascadeScope}` : "plotmove";
+    const plotleaveType = cascadeScope
+      ? `plotleave:${cascadeScope}`
+      : "plotleave";
     let mousedownStatus = false;
     let mousedownPos: EventPosition = {} as EventPosition;
     let mouseupPos: EventPosition = {} as EventPosition;
@@ -240,72 +282,107 @@ export default class TsGraph {
     const handleMouseLeave = throttle(() => {
       _this.tooltip.clear();
     }, 5);
-    d3.select(this.eventCanvas).on('mousemove', function mousemove(this: HTMLCanvasElement) {
-      isMouserover = true;
-      handleMouseover(d3.event);
-      if (cascade) eventEmitter.emit(plotmoveType, d3.event);
-    }).on('mouseleave', function mouseleave(this: HTMLCanvasElement) {
-      mouseleavePos = d3.event;
-      isMouserover = false;
-      handleMouseLeave();
-      if (cascade) eventEmitter.emit(plotleaveType);
-    }).on('mousedown', function mousedown(this: HTMLCanvasElement) {
-      if (d3.event.which === 1) {
-        mousedownStatus = true;
-        mousedownPos = d3.event;
-      }
-    }).on('mouseup', function mouseup(this: HTMLCanvasElement) {
-      d3.event.stopPropagation();
-      const eventPosition = d3.event as EventPosition;
-      if (mousedownPos && (mousedownPos.offsetX !== eventPosition.offsetX)) {
-        _this.zoom.clearMarker();
-        _this.zoom.onZoom(mousedownPos, eventPosition, (transform: Transform) => {
-          _this.handleZoom(transform, [mousedownPos, eventPosition]);
-        });
-      } else {
-        _this.options.onClick(d3.event, _this.xScales.invert(d3.event.offsetX), _this.yScales.invert(d3.event.offsetY));
-      }
-      mousedownStatus = false;
-      mousedownPos = {} as EventPosition;
-    }).on('contextmenu', function contextmenu() {
-      _this.options.onRightClick(d3.event, _this.xScales.invert(d3.event.offsetX), _this.yScales.invert(d3.event.offsetY));
-      d3.event.preventDefault();
-    }).on('touchstart', function touchmove(this: HTMLCanvasElement) {
-      // 模拟 mousedown
-      if (d3.event.touches.length > 1) {
-        mousedownStatus = true;
-        // mousedownPos = getTouchPosition(_this.eventCanvas, d3.event);
-      }
-    }).on('touchmove', function touchmove(this: HTMLCanvasElement) {
-      const eventPosition = getTouchPosition(_this.eventCanvas, d3.event) as EventPosition;
-
-      if (d3.event.touches.length === 1) {
-        _this.tooltip.draw(eventPosition, _this);
-      }
-
-      // 触发 zoom marker
-      if (mousedownStatus) {
-        mousedownPos = eventPosition;
-        mouseupPos = getTouchPosition(_this.eventCanvas, d3.event, 1) as EventPosition;
-        _this.zoom.drawMarker(mousedownPos, mouseupPos);
-      }
-    }).on('touchend', function mouseleave(this: HTMLCanvasElement) {
-      isMouserover = false;
-      handleMouseLeave();
+    d3.select(this.eventCanvas)
+      .on("mousemove", function mousemove(this: HTMLCanvasElement) {
+        isMouserover = true;
+        handleMouseover(d3.event);
+        if (cascade) eventEmitter.emit(plotmoveType, d3.event);
+      })
+      .on("mouseleave", function mouseleave(this: HTMLCanvasElement) {
+        mouseleavePos = d3.event;
+        isMouserover = false;
+        handleMouseLeave();
+        if (cascade) eventEmitter.emit(plotleaveType);
+      })
+      .on("mousedown", function mousedown(this: HTMLCanvasElement) {
+        if (d3.event.which === 1) {
+          mousedownStatus = true;
+          mousedownPos = d3.event;
+        }
+      })
+      .on("mouseup", function mouseup(this: HTMLCanvasElement) {
+        d3.event.stopPropagation();
+        const eventPosition = d3.event as EventPosition;
+        if (mousedownPos && mousedownPos.offsetX !== eventPosition.offsetX) {
+          _this.zoom.clearMarker();
+          _this.zoom.onZoom(
+            mousedownPos,
+            eventPosition,
+            (transform: Transform) => {
+              _this.handleZoom(transform, [mousedownPos, eventPosition]);
+            }
+          );
+        } else {
+          _this.options.onClick(
+            d3.event,
+            _this.xScales.invert(d3.event.offsetX),
+            _this.yScales.invert(d3.event.offsetY)
+          );
+        }
+        mousedownStatus = false;
+        mousedownPos = {} as EventPosition;
+      })
+      .on("contextmenu", function contextmenu() {
+        _this.options.onRightClick(
+          d3.event,
+          _this.xScales.invert(d3.event.offsetX),
+          _this.yScales.invert(d3.event.offsetY)
+        );
+        d3.event.preventDefault();
+      })
+      .on("touchstart", function touchmove(this: HTMLCanvasElement) {
+        // 模拟 mousedown
+        if (d3.event.touches.length > 1) {
+          mousedownStatus = true;
+          // mousedownPos = getTouchPosition(_this.eventCanvas, d3.event);
+        }
+      })
+      .on("touchmove", function touchmove(this: HTMLCanvasElement) {
+        const eventPosition = getTouchPosition(
+          _this.eventCanvas,
+          d3.event
+        ) as EventPosition;
+
+        if (d3.event.touches.length === 1) {
+          _this.tooltip.draw(eventPosition, _this);
+        }
 
-      // 触发 zoom
-      if (mousedownPos && (mousedownPos.offsetX !== mouseupPos.offsetX)) {
-        _this.zoom.clearMarker();
-        _this.zoom.onZoom(mousedownPos, mouseupPos, (transform: Transform) => {
-          _this.handleZoom(transform, [mousedownPos, mouseupPos]);
-        });
-      } else {
-        _this.options.onClick(d3.event, _this.xScales.invert(d3.event.offsetX), _this.yScales.invert(d3.event.offsetY));
-      }
-      mousedownStatus = false;
-      mousedownPos = {} as EventPosition;
-      mouseupPos = {} as EventPosition;
-    });
+        // 触发 zoom marker
+        if (mousedownStatus) {
+          mousedownPos = eventPosition;
+          mouseupPos = getTouchPosition(
+            _this.eventCanvas,
+            d3.event,
+            1
+          ) as EventPosition;
+          _this.zoom.drawMarker(mousedownPos, mouseupPos);
+        }
+      })
+      .on("touchend", function mouseleave(this: HTMLCanvasElement) {
+        isMouserover = false;
+        handleMouseLeave();
+
+        // 触发 zoom
+        if (mousedownPos && mousedownPos.offsetX !== mouseupPos.offsetX) {
+          _this.zoom.clearMarker();
+          _this.zoom.onZoom(
+            mousedownPos,
+            mouseupPos,
+            (transform: Transform) => {
+              _this.handleZoom(transform, [mousedownPos, mouseupPos]);
+            }
+          );
+        } else {
+          _this.options.onClick(
+            d3.event,
+            _this.xScales.invert(d3.event.offsetX),
+            _this.yScales.invert(d3.event.offsetY)
+          );
+        }
+        mousedownStatus = false;
+        mousedownPos = {} as EventPosition;
+        mouseupPos = {} as EventPosition;
+      });
 
     if (cascade) {
       eventEmitter.on(plotmoveType, this.showTooltip);
@@ -313,14 +390,18 @@ export default class TsGraph {
     }
 
     // TODO: removeListener
-    window.addEventListener('mouseup', () => {
+    window.addEventListener("mouseup", () => {
       if (!isEmpty(mousedownPos)) {
         const eventPosition = mouseleavePos;
         mousedownStatus = false;
         _this.zoom.clearMarker();
-        _this.zoom.onZoom(mousedownPos, eventPosition, (transform: Transform) => {
-          _this.handleZoom(transform, [mousedownPos, eventPosition]);
-        });
+        _this.zoom.onZoom(
+          mousedownPos,
+          eventPosition,
+          (transform: Transform) => {
+            _this.handleZoom(transform, [mousedownPos, eventPosition]);
+          }
+        );
         mousedownPos = {} as EventPosition;
       }
     });
@@ -329,12 +410,17 @@ export default class TsGraph {
   }
 
   getZoomedSeries = () => {
-    const { chart: { renderTo }, series, timestamp, xkey } = this.options;
+    const {
+      chart: { renderTo },
+      series,
+      timestamp,
+      xkey,
+    } = this.options;
     const renderToWidth = renderTo.offsetWidth;
     return series.map((serie) => {
-      if (Object.prototype.toString.call(serie.data) === '[object Array]') {
+      if (Object.prototype.toString.call(serie.data) === "[object Array]") {
         const data = serie.data.filter((point) => {
-          const xVal = timestamp === 'X' ? point[xkey] * 1000 : point[xkey];
+          const xVal = timestamp === "X" ? point[xkey] * 1000 : point[xkey];
           const x = this.xScales(new Date(xVal));
           return x >= 0 && x <= renderToWidth;
         });
@@ -345,7 +431,7 @@ export default class TsGraph {
       }
       return serie;
     });
-  }
+  };
 
   handleResize = () => {
     const { chart } = this.options;
@@ -358,23 +444,25 @@ export default class TsGraph {
     this.options.chart.containerHeight = height;
     this.container.style.width = `${width}px`;
     this.container.style.height = `${height}px`;
-    this.retinaScaled(this.backCanvas, 'back');
-    this.retinaScaled(this.frontCanvas, 'front');
-    this.retinaScaled(this.eventCanvas, 'event');
+    this.retinaScaled(this.backCanvas, "back");
+    this.retinaScaled(this.frontCanvas, "front");
+    this.retinaScaled(this.eventCanvas, "event");
     this.initScales();
     this.initZoom();
     this.draw(false);
-  }
+  };
 
   handleZoom = (transform?: Transform, eventPositions?: EventPosition[]) => {
     if (this.options.onZoomWithoutDefult) {
       let times;
       if (eventPositions) {
-        times = sortBy(eventPositions, 'offsetX').map((pos: EventPosition) => this.xScales.invert(pos.offsetX));
+        times = sortBy(eventPositions, "offsetX").map((pos: EventPosition) =>
+          this.xScales.invert(pos.offsetX)
+        );
       }
       this.options.onZoomWithoutDefult(times);
     } else {
-      const { ykey, yAxis, ykeyFormatter } = this.options
+      const { ykey, yAxis, ykeyFormatter } = this.options;
       let { series } = this.options;
       if (transform) {
         this.transform = transform;
@@ -409,7 +497,7 @@ export default class TsGraph {
       this.options.onZoom(this.getZoomedSeries);
     }
     this.draw(false);
-  }
+  };
 
   handleLegendItemClick = (serieName: string) => {
     const { notDisplayedSeries } = this.options;
@@ -422,24 +510,24 @@ export default class TsGraph {
       });
     }
     this.draw(false);
-  }
+  };
 
   retinaScaled(canvas: HTMLCanvasElement, name: string) {
     const { chart, ratio } = this.options;
-    const ctx = canvas.getContext('2d')!;
-    const width = name === 'front' ? chart.containerWidth : chart.width;
-    const height = name === 'front' ? chart.containerHeight : chart.height;
-    const left = name === 'front' ? '0px' : `${chart.marginLeft}px`;
-    const top = name === 'front' ? '0px' : `${chart.marginTop}px`;
+    const ctx = canvas.getContext("2d")!;
+    const width = name === "front" ? chart.containerWidth : chart.width;
+    const height = name === "front" ? chart.containerHeight : chart.height;
+    const left = name === "front" ? "0px" : `${chart.marginLeft}px`;
+    const top = name === "front" ? "0px" : `${chart.marginTop}px`;
 
     canvas.width = width * ratio;
     canvas.height = height * ratio;
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
-    canvas.style.position = 'absolute';
+    canvas.style.position = "absolute";
     canvas.style.left = left;
     canvas.style.top = top;
-    if (name === 'front') {
+    if (name === "front") {
       ctx.translate(chart.marginLeft * ratio, chart.marginTop * ratio);
     }
     ctx.scale(ratio, ratio);
@@ -447,44 +535,54 @@ export default class TsGraph {
 
   createContainer() {
     const { chart } = this.options;
-    const container = document.createElement('div');
+    const container = document.createElement("div");
 
-    container.style.position = 'relative';
+    container.style.position = "relative";
     container.style.width = `${chart.containerWidth}px`;
     container.style.height = `${chart.containerHeight}px`;
-    container.style.overflow = 'hidden';
-    container.className = 'd3-graph-container';
+    container.style.overflow = "hidden";
+    container.className = "d3-graph-container";
     chart.renderTo.appendChild(container);
     this.container = container;
   }
 
   createCanvas() {
-    const { chart: { id } } = this.options;
+    const {
+      chart: { id },
+    } = this.options;
 
     function create(this: TsGraphType, name: string) {
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
 
-      canvas.setAttribute('id', `${id}-${name}Canvas`);
+      canvas.setAttribute("id", `${id}-${name}Canvas`);
       this.container.appendChild(canvas);
       this[`${name}Canvas`] = canvas;
       this[`${name}Context`] = context;
       this.retinaScaled(canvas, name);
     }
-    create.call(this, 'back');
-    create.call(this, 'front');
-    create.call(this, 'event');
+    create.call(this, "back");
+    create.call(this, "front");
+    create.call(this, "event");
   }
 
   initSeries() {
-    const { fillNull, series, xkey, ykey, ykeyFormatter, oykey, yAxis, stack } = this.options;
+    const {
+      fillNull,
+      series,
+      xkey,
+      ykey,
+      ykey2,
+      ykeyFormatter,
+      oykey,
+      yAxis,
+      stack,
+    } = this.options;
     let xmin = -Infinity;
     let xmax = Infinity;
     let ymin = yAxis.min;
     let ymax = yAxis.max;
 
-
-
     if (Array.isArray(series)) {
       const newSeries: Serie[] = [];
       series.forEach((serie, idx) => {
@@ -493,13 +591,19 @@ export default class TsGraph {
         let flag = false; // 起始标记，后面有连续空值即丢掉
         let dataIdx;
         for (dataIdx = 0; dataIdx < data.length; dataIdx++) {
-          const ykeyVal = data[dataIdx][oykey] ? data[dataIdx][oykey]: getYkeyValue(data[dataIdx][ykey], ykeyFormatter);
+          const ykeyVal = data[dataIdx][oykey]
+            ? data[dataIdx][oykey]
+            : getYkeyValue(data[dataIdx][ykey], ykeyFormatter);
           const item = {
             [xkey]: data[dataIdx][xkey],
             [ykey]: ykeyVal,
             [oykey]: ykeyVal,
           };
 
+          if (ykey2 && ykey2 in data[dataIdx]) {
+            item[ykey2] = data[dataIdx][ykey2];
+          }
+
           if (stack.enabled) {
             if (item[oykey] === undefined) {
               item[oykey] = getYkeyValue(item[ykey], ykeyFormatter);
@@ -507,7 +611,9 @@ export default class TsGraph {
             let preIdx = idx;
             if (preIdx > 0) {
               while (preIdx > 0) {
-                const preData = Array.isArray(series[preIdx - 1].data) ? series[preIdx - 1].data : [];
+                const preData = Array.isArray(series[preIdx - 1].data)
+                  ? series[preIdx - 1].data
+                  : [];
                 const preItem = find(preData, (pItem: SerieDataItem) => {
                   return pItem[xkey] === item[xkey];
                 });
@@ -529,17 +635,19 @@ export default class TsGraph {
           }
 
           data[dataIdx] = item;
-          
+
           const x = item[xkey];
           const y = item[ykey];
-          
 
           // filter is invalid points
           if (fillNull === undefined) {
             if (
-              dataIdx === 0
-              || dataIdx === data.length - 1
-              || (dataIdx > 0 && dataIdx < data.length -1 && typeof y === 'number' && !isNaN(y))
+              !isNaN(y) &&
+              (dataIdx === 0 ||
+                dataIdx === data.length - 1 ||
+                (dataIdx > 0 &&
+                  dataIdx < data.length - 1 &&
+                  typeof y === "number"))
             ) {
               newData.push(item);
               flag = true;
@@ -558,14 +666,14 @@ export default class TsGraph {
           if (xmax > x) {
             xmax = x;
           }
-          if (typeof y === 'number' && !isNaN(y)) {
-            if (typeof ymin !== 'number' || y < ymin) {
+          if (typeof y === "number" && !isNaN(y)) {
+            if (typeof ymin !== "number" || y < ymin) {
               ymin = y;
             }
-            if (typeof ymax !== 'number' || y > ymax) {
+            if (typeof ymax !== "number" || y > ymax) {
               ymax = y;
             }
-          } else if (typeof fillNull === 'number') {
+          } else if (typeof fillNull === "number") {
             if (fillNull < ymin) {
               ymin = fillNull;
             }
@@ -574,7 +682,7 @@ export default class TsGraph {
             }
           }
         }
-        
+
         newSeries.push({
           ...serie,
           data: newData,
@@ -599,15 +707,30 @@ export default class TsGraph {
   }
 
   initTooltip() {
-    this.tooltip = new Tooltip(this.options, this.frontContext, this.container, this.eventCanvas);
+    this.tooltip = new Tooltip(
+      this.options,
+      this.frontContext,
+      this.container,
+      this.eventCanvas
+    );
   }
 
   initZoom() {
-    this.zoom = new Zoom(this.options, this.handleZoom, this.container, this.eventCanvas);
+    this.zoom = new Zoom(
+      this.options,
+      this.handleZoom,
+      this.container,
+      this.eventCanvas
+    );
   }
 
   initLegend() {
-    this.legend = new Legend(this.options, this.handleLegendItemClick, this.container, this.eventCanvas);
+    this.legend = new Legend(
+      this.options,
+      this.handleLegendItemClick,
+      this.container,
+      this.eventCanvas
+    );
   }
 
   initScales() {
@@ -631,14 +754,17 @@ export default class TsGraph {
 
   offEvents() {
     const { cascade, cascadeScope } = this.options.tooltip;
-    const plotmoveType = cascadeScope ? `plotmove:${cascadeScope}` : 'plotmove';
-    const plotleaveType = cascadeScope ? `plotleave:${cascadeScope}` : 'plotleave';
-
-    d3.select(this.eventCanvas).on('mousemove', null)
-      .on('mouseleave', null)
-      .on('mousedown', null)
-      .on('mouseup', null)
-      .on('touchmove', null);
+    const plotmoveType = cascadeScope ? `plotmove:${cascadeScope}` : "plotmove";
+    const plotleaveType = cascadeScope
+      ? `plotleave:${cascadeScope}`
+      : "plotleave";
+
+    d3.select(this.eventCanvas)
+      .on("mousemove", null)
+      .on("mouseleave", null)
+      .on("mousedown", null)
+      .on("mouseup", null)
+      .on("touchmove", null);
     removeListener(this.options.chart.renderTo, this.handleResize);
 
     if (cascade) {