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

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

@@ -1,8 +1,11 @@
+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); }
 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 { defaultBarEnterOpacityTransition, 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 +16,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    borderRadius,
+    borderRadius = 4,
     roundTop,
     roundBottom,
     d,
@@ -21,36 +24,56 @@ 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(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
+  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
+  const enterOpacityTransition = useMemo(() => {
+    var _enterOpacityTransiti, _enterOpacityTransiti2;
+    if ((transitions == null ? void 0 : transitions.enterOpacity) === undefined && enterTransition === null) return null;
+    const enterOpacityTransition = getTransition(transitions == null ? void 0 : transitions.enterOpacity, animate, defaultBarEnterOpacityTransition);
+    if (!enterOpacityTransition) return null;
+    return _extends({}, enterOpacityTransition, {
+      delay: (_enterOpacityTransiti = enterOpacityTransition.delay) != null ? _enterOpacityTransiti : enterTransition == null ? void 0 : enterTransition.delay,
+      staggerDelay: (_enterOpacityTransiti2 = enterOpacityTransition.staggerDelay) != null ? _enterOpacityTransiti2 : enterTransition == null ? void 0 : enterTransition.staggerDelay
+    });
+  }, [transitions == null ? void 0 : transitions.enterOpacity, animate, enterTransition]);
+  const enterOpacityTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterOpacityTransition, normalizedStagger), [enterOpacityTransition, 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: enterTransitionWithStagger,
+      enterOpacity: enterOpacityTransitionWithStagger,
+      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, {

package/esm/chart/bar/PercentageBarChart.js

@@ -0,0 +1,99 @@
+const _excluded = ["series", "layout", "roundBaseline", "inset", "transitions", "xAxis", "yAxis", "testID", "children"];
+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 { forwardRef, memo, useMemo } from 'react';
+import { BarChart } from './BarChart';
+
+/** Extended series type that supports single data values. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Returns the value for a group index from numeric shorthand or per-group series data.
+ * @param data - A single number (group `0` only) or an array of values per group.
+ * @param groupIndex - The group index to read.
+ * @returns The clamped value for that group, or `null` when the value is `null`, undefined, or out of range.
+ */
+const unwrapSeriesDataValue = (data, groupIndex) => {
+  const raw = typeof data === 'number' ? groupIndex === 0 ? data : null : data[groupIndex];
+  return raw != null ? Math.max(0, raw) : null;
+};
+export const PercentageBarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      layout = 'horizontal',
+      roundBaseline = true,
+      inset = 0,
+      transitions,
+      xAxis,
+      yAxis,
+      testID,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const barSeries = useMemo(() => {
+    var _series$map;
+    const groupCount = Math.max(0, ...((_series$map = series == null ? void 0 : series.map(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      return typeof data === 'number' ? 1 : data.length;
+    })) != null ? _series$map : []));
+    const totals = Array.from({
+      length: groupCount
+    }, (_, i) => {
+      var _series$reduce;
+      return (_series$reduce = series == null ? void 0 : series.reduce((sum, _ref3) => {
+        var _unwrapSeriesDataValu;
+        let {
+          data
+        } = _ref3;
+        return sum + ((_unwrapSeriesDataValu = unwrapSeriesDataValue(data, i)) != null ? _unwrapSeriesDataValu : 0);
+      }, 0)) != null ? _series$reduce : 0;
+    });
+    return series == null ? void 0 : series.map(s => _extends({}, s, {
+      data: Array.from({
+        length: groupCount
+      }, (_, i) => {
+        const val = unwrapSeriesDataValue(s.data, i);
+        return val != null && totals[i] > 0 ? val / totals[i] * 100 : null;
+      })
+    }));
+  }, [series]);
+  const isHorizontalLayout = layout === 'horizontal';
+  const xAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, xAxis) : _extends({
+      categoryPadding: 0
+    }, xAxis);
+  }, [isHorizontalLayout, xAxis]);
+  const yAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      categoryPadding: 0
+    }, yAxis) : _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, yAxis);
+  }, [isHorizontalLayout, yAxis]);
+  return /*#__PURE__*/_jsx(BarChart, _extends({
+    ref: ref,
+    stacked: true,
+    inset: inset,
+    layout: layout,
+    roundBaseline: roundBaseline,
+    series: barSeries,
+    testID: testID,
+    transitions: transitions,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, props, {
+    children: children
+  }));
+}));
+PercentageBarChart.displayName = 'PercentageBarChart';