@fc-plot/ts-graph 0.6.0

package/src/index.ts

@@ -0,0 +1,540 @@
+import * as d3 from 'd3';
+import { assign, merge, debounce, throttle, uniqueId, isEmpty } from 'lodash';
+import { addListener, removeListener } from 'resize-detector';
+import XAxis from './xAxis';
+import YAxis from './yAxis';
+import Tooltip from './tooltip';
+import Line from './line';
+import Zoom from './zoom';
+import Legend from './legend';
+import { TsGraphType, Options, EventPosition, Transform, Serie, SerieDataItem, XScales, YScales } from './interface';
+import { getTouchPosition } from './utils';
+import '../assets/style.less';
+
+const dispatch = d3.dispatch('plotmove', 'plotleave');
+
+export default class TsGraph {
+  options!: Options;
+  container!: HTMLElement;
+  frontContext!: CanvasRenderingContext2D;
+  backContext!: CanvasRenderingContext2D;
+  eventCanvas!: HTMLCanvasElement;
+  frontCanvas!: HTMLCanvasElement;
+  backCanvas!: HTMLCanvasElement;
+  xAxis!: XAxis;
+  xScales!: XScales;
+  yAxis!: YAxis;
+  yScales!: YScales;
+  line!: Line;
+  legend!: Legend;
+  tooltip!: Tooltip;
+  zoom!: Zoom;
+  transform!: Transform;
+  constructor(userOptions: Options) {
+    const defaultOptions = {
+      type: 'line',
+      ratio: window.devicePixelRatio || 1,
+      xkey: 0,
+      ykey: 1,
+      timestamp: 'x',
+      chart: {
+        id: uniqueId('ts-graph-'),
+        colors: ['#3399CC', '#CC9933', '#9966CC', '#66CC66', '#CC3333', '#99CCCC', '#CCCC66', '#CC99CC', '#99CC99', '#CC6666', '#336699', '#996633', '#993399', '#339966', '#993333'],
+        width: userOptions.chart.renderTo.offsetWidth,
+        height: userOptions.chart.renderTo.offsetHeight || 350,
+        marginTop: 10,
+        marginRight: 10,
+        marginBottom: 10,
+        marginLeft: 10,
+      },
+      xAxis: {
+        visible: true,
+        lineColor: '#ccc',
+        lineWidth: 1,
+        tickLength: 5,
+        tickpadding: 5,
+        tickColor: '#ccc',
+        labels: {
+          color: '#999',
+          fontSize: 11,
+        },
+      },
+      yAxis: {
+        // min: -Infinity,
+        // max: Infinity,
+        visible: true,
+        lineColor: '#ccc',
+        lineWidth: 1,
+        tickLength: 5,
+        tickpadding: 5,
+        tickColor: '#ccc',
+        gridLineColor: '#efefef',
+        labels: {
+          color: '#999',
+          shadowColor: '#fff',
+          fontSize: 11,
+          style: {
+            fontSize: 11,
+            color: '#999',
+          },
+        },
+      },
+      line: {
+        width: 2,
+      },
+      tooltip: {
+        shared: true,
+      },
+      series: [],
+      legend: {
+        align: 'center',
+        verticalAlign: 'top',
+        enabled: false,
+      },
+      fillNull: undefined,
+      onClick: () => {},
+      onZoom: () => {},
+    };
+    const options = merge({}, defaultOptions, userOptions);
+
+    if (userOptions.chart.marginTop === undefined && options.legend.enabled) {
+      options.chart.marginTop = 20;
+    }
+    this.handleResize = debounce(this.handleResize, 300);
+    this.init(options);
+  }
+
+  init(options: Options) {
+    const { chart } = options;
+
+    this.options = options;
+    this.options.notDisplayedSeries = [];
+    this.options.chart.containerWidth = chart.width;
+    this.options.chart.containerHeight = chart.height;
+    this.options.chart.width = chart.width - chart.marginLeft - chart.marginRight;
+    this.options.chart.height = chart.height - chart.marginTop - chart.marginBottom;
+    this.createContainer();
+    this.createCanvas();
+    this.initEvent();
+    this.initLine();
+    this.initLegend();
+    this.initTooltip();
+    this.initZoom();
+    this.initSeries();
+    this.initScales();
+    // this.initScales(); // TODO: 同 update
+    this.draw();
+  }
+
+  clearRect(ctx: CanvasRenderingContext2D) {
+    const { chart: { containerWidth, containerHeight } } = this.options;
+
+    ctx.clearRect(0, 0, containerWidth, containerHeight);
+  }
+
+  draw() {
+    this.clearRect(this.backContext);
+    if (this.options.xAxis.visible) {
+      this.yAxis.drawGridLine(this.yScales);
+    }
+    this.line.draw(this.xScales, this.yScales);
+    if (this.options.xAxis.visible) {
+      this.xAxis.draw(this.xScales);
+    }
+    if (this.options.yAxis.visible) {
+      this.yAxis.draw(this.yScales);
+    }
+    this.xAxis.drawPlotLines(this.xScales);
+    this.yAxis.drawPlotLines(this.yScales);
+    this.legend.draw();
+  }
+
+  update(newOptions: Options) {
+    /**
+     * 更新功能目前还没有想到最优的方案，暂时先根据目前的需求来强定制
+     */
+    const options = assign({}, this.options, newOptions);
+
+    if (newOptions.series) {
+      options.series = newOptions.series;
+    }
+    this.options = options;
+    this.initSeries();
+    this.initLine();
+    this.initTooltip();
+    this.initScales();
+    // this.initScales(); // TODO: 更新偶尔会出现 colsePath 的情况，但是触发两次 initScales 就不会出现 closePath 情况
+    this.legend.updateOptions(options);
+    this.draw();
+  }
+
+  getSeries() {
+    return [...this.options.series];
+  }
+
+  showTooltip(eventPosition: EventPosition) {
+    this.tooltip.draw(eventPosition, this.xScales, this.yScales);
+  }
+
+  hideTooltip() {
+    this.tooltip.clear();
+  }
+
+  initEvent() {
+    let mousedownStatus = false;
+    let mousedownPos: EventPosition = {} as EventPosition;
+    let mouseupPos: EventPosition = {} as EventPosition;
+    let mouseleavePos: EventPosition;
+    let isMouserover = false;
+    // eslint-disable-next-line no-underscore-dangle
+    const _this = this;
+    const handleMouseover = debounce((eventPosition: EventPosition) => {
+      if (isMouserover) {
+        _this.tooltip.draw(eventPosition, _this.xScales, _this.yScales);
+        if (mousedownStatus) {
+          _this.zoom.drawMarker(mousedownPos, eventPosition);
+        }
+      }
+    }, 10);
+    const handleMouseLeave = throttle(() => {
+      _this.tooltip.clear();
+    }, 10);
+    d3.select(this.eventCanvas).on('mousemove', function mousemove(this: HTMLCanvasElement) {
+      isMouserover = true;
+      handleMouseover(d3.event);
+      _this.emit('plotmove', d3.event);
+    }).on('mouseleave', function mouseleave(this: HTMLCanvasElement) {
+      mouseleavePos = d3.event;
+      isMouserover = false;
+      handleMouseLeave();
+      _this.emit('plotleave');
+    }).on('mousedown', function mousedown(this: HTMLCanvasElement) {
+      mousedownStatus = true;
+      mousedownPos = d3.event;
+    }).on('mouseup', function mouseup(this: HTMLCanvasElement) {
+      d3.event.stopPropagation();
+      const eventPosition = d3.event as EventPosition;
+      if (mousedownPos && (mousedownPos.offsetX !== eventPosition.offsetX)) {
+        _this.zoom.clearMarker();
+        _this.zoom.onZoom(mousedownPos, eventPosition, (transform: Transform) => {
+          _this.handleZoom(transform);
+        });
+      } else {
+        _this.options.onClick(d3.event);
+      }
+      mousedownStatus = false;
+      mousedownPos = {} as EventPosition;
+    }).on('touchstart', function touchmove(this: HTMLCanvasElement) {
+      // 模拟 mousedown
+      if (d3.event.touches.length > 1) {
+        mousedownStatus = true;
+        // mousedownPos = getTouchPosition(_this.eventCanvas, d3.event);
+      }
+    }).on('touchmove', function touchmove(this: HTMLCanvasElement) {
+      const eventPosition = getTouchPosition(_this.eventCanvas, d3.event) as EventPosition;
+
+      if (d3.event.touches.length === 1) {
+        _this.tooltip.draw(eventPosition, _this.xScales, _this.yScales);
+      }
+
+      // 触发 zoom marker
+      if (mousedownStatus) {
+        mousedownPos = eventPosition;
+        mouseupPos = getTouchPosition(_this.eventCanvas, d3.event, 1) as EventPosition;
+        _this.zoom.drawMarker(mousedownPos, mouseupPos);
+      }
+    }).on('touchend', function mouseleave(this: HTMLCanvasElement) {
+      isMouserover = false;
+      handleMouseLeave();
+
+      // 触发 zoom
+      if (mousedownPos && (mousedownPos.offsetX !== mouseupPos.offsetX)) {
+        _this.zoom.clearMarker();
+        _this.zoom.onZoom(mousedownPos, mouseupPos, (transform: Transform) => {
+          _this.handleZoom(transform);
+        });
+      } else {
+        _this.options.onClick(d3.event);
+      }
+      mousedownStatus = false;
+      mousedownPos = {} as EventPosition;
+      mouseupPos = {} as EventPosition;
+    });
+
+    // TODO: removeListener
+    window.addEventListener('mouseup', () => {
+      if (!isEmpty(mousedownPos)) {
+        const eventPosition = mouseleavePos;
+        mousedownStatus = false;
+        _this.zoom.clearMarker();
+        _this.zoom.onZoom(mousedownPos, eventPosition, (transform: Transform) => {
+          _this.handleZoom(transform);
+        });
+        mousedownPos = {} as EventPosition;
+      }
+    });
+
+    addListener(this.options.chart.renderTo, this.handleResize);
+  }
+
+  on = (type: string, callback: () => void) => {
+    dispatch.on(type, callback);
+  }
+
+  emit = (type: string, params?: any) => {
+    dispatch.call(type, this, params);
+  }
+
+  getZoomedSeries = () => {
+    const { chart: { renderTo }, series, timestamp, xkey } = this.options;
+    const renderToWidth = renderTo.offsetWidth;
+    return series.map((serie) => {
+      if (Object.prototype.toString.call(serie.data) === '[object Array]') {
+        const data = serie.data.filter((point) => {
+          const xVal = timestamp === 'X' ? point[xkey] * 1000 : point[xkey];
+          const x = this.xScales(new Date(xVal));
+          return x >= 0 && x <= renderToWidth;
+        });
+        return {
+          ...serie,
+          data,
+        };
+      }
+      return serie;
+    });
+  }
+
+  handleResize = () => {
+    const { chart } = this.options;
+    const width = chart.renderTo.offsetWidth;
+    const height = chart.renderTo.offsetHeight;
+
+    this.options.chart.width = width - chart.marginLeft - chart.marginRight;
+    this.options.chart.height = height - chart.marginTop - chart.marginBottom;
+    this.options.chart.containerWidth = width;
+    this.options.chart.containerHeight = height;
+    this.container.style.width = `${width}px`;
+    this.container.style.height = `${height}px`;
+    this.retinaScaled(this.backCanvas, 'back');
+    this.retinaScaled(this.frontCanvas, 'front');
+    this.retinaScaled(this.eventCanvas, 'event');
+    this.initScales();
+    this.draw();
+  }
+
+  handleZoom = (transform?: Transform) => {
+    const { ykey, yAxis } = this.options
+    let { series } = this.options;
+    if (transform) {
+      this.transform = transform;
+      this.xScales = transform.rescaleX(this.xScales);
+      series = this.getZoomedSeries();
+    } else {
+      this.transform = undefined;
+      this.xScales = this.xAxis.init();
+    }
+
+    if (Array.isArray(series)) {
+      let ymin = yAxis.min || -Infinity;
+      let ymax = yAxis.max || Infinity;
+      for (const serie of series) {
+        const data = Array.isArray(serie.data) ? serie.data : [];
+        let dataIdx;
+        for (dataIdx = 0; dataIdx < data.length; dataIdx++) {
+          const item = data[dataIdx];
+          const y = item[ykey];
+          if (y === null) continue;
+          // get axis domain
+          if (ymin < y) {
+            ymin = y;
+          }
+          if (ymax > y) {
+            ymax = y;
+          }
+        }
+      }
+      this.yAxis.setDomain(this.yScales, { ymin, ymax });
+    }
+    this.draw();
+    this.options.onZoom(this.getZoomedSeries);
+  }
+
+  handleLegendItemClick = (serieName: string) => {
+    const { notDisplayedSeries } = this.options;
+
+    if (notDisplayedSeries.indexOf(serieName) === -1) {
+      notDisplayedSeries.push(serieName);
+    } else {
+      this.options.notDisplayedSeries = notDisplayedSeries.filter((serie) => {
+        return serie !== serieName;
+      });
+      this.update(this.options);
+    }
+  }
+
+  retinaScaled(canvas: HTMLCanvasElement, name: string) {
+    const { chart, ratio } = this.options;
+    const ctx = canvas.getContext('2d')!;
+    const width = name === 'front' ? chart.containerWidth : chart.width;
+    const height = name === 'front' ? chart.containerHeight : chart.height;
+    const left = name === 'front' ? '0px' : `${chart.marginLeft}px`;
+    const top = name === 'front' ? '0px' : `${chart.marginTop}px`;
+
+    canvas.width = width * ratio;
+    canvas.height = height * ratio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.style.position = 'absolute';
+    canvas.style.left = left;
+    canvas.style.top = top;
+    if (name === 'front') {
+      ctx.translate(chart.marginLeft * ratio, chart.marginTop * ratio);
+    }
+    ctx.scale(ratio, ratio);
+  }
+
+  createContainer() {
+    const { chart } = this.options;
+    const container = document.createElement('div');
+
+    container.style.position = 'relative';
+    container.style.width = `${chart.containerWidth}px`;
+    container.style.height = `${chart.containerHeight}px`;
+    container.style.overflow = 'hidden';
+    container.className = 'd3-graph-container';
+    chart.renderTo.appendChild(container);
+    this.container = container;
+  }
+
+  createCanvas() {
+    const { chart: { id } } = this.options;
+
+    function create(this: TsGraphType, name: string) {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+
+      canvas.setAttribute('id', `${id}-${name}Canvas`);
+      this.container.appendChild(canvas);
+      this[`${name}Canvas`] = canvas;
+      this[`${name}Context`] = context;
+      this.retinaScaled(canvas, name);
+    }
+    create.call(this, 'back');
+    create.call(this, 'front');
+    create.call(this, 'event');
+  }
+
+  initSeries() {
+    const { fillNull, series, xkey, ykey, yAxis } = this.options;
+    let xmin = -Infinity;
+    let xmax = Infinity;
+    let ymin = yAxis.min;
+    let ymax = yAxis.max;
+
+    if (Array.isArray(series)) {
+      const newSeries: Serie[] = [];
+      for (const serie of series) {
+        const data = Array.isArray(serie.data) ? serie.data : [];
+        const newData: SerieDataItem[] = [];
+        let flag = false; // 起始标记，后面有连续空值即丢掉
+        let dataIdx;
+        for (dataIdx = 0; dataIdx < data.length; dataIdx++) {
+          const item = data[dataIdx];
+          const x = item[xkey];
+          const y = item[ykey];
+
+          // filter is invalid points
+          if (fillNull === undefined) {
+            if (
+              dataIdx === 0
+              || dataIdx === data.length - 1
+              || (dataIdx > 0 && dataIdx < data.length -1 && typeof y === 'number')
+            ) {
+              newData.push(item);
+              flag = true;
+            } else if (flag) {
+              newData.push(item);
+              flag = false;
+            }
+          } else {
+            newData.push(item);
+          }
+
+          // get axis domain
+          if (xmin < x) {
+            xmin = x;
+          }
+          if (xmax > x) {
+            xmax = x;
+          }
+          if (typeof y === 'number') {
+            if (typeof ymin !== 'number' || y < ymin) {
+              ymin = y;
+            }
+            if (typeof ymax !== 'number' || y > ymax) {
+              ymax = y;
+            }
+          } else if (typeof fillNull === 'number') {
+            if (fillNull < ymin) {
+              ymin = fillNull;
+            }
+            if (fillNull > ymax) {
+              ymax = fillNull;
+            }
+          }
+        }
+        newSeries.push({
+          ...serie,
+          data: newData,
+        });
+      }
+      // TODO: 这里不能直接 set，应该保留用户的 options
+      this.options.series = newSeries;
+      this.options.xmin = xmin;
+      this.options.xmax = xmax;
+      this.options.ymin = ymin;
+      this.options.ymax = ymax;
+    }
+  }
+
+  initLine() { // TODO: 涉及重复实例导
+    this.line = new Line(this.options, this.backContext);
+  }
+
+  initTooltip() { // TODO: 涉及重复实例导
+    this.tooltip = new Tooltip(this.options, this.frontContext, this.container, this.eventCanvas);
+  }
+
+  initZoom() {
+    this.zoom = new Zoom(this.options, this.handleZoom, this.container, this.eventCanvas);
+  }
+
+  initLegend() {
+    this.legend = new Legend(this.options, this.handleLegendItemClick, this.container, this.eventCanvas);
+  }
+
+  initScales() { // TODO: 涉及重复实例导
+    const xAxis = new XAxis(this.options, this.backContext);
+    const yAxis = new YAxis(this.options, this.backContext);
+
+    this.xAxis = xAxis;
+    let xScales = xAxis.init();
+    if (this.transform) {
+      xScales = this.transform.rescaleX(xScales);
+    }
+    this.xScales = xScales;
+    this.yAxis = yAxis;
+    this.yScales = yAxis.init();
+  }
+
+  destroy() {
+    this.tooltip.destroy();
+    d3.select(this.eventCanvas).on('mousemove', null)
+      .on('mouseleave', null)
+      .on('mousedown', null)
+      .on('mouseup', null)
+      .on('touchmove', null);
+    d3.select(this.container).remove();
+    removeListener(this.options.chart.renderTo, this.handleResize);
+  }
+}