@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/scrubber/Scrubber.js

@@ -0,0 +1,166 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile';
+import { Group, Rect } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnSerializableScale, useScrubberContext } from '../utils';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { DefaultScrubberLabel } from './DefaultScrubberLabel';
+import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
+import { ScrubberBeaconLabelGroup } from './ScrubberBeaconLabelGroup';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unified component that manages all scrubber elements (beacons, line, labels).
+ */
+export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesIds,
+    hideLine,
+    label,
+    lineStroke,
+    BeaconComponent = DefaultScrubberBeacon,
+    BeaconLabelComponent,
+    LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
+    hideOverlay,
+    overlayOffset = 2,
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
+    idlePulse,
+    beaconTransitions
+  } = _ref;
+  const theme = useTheme();
+  const beaconGroupRef = React.useRef(null);
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXSerializableScale,
+    getXAxis,
+    series,
+    drawingArea,
+    animate,
+    dataLength
+  } = useCartesianChartContext();
+  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+
+  // Animation state for delayed scrubber rendering (matches web timing)
+  const scrubberOpacity = useSharedValue(animate ? 0 : 1);
+
+  // Delay scrubber appearance until after path enter animation completes
+  useEffect(() => {
+    if (animate) {
+      scrubberOpacity.value = withDelay(accessoryFadeTransitionDelay, withTiming(1, {
+        duration: accessoryFadeTransitionDuration
+      }));
+    }
+  }, [animate, scrubberOpacity]);
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      var _beaconGroupRef$curre;
+      (_beaconGroupRef$curre = beaconGroupRef.current) == null || _beaconGroupRef$curre.pulse();
+    }
+  }));
+  const filteredSeriesIds = useMemo(() => {
+    if (seriesIds === undefined) {
+      var _series$map;
+      return (_series$map = series == null ? void 0 : series.map(s => s.id)) != null ? _series$map : [];
+    }
+    return seriesIds;
+  }, [series, seriesIds]);
+  const dataIndex = useDerivedValue(() => {
+    var _scrubberPosition$val;
+    return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
+  }, [scrubberPosition, dataLength]);
+  const dataX = useDerivedValue(() => {
+    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = xAxis.data[dataIndex.value];
+      return typeof dataValue === 'string' ? dataIndex.value : dataValue;
+    }
+    return dataIndex.value;
+  }, [xAxis, dataIndex]);
+  const lineOpacity = useDerivedValue(() => {
+    return scrubberPosition.value !== undefined ? 1 : 0;
+  }, [scrubberPosition]);
+  const overlayOpacity = useDerivedValue(() => {
+    return scrubberPosition.value !== undefined ? 0.8 : 0;
+  }, [scrubberPosition]);
+  const overlayWidth = useDerivedValue(() => {
+    const pixelX = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
+    return drawingArea.x + drawingArea.width - pixelX + overlayOffset;
+  }, [dataX, xScale]);
+  const overlayX = useDerivedValue(() => {
+    const xValue = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
+    return xValue;
+  }, [dataX, xScale]);
+  const resolvedLabelValue = useSharedValue('');
+  const updateResolvedLabel = useCallback(index => {
+    if (!label) {
+      resolvedLabelValue.value = '';
+      return;
+    }
+    if (typeof label === 'function') {
+      const result = label(index);
+      resolvedLabelValue.value = result != null ? result : '';
+    } else if (typeof label === 'string') {
+      resolvedLabelValue.value = label;
+    }
+  }, [label, resolvedLabelValue]);
+
+  // Update resolved label when dataIndex changes
+  useAnimatedReaction(() => dataIndex.value, currentIndex => {
+    'worklet';
+
+    runOnJS(updateResolvedLabel)(currentIndex);
+  }, [updateResolvedLabel]);
+  const beaconLabels = useMemo(() => {
+    var _series$filter$filter;
+    return (_series$filter$filter = series == null ? void 0 : series.filter(s => filteredSeriesIds.includes(s.id)).filter(s => s.label !== undefined && s.label.length > 0).map(s => ({
+      seriesId: s.id,
+      label: s.label,
+      color: s.color
+    }))) != null ? _series$filter$filter : [];
+  }, [series, filteredSeriesIds]);
+  if (!xScale) return;
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: scrubberOpacity,
+    children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
+      color: theme.color.bg,
+      height: drawingArea.height + overlayOffset * 2,
+      opacity: overlayOpacity,
+      width: overlayWidth,
+      x: overlayX,
+      y: drawingArea.y - overlayOffset
+    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent,
+      dataX: dataX,
+      label: resolvedLabelValue,
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
+      opacity: lineOpacity,
+      stroke: lineStroke
+    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      transitions: beaconTransitions
+    }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labels: beaconLabels
+    })]
+  });
+}));

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,161 @@
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { useTheme } from '@coinbase/cds-mobile';
+import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientStops, useScrubberContext } from '../utils';
+import { convertToSerializableScale } from '../utils/scale';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Helper component to calculate beacon data for a specific series
+const BeaconWithData = /*#__PURE__*/memo(_ref => {
+  let {
+    seriesId,
+    dataIndex,
+    dataX,
+    isIdle,
+    BeaconComponent,
+    idlePulse,
+    animate,
+    transitions,
+    beaconRef
+  } = _ref;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const theme = useTheme();
+  const series = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
+  const gradient = series == null ? void 0 : series.gradient;
+  const dataY = useDerivedValue(() => {
+    if (sourceData && dataIndex.value !== undefined && dataIndex.value >= 0 && dataIndex.value < sourceData.length) {
+      const dataValue = sourceData[dataIndex.value];
+      if (typeof dataValue === 'number') {
+        return dataValue;
+      } else if (Array.isArray(dataValue)) {
+        const validValues = dataValue.filter(val => val !== null);
+        if (validValues.length >= 1) {
+          return validValues[validValues.length - 1];
+        }
+      }
+    }
+    return 0;
+  }, [sourceData, dataIndex]);
+
+  // Get scales for gradient evaluation
+  const gradientScale = useMemo(() => {
+    if (!gradient) return undefined;
+    const scale = gradient.axis === 'x' ? getXScale() : getYScale(series == null ? void 0 : series.yAxisId);
+    if (!scale) return undefined;
+    return convertToSerializableScale(scale);
+  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.yAxisId]);
+  const gradientStops = useMemo(() => {
+    if (!gradient || !gradientScale) return undefined;
+    const domain = {
+      min: gradientScale.domain[0],
+      max: gradientScale.domain[1]
+    };
+    return getGradientStops(gradient.stops, domain);
+  }, [gradient, gradientScale]);
+
+  // Evaluate gradient color on UI thread
+  const color = useDerivedValue(() => {
+    'worklet';
+
+    // Evaluate gradient if present
+    var _series$color;
+    if (gradient && gradientScale && gradientStops) {
+      var _gradient$axis;
+      const axis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
+      const dataValue = axis === 'x' ? dataX.value : dataY.value;
+      if (dataValue !== undefined) {
+        const evaluatedColor = evaluateGradientAtValue(gradientStops, dataValue, gradientScale);
+        if (evaluatedColor) {
+          return evaluatedColor;
+        }
+      }
+    }
+
+    // Fallback to series color
+    return (_series$color = series == null ? void 0 : series.color) != null ? _series$color : theme.color.fgPrimary;
+  }, [gradient, gradientScale, gradientStops, dataX, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary]);
+  return /*#__PURE__*/_jsx(BeaconComponent, {
+    ref: beaconRef,
+    animate: animate,
+    color: color,
+    dataX: dataX,
+    dataY: dataY,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: seriesId,
+    transitions: transitions
+  });
+});
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    seriesIds,
+    idlePulse,
+    transitions,
+    BeaconComponent = DefaultScrubberBeacon
+  } = _ref2;
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXAxis,
+    series,
+    dataLength,
+    animate
+  } = useCartesianChartContext();
+  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef == null || beaconRef.pulse();
+      });
+    }
+  }));
+  const filteredSeries = useMemo(() => {
+    var _series$filter;
+    return (_series$filter = series == null ? void 0 : series.filter(s => seriesIds.includes(s.id))) != null ? _series$filter : [];
+  }, [series, seriesIds]);
+  const dataIndex = useDerivedValue(() => {
+    var _scrubberPosition$val;
+    return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
+  }, [scrubberPosition, dataLength]);
+  const dataX = useDerivedValue(() => {
+    // Convert index to actual x value if axis has data
+    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = xAxis.data[dataIndex.value];
+      return typeof dataValue === 'string' ? dataIndex.value : dataValue;
+    }
+    return dataIndex.value;
+  }, [xAxis, dataIndex]);
+  const isIdle = useDerivedValue(() => {
+    return scrubberPosition.value === undefined;
+  }, [scrubberPosition]);
+  const createBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+  return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
+    BeaconComponent: BeaconComponent,
+    animate: animate,
+    beaconRef: createBeaconRef(s.id),
+    dataIndex: dataIndex,
+    dataX: dataX,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: s.id,
+    transitions: transitions
+  }, s.id));
+}));

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -0,0 +1,185 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { useCartesianChartContext } from '../ChartProvider';
+import { applySerializableScale, useScrubberContext } from '../utils';
+import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PositionedLabel = /*#__PURE__*/memo(_ref => {
+  let {
+    index,
+    positions,
+    position,
+    label,
+    color,
+    seriesId,
+    onDimensionsChange,
+    BeaconLabelComponent,
+    labelHorizontalOffset,
+    labelFont
+  } = _ref;
+  const opacity = useDerivedValue(() => positions.value[index] !== null ? 1 : 0, [positions, index]);
+  const x = useDerivedValue(() => {
+    var _positions$value$inde, _positions$value$inde2;
+    return (_positions$value$inde = (_positions$value$inde2 = positions.value[index]) == null ? void 0 : _positions$value$inde2.x) != null ? _positions$value$inde : 0;
+  }, [positions, index]);
+  const y = useDerivedValue(() => {
+    var _positions$value$inde3, _positions$value$inde4;
+    return (_positions$value$inde3 = (_positions$value$inde4 = positions.value[index]) == null ? void 0 : _positions$value$inde4.y) != null ? _positions$value$inde3 : 0;
+  }, [positions, index]);
+  const dx = useDerivedValue(() => {
+    return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
+  }, [position, labelHorizontalOffset]);
+  const horizontalAlignment = useDerivedValue(() => position.value === 'right' ? 'left' : 'right', [position]);
+  return /*#__PURE__*/_jsx(BeaconLabelComponent, {
+    color: color,
+    dx: dx,
+    font: labelFont,
+    horizontalAlignment: horizontalAlignment,
+    label: label,
+    onDimensionsChange: d => onDimensionsChange(seriesId, d),
+    opacity: opacity,
+    seriesId: seriesId,
+    x: x,
+    y: y
+  });
+});
+export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
+  let {
+    labels,
+    labelMinGap = 4,
+    labelHorizontalOffset = 16,
+    labelFont,
+    BeaconLabelComponent = DefaultScrubberBeaconLabel
+  } = _ref2;
+  const {
+    getSeries,
+    getSeriesData,
+    getXSerializableScale,
+    getYSerializableScale,
+    getXAxis,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const [labelDimensions, setLabelDimensions] = useState({});
+  const handleDimensionsChange = useCallback((id, dimensions) => {
+    setLabelDimensions(prev => {
+      const existing = prev[id];
+      if (existing && existing.width === dimensions.width && existing.height === dimensions.height) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        [id]: dimensions
+      });
+    });
+  }, []);
+  const seriesInfo = useMemo(() => {
+    return labels.map(label => {
+      const series = getSeries(label.seriesId);
+      if (!series) return null;
+      const sourceData = getSeriesData(label.seriesId);
+      const yScale = getYSerializableScale(series.yAxisId);
+      return {
+        seriesId: label.seriesId,
+        sourceData,
+        yScale
+      };
+    }).filter(info => info !== null);
+  }, [labels, getSeries, getSeriesData, getYSerializableScale]);
+  const xScale = getXSerializableScale();
+  const xAxis = getXAxis();
+  const dataIndex = useDerivedValue(() => {
+    var _scrubberPosition$val;
+    return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
+  }, [scrubberPosition, dataLength]);
+  const dataX = useDerivedValue(() => {
+    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = xAxis.data[dataIndex.value];
+      return typeof dataValue === 'string' ? dataIndex.value : dataValue;
+    }
+    return dataIndex.value;
+  }, [xAxis, dataIndex]);
+  const allLabelPositions = useDerivedValue(() => {
+    const sharedPixelX = dataX.value !== undefined && xScale ? applySerializableScale(dataX.value, xScale) : 0;
+    const desiredPositions = seriesInfo.map(info => {
+      let dataY;
+      if (xScale && info.yScale) {
+        if (info.sourceData && dataIndex.value !== undefined && dataIndex.value >= 0 && dataIndex.value < info.sourceData.length) {
+          const dataValue = info.sourceData[dataIndex.value];
+          if (Array.isArray(dataValue)) {
+            const validValues = dataValue.filter(val => val !== null);
+            if (validValues.length >= 1) {
+              dataY = validValues[validValues.length - 1];
+            }
+          }
+        }
+      }
+      if (dataY !== undefined && info.yScale) {
+        return {
+          seriesId: info.seriesId,
+          x: sharedPixelX,
+          desiredY: applySerializableScale(dataY, info.yScale)
+        };
+      }
+
+      // Return null for invalid data
+      return null;
+    });
+    const maxLabelHeight = Math.max(...Object.values(labelDimensions).map(dim => dim.height));
+    const maxLabelWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+    const validPositions = desiredPositions.filter(pos => pos !== null);
+
+    // Convert to LabelDimension format expected by utility
+    const dimensions = validPositions.map(pos => {
+      var _trackedDimensions$wi, _trackedDimensions$he;
+      const trackedDimensions = labelDimensions[pos.seriesId];
+      return {
+        seriesId: pos.seriesId,
+        width: (_trackedDimensions$wi = trackedDimensions == null ? void 0 : trackedDimensions.width) != null ? _trackedDimensions$wi : maxLabelWidth,
+        height: (_trackedDimensions$he = trackedDimensions == null ? void 0 : trackedDimensions.height) != null ? _trackedDimensions$he : maxLabelHeight,
+        preferredX: pos.x,
+        preferredY: pos.desiredY
+      };
+    });
+
+    // Calculate Y positions with collision resolution for valid positions only
+    const yPositions = calculateLabelYPositions(dimensions, drawingArea, maxLabelHeight, labelMinGap);
+
+    // Return all positions (including null ones)
+    return desiredPositions.map(pos => {
+      var _yPositions$get;
+      if (!pos) return null;
+      return {
+        seriesId: pos.seriesId,
+        x: pos.x,
+        y: (_yPositions$get = yPositions.get(pos.seriesId)) != null ? _yPositions$get : pos.desiredY
+      };
+    });
+  }, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, labelMinGap]);
+  const currentPosition = useDerivedValue(() => {
+    const pixelX = dataX.value !== undefined && xScale ? applySerializableScale(dataX.value, xScale) : 0;
+    const maxWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+    const position = getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset);
+    return position;
+  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset]);
+  return seriesInfo.map((info, index) => {
+    const labelInfo = labels.find(label => label.seriesId === info.seriesId);
+    if (!labelInfo) return;
+    return /*#__PURE__*/_jsx(PositionedLabel, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      color: labelInfo.color,
+      index: index,
+      label: labelInfo.label,
+      labelFont: labelFont,
+      labelHorizontalOffset: labelHorizontalOffset,
+      onDimensionsChange: handleDimensionsChange,
+      position: currentPosition,
+      positions: allLabelPositions,
+      seriesId: info.seriesId
+    }, info.seriesId);
+  });
+});

package/esm/chart/scrubber/ScrubberProvider.js

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from 'react';
+import { Platform } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+import { useCartesianChartContext } from '../ChartProvider';
+import { invertSerializableScale, ScrubberContext } from '../utils';
+import { getPointOnSerializableScale } from '../utils/point';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component which encapsulates the ScrubberContext.
+ * It depends on a ChartContext in order to provide accurate touch tracking.
+ */
+export const ScrubberProvider = _ref => {
+  let {
+    children,
+    enableScrubbing,
+    onScrubberPositionChange,
+    allowOverflowGestures
+  } = _ref;
+  const chartContext = useCartesianChartContext();
+  if (!chartContext) {
+    throw new Error('ScrubberProvider must be used within a ChartContext');
+  }
+  const {
+    getXSerializableScale,
+    getXAxis
+  } = chartContext;
+  const scrubberPosition = useSharedValue(undefined);
+  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const getDataIndexFromX = useCallback(touchX => {
+    'worklet';
+
+    if (!xScale || !xAxis) return 0;
+    if (xScale.type === 'band') {
+      const [domainMin, domainMax] = xScale.domain;
+      const categoryCount = domainMax - domainMin + 1;
+      let closestIndex = 0;
+      let closestDistance = Infinity;
+      for (let i = 0; i < categoryCount; i++) {
+        const xPos = getPointOnSerializableScale(i, xScale);
+        if (xPos !== undefined) {
+          const distance = Math.abs(touchX - xPos);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = i;
+          }
+        }
+      }
+      return closestIndex;
+    } else {
+      // For numeric scales with axis data, find the nearest data point
+      const axisData = xAxis.data;
+      if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
+        // We have numeric axis data - find the closest data point
+        const numericData = axisData;
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+        for (let i = 0; i < numericData.length; i++) {
+          const xValue = numericData[i];
+          const xPos = getPointOnSerializableScale(xValue, xScale);
+          if (xPos !== undefined) {
+            const distance = Math.abs(touchX - xPos);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = i;
+            }
+          }
+        }
+        return closestIndex;
+      } else {
+        var _domain$min, _domain$max;
+        const xValue = invertSerializableScale(touchX, xScale);
+        const dataIndex = Math.round(xValue);
+        const domain = xAxis.domain;
+        return Math.max((_domain$min = domain.min) != null ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) != null ? _domain$max : 0));
+      }
+    }
+  }, [xAxis, xScale]);
+  const handleStartEndHaptics = useCallback(() => {
+    void Haptics.lightImpact();
+  }, []);
+  useAnimatedReaction(() => scrubberPosition.value, (currentValue, previousValue) => {
+    // Confirm changes here and inside of our gesture handler before calling JS thread
+    // To prevent any rerenders
+    if (onScrubberPositionChange !== undefined && currentValue !== previousValue) {
+      runOnJS(onScrubberPositionChange)(currentValue);
+    }
+  }, [onScrubberPositionChange]);
+
+  // Create the long press pan gesture
+  const longPressGesture = useMemo(() => Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
+    runOnJS(handleStartEndHaptics)();
+
+    // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
+    if (Platform.OS === 'android') {
+      const newScrubberPosition = getDataIndexFromX(event.x);
+      if (newScrubberPosition !== scrubberPosition.value) {
+        scrubberPosition.value = newScrubberPosition;
+      }
+    }
+  }).onUpdate(function onUpdate(event) {
+    const newScrubberPosition = getDataIndexFromX(event.x);
+    if (newScrubberPosition !== scrubberPosition.value) {
+      scrubberPosition.value = newScrubberPosition;
+    }
+  }).onEnd(function onEnd() {
+    if (enableScrubbing) {
+      runOnJS(handleStartEndHaptics)();
+      scrubberPosition.value = undefined;
+    }
+  }).onTouchesCancelled(function onTouchesCancelled() {
+    if (enableScrubbing) {
+      scrubberPosition.value = undefined;
+    }
+  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromX, scrubberPosition, enableScrubbing]);
+  const contextValue = useMemo(() => ({
+    enableScrubbing: !!enableScrubbing,
+    scrubberPosition
+  }), [enableScrubbing, scrubberPosition]);
+  const content = /*#__PURE__*/_jsx(ScrubberContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+
+  // Wrap with gesture handler only if scrubbing is enabled
+  if (enableScrubbing) {
+    return /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: longPressGesture,
+      children: content
+    });
+  }
+  return content;
+};

package/esm/chart/scrubber/index.js

@@ -0,0 +1,4 @@
+export * from './DefaultScrubberBeacon';
+export * from './DefaultScrubberBeaconLabel';
+export * from './DefaultScrubberLabel';
+export * from './Scrubber';