@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -1,44 +0,0 @@
-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/chart/scrubber/Scrubber.js

@@ -1,198 +0,0 @@
-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 { useTheme } from '@coinbase/cds-mobile';
-import { Group, Rect } from '@shopify/react-native-skia';
-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, {
-    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/chart/scrubber/ScrubberAccessibilityView.js

@@ -1,177 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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,
-    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));
-}));