fix(D3 plugin): fix the detection of the closest point for line chart (…

…#512)
gravity-ui · Aug 26, 2024 · b11fa31 · b11fa31
1 parent ce57909
commit b11fa31
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/plugins/d3/__stories__/line/Split.stories.tsx b/src/plugins/d3/__stories__/line/Split.stories.tsx
@@ -91,6 +91,11 @@ const ChartStory = () => {
                 },
             },
         },
+        chart: {
+            events: {
+                click: action('chart.events.click'),
+            },
+        },
     };
 
     if (loading) {

diff --git a/src/plugins/d3/renderer/utils/get-closest-data.ts b/src/plugins/d3/renderer/utils/get-closest-data.ts
@@ -54,6 +54,14 @@ function getClosestPointsByXValue(x: number, y: number, points: ShapePoint[]) {
         closestYIndex = closestPoints.length - 1;
     } else {
         closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+        if (closestYIndex === -1) {
+            const sortedY = sort(
+                closestPoints.map((p, index) => ({index, y: p.y1 + (p.y0 - p.y1) / 2})),
+                (p) => p.y,
+            );
+            const sortedYIndex = bisector<{y: number}, number>((p) => p.y).center(sortedY, y);
+            closestYIndex = sortedY[sortedYIndex]?.index ?? -1;
+        }
     }
 
     return closestPoints.map((p, i) => ({