marker data continue

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,

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;
-
-    this._d3Holder.append('line')
+  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);
-
-    this._d3Holder.append('circle')
+        .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);
+  // }
 }

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

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
 }