Fix hit testing for chart labels

Author: mhawryluk

src/components/Charts/BarChart/BarChartContent.tsx

@@ -124,7 +124,6 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         const domainWidth = bounds.right - bounds.left;
         const calculatedBarWidth = ((1 - BAR_INNER_PADDING) * domainWidth) / data.length;
         barWidth.set(calculatedBarWidth);
-        chartBottom.set(bounds.bottom);
         yZero.set(0);
         setBarAreaWidth(domainWidth);
         setBoundsLeft(bounds.left);
@@ -192,6 +191,10 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         if (!fontMgr || xAxisLabelHeight === undefined) {
             return null;
         }
+
+        const chartBoundsBottom = args.yScale(Math.min(...args.yTicks));
+        chartBottom.set(chartBoundsBottom);
+
         return (
             <>
                 <ChartXAxisLabels
@@ -207,7 +210,7 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
                     fontMgr={fontMgr}
                     labelColor={theme.textSupporting}
                     xScale={args.xScale}
-                    chartBoundsBottom={args.yScale(Math.min(...args.yTicks))}
+                    chartBoundsBottom={chartBoundsBottom}
                 />
                 <ChartYAxisLabels
                     yTicks={args.yTicks}

src/components/Charts/LineChart/LineChartContent.tsx

@@ -143,7 +143,6 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
         setPlotAreaWidth(bounds.right - bounds.left);
         setBoundsLeft(bounds.left);
         setBoundsRight(bounds.right);
-        chartBottom.set(bounds.bottom);
     };
 
     const checkIsOverDot = (args: HitTestArgs) => {
@@ -175,6 +174,8 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
     }));
 
     const renderOutside = (args: CartesianChartRenderArg<{x: number; y: number}, 'y'>) => {
+        const chartBoundsBottom = args.yScale(Math.min(...args.yTicks));
+        chartBottom.set(chartBoundsBottom);
         return (
             <>
                 <LeftFrameLine
@@ -202,7 +203,7 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
                         fontMgr={fontMgr}
                         labelColor={theme.textSupporting}
                         xScale={args.xScale}
-                        chartBoundsBottom={args.yScale(Math.min(...args.yTicks))}
+                        chartBoundsBottom={chartBoundsBottom}
                     />
                 )}
                 {!!fontMgr && (

src/components/Charts/hooks/useLabelHitTesting.ts

@@ -21,14 +21,14 @@ type LabelHitGeometry = {
     /** Per-label: labelWidth / 2 — half-extent for 0° and 90° hit bounds */
     halfWidths: number[];
 
-    /** Per-label: rightUpperCorner.x = targetX + cornerAnchorDX[i] */
-    cornerAnchorDX: number[];
+    /** rightUpperCorner.x = targetX + cornerAnchorDX */
+    cornerAnchorDX: number;
 
-    /** Per-label: rightUpperCorner.y = labelY + cornerAnchorDY[i] */
-    cornerAnchorDY: number[];
+    /** rightUpperCorner.y = labelY + cornerAnchorDY */
+    cornerAnchorDY: number;
 
-    /** Per-label: yMin90 = labelY + yMin90Offsets[i] */
-    yMin90Offsets: number[];
+    /** yMin90 = labelY + yMin90Offset */
+    yMin90Offset: number;
 
     /** Per-label: yMax90 = labelY + yMax90Offsets[i] */
     yMax90Offsets: number[];
@@ -76,9 +76,9 @@ function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotat
             iconSin: variables.iconSizeExtraSmall * sinA,
             labelSins: truncatedLabelWidths.map((w) => w * sinA),
             halfWidths: truncatedLabelWidths.map((w) => w / 2),
-            cornerAnchorDX: truncatedLabelWidths.map(() => -iconThirdSin),
-            cornerAnchorDY: truncatedLabelWidths.map(() => iconThirdSin),
-            yMin90Offsets: truncatedLabelWidths.map(() => padding),
+            cornerAnchorDX: -iconThirdSin,
+            cornerAnchorDY: iconThirdSin,
+            yMin90Offset: padding,
             yMax90Offsets: truncatedLabelWidths.map((w) => w + padding),
         };
     }
@@ -94,17 +94,15 @@ function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotat
             return false;
         }
 
-        const {labelYOffset, iconSin, labelSins, halfWidths, cornerAnchorDX, cornerAnchorDY, yMin90Offsets, yMax90Offsets} = labelHitGeometry;
+        const {labelYOffset, iconSin, labelSins, halfWidths, cornerAnchorDX, cornerAnchorDY, yMin90Offset, yMax90Offsets} = labelHitGeometry;
         const padding = variables.iconSizeExtraSmall / 2;
         const halfWidth = halfWidths.at(activeIndex) ?? 0;
         const labelY = args.chartBottom + labelYOffset;
 
         let corners45: Array<{x: number; y: number}> | undefined;
         if (angleRad > 0 && angleRad < DIAGONAL_ANGLE_RADIAN_THRESHOLD) {
             const labelSin = labelSins.at(activeIndex) ?? 0;
-            const anchorDX = cornerAnchorDX.at(activeIndex) ?? 0;
-            const anchorDY = cornerAnchorDY.at(activeIndex) ?? 0;
-            const rightUpperCorner = {x: args.targetX + anchorDX, y: labelY + anchorDY};
+            const rightUpperCorner = {x: args.targetX + cornerAnchorDX, y: labelY + cornerAnchorDY};
             const rightLowerCorner = {x: rightUpperCorner.x + iconSin, y: rightUpperCorner.y + iconSin};
             const leftUpperCorner = {x: rightUpperCorner.x - labelSin, y: rightUpperCorner.y + labelSin};
             const leftLowerCorner = {x: rightLowerCorner.x - labelSin, y: rightLowerCorner.y + labelSin};
@@ -120,7 +118,7 @@ function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotat
             halfWidth,
             padding,
             corners45,
-            yMin90: labelY + (yMin90Offsets.at(activeIndex) ?? 0),
+            yMin90: labelY + yMin90Offset,
             yMax90: labelY + (yMax90Offsets.at(activeIndex) ?? 0),
         });
     };