build example

4 months ago · a4251b69b7
7 changed files with 52 additions and 10 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('example'),
+  entry: './example_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: 'example.js',
+    path: resolve('example/dist'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  }
+};
--- a/example/README.md
+++ b/example/README.md
@ -0,0 +1,5 @@
+### HOW TO RUN
+
+run `yarn run dev` and `yarn run demo` in separate terminals simultaneously.
+
+open `example.html` in your browser.
--- a/example/example.html
+++ b/example/example.html
@ -4,7 +4,7 @@
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

-    <script src="../dist/index.dev.js" type="text/javascript"></script>
+    <script src="./dist/example.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="chart" style="width: 50%; height: 500px;"></div>
@ -15,10 +15,9 @@
      const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);

      let options = {
-        renderLegend: false, usePanning: false,
+        renderLegend: false,
        axis: {
-          y: { invert: false, range: [0, 350] },
-          y1: { isActive: true, range: [0, 10],  ticksCount: 8 },
+          y: { range: [0, 350] },
          x: { format: 'time' }
        },
        zoomEvents: {
@ -29,9 +28,7 @@
      var pod = new ExamplePod(
        document.getElementById('chart'),
        [
-          { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
-          { target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
-          { target: 'test3', datapoints: data3, color: 'orange' },
+          { target: 'test1', datapoints: data1, color: 'green' },
        ],
        options
      );
--- a/example/example_pod.ts
+++ b/example/example_pod.ts
@ -43,7 +43,7 @@ class ExamplePod extends ChartwerkPod<Serie, Options> {
      .append('path')
      .datum(serie.datapoints)
      .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
-      .attr('fill', serie.color)
+      .attr('fill-opacity', 0)
      .attr('stroke', serie.color)
      .attr('stroke-width', 1)
      .attr('stroke-opacity', 0.7)
--- 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/src/index.ts
+++ b/src/index.ts
@ -102,6 +102,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
  }

  public render(): void {
+    console.log('tut');
    this.options.callbackRenderStart();

    this.renderClipPath();
--- 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"
  }
 }