From 0666ca0e6c38b5d1377b0041e31b7ab0cd34fc46 Mon Sep 17 00:00:00 2001 From: Alaev Evgeny Date: Thu, 14 Nov 2024 14:32:50 +0100 Subject: [PATCH] feat: change chart.events.pointermove signature --- .../__data__/area/staking-normal.ts | 7 +++++ src/components/ChartInner/index.tsx | 31 +++++++++++++------ src/types/chart/chart.ts | 8 ++--- src/types/chart/tooltip.ts | 6 ++++ src/utils/d3-dispatcher.ts | 8 ++++- 5 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/__stories__/__data__/area/staking-normal.ts b/src/__stories__/__data__/area/staking-normal.ts index feb517d..e7f17fc 100644 --- a/src/__stories__/__data__/area/staking-normal.ts +++ b/src/__stories__/__data__/area/staking-normal.ts @@ -50,6 +50,13 @@ function prepareData(): ChartData { type: 'category', categories: years, }, + chart: { + events: { + pointermove: (...args) => { + console.log(args); + }, + }, + }, }; } diff --git a/src/components/ChartInner/index.tsx b/src/components/ChartInner/index.tsx index 27462e7..3aacfa2 100644 --- a/src/components/ChartInner/index.tsx +++ b/src/components/ChartInner/index.tsx @@ -15,8 +15,8 @@ import {getYAxisWidth} from '../../hooks/useChartDimensions/utils'; import {getPreparedXAxis} from '../../hooks/useChartOptions/x-axis'; import {getPreparedYAxis} from '../../hooks/useChartOptions/y-axis'; import {useSplit} from '../../hooks/useSplit'; -import type {ChartData} from '../../types'; -import {block, getD3Dispatcher} from '../../utils'; +import type {ChartData, ChartTooltipRendererData, ChartYAxis} from '../../types'; +import {EventType, block, getD3Dispatcher} from '../../utils'; import {getClosestPoints} from '../../utils/chart/get-closest-data'; import {AxisX, AxisY} from '../Axis'; import {Legend} from '../Legend'; @@ -114,19 +114,19 @@ export const ChartInner = (props: Props) => { React.useEffect(() => { if (clickHandler) { - dispatcher.on('click-chart', clickHandler); + dispatcher.on(EventType.CLICK_CHART, clickHandler); } if (pointerMoveHandler) { - dispatcher.on('hover-shape.chart', (...args) => { + dispatcher.on(EventType.POINTERMOVE_CHART, (...args) => { const [hoverData, _position, event] = args; pointerMoveHandler(hoverData, event); }); } return () => { - dispatcher.on('click-chart', null); - dispatcher.on('hover-shape.chart', null); + dispatcher.on(EventType.CLICK_CHART, null); + dispatcher.on(EventType.POINTERMOVE_CHART, null); }; }, [dispatcher, clickHandler, pointerMoveHandler]); @@ -148,7 +148,8 @@ export const ChartInner = (props: Props) => { const x = pointerX - boundsOffsetLeft; const y = pointerY - boundsOffsetTop; if (isOutsideBounds(x, y)) { - dispatcher.call('hover-shape', {}, undefined, undefined, event); + dispatcher.call(EventType.HOVER_SHAPE, {}, undefined, undefined, event); + dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, undefined, event); return; } @@ -156,7 +157,18 @@ export const ChartInner = (props: Props) => { position: [x, y], shapesData, }); - dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY], event); + dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY], event); + dispatcher.call( + EventType.POINTERMOVE_CHART, + {}, + { + hovered: closest, + xAxis, + yAxis: yAxis[0] as ChartYAxis, + } satisfies ChartTooltipRendererData, + undefined, + event, + ); }; const handleMouseMove: React.MouseEventHandler = (event) => { @@ -170,7 +182,8 @@ export const ChartInner = (props: Props) => { const handleMouseLeave: React.MouseEventHandler = (event) => { throttledHandleMouseMove?.cancel(); - dispatcher.call('hover-shape', {}, undefined, undefined, event); + dispatcher.call(EventType.HOVER_SHAPE, {}, undefined, undefined, event); + dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, undefined, event); }; const handleTouchMove: React.TouchEventHandler = (event) => { diff --git a/src/types/chart/chart.ts b/src/types/chart/chart.ts index 920286b..3aa64f2 100644 --- a/src/types/chart/chart.ts +++ b/src/types/chart/chart.ts @@ -1,5 +1,7 @@ import type {MeaningfulAny} from '../misc'; +import type {ChartTooltipRendererData} from './tooltip'; + export type ChartMargin = { top: number; right: number; @@ -7,12 +9,10 @@ export type ChartMargin = { left: number; }; -type ChartEventData = {point: MeaningfulAny; series: MeaningfulAny}; - export type ChartOptions = { margin?: Partial; events?: { - click?: (data: ChartEventData, event: PointerEvent) => void; - pointermove?: (data: ChartEventData | undefined, event: PointerEvent) => void; + click?: (data: {point: MeaningfulAny; series: MeaningfulAny}, event: PointerEvent) => void; + pointermove?: (data: ChartTooltipRendererData | undefined, event: PointerEvent) => void; }; }; diff --git a/src/types/chart/tooltip.ts b/src/types/chart/tooltip.ts index f582a2c..89e524d 100644 --- a/src/types/chart/tooltip.ts +++ b/src/types/chart/tooltip.ts @@ -77,6 +77,12 @@ export type TooltipDataChunk = ( | TooltipDataChunkWaterfall ) & {closest?: boolean}; +export type ChartTooltipRendererData = { + hovered: TooltipDataChunk[]; + xAxis?: ChartXAxis; + yAxis?: ChartYAxis; +}; + export type ChartTooltip = { enabled?: boolean; /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */ diff --git a/src/utils/d3-dispatcher.ts b/src/utils/d3-dispatcher.ts index 91ae411..5439f3b 100644 --- a/src/utils/d3-dispatcher.ts +++ b/src/utils/d3-dispatcher.ts @@ -1,5 +1,11 @@ import {dispatch} from 'd3'; +export const EventType = { + CLICK_CHART: 'click-chart', + HOVER_SHAPE: 'hover-shape', + POINTERMOVE_CHART: 'pointermove-chart', +}; + export const getD3Dispatcher = () => { - return dispatch('hover-shape', 'click-chart'); + return dispatch(EventType.CLICK_CHART, EventType.HOVER_SHAPE, EventType.POINTERMOVE_CHART); };