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

package/esm/visualizations/chart/__stories__/ChartAccessibility.stories.js

@@ -0,0 +1,720 @@
+const _excluded = ["label"],
+  _excluded2 = ["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, useCallback, useMemo, useState } from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { FontWeight, Skia, TextAlign } from '@shopify/react-native-skia';
+import { IconButton } from '../../../buttons';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../index';
+import { HStack, VStack } from '../../../layout';
+import { RemoteImage } from '../../../media';
+import { SectionHeader } from '../../../section-header/SectionHeader';
+import { SegmentedTab } from '../../../tabs/SegmentedTab';
+import { Text } from '../../../typography';
+import { XAxis, YAxis } from '../axis';
+import { BarChart } from '../bar/BarChart';
+import { BarPlot } from '../bar/BarPlot';
+import { CartesianChart } from '../CartesianChart';
+import { Legend } from '../legend';
+import { Line, ReferenceLine, SolidLine } from '../line';
+import { LineChart } from '../line/LineChart';
+import { PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
+import { Scrubber } from '../scrubber';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+  strokeWidth: 1
+})));
+const BasicLineChart = /*#__PURE__*/memo(function BasicLineChart() {
+  const theme = useTheme();
+  const data = useMemo(() => [2, 4, 3, 6, 5, 8, 7], []);
+  const categories = useMemo(() => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], []);
+  const getScrubberAccessibilityLabel = useCallback(index => categories[index] + ": " + data[index], [categories, data]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: "Line chart with " + data.length + " days of data. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 180,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    series: [{
+      id: 'line',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: categories,
+      showGrid: true
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+});
+const DataFormatLineChart = /*#__PURE__*/memo(function DataFormatLineChart() {
+  const theme = useTheme();
+  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 uneven X values " + xData.join(', ') + ". " + yData.length + " data points.";
+  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: chartAccessibilityLabel,
+    curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 180,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    series: [{
+      id: 'line',
+      data: yData,
+      color: theme.color.accentBoldGreen
+    }],
+    xAxis: {
+      data: xData,
+      showLine: true,
+      showTickMarks: true,
+      showGrid: true
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      position: 'left',
+      showLine: true,
+      showTickMarks: true,
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+});
+const AccessibilityBarChart = /*#__PURE__*/memo(function AccessibilityBarChart() {
+  const theme = useTheme();
+  const categories = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], []);
+  const values = useMemo(() => [40, 65, 55, 80, 72, 90], []);
+  const getScrubberAccessibilityLabel = useCallback(index => categories[index] + ": " + values[index], [categories, values]);
+  return /*#__PURE__*/_jsx(BarChart, {
+    enableScrubbing: true,
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: "Bar chart with " + values.length + " months. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 180,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    series: [{
+      id: 'bars',
+      data: values,
+      color: theme.color.accentBoldPurple
+    }],
+    xAxis: {
+      data: categories,
+      showGrid: true
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true
+    }
+  });
+});
+const AccessibilityHorizontalBarChart = /*#__PURE__*/memo(function AccessibilityHorizontalBarChart() {
+  const theme = useTheme();
+  const dataset = useMemo(() => [{
+    month: 'Jan',
+    rainfall: 21
+  }, {
+    month: 'Feb',
+    rainfall: 28
+  }, {
+    month: 'Mar',
+    rainfall: 41
+  }, {
+    month: 'Apr',
+    rainfall: 73
+  }, {
+    month: 'May',
+    rainfall: 99
+  }, {
+    month: 'June',
+    rainfall: 144
+  }, {
+    month: 'July',
+    rainfall: 319
+  }, {
+    month: 'Aug',
+    rainfall: 249
+  }, {
+    month: 'Sept',
+    rainfall: 131
+  }, {
+    month: 'Oct',
+    rainfall: 55
+  }, {
+    month: 'Nov',
+    rainfall: 48
+  }, {
+    month: 'Dec',
+    rainfall: 25
+  }], []);
+  const getScrubberAccessibilityLabel = useCallback(index => dataset[index].month + ": " + dataset[index].rainfall + "mm rainfall", [dataset]);
+  return /*#__PURE__*/_jsx(BarChart, {
+    enableScrubbing: true,
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: "Horizontal bar chart showing Seoul rainfall by month. " + dataset.length + " months. Swipe to navigate.",
+    borderRadius: 2,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 400,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    layout: "horizontal",
+    series: [{
+      id: 'seoul',
+      label: 'Seoul rainfall',
+      data: dataset.map(d => d.rainfall),
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      label: 'rainfall (mm)',
+      GridLineComponent: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+        strokeWidth: 1
+      })),
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true
+    },
+    yAxis: {
+      position: 'left',
+      data: dataset.map(d => d.month),
+      showLine: true,
+      showTickMarks: true,
+      bandTickMarkPlacement: 'edges'
+    }
+  });
+});
+const ServiceAvailability = /*#__PURE__*/memo(function ServiceAvailability() {
+  const theme = useTheme();
+  const availabilityEvents = useMemo(() => [{
+    date: new Date('2022-01-01'),
+    availability: 79
+  }, {
+    date: new Date('2022-01-03'),
+    availability: 81
+  }, {
+    date: new Date('2022-01-04'),
+    availability: 82
+  }, {
+    date: new Date('2022-01-06'),
+    availability: 91
+  }, {
+    date: new Date('2022-01-07'),
+    availability: 92
+  }, {
+    date: new Date('2022-01-10'),
+    availability: 86
+  }], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + availabilityEvents[index].availability + "% availability on " + availabilityEvents[index].date.toLocaleDateString(), [availabilityEvents]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Service availability chart with " + availabilityEvents.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    scrubberAccessibilityLabelStep: 1,
+    series: [{
+      id: 'availability',
+      data: availabilityEvents.map(event => event.availability),
+      gradient: {
+        stops: _ref => {
+          let {
+            min,
+            max
+          } = _ref;
+          return [{
+            offset: min,
+            color: theme.color.fgNegative
+          }, {
+            offset: 85,
+            color: theme.color.fgNegative
+          }, {
+            offset: 85,
+            color: theme.color.fgWarning
+          }, {
+            offset: 90,
+            color: theme.color.fgWarning
+          }, {
+            offset: 90,
+            color: theme.color.fgPositive
+          }, {
+            offset: max,
+            color: theme.color.fgPositive
+          }];
+        }
+      }
+    }],
+    xAxis: {
+      data: availabilityEvents.map(event => event.date.getTime())
+    },
+    yAxis: {
+      domain: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min: Math.max(min - 2, 0),
+          max: Math.min(max + 2, 100)
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      tickLabelFormatter: value => new Date(value).toLocaleDateString()
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      position: "left",
+      tickLabelFormatter: value => value + "%"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "stepAfter",
+      points: props => _extends({}, props, {
+        fill: theme.color.bg,
+        stroke: props.fill
+      }),
+      seriesId: "availability"
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })]
+  });
+});
+const BasicPricesWithManyPoints = /*#__PURE__*/memo(function BasicPricesWithManyPoints() {
+  const theme = useTheme();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58, 10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + data[index], [data]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: "Line chart with " + data.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    scrubberAccessibilityLabelStep: 1,
+    series: [{
+      id: 'prices',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+});
+const PositiveAndNegativeCashFlow = /*#__PURE__*/memo(function PositiveAndNegativeCashFlow() {
+  const theme = useTheme();
+  const categories = useMemo(() => Array.from({
+    length: 31
+  }, (_, i) => "3/" + (i + 1)), []);
+  const gains = useMemo(() => [5, 0, 6, 18, 0, 5, 12, 0, 12, 22, 28, 18, 0, 12, 6, 0, 0, 24, 0, 0, 4, 0, 18, 0, 0, 14, 10, 16, 0, 0, 0], []);
+  const losses = useMemo(() => [-4, 0, -8, -12, -6, 0, 0, 0, -18, 0, -12, 0, -9, -6, 0, 0, 0, 0, -22, -8, 0, 0, -10, -14, 0, 0, 0, 0, 0, -12, -10], []);
+  const series = useMemo(() => [{
+    id: 'gains',
+    data: gains,
+    color: theme.color.fgPositive,
+    stackId: 'bars'
+  }, {
+    id: 'losses',
+    data: losses,
+    color: theme.color.fgNegative,
+    stackId: 'bars'
+  }], [gains, losses, theme.color.fgNegative, theme.color.fgPositive]);
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const net = gains[index] + losses[index];
+    const netStr = net >= 0 ? "+$" + net + "M" : "-$" + Math.abs(net) + "M";
+    return categories[index] + ": " + netStr;
+  }, [categories, gains, losses]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Cash flow chart: " + categories.length + " days with gains and losses. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 280,
+    inset: 32,
+    series: series,
+    xAxis: {
+      data: categories,
+      scaleType: 'band'
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {}), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      GridLineComponent: ThinSolidLine,
+      tickLabelFormatter: value => "$" + value + "M"
+    }), /*#__PURE__*/_jsx(BarPlot, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LineComponent: SolidLine,
+      dataY: 0
+    })]
+  });
+});
+const LegendPosition = /*#__PURE__*/memo(function LegendPosition() {
+  const theme = useTheme();
+  const categories = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], []);
+  const revenueData = useMemo(() => [455, 520, 380, 455, 285, 235], []);
+  const profitMarginData = useMemo(() => [23, 20, 16, 38, 12, 9], []);
+  const getScrubberAccessibilityLabel = useCallback(index => categories[index] + ": Revenue $" + revenueData[index] + "k, Profit Margin " + profitMarginData[index] + "%", [categories, profitMarginData, revenueData]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Bar chart showing Revenue and Profit Margin by month. January through June. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    inset: {
+      bottom: 8,
+      left: 0,
+      right: 0,
+      top: 8
+    },
+    legend: /*#__PURE__*/_jsx(Legend, {
+      accessibilityLabel: "Chart legend: Revenue and Profit Margin",
+      justifyContent: "flex-end"
+    }),
+    legendPosition: "bottom",
+    series: [{
+      id: 'revenue',
+      label: 'Revenue',
+      data: revenueData,
+      yAxisId: 'revenue',
+      color: "rgb(" + theme.spectrum.yellow40 + ")",
+      legendShape: 'squircle'
+    }, {
+      id: 'profitMargin',
+      label: 'Profit Margin',
+      data: profitMarginData,
+      yAxisId: 'profitMargin',
+      color: theme.color.fgPositive,
+      legendShape: 'squircle'
+    }],
+    xAxis: {
+      data: categories,
+      scaleType: 'band',
+      range: _ref3 => {
+        let {
+          min,
+          max
+        } = _ref3;
+        return {
+          min,
+          max: max - 128
+        };
+      }
+    },
+    yAxis: [{
+      id: 'revenue',
+      domain: {
+        min: 0
+      }
+    }, {
+      id: 'profitMargin',
+      domain: {
+        max: 100,
+        min: 0
+      }
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      axisId: "revenue",
+      position: "left",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      width: 60
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "profitMargin",
+      position: "right",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => value + "%"
+    }), /*#__PURE__*/_jsx(BarPlot, {})]
+  });
+});
+const AssetPriceWithDottedArea = /*#__PURE__*/memo(function AssetPriceWithDottedArea() {
+  const theme = useTheme();
+  const fontMgr = useMemo(() => Skia.TypefaceFontProvider.Make(), []);
+  const tabs = useMemo(() => [{
+    id: 'hour',
+    label: '1H'
+  }, {
+    id: 'day',
+    label: '1D'
+  }, {
+    id: 'week',
+    label: '1W'
+  }, {
+    id: 'month',
+    label: '1M'
+  }, {
+    id: 'year',
+    label: '1Y'
+  }, {
+    id: 'all',
+    label: 'All'
+  }], []);
+  const [timePeriod, setTimePeriod] = useState(tabs[0]);
+  const sparklineTimePeriodData = useMemo(() => sparklineInteractiveData[timePeriod.id], [timePeriod]);
+  const sparklineTimePeriodDataValues = useMemo(() => sparklineTimePeriodData.map(d => d.value), [sparklineTimePeriodData]);
+  const sparklineTimePeriodDataTimestamps = useMemo(() => sparklineTimePeriodData.map(d => d.date), [sparklineTimePeriodData]);
+  const currentPrice = sparklineTimePeriodDataValues[sparklineTimePeriodDataValues.length - 1];
+  const priceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }), []);
+  const formatPrice = useCallback(price => priceFormatter.format(price), [priceFormatter]);
+  const formatDate = useCallback(date => {
+    const dayOfWeek = date.toLocaleDateString('en-US', {
+      weekday: 'short'
+    });
+    const monthDay = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+    const time = date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+    return dayOfWeek + ", " + monthDay + ", " + time;
+  }, []);
+  const chartAccessibilityLabel = useMemo(() => "Bitcoin price chart for " + timePeriod.label + " period. Current price: " + formatPrice(currentPrice) + ".", [currentPrice, formatPrice, timePeriod.label]);
+  const getScrubberAccessibilityLabel = useCallback(index => {
+    const price = formatPrice(sparklineTimePeriodDataValues[index]);
+    const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+    return price + " " + date;
+  }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
+  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
+    let {
+        label
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    const {
+      activeTab
+    } = useTabsContext();
+    const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
+    return /*#__PURE__*/_jsx(SegmentedTab, _extends({
+      ref: ref,
+      label: /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        style: {
+          color: isActive ? assets.btc.color : undefined
+        },
+        children: label
+      })
+    }, props));
+  }));
+  const BTCActiveIndicator = /*#__PURE__*/memo(_ref5 => {
+    let {
+        style
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+    return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+      style: [style, {
+        backgroundColor: assets.btc.color + "1A"
+      }]
+    }));
+  });
+  const onPeriodChange = useCallback(period => setTimePeriod(period || tabs[0]), [tabs]);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(SectionHeader, {
+      balance: /*#__PURE__*/_jsx(Text, {
+        font: "title2",
+        children: formatPrice(currentPrice)
+      }),
+      end: /*#__PURE__*/_jsx(VStack, {
+        justifyContent: "center",
+        children: /*#__PURE__*/_jsx(RemoteImage, {
+          shape: "circle",
+          size: "xl",
+          source: assets.btc.imageUrl
+        })
+      }),
+      title: /*#__PURE__*/_jsx(Text, {
+        font: "title1",
+        children: "Bitcoin"
+      })
+    }), /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      areaType: "dotted",
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+      height: 200,
+      inset: {
+        top: 52
+      },
+      series: [{
+        id: 'btc',
+        data: sparklineTimePeriodDataValues,
+        color: assets.btc.color
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        hideOverlay: true,
+        idlePulse: true,
+        labelElevated: true,
+        label: d => {
+          const date = formatDate(sparklineTimePeriodDataTimestamps[d]);
+          const price = formatPrice(sparklineTimePeriodDataValues[d]);
+          const regularStyle = {
+            fontFamilies: ['Inter'],
+            fontSize: 14,
+            fontStyle: {
+              weight: FontWeight.Normal
+            },
+            color: Skia.Color(theme.color.fgMuted)
+          };
+          const boldStyle = _extends({}, regularStyle, {
+            fontStyle: {
+              weight: FontWeight.Bold
+            }
+          });
+          const builder = Skia.ParagraphBuilder.Make({
+            textAlign: TextAlign.Left
+          }, fontMgr);
+          builder.pushStyle(boldStyle);
+          builder.addText(price);
+          builder.pushStyle(regularStyle);
+          builder.addText(" " + date);
+          const para = builder.build();
+          para.layout(512);
+          return para;
+        }
+      })
+    }), /*#__PURE__*/_jsx(PeriodSelector, {
+      TabComponent: BTCTab,
+      TabsActiveIndicatorComponent: BTCActiveIndicator,
+      activeTab: timePeriod,
+      onChange: onPeriodChange,
+      tabs: tabs
+    })]
+  });
+});
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic Line Chart',
+    component: /*#__PURE__*/_jsx(BasicLineChart, {})
+  }, {
+    title: 'Data Format (Uneven X)',
+    component: /*#__PURE__*/_jsx(DataFormatLineChart, {})
+  }, {
+    title: 'Bar Chart',
+    component: /*#__PURE__*/_jsx(AccessibilityBarChart, {})
+  }, {
+    title: 'Horizontal Bar Chart',
+    component: /*#__PURE__*/_jsx(AccessibilityHorizontalBarChart, {})
+  }, {
+    title: 'Service Availability',
+    component: /*#__PURE__*/_jsx(ServiceAvailability, {})
+  }, {
+    title: 'Basic Prices (28 pts, step 1)',
+    component: /*#__PURE__*/_jsx(BasicPricesWithManyPoints, {})
+  }, {
+    title: 'Positive/Negative Cash Flow',
+    component: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})
+  }, {
+    title: 'Legend Position',
+    component: /*#__PURE__*/_jsx(LegendPosition, {})
+  }, {
+    title: 'Bitcoin Price (Dotted Area)',
+    component: /*#__PURE__*/_jsx(AssetPriceWithDottedArea, {})
+  }], []);
+  const currentExample = examples[currentIndex];
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  const handleNext = useCallback(() => {
+    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, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to previous example",
+          accessibilityLabel: "Previous",
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: currentExample.title
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: [currentIndex + 1, " / ", examples.length]
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to next example",
+          accessibilityLabel: "Next",
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          children: "Swipe to navigate chart segments."
+        }), /*#__PURE__*/_jsx(Example, {
+          children: currentExample.component
+        })]
+      })]
+    })
+  });
+}
+export default ExampleNavigator;