@coinbase/cds-web-visualization 3.4.0-beta.24 → 3.4.0-beta.25

package/esm/chart/bar/DefaultBarStack.js

@@ -1,7 +1,7 @@
 import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
+import { defaultBarEnterTransition, defaultTransition, getBarPath, getNormalizedStagger, getStackInitialClipRect, getTransition, withStaggerDelayTransition } from '../utils';
 import { usePathTransition } from '../utils/transition';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -19,7 +19,7 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin,
+    origin,
     transitions,
     transition
   } = _ref;
@@ -29,29 +29,22 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     layout
   } = useCartesianChartContext();
   const clipPathId = useId();
-
-  // For vertical layout, stagger by x (category axis). For horizontal, stagger by y (category axis).
-  const normalizedStagger = useMemo(() => {
-    const barsGrowVertically = layout !== 'horizontal';
-    if (barsGrowVertically) {
-      return drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0;
-    }
-    return drawingArea.height > 0 ? (y - drawingArea.y) / drawingArea.height : 0;
-  }, [layout, x, y, drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
   const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, normalizedStagger]);
   const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions === null || transitions === void 0 ? void 0 : transitions.update, transition, animate, normalizedStagger]);
   const clipPathData = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
   const initialClipPathData = useMemo(() => {
-    if (!animate) return undefined;
-    const barsGrowVertically = layout !== 'horizontal';
-    const initialX = barsGrowVertically ? x : yOrigin !== null && yOrigin !== void 0 ? yOrigin : x;
-    const initialY = barsGrowVertically ? yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height : y;
-    const initialWidth = barsGrowVertically ? width : 1;
-    const initialHeight = barsGrowVertically ? 1 : height;
-    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, roundTop, roundBottom, layout);
-  }, [animate, layout, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+    if (!animate) return;
+    const initialClipRect = getStackInitialClipRect({
+      x,
+      y,
+      width,
+      height
+    }, layout, origin);
+    return getBarPath(initialClipRect.x, initialClipRect.y, initialClipRect.width, initialClipRect.height, borderRadius, roundTop, roundBottom, layout);
+  }, [animate, layout, x, y, height, width, borderRadius, roundTop, roundBottom, origin]);
   const animatedClipPath = usePathTransition({
     currentPath: clipPathData,
     initialPath: initialClipPathData,