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

package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts

@@ -178,7 +178,8 @@ declare function SparklineInteractiveWithGeneric<Period extends string>({
   ...props
 }: SparklineInteractiveProps<Period>): import('react/jsx-runtime').JSX.Element;
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export declare const SparklineInteractive: typeof SparklineInteractiveWithGeneric;
 //# sourceMappingURL=SparklineInteractive.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}

package/esm/chart/CartesianChart.js

@@ -1,23 +1,32 @@
-const _excluded = ["series", "children", "animate", "enableScrubbing", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable"];
+const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
 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 { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
 import { Box } from '@coinbase/cds-mobile/layout';
 import { Canvas, Skia } from '@shopify/react-native-skia';
+import { ScrubberAccessibilityView } from './scrubber/ScrubberAccessibilityView';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
 import { convertToSerializableScale } from './utils/scale';
 import { useChartContextBridge } from './ChartContextBridge';
 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";
+import { Legend } from './legend';
+import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartCanvas = /*#__PURE__*/memo(_ref => {
   let {
     children,
-    style
+    style,
+    accessible = true,
+    accessibilityLabel,
+    accessibilityLiveRegion = 'polite'
   } = _ref;
   const ContextBridge = useChartContextBridge();
+  const isAccessible = accessible && accessibilityLabel !== null;
   return /*#__PURE__*/_jsx(Canvas, {
+    accessibilityLabel: isAccessible ? accessibilityLabel : undefined,
+    accessibilityLiveRegion: isAccessible ? accessibilityLiveRegion : undefined,
+    accessible: isAccessible,
     style: [{
       width: '100%',
       height: '100%'
@@ -31,12 +40,18 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
   let {
       series,
       children,
+      layout = 'vertical',
       animate = true,
       enableScrubbing,
+      getScrubberAccessibilityLabel,
+      scrubberAccessibilityLabelStep,
       xAxis: xAxisConfigProp,
       yAxis: yAxisConfigProp,
       inset,
       onScrubberPositionChange,
+      legend,
+      legendPosition = 'bottom',
+      legendAccessibilityLabel,
       width = '100%',
       height = '100%',
       style,
@@ -47,17 +62,27 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       // React Native will collapse views by default when only used
       // to group children, which interferes with gesture-handler
       // https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#:~:text=%7B%0A%20%20return%20%3C-,View,-collapsable%3D%7B
-      collapsable = false
+      collapsable = false,
+      accessible = true,
+      accessibilityLabel,
+      accessibilityLiveRegion = 'polite'
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   const [containerLayout, onContainerLayout] = useLayout();
   const chartWidth = containerLayout.width;
   const chartHeight = containerLayout.height;
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
-  // there can only be one x axis but the helper function always returns an array
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp), [xAxisConfigProp]);
   const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
+
+  // Horizontal layout supports multiple value axes on x, but only a single category axis on y.
+  // Vertical layout keeps a single x-axis to preserve existing behavior.
+  if (layout === 'horizontal' && yAxisConfig.length > 1) {
+    throw new Error('When layout="horizontal", only one y-axis is supported. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  if (layout !== 'horizontal' && xAxisConfig.length > 1) {
+    throw new Error('Multiple x-axes are only supported when layout="horizontal". See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
   const {
     renderedAxes,
     registerAxis,
@@ -87,54 +112,76 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     };
   }, [chartHeight, chartWidth, totalInset]);
   const {
-    xAxis,
-    xScale
+    xAxes,
+    xScales
   } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
     if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
-      xAxis: undefined,
-      xScale: 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
+      xAxes: axes,
+      xScales: scales
     };
+    xAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
 
-    // Create the scale
-    const scale = getAxisScale({
-      config: axisConfig,
-      type: 'x',
-      range: axisConfig.range,
-      dataDomain: axisConfig.domain
-    });
-    if (!scale) return {
-      xAxis: undefined,
-      xScale: undefined
-    };
+      // Get relevant series data.
+      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series == null ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) != null ? _s$xAxisId : defaultAxisId) === axisId;
+      })) != null ? _series$filter : [] : series != null ? series : [];
+
+      // Calculate domain and range.
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'x', layout);
+      const range = getAxisRange(axisParam, chartRect, 'x');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : layout === 'horizontal' ? 'nice' : 'strict'
+      };
+
+      // Create the scale.
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'x',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      if (scale) {
+        scales.set(axisId, scale);
 
-    // Update axis config with actual scale domain (after .nice() or other adjustments)
-    const scaleDomain = scale.domain();
-    const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
-      min: scaleDomain[0],
-      max: scaleDomain[1]
-    } : axisConfig.domain;
-    const finalAxisConfig = _extends({}, axisConfig, {
-      domain: actualDomain
+        // Update axis config with actual scale domain (after .nice() or other adjustments).
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _extends({}, axisConfig, {
+          domain: actualDomain
+        }));
+      }
     });
     return {
-      xAxis: finalAxisConfig,
-      xScale: scale
+      xAxes: axes,
+      xScales: scales
     };
-  }, [xAxisConfig, series, chartRect]);
-  const xSerializableScale = useMemo(() => {
-    if (!xScale) return;
-    return convertToSerializableScale(xScale);
-  }, [xScale]);
+  }, [xAxisConfig, series, chartRect, layout]);
+
+  // We need a set of serialized scales usable in UI thread.
+  const xSerializableScales = useMemo(() => {
+    const serializableScales = new Map();
+    xScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        serializableScales.set(id, serializableScale);
+      }
+    });
+    return serializableScales;
+  }, [xScales]);
   const {
     yAxes,
     yScales
@@ -146,17 +193,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       yScales: scales
     };
     yAxisConfig.forEach(axisParam => {
-      var _axisParam$id, _series$filter, _axisParam$domainLimi;
-      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) != null ? _axisParam$id2 : defaultAxisId;
 
-      // Get relevant series data
-      const relevantSeries = (_series$filter = series == null ? void 0 : series.filter(s => {
+      // Get relevant series data.
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series == null ? void 0 : series.filter(s => {
         var _s$yAxisId;
         return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
-      })) != null ? _series$filter : [];
+      })) != null ? _series$filter2 : [] : series != null ? series : [];
 
-      // Calculate domain and range
-      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
+      // Calculate domain and range.
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
       const range = getAxisRange(axisParam, chartRect, 'y');
       const axisConfig = {
         scaleType: axisParam.scaleType,
@@ -164,20 +211,21 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
-        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) != null ? _axisParam$domainLimi : 'nice'
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) != null ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice'
       };
 
-      // Create the scale
-      const scale = getAxisScale({
+      // Create the scale.
+      const scale = getCartesianAxisScale({
         config: axisConfig,
         type: 'y',
         range: axisConfig.range,
-        dataDomain: axisConfig.domain
+        dataDomain: axisConfig.domain,
+        layout
       });
       if (scale) {
         scales.set(axisId, scale);
 
-        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        // Update axis config with actual scale domain (after .nice() or other adjustments).
         const scaleDomain = scale.domain();
         const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
           min: scaleDomain[0],
@@ -192,7 +240,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       yAxes: axes,
       yScales: scales
     };
-  }, [yAxisConfig, series, chartRect]);
+  }, [yAxisConfig, series, chartRect, layout]);
 
   // We need a set of serialized scales usable in UI thread
   const ySerializableScales = useMemo(() => {
@@ -205,11 +253,11 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     });
     return serializableScales;
   }, [yScales]);
-  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  const getXAxis = useCallback(id => xAxes.get(id != null ? id : defaultAxisId), [xAxes]);
   const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
-  const getXScale = useCallback(() => xScale, [xScale]);
+  const getXScale = useCallback(id => xScales.get(id != null ? id : defaultAxisId), [xScales]);
   const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
-  const getXSerializableScale = useCallback(() => xSerializableScale, [xSerializableScale]);
+  const getXSerializableScale = useCallback(id => xSerializableScales.get(id != null ? id : defaultAxisId), [xSerializableScales]);
   const getYSerializableScale = useCallback(id => ySerializableScales.get(id != null ? id : defaultAxisId), [ySerializableScales]);
   const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
   const stackedDataMap = useMemo(() => {
@@ -220,20 +268,27 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxisConfig = useMemo(() => {
+    var _xAxisConfig$, _yAxisConfig$;
+    return categoryAxisIsX ? (_xAxisConfig$ = xAxisConfig[0]) != null ? _xAxisConfig$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) != null ? _yAxisConfig$ : xAxisConfig[0];
+  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
   const dataLength = useMemo(() => {
-    // If xAxis has categorical data, use that length
-    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
-      return xAxisConfig.data.length;
+    // If category axis has categorical data, use that length.
+    if (categoryAxisConfig.data && categoryAxisConfig.data.length > 0) {
+      return categoryAxisConfig.data.length;
     }
 
-    // Otherwise, find the longest series
+    // Otherwise, find the longest series.
     if (!series || series.length === 0) return 0;
     return series.reduce((max, s) => {
       var _seriesData$length;
       const seriesData = getStackedSeriesData(s.id);
       return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
     }, 0);
-  }, [xAxisConfig.data, series, getStackedSeriesData]);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -286,6 +341,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     return Skia.TypefaceFontProvider.Make();
   }, [fontProviderProp]);
   const contextValue = useMemo(() => ({
+    layout,
     series: series != null ? series : [],
     getSeries,
     getSeriesData: getStackedSeriesData,
@@ -305,30 +361,68 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
   const rootStyles = useMemo(() => {
     return [style, styles == null ? void 0 : styles.root];
   }, [style, styles == null ? void 0 : styles.root]);
+  const legendElement = useMemo(() => {
+    if (!legend) return;
+    if (legend === true) {
+      const isHorizontal = legendPosition === 'top' || legendPosition === 'bottom';
+      const flexDirection = isHorizontal ? 'row' : 'column';
+      return /*#__PURE__*/_jsx(Legend, {
+        accessibilityLabel: legendAccessibilityLabel,
+        flexDirection: flexDirection
+      });
+    }
+    return legend;
+  }, [legend, legendAccessibilityLabel, legendPosition]);
+  const rootBoxProps = useMemo(() => _extends({
+    ref,
+    height,
+    style: rootStyles,
+    width
+  }, props), [ref, height, rootStyles, width, props]);
   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",
+      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row'
+      }, rootBoxProps, {
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsxs(Box, {
+          collapsable: collapsable,
+          onLayout: onContainerLayout,
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(ChartCanvas, {
+            accessibilityLabel: accessibilityLabel,
+            accessibilityLiveRegion: accessibilityLiveRegion,
+            accessible: accessible,
+            style: styles == null ? void 0 : styles.chart,
+            children: children
+          }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+            accessibilityLabel: getScrubberAccessibilityLabel,
+            accessibilityStep: scrubberAccessibilityLabelStep
+          })]
+        }), (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
+      })) : /*#__PURE__*/_jsxs(Box, _extends({
         collapsable: collapsable,
-        height: height,
-        onLayout: onContainerLayout,
-        style: rootStyles,
-        width: width
-      }, props, {
-        children: /*#__PURE__*/_jsx(ChartCanvas, {
+        onLayout: onContainerLayout
+      }, rootBoxProps, {
+        children: [/*#__PURE__*/_jsx(ChartCanvas, {
+          accessibilityLabel: accessibilityLabel,
+          accessibilityLiveRegion: accessibilityLiveRegion,
+          accessible: accessible,
           style: styles == null ? void 0 : styles.chart,
           children: children
-        })
+        }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
+          accessibilityLabel: getScrubberAccessibilityLabel,
+          accessibilityStep: scrubberAccessibilityLabelStep
+        })]
       }))
     })
   });

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 { 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,29 @@ 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 shouldAnimateClip = 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(shouldAnimateClip ? 0 : 1);
   useEffect(() => {
-    if (animate) {
-      clipProgress.value = withTiming(1, {
-        duration: pathEnterTransitionDuration
-      });
+    if (shouldAnimateClip && isReady) {
+      clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [animate, clipProgress]);
+  }, [shouldAnimateClip, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const {
@@ -116,32 +115,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], shouldAnimateClip && 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 +156,13 @@ export const Path = /*#__PURE__*/memo(props => {
     }
 
     // If not animating or paths are null, return target clip path
-    if (!animate || !targetClipPath) {
+    if (!shouldAnimateClip || !targetClipPath) {
       return targetClipPath;
     }
 
     // Return undefined here since we'll use animatedClipPath directly
     return undefined;
-  }, [clipPathProp, animate, targetClipPath]);
+  }, [clipPathProp, shouldAnimateClip, targetClipPath]);
 
   // Convert SVG path string to SkPath for static rendering
   const staticPath = useDerivedValue(() => {
@@ -200,12 +202,15 @@ export const Path = /*#__PURE__*/memo(props => {
     strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
     strokeWidth: strokeWidth,
-    transition: transition,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    },
     children: children
   });
 
   // Determine which clip path to use
-  const finalClipPath = animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+  const finalClipPath = shouldAnimateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
 
   // If finalClipPath is null, render without clipping
   if (finalClipPath === null) {