fix: 💄 Add new chart event onDataPointHover that triggers only on data point change

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