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

package/dts/chart/Point.d.ts

@@ -1,103 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import type { ChartTextChildren } from './text/ChartText';
-import { type ChartTextProps } from './text';
-/**
- * Parameters passed to renderPoints callback function.
- */
-export type RenderPointsParams = {
-  /**
-   * X coordinate in SVG pixel space.
-   */
-  x: number;
-  /**
-   * Y coordinate in SVG pixel space.
-   */
-  y: number;
-  /**
-   * X coordinate in data space (usually same as index).
-   */
-  dataX: number;
-  /**
-   * Y coordinate in data space (same as value).
-   */
-  dataY: number;
-};
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
- */
-export type PointConfig = {
-  /**
-   * The fill color of the point.
-   */
-  fill?: string;
-  /**
-   * Optional Y-axis id to specify which axis to plot along.
-   * Defaults to the first y-axis
-   */
-  yAxisId?: string;
-  /**
-   * Radius of the point.
-   * @default 4
-   */
-  radius?: number;
-  /**
-   * Opacity of the point.
-   */
-  opacity?: number;
-  /**
-   * Handler for when the point is clicked.
-   */
-  onPress?: (point: { x: number; y: number; dataX: number; dataY: number }) => void;
-  /**
-   * Handler for when the scrubber enters this point.
-   */
-  onScrubberEnter?: (point: { x: number; y: number }) => void;
-  /**
-   * Color of the outer stroke around the point.
-   * @default theme.color.bg
-   */
-  stroke?: string;
-  /**
-   * Outer stroke width of the point.
-   * Set to  0 to remove the stroke.
-   * @default 2
-   */
-  strokeWidth?: number;
-  /**
-   * Simple text label to display at the point position.
-   * If provided, a ChartText will be automatically rendered.
-   */
-  label?: ChartTextChildren;
-  /**
-   * Configuration for the automatically rendered label.
-   * Only used when `label` prop is provided.
-   */
-  labelProps?: Omit<ChartTextProps, 'x' | 'y' | 'children'>;
-  /**
-   * Accessibility label for screen readers to describe the point.
-   * If not provided, a default label will be generated using the data coordinates.
-   */
-  accessibilityLabel?: string;
-};
-export type PointProps = SharedProps &
-  PointConfig & {
-    /**
-     * X coordinate in data space (not pixel coordinates).
-     */
-    dataX: number;
-    /**
-     * Y coordinate in data space (not pixel coordinates).
-     */
-    dataY: number;
-    /**
-     * Optional pixel coordinates to use instead of calculating from dataX/dataY.
-     * Useful for performance when coordinates are already calculated.
-     */
-    pixelCoordinates?: {
-      x: number;
-      y: number;
-    };
-  };
-export declare const Point: import('react').NamedExoticComponent<PointProps>;
-//# sourceMappingURL=Point.d.ts.map

package/dts/chart/Point.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../src/chart/Point.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGxD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;IAC1D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,WAAW,GAAG;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C,CAAC;AAEJ,eAAO,MAAM,KAAK,kDAyFjB,CAAC"}

package/dts/chart/line/GradientLine.d.ts

@@ -1,45 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import { type PathProps } from '../Path';
-export type GradientLineProps = SharedProps &
-  Omit<PathProps, 'stroke' | 'strokeOpacity' | 'strokeWidth'> & {
-    /**
-     * The color of the line.
-     * @default theme.color.bgLine
-     */
-    stroke?: string;
-    /**
-     * Opacity of the line.
-     * @default 1
-     */
-    strokeOpacity?: number;
-    /**
-     * Path stroke width
-     * @default 2
-     */
-    strokeWidth?: number;
-    /**
-     * The color of the start of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    startColor?: string;
-    /**
-     * The color of the end of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    endColor?: string;
-    /**
-     * Opacity of the start color.
-     * @default strokeOpacity
-     */
-    startOpacity?: number;
-    /**
-     * Opacity of the end color.
-     * @default strokeOpacity
-     */
-    endOpacity?: number;
-  };
-/**
- * A gradient line component which uses path element.
- */
-export declare const GradientLine: import('react').NamedExoticComponent<GradientLineProps>;
-//# sourceMappingURL=GradientLine.d.ts.map

package/dts/chart/line/GradientLine.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientLine.d.ts","sourceRoot":"","sources":["../../../src/chart/line/GradientLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,eAAe,GAAG,aAAa,CAAC,GAAG;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,YAAY,yDAmDxB,CAAC"}

package/dts/chart/scrubber/ScrubberBeacon.d.ts

@@ -1,75 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-export type ScrubberBeaconRef = {
-  /**
-   * Triggers a single pulse animation.
-   */
-  pulse: () => void;
-};
-export type ScrubberBeaconProps = SharedProps & {
-  /**
-   * Optional data X coordinate to position the beacon.
-   * If not provided, uses the scrubber position from context.
-   */
-  dataX?: number;
-  /**
-   * Optional data Y coordinate to position the beacon.
-   * If not provided, looks up the Y value from series data at scrubber position.
-   */
-  dataY?: number;
-  /**
-   * Filter to only show dot for specific series (used for hover-based positioning).
-   */
-  seriesId?: string;
-  /**
-   * Color of the beacon point.
-   * If not provided, uses the series color.
-   */
-  color?: string;
-  /**
-   * Opacity of the beacon.
-   * @default 1
-   */
-  opacity?: number;
-  /**
-   * Pulse the scrubber beacon while it is at rest.
-   */
-  idlePulse?: boolean;
-};
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- */
-export declare const ScrubberBeacon: import('react').MemoExoticComponent<
-  import('react').ForwardRefExoticComponent<
-    SharedProps & {
-      /**
-       * Optional data X coordinate to position the beacon.
-       * If not provided, uses the scrubber position from context.
-       */
-      dataX?: number;
-      /**
-       * Optional data Y coordinate to position the beacon.
-       * If not provided, looks up the Y value from series data at scrubber position.
-       */
-      dataY?: number;
-      /**
-       * Filter to only show dot for specific series (used for hover-based positioning).
-       */
-      seriesId?: string;
-      /**
-       * Color of the beacon point.
-       * If not provided, uses the series color.
-       */
-      color?: string;
-      /**
-       * Opacity of the beacon.
-       * @default 1
-       */
-      opacity?: number;
-      /**
-       * Pulse the scrubber beacon while it is at rest.
-       */
-      idlePulse?: boolean;
-    } & import('react').RefAttributes<ScrubberBeaconRef>
-  >
->;
-//# sourceMappingURL=ScrubberBeacon.d.ts.map

package/dts/chart/scrubber/ScrubberBeacon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeacon.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAe9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;IAjCzB;;;OAGG;YACK,MAAM;IACd;;;OAGG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;OAGG;YACK,MAAM;IACd;;;OAGG;cACO,MAAM;IAChB;;OAEG;gBACS,OAAO;sDAgMpB,CAAC"}

package/dts/chart/text/SmartChartTextGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SmartChartTextGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/text/SmartChartTextGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAiBF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,gEAwL/B,CAAC"}

package/esm/chart/Point.js

@@ -1,111 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { 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
-    }))]
-  });
-});

package/esm/chart/line/GradientLine.js

@@ -1,62 +0,0 @@
-const _excluded = ["fill", "stroke", "startColor", "endColor", "strokeOpacity", "startOpacity", "endOpacity", "strokeLinecap", "strokeLinejoin", "strokeWidth", "animate"];
-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, useId } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * A gradient line component which uses path element.
- */
-export const GradientLine = /*#__PURE__*/memo(_ref => {
-  var _ref2, _ref3;
-  let {
-      fill = 'none',
-      stroke,
-      startColor,
-      endColor,
-      strokeOpacity = 1,
-      startOpacity = strokeOpacity,
-      endOpacity = strokeOpacity,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
-      strokeWidth = 2,
-      animate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const context = useCartesianChartContext();
-  const theme = useTheme();
-  const patternId = useId();
-  const shouldAnimate = animate != null ? animate : context.animate;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsxs(LinearGradient, {
-        id: patternId,
-        x1: "0%",
-        x2: "0%",
-        y1: "0%",
-        y2: "100%",
-        children: [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: (_ref2 = startColor != null ? startColor : stroke) != null ? _ref2 : theme.color.bgLine,
-          stopOpacity: startOpacity
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: (_ref3 = endColor != null ? endColor : stroke) != null ? _ref3 : theme.color.bgLine,
-          stopOpacity: endOpacity
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      animate: shouldAnimate,
-      clipOffset: strokeWidth,
-      fill: fill,
-      stroke: "url(#" + patternId + ")",
-      strokeLinecap: strokeLinecap,
-      strokeLinejoin: strokeLinejoin,
-      strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
-    }, props))]
-  });
-});

package/esm/chart/scrubber/ScrubberBeacon.js

@@ -1,199 +0,0 @@
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
-import Reanimated, { cancelAnimation, useAnimatedProps, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
-import { Circle, G } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import { useTheme } from '@coinbase/cds-mobile';
-import { useCartesianChartContext } from '../ChartProvider';
-import { projectPoint, useScrubberContext } from '../utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedCircle = Reanimated.createAnimatedComponent(Circle);
-const radius = 5;
-const glowRadius = 10;
-const pulseRadius = 15;
-const pulseDuration = 2000; // 2 seconds
-const singlePulseDuration = 1000; // 1 second
-
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- */
-export const ScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  var _pixelCoordinate$x, _pixelCoordinate$y, _ref2;
-  let {
-    seriesId,
-    dataX: dataXProp,
-    dataY: dataYProp,
-    color,
-    testID,
-    idlePulse,
-    opacity = 1
-  } = _ref;
-  const theme = useTheme();
-  const {
-    getSeries,
-    getXScale,
-    getYScale,
-    getSeriesData,
-    animate
-  } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const targetSeries = getSeries(seriesId);
-  const sourceData = getSeriesData(seriesId);
-  const xScale = getXScale();
-  const yScale = getYScale(targetSeries == null ? void 0 : targetSeries.yAxisId);
-  const isIdleState = scrubberPosition === undefined;
-  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 previousIdleState = usePreviousValue(!!isIdleState);
-  const pixelCoordinate = useMemo(() => {
-    if (!xScale || !yScale || dataX === undefined || dataY === undefined) return undefined;
-    const point = projectPoint({
-      x: dataX,
-      y: dataY,
-      xScale,
-      yScale
-    });
-
-    // Return undefined if coordinates are invalid
-    if (!point || isNaN(point.x) || isNaN(point.y)) return undefined;
-    return point;
-  }, [xScale, yScale, dataX, dataY]);
-  const animatedX = useSharedValue((_pixelCoordinate$x = pixelCoordinate == null ? void 0 : pixelCoordinate.x) != null ? _pixelCoordinate$x : 0);
-  const animatedY = useSharedValue((_pixelCoordinate$y = pixelCoordinate == null ? void 0 : pixelCoordinate.y) != null ? _pixelCoordinate$y : 0);
-  const pulseOpacity = useSharedValue(0);
-  useImperativeHandle(ref, () => ({
-    pulse: () => {
-      if (isIdleState && animate) {
-        pulseOpacity.value = 0.1;
-        pulseOpacity.value = withTiming(0, {
-          duration: singlePulseDuration
-        });
-      }
-    }
-  }));
-  useEffect(() => {
-    const shouldPulse = animate && isIdleState && idlePulse;
-    if (shouldPulse) {
-      pulseOpacity.value = withRepeat(withSequence(withTiming(0.1, {
-        duration: pulseDuration / 2
-      }), withTiming(0, {
-        duration: pulseDuration / 2
-      })), -1,
-      // loop
-      false);
-    } else {
-      cancelAnimation(pulseOpacity);
-      pulseOpacity.value = withTiming(0, {
-        duration: 200
-      });
-    }
-  }, [animate, isIdleState, idlePulse, pulseOpacity]);
-
-  // Update position when data coordinates change
-  useEffect(() => {
-    if (!pixelCoordinate) return;
-
-    // When scrubbing or animations disabled: snap immediately
-    if (!isIdleState || !animate || !previousIdleState) {
-      // Cancel any ongoing animations before snapping
-      cancelAnimation(animatedX);
-      cancelAnimation(animatedY);
-      animatedX.value = pixelCoordinate.x;
-      animatedY.value = pixelCoordinate.y;
-    } else {
-      // When idle with animations enabled: animate smoothly
-      animatedX.value = withTiming(pixelCoordinate.x, {
-        duration: 300
-      });
-      animatedY.value = withTiming(pixelCoordinate.y, {
-        duration: 300
-      });
-    }
-  }, [pixelCoordinate, isIdleState, animate, previousIdleState, animatedX, animatedY]);
-
-  // Animated props for all circles in idle state
-  const glowAnimatedProps = useAnimatedProps(() => ({
-    cx: animatedX.value,
-    cy: animatedY.value
-  }));
-  const pointAnimatedProps = useAnimatedProps(() => ({
-    cx: animatedX.value,
-    cy: animatedY.value
-  }));
-  const pulseAnimatedProps = useAnimatedProps(() => ({
-    cx: animatedX.value,
-    cy: animatedY.value,
-    opacity: pulseOpacity.value
-  }));
-  if (!pixelCoordinate) return;
-  const pointColor = (_ref2 = color != null ? color : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
-  if (!isIdleState) {
-    return /*#__PURE__*/_jsxs(G, {
-      opacity: opacity,
-      testID: testID,
-      children: [/*#__PURE__*/_jsx(Circle, {
-        cx: pixelCoordinate.x,
-        cy: pixelCoordinate.y,
-        fill: pointColor,
-        opacity: 0.15,
-        r: glowRadius
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: pixelCoordinate.x,
-        cy: pixelCoordinate.y,
-        fill: pointColor,
-        r: radius,
-        stroke: theme.color.bg,
-        strokeWidth: 2
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(G, {
-    opacity: opacity,
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(AnimatedCircle, {
-      animatedProps: glowAnimatedProps,
-      fill: pointColor,
-      opacity: 0.15,
-      r: glowRadius
-    }), /*#__PURE__*/_jsx(AnimatedCircle, {
-      animatedProps: pulseAnimatedProps,
-      fill: pointColor,
-      r: pulseRadius
-    }), /*#__PURE__*/_jsx(AnimatedCircle, {
-      animatedProps: pointAnimatedProps,
-      fill: pointColor,
-      r: radius,
-      stroke: theme.color.bg,
-      strokeWidth: 2
-    })]
-  });
-}));