Unify label hit-testing between the charts

mhawryluk · mhawryluk · commit d09bb65fc4e0 · 2026-04-27T15:47:04.000+02:00
diff --git a/src/components/Charts/BarChart/BarChartContent.tsx b/src/components/Charts/BarChart/BarChartContent.tsx
@@ -10,7 +10,7 @@ import ChartTooltipLayer from '@components/Charts/components/ChartTooltipLayer';
 import ChartXAxisLabels from '@components/Charts/components/ChartXAxisLabels';
 import ChartYAxisLabels from '@components/Charts/components/ChartYAxisLabels';
 import {AXIS_LABEL_GAP, CHART_CONTENT_MIN_HEIGHT, CHART_PADDING, GLYPH_PADDING, X_AXIS_LINE_WIDTH, Y_AXIS_LINE_WIDTH, Y_AXIS_TICK_COUNT} from '@components/Charts/constants';
-import type {ComputeGeometryFn, HitTestArgs} from '@components/Charts/hooks';
+import type {HitTestArgs} from '@components/Charts/hooks';
 import {
     useChartFontManager,
     useChartInteractions,
@@ -22,7 +22,7 @@ import {
     useYAxisLabelWidth,
 } from '@components/Charts/hooks';
 import type {CartesianChartProps, ChartDataPoint} from '@components/Charts/types';
-import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getAdditionalOffset, getChartColor, rotatedLabelYOffset} from '@components/Charts/utils';
+import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getChartColor} from '@components/Charts/utils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -36,29 +36,6 @@ const BAR_INNER_PADDING = 0.3;
  */
 const BASE_DOMAIN_PADDING = {top: 32, bottom: 1, left: 0, right: 0};
 
-/**
- * Bar chart geometry for label hit-testing.
- * Labels are center-anchored: the 45° parallelogram's upper-right corner is offset
- * by (halfLabelWidth * sinA) right and up, so the box straddles the tick symmetrically.
- */
-const computeBarLabelGeometry: ComputeGeometryFn = ({ascent, descent, sinA, angleRad, labelWidths, padding}) => {
-    const maxLabelWidth = labelWidths.length > 0 ? Math.max(...labelWidths) : 0;
-    const centeredUpwardOffset = angleRad > 0 ? (maxLabelWidth / 2) * sinA : 0;
-    const halfLabelSins = labelWidths.map((w) => (w / 2) * sinA - variables.iconSizeExtraSmall / 3);
-    const halfWidths = labelWidths.map((w) => w / 2);
-    const additionalOffset = getAdditionalOffset(angleRad);
-    return {
-        labelYOffset: AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) + centeredUpwardOffset - additionalOffset,
-        iconSin: variables.iconSizeExtraSmall * sinA,
-        labelSins: labelWidths.map((w) => w * sinA),
-        halfWidths,
-        cornerAnchorDX: halfLabelSins,
-        cornerAnchorDY: halfLabelSins.map((v) => -v),
-        yMin90Offsets: halfWidths.map((hw) => -hw + padding),
-        yMax90Offsets: halfWidths.map((hw) => hw + padding),
-    };
-};
-
 type BarChartProps = CartesianChartProps & {
     /** Callback when a bar is pressed */
     onBarPress?: (dataPoint: ChartDataPoint, index: number) => void;
@@ -141,7 +118,6 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         labelRotation,
         labelSkipInterval,
         chartBottom,
-        computeGeometry: computeBarLabelGeometry,
     });
 
     const handleChartBoundsChange = (bounds: ChartBounds) => {
diff --git a/src/components/Charts/LineChart/LineChartContent.tsx b/src/components/Charts/LineChart/LineChartContent.tsx
@@ -12,7 +12,7 @@ import ChartYAxisLabels from '@components/Charts/components/ChartYAxisLabels';
 import LeftFrameLine from '@components/Charts/components/LeftFrameLine';
 import ScatterPoints from '@components/Charts/components/ScatterPoints';
 import {AXIS_LABEL_GAP, CHART_CONTENT_MIN_HEIGHT, CHART_PADDING, GLYPH_PADDING, X_AXIS_LINE_WIDTH, Y_AXIS_LINE_WIDTH, Y_AXIS_TICK_COUNT} from '@components/Charts/constants';
-import type {ComputeGeometryFn, HitTestArgs} from '@components/Charts/hooks';
+import type {HitTestArgs} from '@components/Charts/hooks';
 import {
     useChartFontManager,
     useChartInteractions,
@@ -24,7 +24,7 @@ import {
     useYAxisLabelWidth,
 } from '@components/Charts/hooks';
 import type {CartesianChartProps, ChartDataPoint} from '@components/Charts/types';
-import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getAdditionalOffset, rotatedLabelYOffset} from '@components/Charts/utils';
+import {calculateMinDomainPadding, DEFAULT_CHART_COLOR} from '@components/Charts/utils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -42,26 +42,6 @@ const MIN_SAFE_PADDING = DOT_RADIUS + DOT_HOVER_EXTRA_RADIUS;
 /** Base domain padding applied to all sides */
 const BASE_DOMAIN_PADDING = {top: 16, bottom: 16, left: 0, right: 0};
 
-/**
- * Line chart geometry for label hit-testing.
- * Labels are start-anchored at the tick: the 45° parallelogram's upper-right corner is
- * offset by (iconSize/3 * sinA) left and down, placing the box just below the axis line.
- */
-const computeLineLabelGeometry: ComputeGeometryFn = ({ascent, descent, sinA, angleRad, labelWidths, padding}) => {
-    const iconThirdSin = (variables.iconSizeExtraSmall / 3) * sinA;
-    const additionalOffset = getAdditionalOffset(angleRad);
-    return {
-        labelYOffset: AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) - additionalOffset,
-        iconSin: variables.iconSizeExtraSmall * sinA,
-        labelSins: labelWidths.map((w) => w * sinA),
-        halfWidths: labelWidths.map((w) => w / 2),
-        cornerAnchorDX: labelWidths.map(() => -iconThirdSin),
-        cornerAnchorDY: labelWidths.map(() => iconThirdSin),
-        yMin90Offsets: labelWidths.map(() => padding),
-        yMax90Offsets: labelWidths.map((w) => w + padding),
-    };
-};
-
 type LineChartProps = CartesianChartProps & {
     /** Callback when a data point is pressed */
     onPointPress?: (dataPoint: ChartDataPoint, index: number) => void;
@@ -157,7 +137,6 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
         labelRotation,
         labelSkipInterval,
         chartBottom,
-        computeGeometry: computeLineLabelGeometry,
     });
 
     const handleChartBoundsChange = (bounds: ChartBounds) => {
diff --git a/src/components/Charts/hooks/index.ts b/src/components/Charts/hooks/index.ts
@@ -9,4 +9,3 @@ export {default as useChartLabelFormats} from './useChartLabelFormats';
 export {default as useDynamicYDomain} from './useDynamicYDomain';
 export {useTooltipData} from './useTooltipData';
 export {default as useLabelHitTesting} from './useLabelHitTesting';
-export type {ComputeGeometryFn, ComputeGeometryInput} from './useLabelHitTesting';
diff --git a/src/components/Charts/hooks/useLabelHitTesting.ts b/src/components/Charts/hooks/useLabelHitTesting.ts
@@ -2,9 +2,9 @@ import type {SkTypefaceFontProvider} from '@shopify/react-native-skia';
 import type {SharedValue} from 'react-native-reanimated';
 import {useSharedValue} from 'react-native-reanimated';
 import type {Scale} from 'victory-native';
-import {DIAGONAL_ANGLE_RADIAN_THRESHOLD} from '@components/Charts/constants';
+import {AXIS_LABEL_GAP, DIAGONAL_ANGLE_RADIAN_THRESHOLD} from '@components/Charts/constants';
 import type {LabelRotation} from '@components/Charts/types';
-import {getFontLineMetrics, isCursorOverChartLabel} from '@components/Charts/utils';
+import {getAdditionalOffset, getFontLineMetrics, isCursorOverChartLabel, rotatedLabelYOffset} from '@components/Charts/utils';
 import variables from '@styles/variables';
 import type {HitTestArgs} from './useChartInteractions';
 
@@ -34,28 +34,6 @@ type LabelHitGeometry = {
     yMax90Offsets: number[];
 };
 
-type ComputeGeometryInput = {
-    /** The ascent of the font */
-    ascent: number;
-
-    /** The descent of the font */
-    descent: number;
-
-    /** The sine of the angle */
-    sinA: number;
-
-    /** The angle in radians */
-    angleRad: number;
-
-    /** The widths of the labels */
-    labelWidths: number[];
-
-    /** The padding of the labels */
-    padding: number;
-};
-
-type ComputeGeometryFn = (input: ComputeGeometryInput) => LabelHitGeometry;
-
 type UseLabelHitTestingParams = {
     fontMgr: SkTypefaceFontProvider | null | undefined;
     fontSize: number;
@@ -64,45 +42,45 @@ type UseLabelHitTestingParams = {
     labelRotation: LabelRotation;
     labelSkipInterval: number;
     chartBottom: SharedValue<number>;
-
-    /**
-     * Chart-specific geometry factory.
-     * Receives font metrics, trig values, and per-label widths; returns the
-     * normalized geometry shape. Typically a module-level constant.
-     */
-    computeGeometry: ComputeGeometryFn;
 };
 
 /**
  * Shared hook for x-axis label hit-testing in cartesian charts.
  *
  * Encapsulates angle conversion, pre-computed hit geometry, and the
  * isCursorOverLabel / findLabelCursorX worklets — all of which are identical
- * between bar and line chart except for how the hit geometry is computed.
+ * between bar and line charts.
  *
  * Label widths are accepted as a pre-computed array (from useChartLabelLayout)
  * so no Skia measurement happens here.
  *
- * Chart-specific geometry (45° corner anchor offsets, 90° vertical bounds) is supplied
- * via the `computeGeometry` callback, typically a module-level constant.
+ * Labels are right-aligned at the tick: the 45° parallelogram's upper-right corner is
+ * offset by (iconSize/3 * sinA) left and down, placing the box just below the axis line.
  */
-function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotation, labelSkipInterval, chartBottom, computeGeometry}: UseLabelHitTestingParams) {
+function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotation, labelSkipInterval, chartBottom}: UseLabelHitTestingParams) {
     const tickXPositions = useSharedValue<number[]>([]);
 
     const angleRad = (Math.abs(labelRotation) * Math.PI) / 180;
 
     const fontMetrics = fontMgr ? getFontLineMetrics(fontMgr, fontSize) : null;
 
-    /**
-     * Geometry for label hit-testing. The `computeGeometry` callback supplies the
-     * chart-specific differences (bar vs. line anchor offsets).
-     */
     let labelHitGeometry: LabelHitGeometry | null = null;
     if (fontMetrics) {
         const {ascent, descent} = fontMetrics;
         const sinA = Math.sin(angleRad);
         const padding = variables.iconSizeExtraSmall / 2;
-        labelHitGeometry = computeGeometry({ascent, descent, sinA, angleRad, labelWidths: truncatedLabelWidths, padding});
+        const iconThirdSin = (variables.iconSizeExtraSmall / 3) * sinA;
+        const additionalOffset = getAdditionalOffset(angleRad);
+        labelHitGeometry = {
+            labelYOffset: AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) - additionalOffset,
+            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),
+            yMax90Offsets: truncatedLabelWidths.map((w) => w + padding),
+        };
     }
 
     /**
@@ -183,4 +161,3 @@ function useLabelHitTesting({fontMgr, fontSize, truncatedLabelWidths, labelRotat
 }
 
 export default useLabelHitTesting;
-export type {ComputeGeometryFn, ComputeGeometryInput, LabelHitGeometry};
