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

package/esm/chart/bar/DefaultBar.js

@@ -3,6 +3,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
 import { defaultBarEnterTransition, getBarPath, withStaggerDelayTransition } from '../utils';
+import { getNormalizedStagger } from '../utils/bar';
 import { defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -23,6 +24,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     stroke,
     strokeWidth,
     origin,
+    minSize = 1,
     transitions,
     transition
   } = _ref;
@@ -33,28 +35,19 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
   } = useCartesianChartContext();
   const theme = useTheme();
   const defaultFill = fill || theme.color.fgPrimary;
-
-  // For vertical layout, stagger by x (category axis). For horizontal, stagger by y (category axis).
-  const normalizedStagger = useMemo(() => {
-    const barsGrowVertically = layout !== 'horizontal';
-    if (barsGrowVertically) {
-      return drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0;
-    }
-    return drawingArea.height > 0 ? (y - drawingArea.y) / drawingArea.height : 0;
-  }, [layout, x, y, drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
   const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [transitions == null ? void 0 : transitions.enter, animate, normalizedStagger]);
   const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedStagger]);
   const initialPath = useMemo(() => {
-    if (!animate) return undefined;
-    const minSize = 1;
-    const barsGrowVertically = layout !== 'horizontal';
-    const baseline = origin != null ? origin : barsGrowVertically ? y + height : x;
-    const initialX = barsGrowVertically ? x : baseline;
-    const initialY = barsGrowVertically ? baseline : y;
-    const initialWidth = barsGrowVertically ? width : minSize;
-    const initialHeight = barsGrowVertically ? minSize : height;
+    if (!animate) return;
+    const isHorizontalLayout = layout === 'horizontal';
+    const baseline = origin != null ? origin : isHorizontalLayout ? x : y + height;
+    const initialX = isHorizontalLayout ? baseline : x;
+    const initialY = isHorizontalLayout ? y : baseline;
+    const initialWidth = isHorizontalLayout ? minSize : width;
+    const initialHeight = isHorizontalLayout ? height : minSize;
     return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, !!roundTop, !!roundBottom, layout);
-  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom]);
+  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom, minSize]);
   return /*#__PURE__*/_jsx(Path, {
     animate: animate,
     clipPath: null,

package/esm/chart/bar/DefaultBarStack.js

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
-import { defaultBarEnterTransition, withStaggerDelayTransition } from '../utils/bar';
+import { defaultBarEnterTransition, getNormalizedStagger, getStackInitialClipRect, withStaggerDelayTransition } from '../utils/bar';
 import { defaultTransition, getTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -18,7 +18,7 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin,
+    origin,
     transitions,
     transition
   } = _ref;
@@ -27,15 +27,7 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     drawingArea,
     layout
   } = useCartesianChartContext();
-
-  // For vertical layout, stagger by x (category axis). For horizontal, stagger by y (category axis).
-  const normalizedStagger = useMemo(() => {
-    const barsGrowVertically = layout !== 'horizontal';
-    if (barsGrowVertically) {
-      return drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0;
-    }
-    return drawingArea.height > 0 ? (y - drawingArea.y) / drawingArea.height : 0;
-  }, [layout, x, y, drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
   const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.enter, normalizedStagger]);
   const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedStagger]);
 
@@ -46,16 +38,15 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
 
   // Initial clip path for entry animation (bar at baseline with minimal height)
   const initialPath = useMemo(() => {
-    if (!animate) return undefined;
-    const barsGrowVertically = layout !== 'horizontal';
-    const baseline = yOrigin != null ? yOrigin : barsGrowVertically ? y + height : x;
-    const minSize = 1;
-    const initialX = barsGrowVertically ? x : baseline;
-    const initialY = barsGrowVertically ? baseline : y;
-    const initialWidth = barsGrowVertically ? width : minSize;
-    const initialHeight = barsGrowVertically ? minSize : height;
-    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, roundTop, roundBottom, layout);
-  }, [animate, layout, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+    if (!animate) return;
+    const initialClipRect = getStackInitialClipRect({
+      x,
+      y,
+      width,
+      height
+    }, layout, origin);
+    return getBarPath(initialClipRect.x, initialClipRect.y, initialClipRect.width, initialClipRect.height, borderRadius, roundTop, roundBottom, layout);
+  }, [animate, layout, x, y, height, width, borderRadius, roundTop, roundBottom, origin]);
   const animatedClipPath = usePathTransition({
     currentPath: targetPath,
     initialPath,

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -1,7 +1,8 @@
 const _excluded = ["children"],
   _excluded2 = ["animate"],
   _excluded3 = ["x", "y", "width", "height", "dataX"],
-  _excluded4 = ["data", "height"];
+  _excluded4 = ["data", "height"],
+  _excluded5 = ["buy", "sell", "animate", "borderRadius", "height", "inset", "layout", "stackGap", "xAxis", "yAxis", "barMinSize"];
 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; }
 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); }
 import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
@@ -17,6 +18,7 @@ import { Line as SkiaLine, Rect } from '@shopify/react-native-skia';
 import { XAxis, YAxis } from '../../axis';
 import { CartesianChart } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
+import { DefaultLegendEntry } from '../../legend';
 import { ReferenceLine, SolidLine } from '../../line';
 import { Scrubber } from '../../scrubber';
 import { getPointOnSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
@@ -125,6 +127,7 @@ const CustomBarStackComponent = /*#__PURE__*/memo(_ref => {
   }));
 });
 const MonthlyRewards = () => {
+  const theme = useTheme();
   const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
   const purple = [null, 6, 8, 10, 7, 6, 6, 8, null, null, null, null];
   const blue = [null, 10, 12, 11, 10, 9, 10, 11, null, null, null, null];
@@ -134,19 +137,19 @@ const MonthlyRewards = () => {
   const series = [{
     id: 'purple',
     data: purple,
-    color: '#b399ff'
+    color: "rgb(" + theme.spectrum.purple30 + ")"
   }, {
     id: 'blue',
     data: blue,
-    color: '#4f7cff'
+    color: "rgb(" + theme.spectrum.blue30 + ")"
   }, {
     id: 'cyan',
     data: cyan,
-    color: '#00c2df'
+    color: "rgb(" + theme.spectrum.teal30 + ")"
   }, {
     id: 'green',
     data: green,
-    color: '#33c481'
+    color: "rgb(" + theme.spectrum.green30 + ")"
   }];
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
@@ -165,7 +168,7 @@ const MonthlyRewards = () => {
         tickLabelFormatter: index => {
           return months[index];
         },
-        categoryPadding: 0.27
+        categoryPadding: 0.25
       }
     }), /*#__PURE__*/_jsx(Button, {
       onPress: () => setRoundBaseline(!roundBaseline),
@@ -1061,6 +1064,98 @@ const HorizontalBarChart = () => {
     }
   });
 };
+function BuyVsSellExample() {
+  function BuyVsSellLegend(_ref15) {
+    let {
+      buy,
+      sell
+    } = _ref15;
+    const theme = useTheme();
+    return /*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/_jsx(DefaultLegendEntry, {
+        color: theme.color.fgPositive,
+        label: /*#__PURE__*/_jsxs(Text, {
+          color: "fgMuted",
+          font: "legal",
+          children: [buy, "% bought"]
+        }),
+        seriesId: "buy"
+      }), /*#__PURE__*/_jsx(DefaultLegendEntry, {
+        color: theme.color.fgNegative,
+        label: /*#__PURE__*/_jsxs(Text, {
+          color: "fgMuted",
+          font: "legal",
+          children: [sell, "% sold"]
+        }),
+        seriesId: "sell"
+      })]
+    });
+  }
+  function BuyVsSellChart(_ref16) {
+    let {
+        buy,
+        sell,
+        animate = true,
+        borderRadius = 3,
+        height = 6,
+        inset = 0,
+        layout = 'horizontal',
+        stackGap = 4,
+        xAxis,
+        yAxis,
+        barMinSize = height
+      } = _ref16,
+      props = _objectWithoutPropertiesLoose(_ref16, _excluded5);
+    const theme = useTheme();
+    return /*#__PURE__*/_jsxs(VStack, {
+      gap: 1.5,
+      children: [/*#__PURE__*/_jsx(BarChart, _extends({
+        roundBaseline: true,
+        stacked: true,
+        animate: animate,
+        barMinSize: barMinSize,
+        borderRadius: borderRadius,
+        height: height,
+        inset: inset,
+        layout: layout,
+        series: [{
+          id: 'buy',
+          data: [buy],
+          color: theme.color.fgPositive,
+          legendShape: 'circle'
+        }, {
+          id: 'sell',
+          data: [sell],
+          color: theme.color.fgNegative,
+          legendShape: 'circle'
+        }],
+        stackGap: stackGap,
+        transitions: {
+          enter: {
+            type: 'timing',
+            duration: 5000,
+            delay: 2000
+          }
+        },
+        xAxis: _extends({
+          domainLimit: 'strict'
+        }, xAxis),
+        yAxis: _extends({
+          categoryPadding: 0
+        }, yAxis)
+      }, props)), /*#__PURE__*/_jsx(BuyVsSellLegend, {
+        buy: buy,
+        sell: sell
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(BuyVsSellChart, {
+    buy: 76,
+    sell: 24
+  });
+}
 const PopulationPyramid = () => {
   const theme = useTheme();
   const ageGroups = ['100+ yrs', '95-99 yrs', '90-94 yrs', '85-89 yrs', '80-84 yrs', '75-79 yrs', '70-74 yrs', '65-69 yrs', '60-64 yrs', '55-59 yrs', '50-54 yrs', '45-49 yrs', '40-44 yrs', '35-39 yrs', '30-34 yrs', '25-29 yrs', '20-24 yrs', '15-19 yrs', '10-14 yrs', '5-9 yrs', '0-4 yrs'];
@@ -1192,6 +1287,9 @@ function ExampleNavigator() {
   }, {
     title: 'Horizontal Layout',
     component: /*#__PURE__*/_jsx(HorizontalBarChart, {})
+  }, {
+    title: 'Buy vs Sell',
+    component: /*#__PURE__*/_jsx(BuyVsSellExample, {})
   }, {
     title: 'Population Pyramid',
     component: /*#__PURE__*/_jsx(PopulationPyramid, {})