@coinbase/cds-mobile-visualization 3.4.0-beta.9 → 3.6.1

package/esm/chart/ChartContextBridge.js

@@ -6,6 +6,17 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 
 import * as React from 'react';
+import { ThemeContext } from '@coinbase/cds-mobile/system/ThemeProvider';
+import { ScrubberContext } from './utils/context';
+import { CartesianChartContext } from './ChartProvider';
+
+/**
+ * Whitelist of contexts that should be bridged to the Skia canvas.
+ * Only these contexts will be made available inside the chart's Skia tree.
+ * This improves performance by avoiding the overhead of rendering every bridged context.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BRIDGED_CONTEXTS = [ThemeContext, CartesianChartContext, ScrubberContext];
 
 /**
  * Represents a react-internal tree node.
@@ -14,7 +25,7 @@ import * as React from 'react';
 /**
  * Represents a tree node selector for traversal.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+
 /**
  * Traverses up or down a React tree, return `true` to stop and select a node.
  */
@@ -104,7 +115,7 @@ function useTreeNode() {
   return treeNode;
 }
 /**
- * Returns a map of all contexts and their values.
+ * Returns a map of whitelisted contexts and their values.
  */
 function useContextMap() {
   const treeNode = useTreeNode();
@@ -118,7 +129,7 @@ function useContextMap() {
       // https://github.com/facebook/react/pull/28226
       const enableRenderableContext = node.type._context === undefined && node.type.Provider === node.type;
       const context = enableRenderableContext ? node.type : node.type._context;
-      if (context && context !== TreeNodeContext && !contextMap.has(context)) {
+      if (context && context !== TreeNodeContext && BRIDGED_CONTEXTS.includes(context) && !contextMap.has(context)) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         contextMap.set(context, React.useContext(wrapContext(context)));
       }

package/esm/chart/ChartProvider.js

@@ -1,9 +1,9 @@
 import { createContext, useContext } from 'react';
-const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export 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.');
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See https://cds.coinbase.com/components/charts/CartesianChart.');
   }
   return context;
 };

package/esm/chart/Path.js

@@ -1,11 +1,12 @@
-const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"],
-  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"];
+const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions"],
+  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions", "transition"];
 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, useEffect, useMemo } from 'react';
-import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
-import { usePathTransition } from './utils/transition';
+import { defaultPathEnterTransition } from './utils/path';
+import { buildTransition, defaultTransition, getTransition, usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
 import { unwrapAnimatedValue } from './utils';
 
@@ -26,17 +27,14 @@ const AnimatedPath = /*#__PURE__*/memo(_ref => {
       strokeCap,
       strokeJoin,
       children,
-      transition
+      transitions
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const isDAnimated = typeof d !== 'string';
-
-  // When d is animated, usePathTransition handles static path transitions.
-  // For animated d values, we skip usePathTransition and use useDerivedValue directly.
   const animatedPath = usePathTransition({
     currentPath: isDAnimated ? '' : d,
     initialPath,
-    transition
+    transitions
   });
   const isFilled = fill !== undefined && fill !== 'none';
   const isStroked = stroke !== undefined && stroke !== 'none';
@@ -84,28 +82,56 @@ export const Path = /*#__PURE__*/memo(props => {
       strokeCap,
       strokeJoin,
       children,
+      transitions,
       transition
     } = props,
     pathProps = _objectWithoutPropertiesLoose(props, _excluded2);
   const context = useCartesianChartContext();
   const rect = clipRect != null ? clipRect : context.drawingArea;
   const animate = animateProp != null ? animateProp : context.animate;
+  const isReady = !!context.getXScale();
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
+  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 enterOpacityTransition = useMemo(() => {
+    if (!animate) return null;
+    return transitions == null ? void 0 : transitions.enterOpacity;
+  }, [animate, transitions == null ? void 0 : transitions.enterOpacity]);
+  const animateEnterOpacity = Boolean(enterOpacityTransition);
+  const enterOpacity = useSharedValue(animateEnterOpacity ? 0 : 1);
+  const hasAnimatedEnterOpacity = useRef(false);
+  useEffect(() => {
+    if (hasAnimatedEnterOpacity.current) {
+      return;
+    }
+    if (!animateEnterOpacity) {
+      hasAnimatedEnterOpacity.current = true;
+      enterOpacity.value = 1;
+      return;
+    }
+    if (!isReady) {
+      return;
+    }
+    if (enterOpacityTransition === undefined || enterOpacityTransition === null) {
+      enterOpacity.value = 1;
+      hasAnimatedEnterOpacity.current = true;
+      return;
+    }
+    hasAnimatedEnterOpacity.current = true;
+    enterOpacity.value = buildTransition(1, enterOpacityTransition);
+  }, [animateEnterOpacity, isReady, enterOpacityTransition, enterOpacity]);
+  const animateClip = animate && enterTransition !== null;
 
   // 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 * 2; // Applied on both sides
 
   // Animation progress for clip path reveal
-  const clipProgress = useSharedValue(animate ? 0 : 1);
-
-  // Trigger clip path animation when component mounts and animate is true
+  const clipProgress = useSharedValue(animateClip ? 0 : 1);
   useEffect(() => {
-    if (animate) {
-      clipProgress.value = withTiming(1, {
-        duration: pathEnterTransitionDuration
-      });
+    if (animateClip && isReady) {
+      clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [animate, clipProgress]);
+  }, [animateClip, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const {
@@ -116,32 +142,35 @@ export const Path = /*#__PURE__*/memo(props => {
       initialClipPath: null,
       targetClipPath: null
     };
+    const categoryAxisIsX = context.layout !== 'horizontal';
+    const fullWidth = rect.width + totalOffset;
+    const fullHeight = rect.height + totalOffset;
 
-    // Initial clip path (width = 0)
+    // Initial clip path starts collapsed on the category axis.
     const initial = Skia.Path.Make();
     initial.addRect({
       x: rect.x - clipOffset,
       y: rect.y - clipOffset,
-      width: 0,
-      height: rect.height + totalOffset
+      width: categoryAxisIsX ? 0 : fullWidth,
+      height: categoryAxisIsX ? fullHeight : 0
     });
 
-    // Target clip path (full width)
+    // Target clip path is fully expanded.
     const target = Skia.Path.Make();
     target.addRect({
       x: rect.x - clipOffset,
       y: rect.y - clipOffset,
-      width: rect.width + totalOffset,
-      height: rect.height + totalOffset
+      width: fullWidth,
+      height: fullHeight
     });
     return {
       initialClipPath: initial,
       targetClipPath: target
     };
-  }, [rect, clipOffset, totalOffset]);
+  }, [rect, clipOffset, totalOffset, context.layout]);
 
   // Use usePathInterpolation for animated clip path
-  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animate && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
 
   // Resolve the final clip path:
   // 1. If clipPath prop was explicitly provided, use it (even if null = no clipping)
@@ -154,13 +183,13 @@ export const Path = /*#__PURE__*/memo(props => {
     }
 
     // If not animating or paths are null, return target clip path
-    if (!animate || !targetClipPath) {
+    if (!animateClip || !targetClipPath) {
       return targetClipPath;
     }
 
     // Return undefined here since we'll use animatedClipPath directly
     return undefined;
-  }, [clipPathProp, animate, targetClipPath]);
+  }, [clipPathProp, animateClip, targetClipPath]);
 
   // Convert SVG path string to SkPath for static rendering
   const staticPath = useDerivedValue(() => {
@@ -200,19 +229,27 @@ export const Path = /*#__PURE__*/memo(props => {
     strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
     strokeWidth: strokeWidth,
-    transition: transition,
+    transitions: {
+      enter: enterTransition,
+      enterOpacity: enterOpacityTransition,
+      update: updateTransition
+    },
     children: children
   });
 
   // Determine which clip path to use
-  const finalClipPath = animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+  const finalClipPath = animateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
 
   // If finalClipPath is null, render without clipping
   if (finalClipPath === null) {
-    return content;
+    return /*#__PURE__*/_jsx(Group, {
+      opacity: animateEnterOpacity ? enterOpacity : undefined,
+      children: content
+    });
   }
   return /*#__PURE__*/_jsx(Group, {
     clip: finalClipPath,
+    opacity: animateEnterOpacity ? enterOpacity : undefined,
     children: content
   });
 });

package/esm/chart/PeriodSelector.js

@@ -24,7 +24,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const {
     width,
     height,
-    x
+    x,
+    y
   } = activeTabRect;
 
   // Get the target background color
@@ -38,6 +39,7 @@ export const PeriodSelectorActiveIndicator = _ref => {
   // Combined animated value for position, size, and color
   const newAnimatedValues = {
     x,
+    y,
     width,
     backgroundColor: targetColor
   };
@@ -51,6 +53,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{
       translateX: animatedValues.value.x
+    }, {
+      translateY: animatedValues.value.y
     }],
     width: animatedValues.value.width,
     backgroundColor: animatedValues.value.backgroundColor

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

@@ -7,7 +7,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, Group, Skia } from '@shopify/react-native-skia';
+import { Circle, Group } from '@shopify/react-native-skia';
 import { Area } from '../area/Area';
 import { XAxis, YAxis } from '../axis';
 import { BarPlot } from '../bar/BarPlot';
@@ -155,7 +155,7 @@ const EarningsHistory = () => {
       backgroundColor: theme.color.bgPositive
     }
   });
-  const LegendItem = /*#__PURE__*/memo(_ref2 => {
+  const LegendEntry = /*#__PURE__*/memo(_ref2 => {
     let {
       opacity = 1,
       label
@@ -217,10 +217,10 @@ const EarningsHistory = () => {
     }), /*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       justifyContent: "flex-end",
-      children: [/*#__PURE__*/_jsx(LegendItem, {
+      children: [/*#__PURE__*/_jsx(LegendEntry, {
         label: "Estimated EPS",
         opacity: 0.5
-      }), /*#__PURE__*/_jsx(LegendItem, {
+      }), /*#__PURE__*/_jsx(LegendEntry, {
         label: "Actual EPS"
       })]
     })]
@@ -250,11 +250,21 @@ const PriceWithVolumeChart = /*#__PURE__*/memo(_ref3 => {
       day: 'numeric'
     });
   }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
   const scrubberLabel = useCallback(dataIndex => {
     return formatDate(btcDates[dataIndex]);
   }, [formatDate]);
+  const chartAccessibilityLabel = useMemo(() => {
+    const lastIndex = btcPrices.length - 1;
+    return "Bitcoin chart. Current date " + formatDate(btcDates[lastIndex]) + ". Current price " + formatPriceInThousands(btcPrices[lastIndex]) + ". Current volume " + formatVolume(btcVolumes[lastIndex]) + ".";
+  }, [formatDate, formatPriceInThousands, formatVolume]);
+  const getScrubberAccessibilityLabel = useCallback(dataIndex => "Bitcoin on " + formatDate(btcDates[dataIndex]) + ". Price " + formatPriceInThousands(btcPrices[dataIndex]) + ". Volume " + formatVolume(btcVolumes[dataIndex]) + ".", [formatDate, formatPriceInThousands, formatVolume]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     onScrubberPositionChange: onScrubberPositionChange,
     series: [{
@@ -485,80 +495,6 @@ function TradingTrends() {
     })]
   });
 }
-const UVGradient = {
-  axis: 'y',
-  stops: [{
-    offset: 0,
-    color: 'green'
-  }, {
-    offset: 3,
-    color: 'yellow'
-  }, {
-    offset: 5,
-    color: 'orange'
-  }, {
-    offset: 8,
-    color: 'red'
-  }, {
-    offset: 10,
-    color: 'purple'
-  }]
-};
-const PreviousData = /*#__PURE__*/memo(_ref0 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref0;
-  // we will clip the data to the current hour
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from top-left of drawing area to currentHourX on the right
-    // Apply clipOffset to left, top, and bottom edges only (NOT to currentHourX)
-    const pathString = "M " + (drawingArea.x - clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + (drawingArea.x - clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    opacity: 0.75,
-    children: children
-  });
-});
-const FutureData = /*#__PURE__*/memo(_ref1 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref1;
-  // we will clip the data from the current hour to the right edge
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from currentHourX to right edge of drawing area
-    // Apply clipOffset to top, bottom, and right, but NOT left (currentHourX)
-    const pathString = "M " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    children: children
-  });
-});
 const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const theme = useTheme();
   const dataPoints = useMemo(() => [{
@@ -642,13 +578,13 @@ const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const yMax = Math.max(...yValues);
 
   // Custom label component that places labels to the top-right
-  const TopRightPointLabel = useCallback(_ref10 => {
+  const TopRightPointLabel = useCallback(_ref0 => {
     let {
       x,
       y,
       offset = 0,
       children
-    } = _ref10;
+    } = _ref0;
     return /*#__PURE__*/_jsx(ChartText, {
       font: "label1",
       fontWeight: 600,