fix: 💄 Add new chart event onDataPointHover that triggers only on dat…

…a point change (#4008)

Current onCrosshairMove triggers multiple times for small mouse movements even if the mouse is kept on the same data point. Added an event that triggers only when the logical data point id changes

packages/web/components/chart/historical-chart.tsx

@@ -121,7 +121,7 @@ export const HistoricalChart = memo((props: HistoricalChartProps) => {
           data,
         },
       ]}
-      onCrosshairMove={(params) => {
+      onDataPointHover={(params) => {
         if (params.seriesData.size > 0) {
           const [data] = [...params.seriesData.values()] as AreaData[];
 

packages/web/components/chart/historical-volume-chart.tsx

@@ -95,7 +95,7 @@ export const HistoricalVolumeChart = memo(
             data,
           },
         ]}
-        onCrosshairMove={(params) => {
+        onDataPointHover={(params) => {
           if (params.seriesData.size > 0) {
             const [data] = [...params.seriesData.values()] as AreaData[];
 

packages/web/components/chart/light-weight-charts/chart.tsx

@@ -11,6 +11,7 @@ import {
 import React, {
   memo,
   PropsWithChildren,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -196,6 +197,7 @@ interface ChartProps<T extends TimeChartOptions, K extends Time> {
     params: ChartControllerParams<TimeChartOptions, K>
   ) => ChartController<TimeChartOptions, K>;
   onCrosshairMove?: (params: MouseEventParams<K>) => void;
+  onDataPointHover?: (params: MouseEventParams<K>) => void;
 }
 
 export const Chart = memo(
@@ -207,10 +209,25 @@ export const Chart = memo(
       children,
       series,
       onCrosshairMove,
+      onDataPointHover,
       Controller,
     } = props;
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
     const chart = useRef<ChartController<TimeChartOptions, K>>();
+    const lastHoverDataPointLogicalIndex =
+      useRef<MouseEventParams<K>["logical"]>(undefined);
+
+    const onCrosshairMoveInternal = useCallback(
+      (params: MouseEventParams<K>) => {
+        onCrosshairMove?.(params);
+
+        if (lastHoverDataPointLogicalIndex.current !== params.logical) {
+          onDataPointHover?.(params);
+        }
+        lastHoverDataPointLogicalIndex.current = params.logical;
+      },
+      [onCrosshairMove, onDataPointHover]
+    );
 
     useSyncExternalStore(
       resizeSubscribe,
@@ -228,7 +245,7 @@ export const Chart = memo(
         },
         series,
         container,
-        onCrosshairMove,
+        onCrosshairMove: onCrosshairMoveInternal,
       });
     }