@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/__stories__/PeriodSelector.stories.js

@@ -1,34 +1,22 @@
-const _excluded = ["label"];
+const _excluded = ["label"],
+  _excluded2 = ["label", "font", "hideDot", "style"];
 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 { forwardRef, memo, useMemo, useState } from 'react';
-import { View } from 'react-native';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { Icon } from '@coinbase/cds-mobile/icons';
+import { HStack } from '@coinbase/cds-mobile/layout';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { TextHeadline, TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  component: PeriodSelector,
-  title: 'Components/Chart/PeriodSelector'
-};
-const Example = _ref => {
-  let {
-    children,
-    title,
-    description
-  } = _ref;
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(TextHeadline, {
-      children: title
-    }), description, children]
-  });
-};
 const PeriodSelectorExample = () => {
   const tabs = [{
     id: '1H',
@@ -77,10 +65,31 @@ const MinWidthPeriodSelectorExample = () => {
     label: 'All'
   }];
   const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeTab: activeTab,
+    gap: 0.5,
+    onChange: tab => setActiveTab(tab),
+    tabs: tabs,
+    width: "fit-content"
+  });
+};
+const PaddedPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: 'YTD',
+    label: 'YTD'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
   return /*#__PURE__*/_jsx(PeriodSelector, {
     activeTab: activeTab,
     gap: 2,
     onChange: tab => setActiveTab(tab),
+    padding: 3,
     tabs: tabs,
     width: "fit-content"
   });
@@ -116,7 +125,6 @@ const LivePeriodSelectorExample = () => {
   });
 };
 const TooManyPeriodsSelectorExample = () => {
-  const theme = useTheme();
   const tabs = useMemo(() => [{
     id: '1H',
     label: /*#__PURE__*/_jsx(LiveTabLabel, {})
@@ -145,55 +153,48 @@ const TooManyPeriodsSelectorExample = () => {
   const [activeTab, setActiveTab] = useState(tabs[0]);
   const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
   const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
-  const gradientOverlayStyles = useMemo(() => [{
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    width: theme.space[4],
-    backgroundColor: theme.color.bgPrimary,
-    opacity: 0.8
-  }], [theme.space, theme.color.bgPrimary]);
   return /*#__PURE__*/_jsxs(HStack, {
     alignItems: "center",
     justifyContent: "space-between",
     maxWidth: "100%",
-    overflow: "hidden",
     width: "100%",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      flexGrow: 1,
-      overflow: "hidden",
-      position: "relative",
-      children: [/*#__PURE__*/_jsx(Box, {
-        overflow: "scroll",
-        paddingEnd: 2,
-        children: /*#__PURE__*/_jsx(PeriodSelector, {
-          activeBackground: activeBackground,
-          activeTab: activeTab,
-          gap: 1,
-          justifyContent: "flex-start",
-          onChange: setActiveTab,
-          tabs: tabs,
-          width: "fit-content"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: gradientOverlayStyles
-      })]
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      contentContainerStyle: {
+        paddingEnd: 8,
+        flexGrow: 1
+      },
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(PeriodSelector, {
+        activeBackground: activeBackground,
+        activeTab: activeTab,
+        gap: 1,
+        justifyContent: "flex-start",
+        onChange: setActiveTab,
+        tabs: tabs,
+        width: "fit-content"
+      })
     }), /*#__PURE__*/_jsx(IconButton, {
       compact: true,
       accessibilityLabel: "Configure chart",
       flexShrink: 0,
-      height: 36,
       name: "filter",
       variant: "secondary"
     })]
   });
 };
 const btcColor = assets.btc.color;
-const BTCActiveIndicator = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-  background: btcColor + "1A"
-})));
+const BTCActiveIndicator = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    activeTab
+  } = useTabsContext();
+  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
+  const backgroundColor = useMemo(() => isLive ? theme.color.bgNegativeWash : btcColor + "1A", [isLive, theme.color.bgNegativeWash]);
+  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+    background: backgroundColor
+  }));
+});
 const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
   const theme = useTheme();
   const {
@@ -205,30 +206,67 @@ const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
     background: backgroundColor
   }));
 });
-const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       label
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     activeTab
   } = useTabsContext();
   const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
-  const textColor = isActive ? btcColor : undefined;
+  const theme = useTheme();
+
+  // If label is already a React element (like LiveTabLabel), pass it through directly
+  // For string labels, wrap with custom BTC color when active
+  const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+    dangerouslySetColor: isActive ? btcColor : theme.color.fg,
+    font: "label1",
+    children: label
+  }) : label;
   return /*#__PURE__*/_jsx(SegmentedTab, _extends({
     ref: ref,
-    label: /*#__PURE__*/_jsx(TextLabel1, {
-      dangerouslySetColor: textColor,
-      children: label
-    })
+    label: wrappedLabel
   }, props));
 }));
+const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const theme = useTheme();
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: btcColor
+  }), [theme.space]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center'
+    }, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      font: font,
+      style: {
+        color: btcColor
+      }
+    }, props, {
+      children: label
+    }))]
+  });
+}));
 const ColoredPeriodSelectorExample = () => {
   const tabs = [{
     id: '1H',
-    label: /*#__PURE__*/_jsx(LiveTabLabel, {
-      dangerouslySetColor: btcColor
-    })
+    label: /*#__PURE__*/_jsx(BTCLiveLabel, {})
   }, {
     id: '1D',
     label: '1D'
@@ -283,12 +321,100 @@ const ColoredExcludingLivePeriodSelectorExample = () => {
     tabs: tabs
   });
 };
-export const All = () => {
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: /*#__PURE__*/_jsx(Example, {
-      title: "Basic Example",
-      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
+const ColoredIcon = /*#__PURE__*/memo(_ref3 => {
+  let {
+    tabId,
+    name
+  } = _ref3;
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === tabId;
+  const theme = useTheme();
+  const progress = useSharedValue(isActive ? 1 : 0);
+  const [color, setColor] = useState(isActive ? theme.color.fgPrimary : theme.color.fg);
+  useEffect(() => {
+    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
+  }, [isActive, progress]);
+  useAnimatedReaction(() => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgPrimary]), newColor => {
+    runOnJS(setColor)(newColor);
+  });
+  return /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    name: name,
+    size: "s",
+    styles: {
+      icon: {
+        color
+      }
+    }
+  });
+});
+function IconsPeriodSelectorExample() {
+  const theme = useTheme();
+  const tabs = [{
+    id: 'buy',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartLine",
+      tabId: "buy"
+    })
+  }, {
+    id: 'sell',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartCandles",
+      tabId: "sell"
+    })
+  }, {
+    id: 'convert',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartBar",
+      tabId: "convert"
     })
+  }];
+  const [activeTab, updateActiveTab] = useState(tabs[0]);
+  const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    accessibilityLabel: "Switch token action views",
+    activeTab: activeTab,
+    borderRadius: 300,
+    gap: 0.5,
+    onChange: handleChange,
+    padding: 0.5,
+    styles: {
+      activeIndicator: {
+        borderRadius: theme.borderRadius[200]
+      }
+    },
+    tabs: tabs,
+    width: "fit-content"
+  });
+}
+export default function All() {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Min Width",
+      children: /*#__PURE__*/_jsx(MinWidthPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Live Period",
+      children: /*#__PURE__*/_jsx(LivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Too Many Periods",
+      children: /*#__PURE__*/_jsx(TooManyPeriodsSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored (BTC)",
+      children: /*#__PURE__*/_jsx(ColoredPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored Excluding Live",
+      children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Padding",
+      children: /*#__PURE__*/_jsx(PaddedPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Icons",
+      children: /*#__PURE__*/_jsx(IconsPeriodSelectorExample, {})
+    })]
   });
-};
+}

package/esm/chart/area/Area.js

@@ -1,5 +1,4 @@
 import React, { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getAreaPath } from '../utils';
 import { DottedArea } from './DottedArea';
@@ -7,37 +6,31 @@ import { GradientArea } from './GradientArea';
 import { SolidArea } from './SolidArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Area = /*#__PURE__*/memo(_ref => {
-  var _ref2;
   let {
     seriesId,
-    curve = 'linear',
+    curve = 'bump',
     type = 'solid',
-    AreaComponent: SelectedAreaComponent,
-    fill: specifiedFill,
+    AreaComponent: AreaComponentProp,
+    fill: fillProp,
     fillOpacity = 1,
-    stroke,
-    strokeWidth,
-    baseline
+    baseline,
+    connectNulls,
+    gradient: gradientProp,
+    transitions,
+    transition,
+    animate
   } = _ref;
-  const theme = useTheme();
   const {
     getSeries,
     getSeriesData,
     getXScale,
     getYScale,
-    getXAxis,
-    drawingArea
+    getXAxis
   } = useCartesianChartContext();
-
-  // Get sourceData from series (using stacked data if available)
   const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
-
-  // Check for stacked data first, then fall back to raw data
-  const sourceData = useMemo(() => {
-    return getSeriesData(seriesId) || null;
-  }, [seriesId, getSeriesData]);
-
-  // Get scales and axes for this series
+  const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
+  const fill = useMemo(() => fillProp != null ? fillProp : matchedSeries == null ? void 0 : matchedSeries.color, [fillProp, matchedSeries == null ? void 0 : matchedSeries.color]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
   const xAxis = getXAxis();
   const xScale = getXScale();
   const yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
@@ -51,35 +44,34 @@ export const Area = /*#__PURE__*/memo(_ref => {
       xScale,
       yScale,
       curve,
-      xData
+      xData,
+      connectNulls
     });
-  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data]);
+  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data, connectNulls]);
   const AreaComponent = useMemo(() => {
-    if (SelectedAreaComponent) {
-      return SelectedAreaComponent;
+    if (AreaComponentProp) {
+      return AreaComponentProp;
     }
     switch (type) {
-      case 'solid':
-        return SolidArea;
       case 'dotted':
         return DottedArea;
       case 'gradient':
-      default:
         return GradientArea;
+      case 'solid':
+      default:
+        return SolidArea;
     }
-  }, [SelectedAreaComponent, type]);
-  if (!xScale || !yScale || !sourceData || !area) {
-    return null;
-  }
-  const fill = (_ref2 = specifiedFill != null ? specifiedFill : matchedSeries == null ? void 0 : matchedSeries.color) != null ? _ref2 : theme.color.fgPrimary;
+  }, [AreaComponentProp, type]);
+  if (!xScale || !yScale || !sourceData || !area) return;
   return /*#__PURE__*/_jsx(AreaComponent, {
+    animate: animate,
     baseline: baseline,
-    clipRect: drawingArea,
     d: area,
     fill: fill,
     fillOpacity: fillOpacity,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
+    gradient: gradient,
+    transition: transition,
+    transitions: transitions,
     yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,8 +1,8 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId"];
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType"];
 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 { forwardRef, memo, useMemo } from 'react';
@@ -20,6 +20,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       curve,
       fillOpacity,
       type,
+      connectNulls,
+      transition,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -28,11 +30,11 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       lineType = 'solid',
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
@@ -41,6 +43,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       data: s.data,
       label: s.label,
       color: s.color,
+      gradient: s.gradient,
       yAxisId: s.yAxisId,
       stackId: s.stackId
     }));
@@ -120,27 +123,29 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         areaPropsFromSeries = _objectWithoutPropertiesLoose(_ref4, _excluded4);
       return /*#__PURE__*/_jsx(Area, _extends({
         AreaComponent: AreaComponent,
+        connectNulls: connectNulls,
         curve: curve,
         fillOpacity: fillOpacity,
         seriesId: id,
+        transition: transition,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series == null ? void 0 : series.map(_ref5 => {
       let {
           id,
-          color
+          // Area type (don't pass to Line)
+          lineType: seriesLineType
         } = _ref5,
-        linePropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+        otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _extends({
         LineComponent: LineComponent,
+        connectNulls: connectNulls,
         curve: curve,
-        seriesId: id // Line component now handles stacked data automatically
-        ,
-        stroke: color // Default to series color
-        ,
+        seriesId: id,
         strokeWidth: strokeWidth,
-        type: lineType
-      }, linePropsFromSeries), id + "-line");
+        transition: transition,
+        type: seriesLineType != null ? seriesLineType : lineType
+      }, otherPropsFromSeries), id);
     })), children]
   }));
 }));