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..48a1623
--- /dev/null
+++ b/examples/markers_select.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx
index dcae2d4..16e0cdb 100644
--- a/react/ChartwerkLinePod.tsx
+++ b/react/ChartwerkLinePod.tsx
@@ -1,7 +1,7 @@
import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
import { AxisRange } from '@chartwerk/core/dist/types';
-import { MarkerSerie } from '@chartwerk/line-pod/dist/models/marker';
+import { MarkersConf } from '@chartwerk/line-pod/dist/models/marker';
import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
import { useEffect, useRef, useState } from 'react';
@@ -13,7 +13,7 @@ export type ChartwerkLinePodProps = {
id?: string;
series: LineTimeSerie[];
options?: LineOptions;
- markers?: MarkerSerie[],
+ markersConf?: MarkersConf,
segments?: SegmentSerie[],
className?: string;
// TODO: callback types should be exported from chartwerk
@@ -91,7 +91,7 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
...props.options,
eventsCallbacks
},
- props.markers,
+ props.markersConf,
props.segments
);
setPod(newPod);
@@ -99,7 +99,7 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
} else {
pod.updateData(props.series, props.options);
}
- }, [chart, pod, props.id, props.options, props.markers, props.segments]);
+ }, [chart, pod, props.id, props.options, props.markersConf, props.segments]);
// TODO: it's a hack to render the LinePod right after the div appears in DOM
setTimeout(() => {
diff --git a/src/components/markers.ts b/src/components/markers.ts
index 15a3271..a481059 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);
}
}
@@ -36,15 +37,22 @@ export class Markers {
// @ts-ignore // TODO: remove ignore but boxParams are protected
.attr('y2', this._state.boxParams.height)
.attr('pointer-events', 'none');
- this._d3Holder.append('circle')
+ let circle = this._d3Holder.append('circle')
.attr('class', 'gap-circle')
.attr('stroke', serie.color)
.attr('stroke-width', '2px')
.attr('r', 4)
.attr('cx', linePosition)
.attr('cy', 5)
- .attr('pointer-events', 'none') // TODO: make all on implementation of Events
- .style('cursor', 'pointer')
+
+ if(this._markerConf !== undefined) {
+ circle
+ .attr('pointer-events', 'all')
+ .style('cursor', 'pointer')
+ .on('mousemove', () => this._markerConf.events.onMouseMove(d))
+ .on('mouseout', () => this._markerConf.events.onMouseOut())
+ }
+
});
}
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..7b75deb 100644
--- a/src/models/marker.ts
+++ b/src/models/marker.ts
@@ -1,5 +1,15 @@
+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[],
+ events?: {
+ onMouseMove?: (el: MarkerElem) => void;
+ onMouseOut?: () => void;
+ }
}