@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -0,0 +1,43 @@
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+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 } from 'react';
+import { useTheme } from '@coinbase/cds-mobile';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
+/**
+ * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon.
+ */
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background,
+      color,
+      elevated = true,
+      borderRadius = 4,
+      font = 'label1',
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label
+    } = _ref,
+    chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(ChartText, _extends({
+    disableRepositioning: true,
+    background: background != null ? background : theme.color.bg,
+    borderRadius: borderRadius,
+    color: color != null ? color : theme.color.fgPrimary,
+    elevated: elevated,
+    font: font,
+    inset: inset,
+    verticalAlignment: verticalAlignment
+  }, chartTextProps, {
+    children: label
+  }));
+});

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,28 @@
+const _excluded = ["verticalAlignment", "dy", "boundsInset"];
+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 } 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.
+ * It will also center the label vertically with the top available area.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      verticalAlignment = 'middle',
+      dy,
+      boundsInset
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    drawingArea
+  } = useCartesianChartContext();
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({
+    boundsInset: boundsInset,
+    dy: dy != null ? dy : -0.5 * drawingArea.y,
+    verticalAlignment: verticalAlignment
+  }, props));
+});

package/esm/chart/scrubber/Scrubber.js

@@ -1,186 +1,172 @@
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { Animated } from 'react-native';
-import { useAnimatedProps, useSharedValue } from 'react-native-reanimated';
-import { G, Rect } from 'react-native-svg';
-import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+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 { useScrubberContext } from '../utils';
-import { ScrubberBeacon } from './ScrubberBeacon';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
-
-/**
- * Configuration for scrubber functionality across chart components.
- * Provides consistent API with smart defaults and component customization.
- */
-
+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)
- * with intelligent collision detection and consistent positioning.
+ * 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,
-    labelProps,
-    BeaconComponent = ScrubberBeacon,
-    LineComponent = ReferenceLine,
+    BeaconComponent = DefaultScrubberBeacon,
+    BeaconLabelComponent,
+    LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
     hideOverlay,
     overlayOffset = 2,
-    testID,
-    idlePulse
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    beaconLabelPreferredSide,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
+    idlePulse,
+    beaconTransitions,
+    transitions = beaconTransitions,
+    beaconStroke
   } = _ref;
   const theme = useTheme();
-  const ScrubberBeaconRefs = useRefMap();
-
-  // Animated values for overlay positions (using react-native Animated)
-  const overlayX = useRef(new Animated.Value(0)).current;
-  const overlayWidth = useRef(new Animated.Value(0)).current;
-
-  // Reanimated shared value for scrubber line
-  const scrubberLineX = useSharedValue(0);
+  const beaconGroupRef = React.useRef(null);
   const {
-    scrubberPosition: scrubberPosition
+    scrubberPosition
   } = useScrubberContext();
   const {
-    getXScale,
-    getYScale,
-    getSeriesData,
+    getXSerializableScale,
     getXAxis,
     series,
-    drawingArea
+    drawingArea,
+    animate,
+    dataLength
   } = useCartesianChartContext();
-  const getStackedSeriesData = getSeriesData; // getSeriesData now returns stacked data
+  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
 
-  // Animated props for scrubber line
-  const scrubberLineAnimatedProps = useAnimatedProps(() => ({
-    x1: scrubberLineX.value,
-    x2: scrubberLineX.value
-  }));
+  // Animation state for delayed scrubber rendering (matches web timing)
+  const scrubberOpacity = useSharedValue(animate ? 0 : 1);
 
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
     pulse: () => {
-      // Pulse all registered scrubber beacons
-      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
-        beaconRef == null || beaconRef.pulse();
-      });
+      var _beaconGroupRef$curre;
+      (_beaconGroupRef$curre = beaconGroupRef.current) == null || _beaconGroupRef$curre.pulse();
     }
   }));
-  const {
-    dataX,
-    dataIndex
-  } = useMemo(() => {
-    var _series$reduce;
-    const xScale = getXScale();
-    const xAxis = getXAxis();
-    if (!xScale) return {
-      dataX: undefined,
-      dataIndex: undefined
-    };
-    const maxDataLength = (_series$reduce = series == null ? void 0 : series.reduce((max, s) => {
-      var _seriesData$length;
-      const seriesData = getStackedSeriesData(s.id) || getSeriesData(s.id);
-      return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
-    }, 0)) != null ? _series$reduce : 0;
-    const dataIndex = scrubberPosition != null ? scrubberPosition : Math.max(0, maxDataLength - 1);
-
-    // Convert index to actual x value if axis has data
-    let dataX;
-    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
-      const dataValue = xAxis.data[dataIndex];
-      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
-    } else {
-      dataX = dataIndex;
+  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;
     }
-    return {
-      dataX,
-      dataIndex
-    };
-  }, [getXScale, getXAxis, series, scrubberPosition, getStackedSeriesData, getSeriesData]);
-  const beaconPositions = useMemo(() => {
-    var _series$filter$map$fi, _series$filter;
-    const xScale = getXScale();
-    if (!xScale || dataX === undefined || dataIndex === undefined) return [];
-    return (_series$filter$map$fi = series == null || (_series$filter = series.filter(s => {
-      if (seriesIds === undefined) return true;
-      return seriesIds.includes(s.id);
-    })) == null ? void 0 : _series$filter.map(s => {
-      const sourceData = getStackedSeriesData(s.id) || getSeriesData(s.id);
-      // Use dataIndex to get the y value from the series data array
-      const stuff = sourceData == null ? void 0 : sourceData[dataIndex];
-      let dataY;
-      if (Array.isArray(stuff)) {
-        dataY = stuff[stuff.length - 1];
-      } else if (typeof stuff === 'number') {
-        dataY = stuff;
-      }
-      if (dataY !== undefined) {
-        const resolvedLabel = typeof s.label === 'function' ? s.label(dataIndex) : s.label;
-        return {
-          x: dataX,
-          y: dataY,
-          label: resolvedLabel,
-          targetSeries: s
-        };
-      }
-    }).filter(beacon => beacon !== undefined)) != null ? _series$filter$map$fi : [];
-  }, [getXScale, dataX, dataIndex, series, seriesIds, getStackedSeriesData, getSeriesData]);
-  const createScrubberBeaconRef = useCallback(seriesId => {
-    return beaconRef => {
-      if (beaconRef) {
-        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
-      }
-    };
-  }, [ScrubberBeaconRefs]);
-  const defaultXScale = getXScale();
-  const pixelX = dataX !== undefined && defaultXScale ? defaultXScale(dataX) : undefined;
-  const memoizedScrubberLabel = useMemo(() => {
     if (typeof label === 'function') {
-      if (dataIndex === undefined) return undefined;
-      return label(dataIndex);
+      const result = label(index);
+      resolvedLabelValue.value = result != null ? result : '';
+    } else if (typeof label === 'string') {
+      resolvedLabelValue.value = label;
     }
-    return label;
-  }, [label, dataIndex]);
+  }, [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 isReady = !!xScale;
+  const groupEnterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
   useEffect(() => {
-    if (pixelX !== undefined) {
-      scrubberLineX.value = pixelX;
-      overlayX.setValue(pixelX);
-      overlayWidth.setValue(drawingArea.x + drawingArea.width - pixelX + overlayOffset);
+    if (animate && isReady) {
+      scrubberOpacity.value = buildTransition(1, groupEnterTransition);
     }
-  }, [pixelX, drawingArea, overlayOffset, scrubberLineX, overlayX, overlayWidth]);
-  if (!defaultXScale) return null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!hideOverlay && dataX !== undefined && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx(AnimatedRect, {
-      fill: theme.color.bg,
+  }, [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,
-      opacity: 0.8,
+      opacity: overlayOpacity,
       width: overlayWidth,
       x: overlayX,
       y: drawingArea.y - overlayOffset
-    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(LineComponent, {
+    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent,
       dataX: dataX,
-      label: memoizedScrubberLabel,
-      labelProps: labelProps,
+      label: resolvedLabelValue,
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
+      opacity: lineOpacity,
       stroke: lineStroke
-    }), beaconPositions.filter(beacon => beacon !== undefined).map(beacon => {
-      var _beacon$targetSeries;
-      return /*#__PURE__*/_jsx(G, {
-        "data-component": "scrubber-beacon",
-        children: /*#__PURE__*/_jsx(BeaconComponent, {
-          ref: createScrubberBeaconRef(beacon.targetSeries.id),
-          color: (_beacon$targetSeries = beacon.targetSeries) == null ? void 0 : _beacon$targetSeries.color,
-          dataX: beacon.x,
-          dataY: beacon.y,
-          idlePulse: idlePulse,
-          seriesId: beacon.targetSeries.id,
-          testID: testID ? testID + "-" + beacon.targetSeries.id + "-dot" : undefined
-        })
-      }, beacon.targetSeries.id);
+    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
+      transitions: transitions
+    }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labelPreferredSide: beaconLabelPreferredSide,
+      labels: beaconLabels,
+      transitions: transitions
     })]
   });
 }));

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,165 @@
+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,
+    stroke
+  } = _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,
+    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 {
+    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,
+    stroke: stroke,
+    transitions: transitions
+  }, s.id));
+}));