segment select

examples/segments.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 segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1000]);
+      const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1100]);
       let options = {
         renderLegend: false,
         axis: {
@@ -27,9 +27,15 @@
           { datapoints: timeSerieData, color: 'black' },
         ],
         options,
-        [],
+        undefined,
         [
-          { data: segmentsData, color:'#FFE545' }
+          {
+            data: segmentsData,
+            color:'#FFE545',
+            select: true,
+            onSelect: console.log,
+            onUnselect: console.log
+          }
         ]
       );
       pod.render();

src/components/segments.ts

@@ -1,34 +1,40 @@
-import { SegmentSerie } from "../models/segment";
+import { SegmentSerie, SegmentElement } from "../models/segment";
 import { PodState } from "@chartwerk/core";
 import { LineTimeSerie, LineOptions } from "../types";
 
-import d3 from "d3";
+import * as d3 from "d3";
 
 export class Segments {
   // TODO: more semantic name
   private _d3Holder = null;
+  private _metricCon = null;
 
-  constructor(private _series: SegmentSerie[], private _state: PodState<LineTimeSerie, LineOptions>) {
+  constructor(
+    private _series: SegmentSerie[],
+    private _state: PodState<LineTimeSerie, LineOptions>
+  ) {
   }
 
-  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
+  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartContainer: 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);
+      this.renderSerie(chartContainer, s);
     }
   }
 
-  protected renderSerie(serie: SegmentSerie) {
+  protected renderSerie(chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>, serie: SegmentSerie) {
+    // TODO: it's hack with core, need to find a better way
+    const overlay = chartContainer.select('.overlay');
     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)
@@ -38,8 +44,26 @@ export class Segments {
         .attr('height', this._state.boxParams.height)
         .attr('opacity', 0.3)
         .style('fill', serie.color)
-        .style('pointer-events', 'none');
+        .on('mouseover', function() {
+          if(serie.select === true) {
+            d3.select(this).attr('opacity', 0.5);
+            if(serie.onSelect) {
+              serie.onSelect(d);
+            }
+          }
+        })
+        .on('mouseout', function(e) {
+          if(serie.select === true) {
+            d3.select(this).attr('opacity', 0.3);
+            if(serie.onUnselect) {
+              serie.onUnselect(d);
+            }
+          }
+        })
+        .on('mousemove', function(e) {
+          var event = new MouseEvent('mousemove', d3.event);
+          overlay.node().dispatchEvent(event)
+        })
     });
-
   }
 }

src/index.ts

@@ -56,7 +56,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     }
 
     this._segmentsLayer = new Segments(this._segmentSeries, this.state);
-    this._segmentsLayer.render(this.metricContainer);
+    this._segmentsLayer.render(this.metricContainer, this.chartContainer);
   }
 
   clearAllMetrics(): void {

src/models/segment.ts

@@ -1,4 +1,9 @@
+export type SegmentElement = [number, number, any?];
+
 export type SegmentSerie = {
   color: string;
-  data: [number, number, any?][] // [from, to, payload?] payload is any data for tooltip
+  data: SegmentElement[] // [from, to, payload?] payload is any data for tooltip,
+  select?: boolean,
+  onSelect?: (SegmentElement) => void
+  onUnselect?: (SegmentElement) => void
 }