markers begin

examples/markers.html

@@ -11,8 +11,9 @@
 
     <script type="text/javascript">
       const startTime = 1701790172908;
-      const data = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
+      const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
-        .map((el, idx) => [startTime + idx * 100, el]);
+        .map((el, idx) => [startTime + idx * 1000, el]);
+      const markersData = [3, 6, 8].map(el => startTime + el * 1000);
 
       let options = {
         renderLegend: false,
@@ -24,11 +25,14 @@
       var pod = new LinePod(
         document.getElementById('chart'),
         [
-          { datapoints: data, color: 'black' },
+          { datapoints: timeSerieData, color: 'black' },
         ],
-        options
+        options,
+        [
+          { data: markersData, color: 'red' },
+        ]
       );
-      pod.render();      
+      pod.render();
     </script>
   </body>
 </html>

src/components/markers.ts

@@ -0,0 +1,72 @@
+import { Marker } 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;
+
+  constructor() {
+  }
+
+  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, state: PodState<LineTimeSerie, LineOptions>) {
+    if(this._d3Holder !== null) {
+      this._d3Holder.remove();
+    }
+    this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
+
+    let linePosition = state.xScale(1701790172908 + 3 * 1000) as number;
+
+    this._d3Holder.append('line')
+        .attr('class', 'gap-line')
+        .attr('stroke', 'red')
+        .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', 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('class', 'gap-circle')
+        .attr('stroke', 'red')
+        .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);
+  }
+}

src/index.ts

@@ -1,5 +1,6 @@
 import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
 import { LineTimeSerie, LineOptions } from './types';
+import { Markers } from './components/markers';
 
 import { LineSeries } from './models/line_series';
 
@@ -17,12 +18,17 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   lineGeneratorY1 = null;
   areaGeneratorY1 = null;
 
-  constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
+  private _markersLayer: Markers = null;
+
+  constructor(
+    _el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {},
+    private _markers = []
+  ) {
     super(_el, _series, _options);
     this.series = new LineSeries(_series);
   }
 
-  renderMetrics(): void {
+  override renderMetrics(): void {
     this.clearAllMetrics();
 
     this.updateCrosshair();
@@ -36,6 +42,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     for(const serie of this.series.visibleSeries) {
       this._renderMetric(serie);
     }
+    this._markersLayer = new Markers();
+    this._markersLayer.render(this.metricContainer, this.state);
   }
 
   clearAllMetrics(): void {
@@ -386,6 +394,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 }
 
+// TODO: it should be moved to VUE folder
 // it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
 export const VueChartwerkLinePod = {
   // alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`

src/models/marker.ts

@@ -0,0 +1,9 @@
+export type Marker = {
+  time: number; // unixTime ms
+  color: string;
+  data: {
+    startTime: string,
+    endTime: string,
+    name: string,
+  }
+}