@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

package/esm/chart/PeriodSelector.js

@@ -9,7 +9,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
 import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
-import { Text } from '@coinbase/cds-mobile/typography/Text';
+import { Text } from '@coinbase/cds-mobile/typography';
 
 // Animated active indicator to support smooth transition of background color
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const {
     width,
     height,
-    x
+    x,
+    y
   } = activeTabRect;
 
   // Get the target background color
@@ -38,6 +39,7 @@ export const PeriodSelectorActiveIndicator = _ref => {
   // Combined animated value for position, size, and color
   const newAnimatedValues = {
     x,
+    y,
     width,
     backgroundColor: targetColor
   };
@@ -51,6 +53,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{
       translateX: animatedValues.value.x
+    }, {
+      translateY: animatedValues.value.y
     }],
     width: animatedValues.value.width,
     backgroundColor: animatedValues.value.backgroundColor

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

@@ -6,8 +6,8 @@ import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candle
 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 { TextLabel1, TextLabel2, TextTitle1, TextTitle2 } from '@coinbase/cds-mobile/typography';
-import { Circle, Group, Skia } from '@shopify/react-native-skia';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { Circle, Group } from '@shopify/react-native-skia';
 import { Area } from '../area/Area';
 import { XAxis, YAxis } from '../axis';
 import { BarPlot } from '../bar/BarPlot';
@@ -155,7 +155,7 @@ const EarningsHistory = () => {
       backgroundColor: theme.color.bgPositive
     }
   });
-  const LegendItem = /*#__PURE__*/memo(_ref2 => {
+  const LegendEntry = /*#__PURE__*/memo(_ref2 => {
     let {
       opacity = 1,
       label
@@ -168,7 +168,8 @@ const EarningsHistory = () => {
         style: [styles.legendDot, {
           opacity
         }]
-      }), /*#__PURE__*/_jsx(TextLabel2, {
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label2",
         children: label
       })]
     });
@@ -216,10 +217,10 @@ const EarningsHistory = () => {
     }), /*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       justifyContent: "flex-end",
-      children: [/*#__PURE__*/_jsx(LegendItem, {
+      children: [/*#__PURE__*/_jsx(LegendEntry, {
         label: "Estimated EPS",
         opacity: 0.5
-      }), /*#__PURE__*/_jsx(LegendItem, {
+      }), /*#__PURE__*/_jsx(LegendEntry, {
         label: "Actual EPS"
       })]
     })]
@@ -249,11 +250,21 @@ const PriceWithVolumeChart = /*#__PURE__*/memo(_ref3 => {
       day: 'numeric'
     });
   }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
   const scrubberLabel = useCallback(dataIndex => {
     return formatDate(btcDates[dataIndex]);
   }, [formatDate]);
+  const chartAccessibilityLabel = useMemo(() => {
+    const lastIndex = btcPrices.length - 1;
+    return "Bitcoin chart. Current date " + formatDate(btcDates[lastIndex]) + ". Current price " + formatPriceInThousands(btcPrices[lastIndex]) + ". Current volume " + formatVolume(btcVolumes[lastIndex]) + ".";
+  }, [formatDate, formatPriceInThousands, formatVolume]);
+  const getScrubberAccessibilityLabel = useCallback(dataIndex => "Bitcoin on " + formatDate(btcDates[dataIndex]) + ". Price " + formatPriceInThousands(btcPrices[dataIndex]) + ". Volume " + formatVolume(btcVolumes[dataIndex]) + ".", [formatDate, formatPriceInThousands, formatVolume]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: defaultChartHeight,
     onScrubberPositionChange: onScrubberPositionChange,
     series: [{
@@ -350,9 +361,11 @@ const PriceWithVolumeHeader = /*#__PURE__*/memo(_ref7 => {
     paddingX: 0,
     children: [/*#__PURE__*/_jsxs(VStack, {
       gap: 0,
-      children: [/*#__PURE__*/_jsx(TextTitle1, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title1",
         children: "Bitcoin"
-      }), /*#__PURE__*/_jsx(TextTitle2, {
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "title2",
         children: formatPrice(currentPrice)
       })]
     }), /*#__PURE__*/_jsxs(HStack, {
@@ -360,9 +373,11 @@ const PriceWithVolumeHeader = /*#__PURE__*/memo(_ref7 => {
       children: [/*#__PURE__*/_jsxs(VStack, {
         alignItems: "flex-end",
         justifyContent: "center",
-        children: [/*#__PURE__*/_jsx(TextLabel1, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
           children: formatDate(currentDate)
-        }), /*#__PURE__*/_jsx(TextLabel2, {
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
           children: volumeText
         })]
       }), /*#__PURE__*/_jsx(VStack, {
@@ -480,80 +495,6 @@ function TradingTrends() {
     })]
   });
 }
-const UVGradient = {
-  axis: 'y',
-  stops: [{
-    offset: 0,
-    color: 'green'
-  }, {
-    offset: 3,
-    color: 'yellow'
-  }, {
-    offset: 5,
-    color: 'orange'
-  }, {
-    offset: 8,
-    color: 'red'
-  }, {
-    offset: 10,
-    color: 'purple'
-  }]
-};
-const PreviousData = /*#__PURE__*/memo(_ref0 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref0;
-  // we will clip the data to the current hour
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from top-left of drawing area to currentHourX on the right
-    // Apply clipOffset to left, top, and bottom edges only (NOT to currentHourX)
-    const pathString = "M " + (drawingArea.x - clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + (drawingArea.x - clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    opacity: 0.75,
-    children: children
-  });
-});
-const FutureData = /*#__PURE__*/memo(_ref1 => {
-  let {
-    children,
-    currentHour,
-    clipOffset = 0
-  } = _ref1;
-  // we will clip the data from the current hour to the right edge
-  const {
-    drawingArea,
-    getXScale
-  } = useCartesianChartContext();
-  const xScale = getXScale();
-  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
-  const clipPath = useMemo(() => {
-    if (!xScale || currentHourX === undefined) return null;
-
-    // Create a rectangle from currentHourX to right edge of drawing area
-    // Apply clipOffset to top, bottom, and right, but NOT left (currentHourX)
-    const pathString = "M " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
-    return Skia.Path.MakeFromSVGString(pathString);
-  }, [xScale, currentHourX, drawingArea, clipOffset]);
-  if (!clipPath) return null;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    children: children
-  });
-});
 const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const theme = useTheme();
   const dataPoints = useMemo(() => [{
@@ -637,13 +578,13 @@ const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
   const yMax = Math.max(...yValues);
 
   // Custom label component that places labels to the top-right
-  const TopRightPointLabel = useCallback(_ref10 => {
+  const TopRightPointLabel = useCallback(_ref0 => {
     let {
       x,
       y,
       offset = 0,
       children
-    } = _ref10;
+    } = _ref0;
     return /*#__PURE__*/_jsx(ChartText, {
       font: "label1",
       fontWeight: 600,