feat: change chart.events.pointermove signature

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);
+                },
+            },
+        },
     };
 }
 

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,15 +148,27 @@ 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;
         }
 
         const closest = getClosestPoints({
             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<SVGSVGElement> = (event) => {
@@ -170,7 +182,8 @@ export const ChartInner = (props: Props) => {
 
     const handleMouseLeave: React.MouseEventHandler<SVGSVGElement> = (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<SVGSVGElement> = (event) => {

src/types/chart/chart.ts

@@ -1,18 +1,18 @@
 import type {MeaningfulAny} from '../misc';
 
+import type {ChartTooltipRendererData} from './tooltip';
+
 export type ChartMargin = {
     top: number;
     right: number;
     bottom: number;
     left: number;
 };
 
-type ChartEventData = {point: MeaningfulAny; series: MeaningfulAny};
-
 export type ChartOptions = {
     margin?: Partial<ChartMargin>;
     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;
     };
 };

src/types/chart/tooltip.ts

@@ -77,6 +77,12 @@ export type TooltipDataChunk<T = MeaningfulAny> = (
     | TooltipDataChunkWaterfall<T>
 ) & {closest?: boolean};
 
+export type ChartTooltipRendererData<T = MeaningfulAny> = {
+    hovered: TooltipDataChunk<T>[];
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
+};
+
 export type ChartTooltip<T = MeaningfulAny> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

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);
 };