@fc-plot/ts-graph 0.6.0

package/src/utils.ts

@@ -0,0 +1,74 @@
+import { Timestamp } from './interface';
+
+type Point = {
+  x: number,
+  y: number,
+};
+
+export function distanceBetweenPointsX(x1: number, x2: number): number {
+  return Math.sqrt(Math.pow(x2 - x1, 2));
+}
+
+export function distanceBetweenPoints(pt1: Point, pt2: Point) {
+  return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));
+}
+
+export function getColor(colors: string[], i: number): string {
+  const len = colors.length;
+  if (i < len) {
+    return colors[i];
+  }
+  return getColor(colors, i - len);
+}
+
+export function dateFormat(d: Date) {
+  return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}
+    ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
+}
+
+export function getRatio() {
+  return window.devicePixelRatio ? window.devicePixelRatio : 2;
+}
+
+export function dateStrToTs(date: string) {
+  return (new Date(date)).getTime();
+}
+
+export function getMsTs(ts: number, type: Timestamp) {
+  return type === 'X' ? ts * 1000 : ts;
+}
+
+// 获取在移动端的偏移位置
+export function getTouchPosition(el: HTMLCanvasElement, d3Event: any, idx = 0) {
+  const vertex = el.getBoundingClientRect();
+  const clientX = d3Event.touches[idx].clientX;
+  const clientY = d3Event.touches[idx].clientY;
+  const x = clientX - vertex.left;
+  const y = clientY - vertex.top;
+  return {
+    offsetX: x,
+    offsetY: y,
+    clientX,
+    clientY,
+  };
+}
+
+export function formatTrim(s: string) {
+
+  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
+
+    switch (s[i]) {
+
+      case ".": i0 = i1 = i; break;
+
+      case "0": if (i0 === 0) i0 = i; i1 = i; break;
+
+      default: if (i0 > 0) { if (!+s[i]) break out; i0 = 0; } break;
+
+    }
+
+  }
+
+  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
+
+}

package/src/worker.ts

@@ -0,0 +1,37 @@
+import getNearestPoints from './getNearestPoints';
+import { Serie } from './interface';
+
+type CacheType = {
+  [index: string]: string;
+};
+type SeriesType = {
+  [index: string]: Serie[];
+};
+
+const cache: CacheType = {};
+const series: SeriesType = {};
+const ctx: Worker = self as any;
+
+ctx.addEventListener('message', (event) => {
+  const { data } = event;
+
+  if (data.id) {
+    if (!cache[data.id] || !data.flag) {
+      cache[data.id] = data.str;
+      series[data.id] = JSON.parse(data.str);
+    }
+  }
+
+  const nearestPoints = getNearestPoints({
+    x: data.x,
+    xkey: data.xkey,
+    ykey: data.ykey,
+    timestamp: data.timestamp,
+    series: series[data.id],
+    fillNull: data.fillNull,
+  });
+
+  ctx.postMessage(nearestPoints); // TODO: targetOrigin
+});
+
+export default ctx;

package/src/xAxis.ts

@@ -0,0 +1,119 @@
+import * as d3 from 'd3';
+import { getMsTs } from './utils';
+import { Options, XScales } from './interface';
+
+export default class XAxis {
+  options: Options;
+
+  ctx: CanvasRenderingContext2D;
+
+  constructor(userOptions: Options, ctx: CanvasRenderingContext2D) {
+    this.options = userOptions;
+    this.ctx = ctx;
+  }
+
+  init() {
+    const {
+      chart: { width }, timestamp, xmin, xmax,
+    } = this.options;
+    const xScales = d3.scaleTime().range([0, width]);
+
+    xScales.domain([
+      getMsTs(xmax, timestamp) + (xmin === xmax ? 1000 : 0), // 只有一个点的时候居中显示
+      getMsTs(xmin, timestamp) - (xmin === xmax ? 1000 : 0),
+    ]);
+    return xScales;
+  }
+
+  draw(xScales: XScales) {
+    const { ctx, options } = this;
+    const { chart, xAxis, time } = options;
+    let ticks = xScales.ticks(Math.floor(chart.width / 90));
+    if (xAxis.ticks) {
+      // eslint-disable-next-line prefer-destructuring
+      ticks = xAxis.ticks;
+    }
+    const tickBottom = chart.height - xAxis.tickpadding - xAxis.labels.fontSize;
+
+    // draw tick
+    ctx.beginPath();
+    ticks.forEach((d) => {
+      const xScalesedVal = xScales(d);
+      if (xScalesedVal) {
+        ctx.moveTo(xScalesedVal, tickBottom);
+        ctx.lineTo(xScalesedVal, tickBottom - xAxis.tickLength);
+      }
+    });
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = xAxis.tickColor;
+    ctx.stroke();
+
+    // draw line
+    ctx.beginPath();
+    ctx.moveTo(0, tickBottom - xAxis.tickLength);
+    ctx.lineTo(chart.width, tickBottom - xAxis.tickLength);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = xAxis.lineColor;
+    ctx.stroke();
+
+    // draw labels
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'bottom';
+    ctx.fillStyle = xAxis.labels.color;
+    ctx.font = `${xAxis.labels.fontSize}px Palantino`;
+    ticks.forEach((d, idx) => {
+      let timeFormat = '%H:%M';
+      if (d.getSeconds() !== 0) {
+        timeFormat = '%H:%M:%S';
+      }
+      if (d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0) {
+        timeFormat = '%m-%d';
+      }
+
+      if (xAxis.labels.timeFormat) {
+        // eslint-disable-next-line prefer-destructuring
+        timeFormat = xAxis.labels.timeFormat;
+      }
+
+      let tzD = d;
+
+      if (time && time.timezoneOffset) {
+        const timezoneOffset = d.getTimezoneOffset();
+        const ts = d.getTime();
+        const destTs = ts + (timezoneOffset * 60 * 1000) + (time.timezoneOffset * 60 * 1000);
+        tzD = new Date(destTs);
+      }
+      // TODO: 临时支持 ticks
+      if (xAxis.ticks && xAxis.ticks.length > 1) {
+        let x = xScales(d);
+        if (idx === 0) {
+          x += (timeFormat.length * xAxis.labels.fontSize) / 4 + 1;
+        } else if (idx === ticks.length - 1) {
+          x -= (timeFormat.length * xAxis.labels.fontSize) / 4 - 1;
+        }
+        ctx.fillText(d3.timeFormat(timeFormat)(tzD), x, chart.height);
+      } else if (xScales(d)) {
+        ctx.fillText(d3.timeFormat(timeFormat)(tzD), xScales(d), chart.height);
+      }
+    });
+  }
+
+  drawPlotLines(xScales: XScales) {
+    const { ctx, options } = this;
+    const { chart, xAxis, xAxis: { plotLines } } = options;
+    const tickBottom = chart.height - xAxis.tickpadding - xAxis.labels.fontSize;
+
+    if (Array.isArray(plotLines)) {
+      plotLines.forEach((plotLine) => {
+        const xValue = xScales(plotLine.value);
+        ctx.setLineDash([5, 3]);
+        ctx.beginPath();
+        ctx.moveTo(xValue, 0);
+        ctx.lineTo(xValue, tickBottom - xAxis.tickLength);
+        ctx.strokeStyle = plotLine.color;
+        ctx.stroke();
+        ctx.setLineDash([]);
+      });
+    }
+  }
+}

package/src/yAxis.ts

@@ -0,0 +1,178 @@
+import * as d3 from 'd3';
+import { Options, YScales } from './interface';
+
+interface RealData {
+  [index: string]: any;
+}
+
+export default class YAxis {
+  options: Options;
+
+  ctx: CanvasRenderingContext2D;
+
+  tickLength: number;
+
+  ticks: number[];
+
+  constructor(userOptions: Options, ctx: CanvasRenderingContext2D) {
+    this.options = userOptions;
+    this.ctx = ctx;
+    this.tickLength = Math.floor(userOptions.chart.height / 50);
+    this.ticks = [];
+  }
+
+  init() {
+    const { chart, xAxis } = this.options;
+    const yScales = d3.scaleLinear().range([chart.height - (xAxis.labels.fontSize + xAxis.tickpadding + xAxis.tickLength), 20]);
+
+    this.setDomain(yScales, this.options);
+    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 } } = 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, { ymin, ymax }: { ymin: number, ymax: number}) {
+    const plotLinesMaxAbs = this.getPlotLinesMaxAbs();
+    let realTickLength = this.tickLength;
+
+    // TODO: Optimize the tick
+    if (ymin === ymax) {
+      const increment = (ymax - ymin) / (this.tickLength - 1);
+      const halfIncrement = increment / 2 || ymax || 1;
+      realTickLength = increment === 0 ? 1 : this.tickLength;
+
+      ymin -= halfIncrement;
+      ymax += halfIncrement;
+    }
+
+    if (ymin > ymax) {
+      const cachemin = ymin;
+      ymin = ymax;
+      ymax = cachemin;
+    }
+
+    if (plotLinesMaxAbs) {
+      if (plotLinesMaxAbs < ymin) {
+        ymin = plotLinesMaxAbs;
+      }
+
+      if (plotLinesMaxAbs > ymax) {
+        ymax = plotLinesMaxAbs;
+      }
+    }
+
+    yScales.domain([ymin, ymax]);
+    yScales.nice(realTickLength);
+    this.ticks = yScales.ticks(realTickLength);
+  }
+
+  draw(yScales: YScales) {
+    const { ctx, options } = this;
+    const { yAxis } = options;
+
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'bottom';
+    ctx.shadowColor = yAxis.labels.shadowColor;
+    ctx.shadowBlur = 1;
+    ctx.lineWidth = 1;
+    ctx.fillStyle = yAxis.labels.color;
+    ctx.font = `${yAxis.labels.fontSize}px Palantino`;
+    this.ticks.forEach((d) => {
+      let text: string = String(d);
+      if (d >= 1000) {
+        text = d3.format('.5s')(d);
+        // trim insignificant zeros
+        const siPrefixReg = /[kMGTPEZY]$/;
+        if (siPrefixReg.test(text)) {
+          const siPrefix = text[text.length - 1];
+          text = text.replace(siPrefixReg, '');
+          text = parseFloat(text) + siPrefix;
+        }
+      }
+      const y = yScales(d);
+      ctx.strokeText(text, 0, y);
+      ctx.fillText(text, 0, y);
+    });
+  }
+
+  drawGridLine(yScales: YScales) {
+    const { ctx, options } = this;
+    const { chart, yAxis } = options;
+
+    ctx.beginPath();
+    this.ticks.forEach((d) => {
+      const yValue = yScales(d);
+      ctx.moveTo(0, yValue);
+      ctx.lineTo(chart.width, yValue);
+    });
+    ctx.strokeStyle = yAxis.gridLineColor;
+    ctx.stroke();
+  }
+
+  drawPlotLines(yScales: YScales) {
+    const { ctx, options } = this;
+    const { chart, yAxis, yAxis: { plotLines } } = options;
+
+    if (Array.isArray(plotLines)) {
+      plotLines.forEach((plotLine) => {
+        const yValue = yScales(plotLine.value);
+        ctx.setLineDash([5, 3]);
+        ctx.beginPath();
+        ctx.moveTo(0, yValue);
+        ctx.lineTo(chart.width, yValue);
+        ctx.strokeStyle = plotLine.color;
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'top';
+        ctx.shadowColor = '#fff';
+        ctx.shadowBlur = 1;
+        ctx.lineWidth = 1;
+        ctx.fillStyle = plotLine.color;
+        ctx.font = `${yAxis.labels.fontSize}px Palantino`;
+        ctx.strokeText(String(plotLine.value), chart.width - 10, yValue);
+        ctx.fillText(String(plotLine.value), chart.width - 10, yValue);
+      });
+    }
+  }
+}

package/src/zoom.ts

@@ -0,0 +1,105 @@
+import * as d3 from 'd3';
+import { Options, EventPosition, Transform } from './interface';
+
+type ResetFuncType = (transform?: Transform) => void;
+
+export default class Zoom {
+  options: Options;
+
+  reset: ResetFuncType;
+
+  constructor(userOptions: Options, reset: ResetFuncType, container: HTMLElement, canvas: HTMLCanvasElement) {
+    this.options = userOptions;
+    this.init(container, canvas);
+    this.reset = reset;
+  }
+
+  init(container: HTMLElement, canvas: HTMLCanvasElement) {
+    const { chart: { id, containerHeight } } = this.options;
+    const zoomEle = document.createElement('div');
+    const markerEle = document.createElement('div');
+    const resetEle = document.createElement('a');
+    const resetNode = document.createTextNode('Reset zoom');
+
+    zoomEle.id = `${id}-zoom`;
+    zoomEle.className = 'ts-graph-zoom';
+    markerEle.id = `${id}-zoom-marker`;
+    markerEle.className = 'ts-graph-zoom-marker';
+    markerEle.style.height = `${containerHeight}px`;
+    resetEle.id = `${id}-zoom-resetBtn`;
+    resetEle.className = 'ts-graph-zoom-resetBtn';
+    resetEle.appendChild(resetNode);
+    zoomEle.appendChild(markerEle);
+    zoomEle.appendChild(resetEle);
+    container.insertBefore(zoomEle, canvas);
+    this.onReset();
+  }
+
+  onReset() {
+    const { chart: { id } } = this.options;
+    const resetEle = document.getElementById(`${id}-zoom-resetBtn`) as HTMLElement;
+
+    resetEle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.reset();
+      this.clearResetBtn();
+    });
+  }
+
+  onZoom(mousedownPos: EventPosition, mouseupPos: EventPosition, cbk: (transform: Transform) => void) {
+    const { chart: { width } } = this.options;
+    const range = mouseupPos.offsetX - mousedownPos.offsetX;
+
+    if (range) {
+      const scale = width / Math.abs(range);
+      const startPoint = mouseupPos.offsetX > mousedownPos.offsetX ? mousedownPos.offsetX : mouseupPos.offsetX;
+      const transform = d3.zoomIdentity.translate(-startPoint * scale, 0).scale(scale);
+      this.drawResetBtn();
+      cbk(transform);
+    }
+  }
+
+  clearMarker() {
+    const { chart: { id } } = this.options;
+    const markerEle = document.getElementById(`${id}-zoom-marker`) as HTMLElement;
+
+    markerEle.style.display = 'none';
+    markerEle.style.width = '0px';
+    markerEle.style.left = 'unset';
+    markerEle.style.right = 'unset';
+  }
+
+  drawMarker(mousedownPos: EventPosition, eventPosition: EventPosition) {
+    const { chart: { marginLeft } } = this.options;
+    const x1 = mousedownPos.offsetX;
+    const x2 = eventPosition.offsetX;
+    const { chart: { id, containerWidth } } = this.options;
+    const markerEle = document.getElementById(`${id}-zoom-marker`) as HTMLElement;
+
+    markerEle.style.display = 'block';
+    markerEle.style.top = '0px';
+    if (x1 < x2) {
+      markerEle.style.right = 'unset';
+      markerEle.style.left = `${x1 + marginLeft}px`;
+      markerEle.style.width = `${x2 - x1}px`;
+    } else {
+      markerEle.style.left = 'unset';
+      markerEle.style.right = `${containerWidth - x1 - marginLeft}px`;
+      markerEle.style.width = `${x1 - x2}px`;
+    }
+  }
+
+  clearResetBtn() {
+    const { chart: { id } } = this.options;
+    const resetEle = document.getElementById(`${id}-zoom-resetBtn`) as HTMLElement;
+
+    resetEle.style.display = 'none';
+  }
+
+  drawResetBtn() {
+    const { chart: { id } } = this.options;
+    const resetEle = document.getElementById(`${id}-zoom-resetBtn`) as HTMLElement;
+
+    resetEle.style.display = 'block';
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noImplicitAny": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "jsx": "react",
+    "allowJs": true,
+    "noEmit": true,
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules/*",
+    "dist/*",
+    "examples/*"
+  ]
+}

package/webpack.compile.config.js

@@ -0,0 +1,15 @@
+module.exports = function(webpackConfig) {
+  webpackConfig.externals = {
+    'd3': {
+      root: 'd3',
+      commonjs2: 'd3',
+      commonjs: 'd3',
+    },
+    'lodash': {
+      root: '_',
+      commonjs2: 'lodash',
+      commonjs: 'lodash',
+    },
+  };
+  return webpackConfig;
+}