@coinbase/cds-mobile-visualization 3.4.0-beta.18 → 3.4.0-beta.19

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -1,13 +1,11 @@
 const _excluded = ["dataX", "dataY"],
   _excluded2 = ["label"],
-  _excluded3 = ["style"],
-  _excluded4 = ["x", "y", "width", "height", "originY", "dataX"];
+  _excluded3 = ["style"];
 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 { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
@@ -23,16 +21,15 @@ import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader
 import { Pressable } from '@coinbase/cds-mobile/system';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, FontWeight, Group, Line as SkiaLine, Rect, Skia, TextAlign } from '@shopify/react-native-skia';
+import { Circle, FontWeight, Group, Skia, TextAlign } from '@shopify/react-native-skia';
 import { Area, DottedArea } from '../../area';
 import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
-import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
 import { Point } from '../../point';
 import { DefaultScrubberBeacon, Scrubber } from '../../scrubber';
-import { buildTransition, defaultTransition, getPointOnSerializableScale, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
+import { buildTransition, defaultTransition, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
 import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function MultipleLine() {
@@ -1180,210 +1177,6 @@ function Performance() {
     })]
   });
 }
-const candlestickStockData = btcCandles.slice(0, 90).reverse();
-const CandlesticksHeader = /*#__PURE__*/memo(_ref11 => {
-  let {
-    currentIndex
-  } = _ref11;
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(parseFloat(price));
-  }, []);
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const currentText = useMemo(() => {
-    if (currentIndex !== undefined) {
-      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
-    }
-    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
-  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
-  return /*#__PURE__*/_jsx(Text, {
-    "aria-live": "polite",
-    font: "headline",
-    children: currentText
-  });
-});
-const CandlesticksChart = /*#__PURE__*/memo(_ref12 => {
-  let {
-    infoTextId,
-    onScrubberPositionChange
-  } = _ref12;
-  const theme = useTheme();
-  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
-  const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-    strokeWidth: 1
-  })));
-
-  // Custom line component that renders a rect to highlight the entire bandwidth
-  const BandwidthHighlight = /*#__PURE__*/memo(_ref13 => {
-    let {
-      stroke
-    } = _ref13;
-    const {
-      getXSerializableScale,
-      drawingArea
-    } = useCartesianChartContext();
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const rectWidth = useMemo(() => {
-      if (xScale !== undefined && xScale.type === 'band') {
-        return xScale.bandwidth;
-      }
-      return 0;
-    }, [xScale]);
-    const xPos = useDerivedValue(() => {
-      const position = unwrapAnimatedValue(scrubberPosition);
-      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
-      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
-    }, [scrubberPosition, xScale]);
-    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
-    return /*#__PURE__*/_jsx(Rect, {
-      color: stroke,
-      height: drawingArea.height,
-      opacity: opacity,
-      width: rectWidth,
-      x: xPos,
-      y: drawingArea.y
-    });
-  });
-  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
-  const CandlestickBarComponent = /*#__PURE__*/memo(_ref14 => {
-    var _yScale, _yScale2;
-    let {
-        x,
-        y,
-        width,
-        height,
-        dataX
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded4);
-    const {
-      getYScale
-    } = useCartesianChartContext();
-    const yScale = getYScale();
-    const wickX = x + width / 2;
-    const timePeriodValue = candlestickStockData[dataX];
-    const open = parseFloat(timePeriodValue.open);
-    const close = parseFloat(timePeriodValue.close);
-    const bullish = open < close;
-    const theme = useTheme();
-    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
-    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
-    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
-    const bodyHeight = Math.abs(openY - closeY);
-    const bodyY = openY < closeY ? openY : closeY;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SkiaLine, {
-        color: color,
-        p1: {
-          x: wickX,
-          y
-        },
-        p2: {
-          x: wickX,
-          y: y + height
-        },
-        strokeWidth: 1
-      }), /*#__PURE__*/_jsx(Rect, {
-        color: color,
-        height: bodyHeight,
-        width: width,
-        x: x,
-        y: bodyY
-      })]
-    });
-  });
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const formatTime = useCallback(index => {
-    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
-    const ts = parseInt(candlestickStockData[index].start);
-    return new Date(ts * 1000).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    animate: false,
-    "aria-labelledby": infoTextId,
-    borderRadius: 0,
-    height: 150,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 0,
-      right: 0
-    },
-    onScrubberPositionChange: onScrubberPositionChange,
-    series: [{
-      id: 'stock-prices',
-      data: candlesData
-    }],
-    xAxis: {
-      scaleType: 'band'
-    },
-    yAxis: {
-      domain: {
-        min
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      tickLabelFormatter: formatTime
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      GridLineComponent: ThinSolidLine,
-      tickLabelFormatter: formatThousandsPriceNumber,
-      width: 40
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true,
-      LineComponent: BandwidthHighlight,
-      lineStroke: theme.color.fgMuted,
-      seriesIds: []
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      BarComponent: CandlestickBarComponent,
-      BarStackComponent: _ref15 => {
-        let {
-          children
-        } = _ref15;
-        return /*#__PURE__*/_jsx("g", {
-          children: children
-        });
-      }
-    })]
-  });
-});
-function Candlesticks() {
-  const infoTextId = useId();
-  const [currentIndex, setCurrentIndex] = useState();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
-      currentIndex: currentIndex
-    }), /*#__PURE__*/_jsx(CandlesticksChart, {
-      infoTextId: infoTextId,
-      onScrubberPositionChange: setCurrentIndex
-    })]
-  });
-}
 function MonotoneAssetPrice() {
   const theme = useTheme();
   const prices = sparklineInteractiveData.hour;
@@ -1457,14 +1250,14 @@ function MonotoneAssetPrice() {
     dy: -12,
     horizontalAlignment: "left"
   })), []);
-  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref16 => {
+  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
       dataX,
       dataY,
       seriesId,
       isIdle,
       animate = true
-    } = _ref16;
+    } = _ref11;
     const {
       getSeries,
       getXSerializableScale,
@@ -1540,10 +1333,10 @@ function MonotoneAssetPrice() {
       color: theme.color.fg,
       gradient: {
         axis: 'x',
-        stops: _ref17 => {
+        stops: _ref12 => {
           let {
             min
-          } = _ref17;
+          } = _ref12;
           return [{
             offset: min,
             color: theme.color.fg,
@@ -1557,10 +1350,10 @@ function MonotoneAssetPrice() {
       }
     }],
     xAxis: {
-      range: _ref18 => {
+      range: _ref13 => {
         let {
           max
-        } = _ref18;
+        } = _ref13;
         return {
           min: 96,
           max
@@ -1611,11 +1404,11 @@ function ServiceAvailability() {
       id: 'availability',
       data: availabilityEvents.map(event => event.availability),
       gradient: {
-        stops: _ref19 => {
+        stops: _ref14 => {
           let {
             min,
             max
-          } = _ref19;
+          } = _ref14;
           return [{
             offset: min,
             color: theme.color.fgNegative
@@ -1642,11 +1435,11 @@ function ServiceAvailability() {
       data: availabilityEvents.map(event => event.date.getTime())
     },
     yAxis: {
-      domain: _ref20 => {
+      domain: _ref15 => {
         let {
           min,
           max
-        } = _ref20;
+        } = _ref15;
         return {
           min: Math.max(min - 2, 0),
           max: Math.min(max + 2, 100)
@@ -2059,11 +1852,11 @@ function ExampleNavigator() {
       }],
       xAxis: {
         // Give space before the end of the chart for the scrubber
-        range: _ref21 => {
+        range: _ref16 => {
           let {
             min,
             max
-          } = _ref21;
+          } = _ref16;
           return {
             min,
             max: max - 24
@@ -2094,9 +1887,6 @@ function ExampleNavigator() {
   }, {
     title: 'Performance',
     component: /*#__PURE__*/_jsx(Performance, {})
-  }, {
-    title: 'Candlesticks',
-    component: /*#__PURE__*/_jsx(Candlesticks, {})
   }, {
     title: 'Monotone Asset Price',
     component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
@@ -2118,6 +1908,7 @@ function ExampleNavigator() {
     setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
   }, [examples.length]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 4,
       children: [/*#__PURE__*/_jsxs(HStack, {

package/esm/chart/line/__stories__/ReferenceLine.stories.js

@@ -1,9 +1,14 @@
 const _excluded = ["accentColor", "yellowColor"];
 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, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { useDerivedValue, withTiming } from 'react-native-reanimated';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { Scrubber } from '../../scrubber';
+import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
 import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
 import { DottedLine } from '../DottedLine';
 import { LineChart } from '../LineChart';
@@ -126,7 +131,96 @@ const ReferenceLineStories = () => {
           stroke: theme.color.bgWarning
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Price Reference Line",
+      children: /*#__PURE__*/_jsx(StartPriceReferenceLine, {})
     })]
   });
 };
+const FADE_ZONE = 128;
+const StartPriceLabel = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const opacity = useDerivedValue(() => {
+    if (scrubberPosition.value === undefined) return withTiming(0, {
+      duration: 250
+    });
+    if (!xScale) return withTiming(1, {
+      duration: 250
+    });
+    const scrubX = getPointOnSerializableScale(scrubberPosition.value, xScale);
+    const rightEdge = drawingArea.x + drawingArea.width;
+    const target = rightEdge - scrubX >= FADE_ZONE ? 1 : 0;
+    return withTiming(target, {
+      duration: 250
+    });
+  }, [scrubberPosition, xScale, drawingArea]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    font: "label1",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    },
+    opacity: opacity
+  }));
+});
+function StartPriceReferenceLine() {
+  const theme = useTheme();
+  const hourData = useMemo(() => sparklineInteractiveData.hour, []);
+  const startPrice = hourData[0].value;
+  const endPrice = hourData[hourData.length - 1].value;
+  const isPositive = endPrice >= startPrice;
+  const seriesColor = isPositive ? theme.color.fgPositive : theme.color.fgNegative;
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    areaType: "dotted",
+    height: 300,
+    inset: 0,
+    series: [{
+      id: 'hourly-prices',
+      data: hourData.map(d => d.value),
+      color: seriesColor
+    }],
+    xAxis: {
+      range: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min,
+          max: max - 24
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: StartPriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startPrice,
+      label: startPrice.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }),
+      labelDx: -12,
+      labelHorizontalAlignment: "right",
+      stroke: theme.color.fgMuted
+    })]
+  });
+}
 export default ReferenceLineStories;

package/esm/chart/point/Point.js

@@ -5,7 +5,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Circle, Group, interpolateColors } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { projectPoint } from '../utils';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultPointLabel } from './DefaultPointLabel';
 
 /**
@@ -27,7 +27,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
     labelPosition = 'center',
     labelOffset,
     labelFont,
-    transition = defaultTransition,
+    transitions,
+    transition,
     animate: animateProp
   } = _ref;
   const theme = useTheme();
@@ -43,6 +44,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
   const shouldAnimate = animate != null ? animate : false;
+  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
 
   // Calculate pixel coordinates from data coordinates
   const pixelCoordinate = useMemo(() => {
@@ -62,9 +65,13 @@ export const Point = /*#__PURE__*/memo(_ref => {
   // Animated values for position
   const animatedX = useSharedValue(0);
   const animatedY = useSharedValue(0);
-
-  // Animated value for color interpolation (0 = old color, 1 = new color)
+  const enterOpacity = useSharedValue(shouldAnimate ? 0 : 1);
   const colorProgress = useSharedValue(1);
+  const isReady = !!xScale && !!yScale;
+  useEffect(() => {
+    if (!shouldAnimate || !isReady) return;
+    enterOpacity.value = buildTransition(1, enterTransition);
+  }, [shouldAnimate, isReady, enterTransition, enterOpacity]);
 
   // Update position when coordinates change
   useEffect(() => {
@@ -72,26 +79,26 @@ export const Point = /*#__PURE__*/memo(_ref => {
       return;
     }
     if (shouldAnimate && previousPixelCoordinate) {
-      animatedX.value = buildTransition(pixelCoordinate.x, transition);
-      animatedY.value = buildTransition(pixelCoordinate.y, transition);
+      animatedX.value = buildTransition(pixelCoordinate.x, updateTransition);
+      animatedY.value = buildTransition(pixelCoordinate.y, updateTransition);
     } else {
       cancelAnimation(animatedX);
       cancelAnimation(animatedY);
       animatedX.value = pixelCoordinate.x;
       animatedY.value = pixelCoordinate.y;
     }
-  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, transition]);
+  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, updateTransition]);
 
   // Update color when fill changes
   useEffect(() => {
     if (shouldAnimate && previousFill && previousFill !== fill) {
       colorProgress.value = 0;
-      colorProgress.value = buildTransition(1, transition);
+      colorProgress.value = buildTransition(1, updateTransition);
     } else {
       cancelAnimation(colorProgress);
       colorProgress.value = 1;
     }
-  }, [fill, shouldAnimate, previousFill, colorProgress, transition]);
+  }, [fill, shouldAnimate, previousFill, colorProgress, updateTransition]);
 
   // Create animated point for circles
   const animatedPoint = useDerivedValue(() => {
@@ -108,24 +115,19 @@ export const Point = /*#__PURE__*/memo(_ref => {
     }
     return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
   }, [colorProgress, previousFill, fill]);
-
-  // Check if point is within drawing area
-  const isWithinDrawingArea = useDerivedValue(() => {
-    return animatedX.value >= drawingArea.x && animatedX.value <= drawingArea.x + drawingArea.width && animatedY.value >= drawingArea.y && animatedY.value <= drawingArea.y + drawingArea.height;
-  }, [animatedX, animatedY, drawingArea]);
-
-  // Compute effective opacity based on drawing area bounds
+  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]);
   const effectiveOpacity = useDerivedValue(() => {
     const baseOpacity = opacity != null ? opacity : 1;
-    return isWithinDrawingArea.value ? baseOpacity : 0;
-  }, [isWithinDrawingArea, opacity]);
+    return isWithinDrawingArea ? baseOpacity * enterOpacity.value : 0;
+  }, [isWithinDrawingArea, opacity, enterOpacity]);
   const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
   if (!pixelCoordinate) {
     return null;
   }
-
-  // If animation is disabled or on first render, use static rendering
-  if (!shouldAnimate || !previousPixelCoordinate) {
+  if (!shouldAnimate) {
     const isWithinBounds = pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
     const staticOpacity = isWithinBounds ? opacity != null ? opacity : 1 : 0;
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -159,20 +161,16 @@ export const Point = /*#__PURE__*/memo(_ref => {
       })]
     });
   }
-
-  // Animated rendering
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Group, {
-      opacity: effectiveOpacity,
-      children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: stroke,
-        r: radius + strokeWidth / 2
-      }), /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: animatedFillColor,
-        r: radius - strokeWidth / 2
-      })]
+  return /*#__PURE__*/_jsxs(Group, {
+    opacity: effectiveOpacity,
+    children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: stroke,
+      r: radius + strokeWidth / 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      c: animatedPoint,
+      color: animatedFillColor,
+      r: radius - strokeWidth / 2
     }), label && /*#__PURE__*/_jsx(LabelComponent, {
       dataX: dataX,
       dataY: dataY,

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -5,7 +5,7 @@ import { Circle, Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { unwrapAnimatedValue } from '../utils';
 import { projectPointWithSerializableScale } from '../utils/point';
-import { buildTransition, defaultTransition } from '../utils/transition';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultRadius = 5;
 const defaultStrokeWidth = 2;
@@ -48,10 +48,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _ref2;
     return (_ref2 = colorProp != null ? colorProp : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
   }, [colorProp, targetSeries == null ? void 0 : targetSeries.color, theme.color.fgPrimary]);
-  const updateTransition = useMemo(() => {
-    var _transitions$update;
-    return (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : defaultTransition;
-  }, [transitions == null ? void 0 : transitions.update]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const pulseTransition = useMemo(() => {
     var _transitions$pulse;
     return (_transitions$pulse = transitions == null ? void 0 : transitions.pulse) != null ? _transitions$pulse : defaultPulseTransition;

package/esm/chart/scrubber/Scrubber.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
-import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Group, Rect } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ReferenceLine } from '../line';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnSerializableScale, useScrubberContext } from '../utils';
+import { defaultAccessoryEnterTransition, getPointOnSerializableScale, getTransition, useScrubberContext } from '../utils';
+import { buildTransition } from '../utils/transition';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
@@ -35,6 +36,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     beaconLabelFont,
     idlePulse,
     beaconTransitions,
+    transitions = beaconTransitions,
     beaconStroke
   } = _ref;
   const theme = useTheme();
@@ -124,13 +126,12 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     }))) != null ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
   const isReady = !!xScale;
+  const groupEnterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
   useEffect(() => {
     if (animate && isReady) {
-      scrubberOpacity.value = withDelay(accessoryFadeTransitionDelay, withTiming(1, {
-        duration: accessoryFadeTransitionDuration
-      }));
+      scrubberOpacity.value = buildTransition(1, groupEnterTransition);
     }
-  }, [animate, isReady, scrubberOpacity]);
+  }, [animate, isReady, scrubberOpacity, groupEnterTransition]);
   if (!isReady) return;
   return /*#__PURE__*/_jsxs(Group, {
     opacity: scrubberOpacity,
@@ -157,14 +158,15 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
       stroke: beaconStroke,
-      transitions: beaconTransitions
+      transitions: transitions
     }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,
       labelMinGap: beaconLabelMinGap,
       labelPreferredSide: beaconLabelPreferredSide,
-      labels: beaconLabels
+      labels: beaconLabels,
+      transitions: transitions
     })]
   });
 }));