@fc-plot/ts-graph 0.22.14 → 0.22.16

package/package.json

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

package/src/index.ts

@@ -30,8 +30,11 @@ import {
   XScales,
   YScales,
 } from "./interface";
-import { getTouchPosition, getYkeyValue } from "./utils";
-import getNearestPoints from "./getNearestPoints";
+import {
+  getTouchPosition,
+  getYkeyValue,
+  getNearestPointsByEvent,
+} from "./utils";
 import "../assets/style.less";
 
 const eventEmitter = new EventEmitter();
@@ -54,6 +57,7 @@ export default class TsGraph {
   zoom!: Zoom;
   transform!: Transform;
   shapes!: Shapes;
+  isMouserover!: boolean;
   constructor(userOptions: Options) {
     const defaultOptions = {
       ratio: window.devicePixelRatio || 1,
@@ -169,6 +173,7 @@ export default class TsGraph {
   init(options: Options) {
     const { chart } = options;
 
+    this.isMouserover = false;
     this.options = options;
     this.options.notDisplayedSeries = [];
     this.options.chart.containerWidth = chart.width;
@@ -258,8 +263,10 @@ export default class TsGraph {
     return [...this.options.series];
   }
 
-  showTooltip = (eventPosition: EventPosition) => {
-    this.tooltip.draw(eventPosition, this);
+  showTooltip = (eventPosition: EventPosition, forceTimestamp?: number) => {
+    if (!this.isMouserover) {
+      this.tooltip.draw(eventPosition, this, forceTimestamp);
+    }
   };
 
   hideTooltip = () => {
@@ -276,11 +283,11 @@ export default class TsGraph {
     let mousedownPos: EventPosition = {} as EventPosition;
     let mouseupPos: EventPosition = {} as EventPosition;
     let mouseleavePos: EventPosition;
-    let isMouserover = false;
     // eslint-disable-next-line no-underscore-dangle
     const _this = this;
+    _this.isMouserover = false;
     const handleMouseover = debounce((eventPosition: EventPosition) => {
-      if (isMouserover) {
+      if (_this.isMouserover) {
         _this.tooltip.draw(eventPosition, _this);
         if (mousedownStatus) {
           _this.zoom.drawMarker(mousedownPos, eventPosition);
@@ -292,34 +299,37 @@ export default class TsGraph {
     }, 5);
     const handleClick = () => {
       if (typeof _this.options.onClick === "function") {
-        const { xkey, ykey, ykey2, oykey, timestamp, series, fillNull } =
-          _this.options;
-        const offsetX = d3.event.offsetX || d3.event.layerX;
-        const offsetY = d3.event.offsetY || d3.event.layerY;
-        const x = _this.xScales.invert(offsetX);
-        const y = _this.yScales.invert(offsetY);
-        const nearestPoints = getNearestPoints({
-          x,
-          xkey,
-          ykey,
-          ykey2,
-          oykey,
-          timestamp,
-          series,
-          fillNull,
-        });
+        const { x, y, nearestPoints } = getNearestPointsByEvent(
+          d3.event,
+          _this.options,
+          _this.xScales,
+          _this.yScales
+        );
         _this.options.onClick(d3.event, x, y, nearestPoints);
       }
     };
     d3.select(this.eventCanvas)
       .on("mousemove", function mousemove(this: HTMLCanvasElement) {
-        isMouserover = true;
+        _this.isMouserover = true;
         handleMouseover(d3.event);
-        if (cascade) eventEmitter.emit(plotmoveType, d3.event);
+        if (cascade) {
+          const { nearestPoints } = getNearestPointsByEvent(
+            d3.event,
+            _this.options,
+            _this.xScales,
+            _this.yScales
+          );
+          let timestamp;
+          if (nearestPoints.length) {
+            const firstNearestPoint = nearestPoints[0];
+            timestamp = firstNearestPoint.timestamp;
+          }
+          eventEmitter.emit(plotmoveType, d3.event, timestamp);
+        }
       })
       .on("mouseleave", function mouseleave(this: HTMLCanvasElement) {
         mouseleavePos = d3.event;
-        isMouserover = false;
+        _this.isMouserover = false;
         handleMouseLeave();
         if (cascade) eventEmitter.emit(plotleaveType);
       })
@@ -384,7 +394,7 @@ export default class TsGraph {
         }
       })
       .on("touchend", function mouseleave(this: HTMLCanvasElement) {
-        isMouserover = false;
+        _this.isMouserover = false;
         handleMouseLeave();
 
         // 触发 zoom

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,22 +156,25 @@ export default class Tooltip {
   draw(
     eventPosition: EventPosition,
     instance: TsGraph,
-    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 轴上
-        this.drawCrosshair(nearestPoints[0].x);
-        this.drawSymbol(nearestPoints);
-        this.drawModal(nearestPoints, eventPosition);
-      }
-      if (cbk && Object.prototype.toString.call(cbk) === "[object Function]") {
-        cbk(nearestPoints);
-      }
-    });
+    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);
+        }
+      },
+      forceTimestamp
+    );
   }
 
   drawModal(nearestPoints: Point[], eventPosition: EventPosition) {

package/src/utils.ts

@@ -1,6 +1,13 @@
 import * as d3 from "d3";
-import { max } from "lodash";
-import { Timestamp } from "./interface";
+import { max, pickBy } from "lodash";
+import {
+  Timestamp,
+  Options,
+  XScales,
+  YScales,
+  NearestPoint,
+} from "./interface";
+import getNearestPoints from "./getNearestPoints";
 
 type Point = {
   x: number;
@@ -119,3 +126,61 @@ export function getYkeyValue(
   }
   return val;
 }
+
+export function getNearestPointsByEvent(
+  event: any,
+  options: Options,
+  xScales: XScales,
+  yScales: YScales
+) {
+  const { xkey, ykey, ykey2, oykey, timestamp, series, fillNull } = options;
+  const offsetX = event.offsetX || event.layerX;
+  const offsetY = event.offsetY || event.layerY;
+  const x = xScales.invert(offsetX);
+  const y = yScales.invert(offsetY);
+  const nearestPoints = getNearestPoints({
+    x,
+    xkey,
+    ykey,
+    ykey2,
+    oykey,
+    timestamp,
+    series,
+    fillNull,
+  });
+  return {
+    x,
+    y,
+    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;
+}