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

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -1,19 +1,18 @@
 const _excluded = ["dataX", "dataY"],
   _excluded2 = ["label"],
-  _excluded3 = ["style"],
-  _excluded4 = ["x", "y", "width", "height", "originY", "dataX"],
-  _excluded5 = ["seriesId", "color", "label"];
+  _excluded3 = ["style"];
 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, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { useTheme } from '@coinbase/cds-mobile';
-import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
+import { DataCard } from '@coinbase/cds-mobile/alpha/data-card/DataCard';
+import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { ListCell } from '@coinbase/cds-mobile/cells';
 import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
@@ -22,45 +21,37 @@ import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader
 import { Pressable } from '@coinbase/cds-mobile/system';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, FontWeight, Group, Line as SkiaLine, Rect, Skia, TextAlign } from '@shopify/react-native-skia';
+import { Circle, FontWeight, Group, Skia, TextAlign } from '@shopify/react-native-skia';
 import { Area, DottedArea } from '../../area';
 import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
-import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
 import { Point } from '../../point';
-import { DefaultScrubberBeacon, DefaultScrubberBeaconLabel, DefaultScrubberLabel, Scrubber } from '../../scrubber';
-import { buildTransition, defaultTransition, getLineData, getPointOnSerializableScale, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
+import { DefaultScrubberBeacon, Scrubber } from '../../scrubber';
+import { buildTransition, defaultTransition, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
 import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function MultipleLine() {
   const theme = useTheme();
-  const [scrubberPosition, setScrubberPosition] = useState();
   const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
   const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
   const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
   const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.";
-  }, [pages, pageViews, uniqueVisitors]);
+  const chartAccessibilityHint = 'Swipe left or right to hear details for each page.';
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: chartAccessibilityHint,
+    accessibilityLabel: chartAccessibilityLabel + " " + chartAccessibilityHint,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'pageViews',
       data: pageViews,
@@ -87,27 +78,19 @@ function MultipleLine() {
   });
 }
 function DataFormat() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
   const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
   const chartAccessibilityLabel = "Chart with custom X and Y data. " + yData.length + " data points";
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index];
-  }, [xData, yData]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index], [xData, yData]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     points: true,
     showArea: true,
     showXAxis: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 16,
@@ -115,7 +98,6 @@ function DataFormat() {
       bottom: 0,
       left: 0
     },
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'line',
       data: yData
@@ -146,6 +128,8 @@ function LiveUpdates() {
     return sparklineInteractiveData.hour.map(d => d.value);
   }, []);
   const [priceData, setPriceData] = useState(initialData);
+  const chartAccessibilityLabel = "Live price chart with " + priceData.length + " data points.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + priceData[index], [priceData]);
   const lastDataPointTimeRef = useRef(Date.now());
   const updateCountRef = useRef(0);
   const intervalSeconds = 3600 / initialData.length;
@@ -184,6 +168,8 @@ function LiveUpdates() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       right: 64
@@ -200,9 +186,17 @@ function LiveUpdates() {
 }
 function MissingData() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, null, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, null, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, null, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, null, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pages.length + " pages. Some data points are missing.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const pv = pageViews[index];
+    const uv = uniqueVisitors[index];
+    const pvStr = pv != null ? pv : 'no data';
+    const uvStr = uv != null ? uv : 'no data';
+    return pages[index] + ": " + pvStr + " views, " + uvStr + " unique visitors.";
+  }, [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -212,6 +206,8 @@ function MissingData() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -241,6 +237,9 @@ function MissingData() {
 }
 function Interaction() {
   const [scrubberPosition, setScrubberPosition] = useState();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + data[index], [data]);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
     children: [/*#__PURE__*/_jsx(Text, {
@@ -249,11 +248,13 @@ function Interaction() {
     }), /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       onScrubberPositionChange: setScrubberPosition,
       series: [{
         id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+        data
       }],
       children: /*#__PURE__*/_jsx(Scrubber, {})
     })]
@@ -393,8 +394,12 @@ function Transitions() {
         color: positiveColor
       }]
     };
+    const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+    const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + valueAtIndexFormatter(index), [valueAtIndexFormatter]);
     return /*#__PURE__*/_jsxs(CartesianChart, {
       enableScrubbing: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 200,
       inset: {
         top: 32,
@@ -435,7 +440,6 @@ function Transitions() {
   return /*#__PURE__*/_jsx(CustomTransitionsChart, {});
 }
 function BasicAccessible() {
-  const [scrubberPosition, setScrubberPosition] = useState();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
 
   // Chart-level accessibility label provides overview
@@ -443,24 +447,14 @@ function BasicAccessible() {
     const currentPrice = data[data.length - 1];
     return "Price chart showing trend over " + data.length + " data points. Current value: " + currentPrice + ". Use arrow keys to adjust view";
   }, [data]);
-
-  // Scrubber-level accessibility label provides specific position info
-  const scrubberAccessibilityLabel = useCallback(index => {
-    return "Price at position " + (index + 1) + " of " + data.length + ": " + data[index];
-  }, [data]);
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  const getScrubberAccessibilityLabel = useCallback(index => "Price at position " + (index + 1) + " of " + data.length + ": " + data[index], [data]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
-    onScrubberPositionChange: setScrubberPosition,
     series: [{
       id: 'prices',
       data: data
@@ -620,8 +614,12 @@ function GainLossChart() {
       }
     }
   })));
+  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + tickLabelFormatter(data[index]), [data, tickLabelFormatter]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'prices',
@@ -676,9 +674,11 @@ function HighLowPrice() {
 }
 function StylingScrubber() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
+  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + ": " + pageViews[index] + " views, " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
   const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 0
   }).format(value), []);
@@ -687,6 +687,8 @@ function StylingScrubber() {
     showArea: true,
     showXAxis: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'pageViews',
@@ -768,6 +770,7 @@ function Compact() {
       subdetail
     } = _ref7;
     return /*#__PURE__*/_jsx(ListCell, {
+      accessibilityLabel: "Compact chart cell",
       detail: formatPrice(parseFloat(prices[0])),
       intermediary: /*#__PURE__*/_jsx(CompactChart, {
         color: color,
@@ -907,6 +910,12 @@ function AssetPriceWithDottedArea() {
       });
       return dayOfWeek + ", " + monthDay + ", " + time;
     }, []);
+    const chartAccessibilityLabel = "Bitcoin price chart for " + timePeriod.label + " period. Current price: " + formatPrice(currentPrice) + ".";
+    const getScrubberAccessibilityLabel = useCallback(index => {
+      const price = formatPrice(sparklineTimePeriodDataValues[index]);
+      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+      return price + " " + date;
+    }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
     return /*#__PURE__*/_jsxs(VStack, {
       gap: 2,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
@@ -929,7 +938,9 @@ function AssetPriceWithDottedArea() {
       }), /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: chartAccessibilityLabel,
         areaType: "dotted",
+        getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
         height: 200,
         inset: {
           top: 52
@@ -992,7 +1003,7 @@ const LegendDot = /*#__PURE__*/memo(props => {
     width: 10
   }, props));
 });
-const LegendItem = /*#__PURE__*/memo(_ref0 => {
+const LegendEntry = /*#__PURE__*/memo(_ref0 => {
   let {
     color = assets.btc.color,
     label,
@@ -1037,15 +1048,15 @@ const PerformanceHeader = /*#__PURE__*/memo(_ref1 => {
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 1,
     paddingX: 1,
-    children: [/*#__PURE__*/_jsx(LegendItem, {
+    children: [/*#__PURE__*/_jsx(LegendEntry, {
       color: theme.color.fgPositive,
       label: "High Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 1.2)
-    }), /*#__PURE__*/_jsx(LegendItem, {
+    }), /*#__PURE__*/_jsx(LegendEntry, {
       color: assets.btc.color,
       label: "Actual Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition])
-    }), /*#__PURE__*/_jsx(LegendItem, {
+    }), /*#__PURE__*/_jsx(LegendEntry, {
       color: theme.color.fgNegative,
       label: "Low Price",
       value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 0.8)
@@ -1091,11 +1102,19 @@ const PerformanceChart = /*#__PURE__*/memo(_ref10 => {
     return dayOfWeek + ", " + monthDay + ", " + time;
   }, []);
   const getScrubberLabel = useCallback(d => formatDate(sparklineTimePeriodDataTimestamps[d]), [formatDate, sparklineTimePeriodDataTimestamps]);
+  const chartAccessibilityLabel = "Bitcoin price chart with high, actual, and low series. " + sparklineTimePeriodDataValues.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = formatPriceThousands(sparklineTimePeriodDataValues[index]);
+    const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+    return "Point " + (index + 1) + ": " + price + ", " + date;
+  }, [formatDate, formatPriceThousands, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
     areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 300,
     inset: {
       top: 52,
@@ -1179,210 +1198,6 @@ function Performance() {
     })]
   });
 }
-const candlestickStockData = btcCandles.slice(0, 90).reverse();
-const CandlesticksHeader = /*#__PURE__*/memo(_ref11 => {
-  let {
-    currentIndex
-  } = _ref11;
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(parseFloat(price));
-  }, []);
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const currentText = useMemo(() => {
-    if (currentIndex !== undefined) {
-      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
-    }
-    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
-  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
-  return /*#__PURE__*/_jsx(Text, {
-    "aria-live": "polite",
-    font: "headline",
-    children: currentText
-  });
-});
-const CandlesticksChart = /*#__PURE__*/memo(_ref12 => {
-  let {
-    infoTextId,
-    onScrubberPositionChange
-  } = _ref12;
-  const theme = useTheme();
-  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
-  const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-    strokeWidth: 1
-  })));
-
-  // Custom line component that renders a rect to highlight the entire bandwidth
-  const BandwidthHighlight = /*#__PURE__*/memo(_ref13 => {
-    let {
-      stroke
-    } = _ref13;
-    const {
-      getXSerializableScale,
-      drawingArea
-    } = useCartesianChartContext();
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const rectWidth = useMemo(() => {
-      if (xScale !== undefined && xScale.type === 'band') {
-        return xScale.bandwidth;
-      }
-      return 0;
-    }, [xScale]);
-    const xPos = useDerivedValue(() => {
-      const position = unwrapAnimatedValue(scrubberPosition);
-      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
-      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
-    }, [scrubberPosition, xScale]);
-    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
-    return /*#__PURE__*/_jsx(Rect, {
-      color: stroke,
-      height: drawingArea.height,
-      opacity: opacity,
-      width: rectWidth,
-      x: xPos,
-      y: drawingArea.y
-    });
-  });
-  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
-  const CandlestickBarComponent = /*#__PURE__*/memo(_ref14 => {
-    var _yScale, _yScale2;
-    let {
-        x,
-        y,
-        width,
-        height,
-        dataX
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded4);
-    const {
-      getYScale
-    } = useCartesianChartContext();
-    const yScale = getYScale();
-    const wickX = x + width / 2;
-    const timePeriodValue = candlestickStockData[dataX];
-    const open = parseFloat(timePeriodValue.open);
-    const close = parseFloat(timePeriodValue.close);
-    const bullish = open < close;
-    const theme = useTheme();
-    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
-    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
-    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
-    const bodyHeight = Math.abs(openY - closeY);
-    const bodyY = openY < closeY ? openY : closeY;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SkiaLine, {
-        color: color,
-        p1: {
-          x: wickX,
-          y
-        },
-        p2: {
-          x: wickX,
-          y: y + height
-        },
-        strokeWidth: 1
-      }), /*#__PURE__*/_jsx(Rect, {
-        color: color,
-        height: bodyHeight,
-        width: width,
-        x: x,
-        y: bodyY
-      })]
-    });
-  });
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const formatTime = useCallback(index => {
-    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
-    const ts = parseInt(candlestickStockData[index].start);
-    return new Date(ts * 1000).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    animate: false,
-    "aria-labelledby": infoTextId,
-    borderRadius: 0,
-    height: 150,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 0,
-      right: 0
-    },
-    onScrubberPositionChange: onScrubberPositionChange,
-    series: [{
-      id: 'stock-prices',
-      data: candlesData
-    }],
-    xAxis: {
-      scaleType: 'band'
-    },
-    yAxis: {
-      domain: {
-        min
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      tickLabelFormatter: formatTime
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      GridLineComponent: ThinSolidLine,
-      tickLabelFormatter: formatThousandsPriceNumber,
-      width: 40
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true,
-      LineComponent: BandwidthHighlight,
-      lineStroke: theme.color.fgMuted,
-      seriesIds: []
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      BarComponent: CandlestickBarComponent,
-      BarStackComponent: _ref15 => {
-        let {
-          children
-        } = _ref15;
-        return /*#__PURE__*/_jsx("g", {
-          children: children
-        });
-      }
-    })]
-  });
-});
-function Candlesticks() {
-  const infoTextId = useId();
-  const [currentIndex, setCurrentIndex] = useState();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
-      currentIndex: currentIndex
-    }), /*#__PURE__*/_jsx(CandlesticksChart, {
-      infoTextId: infoTextId,
-      onScrubberPositionChange: setCurrentIndex
-    })]
-  });
-}
 function MonotoneAssetPrice() {
   const theme = useTheme();
   const prices = sparklineInteractiveData.hour;
@@ -1456,14 +1271,20 @@ function MonotoneAssetPrice() {
     dy: -12,
     horizontalAlignment: "left"
   })), []);
-  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref16 => {
+  const chartAccessibilityLabel = "Price chart with " + prices.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = scrubberPriceFormatter.format(prices[index].value);
+    const date = formatDate(prices[index].date);
+    return price + " USD " + date;
+  }, [formatDate, prices, scrubberPriceFormatter]);
+  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
       dataX,
       dataY,
       seriesId,
       isIdle,
       animate = true
-    } = _ref16;
+    } = _ref11;
     const {
       getSeries,
       getXSerializableScale,
@@ -1529,6 +1350,8 @@ function MonotoneAssetPrice() {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 64
@@ -1539,10 +1362,10 @@ function MonotoneAssetPrice() {
       color: theme.color.fg,
       gradient: {
         axis: 'x',
-        stops: _ref17 => {
+        stops: _ref12 => {
           let {
             min
-          } = _ref17;
+          } = _ref12;
           return [{
             offset: min,
             color: theme.color.fg,
@@ -1556,10 +1379,10 @@ function MonotoneAssetPrice() {
       }
     }],
     xAxis: {
-      range: _ref18 => {
+      range: _ref13 => {
         let {
           max
-        } = _ref18;
+        } = _ref13;
         return {
           min: 96,
           max
@@ -1603,18 +1426,22 @@ function ServiceAvailability() {
     date: new Date('2022-01-10'),
     availability: 86
   }], []);
+  const chartAccessibilityLabel = "Service availability chart with " + availabilityEvents.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + availabilityEvents[index].availability + "% availability on " + availabilityEvents[index].date.toLocaleDateString(), [availabilityEvents]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'availability',
       data: availabilityEvents.map(event => event.availability),
       gradient: {
-        stops: _ref19 => {
+        stops: _ref14 => {
           let {
             min,
             max
-          } = _ref19;
+          } = _ref14;
           return [{
             offset: min,
             color: theme.color.fgNegative
@@ -1641,11 +1468,11 @@ function ServiceAvailability() {
       data: availabilityEvents.map(event => event.date.getTime())
     },
     yAxis: {
-      domain: _ref20 => {
+      domain: _ref15 => {
         let {
           min,
           max
-        } = _ref20;
+        } = _ref15;
         return {
           min: Math.max(min - 2, 0),
           max: Math.min(max + 2, 100)
@@ -1677,7 +1504,7 @@ function ServiceAvailability() {
 }
 function ForecastAssetPrice() {
   const startYear = 2020;
-  const data = [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70];
+  const data = useMemo(() => [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70], []);
   const currentIndex = 6;
   const strokeWidth = 3;
   // To prevent cutting off the edge of our lines
@@ -1781,8 +1608,12 @@ function ForecastAssetPrice() {
       })]
     });
   });
+  const chartAccessibilityLabel = "Forecast chart with " + data.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + axisFormatter(index) + ", value " + data[index], [axisFormatter, data]);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     series: [{
       id: 'price',
@@ -1805,307 +1636,136 @@ function ForecastAssetPrice() {
     }), /*#__PURE__*/_jsx(CustomScrubber, {})]
   });
 }
-function ImperativeHandle() {
-  const theme = useTheme();
-  const scrubberRef = useRef(null);
+function DataCardWithLineChart() {
+  const {
+    spectrum
+  } = useTheme();
+  const exampleThumbnail = /*#__PURE__*/_jsx(RemoteImage, {
+    accessibilityLabel: "Ethereum",
+    shape: "circle",
+    size: "xl",
+    source: ethBackground,
+    testID: "thumbnail"
+  });
+  const getLineChartSeries = useCallback(() => [{
+    id: 'price',
+    data: prices.slice(0, 30).map(price => parseFloat(price)),
+    color: "rgb(" + spectrum.green70 + ")"
+  }], [spectrum.green70]);
+  const lineChartSeries = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
+  const lineChartSeries2 = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
+  const ref = useRef(null);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
-    children: [/*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      showYAxis: true,
-      height: 250,
-      series: [{
-        id: 'priceA',
-        data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
-        label: 'Price A',
-        color: theme.color.accentBoldBlue
-      }, {
-        id: 'priceB',
-        data: [2000, 2491, 4501, 6049, 5019, 4930, 5910],
-        label: 'Price B',
-        color: theme.color.accentBoldGreen
-      }, {
-        id: 'priceC',
-        data: [1000, 4910, 2300, 5910, 3940, 2940, 1940],
-        label: 'Price C',
-        color: theme.color.accentBoldPurple
-      }, {
-        id: 'priceD',
-        data: [4810, 2030, 5810, 3940, 2940, 1940, 940],
-        label: 'Price D',
-        color: theme.color.accentBoldYellow
-      }],
-      xAxis: {
-        // Give space for pulse animation
-        range: _ref21 => {
-          let {
-            min,
-            max
-          } = _ref21;
-          return {
-            min,
-            max: max - 8
-          };
-        }
-      },
-      yAxis: {
-        domain: {
-          min: 0
-        },
-        showGrid: true,
-        tickLabelFormatter: value => value.toLocaleString()
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {
-        ref: scrubberRef
+    children: [/*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: exampleThumbnail,
+      title: "Line Chart Card",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: exampleThumbnail,
+      title: "Line Chart with Tag",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 25.25%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      ref: ref,
+      renderAsPressable: true,
+      layout: "vertical",
+      onPress: NoopFn,
+      subtitle: "Clickable line chart card",
+      thumbnail: exampleThumbnail,
+      title: "Actionable Line Chart",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 8.5%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries,
+        showXAxis: false,
+        showYAxis: false
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+        accessibilityLabel: "Bitcoin",
+        shape: "circle",
+        size: "xl",
+        source: assets.btc.imageUrl,
+        testID: "thumbnail"
+      }),
+      title: "Card with Line Chart",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 25.25%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries2,
+        showXAxis: false,
+        showYAxis: false
       })
-    }), /*#__PURE__*/_jsx(Button, {
-      onPress: () => {
-        var _scrubberRef$current2;
-        return (_scrubberRef$current2 = scrubberRef.current) == null ? void 0 : _scrubberRef$current2.pulse();
-      },
-      children: "Pulse"
     })]
   });
 }
-function CustomBeaconLabel() {
-  const theme = useTheme();
-  // This custom component label shows the percentage value of the data at the scrubber position.
-  const MyScrubberBeaconLabel = /*#__PURE__*/memo(_ref22 => {
-    let {
-        seriesId,
-        color,
-        label
-      } = _ref22,
-      props = _objectWithoutPropertiesLoose(_ref22, _excluded5);
-    const {
-      getSeriesData,
-      series
-    } = useCartesianChartContext();
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
-    const dataLength = useMemo(() => {
-      var _series$reduce;
-      return (_series$reduce = series == null ? void 0 : series.reduce((max, s) => {
-        var _seriesData$length;
-        const seriesData = getSeriesData(s.id);
-        return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
-      }, 0)) != null ? _series$reduce : 0;
-    }, [series, getSeriesData]);
-    const dataIndex = useDerivedValue(() => {
-      var _scrubberPosition$val;
-      return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
-    }, [scrubberPosition, dataLength]);
-    const percentageLabel = useDerivedValue(() => {
-      if (seriesData !== undefined) {
-        const dataAtPosition = seriesData[dataIndex.value];
-        return unwrapAnimatedValue(label) + " \xB7 " + dataAtPosition + "%";
-      }
-      return unwrapAnimatedValue(label);
-    }, [label, seriesData, dataIndex]);
-    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
-      background: color,
-      color: theme.color.bg,
-      label: percentageLabel,
-      seriesId: seriesId
-    }));
-  });
+function HorizontalLayoutLineChart() {
+  const symbols = ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'];
+  const allocations = [72, 46, 33, 21, 14];
   return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
+    points: true,
     showArea: true,
+    showXAxis: true,
     showYAxis: true,
-    areaType: "dotted",
-    height: 200,
-    series: [{
-      id: 'Boston',
-      data: [25, 30, 35, 45, 60, 100],
-      color: "rgb(" + theme.spectrum.green40 + ")",
-      label: 'Boston'
-    }, {
-      id: 'Miami',
-      data: [20, 25, 30, 35, 20, 0],
-      color: "rgb(" + theme.spectrum.blue40 + ")",
-      label: 'Miami'
-    }, {
-      id: 'Denver',
-      data: [10, 15, 20, 25, 40, 0],
-      color: "rgb(" + theme.spectrum.orange40 + ")",
-      label: 'Denver'
-    }, {
-      id: 'Phoenix',
-      data: [15, 10, 5, 0, 0, 0],
-      color: "rgb(" + theme.spectrum.red40 + ")",
-      label: 'Phoenix'
-    }],
-    yAxis: {
-      showGrid: true
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      BeaconLabelComponent: MyScrubberBeaconLabel
-    })
-  });
-}
-function CustomLabelComponent() {
-  const CustomLabelComponent = /*#__PURE__*/memo(props => {
-    const theme = useTheme();
-    const {
-      drawingArea
-    } = useCartesianChartContext();
-    if (!drawingArea) return;
-    return /*#__PURE__*/_jsx(DefaultScrubberLabel, _extends({}, props, {
-      elevated: true,
-      background: theme.color.bgPrimary,
-      color: theme.color.bgPrimaryWash,
-      dy: 32,
-      fontWeight: FontWeight.Bold,
-      y: drawingArea.y + drawingArea.height
-    }));
-  });
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    height: 200,
-    inset: {
-      top: 16,
-      bottom: 64
-    },
+    height: 240,
+    layout: "horizontal",
     series: [{
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-    }],
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      LabelComponent: CustomLabelComponent,
-      label: dataIndex => "Day " + (dataIndex + 1)
-    })
-  });
-}
-function HiddenScrubberWhenIdle() {
-  const MyScrubberBeacon = /*#__PURE__*/memo(props => {
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const beaconOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
-    return /*#__PURE__*/_jsx(DefaultScrubberBeacon, _extends({}, props, {
-      opacity: beaconOpacity
-    }));
-  });
-  const MyScrubberBeaconLabel = /*#__PURE__*/memo(props => {
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const labelOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
-    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
-      opacity: labelOpacity
-    }));
-  });
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    height: 150,
-    series: [{
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-      label: 'hello'
+      id: 'allocations',
+      data: allocations,
+      color: assets.btc.color
     }],
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      BeaconComponent: MyScrubberBeacon,
-      BeaconLabelComponent: MyScrubberBeaconLabel
-    })
-  });
-}
-function TwoLineScrubberLabel() {
-  const theme = useTheme();
-  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
-  const [alignment, setAlignment] = useState(TextAlign.Center);
-  const fontMgr = useMemo(() => {
-    const fontProvider = Skia.TypefaceFontProvider.Make();
-    return fontProvider;
-  }, []);
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(price);
-  }, []);
-  const scrubberLabel = useCallback(index => {
-    const price = formatPrice(data[index] * 100);
-    const day = "Day " + (index + 100);
-    const priceStyle = {
-      fontFamilies: ['Inter'],
-      fontSize: 16,
-      fontStyle: {
-        weight: FontWeight.Bold
-      },
-      color: Skia.Color(theme.color.fg)
-    };
-    const dayStyle = {
-      fontFamilies: ['Inter'],
-      fontSize: 14,
-      fontStyle: {
-        weight: FontWeight.Normal
-      },
-      color: Skia.Color(theme.color.fgMuted)
-    };
-    const builder = Skia.ParagraphBuilder.Make({
-      textAlign: alignment
-    }, fontMgr);
-    builder.pushStyle(priceStyle);
-    builder.addText(price);
-    builder.addText('\n');
-    builder.pushStyle(dayStyle);
-    builder.addText(day);
-    const para = builder.build();
-    // First layout with large width to get intrinsic size
-    para.layout(384);
-    return para;
-  }, [data, formatPrice, theme.color.fg, theme.color.fgMuted, fontMgr, alignment]);
-
-  // Custom scrubber label component that uses the selected alignment
-  const AlignedScrubberLabel = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultScrubberLabel, _extends({}, props, {
-    paragraphAlignment: alignment
-  })));
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: () => setAlignment(TextAlign.Left),
-        variant: alignment === TextAlign.Left ? 'primary' : 'secondary',
-        children: "Left"
-      }), /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: () => setAlignment(TextAlign.Center),
-        variant: alignment === TextAlign.Center ? 'primary' : 'secondary',
-        children: "Center"
-      }), /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: () => setAlignment(TextAlign.Right),
-        variant: alignment === TextAlign.Right ? 'primary' : 'secondary',
-        children: "Right"
-      })]
-    }), /*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      showArea: true,
-      height: 200,
-      inset: {
-        top: 64
+    xAxis: {
+      domain: {
+        min: 0,
+        max: 80
       },
-      series: [{
-        id: 'prices',
-        data: data,
-        color: theme.color.accentBoldBlue
-      }],
-      children: /*#__PURE__*/_jsx(Scrubber, {
-        idlePulse: true,
-        labelElevated: true,
-        LabelComponent: AlignedScrubberLabel,
-        label: scrubberLabel
-      })
-    })]
+      tickLabelFormatter: value => value + "%"
+    },
+    yAxis: {
+      data: symbols,
+      scaleType: 'band'
+    }
   });
 }
 function ExampleNavigator() {
@@ -2122,8 +1782,8 @@ function ExampleNavigator() {
       }]
     })
   }, {
-    title: 'Imperative Handle',
-    component: /*#__PURE__*/_jsx(ImperativeHandle, {})
+    title: 'Horizontal Layout',
+    component: /*#__PURE__*/_jsx(HorizontalLayoutLineChart, {})
   }, {
     title: 'Multiple Lines',
     component: /*#__PURE__*/_jsx(MultipleLine, {})
@@ -2252,6 +1912,8 @@ function ExampleNavigator() {
     component: /*#__PURE__*/_jsxs(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: "Price chart with reference line. 14 data points. Swipe to navigate.",
+      getScrubberAccessibilityLabel: index => "Point " + (index + 1),
       height: 200,
       series: [{
         id: 'prices',
@@ -2260,11 +1922,11 @@ function ExampleNavigator() {
       }],
       xAxis: {
         // Give space before the end of the chart for the scrubber
-        range: _ref23 => {
+        range: _ref16 => {
           let {
             min,
             max
-          } = _ref23;
+          } = _ref16;
           return {
             min,
             max: max - 24
@@ -2295,9 +1957,6 @@ function ExampleNavigator() {
   }, {
     title: 'Performance',
     component: /*#__PURE__*/_jsx(Performance, {})
-  }, {
-    title: 'Candlesticks',
-    component: /*#__PURE__*/_jsx(Candlesticks, {})
   }, {
     title: 'Monotone Asset Price',
     component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
@@ -2308,28 +1967,18 @@ function ExampleNavigator() {
     title: 'Forecast Asset Price',
     component: /*#__PURE__*/_jsx(ForecastAssetPrice, {})
   }, {
-    title: 'Custom Beacon Label',
-    component: /*#__PURE__*/_jsx(CustomBeaconLabel, {})
-  }, {
-    title: 'Custom Label Component',
-    component: /*#__PURE__*/_jsx(CustomLabelComponent, {})
-  }, {
-    title: 'Hidden Scrubber When Idle',
-    component: /*#__PURE__*/_jsx(HiddenScrubberWhenIdle, {})
-  }, {
-    title: 'Two-Line Scrubber Label',
-    component: /*#__PURE__*/_jsx(TwoLineScrubberLabel, {})
+    title: 'In DataCard',
+    component: /*#__PURE__*/_jsx(DataCardWithLineChart, {})
   }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
   const currentExample = examples[currentIndex];
-  const isFirstExample = currentIndex === 0;
-  const isLastExample = currentIndex === examples.length - 1;
   const handlePrevious = useCallback(() => {
-    setCurrentIndex(prev => Math.max(0, prev - 1));
-  }, []);
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
   const handleNext = useCallback(() => {
-    setCurrentIndex(prev => Math.min(examples.length - 1, prev + 1));
+    setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
   }, [examples.length]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 4,
       children: [/*#__PURE__*/_jsxs(HStack, {
@@ -2339,13 +1988,11 @@ function ExampleNavigator() {
         children: [/*#__PURE__*/_jsx(IconButton, {
           accessibilityHint: "Navigate to previous example",
           accessibilityLabel: "Previous",
-          disabled: isFirstExample,
           name: "arrowLeft",
           onPress: handlePrevious,
           variant: "secondary"
         }), /*#__PURE__*/_jsxs(VStack, {
           alignItems: "center",
-          gap: 1,
           children: [/*#__PURE__*/_jsx(Text, {
             font: "title3",
             children: currentExample.title
@@ -2357,7 +2004,6 @@ function ExampleNavigator() {
         }), /*#__PURE__*/_jsx(IconButton, {
           accessibilityHint: "Navigate to next example",
           accessibilityLabel: "Next",
-          disabled: isLastExample,
           name: "arrowRight",
           onPress: handleNext,
           variant: "secondary"