add click for path too

examples/demo.html

@@ -28,7 +28,7 @@
             lineType: 'dashed',
             pointType: 'circle',
             colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green',
-            clickCallback: (data, idx) => { console.log('click', data, idx) }
+            clickCallback: (metricData, pointData) => { console.log('click', metricData, pointData) }
           },
           {
             target: 'test2',

src/index.ts

@@ -103,13 +103,15 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       .append('path')
       .datum(serie.datapoints)
       .attr('class', 'metric-path')
+      .attr('d', lineGenerator)
       .attr('fill', 'none')
-      .style('pointer-events', 'none')
       .attr('stroke', serie.color)
       .attr('stroke-width', 1)
       .attr('stroke-opacity', 0.7)
       .attr('stroke-dasharray', strokeDasharray)
-      .attr('d', lineGenerator);
+      .style('pointer-events', serie.clickCallback ? 'auto' : 'none')
+      .style('cursor', serie.clickCallback ? 'pointer' : 'crosshair')
+      .on('click', () => { serie.clickCallback({ target: serie.target, class: serie.class, alias: serie.alias }) });
   }
 
   protected renderPoints(): void {
@@ -128,7 +130,12 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       .style('fill', (d: DelaunayDataRow, i: number) => this.getSeriesColorFromDataRow(d, i))
       .style('pointer-events', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'auto' : 'none')
       .style('cursor', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'pointer' : 'crosshair')
-      .on('click', (d: DelaunayDataRow, idx: number) => this.series.getSerieByTarget(d[4])?.clickCallback(d, idx));
+      .on('click', (d: DelaunayDataRow) => {
+        d3.event.stopPropagation();
+        const serie = this.series.getSerieByTarget(d[4]);
+        const serieData = { target: serie?.target, class: serie?.class, alias: serie?.alias };
+        serie?.clickCallback(serieData, d);
+      });
   
     this.metricContainer.selectAll(null)
       .data(this._delaunayDiagram.data)
@@ -137,12 +144,19 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       .filter((d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointType === PointType.RECTANGLE)
       .attr('class', (d, i: number) => `metric-element metric-circle point-${i}`)
       .attr('r', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .style('fill', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.color)
-      .style('pointer-events', 'none')
       .attr('x', (d: DelaunayDataRow) => this.state.xScale(d[0]) - this.series.getSerieByTarget(d[4])?.pointSize / 2)
       .attr('y', (d: DelaunayDataRow) => this.getYScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1]) - this.series.getSerieByTarget(d[4])?.pointSize / 2)
       .attr('width', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .attr('height', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize);
+      .attr('height', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
+      .style('fill', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.color)
+      .style('pointer-events', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'auto' : 'none')
+      .style('cursor', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'pointer' : 'crosshair')
+      .on('click', (d: DelaunayDataRow) => {
+        d3.event.stopPropagation();
+        const serie = this.series.getSerieByTarget(d[4]);
+        const serieData = { target: serie?.target, class: serie?.class, alias: serie?.alias };
+        serie?.clickCallback(serieData, d);
+      });
   }
 
   getSeriesColorFromDataRow(values: DelaunayDataRow, rowIdx: number): string {

src/types.ts

@@ -6,7 +6,7 @@ export type ScatterDataParams = {
   lineType: LineType;
   pointSize: number;
   colorFormatter?: ColorFormatter;
-  clickCallback?: (data: DelaunayDataRow, pointIdx: number) => void;
+  clickCallback?: ( metricData: { target: Target, class: string, alias: string }, pointData?: DelaunayDataRow) => void;
 }
 type ScatterOptionsParams = {
   // TODO: this options is not used anywhere, let's remove it