Merge pull request 'Demo' (#14) from examples into main

Reviewed-on: #14
1 year ago · ffc73dbd85
6 changed files with 145 additions and 2 deletions
--- a/build/webpack.demo.conf.js
+++ b/build/webpack.demo.conf.js
@ -0,0 +1,40 @@
+const path = require('path');
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  context: resolve('demo'),
+  entry: './demo_pod.ts',
+  plugins: [],
+  devtool: 'inline-source-map',
+  watch: true,
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
+          'css-loader',
+        ],
+        exclude: /node_modules/
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: 'demo.js',
+    path: resolve('demo/dist'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  }
+};
--- a/demo/README.md
+++ b/demo/README.md
@ -0,0 +1,5 @@
+### HOW TO RUN
+
+run `yarn run dev` and `yarn run demo` in separate terminals simultaneously.
+
+open `demo.html` in your browser.
--- a/demo/demo.html
+++ b/demo/demo.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+
+    <script src="./dist/demo.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 50%; height: 500px;"></div>
+
+    <script type="text/javascript">
+      const startTime = 1590590148;
+      const arrayLength = 20;
+      const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+
+      let options = {
+        renderLegend: false,
+        axis: {
+          y: { range: [0, 350] },
+          x: { format: 'time' }
+        },
+        zoomEvents: {
+          mouse: { zoom: { isActive: false }, pan: { isActive: false } },
+          scroll: { zoom: { isActive: false } }
+        },
+      }
+      var pod = new DemoPod(
+        document.getElementById('chart'),
+        [
+          { target: 'test1', datapoints: data1, color: 'green' },
+        ],
+        options
+      );
+      pod.render();      
+    </script>
+  </body>
+</html>
--- a/demo/demo_pod.ts
+++ b/demo/demo_pod.ts
@ -0,0 +1,61 @@
+import {
+  ChartwerkPod,
+  Serie,
+  Options
+} from '../dist/index';
+
+import * as d3 from 'd3';
+import * as _ from 'lodash';
+
+
+class DemoPod extends ChartwerkPod<Serie, Options> {
+  lineGenerator = null;
+
+  constructor(
+    _el: HTMLElement,
+    _series: Serie[] = [],
+    _options: Options = {},
+  ) {
+    super(_el, _series, _options);
+  }
+
+  override renderMetrics(): void {
+    this.clearAllMetrics();
+    this.initLineGenerator();
+    for(const serie of this.series.visibleSeries) {
+      this.renderLine(serie);
+    }
+  }
+
+  clearAllMetrics(): void {
+    // TODO: temporary hack before it will be implemented in core.
+    this.chartContainer.selectAll('.metric-el').remove();
+  }
+
+  initLineGenerator(): void {
+    this.lineGenerator = d3.line()
+      .x(d => this.state.xScale(d[0]))
+      .y(d => this.state.yScale(d[1]));
+  }
+
+  renderLine(serie: Serie): void {
+    this.metricContainer
+      .append('path')
+      .datum(serie.datapoints)
+      .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
+      .attr('fill-opacity', 0)
+      .attr('stroke', serie.color)
+      .attr('stroke-width', 1)
+      .attr('stroke-opacity', 0.7)
+      .attr('pointer-events', 'none')
+      .attr('d', this.lineGenerator);
+  }
+
+  onMouseMove(): void {}
+  onMouseOver(): void {}
+  onMouseOut(): void {}
+  renderSharedCrosshair(values): void {}
+  hideSharedCrosshair(): void {}
+}
+
+export { DemoPod };
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  "scripts": {
    "build": "webpack --config build/webpack.prod.conf.js",
    "dev": "webpack --config build/webpack.dev.conf.js",
+    "demo": "webpack --config build/webpack.demo.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,6 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "rootDir": "./src",
    "module": "esnext",
    "declaration": true,
    "declarationDir": "dist",
@ -16,7 +15,6 @@
    "noImplicitUseStrict": false,
    "noImplicitAny": false,
    "noUnusedLocals": false,
-    "baseUrl": "./src",
    "moduleResolution": "node"
  }
 }