From 38b6eb2326ffd56962fe50716d07e0747e54c53a Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 16:22:57 +0100 Subject: [PATCH 1/2] basic segments impl --- examples/segments.html | 38 +++++++++++++++++++++++++++++++ src/components/markers.ts | 6 ++--- src/components/segments.ts | 46 ++++++++++++++++++++++++++++++++++++++ src/index.ts | 7 +++++- src/models/segment.ts | 4 ++++ 5 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 examples/segments.html create mode 100644 src/components/segments.ts create mode 100644 src/models/segment.ts diff --git a/examples/segments.html b/examples/segments.html new file mode 100644 index 0000000..7ad8a25 --- /dev/null +++ b/examples/segments.html @@ -0,0 +1,38 @@ + + + + + + + + + +
+ + + + diff --git a/src/components/markers.ts b/src/components/markers.ts index 4b8c806..4f7b319 100644 --- a/src/components/markers.ts +++ b/src/components/markers.ts @@ -5,7 +5,7 @@ import { LineTimeSerie, LineOptions } from "../types"; import d3 from "d3"; export class Markers { - // TODO: more sentic name + // TODO: more semantic name private _d3Holder = null; constructor(private _markers: MarkerSerie[], private _state: PodState) { @@ -17,11 +17,11 @@ export class Markers { } this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); for (const ms of this._markers) { - this.renderMarkerSerie(ms); + this.renderSerie(ms); } } - protected renderMarkerSerie(serie: MarkerSerie) { + protected renderSerie(serie: MarkerSerie) { serie.data.forEach((d) => { let linePosition = this._state.xScale(d) as number; this._d3Holder.append('line') diff --git a/src/components/segments.ts b/src/components/segments.ts new file mode 100644 index 0000000..7fbcb5d --- /dev/null +++ b/src/components/segments.ts @@ -0,0 +1,46 @@ +import { SegmentSerie } from "../models/segment"; +import { PodState } from "@chartwerk/core"; +import { LineTimeSerie, LineOptions } from "../types"; + +import d3 from "d3"; + +export class Segments { + // TODO: more semantic name + private _d3Holder = null; + + constructor(private _series: SegmentSerie[], private _state: PodState) { + } + + render(metricContainer: d3.Selection) { + if(this._d3Holder !== null) { + this._d3Holder.remove(); + } + this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); + for (const s of this._series) { + this.renderSerie(s); + } + } + + protected renderSerie(serie: SegmentSerie) { + serie.data.forEach((d) => { + + // @ts-ignore + const startPositionX = pod.state.xScale(d[0]) as number; + // @ts-ignore + const endPositionX = pod.state.xScale(d[1]) as number; + const width = endPositionX - startPositionX // Math.max(endPositionX - startPositionX, MIMIMUM_SEGMENT_WIDTH); + + this._d3Holder.append('rect') + .attr('class', 'segment') + .attr('x', startPositionX) + .attr('y', 0) + .attr('width', width) + // @ts-ignore // TODO: remove ignore but boxParams are protected + .attr('height', this._state.boxParams.height) + .attr('opacity', 0.3) + .style('fill', serie.color) + .style('pointer-events', 'none'); + }); + + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 56787e3..fc32afa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { LineTimeSerie, LineOptions } from './types'; import { Markers } from './components/markers'; +import { Segments } from './components/segments'; import { LineSeries } from './models/line_series'; @@ -19,10 +20,12 @@ export class LinePod extends ChartwerkPod { areaGeneratorY1 = null; private _markersLayer: Markers = null; + private _segmentsLayer: Segments = null; constructor( _el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}, - private _markerSeries = [] + private _markerSeries = [], + private _segmentSeries = [], ) { super(_el, _series, _options); this.series = new LineSeries(_series); @@ -44,6 +47,8 @@ export class LinePod extends ChartwerkPod { } this._markersLayer = new Markers(this._markerSeries, this.state); this._markersLayer.render(this.metricContainer); + this._segmentsLayer = new Segments(this._segmentSeries, this.state); + this._segmentsLayer.render(this.metricContainer); } clearAllMetrics(): void { diff --git a/src/models/segment.ts b/src/models/segment.ts new file mode 100644 index 0000000..cf22624 --- /dev/null +++ b/src/models/segment.ts @@ -0,0 +1,4 @@ +export type SegmentSerie = { + color: string; + data: [number, number, any][] // [from, to, payload] payload is any data for tooltip +} \ No newline at end of file From 03a562c0d27ebf272bba2a27cdd41e80092c97c2 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 7 Dec 2023 16:24:55 +0100 Subject: [PATCH 2/2] codestytle fix --- src/components/segments.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/segments.ts b/src/components/segments.ts index 7fbcb5d..99251b4 100644 --- a/src/components/segments.ts +++ b/src/components/segments.ts @@ -23,7 +23,6 @@ export class Segments { protected renderSerie(serie: SegmentSerie) { serie.data.forEach((d) => { - // @ts-ignore const startPositionX = pod.state.xScale(d[0]) as number; // @ts-ignore