|
|
|
@ -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<LineTimeSerie, LineOptions> = null; |
|
|
|
|
|
|
|
|
|
constructor() { |
|
|
|
|
constructor(private _markers: MarkerSerie[]) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, state: PodState<LineTimeSerie, LineOptions>) { |
|
|
|
|
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; |
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
// }
|
|
|
|
|
} |