@coinbase/cds-mobile-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/esm/chart/bar/BarStack.js

@@ -2,9 +2,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientStops } from '../utils/gradient';
+import { convertToSerializableScale } from '../utils/scale';
 import { Bar } from './Bar';
 import { DefaultBarStack } from './DefaultBarStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+const EPSILON = 1e-4;
 /**
  * BarStack component that renders a single stack of bars at a specific category index.
  * Handles the stacking logic for bars within a single category.
@@ -26,14 +29,17 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
-    roundBaseline
+    roundBaseline,
+    transition
   } = _ref;
   const theme = useTheme();
   const {
     getSeriesData,
-    getXAxis
+    getXAxis,
+    getXScale
   } = useCartesianChartContext();
   const xAxis = getXAxis();
+  const xScale = getXScale();
   const baseline = useMemo(() => {
     var _yScale;
     const domain = yScale.domain();
@@ -42,6 +48,25 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     const baseline = (_yScale = yScale(baselineValue)) != null ? _yScale : rect.y + rect.height;
     return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
   }, [rect.height, rect.y, yScale]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient || !xScale || !yScale) return;
+      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      const serializableScale = convertToSerializableScale(gradientScale);
+      if (!serializableScale) return;
+      const domain = {
+        min: serializableScale.domain[0],
+        max: serializableScale.domain[1]
+      };
+      const stops = getGradientStops(s.gradient.stops, domain);
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: serializableScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale]);
 
   // Calculate bars for this specific category
   const {
@@ -98,6 +123,24 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // Update stack bounds
       minY = Math.min(minY, y);
       maxY = Math.max(maxY, y + height);
+
+      // Determine fill color, respecting gradient if present
+      let barFill = s.color || theme.color.fgPrimary;
+
+      // Evaluate gradient if provided (using precomputed stops)
+      const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
+      if (seriesGradientConfig) {
+        var _seriesGradientConfig;
+        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig : 'y';
+        // For x-axis gradient, use the categoryIndex
+        // For y-axis gradient, use the actual data value
+        const dataValue = axis === 'x' ? categoryIndex : top;
+        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, dataValue, seriesGradientConfig.scale);
+        if (evaluatedColor) {
+          // Only apply gradient color if fill is not explicitly set
+          barFill = evaluatedColor;
+        }
+      }
       allBars.push({
         seriesId: s.id,
         x,
@@ -106,15 +149,10 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         height,
         dataY: value,
         // Store the actual data value
-        // Use series-specific properties, falling back to defaults
-        BarComponent: s.BarComponent,
-        fill: s.fill || s.color || theme.color.fgPrimary,
-        fillOpacity: s.fillOpacity,
-        stroke: s.stroke,
-        strokeWidth: s.strokeWidth,
-        // Pass context data for custom components
-        roundTop: roundBaseline || barTop !== baseline,
-        roundBottom: roundBaseline || barBottom !== baseline,
+        fill: barFill,
+        // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+        roundTop: roundBaseline || Math.abs(barTop - baseline) >= EPSILON,
+        roundBottom: roundBaseline || Math.abs(barBottom - baseline) >= EPSILON,
         shouldApplyGap
       });
     });
@@ -200,8 +238,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         if (bar.height < barMinSize) {
           var _yScale4, _yScale5, _yScale6, _yScale7;
           const heightIncrease = barMinSize - bar.height;
-          const bottom = 0;
-          const top = 0;
+          const [bottom, top] = bar.dataY.sort((a, b) => a - b);
 
           // Determine how to expand the bar
           let newBottom = bottom;
@@ -344,8 +381,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
         const bar = allBars[0];
         const heightIncrease = stackMinSize - bar.height;
-        const bottom = 0;
-        const top = 0;
+        const [bottom, top] = bar.dataY.sort((a, b) => a - b);
 
         // Determine how to expand the bar (same logic as barMinSize)
         let newBottom = bottom;
@@ -474,37 +510,38 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       bars: allBars,
       stackRect: stackBounds
     };
-  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, yScale, theme.color.fgPrimary]);
+  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, yScale, seriesGradients, theme.color.fgPrimary]);
   const xData = xAxis != null && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
   const dataX = xData ? xData[categoryIndex] : categoryIndex;
-  const barElements = bars.map((bar, index) => {
-    var _bar$fillOpacity, _bar$stroke, _bar$strokeWidth;
-    return /*#__PURE__*/_jsx(Bar, {
-      BarComponent: bar.BarComponent || defaultBarComponent,
-      borderRadius: borderRadius,
-      dataX: dataX,
-      dataY: bar.dataY,
-      fill: bar.fill,
-      fillOpacity: (_bar$fillOpacity = bar.fillOpacity) != null ? _bar$fillOpacity : defaultFillOpacity,
-      height: bar.height,
-      originY: baseline,
-      roundBottom: bar.roundBottom,
-      roundTop: bar.roundTop,
-      stroke: (_bar$stroke = bar.stroke) != null ? _bar$stroke : defaultStroke,
-      strokeWidth: (_bar$strokeWidth = bar.strokeWidth) != null ? _bar$strokeWidth : defaultStrokeWidth,
-      width: bar.width,
-      x: bar.x,
-      y: bar.y
-    }, bar.seriesId + "-" + categoryIndex + "-" + index);
-  });
-  const stackRoundBottom = roundBaseline || stackRect.y + stackRect.height !== baseline;
-  const stackRoundTop = roundBaseline || stackRect.y !== baseline;
+  const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
+    BarComponent: defaultBarComponent,
+    borderRadius: borderRadius,
+    dataX: dataX,
+    dataY: bar.dataY,
+    fill: bar.fill,
+    fillOpacity: defaultFillOpacity,
+    height: bar.height,
+    originY: baseline,
+    roundBottom: bar.roundBottom,
+    roundTop: bar.roundTop,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    transition: transition,
+    width: bar.width,
+    x: bar.x,
+    y: bar.y
+  }, bar.seriesId + "-" + categoryIndex + "-" + index));
+
+  // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+  const stackRoundBottom = roundBaseline || Math.abs(stackRect.y + stackRect.height - baseline) >= EPSILON;
+  const stackRoundTop = roundBaseline || Math.abs(stackRect.y - baseline) >= EPSILON;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,
     height: stackRect.height,
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
+    transition: transition,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/BarStackGroup.js

@@ -19,26 +19,15 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    getSeriesData,
     getXScale,
     getYScale,
-    drawingArea
+    drawingArea,
+    dataLength
   } = useCartesianChartContext();
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const maxDataLength = useMemo(() => {
-    if (!series || series.length === 0) return 0;
-    let maxLength = 0;
-    series.forEach(s => {
-      const data = getSeriesData(s.id);
-      if (data && data.length > maxLength) {
-        maxLength = data.length;
-      }
-    });
-    return maxLength;
-  }, [series, getSeriesData]);
   const stackConfigs = useMemo(() => {
-    if (!xScale || !yScale || !drawingArea || maxDataLength === 0) return [];
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
     if (!isCategoricalScale(xScale)) {
       return [];
     }
@@ -51,7 +40,8 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     const configs = [];
 
     // Calculate position for each category
-    for (let categoryIndex = 0; categoryIndex < maxDataLength; categoryIndex++) {
+    // 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) {
@@ -65,7 +55,7 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
       }
     }
     return configs;
-  }, [xScale, yScale, drawingArea, maxDataLength, stackIndex, totalStacks, barPadding]);
+  }, [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');
   }

package/esm/chart/bar/DefaultBar.js

@@ -1,14 +1,11 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { runOnJS, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
-import { Path } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import * as interpolate from 'd3-interpolate-path';
 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.
+ * Default bar component that renders a solid bar with animation support.
  */
 export const DefaultBar = /*#__PURE__*/memo(_ref => {
   let {
@@ -23,56 +20,37 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     fill,
     fillOpacity = 1,
     stroke,
-    strokeWidth
+    strokeWidth,
+    originY,
+    transition
   } = _ref;
-  const pathRef = useRef(null);
   const {
     animate
   } = useCartesianChartContext();
   const theme = useTheme();
-  const animationProgress = useSharedValue(0);
-  const targetPath = useMemo(() => {
-    return d || getBarPath(x, y, width, height, borderRadius != null ? borderRadius : 0, roundTop != null ? roundTop : true, roundBottom != null ? roundBottom : true);
-  }, [d, x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const previousPath = usePreviousValue(targetPath);
-  const fromPath = useMemo(() => {
-    if (!animate) return targetPath;
-    return previousPath || targetPath;
-  }, [animate, previousPath, targetPath]);
-  const pathInterpolator = useMemo(() => interpolate.interpolatePath(fromPath, targetPath), [fromPath, targetPath]);
-  const updatePath = useCallback(progress => {
-    var _pathRef$current;
-    const val = Number(progress.toFixed(4));
-    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
-      d: pathInterpolator(val)
-    });
-  }, [pathInterpolator]);
   const defaultFill = fill || theme.color.fgPrimary;
-  useAnimatedReaction(() => animationProgress.value, progress => {
-    'worklet';
-
-    runOnJS(updatePath)(progress);
-  }, [updatePath]);
-  useEffect(() => {
-    if (!pathRef.current) return;
-    if (!animate) {
-      pathRef.current.setNativeProps({
-        d: targetPath
-      });
-      animationProgress.value = 1;
-      return;
-    }
-    animationProgress.value = 0;
-    animationProgress.value = withTiming(1, {
-      duration: 200
-    });
-  }, [animate, animationProgress, targetPath]);
+  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, {
-    ref: pathRef,
-    d: fromPath,
-    fill: defaultFill,
+    animate: animate,
+    clipPath: null,
+    d: targetPath,
+    fill: stroke ? 'none' : defaultFill,
     fillOpacity: fillOpacity,
+    initialPath: initialPath,
     stroke: stroke,
-    strokeWidth: strokeWidth
+    strokeWidth: strokeWidth,
+    transition: transition
   });
 });

package/esm/chart/bar/DefaultBarStack.js

@@ -1,11 +1,9 @@
-import { memo, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { runOnJS, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
-import { ClipPath, Defs, G, Path } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import * as interpolate from 'd3-interpolate-path';
+import { memo, useMemo } from 'react';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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.
  */
@@ -19,64 +17,31 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin
+    yOrigin,
+    transition
   } = _ref;
-  const pathRef = useRef(null);
   const {
     animate
   } = useCartesianChartContext();
-  const clipPathId = useId();
-  const animationProgress = useSharedValue(0);
-  const targetClipPath = useMemo(() => {
+
+  // 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]);
-  const previousClipPath = usePreviousValue(targetClipPath);
-  const initialClipPath = useMemo(() => {
-    return getBarPath(x, yOrigin != null ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
-  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
-  const fromClipPath = useMemo(() => {
-    if (!animate) return targetClipPath;
-    return previousClipPath || initialClipPath;
-  }, [animate, previousClipPath, initialClipPath, targetClipPath]);
-  const clipPathInterpolator = useMemo(() => interpolate.interpolatePath(fromClipPath, targetClipPath), [fromClipPath, targetClipPath]);
-  const updateClipPath = useCallback(progress => {
-    var _pathRef$current;
-    const val = Number(progress.toFixed(4));
-    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
-      d: clipPathInterpolator(val)
-    });
-  }, [clipPathInterpolator]);
-  useAnimatedReaction(() => animationProgress.value, progress => {
-    'worklet';
 
-    runOnJS(updateClipPath)(progress);
-  }, [updateClipPath]);
-  useEffect(() => {
-    if (!pathRef.current) return;
-    if (!animate) {
-      pathRef.current.setNativeProps({
-        d: targetClipPath
-      });
-      animationProgress.value = 1;
-      return;
-    }
-    animationProgress.value = 0;
-    animationProgress.value = withTiming(1, {
-      duration: 300
-    });
-  }, [animate, animationProgress, targetClipPath, initialClipPath]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(ClipPath, {
-        id: clipPathId,
-        children: /*#__PURE__*/_jsx(Path, {
-          ref: pathRef,
-          d: fromClipPath
-        })
-      })
-    }), /*#__PURE__*/_jsx(G, {
-      clipPath: "url(#" + clipPathId + ")",
-      children: children
-    })]
+  // 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
   });
 });