diff --git a/examples/markers.html b/examples/markers.html
index a3d7a06..5f8d5f9 100644
--- a/examples/markers.html
+++ b/examples/markers.html
@@ -29,10 +29,12 @@
{ datapoints: timeSerieData, color: 'black' },
],
options,
- [
- { data: markersData1, color: 'red' },
- { data: markersData2, color: 'blue' },
- ]
+ {
+ series: [
+ { data: markersData1, color: 'red' },
+ { data: markersData2, color: 'blue' },
+ ]
+ }
);
pod.render();
diff --git a/examples/markers_select.html b/examples/markers_select.html
new file mode 100644
index 0000000..fd18e81
--- /dev/null
+++ b/examples/markers_select.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/markers.ts b/src/components/markers.ts
index 15a3271..285e9d6 100644
--- a/src/components/markers.ts
+++ b/src/components/markers.ts
@@ -1,4 +1,4 @@
-import { MarkerSerie } from "../models/marker";
+import { MarkersConf, MarkerSerie } from "../models/marker";
import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types";
@@ -8,7 +8,8 @@ export class Markers {
// TODO: more semantic name
private _d3Holder = null;
- constructor(private _markers: MarkerSerie[], private _state: PodState) {
+ constructor(private _markerConf: MarkersConf, private _state: PodState) {
+
}
render(metricContainer: d3.Selection) {
@@ -16,7 +17,7 @@ export class Markers {
this._d3Holder.remove();
}
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);
}
}
diff --git a/src/index.ts b/src/index.ts
index c3e15aa..f186d0f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import { Markers } from './components/markers';
import { Segments } from './components/segments';
import { LineSeries } from './models/line_series';
+import { MarkersConf } from './models/marker';
import * as d3 from 'd3';
import * as _ from 'lodash';
@@ -27,7 +28,7 @@ class LinePod extends ChartwerkPod {
_el: HTMLElement,
_series: LineTimeSerie[] = [],
_options: LineOptions = {},
- private _markerSeries = [],
+ private _markersConf?: MarkersConf,
private _segmentSeries = [],
) {
super(_el, _series, _options);
@@ -48,8 +49,11 @@ class LinePod extends ChartwerkPod {
for(const serie of this.series.visibleSeries) {
this._renderMetric(serie);
}
- this._markersLayer = new Markers(this._markerSeries, this.state);
- this._markersLayer.render(this.metricContainer);
+ if(this._markersConf !== undefined) {
+ this._markersLayer = new Markers(this._markersConf, this.state);
+ this._markersLayer.render(this.metricContainer);
+ }
+
this._segmentsLayer = new Segments(this._segmentSeries, this.state);
this._segmentsLayer.render(this.metricContainer);
}
diff --git a/src/models/marker.ts b/src/models/marker.ts
index fea1e4b..a9925ea 100644
--- a/src/models/marker.ts
+++ b/src/models/marker.ts
@@ -1,5 +1,12 @@
+export type MarkerElem = [number, any?];
+
export type MarkerSerie = {
color: string;
// 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;
+}
\ No newline at end of file