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

package/esm/chart/bar/BarStackGroup.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
+const _excluded = ["series", "xAxisId", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
 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, useMemo, createElement as _createElement } from 'react';
@@ -12,6 +12,7 @@ import { BarStack } from './BarStack';
 export const BarStackGroup = /*#__PURE__*/memo(_ref => {
   let {
       series,
+      xAxisId = defaultAxisId,
       yAxisId = defaultAxisId,
       stackIndex,
       totalStacks,
@@ -19,61 +20,70 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
+    layout,
     getXScale,
     getYScale,
     drawingArea,
     dataLength
   } = useCartesianChartContext();
-  const xScale = getXScale();
+  const xScale = getXScale(xAxisId);
   const yScale = getYScale(yAxisId);
   const stackConfigs = useMemo(() => {
     if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
-    if (!isCategoricalScale(xScale)) {
+    const indexScale = layout !== 'horizontal' ? xScale : yScale;
+    if (!isCategoricalScale(indexScale)) {
       return [];
     }
-    const categoryWidth = xScale.bandwidth();
+    const categoryWidth = indexScale.bandwidth();
 
-    // Calculate width for each stack within a category
-    // Only apply barPadding when there are multiple stacks
-    const gapWidth = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
-    const barWidth = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapWidth);
+    // Calculate thickness for each stack within a category.
+    const gapSize = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
+    const stackThickness = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapSize);
     const configs = [];
 
-    // Calculate position for each category
-    // todo: look at using xDomain for this instead of dataLength
+    // Calculate position for each category.
     for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
-      // Get x position for this category
-      const categoryX = xScale(categoryIndex);
-      if (categoryX !== undefined) {
-        // Calculate x position for this specific stack within the category
-        const stackX = categoryX + stackIndex * (barWidth + gapWidth);
+      // Get position for this category along the index axis.
+      const categoryPos = indexScale(categoryIndex);
+      if (categoryPos !== undefined) {
+        // Calculate position for this specific stack within the category.
+        const stackPos = categoryPos + stackIndex * (stackThickness + gapSize);
         configs.push({
           categoryIndex,
-          x: stackX,
-          width: barWidth
+          indexPos: stackPos,
+          thickness: stackThickness
         });
       }
     }
     return configs;
-  }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
-  if (xScale && !isCategoricalScale(xScale)) {
-    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
+  }, [xScale, yScale, drawingArea, dataLength, layout, totalStacks, barPadding, stackIndex]);
+  const indexScaleComputed = layout !== 'horizontal' ? xScale : yScale;
+  const valueScaleComputed = layout !== 'horizontal' ? yScale : xScale;
+  if (indexScaleComputed && !isCategoricalScale(indexScaleComputed)) {
+    throw new Error("BarStackGroup requires a band scale for " + (layout !== 'horizontal' ? 'x-axis' : 'y-axis') + ". See https://cds.coinbase.com/components/charts/" + (layout !== 'horizontal' ? 'XAxis' : 'YAxis') + "/#scale-type");
   }
-  if (!yScale || !drawingArea || stackConfigs.length === 0) return;
-  return stackConfigs.map(_ref2 => {
+  if (!indexScaleComputed || !valueScaleComputed || !drawingArea || stackConfigs.length === 0) return;
+
+  // In horizontal layout, render stacks in reverse order so top rows (lower categoryIndex)
+  // appear on top. Otherwise bottom rows would overlap and obscure top rows during animation.
+  const orderedConfigs = layout === 'horizontal' ? [...stackConfigs].reverse() : stackConfigs;
+  return orderedConfigs.map(_ref2 => {
     let {
       categoryIndex,
-      x,
-      width
+      indexPos,
+      thickness
     } = _ref2;
     return /*#__PURE__*/_createElement(BarStack, _extends({}, props, {
       key: "stack-" + stackIndex + "-category-" + categoryIndex,
       categoryIndex: categoryIndex,
+      indexPos: indexPos,
+      indexScale: indexScaleComputed,
       rect: drawingArea,
       series: series,
-      width: width,
-      x: x,
-      yScale: yScale
+      thickness: thickness,
+      valueScale: valueScaleComputed,
+      xAxisId: xAxisId,
+      yAxisId: yAxisId
     }));
   });
 });

package/esm/chart/bar/DefaultBar.js

@@ -2,7 +2,9 @@ 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 { getNormalizedStagger } from '../utils/bar';
+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 +15,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    borderRadius,
+    borderRadius = 4,
     roundTop,
     roundBottom,
     d,
@@ -21,36 +23,43 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     fillOpacity = 1,
     stroke,
     strokeWidth,
-    originY,
+    origin,
+    minSize = 1,
+    transitions,
     transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea,
+    layout
   } = 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 normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [transitions == null ? void 0 : transitions.enter, animate, normalizedStagger]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedStagger]);
   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);
-  }, [x, originY, y, height, width, borderRadius, roundTop, roundBottom]);
+    if (!animate) return;
+    const isHorizontalLayout = layout === 'horizontal';
+    const baseline = origin != null ? 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, {
     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, getNormalizedStagger, getStackInitialClipRect, 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.
@@ -17,27 +18,42 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin,
+    origin,
+    transitions,
     transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea,
+    layout
   } = useCartesianChartContext();
+  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.enter, normalizedStagger]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedStagger]);
 
   // Generate target clip path (full bar)
   const targetPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
 
   // Initial clip path for entry animation (bar at baseline with minimal height)
   const initialPath = useMemo(() => {
-    const baselineY = yOrigin != null ? yOrigin : y + height;
-    return getBarPath(x, baselineY, width, 1, borderRadius, roundTop, roundBottom);
-  }, [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: targetPath,
     initialPath,
-    transition
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
   });
   const clipPath = animate ? animatedClipPath : targetPath;
   return /*#__PURE__*/_jsx(Group, {