@coinbase/cds-web-visualization 0.0.0 → 3.4.0-beta.1

package/esm/chart/scrubber/Scrubber.js

@@ -0,0 +1,483 @@
+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, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { m as motion } from 'framer-motion';
+import { axisTickLabelsInitialAnimationVariants } from '../axis';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { getPointOnScale, useScrubberContext } from '../utils';
+import { ScrubberBeacon } from './ScrubberBeacon';
+import { ScrubberBeaconLabel } from './ScrubberBeaconLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const minGap = 2;
+
+/**
+ * Configuration for scrubber functionality across chart components.
+ * Provides consistent API with smart defaults and component customization.
+ */
+
+/**
+ * Unified component that manages all scrubber elements (beacons, line, labels)
+ * with intelligent collision detection and consistent positioning.
+ */
+export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesIds,
+    hideLine,
+    label,
+    lineStroke,
+    labelProps,
+    BeaconComponent,
+    BeaconLabelComponent,
+    LineComponent,
+    hideOverlay,
+    overlayOffset = 2,
+    testID,
+    idlePulse,
+    styles,
+    classNames
+  } = _ref;
+  const scrubberGroupRef = useRef(null);
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXScale,
+    getYScale,
+    getSeriesData,
+    getXAxis,
+    animate,
+    series,
+    drawingArea
+  } = useCartesianChartContext();
+  const getStackedSeriesData = getSeriesData; // getSeriesData now returns stacked data
+
+  // Track label dimensions for collision detection
+  const [labelDimensions, setLabelDimensions] = useState(new Map());
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Pulse all registered scrubber beacons
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef === null || beaconRef === void 0 || beaconRef.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 || series === void 0 ? 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 || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
+    }, 0)) !== null && _series$reduce !== void 0 ? _series$reduce : 0;
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, maxDataLength - 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, 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 === void 0 || (_series$filter = series.filter(s => {
+      if (seriesIds === undefined) return true;
+      return seriesIds.includes(s.id);
+    })) === null || _series$filter === void 0 ? 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 || sourceData === void 0 ? 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 yScale = getYScale(s.yAxisId);
+        if (!yScale) {
+          return undefined;
+        }
+        const pixelY = getPointOnScale(dataY, yScale);
+        const resolvedLabel = typeof s.label === 'function' ? s.label(dataIndex) : s.label;
+        return {
+          x: dataX,
+          y: dataY,
+          label: resolvedLabel,
+          pixelY,
+          targetSeries: s
+        };
+      }
+    }).filter(beacon => beacon !== undefined)) !== null && _series$filter$map$fi !== void 0 ? _series$filter$map$fi : [];
+  }, [getXScale, dataX, dataIndex, series, seriesIds, getStackedSeriesData, getSeriesData, getYScale]);
+  const labelVerticalInset = 2;
+  const labelHorizontalInset = 4;
+
+  // Calculate optimal label positioning strategy
+  const labelPositioning = useMemo(() => {
+    // Get current beacon IDs that are actually being rendered
+    const currentBeaconIds = new Set(beaconPositions.map(beacon => beacon === null || beacon === void 0 ? void 0 : beacon.targetSeries.id).filter(Boolean));
+
+    // Only use dimensions for beacons that are currently being rendered
+    const dimensions = Array.from(labelDimensions.values()).filter(dim => currentBeaconIds.has(dim.id));
+    if (dimensions.length === 0) return {
+      strategy: 'auto',
+      adjustments: new Map()
+    };
+    const adjustments = new Map();
+
+    // Sort by Y position to handle overlaps systematically
+    const sortedDimensions = [...dimensions].sort((a, b) => a.preferredY - b.preferredY);
+
+    // Determine if we need to switch sides globally based on overflow
+    let globalSide = 'right';
+    const anchorRadius = 10; // Same as used in ScrubberBeaconLabel
+    const bufferPx = 5; // Small buffer to prevent premature switching
+
+    // Safety check for valid bounds
+    if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+      globalSide = 'right'; // Default to right if bounds are invalid
+    } else {
+      // Check if labels would overflow when positioned on the right side
+      // Account for anchor radius and padding when calculating right edge
+      const wouldOverflow = sortedDimensions.some(dim => {
+        const labelRightEdge = dim.preferredX + anchorRadius + labelHorizontalInset + dim.width + bufferPx;
+        return labelRightEdge > drawingArea.x + drawingArea.width;
+      });
+      globalSide = wouldOverflow ? 'left' : 'right';
+    }
+
+    // Initialize all labels at their preferred positions
+    for (const dim of sortedDimensions) {
+      adjustments.set(dim.id, {
+        x: dim.preferredX,
+        y: dim.preferredY,
+        side: globalSide
+      });
+    }
+
+    // Check for collisions and resolve them
+    const maxIterations = 10;
+    let iteration = 0;
+    while (iteration < maxIterations) {
+      let hasCollisions = false;
+      iteration++;
+
+      // Sort by current Y position for systematic collision resolution
+      const currentPositions = sortedDimensions.map(dim => _objectSpread(_objectSpread({}, dim), {}, {
+        currentY: adjustments.get(dim.id).y
+      })).sort((a, b) => a.currentY - b.currentY);
+
+      // Check adjacent labels for overlaps
+      for (let i = 0; i < currentPositions.length - 1; i++) {
+        const current = currentPositions[i];
+        const next = currentPositions[i + 1];
+        const currentAdjustment = adjustments.get(current.id);
+        const nextAdjustment = adjustments.get(next.id);
+
+        // Calculate required separation
+        const requiredSeparation = current.height / 2 + next.height / 2 + minGap;
+        const currentSeparation = nextAdjustment.y - currentAdjustment.y;
+        if (currentSeparation < requiredSeparation) {
+          hasCollisions = true;
+          const deficit = requiredSeparation - currentSeparation;
+
+          // Move labels apart - split the adjustment
+          const offsetPerLabel = deficit / 2;
+          adjustments.set(current.id, _objectSpread(_objectSpread({}, currentAdjustment), {}, {
+            y: currentAdjustment.y - offsetPerLabel
+          }));
+          adjustments.set(next.id, _objectSpread(_objectSpread({}, nextAdjustment), {}, {
+            y: nextAdjustment.y + offsetPerLabel
+          }));
+        }
+      }
+      if (!hasCollisions) {
+        break;
+      }
+    }
+
+    // After collision resolution, ensure all labels are within bounds
+    const labelIds = Array.from(adjustments.keys());
+
+    // Group labels that are close together or overlapping
+    // This prevents distant labels from being unnecessarily shifted
+    const findConnectedGroups = () => {
+      const groups = [];
+      const visited = new Set();
+      for (const id of labelIds) {
+        if (visited.has(id)) continue;
+        const group = [id];
+        visited.add(id);
+        const queue = [id];
+        while (queue.length > 0) {
+          const currentId = queue.shift();
+          const currentAdjustment = adjustments.get(currentId);
+          const currentDim = sortedDimensions.find(d => d.id === currentId);
+
+          // Check if this label overlaps or is close to any other unvisited label
+          for (const otherId of labelIds) {
+            if (visited.has(otherId)) continue;
+            const otherAdjustment = adjustments.get(otherId);
+            const otherDim = sortedDimensions.find(d => d.id === otherId);
+
+            // Calculate distance between labels
+            const distance = Math.abs(currentAdjustment.y - otherAdjustment.y);
+            const minDistance = (currentDim.height + otherDim.height) / 2 + minGap * 2;
+
+            // Labels are considered connected if they're close enough to potentially overlap
+            if (distance <= minDistance) {
+              visited.add(otherId);
+              group.push(otherId);
+              queue.push(otherId);
+            }
+          }
+        }
+        groups.push(group);
+      }
+      return groups;
+    };
+    const connectedGroups = findConnectedGroups();
+
+    // Process each connected group independently
+    for (const groupIds of connectedGroups) {
+      // Check if any labels in this group are outside bounds
+      const groupOutOfBounds = groupIds.some(id => {
+        const adjustment = adjustments.get(id);
+        const dim = sortedDimensions.find(d => d.id === id);
+        const labelTop = adjustment.y - dim.height / 2;
+        const labelBottom = adjustment.y + dim.height / 2;
+        return labelTop < drawingArea.y || labelBottom > drawingArea.y + drawingArea.height;
+      });
+      if (groupOutOfBounds) {
+        // Get labels in this group sorted by their preferred Y position
+        const groupLabels = groupIds.map(id => ({
+          id,
+          dim: sortedDimensions.find(d => d.id === id),
+          preferredY: sortedDimensions.find(d => d.id === id).preferredY,
+          currentY: adjustments.get(id).y
+        })).sort((a, b) => a.preferredY - b.preferredY);
+
+        // Calculate total height needed for this group
+        const totalLabelHeight = groupLabels.reduce((sum, label) => sum + label.dim.height, 0);
+        const totalGaps = (groupLabels.length - 1) * minGap;
+        const totalNeeded = totalLabelHeight + totalGaps;
+        if (totalNeeded > drawingArea.height) {
+          // Not enough space - use compressed equal spacing as fallback
+          const compressedGap = Math.max(2, (drawingArea.height - totalLabelHeight) / Math.max(1, groupLabels.length - 1));
+          let currentY = drawingArea.y + groupLabels[0].dim.height / 2;
+          for (const label of groupLabels) {
+            adjustments.set(label.id, _objectSpread(_objectSpread({}, adjustments.get(label.id)), {}, {
+              y: currentY
+            }));
+            currentY += label.dim.height + compressedGap;
+          }
+        } else {
+          // Enough space - use minimal displacement algorithm for this group
+          const finalPositions = [...groupLabels];
+
+          // Ensure minimum spacing between adjacent labels in this group
+          for (let i = 1; i < finalPositions.length; i++) {
+            const prev = finalPositions[i - 1];
+            const current = finalPositions[i];
+
+            // Calculate minimum Y position for current label
+            const minCurrentY = prev.preferredY + prev.dim.height / 2 + minGap + current.dim.height / 2;
+            if (current.preferredY < minCurrentY) {
+              // Need to push this label down
+              current.preferredY = minCurrentY;
+            }
+          }
+
+          // Check if this specific group fits within bounds, if not shift only this group
+          const groupTop = finalPositions[0].preferredY - finalPositions[0].dim.height / 2;
+          const groupBottom = finalPositions[finalPositions.length - 1].preferredY + finalPositions[finalPositions.length - 1].dim.height / 2;
+          let shiftAmount = 0;
+          if (groupTop < drawingArea.y) {
+            // Group is too high, shift down
+            shiftAmount = drawingArea.y - groupTop;
+          } else if (groupBottom > drawingArea.y + drawingArea.height) {
+            // Group is too low, shift up
+            shiftAmount = drawingArea.y + drawingArea.height - groupBottom;
+          }
+
+          // Apply final positions with shift only to this group
+          for (const label of finalPositions) {
+            const finalY = label.preferredY + shiftAmount;
+
+            // Final bounds check for individual labels
+            const clampedY = Math.max(drawingArea.y + label.dim.height / 2, Math.min(drawingArea.y + drawingArea.height - label.dim.height / 2, finalY));
+            adjustments.set(label.id, _objectSpread(_objectSpread({}, adjustments.get(label.id)), {}, {
+              y: clampedY
+            }));
+          }
+        }
+      }
+    }
+    return {
+      strategy: globalSide,
+      adjustments
+    };
+  }, [beaconPositions, labelDimensions, drawingArea]);
+
+  // Callback for labels to register their dimensions
+  const registerLabelDimensions = useCallback((id, width, height, x, y) => {
+    setLabelDimensions(prev => {
+      const existing = prev.get(id);
+      const newDimensions = {
+        id,
+        width,
+        height,
+        preferredX: x,
+        preferredY: y
+      };
+
+      // Only update if dimensions actually changed
+      if (existing && existing.width === width && existing.height === height && existing.preferredX === x && existing.preferredY === y) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(id, newDimensions);
+      return next;
+    });
+  }, []);
+
+  // Callback to create ref handlers for scrubber beacons
+  const createScrubberBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+
+  // synchronize label positioning state when the position of any scrubber beacons change
+  useEffect(() => {
+    const currentBeaconIds = new Set(beaconPositions.map(beacon => beacon === null || beacon === void 0 ? void 0 : beacon.targetSeries.id).filter(Boolean));
+    setLabelDimensions(prev => {
+      const next = new Map();
+      for (const [id, dimensions] of prev) {
+        if (currentBeaconIds.has(id)) {
+          next.set(id, dimensions);
+        }
+      }
+      return next;
+    });
+  }, [beaconPositions]);
+
+  // Check if we have at least the default X scale
+  const defaultXScale = getXScale();
+  if (!defaultXScale) return null;
+
+  // Use custom components if provided
+  const ScrubberLineComponent = LineComponent !== null && LineComponent !== void 0 ? LineComponent : ReferenceLine;
+  const ScrubberBeaconComponent = BeaconComponent !== null && BeaconComponent !== void 0 ? BeaconComponent : ScrubberBeacon;
+  const ScrubberBeaconLabelComponent = BeaconLabelComponent !== null && BeaconLabelComponent !== void 0 ? BeaconLabelComponent : ScrubberBeaconLabel;
+  const pixelX = dataX !== undefined && defaultXScale ? getPointOnScale(dataX, defaultXScale) : undefined;
+  return /*#__PURE__*/_jsxs(motion.g, _objectSpread(_objectSpread({
+    ref: scrubberGroupRef,
+    "data-component": "scrubber-group",
+    "data-testid": testID
+  }, animate ? {
+    animate: 'animate',
+    exit: 'exit',
+    initial: 'initial',
+    variants: axisTickLabelsInitialAnimationVariants
+  } : {}), {}, {
+    children: [!hideOverlay && dataX !== undefined && 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(ScrubberLineComponent, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.line,
+      dataX: dataX,
+      label: typeof label === 'function' ? label(dataIndex) : label,
+      labelProps: _objectSpread({
+        verticalAlignment: 'middle',
+        // Place in the middle vertically by default
+        dy: -0.5 * drawingArea.y
+      }, labelProps),
+      stroke: lineStroke,
+      style: styles === null || styles === void 0 ? void 0 : styles.line
+    }), beaconPositions.map(beacon => {
+      var _beacon$targetSeries, _beacon$targetSeries2;
+      if (!beacon) return null;
+      const adjustment = labelPositioning.adjustments.get(beacon.targetSeries.id);
+      const dotStroke = ((_beacon$targetSeries = beacon.targetSeries) === null || _beacon$targetSeries === void 0 ? void 0 : _beacon$targetSeries.color) || 'var(--color-fgPrimary)';
+      return /*#__PURE__*/_jsxs("g", {
+        "data-component": "scrubber-beacon",
+        children: [/*#__PURE__*/_jsx(ScrubberBeaconComponent, {
+          ref: createScrubberBeaconRef(beacon.targetSeries.id),
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
+          color: (_beacon$targetSeries2 = beacon.targetSeries) === null || _beacon$targetSeries2 === void 0 ? void 0 : _beacon$targetSeries2.color,
+          dataX: beacon.x,
+          dataY: beacon.y,
+          idlePulse: idlePulse,
+          seriesId: beacon.targetSeries.id,
+          style: styles === null || styles === void 0 ? void 0 : styles.beacon,
+          testID: testID ? "".concat(testID, "-").concat(beacon.targetSeries.id, "-dot") : undefined
+        }), beacon.label && pixelX !== undefined && ((_adjustment$x, _adjustment$y, _adjustment$side) => {
+          const finalAnchorX = (_adjustment$x = adjustment === null || adjustment === void 0 ? void 0 : adjustment.x) !== null && _adjustment$x !== void 0 ? _adjustment$x : pixelX;
+          const finalAnchorY = (_adjustment$y = adjustment === null || adjustment === void 0 ? void 0 : adjustment.y) !== null && _adjustment$y !== void 0 ? _adjustment$y : beacon.pixelY;
+          const finalSide = (_adjustment$side = adjustment === null || adjustment === void 0 ? void 0 : adjustment.side) !== null && _adjustment$side !== void 0 ? _adjustment$side : labelPositioning.strategy;
+          return /*#__PURE__*/_jsx(ScrubberBeaconLabelComponent, {
+            background: "var(--color-bg)",
+            bounds: drawingArea,
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.beaconLabel,
+            color: dotStroke,
+            dx: finalSide === 'right' ? 16 : -16,
+            horizontalAlignment: finalSide === 'right' ? 'left' : 'right',
+            inset: {
+              left: labelHorizontalInset,
+              right: labelHorizontalInset,
+              top: labelVerticalInset,
+              bottom: labelVerticalInset
+            },
+            onDimensionsChange: _ref2 => {
+              let {
+                width,
+                height
+              } = _ref2;
+              return registerLabelDimensions(beacon.targetSeries.id, width, height, pixelX, beacon.pixelY);
+            },
+            style: styles === null || styles === void 0 ? void 0 : styles.beaconLabel,
+            testID: testID ? "".concat(testID, "-").concat(beacon.targetSeries.id, "-label") : undefined,
+            x: finalAnchorX,
+            y: finalAnchorY,
+            children: beacon.label
+          });
+        })()]
+      }, beacon.targetSeries.id);
+    })]
+  }));
+}));

package/esm/chart/scrubber/ScrubberBeacon.js

@@ -0,0 +1,195 @@
+import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { projectPoint, useScrubberContext } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pulseTransitionConfig = {
+  duration: 2,
+  repeat: Infinity,
+  ease: 'easeInOut'
+};
+const singlePulseTransitionConfig = {
+  duration: 1,
+  ease: 'easeInOut'
+};
+const radius = 5;
+const glowRadius = 10;
+const pulseRadius = 15;
+/**
+ * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
+ * It renders a glow effect around the point to highlight the scrubber position.
+ */
+export const ScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _ref2;
+  let {
+    seriesId,
+    dataX: dataXProp,
+    dataY: dataYProp,
+    color,
+    testID,
+    idlePulse,
+    opacity = 1,
+    className,
+    style
+  } = _ref;
+  const [scope, animate] = useAnimate();
+  const {
+    getSeries,
+    getXScale,
+    getYScale,
+    getSeriesData,
+    animate: animationEnabled
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const targetSeries = getSeries(seriesId);
+  const sourceData = getSeriesData(seriesId);
+  const xScale = getXScale();
+  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
+  const isIdleState = scrubberPosition === undefined;
+
+  // Expose imperative handle for triggering pulse animations
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle
+      if (isIdleState && scope.current) {
+        animate(scope.current, {
+          opacity: [0.1, 0]
+        }, singlePulseTransitionConfig);
+      }
+    }
+  }));
+  const {
+    dataX,
+    dataY
+  } = useMemo(() => {
+    let x;
+    let y;
+    if (xScale && yScale) {
+      if (dataXProp !== undefined && dataYProp !== undefined && !isNaN(dataYProp) && !isNaN(dataXProp)) {
+        // Use direct coordinates if provided
+        x = dataXProp;
+        y = dataYProp;
+      } else if (sourceData && scrubberPosition != null && scrubberPosition >= 0 && scrubberPosition < sourceData.length) {
+        // Use series data at highlight index
+        x = scrubberPosition;
+        const dataValue = sourceData[scrubberPosition];
+        if (typeof dataValue === 'number') {
+          y = dataValue;
+        } else if (Array.isArray(dataValue)) {
+          const validValues = dataValue.filter(val => val !== null);
+          if (validValues.length >= 2) {
+            y = validValues[1];
+          }
+        }
+      }
+    }
+    return {
+      dataX: x,
+      dataY: y
+    };
+  }, [dataXProp, dataYProp, sourceData, scrubberPosition, xScale, yScale]);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale || dataX === undefined || dataY === undefined) {
+      return null;
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [xScale, yScale, dataX, dataY]);
+  if (!pixelCoordinate) {
+    return null;
+  }
+  const pointColor = (_ref2 = color !== null && color !== void 0 ? color : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
+  const shouldPulse = animationEnabled && isIdleState && idlePulse;
+  if (animationEnabled && isIdleState) {
+    return /*#__PURE__*/_jsxs("g", {
+      "data-testid": testID,
+      opacity: opacity,
+      children: [/*#__PURE__*/_jsx(motion.circle, {
+        animate: {
+          cx: pixelCoordinate.x,
+          cy: pixelCoordinate.y
+        },
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: pointColor,
+        initial: false,
+        opacity: 0.15,
+        r: glowRadius,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut'
+        }
+      }), /*#__PURE__*/_jsx(motion.g, {
+        animate: {
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        },
+        initial: false,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut'
+        },
+        children: /*#__PURE__*/_jsx(motion.circle, {
+          ref: scope,
+          animate: shouldPulse ? {
+            opacity: [0.1, 0, 0.1],
+            transition: pulseTransitionConfig
+          } : {
+            opacity: 0
+          },
+          cx: 0,
+          cy: 0,
+          fill: pointColor,
+          initial: {
+            opacity: shouldPulse ? 0.1 : 0
+          },
+          r: pulseRadius
+        })
+      }), /*#__PURE__*/_jsx(motion.circle, {
+        animate: {
+          cx: pixelCoordinate.x,
+          cy: pixelCoordinate.y
+        },
+        className: className,
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: pointColor,
+        initial: false,
+        r: radius,
+        stroke: "var(--color-bg)",
+        strokeWidth: 2,
+        style: style,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut'
+        }
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs("g", {
+    "data-testid": testID,
+    opacity: opacity,
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: pointColor,
+      opacity: 0.15,
+      r: glowRadius
+    }), /*#__PURE__*/_jsx("circle", {
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: pointColor,
+      r: radius,
+      stroke: "var(--color-bg)",
+      strokeWidth: 2,
+      style: style
+    })]
+  });
+}));