@fc-plot/ts-graph 0.22.15 → 0.22.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fc-plot/ts-graph",
-  "version": "0.22.15",
+  "version": "0.22.17",
   "scripts": {
     "commit": "npx git-cz",
     "compile": "fetk run compile",

package/src/index.ts

@@ -35,7 +35,6 @@ import {
   getYkeyValue,
   getNearestPointsByEvent,
 } from "./utils";
-import getNearestPoints from "./getNearestPoints";
 import "../assets/style.less";
 
 const eventEmitter = new EventEmitter();
@@ -280,6 +279,7 @@ export default class TsGraph {
     const plotleaveType = cascadeScope
       ? `plotleave:${cascadeScope}`
       : "plotleave";
+    const zoomEventType = cascadeScope ? `zoom:${cascadeScope}` : "zoom";
     let mousedownStatus = false;
     let mousedownPos: EventPosition = {} as EventPosition;
     let mouseupPos: EventPosition = {} as EventPosition;
@@ -344,14 +344,7 @@ export default class TsGraph {
         d3.event.stopPropagation();
         const eventPosition = d3.event as EventPosition;
         if (mousedownPos && mousedownPos.layerX !== eventPosition.layerX) {
-          _this.zoom.clearMarker();
-          _this.zoom.onZoom(
-            mousedownPos,
-            eventPosition,
-            (transform: Transform) => {
-              _this.handleZoom(transform, [mousedownPos, eventPosition]);
-            }
-          );
+          eventEmitter.emit(zoomEventType, mousedownPos, eventPosition);
         } else {
           handleClick();
         }
@@ -400,14 +393,7 @@ export default class TsGraph {
 
         // 触发 zoom
         if (mousedownPos && mousedownPos.layerX !== mouseupPos.layerX) {
-          _this.zoom.clearMarker();
-          _this.zoom.onZoom(
-            mousedownPos,
-            mouseupPos,
-            (transform: Transform) => {
-              _this.handleZoom(transform, [mousedownPos, mouseupPos]);
-            }
-          );
+          eventEmitter.emit(zoomEventType, mousedownPos, mouseupPos);
         } else {
           handleClick();
         }
@@ -419,6 +405,7 @@ export default class TsGraph {
     if (cascade) {
       eventEmitter.on(plotmoveType, this.showTooltip);
       eventEmitter.on(plotleaveType, this.hideTooltip);
+      eventEmitter.on(zoomEventType, this.handleZoomEvent);
     }
 
     // TODO: removeListener
@@ -426,14 +413,7 @@ export default class TsGraph {
       if (!isEmpty(mousedownPos)) {
         const eventPosition = mouseleavePos;
         mousedownStatus = false;
-        _this.zoom.clearMarker();
-        _this.zoom.onZoom(
-          mousedownPos,
-          eventPosition,
-          (transform: Transform) => {
-            _this.handleZoom(transform, [mousedownPos, eventPosition]);
-          }
-        );
+        eventEmitter.emit(zoomEventType, mousedownPos, eventPosition);
         mousedownPos = {} as EventPosition;
       }
     });
@@ -484,6 +464,16 @@ export default class TsGraph {
     this.draw(false);
   };
 
+  handleZoomEvent = (
+    mousedownPos: EventPosition,
+    eventPosition: EventPosition
+  ) => {
+    this.zoom.clearMarker();
+    this.zoom.onZoom(mousedownPos, eventPosition, (transform: Transform) => {
+      this.handleZoom(transform, [mousedownPos, eventPosition]);
+    });
+  };
+
   handleZoom = (transform?: Transform, eventPositions?: EventPosition[]) => {
     if (this.options.onZoomWithoutDefult) {
       let times;
@@ -783,7 +773,8 @@ export default class TsGraph {
       this.options,
       this.handleZoom,
       this.container,
-      this.eventCanvas
+      this.eventCanvas,
+      eventEmitter
     );
   }
 

package/src/tooltip.ts

@@ -9,6 +9,7 @@ import {
 import { Options, EventPosition, Point, XScales, YScales } from "./interface";
 import TsGraph from "./index";
 import getNearestPoints from "./getNearestPoints";
+import { getPointsByTime } from "./utils";
 
 export default class Tooltip {
   options: Options;
@@ -67,7 +68,8 @@ export default class Tooltip {
     eventPosition: EventPosition,
     xScales: XScales,
     yScales: YScales,
-    cbk: (nearestPoints: Point[]) => void
+    cbk: (nearestPoints: Point[]) => void,
+    forceTimestamp?: number
   ) {
     const {
       series = [],
@@ -80,23 +82,28 @@ export default class Tooltip {
       timestamp,
       fillNull,
     } = this.options;
-    // const containerRect = this.container.getBoundingClientRect();
     const offsetX = eventPosition.offsetX || eventPosition.layerX;
     const x = xScales.invert(offsetX);
     let nearestPoints: Point[] = [];
 
     if (this.isMouserover === false) return;
+    let tempNearestPoints: any[] = [];
+    if (forceTimestamp) {
+      tempNearestPoints = getPointsByTime(forceTimestamp, this.options);
+    } else {
+      tempNearestPoints = getNearestPoints({
+        x,
+        xkey,
+        ykey,
+        ykey2,
+        oykey,
+        timestamp,
+        series,
+        fillNull,
+      });
+    }
 
-    nearestPoints = getNearestPoints({
-      x,
-      xkey,
-      ykey,
-      ykey2,
-      oykey,
-      timestamp,
-      series,
-      fillNull,
-    }).map((item: any) => {
+    nearestPoints = tempNearestPoints.map((item: any) => {
       return {
         ...item,
         x: xScales(item.timestamp),
@@ -149,26 +156,25 @@ export default class Tooltip {
   draw(
     eventPosition: EventPosition,
     instance: TsGraph,
-    forceTimestamp?: number,
-    cbk?: (nearestPoints: Point[]) => void
+    forceTimestamp?: number
   ) {
     const { xScales, yScales, yAxis } = instance;
     this.isMouserover = true;
-    this.getNearestPoints(eventPosition, xScales, yScales, (nearestPoints) => {
-      this.clear();
-      if (nearestPoints.length) {
-        if (nearestPoints[0].x < yAxis.tickMaxWidth) return; // 判断是否在 y 轴上
-        if (forceTimestamp && nearestPoints[0].timestamp !== forceTimestamp) {
-          return;
+    this.getNearestPoints(
+      eventPosition,
+      xScales,
+      yScales,
+      (nearestPoints) => {
+        this.clear();
+        if (nearestPoints.length) {
+          if (nearestPoints[0].x < yAxis.tickMaxWidth) return; // 判断是否在 y 轴上
+          this.drawCrosshair(nearestPoints[0].x);
+          this.drawSymbol(nearestPoints);
+          this.drawModal(nearestPoints, eventPosition);
         }
-        this.drawCrosshair(nearestPoints[0].x);
-        this.drawSymbol(nearestPoints);
-        this.drawModal(nearestPoints, eventPosition);
-      }
-      if (cbk && Object.prototype.toString.call(cbk) === "[object Function]") {
-        cbk(nearestPoints);
-      }
-    });
+      },
+      forceTimestamp
+    );
   }
 
   drawModal(nearestPoints: Point[], eventPosition: EventPosition) {

package/src/utils.ts

@@ -1,6 +1,12 @@
 import * as d3 from "d3";
-import { max } from "lodash";
-import { Timestamp, Options, XScales, YScales } from "./interface";
+import { max, pickBy } from "lodash";
+import {
+  Timestamp,
+  Options,
+  XScales,
+  YScales,
+  NearestPoint,
+} from "./interface";
 import getNearestPoints from "./getNearestPoints";
 
 type Point = {
@@ -148,3 +154,33 @@ export function getNearestPointsByEvent(
     nearestPoints,
   };
 }
+
+export function getPointsByTime(time: number, options: Options) {
+  const { series = [], xkey, ykey, oykey, timestamp } = options;
+  const points: NearestPoint[] = [];
+  series.forEach((serie, i) => {
+    if (serie.visible === false) return;
+    const { name, color } = serie;
+    const serieWithEffective = pickBy(serie, (_val: string, key: string) => {
+      return key !== "data";
+    });
+    let { data = [] } = serie;
+    if (Object.prototype.toString.call(data) !== "[object Array]") return;
+    data.forEach((item) => {
+      const x = getMsTs(item[xkey], timestamp);
+      if (x === time) {
+        points.push({
+          ...item,
+          name,
+          color,
+          timestamp: x,
+          value: item[ykey],
+          origin: item[oykey],
+          serieIndex: i,
+          serieOptions: serieWithEffective,
+        });
+      }
+    });
+  });
+  return points;
+}

package/src/zoom.ts

@@ -1,4 +1,5 @@
 import * as d3 from "d3";
+import EventEmitter from "events";
 import { Options, EventPosition, Transform } from "./interface";
 
 type ResetFuncType = (
@@ -10,14 +11,17 @@ export default class Zoom {
   options: Options;
 
   reset: ResetFuncType;
+  eventEmitter: EventEmitter;
 
   constructor(
     userOptions: Options,
     reset: ResetFuncType,
     container: HTMLElement,
-    canvas: HTMLCanvasElement
+    canvas: HTMLCanvasElement,
+    eventEmitter: EventEmitter
   ) {
     this.options = userOptions;
+    this.eventEmitter = eventEmitter;
     this.init(container, canvas);
     this.reset = reset;
   }
@@ -54,15 +58,32 @@ export default class Zoom {
   onReset() {
     const {
       chart: { id },
+      tooltip,
     } = this.options;
     const resetEle = document.getElementById(
       `${id}-zoom-resetBtn`
     ) as HTMLElement;
 
+    const { cascade, cascadeScope } = tooltip;
+    const zoomResetEventType = cascadeScope
+      ? `zoomReset:${cascadeScope}`
+      : "zoomReset";
+
+    if (cascade) {
+      this.eventEmitter.on(zoomResetEventType, () => {
+        this.reset();
+        this.clearResetBtn();
+      });
+    }
+
     resetEle?.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.reset();
-      this.clearResetBtn();
+      if (cascade) {
+        this.eventEmitter.emit(zoomResetEventType, e);
+      } else {
+        this.reset();
+        this.clearResetBtn();
+      }
     });
   }