@coinbase/cds-mobile-visualization 3.4.0-beta.24 → 3.4.0-beta.25

package/esm/chart/bar/BarChart.js

@@ -44,9 +44,9 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     });
   }, [seriesProp, stacked]);
   const seriesIds = useMemo(() => series == null ? void 0 : series.map(s => s.id), [series]);
-  const isHorizontal = chartProps.layout === 'horizontal';
-  const defaultXScaleType = isHorizontal ? 'linear' : 'band';
-  const defaultYScaleType = isHorizontal ? 'band' : 'linear';
+  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 || {},
@@ -82,24 +82,24 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scaleType: xScaleType != null ? xScaleType : defaultXScaleType,
     data: xData,
     categoryPadding: xCategoryPadding,
-    domain: isHorizontal && !hasNegativeValues ? _extends({
+    domain: isHorizontalLayout && !hasNegativeValues ? _extends({
       min: 0
     }, xDomain) : xDomain,
     domainLimit: xDomainLimit,
     range: xRange
-  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontal, hasNegativeValues, xDomain, xDomainLimit, xRange]);
+  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontalLayout, hasNegativeValues, xDomain, xDomainLimit, xRange]);
 
   // Set default min domain to 0 for bar chart, but only if there are no negative values.
   const yAxisConfig = useMemo(() => ({
     scaleType: yScaleType != null ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: !isHorizontal && !hasNegativeValues ? _extends({
+    domain: !isHorizontalLayout && !hasNegativeValues ? _extends({
       min: 0
     }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontal, hasNegativeValues, yDomain, yDomainLimit, yRange]);
+  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontalLayout, hasNegativeValues, yDomain, yDomainLimit, yRange]);
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
     inset: inset,

package/esm/chart/bar/BarPlot.js

@@ -1,9 +1,17 @@
-import { memo, useMemo } from 'react';
-import { Group, Skia } from '@shopify/react-native-skia';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { Group, Skia, usePathInterpolation } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultAxisId } from '../utils';
+import { getStackGroups } from '../utils';
+import { buildTransition, instantTransition } from '../utils/transition';
 import { BarStackGroup } from './BarStackGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
+const makeClipPath = area => {
+  const path = Skia.Path.Make();
+  path.addRect(area);
+  return path;
+};
+
 /**
  * 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.
@@ -28,6 +36,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     transition
   } = _ref;
   const {
+    animate,
     series: allSeries,
     drawingArea
   } = useCartesianChartContext();
@@ -38,50 +47,32 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     }
     return allSeries;
   }, [allSeries, seriesIds]);
-  const stackGroups = useMemo(() => {
-    const groups = new Map();
-
-    // Group series into stacks based on stackId + axis ID combination
-    targetSeries.forEach(series => {
-      var _series$xAxisId, _series$yAxisId;
-      const xAxisId = (_series$xAxisId = series.xAxisId) != null ? _series$xAxisId : defaultAxisId;
-      const yAxisId = (_series$yAxisId = series.yAxisId) != null ? _series$yAxisId : defaultAxisId;
-      const stackId = series.stackId || "individual-" + series.id;
-      const stackKey = stackId + ":" + xAxisId + ":" + yAxisId;
-      if (!groups.has(stackKey)) {
-        groups.set(stackKey, {
-          stackId: stackKey,
-          series: [],
-          xAxisId: series.xAxisId,
-          yAxisId: series.yAxisId
-        });
-      }
-      const group = groups.get(stackKey);
-      group.series.push(series);
-    });
-    return Array.from(groups.values());
-  }, [targetSeries]);
-
-  // Create clip path for the entire chart area (shared by all bars)
-  const clipPath = useMemo(() => {
-    if (!drawingArea) return null;
-    const clip = Skia.Path.Make();
-    clip.addRect({
-      x: drawingArea.x,
-      y: drawingArea.y,
-      width: drawingArea.width,
-      height: drawingArea.height
-    });
-    return clip;
-  }, [drawingArea]);
-  if (!clipPath) {
-    return null;
-  }
-
-  // Note: Clipping is now handled here at the BarPlot level (one clip path for all bars!)
-  // This is much more efficient than creating a clip path for each individual bar
+  const stackGroups = useMemo(() => getStackGroups(targetSeries), [targetSeries]);
+  const clipUpdateTransition = useMemo(() => (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : instantTransition, [transitions == null ? void 0 : transitions.update]);
+  const emptyPath = useMemo(() => Skia.Path.Make(), []);
+  const initialPath = useMemo(() => drawingArea ? makeClipPath(drawingArea) : emptyPath,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const [clipPaths, setClipPaths] = useState({
+    from: initialPath,
+    to: initialPath
+  });
+  const clipProgress = useSharedValue(0);
+  useEffect(() => {
+    if (!drawingArea) return;
+    const nextPath = makeClipPath(drawingArea);
+    setClipPaths(prev => ({
+      from: prev.to,
+      to: nextPath
+    }));
+    clipProgress.value = 0;
+    clipProgress.value = buildTransition(1, animate ? clipUpdateTransition : null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [drawingArea, animate, clipUpdateTransition]);
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], [clipPaths.from, clipPaths.to]);
+  if (!drawingArea) return;
   return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
+    clip: animatedClipPath,
     children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
       BarComponent: defaultBarComponent,
       BarStackComponent: BarStackComponent,