@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.1

package/esm/chart/CartesianChart.js

@@ -0,0 +1,241 @@
+const _excluded = ["series", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "children", "width", "height", "style", "allowOverflowGestures"];
+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 React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { Svg } from 'react-native-svg';
+import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
+import { Box } from '@coinbase/cds-mobile/layout';
+import { ScrubberProvider } from './scrubber/ScrubberProvider';
+import { CartesianChartProvider } from './ChartProvider';
+import { defaultAxisId, defaultChartInset, getAxisConfig, getAxisDomain, getAxisRange, getAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      animate = true,
+      enableScrubbing,
+      xAxis: xAxisConfigInput,
+      yAxis: yAxisConfigInput,
+      inset: insetInput,
+      onScrubberPositionChange,
+      children,
+      width = '100%',
+      height = '100%',
+      style,
+      allowOverflowGestures
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [containerLayout, onContainerLayout] = useLayout();
+  const chartWidth = typeof width === 'number' ? width : containerLayout.width;
+  const chartHeight = typeof height === 'number' ? height : containerLayout.height;
+  const userInset = useMemo(() => {
+    return getChartInset(insetInput, defaultChartInset);
+  }, [insetInput]);
+
+  // there can only be one x axis but the helper function always returns an array
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigInput)[0], [xAxisConfigInput]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigInput), [yAxisConfigInput]);
+  const {
+    renderedAxes,
+    registerAxis,
+    unregisterAxis,
+    axisPadding
+  } = useTotalAxisPadding();
+  const totalInset = useMemo(() => ({
+    top: userInset.top + axisPadding.top,
+    right: userInset.right + axisPadding.right,
+    bottom: userInset.bottom + axisPadding.bottom,
+    left: userInset.left + axisPadding.left
+  }), [userInset, axisPadding]);
+  const chartRect = useMemo(() => {
+    if (chartWidth <= 0 || chartHeight <= 0) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const availableWidth = chartWidth - totalInset.left - totalInset.right;
+    const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
+    return {
+      x: totalInset.left,
+      y: totalInset.top,
+      width: availableWidth > 0 ? availableWidth : 0,
+      height: availableHeight > 0 ? availableHeight : 0
+    };
+  }, [chartHeight, chartWidth, totalInset]);
+  const xAxis = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return undefined;
+    const domain = getAxisDomain(xAxisConfig, series != null ? series : [], 'x');
+    const range = getAxisRange(xAxisConfig, chartRect, 'x');
+    const axisConfig = {
+      scaleType: xAxisConfig.scaleType,
+      domain,
+      range,
+      data: xAxisConfig.data,
+      categoryPadding: xAxisConfig.categoryPadding,
+      domainLimit: xAxisConfig.domainLimit
+    };
+    return axisConfig;
+  }, [xAxisConfig, series, chartRect]);
+  const yAxes = useMemo(() => {
+    const axes = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    yAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
+
+      // Get relevant series data
+      const relevantSeries = (_series$filter = series == null ? void 0 : series.filter(s => {
+        var _s$yAxisId;
+        return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter : [];
+
+      // Calculate domain and range in one pass
+      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      const range = getAxisRange(axisParam, chartRect, 'y');
+      axes.set(axisId, {
+        scaleType: axisParam.scaleType,
+        domain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : 'nice'
+      });
+    });
+    return axes;
+  }, [yAxisConfig, series, chartRect]);
+  const xScale = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0 || xAxis === undefined) return undefined;
+    return getAxisScale({
+      config: xAxis,
+      type: 'x',
+      range: xAxis.range,
+      dataDomain: xAxis.domain
+    });
+  }, [chartRect, xAxis]);
+  const yScales = useMemo(() => {
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return scales;
+    yAxes.forEach((axisConfig, axisId) => {
+      const scale = getAxisScale({
+        config: axisConfig,
+        type: 'y',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+      }
+    });
+    return scales;
+  }, [chartRect, yAxes]);
+  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
+  const getXScale = useCallback(() => xScale, [xScale]);
+  const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
+  const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
+
+  // Compute stacked data for series with stack properties
+  const stackedDataMap = useMemo(() => {
+    if (!series) return new Map();
+    return calculateStackedSeriesData(series);
+  }, [series]);
+  const getStackedSeriesData = useCallback(seriesId => {
+    if (!seriesId) return undefined;
+    return stackedDataMap.get(seriesId);
+  }, [stackedDataMap]);
+  const getAxisBounds = useCallback(axisId => {
+    const axis = renderedAxes.get(axisId);
+    if (!axis || !chartRect) return;
+    const axesAtPosition = Array.from(renderedAxes.values()).filter(a => a.position === axis.position).sort((a, b) => a.id.localeCompare(b.id));
+    const axisIndex = axesAtPosition.findIndex(a => a.id === axisId);
+    if (axisIndex === -1) return;
+
+    // Calculate offset from previous axes at the same position
+    const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
+    if (axis.position === 'top') {
+      // Position above the chart rect, accounting for user inset
+      const startY = userInset.top + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'bottom') {
+      // Position below the chart rect, accounting for user inset
+      const startY = chartRect.y + chartRect.height + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'left') {
+      // Position to the left of the chart rect, accounting for user inset
+      const startX = userInset.left + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    } else {
+      // right - position to the right of the chart rect, accounting for user inset
+      const startX = chartRect.x + chartRect.width + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    }
+  }, [renderedAxes, chartRect, userInset]);
+  const contextValue = useMemo(() => ({
+    series: series != null ? series : [],
+    getSeries,
+    getSeriesData: getStackedSeriesData,
+    animate,
+    width: chartWidth,
+    height: chartHeight,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale,
+    drawingArea: chartRect,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, registerAxis, unregisterAxis, getAxisBounds]);
+  const containerStyles = useMemo(() => {
+    const dynamicStyles = {};
+    if (typeof width === 'string') {
+      dynamicStyles.width = width;
+    }
+    if (typeof height === 'string') {
+      dynamicStyles.height = height;
+    }
+    return [style, dynamicStyles];
+  }, [style, width, height]);
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      allowOverflowGestures: allowOverflowGestures,
+      enableScrubbing: enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      children: /*#__PURE__*/_jsx(Box, _extends({
+        ref: ref,
+        accessibilityLiveRegion: "polite",
+        accessibilityRole: "image",
+        onLayout: onContainerLayout,
+        style: containerStyles
+      }, props, {
+        children: /*#__PURE__*/_jsx(Svg, {
+          height: chartHeight,
+          width: chartWidth,
+          children: children
+        })
+      }))
+    })
+  });
+}));

package/esm/chart/ChartProvider.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const useCartesianChartContext = () => {
+  const context = useContext(CartesianChartContext);
+  if (!context) {
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See http://cds.coinbase.com/components/graphs/CartesianChart.');
+  }
+  return context;
+};
+export const CartesianChartProvider = CartesianChartContext.Provider;

package/esm/chart/Path.js

@@ -0,0 +1,133 @@
+const _excluded = ["clipRect", "clipOffset", "d", "fill", "stroke", "strokeWidth", "strokeOpacity", "fillOpacity", "strokeDasharray", "testID", "animate"];
+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; }
+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 { memo, useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import Reanimated, { runOnJS, useAnimatedProps, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ClipPath, Defs, G, Path as SvgPath, Rect } from 'react-native-svg';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import * as interpolate from 'd3-interpolate-path';
+import { useCartesianChartContext } from './ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedRect = Reanimated.createAnimatedComponent(Rect);
+const AnimatedSvgRect = /*#__PURE__*/memo(_ref => {
+  let {
+    width,
+    totalOffset,
+    rectProps
+  } = _ref;
+  const animatedWidth = useSharedValue(width + totalOffset);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      width: animatedWidth.value
+    };
+  });
+  useEffect(() => {
+    animatedWidth.value = withTiming(width + totalOffset, {
+      duration: 1000
+    });
+  }, [animatedWidth, width, totalOffset]);
+  return /*#__PURE__*/_jsx(AnimatedRect, _extends({
+    animatedProps: animatedProps
+  }, rectProps));
+});
+export const Path = /*#__PURE__*/memo(_ref2 => {
+  let {
+      clipRect,
+      clipOffset,
+      d = '',
+      fill,
+      stroke,
+      strokeWidth,
+      strokeOpacity,
+      fillOpacity,
+      strokeDasharray,
+      testID,
+      animate: animateProp
+    } = _ref2,
+    pathProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const pathRef = useRef(null);
+  const {
+    animate: animateContext,
+    drawingArea: contextRect
+  } = useCartesianChartContext();
+  const rect = clipRect != null ? clipRect : contextRect;
+  const animate = animateProp != null ? animateProp : animateContext;
+  const clipPathId = useId();
+  const animationProgress = useSharedValue(0);
+  const targetPath = useMemo(() => d, [d]);
+  const previousPath = usePreviousValue(targetPath);
+  const fromPath = useMemo(() => {
+    if (!animate) return targetPath;
+    return previousPath != null ? previousPath : targetPath;
+  }, [animate, previousPath, targetPath]);
+  const pathInterpolator = useMemo(() => interpolate.interpolatePath(fromPath, targetPath), [fromPath, targetPath]);
+  const updatePath = useCallback(progress => {
+    var _pathRef$current;
+    if (!pathInterpolator) return;
+    const val = Number(progress.toFixed(4));
+    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
+      d: pathInterpolator(val)
+    });
+  }, [pathInterpolator]);
+  useAnimatedReaction(() => animationProgress.value, progress => {
+    'worklet';
+
+    runOnJS(updatePath)(progress);
+  }, [updatePath]);
+  useEffect(() => {
+    if (!pathRef.current) return;
+    if (!animate || !pathInterpolator) {
+      pathRef.current.setNativeProps({
+        d: targetPath
+      });
+      animationProgress.value = 1;
+      return;
+    }
+    animationProgress.value = 0;
+    animationProgress.value = withTiming(1, {
+      duration: 200
+    });
+  }, [animate, animationProgress, targetPath, pathInterpolator]);
+  if (!d || !rect) return;
+
+  // The clip offset provides extra padding to prevent path from being cut off
+  // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
+  const totalOffset = (clipOffset != null ? clipOffset : 0) * 2; // Applied on both sides
+
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: animate ? /*#__PURE__*/_jsx(ClipPath, {
+        id: clipPathId,
+        children: /*#__PURE__*/_jsx(AnimatedSvgRect, {
+          rectProps: {
+            height: rect.height + totalOffset,
+            x: rect.x - (clipOffset != null ? clipOffset : 0),
+            y: rect.y - (clipOffset != null ? clipOffset : 0)
+          },
+          totalOffset: totalOffset,
+          width: rect.width
+        })
+      }) : /*#__PURE__*/_jsx(ClipPath, {
+        id: clipPathId,
+        children: /*#__PURE__*/_jsx(Rect, {
+          height: contextRect.height + totalOffset,
+          width: contextRect.width + totalOffset,
+          x: contextRect.x - (clipOffset != null ? clipOffset : 0),
+          y: contextRect.y - (clipOffset != null ? clipOffset : 0)
+        })
+      })
+    }), /*#__PURE__*/_jsx(SvgPath, _extends({
+      ref: pathRef,
+      clipPath: "url(#" + clipPathId + ")",
+      clipRule: "nonzero",
+      d: fromPath,
+      fill: fill,
+      fillOpacity: fillOpacity,
+      stroke: stroke,
+      strokeDasharray: strokeDasharray,
+      strokeOpacity: strokeOpacity,
+      strokeWidth: strokeWidth,
+      testID: testID
+    }, pathProps))]
+  });
+});

package/esm/chart/PeriodSelector.js

@@ -0,0 +1,136 @@
+const _excluded = ["color", "label", "font", "hideDot", "style"],
+  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+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 React, { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
+import { Text } from '@coinbase/cds-mobile/typography/Text';
+
+// Animated active indicator to support smooth transition of background color
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PeriodSelectorActiveIndicator = _ref => {
+  let {
+    activeTabRect,
+    background = 'bgPrimaryWash',
+    position = 'absolute',
+    borderRadius = 1000
+  } = _ref;
+  const theme = useTheme();
+  const {
+    width,
+    height,
+    x
+  } = activeTabRect;
+
+  // Get the target background color
+  const backgroundColorKey = background;
+  const targetColor = theme.color[backgroundColorKey] || background;
+
+  // Track previous values for first render detection
+  const previousActiveTabRect = React.useRef(activeTabRect);
+  const previousColor = React.useRef(targetColor);
+
+  // Combined animated value for position, size, and color
+  const newAnimatedValues = {
+    x,
+    width,
+    backgroundColor: targetColor
+  };
+  const animatedValues = useSharedValue(newAnimatedValues);
+  const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
+  if (previousActiveTabRect.current !== activeTabRect || previousColor.current !== targetColor) {
+    previousActiveTabRect.current = activeTabRect;
+    previousColor.current = targetColor;
+    animatedValues.value = isFirstRenderWithWidth ? newAnimatedValues : withSpring(newAnimatedValues, tabsSpringConfig);
+  }
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: animatedValues.value.x
+    }],
+    width: animatedValues.value.width,
+    backgroundColor: animatedValues.value.backgroundColor
+  }), [animatedValues]);
+  if (!width) return null;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: position,
+      height,
+      borderRadius
+    }, animatedStyles],
+    testID: "period-selector-active-indicator"
+  });
+};
+const styles = StyleSheet.create({
+  liveContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      color = 'fgNegative',
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const theme = useTheme();
+  const colorKey = color;
+  const textColor = theme.color[colorKey] || color;
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: textColor
+  }), [theme.space, textColor]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.liveContainer, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      color: color,
+      font: font
+    }, props, {
+      children: label
+    }))]
+  });
+}));
+
+// Custom tab component with primary color for active state
+const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
+  ref: ref,
+  activeColor: "fgPrimary",
+  font: "label1"
+}, props))));
+/**
+ * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
+ * It provides transparent background, primary wash active state, and full-width layout by default.
+ */
+export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      background = 'transparent',
+      activeBackground = 'bgPrimaryWash',
+      width = '100%',
+      justifyContent = 'space-between',
+      TabComponent = PeriodSelectorTab,
+      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(SegmentedTabs, _extends({
+    ref: ref,
+    TabComponent: TabComponent,
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+    activeBackground: activeBackground,
+    background: background,
+    justifyContent: justifyContent,
+    width: width
+  }, props));
+}));

package/esm/chart/Point.js

@@ -0,0 +1,111 @@
+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 { memo, useEffect, useMemo } from 'react';
+import { Circle, G } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from './ChartProvider';
+import { ChartText } from './text';
+import { projectPoint, useScrubberContext } from './utils';
+
+/**
+ * Parameters passed to renderPoints callback function.
+ */
+
+/**
+ * Shared configuration for point appearance and behavior.
+ * Used by line-associated points rendered via Line/LineChart components.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+    dataX,
+    dataY,
+    yAxisId,
+    fill,
+    radius = 4,
+    opacity,
+    onPress,
+    onScrubberEnter,
+    stroke,
+    strokeWidth = 2,
+    accessibilityLabel,
+    label,
+    labelProps,
+    pixelCoordinates,
+    testID
+  } = _ref;
+  const theme = useTheme();
+  const effectiveStroke = stroke != null ? stroke : theme.color.bg;
+  const {
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+
+  // Scrubber detection: check if this point is highlighted by the scrubber
+  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
+
+  // Use provided pixelCoordinates or calculate from data coordinates
+  const pixelCoordinate = useMemo(() => {
+    if (pixelCoordinates) {
+      return pixelCoordinates;
+    }
+    if (!xScale || !yScale) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [pixelCoordinates, xScale, yScale, dataX, dataY]);
+  useEffect(() => {
+    if (isScrubberHighlighted && onScrubberEnter) {
+      onScrubberEnter({
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      });
+    }
+  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
+  if (!xScale || !yScale) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(G, {
+      opacity: opacity,
+      testID: testID,
+      transform: [{
+        translateX: pixelCoordinate.x
+      }, {
+        translateY: pixelCoordinate.y
+      }],
+      children: /*#__PURE__*/_jsx(Circle, {
+        accessibilityLabel: accessibilityLabel,
+        cx: 0,
+        cy: 0,
+        fill: fill != null ? fill : theme.color.fgPrimary,
+        onPress: onPress ? event => onPress({
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        }) : undefined,
+        r: radius,
+        stroke: effectiveStroke,
+        strokeWidth: strokeWidth
+      })
+    }), label && /*#__PURE__*/_jsx(ChartText, _extends({
+      x: pixelCoordinate.x,
+      y: pixelCoordinate.y
+    }, labelProps, {
+      children: label
+    }))]
+  });
+});