6 changed files with 145 additions and 2 deletions
@ -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 |
||||||
|
} |
||||||
|
}; |
||||||
@ -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. |
||||||
@ -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> |
||||||
@ -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 }; |
||||||
Loading…
Reference in new issue