From 0cb408c9b598a2d86d0014ab57eb9f2ebf111582 Mon Sep 17 00:00:00 2001 From: vargburz Date: Wed, 27 Dec 2023 13:41:34 +0300 Subject: [PATCH 1/3] add example pod --- example/example.html | 41 +++++++++++++++++++++++++++++ example/examplePod.ts | 61 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 example/example.html create mode 100644 example/examplePod.ts diff --git a/example/example.html b/example/example.html new file mode 100644 index 0000000..9c6f55a --- /dev/null +++ b/example/example.html @@ -0,0 +1,41 @@ + + + + + + + + + +
+ + + + diff --git a/example/examplePod.ts b/example/examplePod.ts new file mode 100644 index 0000000..7f97ce2 --- /dev/null +++ b/example/examplePod.ts @@ -0,0 +1,61 @@ +import { + ChartwerkPod, + Serie, + Options +} from '../dist/index'; + +import * as d3 from 'd3'; +import * as _ from 'lodash'; + + +class ExamplePod extends ChartwerkPod { + 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', serie.color) + .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 { ExamplePod }; From a4251b69b7f4a0cd6e173532634064dad2ed7b5c Mon Sep 17 00:00:00 2001 From: vargburz Date: Wed, 27 Dec 2023 14:50:48 +0300 Subject: [PATCH 2/3] build example --- build/webpack.demo.conf.js | 40 +++++++++++++++++++++++ example/README.md | 5 +++ example/example.html | 11 +++---- example/{examplePod.ts => example_pod.ts} | 2 +- package.json | 1 + src/index.ts | 1 + tsconfig.json | 2 -- 7 files changed, 52 insertions(+), 10 deletions(-) create mode 100755 build/webpack.demo.conf.js create mode 100644 example/README.md rename example/{examplePod.ts => example_pod.ts} (97%) diff --git a/build/webpack.demo.conf.js b/build/webpack.demo.conf.js new file mode 100755 index 0000000..89ef151 --- /dev/null +++ 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 + } +}; diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..4dd7c7e --- /dev/null +++ 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. diff --git a/example/example.html b/example/example.html index 9c6f55a..a978084 100644 --- a/example/example.html +++ b/example/example.html @@ -4,7 +4,7 @@ - +
@@ -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 ); diff --git a/example/examplePod.ts b/example/example_pod.ts similarity index 97% rename from example/examplePod.ts rename to example/example_pod.ts index 7f97ce2..5ddb1ba 100644 --- a/example/examplePod.ts +++ b/example/example_pod.ts @@ -43,7 +43,7 @@ class ExamplePod extends ChartwerkPod { .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) diff --git a/package.json b/package.json index 04238f5..c8b9e6a 100755 --- 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": { diff --git a/src/index.ts b/src/index.ts index 66c46d4..7e6dcdb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -102,6 +102,7 @@ abstract class ChartwerkPod { } public render(): void { + console.log('tut'); this.options.callbackRenderStart(); this.renderClipPath(); diff --git a/tsconfig.json b/tsconfig.json index 558c8fc..4c96b42 100755 --- 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" } } From 43852582b6f375c14c2da79ce25be03ffce241f6 Mon Sep 17 00:00:00 2001 From: vargburz Date: Wed, 27 Dec 2023 14:57:27 +0300 Subject: [PATCH 3/3] rename example to demo --- build/webpack.demo.conf.js | 8 ++++---- {example => demo}/README.md | 2 +- example/example.html => demo/demo.html | 6 +++--- example/example_pod.ts => demo/demo_pod.ts | 4 ++-- src/index.ts | 1 - 5 files changed, 10 insertions(+), 11 deletions(-) rename {example => demo}/README.md (71%) rename example/example.html => demo/demo.html (84%) rename example/example_pod.ts => demo/demo_pod.ts (94%) diff --git a/build/webpack.demo.conf.js b/build/webpack.demo.conf.js index 89ef151..5e9d844 100755 --- a/build/webpack.demo.conf.js +++ b/build/webpack.demo.conf.js @@ -5,8 +5,8 @@ function resolve(dir) { } module.exports = { - context: resolve('example'), - entry: './example_pod.ts', + context: resolve('demo'), + entry: './demo_pod.ts', plugins: [], devtool: 'inline-source-map', watch: true, @@ -32,8 +32,8 @@ module.exports = { extensions: ['.ts', '.js'], }, output: { - filename: 'example.js', - path: resolve('example/dist'), + filename: 'demo.js', + path: resolve('demo/dist'), libraryTarget: 'umd', umdNamedDefine: true } diff --git a/example/README.md b/demo/README.md similarity index 71% rename from example/README.md rename to demo/README.md index 4dd7c7e..7c8d5d4 100644 --- a/example/README.md +++ b/demo/README.md @@ -2,4 +2,4 @@ run `yarn run dev` and `yarn run demo` in separate terminals simultaneously. -open `example.html` in your browser. +open `demo.html` in your browser. diff --git a/example/example.html b/demo/demo.html similarity index 84% rename from example/example.html rename to demo/demo.html index a978084..dd7a288 100644 --- a/example/example.html +++ b/demo/demo.html @@ -4,7 +4,7 @@ - +
@@ -21,11 +21,11 @@ x: { format: 'time' } }, zoomEvents: { - mouse: { zoom: { isActive: false } }, + mouse: { zoom: { isActive: false }, pan: { isActive: false } }, scroll: { zoom: { isActive: false } } }, } - var pod = new ExamplePod( + var pod = new DemoPod( document.getElementById('chart'), [ { target: 'test1', datapoints: data1, color: 'green' }, diff --git a/example/example_pod.ts b/demo/demo_pod.ts similarity index 94% rename from example/example_pod.ts rename to demo/demo_pod.ts index 5ddb1ba..c296bcf 100644 --- a/example/example_pod.ts +++ b/demo/demo_pod.ts @@ -8,7 +8,7 @@ import * as d3 from 'd3'; import * as _ from 'lodash'; -class ExamplePod extends ChartwerkPod { +class DemoPod extends ChartwerkPod { lineGenerator = null; constructor( @@ -58,4 +58,4 @@ class ExamplePod extends ChartwerkPod { hideSharedCrosshair(): void {} } -export { ExamplePod }; +export { DemoPod }; diff --git a/src/index.ts b/src/index.ts index 7e6dcdb..66c46d4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -102,7 +102,6 @@ abstract class ChartwerkPod { } public render(): void { - console.log('tut'); this.options.callbackRenderStart(); this.renderClipPath();