From a0fed397a33b92d954b5d57272cb661b8407c344 Mon Sep 17 00:00:00 2001 From: Alaev Evgeny Date: Tue, 12 Nov 2024 14:30:41 +0100 Subject: [PATCH 1/3] feat: add chart.events.pointermove property --- src/components/ChartInner/index.tsx | 20 +++++++++++++++----- src/types/chart/chart.ts | 7 ++++++- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/ChartInner/index.tsx b/src/components/ChartInner/index.tsx index 9ef62d4..280e62c 100644 --- a/src/components/ChartInner/index.tsx +++ b/src/components/ChartInner/index.tsx @@ -107,15 +107,25 @@ export const ChartInner = (props: Props) => { }); const clickHandler = data.chart?.events?.click; + const pointerMoveHandler = data.chart?.events?.pointermove; + React.useEffect(() => { if (clickHandler) { dispatcher.on('click-chart', clickHandler); } + if (pointerMoveHandler) { + dispatcher.on('hover-shape.chart', (...args) => { + const [hoverData, _position, event] = args; + pointerMoveHandler(hoverData, event); + }); + } + return () => { dispatcher.on('click-chart', null); + dispatcher.on('hover-shape.chrt', null); }; - }, [dispatcher, clickHandler]); + }, [dispatcher, clickHandler, pointerMoveHandler]); const boundsOffsetTop = chart.margin.top; // We only need to consider the width of the first left axis @@ -133,7 +143,7 @@ export const ChartInner = (props: Props) => { const x = pointerX - boundsOffsetLeft; const y = pointerY - boundsOffsetTop; if (isOutsideBounds(x, y)) { - dispatcher.call('hover-shape', {}, undefined); + dispatcher.call('hover-shape', {}, undefined, undefined, event); return; } @@ -141,13 +151,13 @@ export const ChartInner = (props: Props) => { position: [x, y], shapesData, }); - dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]); + dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY], event); }; const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY); - const handleMouseLeave = () => { + const handleMouseLeave: React.MouseEventHandler = (event) => { throttledHandleMouseMove.cancel(); - dispatcher.call('hover-shape', {}, undefined); + dispatcher.call('hover-shape', {}, undefined, undefined, event); }; const handleChartClick = React.useCallback( diff --git a/src/types/chart/chart.ts b/src/types/chart/chart.ts index 6a21743..920286b 100644 --- a/src/types/chart/chart.ts +++ b/src/types/chart/chart.ts @@ -1,3 +1,5 @@ +import type {MeaningfulAny} from '../misc'; + export type ChartMargin = { top: number; right: number; @@ -5,9 +7,12 @@ export type ChartMargin = { left: number; }; +type ChartEventData = {point: MeaningfulAny; series: MeaningfulAny}; + export type ChartOptions = { margin?: Partial; events?: { - click?: (data: {point: unknown; series: unknown}, event: PointerEvent) => void; + click?: (data: ChartEventData, event: PointerEvent) => void; + pointermove?: (data: ChartEventData | undefined, event: PointerEvent) => void; }; }; From dd76a5716b58a8f3368c1ebb13c0606d2adf6487 Mon Sep 17 00:00:00 2001 From: Alaev Evgeny Date: Tue, 12 Nov 2024 14:36:23 +0100 Subject: [PATCH 2/3] fix: fix misspell --- src/components/ChartInner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChartInner/index.tsx b/src/components/ChartInner/index.tsx index 280e62c..4f67a2f 100644 --- a/src/components/ChartInner/index.tsx +++ b/src/components/ChartInner/index.tsx @@ -123,7 +123,7 @@ export const ChartInner = (props: Props) => { return () => { dispatcher.on('click-chart', null); - dispatcher.on('hover-shape.chrt', null); + dispatcher.on('hover-shape.chart', null); }; }, [dispatcher, clickHandler, pointerMoveHandler]); From 49620f3e00e2c37951a8a7efbd5c326ee2ec2940 Mon Sep 17 00:00:00 2001 From: Alaev Evgeny Date: Tue, 12 Nov 2024 15:08:46 +0100 Subject: [PATCH 3/3] refactor: rename mousemove to pointermove --- src/components/ChartInner/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ChartInner/index.tsx b/src/components/ChartInner/index.tsx index 4f67a2f..aef8bd5 100644 --- a/src/components/ChartInner/index.tsx +++ b/src/components/ChartInner/index.tsx @@ -138,7 +138,7 @@ export const ChartInner = (props: Props) => { [boundsHeight, boundsWidth], ); - const handleMouseMove: React.MouseEventHandler = (event) => { + const handlePointerMove: React.MouseEventHandler = (event) => { const [pointerX, pointerY] = pointer(event, svgRef.current); const x = pointerX - boundsOffsetLeft; const y = pointerY - boundsOffsetTop; @@ -153,10 +153,10 @@ export const ChartInner = (props: Props) => { }); dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY], event); }; - const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY); + const throttledHandlePointerMove = throttle(handlePointerMove, THROTTLE_DELAY); - const handleMouseLeave: React.MouseEventHandler = (event) => { - throttledHandleMouseMove.cancel(); + const handlePointerLeave: React.MouseEventHandler = (event) => { + throttledHandlePointerMove.cancel(); dispatcher.call('hover-shape', {}, undefined, undefined, event); }; @@ -195,8 +195,8 @@ export const ChartInner = (props: Props) => { className={b()} width={width} height={height} - onMouseMove={throttledHandleMouseMove} - onMouseLeave={handleMouseLeave} + onPointerMove={throttledHandlePointerMove} + onPointerLeave={handlePointerLeave} onClick={handleChartClick} > {title && }