You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.4 KiB
45 lines
1.4 KiB
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<LineTimeSerie, LineOptions>) { |
|
} |
|
|
|
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) { |
|
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 = this._state.xScale(d[0]) as number; |
|
// @ts-ignore |
|
const endPositionX = this._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'); |
|
}); |
|
|
|
} |
|
} |