@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

package/esm/chart/scrubber/Scrubber.js

@@ -1,10 +1,12 @@
+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 React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
-import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } 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 { defaultAccessoryEnterTransition, getPointOnSerializableScale, getTransition, useScrubberContext } from '../utils';
+import { buildTransition } from '../utils/transition';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
@@ -16,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     seriesIds,
+    hideBeaconLabels,
     hideLine,
     label,
     lineStroke,
@@ -28,11 +31,14 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     overlayOffset = 2,
     beaconLabelMinGap,
     beaconLabelHorizontalOffset,
+    beaconLabelPreferredSide,
     labelFont,
     labelBoundsInset,
     beaconLabelFont,
     idlePulse,
-    beaconTransitions
+    beaconTransitions,
+    transitions = beaconTransitions,
+    beaconStroke
   } = _ref;
   const theme = useTheme();
   const beaconGroupRef = React.useRef(null);
@@ -40,28 +46,23 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXSerializableScale,
+    getYSerializableScale,
     getXAxis,
+    getYAxis,
     series,
     drawingArea,
     animate,
     dataLength
   } = useCartesianChartContext();
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
+  const indexScale = useMemo(() => categoryAxisIsX ? getXSerializableScale() : getYSerializableScale(), [categoryAxisIsX, getXSerializableScale, getYSerializableScale]);
 
   // 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: () => {
@@ -80,27 +81,43 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     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;
+  const dataValue = useDerivedValue(() => {
+    if (indexAxis != null && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex.value] !== undefined) {
+      const axisValue = indexAxis.data[dataIndex.value];
+      return typeof axisValue === 'string' ? dataIndex.value : axisValue;
     }
     return dataIndex.value;
-  }, [xAxis, dataIndex]);
+  }, [indexAxis, dataIndex]);
   const lineOpacity = useDerivedValue(() => {
     return scrubberPosition.value !== undefined ? 1 : 0;
   }, [scrubberPosition]);
   const overlayOpacity = useDerivedValue(() => {
     return scrubberPosition.value !== undefined ? 0.8 : 0;
   }, [scrubberPosition]);
+  const pixelPosition = useDerivedValue(() => {
+    if (dataValue.value === undefined || !indexScale) return undefined;
+    return getPointOnSerializableScale(dataValue.value, indexScale);
+  }, [dataValue, indexScale]);
   const overlayWidth = useDerivedValue(() => {
-    const pixelX = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
-    return drawingArea.x + drawingArea.width - pixelX + overlayOffset;
-  }, [dataX, xScale]);
+    var _pixelPosition$value;
+    const pixel = (_pixelPosition$value = pixelPosition.value) != null ? _pixelPosition$value : 0;
+    return categoryAxisIsX ? drawingArea.x + drawingArea.width - pixel + overlayOffset : drawingArea.width + overlayOffset * 2;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
+  const overlayHeight = useDerivedValue(() => {
+    var _pixelPosition$value2;
+    const pixel = (_pixelPosition$value2 = pixelPosition.value) != null ? _pixelPosition$value2 : 0;
+    return categoryAxisIsX ? drawingArea.height + overlayOffset * 2 : drawingArea.y + drawingArea.height - pixel + overlayOffset;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
   const overlayX = useDerivedValue(() => {
-    const xValue = dataX.value !== undefined && xScale ? getPointOnSerializableScale(dataX.value, xScale) : 0;
-    return xValue;
-  }, [dataX, xScale]);
+    var _pixelPosition$value3;
+    const pixel = (_pixelPosition$value3 = pixelPosition.value) != null ? _pixelPosition$value3 : 0;
+    return categoryAxisIsX ? pixel : drawingArea.x - overlayOffset;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
+  const overlayY = useDerivedValue(() => {
+    var _pixelPosition$value4;
+    const pixel = (_pixelPosition$value4 = pixelPosition.value) != null ? _pixelPosition$value4 : 0;
+    return categoryAxisIsX ? drawingArea.y - overlayOffset : pixel;
+  }, [pixelPosition, categoryAxisIsX, drawingArea, overlayOffset]);
   const resolvedLabelValue = useSharedValue('');
   const updateResolvedLabel = useCallback(index => {
     if (!label) {
@@ -129,38 +146,53 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       color: s.color
     }))) != null ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
-  if (!xScale) return;
+  const showBeaconLabels = !hideBeaconLabels && categoryAxisIsX && beaconLabels.length > 0;
+  const isReady = !!indexScale;
+  const groupEnterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
+  useEffect(() => {
+    if (animate && isReady) {
+      scrubberOpacity.value = buildTransition(1, groupEnterTransition);
+    }
+  }, [animate, isReady, scrubberOpacity, groupEnterTransition]);
+  if (!isReady) return;
   return /*#__PURE__*/_jsxs(Group, {
     opacity: scrubberOpacity,
     children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
       color: theme.color.bg,
-      height: drawingArea.height + overlayOffset * 2,
+      height: overlayHeight,
       opacity: overlayOpacity,
       width: overlayWidth,
       x: overlayX,
-      y: drawingArea.y - overlayOffset
-    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, {
+      y: overlayY
+    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, _extends({
       LabelComponent: LabelComponent,
-      LineComponent: LineComponent,
-      dataX: dataX,
+      LineComponent: LineComponent
+    }, categoryAxisIsX ? {
+      dataX: dataValue
+    } : {
+      dataY: dataValue
+    }, {
       label: resolvedLabelValue,
       labelBoundsInset: labelBoundsInset,
       labelElevated: labelElevated,
       labelFont: labelFont,
       opacity: lineOpacity,
       stroke: lineStroke
-    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+    })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
       ref: beaconGroupRef,
       BeaconComponent: BeaconComponent,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
-      transitions: beaconTransitions
-    }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      stroke: beaconStroke,
+      transitions: transitions
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,
       labelMinGap: beaconLabelMinGap,
-      labels: beaconLabels
+      labelPreferredSide: beaconLabelPreferredSide,
+      labels: beaconLabels,
+      transitions: transitions
     })]
   });
 }));

package/esm/chart/scrubber/ScrubberAccessibilityView.js

@@ -0,0 +1,177 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useScreenReaderStatus } from '@coinbase/cds-mobile/hooks/useScreenReaderStatus';
+import { useCartesianChartContext } from '../ChartProvider';
+import { useScrubberContext } from '../utils';
+import { getPointOnSerializableScale } from '../utils/point';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const normalizeScrubberAccessibilityStep = function (step, defaultStep) {
+  if (defaultStep === void 0) {
+    defaultStep = 1;
+  }
+  const resolvedDefaultStep = Number.isFinite(defaultStep) ? Math.max(1, Math.floor(defaultStep)) : 1;
+  if (step === undefined || !Number.isFinite(step)) {
+    return resolvedDefaultStep;
+  }
+  return Math.max(1, Math.floor(step));
+};
+const getScrubberSampledIndices = (dataLength, step) => {
+  if (dataLength <= 0) return [];
+  const lastIndex = dataLength - 1;
+  if (lastIndex === 0) return [0];
+  const normalizedStep = Math.max(1, Math.floor(step));
+  const sampledIndices = [0];
+  for (let dataIndex = normalizedStep; dataIndex < lastIndex; dataIndex += normalizedStep) {
+    sampledIndices.push(dataIndex);
+  }
+  sampledIndices.push(lastIndex);
+  return sampledIndices;
+};
+const getCategoryValueForIndex = (index, scale, axis) => {
+  if (scale.type === 'band') {
+    return index;
+  }
+  const axisData = axis == null ? void 0 : axis.data;
+  if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
+    var _numericData$index;
+    const numericData = axisData;
+    return (_numericData$index = numericData[index]) != null ? _numericData$index : index;
+  }
+  return index;
+};
+const getScrubberSegmentWeights = function (sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, orientation) {
+  if (orientation === void 0) {
+    orientation = 'horizontal';
+  }
+  const dimensionSize = orientation === 'horizontal' ? drawingArea.width : drawingArea.height;
+  const dimensionStart = orientation === 'horizontal' ? drawingArea.x : drawingArea.y;
+  const dimensionEnd = dimensionStart + dimensionSize;
+  if (sampledIndices.length === 0 || !categoryScale || !categoryAxis || dimensionSize <= 0) {
+    const segmentWeights = sampledIndices.map((index, position) => {
+      var _sampledIndices;
+      const nextIndex = (_sampledIndices = sampledIndices[position + 1]) != null ? _sampledIndices : dataLength;
+      return Math.max(1, nextIndex - index);
+    });
+    return {
+      leading: 0,
+      segmentWeights,
+      trailing: 0
+    };
+  }
+  if (categoryScale.type === 'band') {
+    const bandScale = categoryScale;
+    const segmentWeights = [];
+    let leading = 0;
+    let trailing = 0;
+    for (let i = 0; i < sampledIndices.length; i++) {
+      const categoryValue = getCategoryValueForIndex(sampledIndices[i], categoryScale, categoryAxis);
+      const posStart = getPointOnSerializableScale(categoryValue, bandScale, 'stepStart');
+      const posEnd = getPointOnSerializableScale(categoryValue, bandScale, 'stepEnd');
+      segmentWeights.push(Math.max(1, Math.abs(posEnd - posStart)));
+      if (i === 0) {
+        leading = Math.max(0, Math.min(posStart, posEnd) - dimensionStart);
+      }
+      if (i === sampledIndices.length - 1) {
+        trailing = Math.max(0, dimensionEnd - Math.max(posStart, posEnd));
+      }
+    }
+    return {
+      leading,
+      segmentWeights,
+      trailing
+    };
+  }
+  const segmentWeights = sampledIndices.map((index, position) => {
+    const prevIndex = position > 0 ? sampledIndices[position - 1] : -1;
+    const categoryValue = getCategoryValueForIndex(index, categoryScale, categoryAxis);
+    const posEnd = getPointOnSerializableScale(categoryValue, categoryScale);
+    const posStart = prevIndex < 0 ? dimensionStart : getPointOnSerializableScale(getCategoryValueForIndex(prevIndex, categoryScale, categoryAxis), categoryScale);
+    return Math.max(1, Math.abs(posEnd - posStart));
+  });
+  return {
+    leading: 0,
+    segmentWeights,
+    trailing: 0
+  };
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  segments: {
+    flex: 1
+  }
+});
+export const ScrubberAccessibilityView = /*#__PURE__*/memo(_ref => {
+  let {
+    accessibilityLabel,
+    accessibilityStep
+  } = _ref;
+  const isScreenReaderEnabled = useScreenReaderStatus();
+  const {
+    dataLength,
+    drawingArea,
+    layout,
+    getXAxis,
+    getYAxis,
+    getXSerializableScale,
+    getYSerializableScale
+  } = useCartesianChartContext();
+  const {
+    enableScrubbing
+  } = useScrubberContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const categoryAxis = useMemo(() => isHorizontalLayout ? getYAxis() : getXAxis(), [isHorizontalLayout, getXAxis, getYAxis]);
+  const categoryScale = useMemo(() => isHorizontalLayout ? getYSerializableScale() : getXSerializableScale(), [isHorizontalLayout, getXSerializableScale, getYSerializableScale]);
+  const resolvedStep = useMemo(() => normalizeScrubberAccessibilityStep(accessibilityStep), [accessibilityStep]);
+  const sampledIndices = useMemo(() => getScrubberSampledIndices(dataLength, resolvedStep), [dataLength, resolvedStep]);
+  const segmentOrientation = isHorizontalLayout ? 'vertical' : 'horizontal';
+  const {
+    leading,
+    segmentWeights,
+    trailing
+  } = useMemo(() => getScrubberSegmentWeights(sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, segmentOrientation), [sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, segmentOrientation]);
+  const sampledSegments = useMemo(() => {
+    if (accessibilityLabel === undefined) return [];
+    return sampledIndices.map((index, position) => {
+      var _segmentWeights$posit;
+      const weight = (_segmentWeights$posit = segmentWeights[position]) != null ? _segmentWeights$posit : 1;
+      const pointLabel = accessibilityLabel(index);
+      return {
+        index,
+        weight,
+        accessibilityLabel: pointLabel || "Data point " + (index + 1)
+      };
+    });
+  }, [accessibilityLabel, sampledIndices, segmentWeights]);
+  const getSegmentStyle = useCallback(weight => ({
+    flex: weight
+  }), []);
+  const overlayStyle = useMemo(() => ({
+    left: drawingArea.x,
+    top: drawingArea.y,
+    width: drawingArea.width,
+    height: drawingArea.height
+  }), [drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const shouldHide = useMemo(() => !isScreenReaderEnabled || !enableScrubbing || !accessibilityLabel || dataLength <= 0 || drawingArea.width <= 0 || drawingArea.height <= 0 || sampledSegments.length === 0, [isScreenReaderEnabled, enableScrubbing, accessibilityLabel, dataLength, drawingArea.width, drawingArea.height, sampledSegments.length]);
+  if (shouldHide) return;
+  const segmentsFlexDirection = isHorizontalLayout ? 'column' : 'row';
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [styles.container, overlayStyle],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.segments, {
+        flexDirection: segmentsFlexDirection
+      }],
+      children: [leading > 0 && /*#__PURE__*/_jsx(View, {
+        style: getSegmentStyle(leading)
+      }), sampledSegments.map(segment => /*#__PURE__*/_jsx(Pressable, {
+        accessible: true,
+        accessibilityLabel: segment.accessibilityLabel,
+        style: getSegmentStyle(segment.weight)
+      }, segment.index)), trailing > 0 && /*#__PURE__*/_jsx(View, {
+        style: getSegmentStyle(trailing)
+      })]
+    })
+  });
+});

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -12,15 +12,17 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   let {
     seriesId,
     dataIndex,
-    dataX,
+    dataIndexValue,
     isIdle,
     BeaconComponent,
     idlePulse,
     animate,
     transitions,
-    beaconRef
+    beaconRef,
+    stroke
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
@@ -48,10 +50,10 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   // 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);
+    const scale = gradient.axis === 'x' ? getXScale(series == null ? void 0 : series.xAxisId) : getYScale(series == null ? void 0 : series.yAxisId);
     if (!scale) return undefined;
     return convertToSerializableScale(scale);
-  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.yAxisId]);
+  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.xAxisId, series == null ? void 0 : series.yAxisId]);
   const gradientStops = useMemo(() => {
     if (!gradient || !gradientScale) return undefined;
     const domain = {
@@ -69,28 +71,29 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     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;
-        }
+      const categoryAxisIsX = layout !== 'horizontal';
+      const gradientAxis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
+      const valueForAxis = gradientAxis === 'x' ? categoryAxisIsX ? dataIndexValue.value : dataY.value : categoryAxisIsX ? dataY.value : dataIndexValue.value;
+      const evaluatedColor = evaluateGradientAtValue(gradientStops, valueForAxis, 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]);
+  }, [gradient, gradientScale, gradientStops, dataIndexValue, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary, layout]);
+  const categoryAxisIsX = layout !== 'horizontal';
   return /*#__PURE__*/_jsx(BeaconComponent, {
     ref: beaconRef,
     animate: animate,
     color: color,
-    dataX: dataX,
-    dataY: dataY,
+    dataX: categoryAxisIsX ? dataIndexValue : dataY,
+    dataY: categoryAxisIsX ? dataY : dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
+    stroke: stroke,
     transitions: transitions
   });
 });
@@ -99,19 +102,23 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     seriesIds,
     idlePulse,
     transitions,
-    BeaconComponent = DefaultScrubberBeacon
+    BeaconComponent = DefaultScrubberBeacon,
+    stroke
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXAxis,
+    getYAxis,
     series,
     dataLength,
     animate
   } = useCartesianChartContext();
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
 
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
@@ -129,14 +136,14 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     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];
+  const dataIndexValue = useDerivedValue(() => {
+    // Convert index to actual category-axis value if axis has data.
+    if (indexAxis != null && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = indexAxis.data[dataIndex.value];
       return typeof dataValue === 'string' ? dataIndex.value : dataValue;
     }
     return dataIndex.value;
-  }, [xAxis, dataIndex]);
+  }, [indexAxis, dataIndex]);
   const isIdle = useDerivedValue(() => {
     return scrubberPosition.value === undefined;
   }, [scrubberPosition]);
@@ -152,10 +159,11 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     animate: animate,
     beaconRef: createBeaconRef(s.id),
     dataIndex: dataIndex,
-    dataX: dataX,
+    dataIndexValue: dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,
+    stroke: stroke,
     transitions: transitions
   }, s.id));
 }));

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -1,9 +1,10 @@
 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 { useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useCartesianChartContext } from '../ChartProvider';
-import { applySerializableScale, useScrubberContext } from '../utils';
+import { applySerializableScale, unwrapAnimatedValue, useScrubberContext } from '../utils';
 import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PositionedLabel = /*#__PURE__*/memo(_ref => {
@@ -11,6 +12,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     index,
     positions,
     position,
+    isIdle,
+    updateTransition,
     label,
     color,
     seriesId,
@@ -24,10 +27,25 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     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(() => {
+  const targetY = 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 idleAnimatedY = useSharedValue(null);
+  useAnimatedReaction(() => ({
+    y: targetY.value,
+    idle: unwrapAnimatedValue(isIdle)
+  }), (current, previous) => {
+    // Only animate idle-to-idle updates, immediately set the value for other changes.
+    if (previous != null && previous.idle && current.idle) {
+      idleAnimatedY.value = buildTransition(current.y, updateTransition);
+    } else {
+      idleAnimatedY.value = current.y;
+    }
+  }, [updateTransition]);
+
+  // When scrubbing, use the targetY value, when idle, use the idleAnimatedY value.
+  const y = useDerivedValue(() => unwrapAnimatedValue(isIdle) && idleAnimatedY.value !== null ? idleAnimatedY.value : targetY.value, [isIdle, idleAnimatedY, targetY]);
   const dx = useDerivedValue(() => {
     return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
   }, [position, labelHorizontalOffset]);
@@ -51,7 +69,9 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelMinGap = 4,
     labelHorizontalOffset = 16,
     labelFont,
-    BeaconLabelComponent = DefaultScrubberBeaconLabel
+    labelPreferredSide = 'right',
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions
   } = _ref2;
   const {
     getSeries,
@@ -60,11 +80,16 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     getYSerializableScale,
     getXAxis,
     drawingArea,
-    dataLength
+    dataLength,
+    animate
   } = useCartesianChartContext();
   const {
     scrubberPosition
   } = useScrubberContext();
+  const isIdle = useDerivedValue(() => {
+    return scrubberPosition.value === undefined;
+  }, [scrubberPosition]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const [labelDimensions, setLabelDimensions] = useState({});
   const handleDimensionsChange = useCallback((id, dimensions) => {
     setLabelDimensions(prev => {
@@ -163,9 +188,9 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
   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);
+    const position = getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset, labelPreferredSide);
     return position;
-  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset]);
+  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset, labelPreferredSide]);
   return seriesInfo.map((info, index) => {
     const labelInfo = labels.find(label => label.seriesId === info.seriesId);
     if (!labelInfo) return;
@@ -173,13 +198,15 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       BeaconLabelComponent: BeaconLabelComponent,
       color: labelInfo.color,
       index: index,
+      isIdle: isIdle,
       label: labelInfo.label,
       labelFont: labelFont,
       labelHorizontalOffset: labelHorizontalOffset,
       onDimensionsChange: handleDimensionsChange,
       position: currentPosition,
       positions: allLabelPositions,
-      seriesId: info.seriesId
+      seriesId: info.seriesId,
+      updateTransition: updateTransition
     }, info.seriesId);
   });
 });