2 changed files with 102 additions and 0 deletions
@ -0,0 +1,41 @@ |
|||||||
|
<!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/index.dev.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, usePanning: false, |
||||||
|
axis: { |
||||||
|
y: { invert: false, range: [0, 350] }, |
||||||
|
y1: { isActive: true, range: [0, 10], ticksCount: 8 }, |
||||||
|
x: { format: 'time' } |
||||||
|
}, |
||||||
|
zoomEvents: { |
||||||
|
mouse: { zoom: { isActive: false } }, |
||||||
|
scroll: { zoom: { isActive: false } } |
||||||
|
}, |
||||||
|
} |
||||||
|
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' }, |
||||||
|
], |
||||||
|
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 ExamplePod 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', 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 }; |
||||||
Loading…
Reference in new issue