From f24895646b7a1dbbdeb65068e150315b48a8680f Mon Sep 17 00:00:00 2001
From: Enrico Barbieri <enrico.barbieri.1997@gmail.com>
Date: Fri, 13 Dec 2024 21:52:20 +0100
Subject: [PATCH] fix: :lipstick: Add new chart event onDataPointHover that
 triggers only on data 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
---
 .../web/components/chart/historical-chart.tsx |  2 +-
 .../chart/historical-volume-chart.tsx         |  2 +-
 .../chart/light-weight-charts/chart.tsx       | 19 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/chart/historical-chart.tsx b/packages/web/components/chart/historical-chart.tsx
index 97848fed37..2941a221e0 100644
--- a/packages/web/components/chart/historical-chart.tsx
+++ b/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[];
 
diff --git a/packages/web/components/chart/historical-volume-chart.tsx b/packages/web/components/chart/historical-volume-chart.tsx
index 657b86bb6a..99c774997b 100644
--- a/packages/web/components/chart/historical-volume-chart.tsx
+++ b/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[];
 
diff --git a/packages/web/components/chart/light-weight-charts/chart.tsx b/packages/web/components/chart/light-weight-charts/chart.tsx
index 98db6cf8ee..ba09a0a5d1 100644
--- a/packages/web/components/chart/light-weight-charts/chart.tsx
+++ b/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,
       });
     }