@fc-plot/ts-graph 0.6.0

package/src/interface.ts

@@ -0,0 +1,192 @@
+export type TsGraphType = {
+  [index: string]: any,
+}
+
+export type Timestamp = 'x' | 'X';
+
+export type BaseOptions = {
+  xkey: number | string,
+  ykey: number | string,
+  timestamp: Timestamp,
+}
+
+export type Chart = {
+  id: string,
+  colors: string[],
+  width: number,
+  height: number,
+  marginTop: number,
+  marginRight: number,
+  marginBottom: number,
+  marginLeft: number,
+  renderTo: HTMLElement,
+  containerWidth: number,
+  containerHeight: number,
+}
+
+export type PlotLine = {
+  value: number,
+  color: string,
+}
+
+export type XAxis = {
+  visible: boolean,
+  lineColor: string,
+  lineWidth: number,
+  tickLength: number,
+  tickpadding: number,
+  tickColor: string,
+  labels: {
+    color: string,
+    fontSize: number,
+    timeFormat?: string, // %Y:%m:%d %H:%M:%S
+  },
+  plotLines: PlotLine[],
+  ticks?: Date[],
+}
+
+export type YAxis = {
+  visible: boolean,
+  min: number,
+  max: number,
+  lineColor: string,
+  lineWidth: number,
+  tickLength: number,
+  tickpadding: number,
+  tickColor: string,
+  gridLineColor: string,
+  labels: {
+    color: string,
+    shadowColor: string,
+    fontSize: number,
+    style: {
+      fontSize: number,
+      color: string,
+    },
+  },
+  plotLines: PlotLine[],
+}
+
+export type SerieDataItemMarker = {
+  enabled: boolean,
+  radius: number,
+}
+
+export type SerieDataItem = {
+  [index: string]: any,
+  marker?: SerieDataItemMarker,
+  timestamp: number,
+  value: number,
+}
+
+export interface Serie {
+  name: string,
+  color: string,
+  visible: boolean,
+  data: SerieDataItem[],
+  lineDash?: number[],
+}
+
+export type Series = Serie[]
+
+export type Point = {
+  name: string,
+  color: string,
+  x: number,
+  y: number,
+  timestamp: number,
+  value: number,
+  serieIndex: number,
+  filledNull?: number,
+  serieOptions: Serie,
+}
+
+export type Tooltip = {
+  precision: number | 'origin' | 'short';
+  shared: boolean,
+  sharedSortDirection: 'asc' | 'desc',
+  formatter: (points: Point[], originalPoints: Point[]) => string;
+}
+
+export type Legend = {
+  align: string,
+  verticalAlign: string,
+  enabled: boolean,
+}
+
+export type Time = {
+  timezoneOffset: number,
+}
+
+export type NearestPoint = {
+  name: string,
+  color: string,
+  timestamp: number,
+  value: number,
+  serieIndex: number,
+  filledNull?: number,
+  serieOptions: Serie,
+}
+
+export interface GetNearestPointsFnParam extends BaseOptions {
+  series: Series,
+  x: Date,
+  fillNull: undefined | number,
+}
+
+export interface Options extends BaseOptions {
+  type: 'line' | 'area' | 'lineAndArea',
+  ratio: number,
+  chart: Chart,
+  xAxis: XAxis,
+  yAxis: YAxis,
+  tooltip: Tooltip,
+  line: {
+    width: number,
+  },
+  series: Serie[],
+  notDisplayedSeries: string[],
+  legend: Legend,
+  time: Time,
+  fillNull: undefined | number,
+  xmin: number,
+  xmax: number,
+  ymin: number,
+  ymax: number,
+  onClick: (d3Event: any) => any,
+  onZoom: (getZoomedSeries: () => Series) => any,
+}
+
+export type EventPosition = {
+  clientX: number;
+  clientY: number;
+  offsetX: number;
+  offsetY: number;
+  layerX: number;
+  layerY: number;
+}
+
+export type Transform = {
+  rescaleX: (xScales: any) => any,
+} | undefined
+
+export interface WorkerPostMessage extends BaseOptions {
+  id?: string,
+  str?: string,
+  flag?: boolean,
+  x: Date,
+  fillNull: undefined | number,
+}
+
+export interface XScales {
+  (a: number | Date): number,
+  invert(value: number | { valueOf(): number }): Date,
+  ticks(value: number): Date[],
+}
+
+export interface YScales {
+  (a: number): number,
+  domain(value: number[]): any,
+  nice(value: number): any,
+  ticks(value: number): number[],
+}

package/src/legend.ts

@@ -0,0 +1,97 @@
+import { Options } from './interface';
+
+type LegendItemClickFuncType = (name: string) => any;
+
+function findIndex(elem: HTMLElement) {
+  let k = -1;
+  let e = elem;
+  while (e) {
+    if ('previousSibling' in e) {
+      e = e.previousSibling as HTMLElement;
+      k += 1;
+    } else {
+      k = -1;
+      break;
+    }
+  }
+  return k;
+}
+
+export default class Legend {
+  options: Options;
+  onLegendItemClick: LegendItemClickFuncType;
+  constructor(userOptions: Options, onLegendItemClick: LegendItemClickFuncType, container: HTMLElement, canvas: HTMLCanvasElement) {
+    this.options = userOptions;
+    this.init(container, canvas);
+    this.onLegendItemClick = onLegendItemClick;
+  }
+
+  init(container: HTMLElement, canvas: HTMLCanvasElement) {
+    const { chart: { id } } = this.options;
+    const legendNode = document.createElement('div');
+
+    legendNode.id = `${id}-legend`;
+    legendNode.className = 'ts-graph-legend';
+    if (!document.getElementById(legendNode.id)) {
+      container.insertBefore(legendNode, canvas);
+    }
+    this.initEvent();
+  }
+
+  initEvent() {
+    const { chart: { id } } = this.options;
+    const legendNode = document.getElementById(`${id}-legend`) as HTMLElement;
+    legendNode.removeEventListener('click', this.handelLegendItemClick);
+    legendNode.addEventListener('click', this.handelLegendItemClick);
+  }
+
+  updateOptions(newOptions: Options) {
+    this.options = newOptions;
+  }
+
+  handelLegendItemClick = (e: MouseEvent) => {
+    const currentTarget = e.currentTarget as HTMLElement;
+    let target = e.target as HTMLElement;
+    while (target !== currentTarget) {
+      if (target && target.className === 'ts-graph-legend-item') {
+        const { series } = this.options;
+        const index = findIndex(target);
+        this.onLegendItemClick(series[index].name);
+      }
+      if (target.parentNode) {
+        target = target.parentNode as HTMLElement;
+      }
+    }
+  }
+
+  draw() {
+    const { chart: { id }, series, legend } = this.options;
+    const legendNode = document.getElementById(`${id}-legend`)!;
+
+    if (!legend.enabled) return;
+    if (Object.prototype.toString.call(series) === '[object Array]') {
+      legendNode.innerHTML = '';
+      const frag = document.createDocumentFragment();
+      series.forEach((serie) => {
+        const legendItemNode = document.createElement('span');
+        const symbolNode = document.createElement('span');
+        const symbolLineNode = document.createElement('span');
+        const symbolPointNode = document.createElement('span');
+        const legendTextNode = document.createTextNode(serie.name);
+
+        legendItemNode.className = 'ts-graph-legend-item';
+        symbolNode.className = 'ts-graph-legend-item-symbol';
+        symbolLineNode.className = 'ts-graph-legend-item-symbol-line';
+        symbolLineNode.style.borderColor = serie.color;
+        symbolPointNode.className = 'ts-graph-legend-item-symbol-point';
+        symbolPointNode.style.backgroundColor = serie.color;
+        symbolNode.appendChild(symbolLineNode);
+        symbolNode.appendChild(symbolPointNode);
+        legendItemNode.appendChild(symbolNode);
+        legendItemNode.appendChild(legendTextNode);
+        frag.appendChild(legendItemNode);
+      });
+      legendNode.appendChild(frag);
+    }
+  }
+}

package/src/line.ts

@@ -0,0 +1,92 @@
+import * as d3 from 'd3';
+import { sortBy } from 'lodash';
+import { getColor } from './utils';
+import { Options, Serie, SerieDataItem, XScales, YScales } from './interface';
+
+export default class Line {
+  options: Options;
+  ctx: CanvasRenderingContext2D;
+  constructor(userOptions: Options, ctx: CanvasRenderingContext2D) {
+    this.options = userOptions;
+    this.ctx = ctx;
+  }
+
+  draw(xScales: XScales, yScales: YScales) {
+    const { type, series, chart: { colors, width, height }, xAxis, xkey, ykey, timestamp, fillNull, notDisplayedSeries } = this.options;
+    const { ctx } = this;
+
+    sortBy(series, 'zIndex').forEach((serie: Serie, i: number) => {
+      if (serie.visible === false) return;
+      if (notDisplayedSeries.indexOf(serie.name) > -1) return;
+
+      const color = serie.color || getColor(colors, i);
+
+      serie.color = color;
+
+      if (type === 'area' || type === 'lineAndArea') {
+        ctx.beginPath();
+        const area = d3.area().x((d: SerieDataItem) => {
+          const xVal = timestamp === 'X' ? d[xkey] * 1000 : d[xkey];
+          const x = xScales(new Date(xVal));
+          return x;
+        }).y0(height - xAxis.tickpadding - xAxis.labels.fontSize - 5)
+        .y1((d: SerieDataItem) => {
+          const val = d[ykey];
+          if (typeof val === 'number') {
+            return yScales(val);
+          } else if (typeof fillNull === 'number') {
+            return yScales(fillNull);
+          }
+          return undefined;
+        }).defined((d: SerieDataItem) => {
+          const val = d[ykey];
+          return typeof val === 'number' || typeof fillNull === 'number';
+        }).context(ctx);
+
+        area(serie.data || [])
+
+
+        const grd = ctx.createLinearGradient(0, 0, 0, height);
+        grd.addColorStop(0, color);
+        grd.addColorStop(0.2, color);
+        grd.addColorStop(1, 'rgb(255,255,255, 0)');
+        ctx.fillStyle = grd;
+        ctx.fill();
+        ctx.closePath();
+      }
+
+      if (type === 'line' || type === 'lineAndArea') {
+        ctx.beginPath();
+        const line = d3.line().x((d: SerieDataItem) => {
+          const xVal = timestamp === 'X' ? d[xkey] * 1000 : d[xkey];
+          const x = xScales(new Date(xVal));
+
+          return x;
+        }).y((d: SerieDataItem) => {
+          const val = d[ykey];
+          if (typeof val === 'number') {
+            return yScales(val);
+          } else if (typeof fillNull === 'number') {
+            return yScales(fillNull);
+          }
+          return undefined;
+        }).defined((d: SerieDataItem) => {
+          const val = d[ykey];
+          return typeof val === 'number' || typeof fillNull === 'number';
+        }).context(ctx);
+
+        ctx.lineTo(0, 0); // TODO: fix don't draw the first single point
+
+        line(serie.data || []);
+
+        ctx.lineJoin = 'round';
+        ctx.lineWidth = this.options.line.width;
+        ctx.strokeStyle = color;
+        ctx.lineCap = 'round';
+        ctx.setLineDash(serie.lineDash || []);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    });
+  }
+}

package/src/tooltip.ts

@@ -0,0 +1,318 @@
+import * as d3 from 'd3';
+import { groupBy, keys, orderBy, isNumber } from 'lodash';
+import { distanceBetweenPointsX, distanceBetweenPoints, getColor, formatTrim } from './utils';
+import { Options, EventPosition, Point, WorkerPostMessage, XScales, YScales } from './interface';
+import Worker from "worker-loader?inline=true!./worker.ts";
+
+export default class Tooltip {
+  options: Options;
+  ctx: CanvasRenderingContext2D;
+  flag: boolean;
+  container: any;
+  isMouserover: boolean;
+  worker: any;
+  constructor(userOptions: Options, ctx: CanvasRenderingContext2D, container: HTMLElement, canvas: HTMLCanvasElement) {
+    this.options = userOptions;
+    this.ctx = ctx;
+    this.flag = false;
+    this.container = container;
+    this.init(container, canvas);
+    this.isMouserover = false;
+    this.worker = new Worker();
+  }
+
+  init(container: HTMLElement, canvas: HTMLCanvasElement) {
+    const { chart: { id } } = this.options;
+    const tooltipNode = document.createElement('div');
+
+    tooltipNode.id = `${id}-tooltip`;
+    tooltipNode.className = 'ts-graph-tooltip';
+    // 插到 eventCanvas 前，事件是绑定在 eventCanvas 层，防止 tooltip 遮挡
+    if (!document.getElementById(tooltipNode.id)) {
+      // container.insertBefore(tooltipNode, canvas);
+      document.body.append(tooltipNode);
+    }
+  }
+
+  clear() {
+    const { ratio, chart: { id, containerWidth, containerHeight } } = this.options;
+    const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
+
+    this.isMouserover = false;
+    this.ctx.save();
+    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.visibility = 'hidden';
+    if (tooltipNode.lastChild) {
+      tooltipNode.removeChild(tooltipNode.lastChild);
+    }
+  }
+
+  getNearestPoints(eventPosition: EventPosition, xScales: XScales, yScales: YScales, cbk: (nearestPoints: Point[]) => void) {
+    const { series = [], chart: { id, colors }, tooltip: { shared }, xkey, ykey, timestamp, fillNull } = this.options;
+    const x = xScales.invert(eventPosition.offsetX);
+    let nearestPoints: Point[] = [];
+    const message: WorkerPostMessage = {
+      x,
+      xkey,
+      ykey,
+      timestamp,
+      fillNull,
+    };
+
+    if (!this.flag) {
+      message.id = id;
+      message.str = JSON.stringify(series);
+      message.flag = this.flag;
+      this.worker.postMessage(message);
+      this.flag = true;
+    } else {
+      message.id = id;
+      message.flag = this.flag;
+      this.worker.postMessage(message);
+    }
+
+    this.worker.onmessage = (event: any) => {
+      if (this.isMouserover === false) return;
+
+      if (Object.prototype.toString.call(event.data) === '[object Array]') {
+        nearestPoints = event.data.map((item: Point) => {
+          return {
+            ...item,
+            x: xScales(item.timestamp),
+            y: yScales(item.value),
+            color: item.color || getColor(colors, item.serieIndex),
+          };
+        });
+      }
+      // 不同时间点数据，还需要再处理一遍
+      const nearestPointsGroup = groupBy(nearestPoints, 'x');
+
+      if (keys(nearestPointsGroup).length > 1) {
+        let minDistance = Number.POSITIVE_INFINITY;
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const key in nearestPointsGroup) {
+          if (Object.prototype.hasOwnProperty.call(nearestPointsGroup, key)) {
+            const d = distanceBetweenPointsX(eventPosition.offsetX, Number(key));
+
+            if (d < minDistance) {
+              minDistance = d;
+              nearestPoints = nearestPointsGroup[key];
+            }
+          }
+        }
+      }
+
+      if (!shared) {
+        let minDistance = Number.POSITIVE_INFINITY;
+
+        nearestPoints.forEach((point) => {
+          const d = distanceBetweenPoints({
+            x: eventPosition.offsetX,
+            y: eventPosition.offsetY,
+          }, point);
+
+          if (d < minDistance) {
+            minDistance = d;
+            nearestPoints = [point];
+          }
+        });
+      }
+
+      cbk(nearestPoints);
+    };
+  }
+
+  draw(eventPosition: EventPosition, xScales: XScales, yScales: YScales, cbk?: (nearestPoints: Point[]) => void) {
+    this.isMouserover = true;
+    this.getNearestPoints(eventPosition, xScales, yScales, (nearestPoints) => {
+      this.clear();
+      if (nearestPoints.length) {
+        this.drawCrosshair(nearestPoints[0].x);
+        this.drawSymbol(nearestPoints);
+        this.drawModal(nearestPoints, eventPosition);
+      }
+      if (cbk && Object.prototype.toString.call(cbk) === '[object Function]') {
+        cbk(nearestPoints);
+      }
+    });
+  }
+
+  drawModal(nearestPoints: Point[], eventPosition: EventPosition) {
+    const { chart: { id, renderTo }, tooltip, time } = this.options;
+    const renderToWidth = renderTo.offsetWidth;
+    let renderToHeight = renderTo.offsetHeight;
+    const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
+    const wrapEle = document.createElement('div');
+    const originalNearestPoints = nearestPoints;
+
+    renderToHeight = window.innerHeight / 1.5;
+
+    // 最大可显示的行数，超出最大行数就在中位隐藏超出数量的行
+    // 18: padding + border
+    // 100: 缓冲区域
+    // 15: 每行高度
+    // + 1: 标题栏高度
+    const maxLength = (renderToHeight - 18 - 100) / 15;
+    let overflow = false;
+
+    if (tooltip.sharedSortDirection) {
+      nearestPoints = orderBy(nearestPoints, (point: Point) => {
+        return point.value;
+      }, tooltip.sharedSortDirection);
+    }
+
+    if (nearestPoints.length > maxLength) {
+      nearestPoints = nearestPoints.slice(0, maxLength);
+      overflow = true;
+    }
+
+    wrapEle.className = 'ts-graph-tooltip-content';
+    tooltipNode.appendChild(wrapEle);
+
+    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');
+
+      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);
+        tzD = new Date(destTs);
+      }
+      const headerTextNode = document.createTextNode(d3.timeFormat('%Y-%m-%d %H:%M:%S')(tzD));
+
+      headerNode.appendChild(headerTextNode);
+      headerNode.style.color = '#666';
+      ulNode.style.maxWidth = `${window.innerWidth / 1.5}px`; // 宽度最大值
+      ulNode.appendChild(headerNode);
+      frag.appendChild(ulNode);
+
+      nearestPoints.forEach(({ color, name, value, filledNull }) => {
+        const liNode = document.createElement('li');
+
+        if (color) {
+          const symbolNode = document.createElement('span');
+          const symbolTextNode = document.createTextNode('● ');
+
+          symbolNode.style.color = color;
+          symbolNode.appendChild(symbolTextNode);
+          liNode.appendChild(symbolNode);
+        }
+
+        if (name) {
+          const nameTextNode = document.createTextNode(`${name}: `);
+
+          liNode.appendChild(nameTextNode);
+        }
+
+        if (isNumber(value)) {
+          const valueNode = document.createElement('strong');
+          let formatValue
+          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)
+          }else{
+            formatValue = d3.format(',.3f')(value)
+          }
+          formatValue += filledNull ? '(空值填补,仅限看图使用)' : ''
+          
+          const valueTextNode = document.createTextNode(formatValue);
+
+          valueNode.appendChild(valueTextNode);
+          liNode.appendChild(valueNode);
+        }
+        ulNode.appendChild(liNode);
+      });
+
+      if (overflow) {
+        const overflowLiNode = document.createElement('li');
+        const overflowLiTextNode = document.createTextNode('......');
+
+        overflowLiNode.appendChild(overflowLiTextNode);
+        ulNode.appendChild(overflowLiNode);
+      }
+
+      wrapEle.appendChild(frag);
+    }
+
+    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;
+
+    tooltipNode.style.left = `${clientX - tooltipWidth - 20}px`;
+    tooltipNode.style.top = `${clientY + 20}px`;
+
+    if (clientX - tooltipWidth - 20 < 0) {
+      tooltipNode.style.left = `${clientX + 20}px`;
+      if ((clientX + 20 + tooltipWidth) > renderToWidth) {
+        tooltipNode.style.left = '0px';
+      }
+    }
+
+    if ((clientY + 20 + tooltipHeight) > renderToHeight) {
+      if (clientY - tooltipHeight - 20 < 0) {
+        tooltipNode.style.top = '0px';
+      } else {
+        tooltipNode.style.top = `${clientY - tooltipHeight - 20}px`;
+      }
+    }
+
+    tooltipNode.style.zIndex = '9999';
+    tooltipNode.style.visibility = 'visible';
+  }
+
+  drawSymbol(points: Point[] = []) {
+    const { ctx } = this;
+
+    points.forEach((point) => {
+      const { x, y, color } = point;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, 360, false);
+      ctx.lineWidth = 1;
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(x, y, 3, 0, 360, false);
+      ctx.lineWidth = 1;
+      ctx.fillStyle = 'white';
+      ctx.fill();
+    });
+  }
+
+  drawCrosshair(x: number) {
+    const { ctx, options } = this;
+    const { chart, xAxis } = options;
+    const tickBottom = chart.height - xAxis.tickpadding - xAxis.labels.fontSize - xAxis.tickLength;
+
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, tickBottom);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = xAxis.lineColor;
+    ctx.stroke();
+  }
+
+  destroy() {
+    const { chart: { id } } = this.options;
+    const tooltipNode = document.getElementById(`${id}-tooltip`) as HTMLElement;
+    if (tooltipNode && tooltipNode.parentNode) {
+      tooltipNode.parentNode.removeChild(tooltipNode);
+    }
+  }
+}