@fc-plot/ts-graph 0.23.2 → 0.24.0

package/examples/index.js

@@ -39,13 +39,12 @@ newSeries.push({
 });
 
 newSeries.push(origin);
-console.log(newSeries);
 
 function random(m, n) {
   return Math.floor(Math.random() * (n - m + 1));
 }
 
-function generateSeries(idx, seriesCount = 3) {
+function generateSeries(idx, seriesCount = 2) {
   const series = [];
 
   for (let n = 1; n <= seriesCount; n++) {
@@ -56,7 +55,8 @@ function generateSeries(idx, seriesCount = 3) {
       seriesData.push({
         timestamp:
           1609430399 + m * (m < 100 ? (idx === 0 ? 1000 : 1001) : 1000),
-        value: m < 100 ? random(0, 100000000) : random(0, 1000000000),
+        value: random(0, n === 1 ? 100 : 1000000),
+        // value: m < 100 ? random(0, 100000000) : random(0, 1000000000),
       });
     }
 
@@ -65,20 +65,19 @@ function generateSeries(idx, seriesCount = 3) {
       data: seriesData,
     });
   }
+  console.log("series", series);
   return series;
 }
 
-const graphsCount = 2;
+const graphsCount = 1;
 const charts = [];
 
-console.log(222, generateSeries(0));
-
 for (let i = 0; i < graphsCount; i++) {
   const id = `c${i}`;
   const renderTo = document.createElement("div");
   renderTo.id = id;
-  renderTo.style.width = "1000px";
-  renderTo.style.height = "200px";
+  renderTo.style.width = `${(i + 1) * 1000}px`;
+  renderTo.style.height = `${(i + 1) * 400}px`;
   renderTo.style.margin = "20px";
   renderTo.style.border = "1px solid #ccc";
   document.body.appendChild(renderTo);
@@ -100,6 +99,10 @@ for (let i = 0; i < graphsCount; i++) {
     line: {
       width: 1,
     },
+    yAxis2: {
+      visible: true,
+      matchName: "series_2",
+    },
     // xAxis: {
     //   visible: false,
     // },

package/package.json

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

package/src/index.ts

@@ -14,6 +14,7 @@ import { addListener, removeListener } from "resize-detector";
 import EventEmitter from "events";
 import XAxis from "./xAxis";
 import YAxis from "./yAxis";
+import YAxis2 from "./yAxis2";
 import Tooltip from "./tooltip";
 import Line from "./line";
 import Bar from "./bar";
@@ -49,7 +50,9 @@ export default class TsGraph {
   xAxis!: XAxis;
   xScales!: XScales;
   yAxis!: YAxis;
+  yAxis2!: YAxis2;
   yScales!: YScales;
+  y2Scales!: YScales;
   line!: Line;
   bar!: Bar;
   legend!: Legend;
@@ -85,8 +88,8 @@ export default class TsGraph {
           "#339966",
           "#993333",
         ],
-        width: userOptions.chart.renderTo.offsetWidth,
-        height: userOptions.chart.renderTo.offsetHeight || 350,
+        width: userOptions.chart.renderTo.clientWidth,
+        height: userOptions.chart.renderTo.clientHeight || 350,
         marginTop: 10,
         marginRight: 10,
         marginBottom: 10,
@@ -123,6 +126,22 @@ export default class TsGraph {
           fontSize: 11,
         },
       },
+      yAxis2: {
+        scale: {
+          type: "linear",
+          log: 10,
+        },
+        visible: false,
+        lineColor: "#ccc",
+        lineWidth: 1,
+        tickLength: 5,
+        tickpadding: 5,
+        tickColor: "#ccc",
+        labels: {
+          color: "#999",
+          fontSize: 11,
+        },
+      },
       type: "line",
       line: {
         enable: true,
@@ -218,7 +237,7 @@ export default class TsGraph {
       this.xAxis.draw(this.xScales);
     }
     if (this.options.type === "line") {
-      this.line.draw(this.xScales, this.yScales);
+      this.line.draw(this.xScales, this.yScales, this.y2Scales);
     }
     if (this.options.type === "bar") {
       this.bar.draw(this.xScales, this.yScales, transform);
@@ -228,6 +247,9 @@ export default class TsGraph {
     if (this.options.yAxis.visible) {
       this.yAxis.draw(this.yScales);
     }
+    if (this.options.yAxis2.visible && this.options.yAxis2.matchName) {
+      this.yAxis2.draw(this.y2Scales);
+    }
     if (redrawLegend) {
       this.legend.draw();
     }
@@ -264,9 +286,24 @@ export default class TsGraph {
     return [...this.options.series];
   }
 
-  showTooltip = (eventPosition: EventPosition, forceTimestamp?: number) => {
+  showTooltip = (
+    eventPosition: EventPosition,
+    forceTimestamp: number,
+    scaleX: number,
+    scaleY: number
+  ) => {
     if (!this.isMouserover) {
-      this.tooltip.draw(eventPosition, this, forceTimestamp);
+      const width = this.options.chart.width;
+      const height = this.options.chart.height;
+      const crosshairX = width * scaleX;
+      const crosshairY = height * scaleY;
+      this.tooltip.draw(
+        eventPosition,
+        this,
+        forceTimestamp,
+        crosshairX,
+        crosshairY
+      );
     }
   };
 
@@ -312,6 +349,7 @@ export default class TsGraph {
     d3.select(this.eventCanvas)
       .on("mousemove", function mousemove(this: HTMLCanvasElement) {
         _this.isMouserover = true;
+
         handleMouseover(d3.event);
         if (cascade) {
           const { nearestPoints } = getNearestPointsByEvent(
@@ -325,7 +363,17 @@ export default class TsGraph {
             const firstNearestPoint = nearestPoints[0];
             timestamp = firstNearestPoint.timestamp;
           }
-          eventEmitter.emit(plotmoveType, d3.event, timestamp);
+          const x = d3.event.offsetX || d3.event.layerX;
+          const y = d3.event.offsetY || d3.event.layerY;
+          const width = _this.options.chart.width;
+          const height = _this.options.chart.height;
+          eventEmitter.emit(
+            plotmoveType,
+            d3.event,
+            timestamp,
+            x / width,
+            y / height
+          );
         }
       })
       .on("mouseleave", function mouseleave(this: HTMLCanvasElement) {
@@ -494,7 +542,7 @@ export default class TsGraph {
       }
       this.options.onZoomWithoutDefult(times);
     } else {
-      const { ykey, ykey2, yAxis, ykeyFormatter } = this.options;
+      const { ykey, ykey2, yAxis, yAxis2, ykeyFormatter } = this.options;
       let { series } = this.options;
       if (transform) {
         this.transform = transform;
@@ -508,6 +556,8 @@ export default class TsGraph {
       if (Array.isArray(series)) {
         let ymin = yAxis.min || -Infinity;
         let ymax = yAxis.max || Infinity;
+        let y2min = yAxis2.min || -Infinity;
+        let y2max = yAxis2.max || Infinity;
         for (const serie of series) {
           const data = Array.isArray(serie.data) ? serie.data : [];
           let dataIdx;
@@ -517,11 +567,24 @@ export default class TsGraph {
 
             if (y === null) continue;
             // get axis domain
-            if (ymin < y) {
-              ymin = y;
-            }
-            if (ymax > y) {
-              ymax = y;
+            if (
+              yAxis2.visible &&
+              yAxis2.matchName &&
+              yAxis2.matchName === serie.name
+            ) {
+              if (y2min < y) {
+                y2min = y;
+              }
+              if (y2max > y) {
+                y2max = y;
+              }
+            } else {
+              if (ymin < y) {
+                ymin = y;
+              }
+              if (ymax > y) {
+                ymax = y;
+              }
             }
             if (ykey2) {
               const y2 = getYkeyValue(item[ykey2], ykeyFormatter);
@@ -538,6 +601,9 @@ export default class TsGraph {
         // 如果缩放至没有数据点(无法计算出 ymin 和 ymax)，则不更新 domain
         if (ymin !== -Infinity && ymax !== Infinity) {
           this.yAxis.setDomain(this.yScales, { ymin, ymax });
+          if (yAxis2.visible && yAxis2.matchName) {
+            this.yAxis2.setDomain(this.y2Scales, { y2min, y2max });
+          }
         }
       }
       this.options.onZoom(this.getZoomedSeries);
@@ -623,6 +689,7 @@ export default class TsGraph {
       oykey,
       xAxis,
       yAxis,
+      yAxis2,
       stack,
       notDisplayedSeries,
     } = this.options;
@@ -630,6 +697,8 @@ export default class TsGraph {
     let xmax = xAxis.max || Infinity;
     let ymin = yAxis.min;
     let ymax = yAxis.max;
+    let y2min = yAxis2.min;
+    let y2max = yAxis2.max;
 
     if (Array.isArray(series)) {
       const newSeries: Serie[] = [];
@@ -719,17 +788,30 @@ export default class TsGraph {
             xmax = x;
           }
           if (typeof y === "number" && !isNaN(y)) {
-            if (typeof ymin !== "number" || y < ymin) {
-              ymin = y;
-            }
-            if (typeof y2 === "number" && y2 < ymin) {
-              ymin = y2;
-            }
-            if (typeof ymax !== "number" || y > ymax) {
-              ymax = y;
-            }
-            if (typeof y2 === "number" && y2 > ymax) {
-              ymax = y2;
+            if (
+              yAxis2.visible &&
+              yAxis2.matchName &&
+              yAxis2.matchName === serie.name
+            ) {
+              if (typeof y2min !== "number" || y < y2min) {
+                y2min = y;
+              }
+              if (typeof y2max !== "number" || y > y2max) {
+                y2max = y;
+              }
+            } else {
+              if (typeof ymin !== "number" || y < ymin) {
+                ymin = y;
+              }
+              if (typeof y2 === "number" && y2 < ymin) {
+                ymin = y2;
+              }
+              if (typeof ymax !== "number" || y > ymax) {
+                ymax = y;
+              }
+              if (typeof y2 === "number" && y2 > ymax) {
+                ymax = y2;
+              }
             }
           } else if (typeof fillNull === "number") {
             if (fillNull < ymin) {
@@ -769,6 +851,8 @@ export default class TsGraph {
       this.options.xmax = xmax;
       this.options.ymin = ymin;
       this.options.ymax = ymax;
+      this.options.y2min = y2min;
+      this.options.y2max = y2max;
     }
   }
 
@@ -812,7 +896,18 @@ export default class TsGraph {
     this.yAxis = yAxis;
     this.yScales = yAxis.init();
 
-    const xAxis = new XAxis(this.options, this.backContext, this.yAxis);
+    if (this.options.yAxis2.visible && this.options.yAxis2.matchName) {
+      const yAxis2 = new YAxis2(this.options, this.backContext);
+      this.yAxis2 = yAxis2;
+      this.y2Scales = yAxis2.init();
+    }
+
+    const xAxis = new XAxis(
+      this.options,
+      this.backContext,
+      this.yAxis,
+      this.yAxis2
+    );
     this.xAxis = xAxis;
     let xScales = xAxis.init();
     if (this.transform) {

package/src/interface.ts

@@ -82,6 +82,7 @@ export type YAxis = {
   plotLines: PlotLine[];
   plotLinesFixed?: boolean;
   tickValueFormatter?: (value: number) => string;
+  matchName?: string; // 用于匹配 y 轴，如果不填则默认匹配第一个 y 轴
 };
 
 export type SerieDataItemMarker = {
@@ -178,6 +179,7 @@ export interface Options extends BaseOptions {
   chart: Chart;
   xAxis: XAxis;
   yAxis: YAxis;
+  yAxis2: YAxis;
   tooltip: Tooltip;
   type: "line" | "bar";
   line: {
@@ -204,6 +206,8 @@ export interface Options extends BaseOptions {
   xmax: number;
   ymin: number;
   ymax: number;
+  y2min: number;
+  y2max: number;
   shapes: any[];
   onClick: (
     d3Event: any,

package/src/line.ts

@@ -11,11 +11,12 @@ export default class Line {
     this.ctx = ctx;
   }
 
-  draw(xScales: XScales, yScales: YScales) {
+  draw(xScales: XScales, yScales: YScales, y2Scales: YScales) {
     const {
       series,
       chart: { colors, height },
       xAxis,
+      yAxis2,
       xkey,
       ykey,
       ykey2,
@@ -37,12 +38,16 @@ export default class Line {
       const x = xScales(new Date(xVal));
       return x;
     };
-    const yAccessor = (d: SerieDataItem, ykey: any) => {
+    const yAccessor = (d: SerieDataItem, ykey: any, serieName: string) => {
       const val = d[ykey];
+      const yScalesFunc =
+        yAxis2.visible && yAxis2.matchName && serieName === yAxis2.matchName
+          ? y2Scales
+          : yScales;
       if (typeof val === "number" && !isNaN(val)) {
-        return yScales(val);
+        return yScalesFunc(val);
       } else if (typeof fillNull === "number") {
-        return yScales(fillNull);
+        return yScalesFunc(fillNull);
       }
       return undefined;
     };
@@ -73,7 +78,7 @@ export default class Line {
           .x(xAccessor)
           .y0((d: SerieDataItem) => {
             if (ykey2 && ykey2 in d) {
-              return yAccessor(d, ykey);
+              return yAccessor(d, ykey, serie.name);
             }
             if (xAxis.visible) {
               return height - xAxis.tickpadding - xAxis.labels.fontSize - 5;
@@ -82,9 +87,9 @@ export default class Line {
           })
           .y1((d: SerieDataItem) => {
             if (ykey2 && ykey2 in d) {
-              return yAccessor(d, ykey2);
+              return yAccessor(d, ykey2, serie.name);
             }
-            return yAccessor(d, ykey);
+            return yAccessor(d, ykey, serie.name);
           })
           .defined(definedAccessor)
           .context(ctx);
@@ -110,7 +115,7 @@ export default class Line {
           .line()
           .x(xAccessor)
           .y((d: SerieDataItem) => {
-            return yAccessor(d, ykey);
+            return yAccessor(d, ykey, serie.name);
           })
           .defined(definedAccessor)
           .context(ctx);

package/src/tooltip.ts

@@ -68,6 +68,7 @@ export default class Tooltip {
     eventPosition: EventPosition,
     xScales: XScales,
     yScales: YScales,
+    y2Scales: YScales,
     cbk: (nearestPoints: Point[], nearestPoint: Point) => void,
     forceTimestamp?: number
   ) {
@@ -81,6 +82,7 @@ export default class Tooltip {
       oykey,
       timestamp,
       fillNull,
+      yAxis2,
     } = this.options;
     const offsetX = eventPosition.offsetX || eventPosition.layerX;
     const offsetY = eventPosition.offsetY || eventPosition.layerY;
@@ -106,10 +108,14 @@ export default class Tooltip {
     }
 
     nearestPoints = tempNearestPoints.map((item: any) => {
+      const yScalesFunc =
+        yAxis2.visible && yAxis2.matchName && item.name === yAxis2.matchName
+          ? y2Scales
+          : yScales;
       return {
         ...item,
         x: xScales(item.timestamp),
-        y: yScales(item.value),
+        y: yScalesFunc(item.value),
         color: item.color || getColor(colors, item.serieIndex),
       };
     });
@@ -159,20 +165,23 @@ export default class Tooltip {
   draw(
     eventPosition: EventPosition,
     instance: TsGraph,
-    forceTimestamp?: number
+    forceTimestamp?: number,
+    crosshairX?: number,
+    crosshairY?: number
   ) {
-    const { xScales, yScales, yAxis, options } = instance;
+    const { xScales, yScales, y2Scales, yAxis, options } = instance;
     const cascadeMode = options?.tooltip?.cascadeMode;
     this.isMouserover = true;
     this.getNearestPoints(
       eventPosition,
       xScales,
       yScales,
+      y2Scales,
       (nearestPoints, nearestPoint) => {
         this.clear();
+        this.drawCrosshair(eventPosition, crosshairX, crosshairY);
         if (nearestPoints.length) {
           if (nearestPoints[0].x < yAxis.tickMaxWidth) return; // 判断是否在 y 轴上
-          this.drawCrosshair(eventPosition);
           // 共享 tooltip 的情况下才会存在 forceTimestamp 值
           // 当 forceTimestamp 有值时，模式必须是 sharedTooltip 才会绘制 symbol 和 modal
           if (
@@ -180,7 +189,13 @@ export default class Tooltip {
             (forceTimestamp !== undefined && cascadeMode === "sharedTooltip")
           ) {
             this.drawSymbol(nearestPoints);
-            this.drawModal(nearestPoints, nearestPoint, eventPosition);
+            this.drawModal(
+              nearestPoints,
+              nearestPoint,
+              eventPosition,
+              crosshairX,
+              crosshairY
+            );
           }
         }
       },
@@ -191,7 +206,9 @@ export default class Tooltip {
   drawModal(
     nearestPoints: Point[],
     nearestPoint: Point,
-    eventPosition: EventPosition
+    eventPosition: EventPosition,
+    crosshairX?: number,
+    crosshairY?: number
   ) {
     const {
       chart: { id, renderTo },
@@ -342,8 +359,8 @@ export default class Tooltip {
     const tooltipWidth = wrapEle.offsetWidth;
     const tooltipHeight = wrapEle.offsetHeight;
     const containerRect = this.container.getBoundingClientRect();
-    const clientX = eventPosition.layerX + containerRect.left;
-    const clientY = eventPosition.layerY + containerRect.top;
+    const clientX = (crosshairX || eventPosition.layerX) + containerRect.left;
+    const clientY = (crosshairY || eventPosition.layerY) + containerRect.top;
 
     tooltipNode.style.left = `${clientX - tooltipWidth - 20}px`;
     tooltipNode.style.top = `${clientY + 20}px`;
@@ -383,11 +400,15 @@ export default class Tooltip {
     });
   }
 
-  drawCrosshair(eventPosition: EventPosition) {
+  drawCrosshair(
+    eventPosition: EventPosition,
+    crosshairX?: number,
+    crosshairY?: number
+  ) {
     const { ctx, options } = this;
     const { chart, xAxis } = options;
-    const x = eventPosition.offsetX || eventPosition.layerX;
-    const y = eventPosition.offsetY || eventPosition.layerY;
+    const x = crosshairX || eventPosition.offsetX || eventPosition.layerX;
+    const y = crosshairY || eventPosition.offsetY || eventPosition.layerY;
     const tickBottom =
       chart.height -
       xAxis.tickpadding -

package/src/utils.ts

@@ -1,12 +1,15 @@
 import * as d3 from "d3";
-import { max, pickBy } from "lodash";
+import { max, pickBy, map, find } from "lodash";
 import {
   Timestamp,
   Options,
   XScales,
   YScales,
   NearestPoint,
+  Serie,
+  SerieDataItem,
 } from "./interface";
+
 import getNearestPoints from "./getNearestPoints";
 
 type Point = {

package/src/xAxis.ts

@@ -2,19 +2,23 @@ import * as d3 from "d3";
 import { getMsTs } from "./utils";
 import { Options, XScales } from "./interface";
 import YAxis from "./yAxis";
+import Y2Axis from "./yAxis2";
 
 export default class XAxis {
   options: Options;
   ctx: CanvasRenderingContext2D;
   yAxis: YAxis;
+  y2Axis: Y2Axis;
   constructor(
     userOptions: Options,
     ctx: CanvasRenderingContext2D,
-    yAxis: YAxis
+    yAxis: YAxis,
+    y2Axis: Y2Axis
   ) {
     this.options = userOptions;
     this.ctx = ctx;
     this.yAxis = yAxis;
+    this.y2Axis = y2Axis;
   }
 
   init() {
@@ -25,9 +29,13 @@ export default class XAxis {
       xmax,
       xAxis,
     } = this.options;
+    const y2AxisTickMaxWidth = this.y2Axis?.tickMaxWidth || 0;
     const xScales = d3
       .scaleTime()
-      .range([xAxis.visible ? this.yAxis.tickMaxWidth : 0, width]);
+      .range([
+        xAxis.visible ? this.yAxis.tickMaxWidth : 0,
+        width - y2AxisTickMaxWidth,
+      ]);
 
     xScales.domain([
       getMsTs(xmin, timestamp) - (xmin === xmax ? 1000 : 0),
@@ -62,7 +70,7 @@ export default class XAxis {
 
     // draw line
     ctx.beginPath();
-    ctx.moveTo(0, tickBottom - xAxis.tickLength);
+    ctx.moveTo(this.yAxis.tickMaxWidth, tickBottom - xAxis.tickLength);
     ctx.lineTo(chart.width, tickBottom - xAxis.tickLength);
     ctx.lineWidth = 1;
     ctx.strokeStyle = xAxis.lineColor;

package/src/yAxis.ts

@@ -3,10 +3,6 @@ import { map, floor } from "lodash";
 import { Options, YScales } from "./interface";
 import { shortUint, getMaxWidthByYAxisTicks } from "./utils";
 
-interface RealData {
-  [index: string]: any;
-}
-
 export default class YAxis {
   options: Options;
   ctx: CanvasRenderingContext2D;
@@ -40,38 +36,6 @@ export default class YAxis {
     return yScales;
   }
 
-  /**
-   * 返回真实的数据，其中包含 plotLines
-   * @param  {Array}  data [description]
-   * @return {Array}       [description]
-   */
-  getRealData(data: RealData) {
-    const {
-      yAxis: { plotLines },
-      ykey,
-      fillNull,
-    } = this.options;
-
-    if (Array.isArray(data)) {
-      if (Array.isArray(plotLines)) {
-        plotLines.forEach((plotLine) => {
-          if (typeof plotLine.value === "number") {
-            data.push({
-              [ykey]: plotLine.value,
-            });
-          }
-        });
-      }
-      if (typeof fillNull === "number") {
-        data.push({
-          [ykey]: fillNull,
-        });
-      }
-      return data;
-    }
-    return [];
-  }
-
   getPlotLinesMaxAbs() {
     const {
       yAxis: { plotLines },
@@ -187,7 +151,7 @@ export default class YAxis {
     ctx.beginPath();
     this.ticks.forEach((d) => {
       const yValue = yScales(d);
-      ctx.moveTo(0, yValue);
+      ctx.moveTo(this.tickMaxWidth, yValue);
       ctx.lineTo(chart.width, yValue);
     });
     ctx.lineWidth = 1;