diff --git a/examples/demo.html b/examples/demo.html
index d59861b..a36f3fa 100644
--- a/examples/demo.html
+++ b/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',
diff --git a/src/index.ts b/src/index.ts
index 54328da..1aad7c7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -103,13 +103,15 @@ export class ChartwerkScatterPod extends ChartwerkPod { serie.clickCallback({ target: serie.target, class: serie.class, alias: serie.alias }) });
}
protected renderPoints(): void {
@@ -128,7 +130,12 @@ export class ChartwerkScatterPod extends ChartwerkPod 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 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 {
diff --git a/src/types.ts b/src/types.ts
index 0b41188..8027c5a 100644
--- a/src/types.ts
+++ b/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