@coinbase/cds-web 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/bar/Bar.js

@@ -0,0 +1,69 @@
+import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getBarPath } from '../utils';
+import { DefaultBar } from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Simple bar component that renders a single bar at the specified position.
+ *
+ * This component is intentionally kept simple - it just renders a bar at the given
+ * x, y, width, height coordinates. Complex positioning logic (like handling stacks,
+ * groups, gaps, etc.) should be handled by parent components like BarChart or BarStack.
+ *
+ * @example
+ * ```tsx
+ * <Bar x={10} y={20} width={50} height={100} fill="blue" />
+ * ```
+ */
+export const Bar = /*#__PURE__*/memo(_ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    origin: originProp,
+    dataX,
+    dataY,
+    seriesId,
+    BarComponent = DefaultBar,
+    fill = 'var(--color-fgPrimary)',
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    borderRadius = 4,
+    roundTop = true,
+    roundBottom = true,
+    minSize,
+    transitions,
+    transition
+  } = _ref;
+  const {
+    layout
+  } = useCartesianChartContext();
+  const barPath = useMemo(() => {
+    return getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => originProp !== null && originProp !== void 0 ? originProp : layout === 'horizontal' ? x : y + height, [originProp, layout, x, y, height]);
+  if (!barPath) return;
+  return /*#__PURE__*/_jsx(BarComponent, {
+    borderRadius: borderRadius,
+    d: barPath,
+    dataX: dataX,
+    dataY: dataY,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    height: height,
+    minSize: minSize,
+    origin: origin,
+    roundBottom: roundBottom,
+    roundTop: roundTop,
+    seriesId: seriesId,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    transition: transition,
+    transitions: transitions,
+    width: width,
+    x: x,
+    y: y
+  });
+});

package/esm/visualizations/chart/bar/BarChart.js

@@ -0,0 +1,128 @@
+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", "baseline", "id"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { XAxis, YAxis } from '../axis';
+import { CartesianChart } from '../CartesianChart';
+import { defaultStackId, withBaselineDomain } from '../utils';
+import { BarPlot } from './BarPlot';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series: seriesProp,
+      stacked,
+      showXAxis,
+      showYAxis,
+      xAxis,
+      yAxis,
+      inset,
+      children,
+      barPadding,
+      BarComponent,
+      fillOpacity,
+      stroke,
+      strokeWidth,
+      borderRadius,
+      roundBaseline,
+      BarStackComponent,
+      stackGap,
+      barMinSize,
+      stackMinSize,
+      transitions,
+      transition
+    } = _ref,
+    chartProps = _objectWithoutProperties(_ref, _excluded);
+  const series = useMemo(() => {
+    if (!stacked || !seriesProp) return seriesProp;
+    return seriesProp.map(s => {
+      var _s$stackId;
+      return _objectSpread(_objectSpread({}, s), {}, {
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
+      });
+    });
+  }, [seriesProp, stacked]);
+  const seriesIds = useMemo(() => series === null || series === void 0 ? void 0 : series.map(s => s.id), [series]);
+  const isHorizontalLayout = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontalLayout ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontalLayout ? 'band' : 'linear';
+
+  // Split axis props into config props for Chart and visual props for axis components
+  const _ref2 = xAxis || {},
+    {
+      scaleType: xScaleType,
+      data: xData,
+      categoryPadding: xCategoryPadding,
+      domain: xDomain,
+      domainLimit: xDomainLimit,
+      range: xRange,
+      baseline: xBaseline,
+      id: xAxisId
+    } = _ref2,
+    xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      baseline: yBaseline,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
+  const xAxisConfig = useMemo(() => ({
+    scaleType: xScaleType !== null && xScaleType !== void 0 ? xScaleType : defaultXScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange,
+    baseline: xBaseline
+  }), [xScaleType, xData, xCategoryPadding, xDomain, isHorizontalLayout, xDomainLimit, xRange, xBaseline, valueAxisBaseline, defaultXScaleType]);
+  const yAxisConfig = useMemo(() => ({
+    scaleType: yScaleType !== null && yScaleType !== void 0 ? yScaleType : defaultYScaleType,
+    data: yData,
+    categoryPadding: yCategoryPadding,
+    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
+    domainLimit: yDomainLimit,
+    range: yRange,
+    baseline: yBaseline
+  }), [yScaleType, yData, yCategoryPadding, yDomain, isHorizontalLayout, yDomainLimit, yRange, yBaseline, valueAxisBaseline, defaultYScaleType]);
+  return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({
+    ref: ref,
+    inset: inset,
+    series: series,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, chartProps), {}, {
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+      axisId: yAxisId
+    }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
+      BarComponent: BarComponent,
+      BarStackComponent: BarStackComponent,
+      barMinSize: barMinSize,
+      barPadding: barPadding,
+      borderRadius: borderRadius,
+      fillOpacity: fillOpacity,
+      roundBaseline: roundBaseline,
+      seriesIds: seriesIds,
+      stackGap: stackGap,
+      stackMinSize: stackMinSize,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      transition: transition,
+      transitions: transitions
+    }), children]
+  }));
+}));

package/esm/visualizations/chart/bar/BarPlot.js

@@ -0,0 +1,92 @@
+import { memo, useId, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getStackGroups, instantTransition } from '../utils';
+import { BarStackGroup } from './BarStackGroup';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BarPlot component that handles multiple series with proper stacking coordination.
+ * Groups series by stack ID + y-axis ID combination and renders BarStackGroup for each group.
+ * This allows series with different y-axes to be rendered side by side while preventing
+ * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
+ */
+export const BarPlot = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+    seriesIds,
+    barPadding = 0.1,
+    BarComponent: defaultBarComponent,
+    fillOpacity: defaultFillOpacity,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    borderRadius: defaultBorderRadius,
+    roundBaseline,
+    BarStackComponent,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    transitions,
+    transition
+  } = _ref;
+  const {
+    animate,
+    series: allSeries,
+    drawingArea
+  } = useCartesianChartContext();
+  const clipPathId = useId();
+  const targetSeries = useMemo(() => {
+    // Then filter by seriesIds if provided
+    if (seriesIds !== undefined) {
+      return allSeries.filter(s => seriesIds.includes(s.id));
+    }
+    return allSeries;
+  }, [allSeries, seriesIds]);
+  const stackGroups = useMemo(() => getStackGroups(targetSeries), [targetSeries]);
+  if (!drawingArea) return;
+
+  // Clip path animation for bar is just for chart size changes, not for
+  // enter transition. One caveat, bar update transitions are staggered
+  // but clip path is not, so some bars could be clipped in rare cases
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: clipPathId,
+        children: animate ? /*#__PURE__*/_jsx(motion.rect, {
+          height: drawingArea.height,
+          transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : instantTransition,
+          width: drawingArea.width,
+          x: drawingArea.x,
+          y: drawingArea.y
+        }) : /*#__PURE__*/_jsx("rect", {
+          height: drawingArea.height,
+          width: drawingArea.width,
+          x: drawingArea.x,
+          y: drawingArea.y
+        })
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: "url(#".concat(clipPathId, ")"),
+      children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
+        BarComponent: defaultBarComponent,
+        BarStackComponent: BarStackComponent,
+        barMinSize: barMinSize,
+        barPadding: barPadding,
+        borderRadius: defaultBorderRadius,
+        fillOpacity: defaultFillOpacity,
+        roundBaseline: roundBaseline,
+        series: group.series,
+        stackGap: stackGap,
+        stackIndex: stackIndex,
+        stackMinSize: stackMinSize,
+        stroke: defaultStroke,
+        strokeWidth: defaultStrokeWidth,
+        totalStacks: stackGroups.length,
+        transition: transition,
+        transitions: transitions,
+        xAxisId: group.xAxisId,
+        yAxisId: group.yAxisId
+      }, group.stackId))
+    })]
+  });
+});

package/esm/visualizations/chart/bar/BarStack.js

@@ -0,0 +1,173 @@
+import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { EPSILON, getBars, getBaselinePx, getStackOrigin } from '../utils/bar';
+import { getGradientAxis, getGradientConfig } from '../utils/gradient';
+import { Bar } from './Bar';
+import { DefaultBarStack } from './DefaultBarStack';
+
+/**
+ * Extended series type that includes bar-specific properties.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BarStack component that renders a single stack of bars at a specific category index.
+ * Handles the stacking logic for bars within a single category.
+ */
+export const BarStack = /*#__PURE__*/memo(_ref => {
+  let {
+    series,
+    categoryIndex,
+    indexPos,
+    thickness,
+    indexScale,
+    valueScale,
+    rect,
+    xAxisId,
+    yAxisId,
+    BarComponent: defaultBarComponent,
+    fillOpacity: defaultFillOpacity,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    borderRadius = 4,
+    BarStackComponent = DefaultBarStack,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    roundBaseline,
+    transitions,
+    transition
+  } = _ref;
+  const {
+    layout,
+    getSeriesData,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const xAxis = getXAxis(xAxisId);
+  const yAxis = getYAxis(yAxisId);
+  const xScale = getXScale(xAxisId);
+  const yScale = getYScale(yAxisId);
+  const baseline = useMemo(() => {
+    var _ref2;
+    return (_ref2 = layout === 'vertical' ? yAxis : xAxis) === null || _ref2 === void 0 ? void 0 : _ref2.baseline;
+  }, [layout, yAxis, xAxis]);
+  const baselinePx = useMemo(() => {
+    return getBaselinePx(valueScale, rect, layout, baseline);
+  }, [rect, valueScale, layout, baseline]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient) return null;
+      if (!xScale || !yScale) return null;
+      const gradientAxis = getGradientAxis(s.gradient, layout);
+      const evalScale = gradientAxis === 'x' ? xScale : yScale;
+      const stops = getGradientConfig(s.gradient, xScale, yScale, layout);
+      if (!stops) return null;
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: evalScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale, layout]);
+  const categoryAxis = layout === 'vertical' ? xAxis : yAxis;
+  const categoryData = categoryAxis !== null && categoryAxis !== void 0 && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
+  const categoryValue = categoryData ? categoryData[categoryIndex] : categoryIndex;
+  const seriesData = useMemo(() => Object.fromEntries(series.map(s => {
+    var _getSeriesData;
+    return [s.id, (_getSeriesData = getSeriesData(s.id)) !== null && _getSeriesData !== void 0 ? _getSeriesData : []];
+  })), [series, getSeriesData]);
+  const bars = useMemo(() => getBars({
+    series,
+    seriesData,
+    categoryIndex,
+    categoryValue,
+    indexPos,
+    thickness,
+    valueScale,
+    seriesGradients,
+    roundBaseline,
+    layout,
+    baseline,
+    baselinePx,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    defaultFill: 'var(--color-fgPrimary)',
+    borderRadius,
+    defaultFillOpacity,
+    defaultStroke,
+    defaultStrokeWidth,
+    defaultBarComponent
+  }), [series, seriesData, categoryIndex, categoryValue, indexPos, thickness, valueScale, seriesGradients, roundBaseline, layout, baseline, baselinePx, stackGap, barMinSize, stackMinSize, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
+  const stackRect = useMemo(() => {
+    if (bars.length === 0) {
+      return {
+        x: layout === 'vertical' ? indexPos : baselinePx,
+        y: layout === 'vertical' ? baselinePx : indexPos,
+        width: layout === 'vertical' ? thickness : 0,
+        height: layout === 'vertical' ? 0 : thickness
+      };
+    }
+    const minX = Math.min(...bars.map(b => b.x));
+    const minY = Math.min(...bars.map(b => b.y));
+    const maxX = Math.max(...bars.map(b => b.x + b.width));
+    const maxY = Math.max(...bars.map(b => b.y + b.height));
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+  }, [bars, baselinePx, indexPos, layout, thickness]);
+  const stackOrigin = useMemo(() => {
+    var _getStackOrigin;
+    return (_getStackOrigin = getStackOrigin(bars.map(b => b.origin), bars.map(b => {
+      var _b$minSize;
+      return (_b$minSize = b.minSize) !== null && _b$minSize !== void 0 ? _b$minSize : 0;
+    }))) !== null && _getStackOrigin !== void 0 ? _getStackOrigin : baselinePx;
+  }, [bars, baselinePx]);
+  const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
+    BarComponent: bar.BarComponent,
+    borderRadius: bar.borderRadius,
+    dataX: bar.dataX,
+    dataY: bar.dataY,
+    fill: bar.fill,
+    fillOpacity: bar.fillOpacity,
+    height: bar.height,
+    minSize: bar.minSize,
+    origin: bar.origin,
+    roundBottom: bar.roundBottom,
+    roundTop: bar.roundTop,
+    seriesId: bar.seriesId,
+    stroke: bar.stroke,
+    strokeWidth: bar.strokeWidth,
+    transition: transition,
+    transitions: transitions,
+    width: bar.width,
+    x: bar.x,
+    y: bar.y
+  }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index)));
+  const edge = layout === 'vertical' ? stackRect.y : stackRect.x;
+  const size = layout === 'vertical' ? stackRect.height : stackRect.width;
+  const stackRoundLower = roundBaseline || Math.abs(edge - baselinePx) >= EPSILON;
+  const stackRoundHigher = roundBaseline || Math.abs(edge + size - baselinePx) >= EPSILON;
+  const stackRoundTop = layout === 'vertical' ? stackRoundLower : stackRoundHigher;
+  const stackRoundBottom = layout === 'vertical' ? stackRoundHigher : stackRoundLower;
+  return /*#__PURE__*/_jsx(BarStackComponent, {
+    borderRadius: borderRadius,
+    categoryIndex: categoryIndex,
+    height: stackRect.height,
+    origin: stackOrigin,
+    roundBottom: stackRoundBottom,
+    roundTop: stackRoundTop,
+    transition: transition,
+    transitions: transitions,
+    width: stackRect.width,
+    x: stackRect.x,
+    y: stackRect.y,
+    children: barElements
+  });
+});

package/esm/visualizations/chart/bar/BarStackGroup.js

@@ -0,0 +1,95 @@
+const _excluded = ["series", "xAxisId", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getBarSizeAdjustment } from '../utils/bar';
+import { isCategoricalScale } from '../utils/scale';
+import { BarStack } from './BarStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BarStackGroup component that renders a group of stacks across all categories.
+ * Delegates the actual stacking logic to BarStack for each category.
+ */
+export const BarStackGroup = /*#__PURE__*/memo(_ref => {
+  let {
+      series,
+      xAxisId,
+      yAxisId,
+      stackIndex,
+      totalStacks,
+      barPadding = 0.1
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    layout,
+    getXScale,
+    getYScale,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+  const xScale = getXScale(xAxisId);
+  const yScale = getYScale(yAxisId);
+  const stackConfigs = useMemo(() => {
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
+    const indexScale = layout !== 'horizontal' ? xScale : yScale;
+    if (!isCategoricalScale(indexScale)) {
+      return [];
+    }
+    const categoryWidth = indexScale.bandwidth();
+
+    // 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
+    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
+      // 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,
+          indexPos: stackPos,
+          thickness: stackThickness
+        });
+      }
+    }
+    return configs;
+  }, [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 ".concat(layout !== 'horizontal' ? 'x-axis' : 'y-axis', ". See https://cds.coinbase.com/components/graphs/").concat(layout !== 'horizontal' ? 'XAxis' : 'YAxis', "/#scale-type"));
+  }
+  if (!indexScaleComputed || !valueScaleComputed || !drawingArea || stackConfigs.length === 0) return null;
+
+  // In horizontal layout, render stacks in reverse order so top rows (lower categoryIndex)
+  // appear on top in SVG. Otherwise bottom rows would overlap and obscure top rows during animation.
+  const orderedConfigs = layout === 'horizontal' ? [...stackConfigs].reverse() : stackConfigs;
+  return orderedConfigs.map(_ref2 => {
+    let {
+      categoryIndex,
+      indexPos,
+      thickness
+    } = _ref2;
+    return /*#__PURE__*/_jsx(BarStack, _objectSpread({
+      categoryIndex: categoryIndex,
+      indexPos: indexPos,
+      indexScale: indexScaleComputed,
+      rect: drawingArea,
+      series: series,
+      thickness: thickness,
+      valueScale: valueScaleComputed,
+      xAxisId: xAxisId,
+      yAxisId: yAxisId
+    }, props), "stack-".concat(stackIndex, "-category-").concat(categoryIndex));
+  });
+});

package/esm/visualizations/chart/bar/DefaultBar.js

@@ -0,0 +1,82 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { defaultBarEnterOpacityTransition, 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.
+ */
+export const DefaultBar = /*#__PURE__*/memo(_ref => {
+  let {
+      x,
+      y,
+      width,
+      height,
+      borderRadius = 4,
+      roundTop,
+      roundBottom,
+      origin,
+      d,
+      fill = 'var(--color-fgPrimary)',
+      fillOpacity = 1,
+      dataX,
+      dataY,
+      seriesId,
+      minSize = 1,
+      transitions,
+      transition
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    animate,
+    drawingArea,
+    layout
+  } = useCartesianChartContext();
+  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate]);
+  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
+  const enterOpacityTransition = useMemo(() => {
+    var _enterOpacityTransiti, _enterOpacityTransiti2;
+    if ((transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity) === undefined && enterTransition === null) return null;
+    const enterOpacityTransition = getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity, animate, defaultBarEnterOpacityTransition);
+    if (!enterOpacityTransition) return null;
+    return _objectSpread(_objectSpread({}, enterOpacityTransition), {}, {
+      delay: (_enterOpacityTransiti = enterOpacityTransition.delay) !== null && _enterOpacityTransiti !== void 0 ? _enterOpacityTransiti : enterTransition === null || enterTransition === void 0 ? void 0 : enterTransition.delay,
+      staggerDelay: (_enterOpacityTransiti2 = enterOpacityTransition.staggerDelay) !== null && _enterOpacityTransiti2 !== void 0 ? _enterOpacityTransiti2 : enterTransition === null || enterTransition === void 0 ? void 0 : enterTransition.staggerDelay
+    });
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.enterOpacity, animate, enterTransition]);
+  const enterOpacityTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterOpacityTransition, normalizedStagger), [enterOpacityTransition, 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;
+    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({
+    animate: animate,
+    clipRect: null,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    transitions: {
+      enter: enterTransitionWithStagger,
+      enterOpacity: enterOpacityTransitionWithStagger,
+      update: updateTransition
+    }
+  }, props));
+});