@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/bar/BarStackGroup.js

@@ -0,0 +1,79 @@
+const _excluded = ["series", "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';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultAxisId, getBarSizeAdjustment, isCategoricalScale } from '../utils';
+import { BarStack } from './BarStack';
+/**
+ * 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,
+      yAxisId = defaultAxisId,
+      stackIndex,
+      totalStacks,
+      barPadding = 0.1
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    getXScale,
+    getYScale,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+  const stackConfigs = useMemo(() => {
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
+    if (!isCategoricalScale(xScale)) {
+      return [];
+    }
+    const categoryWidth = xScale.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);
+    const configs = [];
+
+    // Calculate position for each category
+    // todo: look at using xDomain for this instead of dataLength
+    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);
+        configs.push({
+          categoryIndex,
+          x: stackX,
+          width: barWidth
+        });
+      }
+    }
+    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');
+  }
+  if (!yScale || !drawingArea || stackConfigs.length === 0) return;
+  return stackConfigs.map(_ref2 => {
+    let {
+      categoryIndex,
+      x,
+      width
+    } = _ref2;
+    return /*#__PURE__*/_createElement(BarStack, _extends({}, props, {
+      key: "stack-" + stackIndex + "-category-" + categoryIndex,
+      categoryIndex: categoryIndex,
+      rect: drawingArea,
+      series: series,
+      width: width,
+      x: x,
+      yScale: yScale
+    }));
+  });
+});

package/esm/chart/bar/DefaultBar.js

@@ -0,0 +1,56 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Default bar component that renders a solid bar with animation support.
+ */
+export const DefaultBar = /*#__PURE__*/memo(_ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    borderRadius,
+    roundTop,
+    roundBottom,
+    d,
+    fill,
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    originY,
+    transition
+  } = _ref;
+  const {
+    animate
+  } = 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 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]);
+  return /*#__PURE__*/_jsx(Path, {
+    animate: animate,
+    clipPath: null,
+    d: targetPath,
+    fill: stroke ? 'none' : defaultFill,
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    transition: transition
+  });
+});

package/esm/chart/bar/DefaultBarStack.js

@@ -0,0 +1,47 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Default stack component that renders children in a group with animated clip path.
+ */
+export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    width,
+    height,
+    x,
+    y,
+    borderRadius = 4,
+    roundTop = true,
+    roundBottom = true,
+    yOrigin,
+    transition
+  } = _ref;
+  const {
+    animate
+  } = useCartesianChartContext();
+
+  // 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]);
+
+  // 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]);
+  const animatedClipPath = usePathTransition({
+    currentPath: targetPath,
+    initialPath,
+    transition
+  });
+  const clipPath = animate ? animatedClipPath : targetPath;
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    children: children
+  });
+});