@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/area/DottedArea.js

@@ -0,0 +1,92 @@
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
+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); }
+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; }
+import { memo, useMemo } from 'react';
+import { Group } from '@shopify/react-native-skia';
+import { useTheme } from '../../../hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { getDottedAreaPath } from '../utils/path';
+import { defaultTransition, usePathTransition } from '../utils/transition';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable dotted area gradient component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export const DottedArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+      d,
+      fill: fillProp,
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      xAxisId,
+      yAxisId,
+      gradient: gradientProp,
+      animate: animateProp,
+      transitions,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    drawingArea,
+    animate,
+    layout,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const shouldAnimate = animateProp != null ? animateProp : animate;
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const updateTransition = useMemo(() => {
+    return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
+  }, [transitions == null ? void 0 : transitions.update, transition]);
+  const dottedPath = useMemo(() => {
+    if (!drawingArea) return '';
+    return getDottedAreaPath({
+      x: drawingArea.x,
+      y: drawingArea.y,
+      width: drawingArea.width,
+      height: drawingArea.height
+    }, patternSize, dotSize);
+  }, [drawingArea, patternSize, dotSize]);
+  const clipPath = usePathTransition({
+    currentPath: d,
+    transitions: {
+      update: shouldAnimate ? updateTransition : null
+    }
+  });
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
+
+  // Update transition is used for clip path, we skip update animation on Path itself
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    children: /*#__PURE__*/_jsx(Path, _extends({
+      animate: shouldAnimate,
+      d: dottedPath,
+      fill: fill,
+      transition: transition,
+      transitions: transitions
+    }, pathProps, {
+      children: gradient && /*#__PURE__*/_jsx(Gradient, {
+        animate: shouldAnimate,
+        gradient: gradient,
+        transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
+        xAxisId: xAxisId,
+        yAxisId: yAxisId
+      })
+    }))
+  });
+});

package/esm/visualizations/chart/area/GradientArea.js

@@ -0,0 +1,63 @@
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition"];
+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); }
+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; }
+import { memo, useMemo } from 'react';
+import { useTheme } from '../../../hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable gradient area component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export const GradientArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+      d,
+      fill: fillProp,
+      fillOpacity = 1,
+      gradient: gradientProp,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      xAxisId,
+      yAxisId,
+      animate,
+      transitions,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    layout,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const theme = useTheme();
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    transition: transition,
+    transitions: transitions
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
+      gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
+      xAxisId: xAxisId,
+      yAxisId: yAxisId
+    })
+  }));
+});

package/esm/visualizations/chart/area/SolidArea.js

@@ -0,0 +1,45 @@
+const _excluded = ["d", "fill", "fillOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition", "gradient"];
+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); }
+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; }
+import { memo } from 'react';
+import { useTheme } from '../../../hooks/useTheme';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable solid area component.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
+ */
+export const SolidArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+      d,
+      fill,
+      fillOpacity = 1,
+      xAxisId,
+      yAxisId,
+      animate,
+      transitions,
+      transition,
+      gradient
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill != null ? fill : theme.color.fgPrimary,
+    fillOpacity: fillOpacity,
+    transition: transition,
+    transitions: transitions
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
+      gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
+      xAxisId: xAxisId,
+      yAxisId: yAxisId
+    })
+  }));
+});

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

@@ -0,0 +1,328 @@
+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 } from 'react';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
+import { VStack } from '../../../../layout';
+import { DefaultReferenceLineLabel, DottedLine, ReferenceLine } 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 baselineThresholdData = [40, 28, 21, 5, 48, 5, 28, 2, 29, 48, 18, 30, 29, 8].map(value => value + 50);
+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: basicData
+    }],
+    yAxis: {
+      showGrid: true,
+      domain: {
+        min: 0
+      }
+    },
+    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: currentRewardsData,
+      color: theme.color.fg
+    }, {
+      id: 'potentialRewards',
+      data: potentialRewardsData,
+      color: theme.color.fgPositive,
+      type: 'dotted',
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [6, 6]
+      }))
+    }],
+    type: "dotted",
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const CustomBaselineExample = () => {
+  const theme = useTheme();
+  const candles = [...btcCandles].reverse().slice(0, 180);
+  const prices = candles.map(candle => parseFloat(candle.close));
+  const dates = candles.map(candle => new Date(parseInt(candle.start, 10) * 1000));
+  const startingPrice = prices[0];
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  const formatPriceInThousands = useCallback(price => {
+    return "$" + (price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }) + "k";
+  }, []);
+  const formatDate = useCallback(date => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  }, []);
+  const formatLabel = useCallback(dataIndex => formatPrice(prices[dataIndex]) + " " + formatDate(dates[dataIndex]), [dates, formatDate, formatPrice, prices]);
+  const PriceLabel = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    dx: 12,
+    font: "label1",
+    horizontalAlignment: "left",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    }
+  })));
+  const chartAccessibilityLabel = "Bitcoin area chart with custom baseline. Current price: " + formatPrice(prices[prices.length - 1]) + ". Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => formatPrice(prices[index]) + " " + formatDate(dates[index]), [dates, formatDate, formatPrice, prices]);
+  return /*#__PURE__*/_jsxs(AreaChart, {
+    enableScrubbing: true,
+    showLines: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    fillOpacity: 0.5,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 300,
+    series: [{
+      id: 'prices',
+      data: prices,
+      gradient: {
+        stops: [{
+          offset: startingPrice,
+          color: theme.color.fgNegative
+        }, {
+          offset: startingPrice,
+          color: theme.color.fgPositive
+        }]
+      }
+    }],
+    yAxis: {
+      baseline: startingPrice,
+      showGrid: true,
+      tickLabelFormatter: formatPriceInThousands,
+      domain: {
+        min: 70000,
+        max: 120000
+      },
+      ticks: [80000, 100000, 120000]
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {
+      labelElevated: true,
+      label: formatLabel
+    }), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: PriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startingPrice,
+      label: formatPrice(startingPrice),
+      stroke: theme.color.fg
+    })]
+  });
+};
+const AxisBaselineThresholdExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(AreaChart, {
+      enableScrubbing: true,
+      showLines: true,
+      showYAxis: true,
+      accessibilityLabel: "Area chart with threshold baseline at 30.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
+      height: 220,
+      inset: 0,
+      series: [{
+        id: 'axis-baseline-threshold-vertical',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      type: "dotted",
+      yAxis: {
+        showGrid: true,
+        baseline: 30
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {})
+    }), /*#__PURE__*/_jsx(AreaChart, {
+      enableScrubbing: true,
+      showLines: true,
+      showXAxis: true,
+      accessibilityLabel: "Horizontal area chart with threshold baseline at 30.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
+      height: 220,
+      inset: 0,
+      layout: "horizontal",
+      series: [{
+        id: 'axis-baseline-threshold-horizontal',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      type: "dotted",
+      xAxis: {
+        showGrid: true,
+        baseline: 30
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {})
+    })]
+  });
+};
+const AreaChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(BasicExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Stacked",
+      children: /*#__PURE__*/_jsx(StackedExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative Values",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        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',
+          data: [24, 13, -98, 39, 48, 38, 43]
+        }],
+        type: "gradient",
+        yAxis: {
+          showGrid: true
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axis Baseline",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showYAxis: true,
+        accessibilityLabel: "Area chart with custom axis baseline at 100.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [112, 97, 121, 103, 129, 118, 94][index],
+        height: 220,
+        series: [{
+          id: 'netFlow',
+          data: [112, 97, 121, 103, 129, 118, 94]
+        }],
+        yAxis: {
+          baseline: 100,
+          domain: {
+            min: 80,
+            max: 140
+          },
+          showGrid: true,
+          tickLabelFormatter: value => "" + value
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axis Baseline Threshold",
+      children: /*#__PURE__*/_jsx(AxisBaselineThresholdExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Baseline",
+      children: /*#__PURE__*/_jsx(CustomBaselineExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Styles",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: false,
+        height: 350,
+        series: [{
+          id: 'visitors',
+          data: [450, 520, 480, 600, 750, 680, 590],
+          label: 'Weekly Visitors',
+          color: '#fb4d3d',
+          type: 'dotted'
+        }, {
+          id: 'repeatVisitors',
+          data: [250, 200, 150, 140, 100, 80, 50],
+          label: 'Weekly Repeat Visitors',
+          color: '#16a34a'
+        }, {
+          id: 'signups',
+          data: [45, 62, 55, 250, 380, 400, 450],
+          label: 'Weekly Signups',
+          color: '#2563eb',
+          type: 'gradient'
+        }]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Horizontal Layout",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        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: [{
+          id: 'volume',
+          data: [68, 54, 43, 29, 18],
+          label: 'Volume'
+        }],
+        type: "gradient",
+        xAxis: {
+          domain: {
+            min: 0,
+            max: 80
+          },
+          tickLabelFormatter: value => value + "%"
+        },
+        yAxis: {
+          data: ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'],
+          scaleType: 'band'
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    })]
+  });
+};
+export default AreaChartStories;

package/esm/visualizations/chart/area/index.js

@@ -0,0 +1,7 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+// codegen:end

package/esm/visualizations/chart/axis/Axis.js

@@ -0,0 +1,9 @@
+import { accessoryFadeTransitionDuration } from '../utils';
+
+/**
+ * Animation transition for axis elements (grid lines, tick marks, tick labels).
+ * Matches web's axisUpdateAnimationTransition timing.
+ */
+export const axisUpdateAnimationTransition = {
+  duration: accessoryFadeTransitionDuration
+};

package/esm/visualizations/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,11 @@
+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 } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(ChartText, _extends({}, props));
+});