From 82fc9a10f13915e029d0d1b265d20677c78b1ebc Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 14:48:07 +0100 Subject: [PATCH 1/4] 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 From 43241bbcb7c39aca3b5325c3835ecc90d160c3a1 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 15:04:37 +0100 Subject: [PATCH 2/4] markers conf + events --- examples/markers_select.html | 6 +++++- src/components/markers.ts | 13 ++++++++++--- src/models/marker.ts | 7 +++++-- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/examples/markers_select.html b/examples/markers_select.html index fd18e81..48a1623 100644 --- a/examples/markers_select.html +++ b/examples/markers_select.html @@ -34,7 +34,11 @@ { series: [ { data: markersData, color: 'red' }, - ] + ], + events: { + onMouseMove: (el) => { console.log(el); }, + onMouseOut: () => { console.log('mouse out'); } + } } ); pod.render(); diff --git a/src/components/markers.ts b/src/components/markers.ts index 285e9d6..a481059 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -37,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/models/marker.ts b/src/models/marker.ts index a9925ea..bbfd617 100644 --- a/src/models/marker.ts +++ b/src/models/marker.ts @@ -8,5 +8,8 @@ export type MarkerSerie = { export type MarkersConf = { series: MarkerSerie[], - onSelect?: (el: MarkerElem[]) => void; -} \ No newline at end of file + events?: { + onMouseMove?: (el: MarkerElem[]) => void; + onMouseOut?: () => void; + } +} From 26d5956c17a2c781adf80080b17d4ebf9189c025 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 15:29:13 +0100 Subject: [PATCH 3/4] markers conf in react --- react/ChartwerkLinePod.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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(() => { From e470d58611afe4882d79956d8ff49a5628828063 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 16:49:48 +0100 Subject: [PATCH 4/4] fx Marker callback type --- src/models/marker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/models/marker.ts b/src/models/marker.ts index bbfd617..7b75deb 100644 --- a/src/models/marker.ts +++ b/src/models/marker.ts @@ -9,7 +9,7 @@ export type MarkerSerie = { export type MarkersConf = { series: MarkerSerie[], events?: { - onMouseMove?: (el: MarkerElem[]) => void; + onMouseMove?: (el: MarkerElem) => void; onMouseOut?: () => void; } }