@coinbase/cds-web-visualization 3.3.2 → 3.4.0-beta.10

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,155 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, projectPoint } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const radius = 5;
+const strokeWidth = 2;
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStart = 10;
+const pulseRadiusEnd = 15;
+const defaultPulseTransition = {
+  duration: 1.6,
+  ease: [0.0, 0.0, 0.0, 1.0]
+};
+const defaultPulseRepeatDelay = 0.4;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    transitions,
+    opacity = 1,
+    className,
+    style,
+    testID
+  } = _ref;
+  const [scope, animate] = useAnimate();
+  const {
+    getSeries,
+    getXScale,
+    getYScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const targetSeries = getSeries(seriesId);
+  const xScale = getXScale();
+  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
+  const color = useMemo(() => {
+    var _ref2;
+    return (_ref2 = colorProp !== null && colorProp !== void 0 ? colorProp : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
+  }, [colorProp, targetSeries]);
+  const updateTransition = useMemo(() => {
+    var _transitions$update;
+    return (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : defaultTransition;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update]);
+  const pulseTransition = useMemo(() => {
+    var _transitions$pulse;
+    return (_transitions$pulse = transitions === null || transitions === void 0 ? void 0 : transitions.pulse) !== null && _transitions$pulse !== void 0 ? _transitions$pulse : defaultPulseTransition;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay) !== null && _transitions$pulseRep !== void 0 ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay]);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) return;
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle and idlePulse is not enabled
+      if (isIdle && !idlePulse && scope.current) {
+        animate(scope.current, {
+          opacity: [pulseOpacityStart, pulseOpacityEnd],
+          r: [pulseRadiusStart, pulseRadiusEnd]
+        }, pulseTransition);
+      }
+    }
+  }), [isIdle, idlePulse, scope, animate, pulseTransition]);
+
+  // Create continuous pulse transition by repeating the base pulse transition with delay
+  const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
+    repeat: Infinity,
+    repeatDelay: pulseRepeatDelay
+  }), [pulseTransition, pulseRepeatDelay]);
+  const shouldPulse = isIdle && idlePulse;
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
+  if (!pixelCoordinate) return;
+  if (isIdle) {
+    return /*#__PURE__*/_jsxs("g", {
+      "data-testid": testID,
+      opacity: isWithinDrawingArea ? opacity : 0,
+      children: [/*#__PURE__*/_jsx(motion.g, {
+        animate: {
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        },
+        initial: false,
+        transition: updateTransition,
+        children: /*#__PURE__*/_jsx(motion.circle, {
+          ref: scope,
+          animate: shouldPulse ? {
+            opacity: [pulseOpacityStart, pulseOpacityEnd],
+            r: [pulseRadiusStart, pulseRadiusEnd],
+            transition: continuousPulseTransition
+          } : {
+            opacity: pulseOpacityEnd,
+            r: pulseRadiusStart
+          },
+          cx: 0,
+          cy: 0,
+          fill: color,
+          initial: {
+            opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
+            r: pulseRadiusStart
+          }
+        })
+      }), /*#__PURE__*/_jsx(motion.circle, {
+        animate: {
+          cx: pixelCoordinate.x,
+          cy: pixelCoordinate.y
+        },
+        className: className,
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: color,
+        initial: false,
+        r: radius,
+        stroke: "var(--color-bg)",
+        strokeWidth: strokeWidth,
+        style: style,
+        transition: updateTransition
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("g", {
+    "data-testid": testID,
+    opacity: isWithinDrawingArea ? opacity : 0,
+    children: /*#__PURE__*/_jsx("circle", {
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      r: radius,
+      stroke: "var(--color-bg)",
+      strokeWidth: strokeWidth,
+      style: style
+    })
+  });
+}));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -0,0 +1,46 @@
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { 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 (i.e. a point on the series pinned to the scrubber position).
+ */
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background = 'var(--color-bg',
+      color = 'var(--color-fgPrimary)',
+      elevated = true,
+      borderRadius = 4,
+      font = 'label1',
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label
+    } = _ref,
+    chartTextProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+    disableRepositioning: true,
+    background: background,
+    borderRadius: borderRadius,
+    color: color,
+    elevated: elevated,
+    font: font,
+    inset: inset,
+    verticalAlignment: verticalAlignment
+  }, chartTextProps), {}, {
+    children: label
+  }));
+});

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,30 @@
+const _excluded = ["verticalAlignment", "dy"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 center the label vertically with the top available area.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      verticalAlignment = 'middle',
+      dy
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    drawingArea
+  } = useCartesianChartContext();
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _objectSpread({
+    dy: dy !== null && dy !== void 0 ? dy : -0.5 * drawingArea.y,
+    verticalAlignment: verticalAlignment
+  }, props));
+});

package/esm/chart/scrubber/Scrubber.js

@@ -0,0 +1,189 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnScale, useScrubberContext } from '../utils';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { DefaultScrubberLabel } from './DefaultScrubberLabel';
+import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
+import { ScrubberBeaconLabelGroup } from './ScrubberBeaconLabelGroup';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unified component that manages all scrubber elements (beacons, line, labels).
+ */
+export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesIds,
+    hideLine,
+    label,
+    accessibilityLabel,
+    lineStroke,
+    BeaconComponent = DefaultScrubberBeacon,
+    BeaconLabelComponent,
+    LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
+    hideOverlay,
+    overlayOffset = 2,
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
+    testID,
+    idlePulse,
+    beaconTransitions,
+    styles,
+    classNames
+  } = _ref;
+  const beaconGroupRef = React.useRef(null);
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXScale,
+    getXAxis,
+    animate,
+    series,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      var _beaconGroupRef$curre;
+      (_beaconGroupRef$curre = beaconGroupRef.current) === null || _beaconGroupRef$curre === void 0 || _beaconGroupRef$curre.pulse();
+    }
+  }));
+  const filteredSeriesIds = useMemo(() => {
+    if (seriesIds === undefined) {
+      var _series$map;
+      return (_series$map = series === null || series === void 0 ? void 0 : series.map(s => s.id)) !== null && _series$map !== void 0 ? _series$map : [];
+    }
+    return seriesIds;
+  }, [series, seriesIds]);
+  const {
+    dataX,
+    dataIndex
+  } = useMemo(() => {
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale) return {
+      dataX: undefined,
+      dataIndex: undefined
+    };
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+
+    // Convert index to actual x value if axis has data
+    let dataX;
+    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
+    } else {
+      dataX = dataIndex;
+    }
+    return {
+      dataX,
+      dataIndex
+    };
+  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
+
+  // Compute resolved accessibility label
+  const resolvedAccessibilityLabel = useMemo(() => {
+    if (dataIndex === undefined) return undefined;
+
+    // If accessibilityLabel is provided, use it
+    if (accessibilityLabel) {
+      return typeof accessibilityLabel === 'function' ? accessibilityLabel(dataIndex) : accessibilityLabel;
+    }
+
+    // Otherwise, if label resolves to a string, use that
+    const resolvedLabel = typeof label === 'function' ? label(dataIndex) : label;
+    return typeof resolvedLabel === 'string' ? resolvedLabel : undefined;
+  }, [accessibilityLabel, label, dataIndex]);
+  const beaconLabels = useMemo(() => {
+    var _series$filter$filter;
+    return (_series$filter$filter = series === null || series === void 0 ? 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 !== void 0 ? _series$filter$filter : [];
+  }, [series, filteredSeriesIds]);
+
+  // Check if we have at least the default X scale
+  const defaultXScale = getXScale();
+  if (!defaultXScale) return null;
+  const pixelX = dataX !== undefined && defaultXScale ? getPointOnScale(dataX, defaultXScale) : undefined;
+  return /*#__PURE__*/_jsxs(motion.g, _objectSpread(_objectSpread({
+    "aria-atomic": "true",
+    "aria-label": resolvedAccessibilityLabel,
+    "aria-live": "polite",
+    "data-component": "scrubber-group",
+    "data-testid": testID,
+    role: "status"
+  }, animate ? {
+    animate: {
+      opacity: 1,
+      transition: {
+        duration: accessoryFadeTransitionDuration,
+        delay: accessoryFadeTransitionDelay
+      }
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: accessoryFadeTransitionDuration
+      }
+    },
+    initial: {
+      opacity: 0
+    }
+  } : {}), {}, {
+    children: [!hideOverlay && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx("rect", {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.overlay,
+      fill: "var(--color-bg)",
+      height: drawingArea.height + overlayOffset * 2,
+      opacity: 0.8,
+      style: styles === null || styles === void 0 ? void 0 : styles.overlay,
+      width: drawingArea.x + drawingArea.width - pixelX + overlayOffset,
+      x: pixelX,
+      y: drawingArea.y - overlayOffset
+    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent,
+      classNames: {
+        label: classNames === null || classNames === void 0 ? void 0 : classNames.line
+      },
+      dataX: dataX,
+      label: typeof label === 'function' ? label(dataIndex) : label,
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
+      stroke: lineStroke,
+      styles: {
+        label: styles === null || styles === void 0 ? void 0 : styles.line
+      }
+    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      style: styles === null || styles === void 0 ? void 0 : styles.beacon,
+      testID: testID,
+      transitions: beaconTransitions
+    }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labels: beaconLabels
+    })]
+  }));
+}));

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,166 @@
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientConfig, useScrubberContext } from '../utils';
+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,
+    transitions,
+    className,
+    style,
+    testID,
+    beaconRef
+  } = _ref;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const series = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
+  const gradient = series === null || series === void 0 ? void 0 : series.gradient;
+
+  // Get dataY from series data
+  const dataY = useMemo(() => {
+    if (sourceData && dataIndex >= 0 && dataIndex < sourceData.length) {
+      const dataValue = sourceData[dataIndex];
+      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 undefined;
+  }, [sourceData, dataIndex]);
+
+  // Evaluate gradient color
+  const color = useMemo(() => {
+    var _series$color, _series$color2;
+    if (dataY === undefined) return (_series$color = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color !== void 0 ? _series$color : 'var(--color-fgPrimary)';
+    if (gradient) {
+      const xScale = getXScale();
+      const yScale = getYScale(series === null || series === void 0 ? void 0 : series.yAxisId);
+      if (xScale && yScale) {
+        const gradientScale = gradient.axis === 'x' ? xScale : yScale;
+        const stops = getGradientConfig(gradient, xScale, yScale);
+        if (stops) {
+          var _gradient$axis;
+          const gradientAxis = (_gradient$axis = gradient.axis) !== null && _gradient$axis !== void 0 ? _gradient$axis : 'y';
+          const dataValue = gradientAxis === 'x' ? dataX : dataY;
+          const evaluatedColor = evaluateGradientAtValue(stops, dataValue, gradientScale);
+          if (evaluatedColor) {
+            return evaluatedColor;
+          }
+        }
+      }
+    }
+    return (_series$color2 = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color2 !== void 0 ? _series$color2 : 'var(--color-fgPrimary)';
+  }, [gradient, dataX, dataY, series === null || series === void 0 ? void 0 : series.color, series === null || series === void 0 ? void 0 : series.yAxisId, getXScale, getYScale]);
+  if (dataY === undefined) return null;
+  return /*#__PURE__*/_jsx(BeaconComponent, {
+    ref: beaconRef,
+    className: className,
+    color: color,
+    dataX: dataX,
+    dataY: dataY,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: seriesId,
+    style: style,
+    testID: testID,
+    transitions: transitions
+  });
+});
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    seriesIds,
+    idlePulse,
+    transitions,
+    BeaconComponent = DefaultScrubberBeacon,
+    className,
+    style,
+    testID
+  } = _ref2;
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXScale,
+    getXAxis,
+    dataLength,
+    series
+  } = useCartesianChartContext();
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef === null || beaconRef === void 0 || beaconRef.pulse();
+      });
+    }
+  }));
+  const filteredSeries = useMemo(() => {
+    var _series$filter;
+    return (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => seriesIds.includes(s.id))) !== null && _series$filter !== void 0 ? _series$filter : [];
+  }, [series, seriesIds]);
+  const {
+    dataX,
+    dataIndex
+  } = useMemo(() => {
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale) return {
+      dataX: undefined,
+      dataIndex: undefined
+    };
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+
+    // Convert index to actual x value if axis has data
+    let dataX;
+    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
+    } else {
+      dataX = dataIndex;
+    }
+    return {
+      dataX,
+      dataIndex
+    };
+  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
+  const isIdle = scrubberPosition === undefined;
+  const createBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+  if (dataX === undefined || dataIndex === undefined) return null;
+  return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
+    BeaconComponent: BeaconComponent,
+    beaconRef: createBeaconRef(s.id),
+    className: className,
+    dataIndex: dataIndex,
+    dataX: dataX,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: s.id,
+    style: style,
+    testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
+    transitions: transitions
+  }, s.id));
+}));