Browse Source

marker data continue

pull/23/head
glitch4347 11 months ago
parent
commit
a5c737fa81
  1. 2
      examples/markers.html
  2. 54
      src/components/markers.ts
  3. 4
      src/index.ts
  4. 9
      src/models/marker.ts

2
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,

54
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<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);
// }
}

4
src/index.ts

@ -22,7 +22,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
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<LineTimeSerie, LineOptions> {
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);
}

9
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
}

Loading…
Cancel
Save