@fc-plot/ts-graph 0.23.2 → 0.24.0

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);
+    });
+  }
+}