@fc-plot/ts-graph 0.6.0

package/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/.eslintignore

@@ -0,0 +1,8 @@
+examples/*
+coverage/*
+tests/*
+dist/*
+webpack.*
+proxy.*
+webpack.compile.config.js
+webpack.dev.config.js

package/.eslintrc

@@ -0,0 +1,60 @@
+{
+  "extends": [
+    "airbnb-typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "generators": true,
+      "classes": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true
+  },
+  "rules": {
+    "arrow-body-style": 1,
+    "function-paren-newline": [
+      2,
+      "consistent"
+    ],
+    "newline-per-chained-call": 1,
+    "object-curly-newline": 1,
+    "global-require": 1,
+    "max-len": [
+      1,
+      100,
+      2,
+      {
+        "ignoreUrls": true,
+        "ignoreComments": false,
+        "ignoreRegExpLiterals": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true
+      }
+    ],
+    "no-param-reassign": 1,
+    "import/no-unresolved": 0,
+    "import/extensions": "ignorePackages",
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-max-props-per-line": [
+      2,
+      {
+        "maximum": 3
+      }
+    ],
+    "react/jsx-closing-bracket-location": [
+      0,
+      "after-props"
+    ],
+    "react/jsx-no-target-blank": 1,
+    "react/forbid-prop-types": 1
+  }
+}

package/README.md

@@ -0,0 +1,122 @@
+# ts-graph  
+
+---
+
+a time series graph using D3.js.
+
+## Install  
+
+```sh
+npm i @fc-plot/ts-graph -S
+```
+
+## Demo  
+
+```js
+import { random } from 'lodash';
+import TsGraph from '@fc-plot/ts-graph';
+import '@fc-plot/ts-graph/dist/index.css';
+
+function generateSeries(seriesCount = 1000) {
+  const series = [];
+
+  for (let n = 1; n <= seriesCount; n++) {
+    const seriesData = [];
+    const seriesDataCount = random(99, 100);
+
+    for (let m = 1; m <= seriesDataCount; m++) {
+      seriesData.push({
+        timestamp: 1502266250000 + (m * 10000),
+        value: random(0, 1000, 3),
+        marker: {
+          enabled: true,
+          radius: 1,
+        }
+      });
+    }
+
+    series.push({
+      name: `serie-${n}`,
+      data: seriesData,
+    });
+  }
+
+  return series;
+}
+
+new TsGraph({
+  timestamp: 'x',
+  xkey: 'timestamp',
+  ykey: 'value',
+  chart: {
+    renderTo: document.getElementById(`content`),
+  },
+  series: generateSeries(),
+})
+```
+
+## Options
+
+```js
+const defaultOptions = {
+  ratio: window.devicePixelRatio || 1,
+  xkey: 0, // time keyName
+  ykey: 1, // value keyName
+  timestamp: 'x', // timestamp type x: Unix Millisecond, X: Unix
+  chart: {
+    id: uniqueId('d3-graph-'),
+    colors: ['#3399CC', '#CC9933', '#9966CC', '#66CC66', '#CC3333', '#99CCCC', '#CCCC66', '#CC99CC', '#99CC99', '#CC6666', '#336699', '#996633', '#993399', '#339966', '#993333'],
+    renderTo: userOptions.chart.renderTo,
+    width: userOptions.chart.renderTo.offsetWidth,
+    height: userOptions.chart.renderTo.offsetHeight || 350,
+    marginTop: 10,
+    marginRight: 10,
+    marginBottom: 10,
+    marginLeft: 10,
+  },
+  xAxis: {
+    lineColor: '#ccc',
+    lineWidth: 1,
+    tickLength: 5,
+    tickpadding: 5,
+    tickColor: '#ccc',
+    labels: {
+      color: '#999',
+      fontSize: 11,
+    },
+  },
+  yAxis: {
+    lineColor: '#ccc',
+    lineWidth: 1,
+    tickLength: 5,
+    tickpadding: 5,
+    tickColor: '#ccc',
+    gridLineColor: '#efefef',
+    labels: {
+      color: '#999',
+      fontSize: 11,
+      style: {
+        fontSize: 11,
+        color: '#999',
+      },
+    },
+    plotLines: [{
+        value: 100,
+        color: 'red',
+    }],
+  },
+  tooltip: {
+    shared: true,
+    formatter: undefined, // 自定义 tooltip 内容 undefined | (points) => StringOfHTML
+  },
+  series: [] // { name: string, data: any[] }[],
+  fillNull: undefined,
+  onZoom: () => {},
+}
+```
+
+## Api  
+
+### update(newOptions)  
+
+### destroy  

package/assets/style.css

@@ -0,0 +1,58 @@
+.ts-graph-tooltip {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+}
+.ts-graph-tooltip-content {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  position: absolute;
+  color: #333333;
+  margin-left: 0px;
+  margin-top: 0px;
+  left: 8px;
+  top: 8px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid silver;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #888;
+  white-space: nowrap;
+  padding: 5px;
+}
+.ts-graph-tooltip ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ts-graph-tooltip ul li {
+  table-layout: fixed;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.ts-graph-zoom {
+  position: relative;
+}
+.ts-graph-zoom-marker {
+  position: absolute;
+  background: rgba(51, 92, 173, 0.25);
+}
+.ts-graph-zoom-resetBtn {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  right: 10px;
+  background: #f7f7f7;
+  font-size: 12px;
+  text-align: center;
+  width: 84px;
+  height: 31px;
+  line-height: 31px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  color: #333;
+}
+.ts-graph-zoom-resetBtn:hover {
+  background: #e6e6e6;
+}

package/assets/style.less

@@ -0,0 +1,101 @@
+.d3-graph-container {
+  user-select: none;
+}
+
+.ts-graph-tooltip {
+  visibility: hidden;
+  position: fixed;
+  pointer-events: none;
+  user-select: none;
+  width: 100%;
+}
+.ts-graph-tooltip-content {
+  font-size: 12px;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  white-space: nowrap;
+  color: rgb(51, 51, 51);
+  margin-left: 0px;
+  margin-top: 0px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid silver;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #888;
+  white-space: nowrap;
+  padding: 5px;
+  position: fixed;
+  z-index: 9999;
+}
+.ts-graph-tooltip ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ts-graph-tooltip ul li {
+  table-layout: fixed;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.ts-graph-zoom {
+  position: relative;
+}
+.ts-graph-legend {
+  position: relative;
+  padding: 0 10px;
+}
+.ts-graph-legend-item {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 10px;
+  word-break: break-all;
+}
+.ts-graph-legend-item-symbol {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  width: 20px;
+  height: 20px;;
+  margin: 0 5px;
+}
+.ts-graph-legend-item-symbol-line {
+  position: absolute;
+  display: inline-block;
+  width: 20px;
+  top: 9px;
+  left: 0;
+  border-width: 1px;
+  border-style: solid;
+}
+.ts-graph-legend-item-symbol-point {
+  position: absolute;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  top: 5px;
+  left: 5px;
+  border-radius: 10px;
+}
+.ts-graph-zoom-marker {
+  position: absolute;
+  background: rgba(51,92,173,0.25);
+}
+.ts-graph-zoom-resetBtn {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  right: 10px;
+  background: #f7f7f7;
+  font-size: 12px;
+  text-align: center;
+  width: 84px;
+  height: 31px;
+  line-height: 31px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  color: #333;
+}
+.ts-graph-zoom-resetBtn:hover {
+  background: #e6e6e6;
+}