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

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -1,9 +1,10 @@
 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, useMemo, useState } from 'react';
-import { useDerivedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useCartesianChartContext } from '../ChartProvider';
-import { applySerializableScale, useScrubberContext } from '../utils';
+import { applySerializableScale, unwrapAnimatedValue, useScrubberContext } from '../utils';
 import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
 import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PositionedLabel = /*#__PURE__*/memo(_ref => {
@@ -11,6 +12,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     index,
     positions,
     position,
+    isIdle,
+    updateTransition,
     label,
     color,
     seriesId,
@@ -24,10 +27,21 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     var _positions$value$inde, _positions$value$inde2;
     return (_positions$value$inde = (_positions$value$inde2 = positions.value[index]) == null ? void 0 : _positions$value$inde2.x) != null ? _positions$value$inde : 0;
   }, [positions, index]);
-  const y = useDerivedValue(() => {
+  const targetY = useDerivedValue(() => {
     var _positions$value$inde3, _positions$value$inde4;
     return (_positions$value$inde3 = (_positions$value$inde4 = positions.value[index]) == null ? void 0 : _positions$value$inde4.y) != null ? _positions$value$inde3 : 0;
   }, [positions, index]);
+  const animatedY = useSharedValue(0);
+  useAnimatedReaction(() => ({
+    y: targetY.value,
+    idle: unwrapAnimatedValue(isIdle)
+  }), (current, previous) => {
+    if (previous === null || !previous.idle || !current.idle) {
+      animatedY.value = current.y;
+    } else {
+      animatedY.value = buildTransition(current.y, updateTransition);
+    }
+  }, [updateTransition]);
   const dx = useDerivedValue(() => {
     return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
   }, [position, labelHorizontalOffset]);
@@ -42,7 +56,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     opacity: opacity,
     seriesId: seriesId,
     x: x,
-    y: y
+    y: animatedY
   });
 });
 export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
@@ -52,7 +66,8 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelHorizontalOffset = 16,
     labelFont,
     labelPreferredSide = 'right',
-    BeaconLabelComponent = DefaultScrubberBeaconLabel
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions
   } = _ref2;
   const {
     getSeries,
@@ -61,11 +76,16 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     getYSerializableScale,
     getXAxis,
     drawingArea,
-    dataLength
+    dataLength,
+    animate
   } = useCartesianChartContext();
   const {
     scrubberPosition
   } = useScrubberContext();
+  const isIdle = useDerivedValue(() => {
+    return scrubberPosition.value === undefined;
+  }, [scrubberPosition]);
+  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
   const [labelDimensions, setLabelDimensions] = useState({});
   const handleDimensionsChange = useCallback((id, dimensions) => {
     setLabelDimensions(prev => {
@@ -174,13 +194,15 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       BeaconLabelComponent: BeaconLabelComponent,
       color: labelInfo.color,
       index: index,
+      isIdle: isIdle,
       label: labelInfo.label,
       labelFont: labelFont,
       labelHorizontalOffset: labelHorizontalOffset,
       onDimensionsChange: handleDimensionsChange,
       position: currentPosition,
       positions: allLabelPositions,
-      seriesId: info.seriesId
+      seriesId: info.seriesId,
+      updateTransition: updateTransition
     }, info.seriesId);
   });
 });

package/esm/chart/utils/bar.js

@@ -1,3 +1,46 @@
+const _excluded = ["staggerDelay"];
+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 { defaultTransition } from './transition';
+
+/**
+ * A bar-specific transition that extends Transition with stagger support.
+ * When `staggerDelay` is provided, bars will animate with increasing delays
+ * based on their horizontal position (leftmost starts first, rightmost last).
+ *
+ * @example
+ * // Bars stagger in from left to right over 250ms, each animating for 750ms
+ * { type: 'timing', duration: 750, staggerDelay: 250 }
+ */
+
+/**
+ * Strips `staggerDelay` from a transition and computes a positional delay.
+ *
+ * @param transition - The transition config (may include staggerDelay)
+ * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @returns A standard Transition with computed delay
+ */
+export const withStaggerDelayTransition = (transition, normalizedX) => {
+  var _baseTransition$delay;
+  const {
+      staggerDelay
+    } = transition,
+    baseTransition = _objectWithoutPropertiesLoose(transition, _excluded);
+  if (!staggerDelay) return transition;
+  return _extends({}, baseTransition, {
+    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedX * staggerDelay
+  });
+};
+
+/**
+ * Default bar enter transition. Uses the default spring with a stagger delay
+ * so bars spring into place from left to right.
+ * `{ type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }`
+ */
+export const defaultBarEnterTransition = _extends({}, defaultTransition, {
+  staggerDelay: 250
+});
+
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

package/esm/chart/utils/path.js

@@ -1,6 +1,14 @@
 import { area as d3Area, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
 import { projectPoint, projectPoints } from './point';
 import { isCategoricalScale } from './scale';
+/**
+ * Default enter transition for path-based components (Line, Area).
+ * `{ type: 'timing', duration: 500 }`
+ */
+export const defaultPathEnterTransition = {
+  type: 'timing',
+  duration: 500
+};
 /**
  * Get the d3 curve function for a path.
  * See https://d3js.org/d3-shape/curve

package/esm/chart/utils/transition.js

@@ -1,5 +1,7 @@
+const _excluded = ["delay"];
+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 { useEffect, useMemo, useRef } from 'react';
-import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
 import { notifyChange, Skia } from '@shopify/react-native-skia';
 import { interpolatePath } from 'd3-interpolate-path';
 
@@ -18,7 +20,8 @@ import { interpolatePath } from 'd3-interpolate-path';
  */
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -26,6 +29,15 @@ export const defaultTransition = {
   damping: 120
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'timing',
+  duration: 0
+};
+
 /**
  * Duration in milliseconds for accessory elements to fade in.
  */
@@ -37,41 +49,23 @@ export const accessoryFadeTransitionDuration = 150;
 export const accessoryFadeTransitionDelay = 350;
 
 /**
- * Custom hook that uses d3-interpolate-path for more robust path interpolation.
- * then use Skia's native interpolation in the worklet.
- *
- * @param progress - Shared value between 0 and 1
- * @param fromPath - Starting path as SVG string
- * @param toPath - Ending path as SVG string
- * @returns Interpolated SkPath as a shared value
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
  */
-export const useD3PathInterpolation = (progress, fromPath, toPath) => {
-  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
-  const {
-    fromSkiaPath,
-    i0,
-    i1,
-    toSkiaPath
-  } = useMemo(() => {
-    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
-    const pathInterpolator = interpolatePath(fromPath, toPath);
-    const d = 1e-3;
-    return {
-      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
-      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
-      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
-      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
-    };
-  }, [fromPath, toPath]);
-  const result = useSharedValue(fromSkiaPath);
-  useAnimatedReaction(() => progress.value, t => {
-    'worklet';
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
 
-    var _i1$interpolate;
-    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
-    notifyChange(result);
-  }, [fromSkiaPath, i0, i1, toSkiaPath]);
-  return result;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return instantTransition;
+  return value != null ? value : defaultValue;
 };
 
 // Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
@@ -114,21 +108,32 @@ export const useInterpolator = (factory, value, interpolator, input, output, opt
 export const buildTransition = (targetValue, transition) => {
   'worklet';
 
-  switch (transition.type) {
+  const {
+      delay: delayMs
+    } = transition,
+    config = _objectWithoutPropertiesLoose(transition, _excluded);
+  let animation;
+  switch (config.type) {
     case 'timing':
       {
-        return withTiming(targetValue, transition);
+        animation = withTiming(targetValue, config);
+        break;
       }
     case 'spring':
       {
-        return withSpring(targetValue, transition);
+        animation = withSpring(targetValue, config);
+        break;
       }
     default:
       {
-        // Fallback to default transition config
-        return withSpring(targetValue, defaultTransition);
+        animation = withSpring(targetValue, defaultTransition);
+        break;
       }
   }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
 };
 
 /**
@@ -136,15 +141,16 @@ export const buildTransition = (targetValue, transition) => {
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns Animated SkPath as a shared value
  *
  * @example
  * // Simple path transition
  * const path = usePathTransition({
  *   currentPath: d ?? '',
- *   animate: shouldAnimate,
- *   transition: { type: 'timing', duration: 3000 }
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
  * });
  *
  * @example
@@ -152,34 +158,63 @@ export const buildTransition = (targetValue, transition) => {
  * const path = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   animate: true,
- *   transition: { type: 'timing', duration: 300 }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
+  var _transitions$update, _Skia$Path$MakeFromSV;
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  // Track the previous path - updated in useEffect AFTER render,
-  // so during render it naturally holds the "from" path value
-  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const updateTransition = (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition;
+  const enterTransition = transitions == null ? void 0 : transitions.enter;
+  const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const isFirstAnimation = useRef(!!initialPath);
+  const interpolatorRef = useRef(null);
   const progress = useSharedValue(0);
-
-  // During render: previousPathRef still has old value, currentPath is new
-  const fromPath = previousPathRef.current;
-  const toPath = currentPath;
+  const initialSkiaPath = (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  const normalizedStartShared = useSharedValue(initialSkiaPath);
+  const normalizedEndShared = useSharedValue(initialSkiaPath);
+  const fallbackPathShared = useSharedValue(initialSkiaPath);
+  const result = useSharedValue(initialSkiaPath);
   useEffect(() => {
-    const shouldAnimate = previousPathRef.current !== currentPath;
-    if (shouldAnimate) {
-      // Update ref for next path change (happens after this render)
-      previousPathRef.current = currentPath;
-
-      // Animate from old path to new path
+    if (targetPathRef.current !== currentPath) {
+      var _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+      let fromPath = targetPathRef.current;
+      if (interpolatorRef.current) {
+        const p = Math.min(Math.max(progress.value, 0), 1);
+        fromPath = interpolatorRef.current(p);
+      }
+      targetPathRef.current = currentPath;
+      const pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(0))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
       progress.value = 0;
-      progress.value = buildTransition(1, transition);
+      progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, transition, progress]);
-  return useD3PathInterpolation(progress, fromPath, toPath);
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared]);
+  useAnimatedReaction(() => ({
+    p: progress.value,
+    to: fallbackPathShared.value
+  }), _ref2 => {
+    'worklet';
+
+    var _normalizedEndShared$;
+    let {
+      p
+    } = _ref2;
+    result.value = (_normalizedEndShared$ = normalizedEndShared.value.interpolate(normalizedStartShared.value, p)) != null ? _normalizedEndShared$ : fallbackPathShared.value;
+    notifyChange(result);
+  }, []);
+  return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.18",
+  "version": "3.4.0-beta.19",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.43.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.43.0",
+    "@coinbase/cds-mobile": "^8.48.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.43.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.43.0",
+    "@coinbase/cds-mobile": "^8.48.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",

package/esm/chart/__stories__/Chart.stories.js

@@ -1,77 +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 { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { CartesianChart, DottedArea, Line, LineChart, SolidLine } from '../';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultChartHeight = 250;
-const BasicLineChart = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
-  return /*#__PURE__*/_jsx(LineChart, {
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
-    }],
-    yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
-      showGrid: true
-    }
-  });
-};
-const LineStyles = () => {
-  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
-  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
-  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
-  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'top',
-      data: topChartData
-    }, {
-      id: 'upperMiddle',
-      data: upperMiddleChartData,
-      color: '#ef4444'
-    }, {
-      id: 'lowerMiddle',
-      data: lowerMiddleChartData,
-      color: '#f59e0b'
-    }, {
-      id: 'bottom',
-      data: bottomChartData,
-      color: '#800080'
-    }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      seriesId: "top"
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "upperMiddle",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-        strokeWidth: 4
-      })),
-      curve: "natural",
-      seriesId: "lowerMiddle"
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: DottedArea,
-      curve: "step",
-      seriesId: "bottom"
-    })]
-  });
-};
-const ChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic Line Chart",
-      children: /*#__PURE__*/_jsx(BasicLineChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Line Styles",
-      children: /*#__PURE__*/_jsx(LineStyles, {})
-    })]
-  });
-};
-export default ChartStories;