From 8346bceedf5dd7528f458a2ea52a325839283bd9 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Tue, 5 Dec 2023 16:32:26 +0100 Subject: [PATCH 1/7] markers examples begin --- examples/markers.html | 34 ++++++++++++++++++++++++++++++++++ src/models/line_series.ts | 1 - 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 examples/markers.html diff --git a/examples/markers.html b/examples/markers.html new file mode 100644 index 0000000..10ef311 --- /dev/null +++ b/examples/markers.html @@ -0,0 +1,34 @@ + + + + + + + + + +
+ + + + diff --git a/src/models/line_series.ts b/src/models/line_series.ts index dd9039e..d75cf07 100644 --- a/src/models/line_series.ts +++ b/src/models/line_series.ts @@ -15,7 +15,6 @@ const LINE_SERIE_DEFAULTS = { }; export class LineSeries extends CoreSeries { - constructor(series: LineTimeSerie[]) { super(series, _.clone(LINE_SERIE_DEFAULTS)); } -- 2.34.1 From 1d1a34f9bf166d184886ff55af05299ab616fd3d Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Wed, 6 Dec 2023 12:32:17 +0100 Subject: [PATCH 2/7] markers begin --- examples/markers.html | 14 +++++--- src/components/markers.ts | 72 +++++++++++++++++++++++++++++++++++++++ src/index.ts | 13 +++++-- src/models/marker.ts | 9 +++++ 4 files changed, 101 insertions(+), 7 deletions(-) create mode 100644 src/components/markers.ts create mode 100644 src/models/marker.ts diff --git a/examples/markers.html b/examples/markers.html index 10ef311..23fcf9a 100644 --- a/examples/markers.html +++ b/examples/markers.html @@ -11,8 +11,9 @@ diff --git a/src/components/markers.ts b/src/components/markers.ts new file mode 100644 index 0000000..fe388e4 --- /dev/null +++ b/src/components/markers.ts @@ -0,0 +1,72 @@ +import { Marker } from "../models/marker"; +import { PodState } from "@chartwerk/core"; +import { LineTimeSerie, LineOptions } from "../types"; + +import d3 from "d3"; + +export class Markers { + private _markers: Marker[] = []; + private _d3Holder = null; + + constructor() { + } + + render(metricContainer: d3.Selection, state: PodState) { + if(this._d3Holder !== null) { + this._d3Holder.remove(); + } + this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); + + let linePosition = state.xScale(1701790172908 + 3 * 1000) as number; + + this._d3Holder.append('line') + .attr('class', 'gap-line') + .attr('stroke', 'red') + .attr('stroke-width', '1px') + .attr('stroke-opacity', '0.3') + .attr('stroke-dasharray', '4') + .attr('x1', linePosition) + .attr('x2', linePosition) + .attr('y1', 0) + // @ts-ignore + .attr('y2', state.boxParams.height); + + // for (const marker of markers) { + // // @ts-ignore + // const linePosition = pod.state.xScale(marker.time) as number; + // yAxisContainer.append('line') + // .attr('class', 'gap-line') + // .attr('stroke', marker.color) + // .attr('stroke-width', '1px') + // .attr('stroke-opacity', '0.3') + // .attr('stroke-dasharray', '4') + // .attr('x1', linePosition) + // .attr('x2', linePosition) + // .attr('y1', 0) + // // @ts-ignore + // .attr('y2', pod.state.boxParams.height); + + this._d3Holder.append('circle') + .attr('class', 'gap-circle') + .attr('stroke', 'red') + .attr('stroke-width', '2px') + .attr('r', 4) + .attr('cx', linePosition) + .attr('cy', 5) + .attr('pointer-events', 'all') + .style('cursor', 'pointer') + // .on('mousemove', () => { + // setTooltipContent({ type: TooltipType.FUNCTION, ...marker.data }); + // return null; + // }) + // .on('mouseout', () => { + // setTooltipContent({ type: TooltipType.HIDDEN }); + // return null; + // }); + // } + } + + pushMarker(marker: Marker) { + this._markers.push(marker); + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index ca82f37..dc67ff4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,6 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { LineTimeSerie, LineOptions } from './types'; +import { Markers } from './components/markers'; import { LineSeries } from './models/line_series'; @@ -17,12 +18,17 @@ export class LinePod extends ChartwerkPod { lineGeneratorY1 = null; areaGeneratorY1 = null; - constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { + private _markersLayer: Markers = null; + + constructor( + _el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}, + private _markers = [] + ) { super(_el, _series, _options); this.series = new LineSeries(_series); } - renderMetrics(): void { + override renderMetrics(): void { this.clearAllMetrics(); this.updateCrosshair(); @@ -36,6 +42,8 @@ export class LinePod extends ChartwerkPod { for(const serie of this.series.visibleSeries) { this._renderMetric(serie); } + this._markersLayer = new Markers(); + this._markersLayer.render(this.metricContainer, this.state); } clearAllMetrics(): void { @@ -386,6 +394,7 @@ export class LinePod extends ChartwerkPod { } } +// TODO: it should be moved to VUE folder // it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod) export const VueChartwerkLinePod = { // alternative to `template: '
'` diff --git a/src/models/marker.ts b/src/models/marker.ts new file mode 100644 index 0000000..35bcd44 --- /dev/null +++ b/src/models/marker.ts @@ -0,0 +1,9 @@ +export type Marker = { + time: number; // unixTime ms + color: string; + data: { + startTime: string, + endTime: string, + name: string, + } +} -- 2.34.1 From a5c737fa8179cec3668bb344c06b0c3bb395fd52 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 13:23:49 +0100 Subject: [PATCH 3/7] marker data continue --- examples/markers.html | 2 +- src/components/markers.ts | 60 ++++++++++++++------------------------- src/index.ts | 4 +-- src/models/marker.ts | 9 ++---- 4 files changed, 27 insertions(+), 48 deletions(-) diff --git a/examples/markers.html b/examples/markers.html index 23fcf9a..8314ac4 100644 --- a/examples/markers.html +++ b/examples/markers.html @@ -13,7 +13,7 @@ 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]); - const markersData = [3, 6, 8].map(el => startTime + el * 1000); + const markersData = [3, 6, 9].map(el => startTime + el * 1000); let options = { renderLegend: false, diff --git a/src/components/markers.ts b/src/components/markers.ts index fe388e4..89a6d24 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -1,27 +1,34 @@ -import { Marker } from "../models/marker"; +import { MarkerSerie } from "../models/marker"; import { PodState } from "@chartwerk/core"; import { LineTimeSerie, LineOptions } from "../types"; import d3 from "d3"; export class Markers { - private _markers: Marker[] = []; private _d3Holder = null; + private _state: PodState = null; - constructor() { + constructor(private _markers: MarkerSerie[]) { } render(metricContainer: d3.Selection, state: PodState) { if(this._d3Holder !== null) { this._d3Holder.remove(); } + this._state = state; this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); + for (const ms of this._markers) { + this.renderMarkerSerie(ms); + } + } - let linePosition = state.xScale(1701790172908 + 3 * 1000) as number; - - this._d3Holder.append('line') + protected renderMarkerSerie(serie: MarkerSerie) { + + serie.data.forEach((d) => { + let linePosition = this._state.xScale(d) as number; + this._d3Holder.append('line') .attr('class', 'gap-line') - .attr('stroke', 'red') + .attr('stroke', serie.color) .attr('stroke-width', '1px') .attr('stroke-opacity', '0.3') .attr('stroke-dasharray', '4') @@ -29,44 +36,21 @@ export class Markers { .attr('x2', linePosition) .attr('y1', 0) // @ts-ignore - .attr('y2', state.boxParams.height); - - // for (const marker of markers) { - // // @ts-ignore - // const linePosition = pod.state.xScale(marker.time) as number; - // yAxisContainer.append('line') - // .attr('class', 'gap-line') - // .attr('stroke', marker.color) - // .attr('stroke-width', '1px') - // .attr('stroke-opacity', '0.3') - // .attr('stroke-dasharray', '4') - // .attr('x1', linePosition) - // .attr('x2', linePosition) - // .attr('y1', 0) - // // @ts-ignore - // .attr('y2', pod.state.boxParams.height); - - this._d3Holder.append('circle') + .attr('y2', this._state.boxParams.height); + this._d3Holder.append('circle') .attr('class', 'gap-circle') - .attr('stroke', 'red') + .attr('stroke', serie.color) .attr('stroke-width', '2px') .attr('r', 4) .attr('cx', linePosition) .attr('cy', 5) .attr('pointer-events', 'all') .style('cursor', 'pointer') - // .on('mousemove', () => { - // setTooltipContent({ type: TooltipType.FUNCTION, ...marker.data }); - // return null; - // }) - // .on('mouseout', () => { - // setTooltipContent({ type: TooltipType.HIDDEN }); - // return null; - // }); - // } + }); + } - pushMarker(marker: Marker) { - this._markers.push(marker); - } + // pushMarker(marker: Marker) { + // this._markers.push(marker); + // } } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index dc67ff4..b18cd39 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,7 +22,7 @@ export class LinePod extends ChartwerkPod { constructor( _el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}, - private _markers = [] + private _markerSeries = [] ) { super(_el, _series, _options); this.series = new LineSeries(_series); @@ -42,7 +42,7 @@ export class LinePod extends ChartwerkPod { for(const serie of this.series.visibleSeries) { this._renderMetric(serie); } - this._markersLayer = new Markers(); + this._markersLayer = new Markers(this._markerSeries); this._markersLayer.render(this.metricContainer, this.state); } diff --git a/src/models/marker.ts b/src/models/marker.ts index 35bcd44..368d51a 100644 --- a/src/models/marker.ts +++ b/src/models/marker.ts @@ -1,9 +1,4 @@ -export type Marker = { - time: number; // unixTime ms +export type MarkerSerie = { color: string; - data: { - startTime: string, - endTime: string, - name: string, - } + data: [[number, number, any]] // last any is payloadf with any data for tooltip } -- 2.34.1 From aadcd013bf05e4722b1b672c262f890f6e20f070 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 14:25:02 +0100 Subject: [PATCH 4/7] markers++ --- examples/markers.html | 7 ++++--- src/components/markers.ts | 5 ----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/examples/markers.html b/examples/markers.html index 8314ac4..5c1521f 100644 --- a/examples/markers.html +++ b/examples/markers.html @@ -13,8 +13,8 @@ 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]); - const markersData = [3, 6, 9].map(el => startTime + el * 1000); - + const markersData1 = [3, 6, 9].map(el => startTime + el * 1000); + const markersData2 = [4, 11].map(el => startTime + el * 1000); let options = { renderLegend: false, axis: { @@ -29,7 +29,8 @@ ], options, [ - { data: markersData, color: 'red' }, + { data: markersData1, color: 'red' }, + { data: markersData2, color: 'blue' }, ] ); pod.render(); diff --git a/src/components/markers.ts b/src/components/markers.ts index 89a6d24..ee560da 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -23,7 +23,6 @@ export class Markers { } protected renderMarkerSerie(serie: MarkerSerie) { - serie.data.forEach((d) => { let linePosition = this._state.xScale(d) as number; this._d3Holder.append('line') @@ -49,8 +48,4 @@ export class Markers { }); } - - // pushMarker(marker: Marker) { - // this._markers.push(marker); - // } } \ No newline at end of file -- 2.34.1 From 9a6c5cd7f41b6840896ef5df3d6d409bc285d24c Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 14:35:21 +0100 Subject: [PATCH 5/7] markers++ --- src/components/markers.ts | 9 ++++----- src/index.ts | 4 ++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/markers.ts b/src/components/markers.ts index ee560da..be4fdf0 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -5,17 +5,16 @@ import { LineTimeSerie, LineOptions } from "../types"; import d3 from "d3"; export class Markers { + // TODO: more sentic name private _d3Holder = null; - private _state: PodState = null; - constructor(private _markers: MarkerSerie[]) { + constructor(private _markers: MarkerSerie[], private _state: PodState) { } - render(metricContainer: d3.Selection, state: PodState) { + render(metricContainer: d3.Selection) { if(this._d3Holder !== null) { this._d3Holder.remove(); } - this._state = state; this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); for (const ms of this._markers) { this.renderMarkerSerie(ms); @@ -34,7 +33,7 @@ export class Markers { .attr('x1', linePosition) .attr('x2', linePosition) .attr('y1', 0) - // @ts-ignore + // @ts-ignore // TODO: remove ignore but boxParams are protected .attr('y2', this._state.boxParams.height); this._d3Holder.append('circle') .attr('class', 'gap-circle') diff --git a/src/index.ts b/src/index.ts index b18cd39..67db165 100644 --- a/src/index.ts +++ b/src/index.ts @@ -42,8 +42,8 @@ export class LinePod extends ChartwerkPod { for(const serie of this.series.visibleSeries) { this._renderMetric(serie); } - this._markersLayer = new Markers(this._markerSeries); - this._markersLayer.render(this.metricContainer, this.state); + this._markersLayer = new Markers(this._markerSeries, this.state); + this._markersLayer.render(this.metricContainer); } clearAllMetrics(): void { -- 2.34.1 From 86099c57b354fec3bfa489f2b20354cf23b1a76e Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 14:38:02 +0100 Subject: [PATCH 6/7] pointe events --- src/components/markers.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/markers.ts b/src/components/markers.ts index be4fdf0..4b8c806 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -34,7 +34,8 @@ export class Markers { .attr('x2', linePosition) .attr('y1', 0) // @ts-ignore // TODO: remove ignore but boxParams are protected - .attr('y2', this._state.boxParams.height); + .attr('y2', this._state.boxParams.height) + .attr('pointer-events', 'none'); this._d3Holder.append('circle') .attr('class', 'gap-circle') .attr('stroke', serie.color) @@ -42,7 +43,7 @@ export class Markers { .attr('r', 4) .attr('cx', linePosition) .attr('cy', 5) - .attr('pointer-events', 'all') + .attr('pointer-events', 'none') // TODO: make all on implementation of Events .style('cursor', 'pointer') }); -- 2.34.1 From bf679019fc990815bcd21dedf173e9c261f3aa36 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 14:41:55 +0100 Subject: [PATCH 7/7] payload comment --- 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 368d51a..7253729 100644 --- a/src/models/marker.ts +++ b/src/models/marker.ts @@ -1,4 +1,4 @@ export type MarkerSerie = { color: string; - data: [[number, number, any]] // last any is payloadf with any data for tooltip + data: [number, number, any][] // [x, y, payload] payload is any data for tooltip } -- 2.34.1