chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 2 Projects Releases 1 Wiki Activity
Browse Source

markers conf + new example

marker-callback-#25
glitch4347 12 months ago
parent
57ae85c20e
commit
82fc9a10f1
5 changed files with 68 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      examples/markers.html
  2. 43
      examples/markers_select.html
  3. 7
      src/components/markers.ts
  4. 10
      src/index.ts
  5. 9
      src/models/marker.ts

10
examples/markers.html
Unescape View File

@ -29,10 +29,12 @@
{ datapoints: timeSerieData, color: 'black' }, { datapoints: timeSerieData, color: 'black' },
], ],
options, options,
[ {
{ data: markersData1, color: 'red' }, series: [
{ data: markersData2, color: 'blue' }, { data: markersData1, color: 'red' },
] { data: markersData2, color: 'blue' },
]
}
); );
pod.render(); pod.render();
</script> </script>

43
examples/markers_select.html
Unescape View File

@ -0,0 +1,43 @@
<!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: 100%; height: 500px;"></div>
<script type="text/javascript">
const startTime = 1701790172908;
const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
.map((el, idx) => [startTime + idx * 1000, el]);
// TODO: make this one-dimensinal data when implemented
const markersData = [3, 6, 9].map(el => [
startTime + el * 1000,
{ el }
]);
let options = {
renderLegend: false,
axis: {
y: { range: [0, 10] },
x: { format: 'time' }
},
}
var pod = new LinePod(
document.getElementById('chart'),
[
{ datapoints: timeSerieData, color: 'black' },
],
options,
{
series: [
{ data: markersData, color: 'red' },
]
}
);
pod.render();
</script>
</body>
</html>

7
src/components/markers.ts
Unescape View File

@ -1,4 +1,4 @@
import { MarkerSerie } from "../models/marker"; import { MarkersConf, MarkerSerie } from "../models/marker";
import { PodState } from "@chartwerk/core"; import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types"; import { LineTimeSerie, LineOptions } from "../types";
@ -8,7 +8,8 @@ export class Markers {
// TODO: more semantic name // TODO: more semantic name
private _d3Holder = null; private _d3Holder = null;
constructor(private _markers: MarkerSerie[], private _state: PodState<LineTimeSerie, LineOptions>) { constructor(private _markerConf: MarkersConf, private _state: PodState<LineTimeSerie, LineOptions>) {
} }
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) { render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
@ -16,7 +17,7 @@ export class Markers {
this._d3Holder.remove(); this._d3Holder.remove();
} }
this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
for (const ms of this._markers) { for (const ms of this._markerConf.series) {
this.renderSerie(ms); this.renderSerie(ms);
} }
} }

10
src/index.ts
Unescape View File

@ -4,6 +4,7 @@ import { Markers } from './components/markers';
import { Segments } from './components/segments'; import { Segments } from './components/segments';
import { LineSeries } from './models/line_series'; import { LineSeries } from './models/line_series';
import { MarkersConf } from './models/marker';
import * as d3 from 'd3'; import * as d3 from 'd3';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -27,7 +28,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
_el: HTMLElement, _el: HTMLElement,
_series: LineTimeSerie[] = [], _series: LineTimeSerie[] = [],
_options: LineOptions = {}, _options: LineOptions = {},
private _markerSeries = [], private _markersConf?: MarkersConf,
private _segmentSeries = [], private _segmentSeries = [],
) { ) {
super(_el, _series, _options); super(_el, _series, _options);
@ -48,8 +49,11 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
for(const serie of this.series.visibleSeries) { for(const serie of this.series.visibleSeries) {
this._renderMetric(serie); this._renderMetric(serie);
} }
this._markersLayer = new Markers(this._markerSeries, this.state); if(this._markersConf !== undefined) {
this._markersLayer.render(this.metricContainer); this._markersLayer = new Markers(this._markersConf, this.state);
this._markersLayer.render(this.metricContainer);
}
this._segmentsLayer = new Segments(this._segmentSeries, this.state); this._segmentsLayer = new Segments(this._segmentSeries, this.state);
this._segmentsLayer.render(this.metricContainer); this._segmentsLayer.render(this.metricContainer);
} }

9
src/models/marker.ts
Unescape View File

@ -1,5 +1,12 @@
export type MarkerElem = [number, any?];
export type MarkerSerie = { export type MarkerSerie = {
color: string; color: string;
// TODO: make one-dimensional array with only x // TODO: make one-dimensional array with only x
data: [number, any?][] // [x, payload] payload is any data for tooltip data: MarkerElem[] // [x, payload] payload is any data for tooltip
}
export type MarkersConf = {
series: MarkerSerie[],
onSelect?: (el: MarkerElem[]) => void;
} }
Write Preview
Loading…
Cancel
Save