@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,44 @@
+const _excluded = ["dx", "dy"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DefaultReferenceLineLabel } from '../line';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultScrubberLabel is the default label component for the scrubber line.
+ * It will automatically add padding around the label when elevated to fit within chart bounds to prevent shadow from being cutoff.
+ * In vertical layout, it positions the label above the scrubber line.
+ * In horizontal layout, it centers the label in the chart's right inset.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      dx: dxProp,
+      dy: dyProp
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    drawingArea,
+    layout,
+    width: chartWidth
+  } = useCartesianChartContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const dx = useMemo(() => {
+    if (dxProp !== undefined) return dxProp;
+    if (isHorizontalLayout) {
+      const drawingAreaEnd = drawingArea.x + drawingArea.width;
+      const rightOffset = chartWidth - drawingAreaEnd;
+      return rightOffset / 2;
+    }
+    return 0;
+  }, [drawingArea.width, drawingArea.x, dxProp, isHorizontalLayout, chartWidth]);
+  const dy = useMemo(() => {
+    if (dyProp !== undefined) return dyProp;
+    if (isHorizontalLayout) return 0;
+    return -0.5 * drawingArea.y;
+  }, [dyProp, isHorizontalLayout, drawingArea.y]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({
+    dx: dx,
+    dy: dy
+  }, props));
+});

package/esm/visualizations/chart/scrubber/Scrubber.js

@@ -0,0 +1,200 @@
+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 } from 'react-native-reanimated';
+import { Group, Paint, Rect } from '@shopify/react-native-skia';
+import { useTheme } from '../../../index';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { defaultAccessoryEnterTransition, getPointOnSerializableScale, getTransition, useScrubberContext } from '../utils';
+import { buildTransition } from '../utils/transition';
+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,
+    hideBeaconLabels,
+    hideLine,
+    label,
+    lineStroke,
+    BeaconComponent = DefaultScrubberBeacon,
+    BeaconLabelComponent,
+    LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
+    hideOverlay,
+    overlayOffset = 2,
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    beaconLabelPreferredSide,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
+    idlePulse,
+    beaconTransitions,
+    transitions = beaconTransitions,
+    beaconStroke
+  } = _ref;
+  const theme = useTheme();
+  const beaconGroupRef = React.useRef(null);
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    layout,
+    getXSerializableScale,
+    getYSerializableScale,
+    getXAxis,
+    getYAxis,
+    series,
+    drawingArea,
+    animate,
+    dataLength
+  } = useCartesianChartContext();
+  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);
+
+  // 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 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;
+  }, [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(() => {
+    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(() => {
+    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) {
+      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]);
+  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, {
+    layer: /*#__PURE__*/_jsx(Paint, {
+      opacity: scrubberOpacity
+    }),
+    children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
+      color: theme.color.bg,
+      height: overlayHeight,
+      opacity: overlayOpacity,
+      width: overlayWidth,
+      x: overlayX,
+      y: overlayY
+    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, _extends({
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent
+    }, categoryAxisIsX ? {
+      dataX: dataValue
+    } : {
+      dataY: dataValue
+    }, {
+      label: resolvedLabelValue,
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
+      opacity: lineOpacity,
+      stroke: lineStroke
+    })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
+      transitions: transitions
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labelPreferredSide: beaconLabelPreferredSide,
+      labels: beaconLabels,
+      transitions: transitions
+    })]
+  });
+}));

package/esm/visualizations/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 '../../../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/visualizations/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,169 @@
+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 '../../../index';
+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,
+    dataIndexValue,
+    isIdle,
+    BeaconComponent,
+    idlePulse,
+    animate,
+    transitions,
+    beaconRef,
+    stroke
+  } = _ref;
+  const {
+    layout,
+    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(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.xAxisId, 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 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, 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: categoryAxisIsX ? dataIndexValue : dataY,
+    dataY: categoryAxisIsX ? dataY : dataIndexValue,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: seriesId,
+    stroke: stroke,
+    transitions: transitions
+  });
+});
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    seriesIds,
+    idlePulse,
+    transitions,
+    BeaconComponent = DefaultScrubberBeacon,
+    stroke
+  } = _ref2;
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    layout,
+    getXAxis,
+    getYAxis,
+    series,
+    dataLength,
+    animate
+  } = useCartesianChartContext();
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
+
+  // 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 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;
+  }, [indexAxis, 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,
+    dataIndexValue: dataIndexValue,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: s.id,
+    stroke: stroke,
+    transitions: transitions
+  }, s.id));
+}));