@fc-plot/ts-graph 0.16.4 → 0.17.1

package/src/tooltip.ts

@@ -1,9 +1,14 @@
-import * as d3 from 'd3';
-import { groupBy, keys, orderBy, isNumber } from 'lodash';
-import { distanceBetweenPointsX, distanceBetweenPoints, getColor, formatTrim } from './utils';
-import { Options, EventPosition, Point, XScales, YScales } from './interface';
-import TsGraph from './index';
-import getNearestPoints from './getNearestPoints';
+import * as d3 from "d3";
+import { groupBy, keys, orderBy, isNumber } from "lodash";
+import {
+  distanceBetweenPointsX,
+  distanceBetweenPoints,
+  getColor,
+  formatTrim,
+} from "./utils";
+import { Options, EventPosition, Point, XScales, YScales } from "./interface";
+import TsGraph from "./index";
+import getNearestPoints from "./getNearestPoints";
 
 export default class Tooltip {
   options: Options;
@@ -11,7 +16,12 @@ export default class Tooltip {
   flag: boolean;
   container: any;
   isMouserover: boolean;
-  constructor(userOptions: Options, ctx: CanvasRenderingContext2D, container: HTMLElement, canvas: HTMLCanvasElement) {
+  constructor(
+    userOptions: Options,
+    ctx: CanvasRenderingContext2D,
+    container: HTMLElement,
+    canvas: HTMLCanvasElement
+  ) {
     this.options = userOptions;
     this.ctx = ctx;
     this.flag = false;
@@ -21,11 +31,13 @@ export default class Tooltip {
   }
 
   init(container: HTMLElement, canvas: HTMLCanvasElement) {
-    const { chart: { id } } = this.options;
-    const tooltipNode = document.createElement('div');
+    const {
+      chart: { id },
+    } = this.options;
+    const tooltipNode = document.createElement("div");
 
     tooltipNode.id = `${id}-tooltip`;
-    tooltipNode.className = 'ts-graph-tooltip';
+    tooltipNode.className = "ts-graph-tooltip";
     // 插到 eventCanvas 前，事件是绑定在 eventCanvas 层，防止 tooltip 遮挡
     if (!document.getElementById(tooltipNode.id)) {
       // container.insertBefore(tooltipNode, canvas);
@@ -34,7 +46,10 @@ export default class Tooltip {
   }
 
   clear() {
-    const { ratio, chart: { id, containerWidth, containerHeight } } = this.options;
+    const {
+      ratio,
+      chart: { id, containerWidth, containerHeight },
+    } = this.options;
     const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
 
     this.isMouserover = false;
@@ -42,25 +57,42 @@ export default class Tooltip {
     this.ctx.setTransform(1 * ratio, 0, 0, 1 * ratio, 0, 0);
     this.ctx.clearRect(0, 0, containerWidth, containerHeight);
     this.ctx.restore();
-    tooltipNode.style.top = '-99999px';
+    tooltipNode.style.top = "-99999px";
     if (tooltipNode.lastChild) {
       tooltipNode.removeChild(tooltipNode.lastChild);
     }
   }
 
-  getNearestPoints(eventPosition: EventPosition, xScales: XScales, yScales: YScales, cbk: (nearestPoints: Point[]) => void) {
-    const { series = [], chart: { colors }, tooltip: { shared }, xkey, ykey, oykey, timestamp, fillNull } = this.options;
+  getNearestPoints(
+    eventPosition: EventPosition,
+    xScales: XScales,
+    yScales: YScales,
+    cbk: (nearestPoints: Point[]) => void
+  ) {
+    const {
+      series = [],
+      chart: { colors },
+      tooltip: { shared },
+      xkey,
+      ykey,
+      ykey2,
+      oykey,
+      timestamp,
+      fillNull,
+    } = this.options;
     const containerRect = this.container.getBoundingClientRect();
-    const offsetX = eventPosition.offsetX || eventPosition.clientX - containerRect.left;
+    const offsetX =
+      eventPosition.offsetX || eventPosition.clientX - containerRect.left;
     const x = xScales.invert(offsetX);
     let nearestPoints: Point[] = [];
-  
+
     if (this.isMouserover === false) return;
 
     nearestPoints = getNearestPoints({
       x,
       xkey,
       ykey,
+      ykey2,
       oykey,
       timestamp,
       series,
@@ -75,7 +107,7 @@ export default class Tooltip {
     });
 
     // 不同时间点数据，还需要再处理一遍
-    const nearestPointsGroup = groupBy(nearestPoints, 'x');
+    const nearestPointsGroup = groupBy(nearestPoints, "x");
 
     if (keys(nearestPointsGroup).length > 1) {
       let minDistance = Number.POSITIVE_INFINITY;
@@ -97,10 +129,13 @@ export default class Tooltip {
       let minDistance = Number.POSITIVE_INFINITY;
 
       nearestPoints.forEach((point) => {
-        const d = distanceBetweenPoints({
-          x: eventPosition.offsetX,
-          y: eventPosition.offsetY,
-        }, point);
+        const d = distanceBetweenPoints(
+          {
+            x: eventPosition.offsetX,
+            y: eventPosition.offsetY,
+          },
+          point
+        );
 
         if (d < minDistance) {
           minDistance = d;
@@ -112,29 +147,38 @@ export default class Tooltip {
     cbk(nearestPoints);
   }
 
-  draw(eventPosition: EventPosition, instance: TsGraph, cbk?: (nearestPoints: Point[]) => void) {
+  draw(
+    eventPosition: EventPosition,
+    instance: TsGraph,
+    cbk?: (nearestPoints: Point[]) => void
+  ) {
     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 (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]') {
+      if (cbk && Object.prototype.toString.call(cbk) === "[object Function]") {
         cbk(nearestPoints);
       }
     });
   }
 
   drawModal(nearestPoints: Point[], eventPosition: EventPosition) {
-    const { chart: { id, renderTo }, tooltip, time, notDisplayedSeries } = this.options;
+    const {
+      chart: { id, renderTo },
+      tooltip,
+      time,
+      notDisplayedSeries,
+    } = this.options;
     const renderToWidth = renderTo.offsetWidth;
     let renderToHeight = renderTo.offsetHeight;
     const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
-    const wrapEle = document.createElement('div');
+    const wrapEle = document.createElement("div");
     const originalNearestPoints = nearestPoints;
 
     renderToHeight = window.innerHeight / 1.5;
@@ -148,9 +192,13 @@ export default class Tooltip {
     let overflow = false;
 
     if (tooltip.sharedSortDirection) {
-      nearestPoints = orderBy(nearestPoints, (point: Point) => {
-        return point.value;
-      }, tooltip.sharedSortDirection);
+      nearestPoints = orderBy(
+        nearestPoints,
+        (point: Point) => {
+          return point.value;
+        },
+        tooltip.sharedSortDirection
+      );
     }
 
     if (nearestPoints.length > maxLength) {
@@ -158,40 +206,48 @@ export default class Tooltip {
       overflow = true;
     }
 
-    wrapEle.className = 'ts-graph-tooltip-content';
+    wrapEle.className = "ts-graph-tooltip-content";
     tooltipNode.appendChild(wrapEle);
 
-    if (Object.prototype.toString.call(tooltip.formatter) === '[object Function]') {
-      wrapEle.innerHTML = tooltip.formatter([...nearestPoints], [...originalNearestPoints]);
+    if (
+      Object.prototype.toString.call(tooltip.formatter) === "[object Function]"
+    ) {
+      wrapEle.innerHTML = tooltip.formatter(
+        [...nearestPoints],
+        [...originalNearestPoints]
+      );
     } else {
       const firstNearestPoint = nearestPoints[0];
       const frag = document.createDocumentFragment();
-      const ulNode = document.createElement('ul');
-      const headerNode = document.createElement('li');
+      const ulNode = document.createElement("ul");
+      const headerNode = document.createElement("li");
 
       let tzD = new Date(firstNearestPoint.timestamp);
 
       if (time && time.timezoneOffset) {
         const timezoneOffset = tzD.getTimezoneOffset();
         const ts = tzD.getTime();
-        const destTs = ts + (timezoneOffset * 60 * 1000) + (time.timezoneOffset * 60 * 1000);
+        const destTs =
+          ts + timezoneOffset * 60 * 1000 + time.timezoneOffset * 60 * 1000;
         tzD = new Date(destTs);
       }
-      const headerTextNode = document.createTextNode(d3.timeFormat(tooltip.timeFormat)(tzD));
+      const headerTextNode = document.createTextNode(
+        d3.timeFormat(tooltip.timeFormat)(tzD)
+      );
 
       headerNode.appendChild(headerTextNode);
-      headerNode.style.color = '#666';
+      headerNode.style.color = "#666";
       ulNode.style.maxWidth = `${window.innerWidth / 1.5}px`; // 宽度最大值
       ulNode.appendChild(headerNode);
       frag.appendChild(ulNode);
 
       nearestPoints.forEach(({ color, name, origin, filledNull }) => {
         if (notDisplayedSeries.indexOf(name) > -1) return;
-        const liNode = document.createElement('li');
+        const liNode = document.createElement("li");
 
         if (color) {
-          const symbolNode = document.createElement('span');
-          const symbolTextNode = document.createTextNode('● ');
+          const symbolNode = document.createElement("span");
+          const symbolTextNode = document.createTextNode("● ");
 
           symbolNode.style.color = color;
           symbolNode.appendChild(symbolTextNode);
@@ -207,26 +263,26 @@ export default class Tooltip {
         const value = origin;
 
         if (isNumber(value)) {
-          const valueNode = document.createElement('strong');
-          let formatValue
+          const valueNode = document.createElement("strong");
+          let formatValue;
 
-          if (typeof tooltip.pointValueformatter === 'function') {
+          if (typeof tooltip.pointValueformatter === "function") {
             formatValue = tooltip.pointValueformatter(value);
           } else {
-            if (tooltip.precision === 'origin') {
-              formatValue = value
-            } else if (tooltip.precision === 'short') {
-              let text = d3.format('.5s')(value);
+            if (tooltip.precision === "origin") {
+              formatValue = value;
+            } else if (tooltip.precision === "short") {
+              let text = d3.format(".5s")(value);
               formatValue = formatTrim(text);
             } else if (tooltip.precision > 0) {
-                formatValue =  d3.format(',.'+tooltip.precision+'f')(value)
+              formatValue = d3.format(",." + tooltip.precision + "f")(value);
             } else {
-              formatValue = d3.format(',.3f')(value)
+              formatValue = d3.format(",.3f")(value);
             }
-          }          
+          }
+
+          formatValue += filledNull ? "(空值填补,仅限看图使用)" : "";
 
-          formatValue += filledNull ? '(空值填补,仅限看图使用)' : ''
-          
           const valueTextNode = document.createTextNode(formatValue);
 
           valueNode.appendChild(valueTextNode);
@@ -236,8 +292,8 @@ export default class Tooltip {
       });
 
       if (overflow) {
-        const overflowLiNode = document.createElement('li');
-        const overflowLiTextNode = document.createTextNode('......');
+        const overflowLiNode = document.createElement("li");
+        const overflowLiTextNode = document.createTextNode("......");
 
         overflowLiNode.appendChild(overflowLiTextNode);
         ulNode.appendChild(overflowLiNode);
@@ -257,21 +313,21 @@ export default class Tooltip {
 
     if (clientX - tooltipWidth - 20 < 0) {
       tooltipNode.style.left = `${clientX + 20}px`;
-      if ((clientX + 20 + tooltipWidth) > renderToWidth) {
-        tooltipNode.style.left = '0px';
+      if (clientX + 20 + tooltipWidth > renderToWidth) {
+        tooltipNode.style.left = "0px";
       }
     }
 
-    if ((clientY + 20 + tooltipHeight) > renderToHeight) {
+    if (clientY + 20 + tooltipHeight > renderToHeight) {
       if (clientY - tooltipHeight - 20 < 0) {
-        tooltipNode.style.top = '0px';
+        tooltipNode.style.top = "0px";
       } else {
         tooltipNode.style.top = `${clientY - tooltipHeight - 20}px`;
       }
     }
 
-    tooltipNode.style.zIndex = '9999';
-    tooltipNode.style.visibility = 'visible';
+    tooltipNode.style.zIndex = "9999";
+    tooltipNode.style.visibility = "visible";
   }
 
   drawSymbol(points: Point[] = []) {
@@ -288,7 +344,7 @@ export default class Tooltip {
       ctx.beginPath();
       ctx.arc(x, y, 3, 0, 360, false);
       ctx.lineWidth = 1;
-      ctx.fillStyle = 'white';
+      ctx.fillStyle = "white";
       ctx.fill();
     });
   }
@@ -296,7 +352,11 @@ export default class Tooltip {
   drawCrosshair(x: number) {
     const { ctx, options } = this;
     const { chart, xAxis } = options;
-    const tickBottom = chart.height - xAxis.tickpadding - xAxis.labels.fontSize - xAxis.tickLength;
+    const tickBottom =
+      chart.height -
+      xAxis.tickpadding -
+      xAxis.labels.fontSize -
+      xAxis.tickLength;
 
     ctx.beginPath();
     ctx.moveTo(x, 0);
@@ -307,7 +367,9 @@ export default class Tooltip {
   }
 
   destroy() {
-    const { chart: { id } } = this.options;
+    const {
+      chart: { id },
+    } = this.options;
     const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
     if (tooltipNode && tooltipNode.parentNode) {
       tooltipNode.parentNode.removeChild(tooltipNode);

package/src/yAxis.ts

@@ -1,7 +1,6 @@
-import * as d3 from 'd3';
-import { map } from 'lodash';
-import { Options, YScales } from './interface';
-import { shortUint, getMaxWidthByYAxisTicks } from './utils';
+import * as d3 from "d3";
+import { Options, YScales } from "./interface";
+import { shortUint, getMaxWidthByYAxisTicks } from "./utils";
 
 interface RealData {
   [index: string]: any;
@@ -26,7 +25,13 @@ export default class YAxis {
 
   init() {
     const { chart, xAxis } = this.options;
-    const yScales = d3.scaleLinear().range([chart.height - (xAxis.labels.fontSize + xAxis.tickpadding + xAxis.tickLength), 20]);
+    const yScales = d3
+      .scaleLinear()
+      .range([
+        chart.height -
+          (xAxis.labels.fontSize + xAxis.tickpadding + xAxis.tickLength),
+        20,
+      ]);
 
     this.setDomain(yScales, this.options);
     return yScales;
@@ -38,19 +43,23 @@ export default class YAxis {
    * @return {Array}       [description]
    */
   getRealData(data: RealData) {
-    const { yAxis: { plotLines }, ykey, fillNull } = this.options;
+    const {
+      yAxis: { plotLines },
+      ykey,
+      fillNull,
+    } = this.options;
 
     if (Array.isArray(data)) {
       if (Array.isArray(plotLines)) {
         plotLines.forEach((plotLine) => {
-          if (typeof plotLine.value === 'number') {
+          if (typeof plotLine.value === "number") {
             data.push({
               [ykey]: plotLine.value,
             });
           }
         });
       }
-      if (typeof fillNull === 'number') {
+      if (typeof fillNull === "number") {
         data.push({
           [ykey]: fillNull,
         });
@@ -61,7 +70,9 @@ export default class YAxis {
   }
 
   getPlotLinesMaxAbs() {
-    const { yAxis: { plotLines } } = this.options;
+    const {
+      yAxis: { plotLines },
+    } = this.options;
     let maxAbs: undefined | number;
     if (Array.isArray(plotLines)) {
       plotLines.forEach((plotLine) => {
@@ -73,7 +84,7 @@ export default class YAxis {
     return maxAbs;
   }
 
-  setDomain(yScales: YScales, { ymin, ymax }: { ymin: number, ymax: number}) {
+  setDomain(yScales: YScales, { ymin, ymax }: { ymin: number; ymax: number }) {
     const { options } = this;
     const { yAxis } = options;
     const plotLinesMaxAbs = this.getPlotLinesMaxAbs();
@@ -108,7 +119,8 @@ export default class YAxis {
     yScales.domain([ymin, ymax]);
     yScales.nice(realTickLength);
     const ticks = yScales.ticks(realTickLength);
-    const yAxisTickMaxWidth = getMaxWidthByYAxisTicks(ticks, this.ctx, yAxis.tickValueFormatter) + 5;
+    const yAxisTickMaxWidth =
+      getMaxWidthByYAxisTicks(ticks, this.ctx, yAxis.tickValueFormatter) + 5;
     this.ticks = ticks;
     this.tickMaxWidth = yAxisTickMaxWidth;
   }
@@ -119,21 +131,21 @@ export default class YAxis {
 
     // draw background
     ctx.beginPath();
-    ctx.fillStyle = '#fff';
+    ctx.fillStyle = "#fff";
     ctx.fillRect(0, 0, this.tickMaxWidth, chart.height);
     ctx.stroke();
     ctx.closePath();
 
     // draw labels
-    ctx.textAlign = 'right';
-    ctx.textBaseline = 'middle';
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
     ctx.strokeStyle = yAxis.labels.color;
     ctx.lineWidth = 1;
     ctx.fillStyle = yAxis.labels.color;
     // ctx.font = `${yAxis.labels.fontSize}px Palantino`;
     this.ticks.forEach((d) => {
       let text;
-      if (typeof yAxis.tickValueFormatter === 'function') {
+      if (typeof yAxis.tickValueFormatter === "function") {
         text = yAxis.tickValueFormatter(d);
       } else {
         text = shortUint(d);
@@ -160,7 +172,11 @@ export default class YAxis {
 
   drawPlotLines(yScales: YScales) {
     const { ctx, options } = this;
-    const { chart, yAxis, yAxis: { plotLines } } = options;
+    const {
+      chart,
+      yAxis,
+      yAxis: { plotLines },
+    } = options;
 
     if (Array.isArray(plotLines)) {
       plotLines.forEach((plotLine) => {
@@ -173,9 +189,9 @@ export default class YAxis {
         ctx.stroke();
         ctx.setLineDash([]);
 
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'top';
-        ctx.shadowColor = '#fff';
+        ctx.textAlign = "right";
+        ctx.textBaseline = "top";
+        ctx.shadowColor = "#fff";
         ctx.shadowBlur = 1;
         ctx.lineWidth = 1;
         ctx.fillStyle = plotLine.color;