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

package/esm/chart/area/SolidArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transition", "gradient"];
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transitions", "transition", "gradient"];
 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 } from 'react';
@@ -18,6 +18,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       fillOpacity = 1,
       yAxisId,
       animate,
+      transitions,
       transition,
       gradient
     } = _ref,
@@ -28,7 +29,8 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
     d: d,
     fill: fill != null ? fill : theme.color.fgPrimary,
     fillOpacity: fillOpacity,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,

package/esm/chart/bar/Bar.js

@@ -33,6 +33,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    transitions,
     transition
   } = _ref;
   const theme = useTheme();
@@ -64,6 +65,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     stroke: stroke,
     strokeWidth: strokeWidth,
     transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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); }
@@ -30,6 +30,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackGap,
       barMinSize,
       stackMinSize,
+      transitions,
       transition
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -119,7 +120,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackMinSize: stackMinSize,
       stroke: stroke,
       strokeWidth: strokeWidth,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -24,6 +24,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
+    transitions,
     transition
   } = _ref;
   const {
@@ -96,6 +97,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       strokeWidth: defaultStrokeWidth,
       totalStacks: stackGroups.length,
       transition: transition,
+      transitions: transitions,
       yAxisId: group.yAxisId
     }, group.stackId))
   });

package/esm/chart/bar/BarStack.js

@@ -35,6 +35,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     barMinSize,
     stackMinSize,
     roundBaseline,
+    transitions,
     transition
   } = _ref;
   const theme = useTheme();
@@ -534,6 +535,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stroke: defaultStroke,
     strokeWidth: defaultStrokeWidth,
     transition: transition,
+    transitions: transitions,
     width: bar.width,
     x: bar.x,
     y: bar.y
@@ -549,6 +551,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
     transition: transition,
+    transitions: transitions,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/DefaultBar.js

@@ -2,7 +2,8 @@ import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
-import { getBarPath } from '../utils';
+import { defaultBarEnterTransition, getBarPath, withStaggerDelayTransition } from '../utils';
+import { defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default bar component that renders a solid bar with animation support.
@@ -13,7 +14,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    borderRadius,
+    borderRadius = 4,
     roundTop,
     roundBottom,
     d,
@@ -22,35 +23,34 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     stroke,
     strokeWidth,
     originY,
+    transitions,
     transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
   const theme = useTheme();
   const defaultFill = fill || theme.color.fgPrimary;
-  const targetPath = useMemo(() => {
-    const effectiveBorderRadius = borderRadius != null ? borderRadius : 0;
-    const effectiveRoundTop = roundTop != null ? roundTop : true;
-    const effectiveRoundBottom = roundBottom != null ? roundBottom : true;
-    return d || getBarPath(x, y, width, height, effectiveBorderRadius, effectiveRoundTop, effectiveRoundBottom);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom, d]);
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [transitions == null ? void 0 : transitions.enter, animate, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedX]);
   const initialPath = useMemo(() => {
-    const effectiveBorderRadius = borderRadius != null ? borderRadius : 0;
-    const effectiveRoundTop = roundTop != null ? roundTop : true;
-    const effectiveRoundBottom = roundBottom != null ? roundBottom : true;
     const baselineY = originY != null ? originY : y + height;
-    return getBarPath(x, baselineY, width, 1, effectiveBorderRadius, effectiveRoundTop, effectiveRoundBottom);
+    return getBarPath(x, baselineY, width, 1, borderRadius, !!roundTop, !!roundBottom);
   }, [x, originY, y, height, width, borderRadius, roundTop, roundBottom]);
   return /*#__PURE__*/_jsx(Path, {
     animate: animate,
     clipPath: null,
-    d: targetPath,
+    d: d,
     fill: stroke ? 'none' : defaultFill,
     fillOpacity: fillOpacity,
     initialPath: initialPath,
     stroke: stroke,
     strokeWidth: strokeWidth,
-    transition: transition
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
   });
 });

package/esm/chart/bar/DefaultBarStack.js

@@ -2,7 +2,8 @@ import { memo, useMemo } from 'react';
 import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
-import { usePathTransition } from '../utils/transition';
+import { defaultBarEnterTransition, withStaggerDelayTransition } from '../utils/bar';
+import { defaultTransition, getTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default stack component that renders children in a group with animated clip path.
@@ -18,12 +19,19 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     roundTop = true,
     roundBottom = true,
     yOrigin,
+    transitions,
     transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
 
+  // Compute normalized x position for stagger delay calculation
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [animate, transitions == null ? void 0 : transitions.enter, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedX]);
+
   // Generate target clip path (full bar)
   const targetPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
@@ -37,7 +45,10 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
   const animatedClipPath = usePathTransition({
     currentPath: targetPath,
     initialPath,
-    transition
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
   });
   const clipPath = animate ? animatedClipPath : targetPath;
   return /*#__PURE__*/_jsx(Group, {