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