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

package/esm/chart/bar/BarPlot.js

@@ -1,9 +1,17 @@
-import { memo, useId, 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.
@@ -24,13 +32,14 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     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) {
@@ -38,48 +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 + yAxisId combination
-    targetSeries.forEach(series => {
-      var _series$yAxisId;
-      const yAxisId = (_series$yAxisId = series.yAxisId) != null ? _series$yAxisId : defaultAxisId;
-      const stackId = series.stackId || "individual-" + series.id;
-      const stackKey = stackId + ":" + yAxisId;
-      if (!groups.has(stackKey)) {
-        groups.set(stackKey, {
-          stackId: stackKey,
-          series: [],
-          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,
@@ -96,6 +89,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       strokeWidth: defaultStrokeWidth,
       totalStacks: stackGroups.length,
       transition: transition,
+      transitions: transitions,
+      xAxisId: group.xAxisId,
       yAxisId: group.yAxisId
     }, group.stackId))
   });