diff --git a/examples/demo.html b/examples/demo.html index 0c4c3d2..d59861b 100644 --- a/examples/demo.html +++ b/examples/demo.html @@ -28,6 +28,7 @@ lineType: 'dashed', pointType: 'circle', colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green', + clickCallback: (data, idx) => { console.log('click', data, idx) } }, { target: 'test2', diff --git a/package.json b/package.json index 03e354b..37bd906 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@chartwerk/scatter-pod", - "version": "0.6.5", + "version": "0.6.6", "description": "Chartwerk scatter pod", "main": "dist/index.js", "scripts": { diff --git a/src/index.ts b/src/index.ts index 8fab7bb..54328da 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, yAxisOrientation, CrosshairOrientation } from '@chartwerk/core'; -import { ScatterData, ScatterOptions, PointType, LineType, HighlightedData, MouseMoveEvent } from './types'; +import { ScatterData, ScatterOptions, PointType, LineType, HighlightedData, MouseMoveEvent, DelaunayDataRow } from './types'; -import { DelaunayDiagram, DelaunayDataRow } from './models/delaunay'; +import { DelaunayDiagram } from './models/delaunay'; import { ScatterSeries } from './models/scatter_series'; import * as d3 from 'd3'; @@ -123,10 +123,12 @@ 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, i: number) => this.getSeriesColorFromDataRow(d, i)) - .style('pointer-events', 'none') .attr('cx', (d: DelaunayDataRow) => this.state.xScale(d[0])) - .attr('cy', (d: DelaunayDataRow) => this.getYScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1])); + .attr('cy', (d: DelaunayDataRow) => this.getYScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1])) + .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)); this.metricContainer.selectAll(null) .data(this._delaunayDiagram.data) diff --git a/src/models/delaunay.ts b/src/models/delaunay.ts index 7d86404..88ea65c 100644 --- a/src/models/delaunay.ts +++ b/src/models/delaunay.ts @@ -1,4 +1,4 @@ -import { ScatterData, PointType } from '../types'; +import { ScatterData, PointType, DelaunayDataRow } from '../types'; import { ScatterSeries } from './scatter_series'; import { Delaunay } from 'd3-delaunay'; @@ -6,12 +6,6 @@ import { Delaunay } from 'd3-delaunay'; import * as _ from 'lodash'; import * as d3 from 'd3'; // only types -// return type row: [ 0:x, 1:y, 2:(custom value | null), 3:pointIdx, 4:serie.target ] -type Value = number; -type PointIdx = number; -type Target = string; -export type DelaunayDataRow = [Value, Value, Value | null, PointIdx, Target]; - export class DelaunayDiagram { private _delaunayData: DelaunayDataRow[]; private _delaunayDiagram: any; diff --git a/src/models/scatter_series.ts b/src/models/scatter_series.ts index 2317ba5..1ace1e9 100644 --- a/src/models/scatter_series.ts +++ b/src/models/scatter_series.ts @@ -1,15 +1,16 @@ import { CoreSeries } from '@chartwerk/core'; -import { ScatterData, PointType, LineType } from '../types'; +import { ScatterData, PointType, LineType, ScatterDataParams } from '../types'; import * as _ from 'lodash'; const DEFAULT_POINT_SIZE = 4; -const SCATTER_DATA_DEFAULTS = { +const SCATTER_DATA_DEFAULTS: ScatterDataParams = { pointType: PointType.CIRCLE, lineType: LineType.NONE, pointSize: DEFAULT_POINT_SIZE, - colorFormatter: undefined + colorFormatter: undefined, + clickCallback: undefined, }; export class ScatterSeries extends CoreSeries { diff --git a/src/types.ts b/src/types.ts index 8ce8cd2..0b41188 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,11 +1,12 @@ import { Serie, Options } from '@chartwerk/core'; -type ScatterDataParams = { +export type ScatterDataParams = { pointType: PointType; lineType: LineType; pointSize: number; - colorFormatter?: ColorFormatter + colorFormatter?: ColorFormatter; + clickCallback?: (data: DelaunayDataRow, pointIdx: number) => void; } type ScatterOptionsParams = { // TODO: this options is not used anywhere, let's remove it @@ -49,3 +50,10 @@ export type HighlightedData = { pointIdx: number, totalPointIdx: number, serieInfo: { target: string, alias?: string, class?: string, idx?: number } } + + +type Value = number; +type PointIdx = number; +type Target = string; +// type row: [ 0:x, 1:y, 2:(custom value | null), 3:pointIdx, 4:serie.target ] +export type DelaunayDataRow = [Value, Value, Value | null, PointIdx, Target]; diff --git a/yarn.lock b/yarn.lock index 12fd233..b103cfc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6,12 +6,12 @@ __metadata: cacheKey: 8 "@chartwerk/core@npm:latest": - version: 0.6.6 - resolution: "@chartwerk/core@npm:0.6.6" + version: 0.6.10 + resolution: "@chartwerk/core@npm:0.6.10" dependencies: d3: ^5.7.2 lodash: ^4.14.149 - checksum: 2f07c389c7af34dfb79a47a2e47c6c19540df6a85bad21606e28297eaaad6849b2fd1f62710882729274b38448578d2cc2985a3ec01159bb600dfcf2818fe71d + checksum: 6a7f187b77878f20ba696a2bbd843bb57d8891efd69e578c946f56f501f679531efa42a33aa243b7fb5e52f6ca06a49a357fb37bcf99d8c32c1c46e4d27fcb2d languageName: node linkType: hard