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

package/esm/chart/bar/DefaultBar.js

@@ -1,4 +1,4 @@
-const _excluded = ["x", "y", "width", "height", "borderRadius", "roundTop", "roundBottom", "origin", "d", "fill", "fillOpacity", "dataX", "dataY", "seriesId", "transitions", "transition"];
+const _excluded = ["x", "y", "width", "height", "borderRadius", "roundTop", "roundBottom", "origin", "d", "fill", "fillOpacity", "dataX", "dataY", "seriesId", "minSize", "transitions", "transition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -10,6 +10,7 @@ import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
 import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
+import { getNormalizedStagger } from '../utils/bar';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default bar component that renders a solid bar with animation.
@@ -30,6 +31,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       dataX,
       dataY,
       seriesId,
+      minSize = 1,
       transitions,
       transition
     } = _ref,
@@ -39,27 +41,19 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     drawingArea,
     layout
   } = useCartesianChartContext();
-
-  // 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 initialPath = useMemo(() => {
-    if (!animate) return undefined;
-    const minSize = 1;
-    const barsGrowVertically = layout !== 'horizontal';
-    const initialX = barsGrowVertically ? x : origin !== null && origin !== void 0 ? origin : x;
-    const initialY = barsGrowVertically ? origin !== null && origin !== void 0 ? origin : y + height : y;
-    const initialWidth = barsGrowVertically ? width : minSize;
-    const initialHeight = barsGrowVertically ? minSize : height;
-    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0, !!roundTop, !!roundBottom, layout);
-  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom]);
+    if (!animate) return;
+    const isHorizontalLayout = layout === 'horizontal';
+    const baseline = origin !== null && origin !== void 0 ? origin : isHorizontalLayout ? x : y + height;
+    const initialX = isHorizontalLayout ? baseline : x;
+    const initialY = isHorizontalLayout ? y : baseline;
+    const initialWidth = isHorizontalLayout ? minSize : width;
+    const initialHeight = isHorizontalLayout ? height : minSize;
+    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, !!roundTop, !!roundBottom, layout);
+  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom, minSize]);
   return /*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({}, props), {}, {
     animate: animate,
     clipRect: null,

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,