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

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,17 +1,22 @@
+import { useCallback } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { DottedLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const basicData = [24, 13, 98, 39, 48, 38, 43];
 const BasicExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: "Area chart with " + basicData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 400,
     series: [{
       id: 'pageViews',
-      data: [24, 13, 98, 39, 48, 38, 43]
+      data: basicData
     }],
     yAxis: {
       showGrid: true,
@@ -22,21 +27,26 @@ const BasicExample = () => {
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
 };
+const currentRewardsData = [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170];
+const potentialRewardsData = [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900];
 const StackedExample = () => {
   const theme = useTheme();
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": current " + currentRewardsData[index] + ", potential " + potentialRewardsData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showLines: true,
     stacked: true,
+    accessibilityLabel: "Stacked rewards chart with " + currentRewardsData.length + " data points. Swipe to navigate.",
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 256,
     series: [{
       id: 'currentRewards',
-      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      data: currentRewardsData,
       color: theme.color.fg
     }, {
       id: 'potentialRewards',
-      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      data: potentialRewardsData,
       color: theme.color.fgPositive,
       type: 'dotted',
       LineComponent: DottedLine
@@ -59,6 +69,8 @@ const AreaChartStories = () => {
         enableScrubbing: true,
         showLines: true,
         showYAxis: true,
+        accessibilityLabel: "Area chart with negative values. 7 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [24, 13, -98, 39, 48, 38, 43][index],
         height: 150,
         series: [{
           id: 'pageViews',
@@ -101,6 +113,8 @@ const AreaChartStories = () => {
         showLines: true,
         showXAxis: true,
         showYAxis: true,
+        accessibilityLabel: "Volume by asset. 5 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'][index] + ": " + [68, 54, 43, 29, 18][index] + "%",
         height: 280,
         layout: "horizontal",
         series: [{

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -53,10 +53,14 @@ const Simple = () => {
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
+  const chartAccessibilityLabel = "Page views and unique visitors across " + pageNames.length + " pages. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => pageNames[index] + ": " + pageViews[index] + " views, " + pageUniqueVisitors[index] + " unique visitors", [pageNames, pageViews, pageUniqueVisitors]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     inset: 32,
     series: [{
@@ -97,8 +101,8 @@ const Simple = () => {
 };
 const TimeOfDayAxesExample = () => {
   const theme = useTheme();
-  const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
-  const lineB = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+  const lineA = useMemo(() => [5, 5, 10, 90, 85, 70, 30, 25, 25], []);
+  const lineB = useMemo(() => [90, 85, 70, 25, 23, 40, 45, 40, 50], []);
   const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
   const dateFormatter = useCallback(index => {
     return new Date(timeData[index]).toLocaleDateString('en-US', {
@@ -117,8 +121,12 @@ const TimeOfDayAxesExample = () => {
   const dateTicks = useMemo(() => {
     return timeData.map((d, index) => index).filter(d => d % 2 === 0);
   }, [timeData]);
+  const chartAccessibilityLabel = "Chart with " + lineA.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": lineA " + lineA[index] + ", lineB " + lineB[index], [lineA, lineB]);
   return /*#__PURE__*/_jsxs(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'lineA',
@@ -150,51 +158,57 @@ const TimeOfDayAxesExample = () => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
-const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
-  enableScrubbing: true,
-  height: defaultChartHeight,
-  series: [{
-    id: 'linear',
-    yAxisId: 'linearAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'linear'
-  }, {
-    id: 'log',
-    yAxisId: 'logAxis',
-    data: [1, 10, 30, 50, 70, 90, 100],
-    label: 'log'
-  }],
-  xAxis: {
-    data: [1, 10, 30, 50, 70, 90, 100]
-  },
-  yAxis: [{
-    id: 'linearAxis',
-    scaleType: 'linear'
-  }, {
-    id: 'logAxis',
-    scaleType: 'log'
-  }],
-  children: [/*#__PURE__*/_jsx(XAxis, {
-    showLine: true,
-    showTickMarks: true
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "logAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(YAxis, {
-    showLine: true,
-    showTickMarks: true,
-    axisId: "linearAxis",
-    position: "left"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "linear"
-  }), /*#__PURE__*/_jsx(Line, {
-    curve: "natural",
-    seriesId: "log"
-  }), /*#__PURE__*/_jsx(Scrubber, {})]
-});
+const multipleYAxesData = [1, 10, 30, 50, 70, 90, 100];
+const MultipleYAxesExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": linear " + multipleYAxesData[index] + ", log " + multipleYAxesData[index], []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with linear and log axes. 7 data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: multipleYAxesData,
+      label: 'linear'
+    }, {
+      id: 'log',
+      yAxisId: 'logAxis',
+      data: multipleYAxesData,
+      label: 'log'
+    }],
+    xAxis: {
+      data: multipleYAxesData
+    },
+    yAxis: [{
+      id: 'linearAxis',
+      scaleType: 'linear'
+    }, {
+      id: 'logAxis',
+      scaleType: 'log'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "logAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linearAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "linear"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "log"
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
 const AxesOnAllSides = () => {
   const theme = useTheme();
   const data = [30, 45, 60, 80, 55, 40, 65];
@@ -298,9 +312,12 @@ const DomainLimitType = _ref => {
   let {
     limit
   } = _ref;
-  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
+  const exponentialData = useMemo(() => [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + exponentialData[index], [exponentialData]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Exponential growth chart with " + exponentialData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     series: [{
       id: 'growthLinear',

package/esm/chart/bar/Bar.js

@@ -34,6 +34,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    minSize,
     transitions,
     transition
   } = _ref;
@@ -41,28 +42,21 @@ export const Bar = /*#__PURE__*/memo(_ref => {
   const {
     layout
   } = useCartesianChartContext();
-
-  // Use theme color as default if no fill is provided
-  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
-  const borderRadiusPixels = useMemo(() => borderRadius != null ? borderRadius : 0, [borderRadius]);
   const barPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadiusPixels, roundTop, roundBottom, layout);
-  }, [x, y, width, height, borderRadiusPixels, roundTop, roundBottom, layout]);
-  const effectiveOrigin = originProp != null ? originProp : layout === 'horizontal' ? x : y + height;
-  if (!barPath) {
-    return null;
-  }
-
-  // Always use the BarComponent for rendering
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => originProp != null ? 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: effectiveFill,
+    fill: fill != null ? fill : theme.color.fgPrimary,
     fillOpacity: fillOpacity,
     height: height,
-    origin: effectiveOrigin,
+    minSize: minSize,
+    origin: origin,
     roundBottom: roundBottom,
     roundTop: roundTop,
     seriesId: seriesId,

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,