fix: prevent duplicate hover entries

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -26,7 +26,7 @@ ChartJS.register(
   zoomPlugin
 );
 
-const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover }) => {
+const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover, syncRef }) => {
   const chartRef = useRef(null);
 
   const handleChartRef = useCallback((ref) => {
@@ -38,17 +38,18 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover })
 
   const enhancedOptions = {
     ...options,
-      onHover: (event, activeElements) => {
-        if (activeElements.length > 0 && chartRef.current) {
-          const { datasetIndex, index } = activeElements[0];
-          const dataset = chartRef.current.data.datasets[datasetIndex];
-          const point = dataset.data[index];
-          const step = point.x;
-          onSyncHover(step, chartId);
-        } else {
-          onSyncHover(null, chartId);
-        }
-      },
+    onHover: (event, activeElements) => {
+      if (syncRef?.current) return;
+      if (activeElements.length > 0 && chartRef.current) {
+        const { datasetIndex, index } = activeElements[0];
+        const dataset = chartRef.current.data.datasets[datasetIndex];
+        const point = dataset.data[index];
+        const step = point.x;
+        onSyncHover(step, chartId);
+      } else {
+        onSyncHover(null, chartId);
+      }
+    },
     events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
   };
 
@@ -74,17 +75,20 @@ export default function ChartContainer({
   onMaxStepChange
 }) {
   const chartRefs = useRef(new Map());
+  const syncLockRef = useRef(false);
   const registerChart = useCallback((id, inst) => {
     chartRefs.current.set(id, inst);
   }, []);
 
   const syncHoverToAllCharts = useCallback((step, sourceId) => {
+    if (syncLockRef.current) return;
+    syncLockRef.current = true;
     chartRefs.current.forEach((chart, id) => {
       if (!chart) return;
       if (step === null) {
         chart.setActiveElements([]);
-        chart.tooltip.setActiveElements([]);
-        chart.update('none');
+        chart.tooltip.setActiveElements([], { x: 0, y: 0 });
+        chart.draw();
       } else if (id !== sourceId) {
         const activeElements = [];
         chart.data.datasets.forEach((dataset, datasetIndex) => {
@@ -93,11 +97,13 @@ export default function ChartContainer({
             activeElements.push({ datasetIndex, index: idx });
           }
         });
+        const pos = { x: chart.scales.x.getPixelForValue(step), y: 0 };
         chart.setActiveElements(activeElements);
-        chart.tooltip.setActiveElements(activeElements, { x: 0, y: 0 });
-        chart.update('none');
+        chart.tooltip.setActiveElements(activeElements, pos);
+        chart.draw();
       }
     });
+    syncLockRef.current = false;
   }, []);
 
     const parsedData = useMemo(() => {
@@ -548,6 +554,7 @@ export default function ChartContainer({
             chartId={`metric-comp-${idx}`}
             onRegisterChart={registerChart}
             onSyncHover={syncHoverToAllCharts}
+            syncRef={syncLockRef}
             data={compData}
             options={compOptions}
           />
@@ -562,6 +569,7 @@ export default function ChartContainer({
             chartId={`metric-${idx}`}
             onRegisterChart={registerChart}
             onSyncHover={syncHoverToAllCharts}
+            syncRef={syncLockRef}
             data={createChartData(dataArray)}
             options={options}
           />

src/components/__tests__/ChartContainer.test.jsx

@@ -33,7 +33,8 @@ vi.mock('react-chartjs-2', async () => {
         data: props.data,
         setActiveElements: vi.fn(),
         tooltip: { setActiveElements: vi.fn() },
-        update: vi.fn(),
+        draw: vi.fn(),
+        scales: { x: { getPixelForValue: vi.fn(() => 0) } },
       };
       charts.push(chart);
       if (typeof ref === 'function') ref(chart);
@@ -110,6 +111,7 @@ describe('ChartContainer', () => {
     const hover = __lineProps[0].options.onHover;
     hover({}, [{ index: 0, datasetIndex: 0 }]);
     expect(__charts[1].setActiveElements).toHaveBeenCalled();
+    expect(__charts[1].draw).toHaveBeenCalled();
   });
 
   it('parses metrics, applies range and triggers callbacks', () => {