@fc-plot/ts-graph 0.23.3 → 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,18 +65,19 @@ function generateSeries(idx, seriesCount = 3) {
       data: seriesData,
     });
   }
+  console.log("series", series);
   return series;
 }
 
-const graphsCount = 3;
+const graphsCount = 1;
 const charts = [];
 
 for (let i = 0; i < graphsCount; i++) {
   const id = `c${i}`;
   const renderTo = document.createElement("div");
   renderTo.id = id;
-  renderTo.style.width = `${(i + 1) * 200}px`;
-  renderTo.style.height = `${(i + 1) * 100}px`;
+  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);
@@ -98,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.3",
+  "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();
     }
@@ -520,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;
@@ -534,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;
@@ -543,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);
@@ -564,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);
@@ -649,6 +689,7 @@ export default class TsGraph {
       oykey,
       xAxis,
       yAxis,
+      yAxis2,
       stack,
       notDisplayedSeries,
     } = this.options;
@@ -656,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[] = [];
@@ -745,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) {
@@ -795,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;
     }
   }
 
@@ -838,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),
       };
     });
@@ -163,13 +169,14 @@ export default class Tooltip {
     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);

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;

package/src/yAxis2.ts

@@ -0,0 +1,154 @@
+import * as d3 from "d3";
+import { map, floor } from "lodash";
+import { Options, YScales } from "./interface";
+import { shortUint, getMaxWidthByYAxisTicks } from "./utils";
+
+export default class YAxis {
+  options: Options;
+  ctx: CanvasRenderingContext2D;
+  tickLength: number;
+  ticks: number[];
+  tickMaxWidth: number; // 刻度文字最大宽度
+
+  constructor(userOptions: Options, ctx: CanvasRenderingContext2D) {
+    this.options = userOptions;
+    const { yAxis } = userOptions;
+    ctx.font = `${yAxis.labels.fontSize}px Palantino`;
+    this.ctx = ctx;
+    this.tickLength = Math.floor(userOptions.chart.height / 50);
+    this.ticks = [];
+    this.tickMaxWidth = 0;
+  }
+
+  init() {
+    const { chart, xAxis, yAxis } = this.options;
+    let scale = d3.scaleLinear();
+    if (yAxis.scale && yAxis.scale.type === "log") {
+      scale = d3.scaleLog().base(yAxis.scale.log || 10);
+    }
+    const yScales = scale.range([
+      chart.height -
+        (xAxis.labels.fontSize + xAxis.tickpadding + xAxis.tickLength),
+      10,
+    ]);
+
+    this.setDomain(yScales, this.options);
+    return yScales;
+  }
+
+  getPlotLinesMaxAbs() {
+    const {
+      yAxis: { plotLines },
+    } = this.options;
+    let maxAbs: undefined | number;
+    if (Array.isArray(plotLines)) {
+      plotLines.forEach((plotLine) => {
+        if (!maxAbs || Math.abs(maxAbs) < Math.abs(plotLine.value)) {
+          maxAbs = plotLine.value;
+        }
+      });
+    }
+    return maxAbs;
+  }
+
+  setDomain(
+    yScales: YScales,
+    { y2min, y2max }: { y2min: number; y2max: number }
+  ) {
+    const { options } = this;
+    const { yAxis, yAxis2 } = options;
+    let realTickLength = this.tickLength;
+
+    // TODO: 只有在唯一值不为 0 的时候才做居中处理
+    if (y2min === y2max && y2min !== 0) {
+      const increment = (y2max - y2min) / (this.tickLength - 1);
+      const halfIncrement = increment / 2 || y2max || 1;
+      realTickLength = increment === 0 ? 1 : this.tickLength;
+
+      y2min -= halfIncrement;
+      y2max += halfIncrement;
+    }
+
+    if (y2min > y2max) {
+      const cachemin = y2min;
+      y2min = y2max;
+      y2max = cachemin;
+    }
+
+    // 开了固定显示 plotLines 或是单一值的时候，需要计算出最大的 plotLines 的绝对值
+    if (yAxis.plotLinesFixed || y2min === y2max) {
+      const plotLinesMaxAbs = this.getPlotLinesMaxAbs();
+      if (plotLinesMaxAbs) {
+        if (plotLinesMaxAbs < y2min) {
+          y2min = plotLinesMaxAbs;
+        }
+
+        if (plotLinesMaxAbs > y2max) {
+          y2max = plotLinesMaxAbs;
+        }
+      }
+    }
+
+    let ticks = [];
+
+    // 如果用户设置了 min 或者 max，则不用默认的 tick 计算
+    if (typeof yAxis.min === "number" || typeof yAxis.max === "number") {
+      const realMin = typeof yAxis.min === "number" ? yAxis.min : y2min;
+      const realMax = typeof yAxis.max === "number" ? yAxis.max : y2max;
+
+      yScales.domain([realMin, realMax]);
+      if (typeof yAxis.min === "number" && yAxis.min > realMax) {
+        ticks = [yAxis.min];
+      } else if (typeof yAxis.max === "number" && yAxis.max < realMin) {
+        ticks = [yAxis.max];
+      } else {
+        const step = d3.tickStep(realMin, realMax, realTickLength);
+        ticks = map(d3.range(realMin, realMax, step), (d: number) => {
+          return floor(d, 2);
+        });
+      }
+    } else {
+      yScales.domain([y2min, y2max]);
+      yScales.nice(realTickLength);
+      ticks = yScales.ticks(realTickLength);
+    }
+    const yAxisTickMaxWidth =
+      getMaxWidthByYAxisTicks(ticks, this.ctx, yAxis2.tickValueFormatter) + 10;
+    this.ticks = ticks;
+    this.tickMaxWidth = yAxisTickMaxWidth;
+  }
+
+  draw(yScales: YScales) {
+    const { ctx, options } = this;
+    const { yAxis, chart } = options;
+
+    // draw background 用于遮挡 gridline
+    ctx.beginPath();
+    ctx.fillStyle = yAxis.backgroundColor || "#fff";
+    ctx.fillRect(
+      chart.width - this.tickMaxWidth,
+      0,
+      this.tickMaxWidth,
+      chart.height - 12
+    );
+    ctx.stroke();
+    ctx.closePath();
+
+    // draw labels
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    ctx.strokeStyle = yAxis.labels.color;
+    ctx.lineWidth = 1;
+    ctx.fillStyle = yAxis.labels.color;
+    this.ticks.forEach((d) => {
+      let text;
+      if (typeof yAxis.tickValueFormatter === "function") {
+        text = yAxis.tickValueFormatter(d);
+      } else {
+        text = shortUint(d);
+      }
+      const y = yScales(d);
+      ctx.fillText(text, chart.width - 5, y);
+    });
+  }
+}