From 82fc9a10f13915e029d0d1b265d20677c78b1ebc Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 14:48:07 +0100 Subject: [PATCH] markers conf + new example --- examples/markers.html | 10 +++++---- examples/markers_select.html | 43 ++++++++++++++++++++++++++++++++++++ src/components/markers.ts | 7 +++--- src/index.ts | 10 ++++++--- src/models/marker.ts | 9 +++++++- 5 files changed, 68 insertions(+), 11 deletions(-) create mode 100644 examples/markers_select.html 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