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

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

@@ -1,1718 +1,1133 @@
-const _excluded = ["label"],
+const _excluded = ["dataX", "dataY"],
   _excluded2 = ["label"],
-  _excluded3 = ["style"],
-  _excluded4 = ["dataX"];
-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; }
+  _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); }
-import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+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, useMemo, useRef, useState } from 'react';
+import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+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 } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+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';
-import { RemoteImage } from '@coinbase/cds-mobile/media';
+import { Avatar, RemoteImage } from '@coinbase/cds-mobile/media';
 import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
-import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
+import { Pressable } from '@coinbase/cds-mobile/system';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { TextLabel1 } from '@coinbase/cds-mobile/typography';
-import { Text } from '@coinbase/cds-mobile/typography/Text';
-import { Area, DottedArea, GradientArea } from '../../area';
-import { XAxis, YAxis } from '../../axis';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { Circle, FontWeight, Group, Skia, TextAlign } from '@shopify/react-native-skia';
+import { Area, DottedArea } from '../../area';
+import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
 import { CartesianChart } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
-import { Point } from '../../Point';
-import { Scrubber } from '../../scrubber';
-import { GradientLine, Line, LineChart, ReferenceLine } from '..';
+import { Point } from '../../point';
+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";
-const defaultChartHeight = 200;
-const formatChartDate = (timestamp, timeframe) => {
-  const date = new Date(timestamp);
-  switch (timeframe) {
-    case 'hour':
-    case '1H':
-      return date.toLocaleString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true
-      });
-    case 'day':
-    case '1D':
-      return date.toLocaleString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true
-      });
-    case 'week':
-    case 'month':
-    case '1W':
-    case '1M':
-      return date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric'
-      });
-    case 'year':
-    case 'all':
-    case '1Y':
-    case 'All':
-      return date.toLocaleDateString('en-US', {
-        month: 'short',
-        year: 'numeric'
-      });
-    default:
-      return date.toLocaleDateString('en-US');
-  }
-};
-const calculateTrendData = (scrubberPosition, currentData, currentTimestamps, startPrice, currentPrice, activeTimeframe) => {
-  if (scrubberPosition !== undefined) {
-    // When hovering, show trend relative to START of time period (not previous point)
-    const hoverIndex = scrubberPosition;
-    const hoverPrice = currentData[hoverIndex];
-    const hoverPriceChange = hoverPrice - startPrice; // Fixed: relative to start price
-    const hoverTimestamp = currentTimestamps[hoverIndex];
-    return {
-      trendPrice: hoverPrice,
-      trendPreviousPrice: startPrice,
-      // Fixed: always use start price
-      trendDirection: hoverPriceChange > 0 ? 'up' : hoverPriceChange < 0 ? 'down' : 'neutral',
-      displayDate: formatChartDate(hoverTimestamp, activeTimeframe)
-    };
-  } else {
-    // When not hovering, show current trend relative to start
-    const latestTimestamp = currentTimestamps[currentTimestamps.length - 1];
-    const priceChange = currentPrice - startPrice;
-    return {
-      trendPrice: currentPrice,
-      trendPreviousPrice: startPrice,
-      trendDirection: priceChange > 0 ? 'up' : priceChange < 0 ? 'down' : 'neutral',
-      displayDate: formatChartDate(latestTimestamp, activeTimeframe)
-    };
-  }
-};
-export const BasicLineChart = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
+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 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,
-    height: defaultChartHeight,
-    renderPoints: () => true,
+    accessibilityLabel: accessibilityLabel,
+    height: 200,
+    onScrubberPositionChange: setScrubberPosition,
     series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
+      id: 'pageViews',
+      data: pageViews,
+      color: theme.color.accentBoldGreen,
+      // Label will render next to scrubber beacon
+      label: 'Page Views'
+    }, {
+      id: 'uniqueVisitors',
+      data: uniqueVisitors,
+      color: theme.color.accentBoldPurple,
+      label: 'Unique Visitors',
+      // Default area is gradient
+      areaType: 'dotted'
     }],
+    xAxis: {
+      // Used on the x-axis to provide context for each index from the series data array
+      data: pages
+    },
     yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
-      showGrid: true
+      showGrid: true,
+      tickLabelFormatter: numberFormatter
     },
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
-};
-export const BasicLineChartWithPoints = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
-  return /*#__PURE__*/_jsxs(LineChart, {
+}
+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]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    points: true,
+    showArea: true,
+    showXAxis: true,
     showYAxis: true,
-    height: defaultChartHeight,
-    renderPoints: () => true,
+    accessibilityLabel: accessibilityLabel,
+    curve: "natural",
+    height: 200,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    onScrubberPositionChange: setScrubberPosition,
     series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
+      id: 'line',
+      data: yData
     }],
+    xAxis: {
+      data: xData,
+      showLine: true,
+      showTickMarks: true,
+      showGrid: true
+    },
     yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
+      domain: {
+        min: 0
+      },
+      position: 'left',
+      showLine: true,
+      showTickMarks: true,
       showGrid: true
     },
-    children: [/*#__PURE__*/_jsx(Point, {
-      dataX: 2,
-      dataY: 60,
-      fill: "purple",
-      label: "hello world im on a point!",
-      labelProps: {
-        verticalAlignment: 'bottom',
-        // why does this go in the opposite direction than what i would expect?
-        dy: -16
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+}
+function LiveUpdates() {
+  const scrubberRef = useRef(null);
+  const initialData = useMemo(() => {
+    return sparklineInteractiveData.hour.map(d => d.value);
+  }, []);
+  const [priceData, setPriceData] = useState(initialData);
+  const lastDataPointTimeRef = useRef(Date.now());
+  const updateCountRef = useRef(0);
+  const intervalSeconds = 3600 / initialData.length;
+  const maxPercentChange = Math.abs(initialData[initialData.length - 1] - initialData[0]) * 0.05;
+  useEffect(() => {
+    const priceUpdateInterval = setInterval(() => {
+      var _scrubberRef$current;
+      setPriceData(currentData => {
+        const newData = [...currentData];
+        const lastPrice = newData[newData.length - 1];
+        const priceChange = (Math.random() - 0.5) * maxPercentChange;
+        const newPrice = Math.round((lastPrice + priceChange) * 100) / 100;
+
+        // Check if we should roll over to a new data point
+        const currentTime = Date.now();
+        const timeSinceLastPoint = (currentTime - lastDataPointTimeRef.current) / 1000;
+        if (timeSinceLastPoint >= intervalSeconds) {
+          // Time for a new data point - remove first, add new at end
+          lastDataPointTimeRef.current = currentTime;
+          newData.shift(); // Remove oldest data point
+          newData.push(newPrice); // Add new data point
+          updateCountRef.current = 0;
+        } else {
+          // Just update the last data point
+          newData[newData.length - 1] = newPrice;
+          updateCountRef.current++;
+        }
+        return newData;
+      });
+
+      // Pulse the scrubber on each update
+      (_scrubberRef$current = scrubberRef.current) == null || _scrubberRef$current.pulse();
+    }, 2000 + Math.random() * 1000);
+    return () => clearInterval(priceUpdateInterval);
+  }, [intervalSeconds, maxPercentChange]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    height: 200,
+    inset: {
+      right: 64
+    },
+    series: [{
+      id: 'btc',
+      data: priceData,
+      color: assets.btc.color
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      ref: scrubberRef
+    })
+  });
+}
+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 numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+  }).format(value), []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    points: true,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    height: 200,
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      color: theme.color.accentBoldGreen,
+      // Label will render next to scrubber beacon
+      label: 'Page Views',
+      connectNulls: true
+    }, {
+      id: 'uniqueVisitors',
+      data: uniqueVisitors,
+      color: theme.color.accentBoldPurple,
+      label: 'Unique Visitors'
+    }],
+    xAxis: {
+      // Used on the x-axis to provide context for each index from the series data array
+      data: pages
+    },
+    yAxis: {
+      showGrid: true,
+      tickLabelFormatter: numberFormatter
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      overlayOffset: 6
+    })
+  });
+}
+function Interaction() {
+  const [scrubberPosition, setScrubberPosition] = useState();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: scrubberPosition !== undefined ? "Scrubber position: " + scrubberPosition : 'Not scrubbing'
+    }), /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      height: 200,
+      onScrubberPositionChange: setScrubberPosition,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {})
+    })]
+  });
+}
+function Points() {
+  const theme = useTheme();
+  const keyMarketShiftIndices = [4, 6, 7, 9, 10];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 200,
+    series: [{
+      id: 'prices',
+      data: data
+    }],
+    children: [/*#__PURE__*/_jsx(Area, {
+      fill: "rgb(" + theme.spectrum.blue5 + ")",
+      seriesId: "prices"
+    }), /*#__PURE__*/_jsx(Line, {
+      points: _ref => {
+        let {
+            dataX,
+            dataY
+          } = _ref,
+          props = _objectWithoutPropertiesLoose(_ref, _excluded);
+        return keyMarketShiftIndices.includes(dataX) ? _extends({}, props, {
+          strokeWidth: 2,
+          stroke: theme.color.bg,
+          radius: 5,
+          onClick: () => alert("You have clicked a key market shift at position " + (dataX + 1) + " with value " + dataY + "!"),
+          accessibilityLabel: "Key market shift point at position " + (dataX + 1) + ", value " + dataY + ". Click to view details."
+        }) : false;
       },
-      onPress: () => console.log('clicked'),
-      radius: 6,
-      stroke: "purple",
-      strokeWidth: 7
-    }), /*#__PURE__*/_jsx(ReferenceLine, {
-      dataX: 2,
-      label: "testing 123",
-      labelProps: {
-        color: '#10b981',
-        inset: 0,
-        verticalAlignment: 'middle'
-      }
-    }), /*#__PURE__*/_jsx(ReferenceLine, {
-      dataY: 60,
-      label: "testing 123",
-      labelProps: {
-        horizontalAlignment: 'left'
-      }
-    }), /*#__PURE__*/_jsx(Point, {
-      dataX: 5,
-      dataY: 50,
-      fill: "orange",
-      radius: 5
+      seriesId: "prices"
     })]
   });
-};
-export const AssetPrice = () => {
-  const pricePointsPerHour = 12;
-  const currentHour = 14;
-  const pricePointsToShow = currentHour * pricePointsPerHour;
-  const parsedPrices = useMemo(() => prices.slice(0, pricePointsToShow).map(price => parseFloat(price)), [pricePointsToShow]);
-  const [highlightedItemIndex, setHighlightedItemIndex] = useState(undefined);
-  const isHovering = useMemo(() => typeof highlightedItemIndex === 'number' && highlightedItemIndex < pricePointsToShow, [highlightedItemIndex, pricePointsToShow]);
-  const indexToTime = useCallback(index => {
-    const date = new Date();
-    date.setHours(0, 0, 0, 0);
-    date.setMinutes(index * 5);
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  }, []);
-  const onScrubberPositionChange = useCallback(scrubberPosition => {
-    setHighlightedItemIndex(scrubberPosition);
-  }, []);
-  const highlightedPrice = useMemo(() => {
-    const price = isHovering && typeof highlightedItemIndex === 'number' ? prices[highlightedItemIndex] : prices[prices.length - 1];
-    return new Intl.NumberFormat('en-US', {
+}
+function Transitions() {
+  const theme = useTheme();
+  const dataCount = 20;
+  const maxDataOffset = 15000;
+  const minStepOffset = 2500;
+  const maxStepOffset = 10000;
+  const domainLimit = 20000;
+  const updateInterval = 500;
+  const myTransitionConfig = {
+    type: 'spring',
+    stiffness: 700,
+    damping: 20
+  };
+  const negativeColor = "rgb(" + theme.spectrum.gray15 + ")";
+  const positiveColor = theme.color.fgPositive;
+  function generateNextValue(previousValue) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+    let direction;
+    if (previousValue >= maxDataOffset) {
+      direction = -1;
+    } else if (previousValue <= -maxDataOffset) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+    let newValue = previousValue + offset * direction;
+    newValue = Math.max(-maxDataOffset, Math.min(maxDataOffset, newValue));
+    return newValue;
+  }
+  function generateInitialData() {
+    const data = [];
+    let previousValue = Math.random() * 2 * maxDataOffset - maxDataOffset;
+    data.push(previousValue);
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+    return data;
+  }
+  const MyGradient = /*#__PURE__*/memo(props => {
+    const areaGradient = {
+      stops: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return [{
+          offset: min,
+          color: negativeColor,
+          opacity: 1
+        }, {
+          offset: 0,
+          color: negativeColor,
+          opacity: 0
+        }, {
+          offset: 0,
+          color: positiveColor,
+          opacity: 0
+        }, {
+          offset: max,
+          color: positiveColor,
+          opacity: 1
+        }];
+      }
+    };
+    return /*#__PURE__*/_jsx(DottedArea, _extends({}, props, {
+      gradient: areaGradient
+    }));
+  });
+  function CustomTransitionsChart() {
+    const [data, setData] = useState(generateInitialData);
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData(currentData => {
+          var _currentData;
+          const lastValue = (_currentData = currentData[currentData.length - 1]) != null ? _currentData : 0;
+          const newValue = generateNextValue(lastValue);
+          return [...currentData.slice(1), newValue];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+    const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
       style: 'currency',
-      currency: 'USD'
-    }).format(parseFloat(price));
-  }, [highlightedItemIndex, isHovering]);
-
-  // Calculate trend information
-  const trendInfo = useMemo(() => {
-    const currentPrice = isHovering && typeof highlightedItemIndex === 'number' ? parseFloat(prices[highlightedItemIndex]) : parseFloat(prices[prices.length - 1]);
-    const startPrice = parseFloat(prices[0]);
-    const priceChange = currentPrice - startPrice;
-    const percentChange = priceChange / startPrice * 100;
-    const trendDirection = priceChange > 0 ? 'up' : priceChange < 0 ? 'down' : 'neutral';
-    const formattedPriceChange = new Intl.NumberFormat('en-US', {
+      currency: 'USD',
+      maximumFractionDigits: 0
+    }).format(value), []);
+    const valueAtIndexFormatter = useCallback(dataIndex => new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD'
-    }).format(Math.abs(priceChange));
-    const formattedPercentChange = Math.abs(percentChange).toFixed(2) + "%";
-    return {
-      direction: trendDirection,
-      text: formattedPriceChange + " (" + formattedPercentChange + ")"
+    }).format(data[dataIndex]), [data]);
+    const lineGradient = {
+      stops: [{
+        offset: 0,
+        color: negativeColor
+      }, {
+        offset: 0,
+        color: positiveColor
+      }]
     };
-  }, [highlightedItemIndex, isHovering]);
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: /*#__PURE__*/_jsxs(LineChart, {
-      showArea: true,
-      height: defaultChartHeight,
+    return /*#__PURE__*/_jsxs(CartesianChart, {
+      enableScrubbing: true,
+      height: 200,
       inset: {
-        top: 4,
-        bottom: 8,
-        left: 0,
-        right: 0
+        top: 32,
+        bottom: 32,
+        left: 16,
+        right: 16
       },
-      onScrubberPositionChange: onScrubberPositionChange,
       series: [{
-        id: 'price',
-        data: parsedPrices,
-        color: assets.btc.color
+        id: 'prices',
+        data: data,
+        gradient: lineGradient
       }],
-      xAxis: {
+      yAxis: {
         domain: {
-          min: 0,
-          max: pricePointsPerHour * 24
+          min: -domainLimit,
+          max: domainLimit
         }
       },
-      children: [/*#__PURE__*/_jsx(XAxis, {
-        tickLabelFormatter: index => indexToTime(index).slice(0, -3),
-        ticks: index => index % (12 * 6) === 0
-      }), /*#__PURE__*/_jsx(ReferenceLine, {
-        dataY: parsedPrices[0]
+      children: [/*#__PURE__*/_jsx(YAxis, {
+        showGrid: true,
+        requestedTickCount: 2,
+        tickLabelFormatter: tickLabelFormatter
+      }), /*#__PURE__*/_jsx(Line, {
+        showArea: true,
+        AreaComponent: MyGradient,
+        seriesId: "prices",
+        strokeWidth: 3,
+        transition: myTransitionConfig
+      }), /*#__PURE__*/_jsx(Scrubber, {
+        hideOverlay: true,
+        beaconTransitions: {
+          update: myTransitionConfig
+        },
+        label: valueAtIndexFormatter
       })]
-    })
-  });
-};
-export const LineStyles = () => {
-  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
-  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
-  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
-  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
+    });
+  }
+  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
+  const chartAccessibilityLabel = useMemo(() => {
+    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]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    accessibilityLabel: accessibilityLabel,
+    height: 200,
+    onScrubberPositionChange: setScrubberPosition,
     series: [{
-      id: 'top',
-      data: topChartData
-    }, {
-      id: 'upperMiddle',
-      data: upperMiddleChartData,
-      color: '#ef4444'
-    }, {
-      id: 'lowerMiddle',
-      data: lowerMiddleChartData,
-      color: '#f59e0b'
-    }, {
-      id: 'bottom',
-      data: bottomChartData,
-      color: '#800080'
+      id: 'prices',
+      data: data
     }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      seriesId: "top"
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "upperMiddle",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(GradientLine, _extends({}, props, {
-        endColor: "#F7931A",
-        startColor: "#E3D74D",
-        strokeWidth: 4
-      })),
-      curve: "natural",
-      seriesId: "lowerMiddle"
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: DottedArea,
-      curve: "step",
-      seriesId: "bottom"
-    })]
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
   });
-};
-export const ChartScale = () => {
-  // Generate exponential growth data that benefits from log scaling
-  const exponentialData = [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000];
-  const scaleTypes = [{
-    id: 'linear',
-    label: 'Linear'
-  }, {
-    id: 'log',
-    label: 'Log'
-  }];
-  const [selectedScaleType, setSelectedScaleType] = useState(scaleTypes[0]);
+}
+function Gradients() {
+  const theme = useTheme();
+  const spectrumColors = ['blue', 'green', 'orange', 'yellow', 'gray', 'indigo', 'pink', 'purple', 'red', 'teal', 'chartreuse'];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
   return /*#__PURE__*/_jsxs(VStack, {
-    gap: 3,
-    children: [/*#__PURE__*/_jsx(VStack, {
-      alignItems: "flex-end",
-      gap: 2,
-      children: /*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 2,
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "label1",
-          children: "Scale Type"
-        }), /*#__PURE__*/_jsx(SegmentedTabs, {
-          activeTab: selectedScaleType,
-          onChange: setSelectedScaleType,
-          tabs: scaleTypes
-        })]
-      })
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(HStack, {
+      flexWrap: "wrap",
+      gap: 1,
+      justifyContent: "flex-end",
+      children: spectrumColors.map(color => /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: "Select " + color,
+        height: 16,
+        onPress: () => setCurrentSpectrumColor(color),
+        style: {
+          backgroundColor: "rgb(" + theme.spectrum[color + "20"] + ")",
+          borderColor: "rgb(" + theme.spectrum[color + "50"] + ")",
+          borderWidth: 2
+        },
+        width: 16
+      }, color))
     }), /*#__PURE__*/_jsx(LineChart, {
-      showArea: true,
+      points: true,
       showYAxis: true,
-      curve: "natural",
-      height: defaultChartHeight,
+      height: 200,
       series: [{
-        id: 'growth',
-        data: exponentialData,
-        color: '#10b981'
+        id: 'continuousGradient',
+        data: data,
+        gradient: {
+          stops: [{
+            offset: 0,
+            color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
+          }, {
+            offset: Math.max(...data),
+            color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
+          }]
+        }
+      }, {
+        id: 'discreteGradient',
+        data: data.map(d => d + 50),
+        // You can create a "discrete" gradient by having multiple stops at the same offset
+        gradient: {
+          stops: _ref3 => {
+            let {
+              min,
+              max
+            } = _ref3;
+            return [
+            // Allows a function which accepts min/max or direct array
+            {
+              offset: min,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
+            }, {
+              offset: min + (max - min) / 3,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
+            }, {
+              offset: min + (max - min) / 3,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "50"] + ")"
+            }, {
+              offset: min + (max - min) / 3 * 2,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "50"] + ")"
+            }, {
+              offset: min + (max - min) / 3 * 2,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
+            }, {
+              offset: max,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
+            }];
+          }
+        }
+      }, {
+        id: 'xAxisGradient',
+        data: data.map(d => d + 100),
+        gradient: {
+          // You can also configure by the x-axis.
+          axis: 'x',
+          stops: _ref4 => {
+            let {
+              min,
+              max
+            } = _ref4;
+            return [{
+              offset: min,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")",
+              opacity: 0
+            }, {
+              offset: max,
+              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")",
+              opacity: 1
+            }];
+          }
+        }
       }],
+      strokeWidth: 4,
       yAxis: {
-        scaleType: selectedScaleType == null ? void 0 : selectedScaleType.id,
-        requestedTickCount: 5,
-        tickLabelFormatter: value => value.toLocaleString(),
-        showGrid: true,
-        width: 70
+        showGrid: true
       }
     })]
   });
-};
-export const ColorShiftChart = () => {
+}
+function GainLossChart() {
   const theme = useTheme();
-  const [activeTab, setActiveTab] = useState({
-    id: '1H',
-    label: '1H'
-  });
-  const tabConversion = {
-    '1H': 'hour',
-    '1D': 'day',
-    '1W': 'week',
-    '1M': 'month',
-    '1Y': 'year',
-    All: 'all'
-  };
-  const currentPriceData = activeTab ? sparklineInteractiveData[tabConversion[activeTab.id]] : sparklineInteractiveData.hour;
-  const currentData = useMemo(() => [...currentPriceData.map(price => price.value)], [currentPriceData]);
-  const currentTimestamps = useMemo(() => [...currentPriceData.map(price => price.date.toISOString())], [currentPriceData]);
-  const startPrice = currentData[0];
-  const currentPrice = currentData[currentData.length - 1];
-  const priceChange = currentPrice - startPrice;
-
-  // Determine colors based on trend
-  const trendColor = useMemo(() => {
-    return priceChange >= 0 ? theme.color.fgPositive : theme.color.fgNegative;
-  }, [priceChange, theme.color.fgPositive, theme.color.fgNegative]);
-  const activeBackground = useMemo(() => {
-    return priceChange >= 0 ? 'bgPositiveWash' : 'bgNegativeWash';
-  }, [priceChange]);
-  const formatPrice = useCallback(price => {
-    return "$" + price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    });
-  }, []);
-  const scrubberLabel = useCallback(index => {
-    const timestamp = currentTimestamps[index];
-    return formatChartDate(timestamp, (activeTab == null ? void 0 : activeTab.id) || '1H');
-  }, [activeTab == null ? void 0 : activeTab.id, currentTimestamps]);
+  const data = useMemo(() => [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8], []);
+  const negativeColor = "rgb(" + theme.spectrum.gray15 + ")";
+  const positiveColor = theme.color.fgPositive;
+  const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0
+  }).format(value), []);
 
-  // Custom tab component that uses the trend color for both active and inactive states
-  const ColorShiftTab = useMemo(() => /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-    let {
-        label
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-    return /*#__PURE__*/_jsx(SegmentedTab, _extends({
-      ref: ref,
-      activeColor: trendColor,
-      color: trendColor,
-      font: "label1",
-      label: label
-    }, props));
-  })), [trendColor]);
-  const tabs = useMemo(() => [{
-    id: '1H',
-    label: '1H'
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }], []);
-  return /*#__PURE__*/_jsx(Box, {
-    style: {
-      marginLeft: -16,
-      marginRight: -16
-    },
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 3,
-      width: "100%",
-      children: [/*#__PURE__*/_jsxs(LineChart, {
-        enableScrubbing: true,
-        showArea: true,
-        showXAxis: true,
-        height: defaultChartHeight,
-        inset: {
-          left: 0,
-          right: 24,
-          bottom: 0
-        },
-        series: [{
-          id: 'price',
-          data: currentData,
-          color: trendColor
-        }],
-        children: [/*#__PURE__*/_jsx(Scrubber, {
-          idlePulse: true,
-          label: scrubberLabel
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          dataY: startPrice,
-          label: formatPrice(startPrice),
-          labelProps: {
-            horizontalAlignment: 'right',
-            inset: 4,
-            borderRadius: 4,
-            dx: -8,
-            color: theme.color.fgInverse,
-            background: priceChange >= 0 ? theme.color.bgPositive : theme.color.bgNegative
-          },
-          stroke: priceChange >= 0 ? theme.color.bgPositive : theme.color.bgNegative
-        })]
-      }), /*#__PURE__*/_jsx(PeriodSelector, {
-        TabComponent: ColorShiftTab,
-        activeBackground: activeBackground,
-        activeTab: activeTab,
-        onChange: setActiveTab,
-        tabs: tabs
-      })]
-    })
-  });
-};
-export const PriceChart = () => {
-  const {
-    latestPrice,
-    formattedPrice
-  } = useMemo(() => {
-    const latestPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-    return {
-      latestPrice,
-      formattedPrice: "$" + latestPrice.toLocaleString('en-US', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      })
-    };
-  }, []);
-  const tabs = useMemo(() => [{
-    id: '1H',
-    label: '1H'
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }], []);
-  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 [isHovering, setIsHovering] = useState(false);
-  const tabConversion = {
-    '1H': 'hour',
-    '1D': 'day',
-    '1W': 'week',
-    '1M': 'month',
-    '1Y': 'year',
-    All: 'all'
-  };
-  const currentPriceData = activeTab ? sparklineInteractiveData[tabConversion[activeTab.id]] : sparklineInteractiveData.hour;
-  const currentData = useMemo(() => [...currentPriceData.map(price => price.value)], [currentPriceData]);
-  const currentTimestamps = useMemo(() => [...currentPriceData.map(price => price.date.toISOString())], [currentPriceData]);
-  const startPrice = currentData[0];
-  const {
-    lowestPriceIndices,
-    highestPriceIndices
-  } = useMemo(() => {
-    if (currentData.length === 0) {
-      return {
-        lowestPriceIndices: [],
-        highestPriceIndices: [],
-        minPrice: 0,
-        maxPrice: 0
-      };
-    }
-    let minPrice = currentData[0];
-    let maxPrice = currentData[0];
-
-    // First pass: find min and max values
-    for (let i = 1; i < currentData.length; i++) {
-      if (currentData[i] < minPrice) {
-        minPrice = currentData[i];
-      }
-      if (currentData[i] > maxPrice) {
-        maxPrice = currentData[i];
-      }
-    }
-
-    // Second pass: find all indices where min and max occur
-    const lowestPriceIndices = [];
-    const highestPriceIndices = [];
-    for (let i = 0; i < currentData.length; i++) {
-      if (currentData[i] === minPrice) {
-        lowestPriceIndices.push(i);
-      }
-      if (currentData[i] === maxPrice) {
-        highestPriceIndices.push(i);
-      }
-    }
-    return {
-      lowestPriceIndices,
-      highestPriceIndices,
-      minPrice,
-      maxPrice
-    };
-  }, [currentData]);
-  const latestPriceCoords = useMemo(() => {
-    if (currentData.length === 0) return {};
-    return {
-      x: currentData.length - 1,
-      y: currentData[currentData.length - 1]
-    };
-  }, [currentData]);
-  const onScrubberPositionChange = useCallback(item => {
-    setIsHovering(item !== undefined);
-  }, []);
-  const {
-    trendPrice,
-    trendPreviousPrice,
-    trendDirection
-  } = useMemo(() => {
-    return calculateTrendData(undefined, currentData, currentTimestamps, startPrice, latestPrice, (activeTab == null ? void 0 : activeTab.id) || '1H');
-  }, [currentData, currentTimestamps, startPrice, latestPrice, activeTab]);
-  const calculatedPriceChange = trendPrice - trendPreviousPrice;
-  const calculatedPercentChange = calculatedPriceChange / trendPreviousPrice * 100;
-  const formattedPriceChange = "$" + Math.abs(calculatedPriceChange).toLocaleString('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }) + " (" + Math.abs(calculatedPercentChange).toLocaleString('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }) + "%)";
-  const scrubberLabel = useCallback(item => {
-    if (item === undefined) return null;
-    const timestamp = currentTimestamps[item];
-    const price = currentData[item];
-    const formattedPrice = price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }) + ' USD';
-    const formattedDate = formatChartDate(timestamp, (activeTab == null ? void 0 : activeTab.id) || '1H');
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("tspan", {
-        style: {
-          fontWeight: 'bold',
-          display: 'inline-block'
-        },
-        children: formattedPrice
-      }), /*#__PURE__*/_jsxs("tspan", {
-        style: {
-          display: 'inline-block'
-        },
-        children: [" ", formattedDate]
-      })]
-    });
-  }, [currentTimestamps, currentData, activeTab == null ? void 0 : activeTab.id]);
-  const formatPrice = useCallback(value => {
-    return "$" + value.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 3,
-    width: "100%",
-    children: [/*#__PURE__*/_jsx(LineChart, {
-      showArea: true,
-      height: defaultChartHeight,
-      inset: {
-        left: 0,
-        right: 3,
-        bottom: 3,
-        top: 3
-      },
-      onScrubberPositionChange: onScrubberPositionChange,
-      series: [{
-        id: 'price',
-        data: currentData,
-        color: assets.eth.color,
-        renderPoints: _ref2 => {
-          let {
-            dataX: index
-          } = _ref2;
-          if (highestPriceIndices.includes(index)) {
-            return {
-              opacity: 0,
-              label: formatPrice(currentData[index]),
-              labelProps: {
-                position: 'top',
-                dy: -16
-              }
-            };
-          }
-          if (lowestPriceIndices.includes(index)) {
-            return {
-              opacity: 0,
-              label: formatPrice(currentData[index]),
-              labelProps: {
-                position: 'bottom',
-                dy: 16
-              }
-            };
-          }
-        }
-      }],
-      yAxis: {
-        domainLimit: 'strict'
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {})
-    }), /*#__PURE__*/_jsx(PeriodSelector, {
-      activeTab: activeTab,
-      onChange: tab => setActiveTab(tab),
-      tabs: tabs
-    })]
-  });
-};
-export const ForecastChart = () => {
-  const getDataFromSparkline = startDate => {
-    const allData = sparklineInteractiveData.all;
-    if (!allData || allData.length === 0) return [];
-    const timelineData = allData.filter(point => point.date >= startDate);
-    return timelineData.map(point => ({
-      date: point.date,
-      value: point.value
-    }));
-  };
-  const historicalData = useMemo(() => getDataFromSparkline(new Date('2019-01-01')), []);
-  const annualGrowthRate = 10;
-  const generateForecastData = useCallback((lastDate, lastPrice, growthRate) => {
-    const dailyGrowthRate = Math.pow(1 + growthRate / 100, 1 / 365) - 1;
-    const forecastData = [];
-    const fiveYearsFromNow = new Date(lastDate);
-    fiveYearsFromNow.setFullYear(fiveYearsFromNow.getFullYear() + 5);
-
-    // Generate daily forecast points for 5 years
-    const currentDate = new Date(lastDate);
-    let currentPrice = lastPrice;
-    while (currentDate <= fiveYearsFromNow) {
-      currentPrice = currentPrice * (1 + dailyGrowthRate * 10);
-      forecastData.push({
-        date: new Date(currentDate),
-        value: Math.round(currentPrice)
-      });
-      currentDate.setDate(currentDate.getDate() + 10);
-    }
-    return forecastData;
-  }, []);
-  const forecastData = useMemo(() => {
-    if (historicalData.length === 0) return [];
-    const lastPoint = historicalData[historicalData.length - 1];
-    return generateForecastData(lastPoint.date, lastPoint.value, annualGrowthRate);
-  }, [generateForecastData, historicalData, annualGrowthRate]);
-
-  // Combine all data points with dates converted to timestamps for x-axis
-  const allDataPoints = useMemo(() => [...historicalData, ...forecastData], [historicalData, forecastData]);
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price);
-  }, []);
-
-  // Format x-axis labels to show years
-  const formatXAxisLabel = useCallback(timestamp => {
-    return new Date(timestamp).getFullYear().toString();
-  }, []);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    showXAxis: true,
-    areaType: "dotted",
-    height: defaultChartHeight,
-    inset: {
-      top: 4,
-      left: 0,
-      right: 0,
-      bottom: 0
-    },
-    series: [{
-      id: 'historical',
-      data: historicalData.map(d => d.value),
-      color: assets.btc.color
-    }, {
-      id: 'forecast',
-      data: [...historicalData.map(d => null), ...forecastData.map(d => d.value)],
-      color: assets.btc.color,
-      type: 'dotted'
-    }],
-    xAxis: {
-      data: allDataPoints.map(d => d.date.getTime()),
-      tickLabelFormatter: formatXAxisLabel,
-      tickInterval: 32
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-};
-const PeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1H',
-    label: '1H'
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    activeTab: activeTab,
-    onChange: tab => setActiveTab(tab),
-    tabs: tabs
-  });
-};
-const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-      label
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  const {
-    activeTab
-  } = useTabsContext();
-  const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
-  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
-    ref: ref,
-    label: /*#__PURE__*/_jsx(TextLabel1, {
-      style: {
-        color: isActive ? assets.btc.color : undefined
-      },
-      children: label
-    })
-  }, props));
-}));
-const BTCActiveIndicator = /*#__PURE__*/memo(_ref4 => {
-  let {
-      style
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
-  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-    style: [style, {
-      backgroundColor: assets.btc.color + "1A"
-    }]
-  }));
-});
-const AssetPriceDotted = () => {
-  const currentPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-  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(() => {
-    return sparklineInteractiveData[timePeriod.id];
-  }, [timePeriod]);
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.value);
-  }, [sparklineTimePeriodData]);
-  const sparklineTimePeriodDataTimestamps = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.date);
-  }, [sparklineTimePeriodData]);
-  const onPeriodChange = useCallback(period => {
-    setTimePeriod(period || tabs[0]);
-  }, [tabs, setTimePeriod]);
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(price);
-  }, []);
-  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 scrubberLabel = useCallback(dataIndex => {
-    const price = new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(sparklineTimePeriodDataValues[dataIndex]);
-    const date = formatDate(sparklineTimePeriodDataTimestamps[dataIndex]);
-    return price + " USD " + date;
-  }, [sparklineTimePeriodDataValues, formatDate, sparklineTimePeriodDataTimestamps]);
-
-  // Chart overview accessibility label
-  const chartOverviewLabel = useMemo(() => {
-    if (sparklineTimePeriodData.length === 0) return '';
-    const firstDate = sparklineTimePeriodData[0].date;
-    const lastDate = sparklineTimePeriodData[sparklineTimePeriodData.length - 1].date;
-    const currentYear = new Date().getFullYear();
-    const shouldIncludeTime = timePeriod.id === 'hour' || timePeriod.id === 'day';
-    const dateRangeOptions = _extends({
-      month: 'long',
-      day: 'numeric',
-      year: firstDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    }, shouldIncludeTime && {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-    const startDateStr = shouldIncludeTime ? firstDate.toLocaleString('en-US', dateRangeOptions) : firstDate.toLocaleDateString('en-US', dateRangeOptions);
-    const endDateStr = shouldIncludeTime ? lastDate.toLocaleString('en-US', _extends({}, dateRangeOptions, {
-      year: lastDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    })) : lastDate.toLocaleDateString('en-US', _extends({}, dateRangeOptions, {
-      year: lastDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    }));
-    return "Price chart for Bitcoin, " + startDateStr + " to " + endDateStr + ". Swipe left or right to navigate data points.";
-  }, [sparklineTimePeriodData, timePeriod.id]);
-  return /*#__PURE__*/_jsx(Box, {
-    accessibilityLabel: chartOverviewLabel,
-    accessibilityLiveRegion: "polite",
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        "aria-hidden": "true",
-        balance: /*#__PURE__*/_jsxs(Text, {
-          font: "title2",
-          children: [formatPrice(currentPrice), " ", sparklineTimePeriodDataValues.length]
-        }),
-        end: /*#__PURE__*/_jsx(VStack, {
-          justifyContent: "center",
-          children: /*#__PURE__*/_jsx(RemoteImage, {
-            shape: "circle",
-            size: "xl",
-            source: assets.btc.imageUrl
-          })
-        }),
-        padding: 0,
-        title: /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Bitcoin"
-        })
-      }), /*#__PURE__*/_jsx(LineChart, {
-        enableScrubbing: true,
-        showArea: true,
-        accessibilityLiveRegion: "polite",
-        areaType: "dotted",
-        height: defaultChartHeight,
-        series: [{
-          id: 'btc',
-          data: sparklineTimePeriodDataValues,
-          color: assets.btc.color
-        }],
-        children: /*#__PURE__*/_jsx(Scrubber, {
-          idlePulse: true,
-          label: scrubberLabel
-        })
-      }), /*#__PURE__*/_jsx(PeriodSelector, {
-        TabComponent: BTCTab,
-        TabsActiveIndicatorComponent: BTCActiveIndicator,
-        accessibilityLabel: "Select time period for chart",
-        activeTab: timePeriod,
-        onChange: onPeriodChange,
-        tabs: tabs
-      })]
-    })
-  });
-};
-const AssetPriceDottedNonMemoized = () => {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-  const currentPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-  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(() => {
-    return sparklineInteractiveData[timePeriod.id];
-  }, [timePeriod]);
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.value);
-  }, [sparklineTimePeriodData]);
-  const sparklineTimePeriodDataTimestamps = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.date);
-  }, [sparklineTimePeriodData]);
-  const onPeriodChange = useCallback(period => {
-    setTimePeriod(period || tabs[0]);
-  }, [tabs, setTimePeriod]);
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(price);
-  }, []);
-  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 scrubberLabel = useMemo(() => {
-    if (scrubIndex === undefined) return null;
-    const price = new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(sparklineTimePeriodDataValues[scrubIndex]);
-    const date = formatDate(sparklineTimePeriodDataTimestamps[scrubIndex]);
-    return price + " USD " + date;
-  }, [scrubIndex, sparklineTimePeriodDataValues, formatDate, sparklineTimePeriodDataTimestamps]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(SectionHeader, {
-      balance: /*#__PURE__*/_jsxs(Text, {
-        font: "title2",
-        children: [formatPrice(currentPrice), " ", sparklineTimePeriodDataValues.length]
-      }),
-      end: /*#__PURE__*/_jsx(VStack, {
-        justifyContent: "center",
-        children: /*#__PURE__*/_jsx(RemoteImage, {
-          shape: "circle",
-          size: "xl",
-          source: assets.btc.imageUrl
-        })
-      }),
-      padding: 0,
-      title: /*#__PURE__*/_jsx(Text, {
-        font: "title1",
-        children: "Bitcoin"
-      })
-    }), /*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      showArea: true,
-      areaType: "dotted",
-      height: defaultChartHeight,
-      onScrubberPositionChange: setScrubIndex,
-      series: [{
-        id: 'btc',
-        data: sparklineTimePeriodDataValues,
-        color: assets.btc.color
-      }],
-      children: /*#__PURE__*/_jsx(Scrubber, {
-        label: scrubberLabel
-      })
-    }), /*#__PURE__*/_jsx(PeriodSelector, {
-      TabComponent: BTCTab,
-      TabsActiveIndicatorComponent: BTCActiveIndicator,
-      activeTab: timePeriod,
-      onChange: onPeriodChange,
-      tabs: tabs
-    })]
-  });
-};
-const AssetPriceMultipleDotted = () => {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-  const currentPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-  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(() => {
-    return sparklineInteractiveData[timePeriod.id];
-  }, [timePeriod]);
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.value);
-  }, [sparklineTimePeriodData]);
-  const sparklineTimePeriodDataTimestamps = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.date);
-  }, [sparklineTimePeriodData]);
-  const onPeriodChange = useCallback(period => {
-    setTimePeriod(period || tabs[0]);
-  }, [tabs, setTimePeriod]);
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(price);
-  }, []);
-  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 scrubberLabel = useMemo(() => {
-    if (scrubIndex === undefined) return null;
-    const price = new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(sparklineTimePeriodDataValues[scrubIndex]);
-    const date = formatDate(sparklineTimePeriodDataTimestamps[scrubIndex]);
-    return price + " USD " + date;
-  }, [scrubIndex, sparklineTimePeriodDataValues, formatDate, sparklineTimePeriodDataTimestamps]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(SectionHeader, {
-      balance: /*#__PURE__*/_jsxs(Text, {
-        font: "title2",
-        children: [formatPrice(currentPrice), " ", sparklineTimePeriodDataValues.length]
-      }),
-      end: /*#__PURE__*/_jsx(VStack, {
-        justifyContent: "center",
-        children: /*#__PURE__*/_jsx(RemoteImage, {
-          shape: "circle",
-          size: "xl",
-          source: assets.btc.imageUrl
-        })
-      }),
-      padding: 0,
-      title: /*#__PURE__*/_jsx(Text, {
-        font: "title1",
-        children: "Bitcoin"
-      })
-    }), /*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      height: defaultChartHeight,
-      series: [{
-        id: 'btc',
-        data: sparklineTimePeriodDataValues,
-        color: assets.btc.color
-      }, {
-        id: 'eth',
-        data: sparklineTimePeriodDataValues.map(d => d * 0.75),
-        color: assets.eth.color
-      }, {
-        id: 'xrp',
-        data: sparklineTimePeriodDataValues.map(d => d * 0.5),
-        color: assets.xrp.color
-      }],
-      children: /*#__PURE__*/_jsx(Scrubber, {})
-    }), /*#__PURE__*/_jsx(PeriodSelector, {
-      TabComponent: BTCTab,
-      TabsActiveIndicatorComponent: BTCActiveIndicator,
-      activeTab: timePeriod,
-      onChange: onPeriodChange,
-      tabs: tabs
-    })]
-  });
-};
-const GainLossChart = () => {
-  const theme = useTheme();
-  const gradientId = useId();
-  const data = [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8];
-  const ChartDefs = _ref5 => {
-    let {
-      threshold = 0
-    } = _ref5;
-    const {
-      getYScale
-    } = useCartesianChartContext();
-    // get the default y-axis scale
-    const yScale = getYScale();
-    if (yScale) {
-      const domain = yScale.domain();
-      const range = yScale.range();
-      const baselinePercentage = (threshold - domain[0]) / (domain[1] - domain[0]) * 100;
-      const negativeColor = "rgb(" + theme.spectrum.gray20 + ")";
-      const positiveColor = theme.color.fgPositive;
-      return /*#__PURE__*/_jsxs(Defs, {
-        children: [/*#__PURE__*/_jsxs(LinearGradient, {
-          gradientUnits: "userSpaceOnUse",
-          id: gradientId + "-solid",
-          x1: "0%",
-          x2: "0%",
-          y1: range[0],
-          y2: range[1],
-          children: [/*#__PURE__*/_jsx(Stop, {
-            offset: "0%",
-            stopColor: negativeColor
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: baselinePercentage + "%",
-            stopColor: negativeColor
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: baselinePercentage + "%",
-            stopColor: positiveColor
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: "100%",
-            stopColor: positiveColor
-          })]
-        }), /*#__PURE__*/_jsxs(LinearGradient, {
-          gradientUnits: "userSpaceOnUse",
-          id: gradientId + "-gradient",
-          x1: "0%",
-          x2: "0%",
-          y1: range[0],
-          y2: range[1],
-          children: [/*#__PURE__*/_jsx(Stop, {
-            offset: "0%",
-            stopColor: negativeColor,
-            stopOpacity: 0.3
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: baselinePercentage + "%",
-            stopColor: negativeColor,
-            stopOpacity: 0
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: baselinePercentage + "%",
-            stopColor: positiveColor,
-            stopOpacity: 0
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: "100%",
-            stopColor: positiveColor,
-            stopOpacity: 0.3
-          })]
-        })]
-      });
-    }
-    return null;
+  // Line gradient: hard color change at 0 (full opacity for line)
+  const lineGradient = {
+    stops: [{
+      offset: 0,
+      color: negativeColor
+    }, {
+      offset: 0,
+      color: positiveColor
+    }]
   };
-  const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: 0
-  }).format(value), []);
-  const solidColor = "url(#" + gradientId + "-solid)";
+  const GradientDottedArea = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DottedArea, _extends({}, props, {
+    gradient: {
+      stops: _ref5 => {
+        let {
+          min,
+          max
+        } = _ref5;
+        return [{
+          offset: min,
+          color: negativeColor,
+          opacity: 0.4
+        }, {
+          offset: 0,
+          color: negativeColor,
+          opacity: 0
+        }, {
+          offset: 0,
+          color: positiveColor,
+          opacity: 0
+        }, {
+          offset: max,
+          color: positiveColor,
+          opacity: 0.4
+        }];
+      }
+    }
+  })));
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
-    height: defaultChartHeight,
-    inset: {
-      top: 1.5,
-      bottom: 1.5,
-      left: 0,
-      right: 0
-    },
+    height: 200,
     series: [{
       id: 'prices',
       data: data,
-      color: solidColor
+      gradient: lineGradient
     }],
-    children: [/*#__PURE__*/_jsx(ChartDefs, {}), /*#__PURE__*/_jsx(YAxis, {
+    children: [/*#__PURE__*/_jsx(YAxis, {
       showGrid: true,
       requestedTickCount: 2,
       tickLabelFormatter: tickLabelFormatter
-    }), /*#__PURE__*/_jsx(Area, {
-      curve: "monotone",
-      fill: "url(#" + gradientId + "-gradient)",
-      seriesId: "prices"
     }), /*#__PURE__*/_jsx(Line, {
-      curve: "monotone",
+      showArea: true,
+      AreaComponent: GradientDottedArea,
       seriesId: "prices",
-      stroke: solidColor,
       strokeWidth: 3
     }), /*#__PURE__*/_jsx(Scrubber, {
       hideOverlay: true
     })]
   });
-};
-const BitcoinChartWithScrubberBeacon = () => {
+}
+function HighLowPrice() {
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+  const minPrice = Math.min(...data);
+  const maxPrice = Math.max(...data);
+  const minPriceIndex = data.indexOf(minPrice);
+  const maxPriceIndex = data.indexOf(maxPrice);
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs(LineChart, {
+    showArea: true,
+    height: 200,
+    series: [{
+      id: 'prices',
+      data: data
+    }],
+    children: [/*#__PURE__*/_jsx(Point, {
+      dataX: minPriceIndex,
+      dataY: minPrice,
+      label: formatPrice(minPrice),
+      labelPosition: "bottom"
+    }), /*#__PURE__*/_jsx(Point, {
+      dataX: maxPriceIndex,
+      dataY: maxPrice,
+      label: formatPrice(maxPrice),
+      labelPosition: "top"
+    })]
+  });
+}
+function StylingScrubber() {
   const theme = useTheme();
-  const prices = [...btcCandles].reverse().map(candle => parseFloat(candle.close));
-  const latestPrice = prices[prices.length - 1];
-  const formatPrice = price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(price);
+  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 numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+  }).format(value), []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    height: 200,
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      color: theme.color.accentBoldGreen,
+      // Label will render next to scrubber beacon
+      label: 'Page Views'
+    }, {
+      id: 'uniqueVisitors',
+      data: uniqueVisitors,
+      color: theme.color.accentBoldPurple,
+      label: 'Unique Visitors',
+      // Default area is gradient
+      areaType: 'dotted'
+    }],
+    xAxis: {
+      // Used on the x-axis to provide context for each index from the series data array
+      data: pages
+    },
+    yAxis: {
+      showGrid: true,
+      tickLabelFormatter: numberFormatter
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true,
+      LineComponent: SolidLine,
+      seriesIds: ['pageViews']
+    })
+  });
+}
+function Compact() {
+  const theme = useTheme();
+  const dimensions = {
+    width: 62,
+    height: 18
   };
-  const formatPercentChange = price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'percent',
+  const sparklineData = prices.map(price => parseFloat(price)).filter((price, index) => index % 10 === 0);
+  const positiveFloor = Math.min(...sparklineData) - 10;
+  const negativeData = sparklineData.map(price => -1 * price).reverse();
+  const negativeCeiling = Math.max(...negativeData) + 10;
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2
-    }).format(price);
-  };
-  const percentChange = (latestPrice - prices[0]) / prices[0];
-  return /*#__PURE__*/_jsx(Box, {
-    borderRadius: 300,
-    overflow: "hidden",
-    style: {
-      backgroundColor: '#ED702F'
-    },
-    children: /*#__PURE__*/_jsxs(VStack, {
+    });
+  }, []);
+  const CompactChart = /*#__PURE__*/memo(_ref6 => {
+    let {
+      data,
+      showArea,
+      color,
+      referenceY
+    } = _ref6;
+    return /*#__PURE__*/_jsx(Box, {
       style: {
-        backgroundColor: 'rgba(0, 0, 0, 0.80)'
+        padding: 1
       },
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 2,
-        padding: 2,
-        paddingBottom: 0,
-        children: [/*#__PURE__*/_jsx(RemoteImage, {
-          shape: "circle",
-          size: "xxl",
-          source: assets.btc.imageUrl
-        }), /*#__PURE__*/_jsxs(VStack, {
-          flexGrow: 1,
-          gap: 0.25,
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "title1",
-            style: {
-              color: 'white'
-            },
-            children: "BTC"
-          }), /*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "label1",
-            children: "Bitcoin"
-          })]
-        }), /*#__PURE__*/_jsxs(VStack, {
-          alignItems: "flex-end",
-          gap: 0.25,
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "title1",
-            style: {
-              color: 'white'
-            },
-            children: formatPrice(latestPrice)
-          }), /*#__PURE__*/_jsxs(Text, {
-            color: "fgPositive",
-            font: "label1",
-            children: ["+", formatPercentChange(percentChange)]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        height: 64,
-        inset: {
-          left: 0,
-          right: 3,
-          bottom: 0,
-          top: 2
-        },
+      children: /*#__PURE__*/_jsx(LineChart, _extends({}, dimensions, {
+        enableScrubbing: false,
+        inset: 0,
         series: [{
-          id: 'btcPrice',
-          data: prices,
-          color: assets.btc.color
+          id: 'btc',
+          data,
+          color
         }],
-        width: "100%",
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })]
-    })
+        showArea: showArea,
+        children: /*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: referenceY
+        })
+      }))
+    });
   });
-};
-const ScrubberWithImperativeHandle = () => {
-  const theme = useTheme();
-  const scrubberRef = useRef(null);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      showYAxis: true,
-      height: defaultChartHeight,
-      series: [{
-        id: 'priceA',
-        data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
-        label: 'Page Views',
-        color: theme.color.accentBoldBlue,
-        curve: 'natural'
-      }, {
-        id: 'priceB',
-        data: [2000, 2491, 4501, 6049, 5019, 4930, 5910],
-        label: 'Unique Visitors G',
-        color: theme.color.accentBoldGreen,
-        curve: 'natural'
-      }, {
-        id: 'priceC',
-        data: [1000, 4910, 2300, 5910, 3940, 2940, 1940],
-        label: 'Unique Visitors P',
-        color: theme.color.accentBoldPurple,
-        curve: 'natural'
-      }],
-      yAxis: {
-        domain: {
-          min: 0
-        },
-        showGrid: true,
-        tickLabelFormatter: value => value.toLocaleString()
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {
-        ref: scrubberRef
-      })
-    }), /*#__PURE__*/_jsx(Button, {
-      onPress: () => {
-        var _scrubberRef$current;
-        return (_scrubberRef$current = scrubberRef.current) == null ? void 0 : _scrubberRef$current.pulse();
+  const ChartCell = /*#__PURE__*/memo(_ref7 => {
+    let {
+      data,
+      showArea,
+      color,
+      referenceY,
+      subdetail
+    } = _ref7;
+    return /*#__PURE__*/_jsx(ListCell, {
+      detail: formatPrice(parseFloat(prices[0])),
+      intermediary: /*#__PURE__*/_jsx(CompactChart, {
+        color: color,
+        data: data,
+        referenceY: referenceY,
+        showArea: showArea
+      }),
+      media: /*#__PURE__*/_jsx(Avatar, {
+        src: assets.btc.imageUrl
+      }),
+      onPress: () => console.log('clicked'),
+      spacingVariant: "condensed",
+      style: {
+        padding: 0
       },
-      children: "Pulse Beacons"
-    })]
+      subdetail: subdetail
+    });
   });
-};
-const BTCPriceChart = () => {
-  const tabs = [{
-    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 [activeTab, setActiveTab] = useState(tabs[0]);
-  const [highlightedItem, setHighlightedItem] = useState();
-  const currentPriceData = activeTab ? sparklineInteractiveData[activeTab.id] : sparklineInteractiveData.hour;
-  const currentData = useMemo(() => [...currentPriceData.map(price => price.value)], [currentPriceData]);
-  const currentTimestamps = useMemo(() => [...currentPriceData.map(price => price.date.toISOString())], [currentPriceData]);
-  const currentPrice = currentData[currentData.length - 1];
-  const startPrice = currentData[0];
-  const onScrubberPositionChange = useCallback(item => {
-    setHighlightedItem(item);
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsx(ChartCell, {
+      color: assets.btc.color,
+      data: sparklineData,
+      referenceY: parseFloat(prices[Math.floor(prices.length / 4)]),
+      subdetail: "-4.55%"
+    }), /*#__PURE__*/_jsx(ChartCell, {
+      showArea: true,
+      color: assets.btc.color,
+      data: sparklineData,
+      referenceY: parseFloat(prices[Math.floor(prices.length / 4)]),
+      subdetail: "-4.55%"
+    }), /*#__PURE__*/_jsx(ChartCell, {
+      showArea: true,
+      color: theme.color.fgPositive,
+      data: sparklineData,
+      referenceY: positiveFloor,
+      subdetail: "+0.25%"
+    }), /*#__PURE__*/_jsx(ChartCell, {
+      showArea: true,
+      color: theme.color.fgNegative,
+      data: negativeData,
+      referenceY: negativeCeiling,
+      subdetail: "-4.55%"
+    })]
+  });
+}
+function AssetPriceWithDottedArea() {
+  const fontMgr = useMemo(() => {
+    const fontProvider = Skia.TypefaceFontProvider.Make();
+    // Register system fonts if available, otherwise Skia will use defaults
+    return fontProvider;
   }, []);
-  const displayPrice = highlightedItem !== null && highlightedItem !== undefined ? currentData[highlightedItem] : currentPrice;
-  const btcAccentColor = '#F0A73C';
-  const {
-    displayDate
-  } = useMemo(() => {
-    return calculateTrendData(highlightedItem, currentData, currentTimestamps, startPrice, currentPrice, (activeTab == null ? void 0 : activeTab.id) || 'hour');
-  }, [highlightedItem, currentData, currentTimestamps, startPrice, currentPrice, activeTab]);
-  const formattedPrice = "$" + displayPrice.toLocaleString('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
+  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref8, ref) => {
+    let {
+        label
+      } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
+    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(_ref9 => {
+    let {
+        style
+      } = _ref9,
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
+    return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+      style: [style, {
+        backgroundColor: assets.btc.color + "1A"
+      }]
+    }));
   });
-  const AreaComponent = useMemo(() => props => /*#__PURE__*/_jsx(GradientArea, _extends({}, props, {
-    peakOpacity: 0.15
-  })), []);
-  return /*#__PURE__*/_jsx(Box, {
-    borderRadius: 300,
-    overflow: "hidden",
-    style: {
-      backgroundColor: btcAccentColor
-    },
-    width: "100%",
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 3,
-      width: "100%",
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "flex-start",
-        gap: 3,
-        justifyContent: "space-between",
-        padding: 4,
-        children: [/*#__PURE__*/_jsxs(VStack, {
-          flexGrow: 1,
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "title1",
-            children: "Coinbase Wrapped BTC"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "title2",
-            children: formattedPrice
-          })]
-        }), /*#__PURE__*/_jsx(VStack, {
+  const AssetPriceDotted = /*#__PURE__*/memo(() => {
+    const theme = useTheme();
+    const currentPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
+    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(() => {
+      return sparklineInteractiveData[timePeriod.id];
+    }, [timePeriod]);
+    const sparklineTimePeriodDataValues = useMemo(() => {
+      return sparklineTimePeriodData.map(d => d.value);
+    }, [sparklineTimePeriodData]);
+    const sparklineTimePeriodDataTimestamps = useMemo(() => {
+      return sparklineTimePeriodData.map(d => d.date);
+    }, [sparklineTimePeriodData]);
+    const onPeriodChange = useCallback(period => {
+      setTimePeriod(period || tabs[0]);
+    }, [tabs, setTimePeriod]);
+    const priceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }), []);
+    const formatPrice = useCallback(price => {
+      return 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;
+    }, []);
+    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: "xxl",
+            size: "xl",
             source: assets.btc.imageUrl
           })
-        })]
-      }), /*#__PURE__*/_jsxs(CartesianChart, {
+        }),
+        title: /*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Bitcoin"
+        })
+      }), /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
+        showArea: true,
+        areaType: "dotted",
         height: 200,
         inset: {
-          bottom: 0,
-          right: 3,
-          left: 0,
-          top: 6
+          top: 52
         },
-        onScrubberPositionChange: onScrubberPositionChange,
         series: [{
-          id: 'price',
-          data: currentData,
-          color: 'black'
+          id: 'btc',
+          data: sparklineTimePeriodDataValues,
+          color: assets.btc.color
         }],
-        width: "100%",
-        children: [/*#__PURE__*/_jsx(Line, {
-          showArea: true,
-          AreaComponent: AreaComponent,
-          seriesId: "price",
-          strokeWidth: 3
-        }), /*#__PURE__*/_jsx(Scrubber, {
+        children: /*#__PURE__*/_jsx(Scrubber, {
           idlePulse: true,
-          label: displayDate,
-          labelProps: {
-            color: 'black'
-          },
-          lineStroke: "black"
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        padding: 2,
-        children: /*#__PURE__*/_jsx(PeriodSelector, {
-          activeTab: activeTab,
-          onChange: tab => setActiveTab(tab),
-          tabs: tabs
+          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({
+              fontFamilies: ['Inter']
+            }, regularStyle, {
+              fontStyle: {
+                weight: FontWeight.Bold
+              }
+            });
+
+            // 3. Use the ParagraphBuilder
+            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
       })]
-    })
+    });
   });
-};
-const LiveAssetPrice = () => {
-  const scrubberRef = useRef(null);
-  const initialData = useMemo(() => {
-    return sparklineInteractiveData.hour.map(d => d.value);
+  return /*#__PURE__*/_jsx(AssetPriceDotted, {});
+}
+const LegendDot = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(Box, _extends({
+    borderRadius: 1000,
+    height: 10,
+    width: 10
+  }, props));
+});
+const LegendEntry = /*#__PURE__*/memo(_ref0 => {
+  let {
+    color = assets.btc.color,
+    label,
+    value
+  } = _ref0;
+  return /*#__PURE__*/_jsxs(Box, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsx(LegendDot, {
+      style: {
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label2",
+      children: label
+    }), value && /*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "label2",
+      style: {
+        fontWeight: 'bold'
+      },
+      children: value
+    })]
+  });
+});
+const PerformanceHeader = /*#__PURE__*/memo(_ref1 => {
+  let {
+    scrubberPosition,
+    sparklineTimePeriodDataValues
+  } = _ref1;
+  const theme = useTheme();
+  const formatPriceThousands = useCallback(price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000) + "k";
   }, []);
-  const [priceData, setPriceData] = useState(initialData);
-  const lastDataPointTimeRef = useRef(Date.now());
-  const updateCountRef = useRef(0);
-  const intervalSeconds = 3600 / initialData.length;
-  const maxPercentChange = Math.abs(initialData[initialData.length - 1] - initialData[0]) * 0.05;
-  useEffect(() => {
-    const priceUpdateInterval = setInterval(() => {
-      var _scrubberRef$current2;
-      setPriceData(currentData => {
-        const newData = [...currentData];
-        const lastPrice = newData[newData.length - 1];
-        const priceChange = (Math.random() - 0.5) * maxPercentChange;
-        const newPrice = Math.round((lastPrice + priceChange) * 100) / 100;
-
-        // Check if we should roll over to a new data point
-        const currentTime = Date.now();
-        const timeSinceLastPoint = (currentTime - lastDataPointTimeRef.current) / 1000;
-        if (timeSinceLastPoint >= intervalSeconds) {
-          // Time for a new data point - remove first, add new at end
-          lastDataPointTimeRef.current = currentTime;
-          newData.shift(); // Remove oldest data point
-          newData.push(newPrice); // Add new data point
-          updateCountRef.current = 0;
-        } else {
-          // Just update the last data point
-          newData[newData.length - 1] = newPrice;
-          updateCountRef.current++;
-        }
-        return newData;
-      });
-
-      // Pulse the scrubber on each update
-      (_scrubberRef$current2 = scrubberRef.current) == null || _scrubberRef$current2.pulse();
-    }, 2000 + Math.random() * 1000);
-    return () => clearInterval(priceUpdateInterval);
-  }, [intervalSeconds, maxPercentChange]);
+  const shownPosition = scrubberPosition !== undefined ? scrubberPosition : sparklineTimePeriodDataValues.length - 1;
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 1,
+    paddingX: 1,
+    children: [/*#__PURE__*/_jsx(LegendEntry, {
+      color: theme.color.fgPositive,
+      label: "High Price",
+      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 1.2)
+    }), /*#__PURE__*/_jsx(LegendEntry, {
+      color: assets.btc.color,
+      label: "Actual Price",
+      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition])
+    }), /*#__PURE__*/_jsx(LegendEntry, {
+      color: theme.color.fgNegative,
+      label: "Low Price",
+      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 0.8)
+    })]
+  });
+});
+const PerformanceChart = /*#__PURE__*/memo(_ref10 => {
+  let {
+    timePeriod,
+    onScrubberPositionChange
+  } = _ref10;
+  const theme = useTheme();
+  const sparklineTimePeriodData = useMemo(() => {
+    return sparklineInteractiveData[timePeriod.id];
+  }, [timePeriod]);
+  const sparklineTimePeriodDataValues = useMemo(() => {
+    return sparklineTimePeriodData.map(d => d.value);
+  }, [sparklineTimePeriodData]);
+  const sparklineTimePeriodDataTimestamps = useMemo(() => {
+    return sparklineTimePeriodData.map(d => d.date);
+  }, [sparklineTimePeriodData]);
+  const formatPriceThousands = useCallback(price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000) + "k";
+  }, []);
+  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 getScrubberLabel = useCallback(d => formatDate(sparklineTimePeriodDataTimestamps[d]), [formatDate, sparklineTimePeriodDataTimestamps]);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
-    height: defaultChartHeight,
+    showYAxis: true,
+    areaType: "dotted",
+    height: 300,
+    inset: {
+      top: 52,
+      left: 0,
+      right: 0
+    },
+    onScrubberPositionChange: onScrubberPositionChange,
     series: [{
+      id: 'high',
+      data: sparklineTimePeriodDataValues.map(d => d * 1.2),
+      color: theme.color.fgPositive,
+      label: 'High Price'
+    }, {
       id: 'btc',
-      data: priceData,
-      color: assets.btc.color
+      data: sparklineTimePeriodDataValues,
+      color: assets.btc.color,
+      label: 'Actual Price'
+    }, {
+      id: 'low',
+      data: sparklineTimePeriodDataValues.map(d => d * 0.8),
+      color: theme.color.fgNegative,
+      label: 'Low Price'
     }],
+    yAxis: {
+      showGrid: true,
+      tickLabelFormatter: formatPriceThousands
+    },
     children: /*#__PURE__*/_jsx(Scrubber, {
-      ref: scrubberRef
+      idlePulse: true,
+      label: getScrubberLabel
     })
   });
-};
-const availabilityEvents = [{
-  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
-}];
-
-// Generate prediction probability data for three candidates
-const generatePredictionData = () => {
-  const now = new Date();
-  const baseTimestamp = now.getTime();
-
-  // Generate data for different time periods
-  const generateForPeriod = (points, intervalMs) => {
-    return Array.from({
-      length: points
-    }, (_, i) => {
-      const timestamp = new Date(baseTimestamp - (points - 1 - i) * intervalMs);
-
-      // Generate percentage values for three candidates that roughly sum to 100%
-      const candidate1 = 45 + Math.random() * 30; // 45-75%
-      const candidate2 = 15 + Math.random() * 20; // 15-35%
-      const candidate3 = Math.max(0, 100 - candidate1 - candidate2 - Math.random() * 5); // remainder
-
-      return {
-        date: timestamp,
-        candidate1: Math.round(candidate1 * 10) / 10,
-        candidate2: Math.round(candidate2 * 10) / 10,
-        candidate3: Math.round(candidate3 * 10) / 10
-      };
-    });
-  };
-  return {
-    hour: generateForPeriod(60, 60 * 1000),
-    // 60 points, 1 min apart
-    day: generateForPeriod(96, 15 * 60 * 1000),
-    // 96 points, 15 min apart
-    week: generateForPeriod(84, 2 * 60 * 60 * 1000),
-    // 84 points, 2 hours apart
-    month: generateForPeriod(120, 6 * 60 * 60 * 1000),
-    // 120 points, 6 hours apart
-    year: generateForPeriod(365, 24 * 60 * 60 * 1000),
-    // 365 points, 1 day apart
-    all: generateForPeriod(100, 7 * 24 * 60 * 60 * 1000) // 100 points, 1 week apart
-  };
-};
-const predictionData = generatePredictionData();
-const PredictionLegend = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref6, ref) => {
-  let {
-    data,
-    colors
-  } = _ref6;
-  const [selectedIndex, setSelectedIndex] = useState(data.candidate1.length - 1);
-  useImperativeHandle(ref, () => ({
-    updateSelectedIndex: index => {
-      setSelectedIndex(index);
-    }
-  }));
-  const candidate1Value = Math.round(data.candidate1[selectedIndex]);
-  const candidate2Value = Math.round(data.candidate2[selectedIndex]);
-  const candidate3Value = Math.round(data.candidate3[selectedIndex]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      alignItems: "center",
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(Box, {
-        style: {
-          width: 12,
-          height: 12,
-          borderRadius: 6,
-          backgroundColor: colors.pink
-        }
-      }), /*#__PURE__*/_jsx(Text, {
-        font: "label2",
-        children: "Noah Wyle"
-      }), /*#__PURE__*/_jsxs(Text, {
-        font: "label1",
-        children: [candidate1Value, "%"]
-      })]
-    }), /*#__PURE__*/_jsxs(HStack, {
-      alignItems: "center",
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(Box, {
-        style: {
-          width: 12,
-          height: 12,
-          borderRadius: 6,
-          backgroundColor: colors.teal
-        }
-      }), /*#__PURE__*/_jsx(Text, {
-        font: "label2",
-        children: "Adam Scott"
-      }), /*#__PURE__*/_jsxs(Text, {
-        font: "label1",
-        children: [candidate2Value, "%"]
-      })]
-    }), /*#__PURE__*/_jsxs(HStack, {
-      alignItems: "center",
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(Box, {
-        style: {
-          width: 12,
-          height: 12,
-          borderRadius: 6,
-          backgroundColor: colors.green
-        }
-      }), /*#__PURE__*/_jsx(Text, {
-        font: "label2",
-        children: "Pedro Pascal"
-      }), /*#__PURE__*/_jsxs(Text, {
-        font: "label1",
-        children: [candidate3Value, "%"]
-      })]
-    })]
-  });
-}));
-const PredictionChart = () => {
-  const theme = useTheme();
-
-  // Ref for the legend component
-  const legendRef = useRef(null);
-
-  // Define colors using spectrum
-  const colors = useMemo(() => ({
-    pink: "rgb(" + theme.spectrum.pink50 + ")",
-    teal: "rgb(" + theme.spectrum.teal50 + ")",
-    green: "rgb(" + theme.spectrum.green50 + ")"
-  }), [theme.spectrum]);
+});
+function Performance() {
   const tabs = useMemo(() => [{
     id: 'hour',
     label: '1H'
@@ -1733,231 +1148,305 @@ const PredictionChart = () => {
     label: 'All'
   }], []);
   const [timePeriod, setTimePeriod] = useState(tabs[0]);
-  const periodData = useMemo(() => {
-    return predictionData[timePeriod.id];
+  const [scrubberPosition, setScrubberPosition] = useState();
+  const sparklineTimePeriodData = useMemo(() => {
+    return sparklineInteractiveData[timePeriod.id];
   }, [timePeriod]);
-  const candidate1Data = useMemo(() => periodData.map(d => d.candidate1), [periodData]);
-  const candidate2Data = useMemo(() => periodData.map(d => d.candidate2), [periodData]);
-  const candidate3Data = useMemo(() => periodData.map(d => d.candidate3), [periodData]);
-  const timestamps = useMemo(() => periodData.map(d => d.date), [periodData]);
-
-  // Data object for the legend
-  const legendData = useMemo(() => ({
-    candidate1: candidate1Data,
-    candidate2: candidate2Data,
-    candidate3: candidate3Data
-  }), [candidate1Data, candidate2Data, candidate3Data]);
-
-  // Update legend via imperative ref when scrubber position changes
-  const onScrubberPositionChange = useCallback(dataIndex => {
-    var _legendRef$current;
-    const idx = dataIndex != null ? dataIndex : candidate1Data.length - 1;
-    (_legendRef$current = legendRef.current) == null || _legendRef$current.updateSelectedIndex(idx);
-  }, [candidate1Data.length]);
-
-  // Update legend when data length changes
-  useEffect(() => {
-    var _legendRef$current2;
-    (_legendRef$current2 = legendRef.current) == null || _legendRef$current2.updateSelectedIndex(candidate1Data.length - 1);
-  }, [candidate1Data.length]);
+  const sparklineTimePeriodDataValues = useMemo(() => {
+    return sparklineTimePeriodData.map(d => d.value);
+  }, [sparklineTimePeriodData]);
   const onPeriodChange = useCallback(period => {
     setTimePeriod(period || tabs[0]);
   }, [tabs]);
-  const scrubberLabel = useCallback(dataIndex => {
-    const date = timestamps[dataIndex];
-    const currentYear = new Date().getFullYear();
-    const shouldIncludeTime = timePeriod.id === 'hour' || timePeriod.id === 'day';
-    const dateOptions = _extends({
-      weekday: 'short',
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    style: {
+      marginLeft: -8,
+      marginRight: -8
+    },
+    children: [/*#__PURE__*/_jsx(PerformanceHeader, {
+      scrubberPosition: scrubberPosition,
+      sparklineTimePeriodDataValues: sparklineTimePeriodDataValues
+    }), /*#__PURE__*/_jsx(PerformanceChart, {
+      onScrubberPositionChange: setScrubberPosition,
+      timePeriod: timePeriod
+    }), /*#__PURE__*/_jsx(PeriodSelector, {
+      activeTab: timePeriod,
+      onChange: onPeriodChange,
+      tabs: tabs
+    })]
+  });
+}
+function MonotoneAssetPrice() {
+  const theme = useTheme();
+  const prices = sparklineInteractiveData.hour;
+  const fontMgr = useMemo(() => {
+    const fontProvider = Skia.TypefaceFontProvider.Make();
+    // Register system fonts if available, otherwise Skia will use defaults
+    return fontProvider;
+  }, []);
+  const priceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }), []);
+  const scrubberPriceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }), []);
+  const formatPrice = useCallback(price => {
+    return 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',
-      year: date.getFullYear() !== currentYear ? 'numeric' : undefined
-    }, shouldIncludeTime && {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
+      day: 'numeric'
     });
-    const dateStr = shouldIncludeTime ? date.toLocaleString('en-US', dateOptions) : date.toLocaleDateString('en-US', dateOptions);
-    return dateStr;
-  }, [timestamps, timePeriod.id]);
-  const chartOverviewLabel = useMemo(() => {
-    if (periodData.length === 0) return '';
-    const firstDate = periodData[0].date;
-    const lastDate = periodData[periodData.length - 1].date;
-    const currentYear = new Date().getFullYear();
-    const shouldIncludeTime = timePeriod.id === 'hour' || timePeriod.id === 'day';
-    const dateRangeOptions = _extends({
-      month: 'long',
-      day: 'numeric',
-      year: firstDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    }, shouldIncludeTime && {
+    const time = date.toLocaleTimeString('en-US', {
       hour: 'numeric',
       minute: '2-digit',
       hour12: true
     });
-    const startDateStr = shouldIncludeTime ? firstDate.toLocaleString('en-US', dateRangeOptions) : firstDate.toLocaleDateString('en-US', dateRangeOptions);
-    const endDateStr = shouldIncludeTime ? lastDate.toLocaleString('en-US', _extends({}, dateRangeOptions, {
-      year: lastDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    })) : lastDate.toLocaleDateString('en-US', _extends({}, dateRangeOptions, {
-      year: lastDate.getFullYear() !== currentYear ? 'numeric' : undefined
-    }));
-    return "Prediction chart, " + startDateStr + " to " + endDateStr + ". Swipe left or right to navigate data points.";
-  }, [periodData, timePeriod.id]);
-  return /*#__PURE__*/_jsx(Box, {
-    accessibilityLabel: chartOverviewLabel,
-    accessibilityLiveRegion: "polite",
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 4,
-      children: [/*#__PURE__*/_jsx(PredictionLegend, {
-        ref: legendRef,
-        colors: colors,
-        data: legendData
-      }), /*#__PURE__*/_jsx(Box, {
-        style: {
-          marginLeft: -16,
-          marginRight: -16
-        },
-        children: /*#__PURE__*/_jsx(LineChart, {
-          enableScrubbing: true,
-          showYAxis: true,
-          accessibilityLiveRegion: "polite",
-          height: defaultChartHeight,
-          inset: {
-            left: 0
-          },
-          onScrubberPositionChange: onScrubberPositionChange,
-          series: [{
-            id: 'candidate1',
-            data: candidate1Data,
-            color: colors.pink
-          }, {
-            id: 'candidate2',
-            data: candidate2Data,
-            color: colors.teal
-          }, {
-            id: 'candidate3',
-            data: candidate3Data,
-            color: colors.green
-          }],
-          xAxis: {
-            range: _ref7 => {
-              let {
-                min,
-                max
-              } = _ref7;
-              return {
-                min,
-                max: max - 32
-              };
-            }
-          },
-          yAxis: {
-            domain: {
-              min: 0,
-              max: 100
-            },
-            tickLabelFormatter: value => value + "%",
-            requestedTickCount: 5,
-            showGrid: true
-          },
-          children: /*#__PURE__*/_jsx(Scrubber, {
-            idlePulse: true,
-            label: scrubberLabel
-          })
-        })
-      }), /*#__PURE__*/_jsx(PeriodSelector, {
-        accessibilityLabel: "Select time period for prediction chart",
-        activeTab: timePeriod,
-        onChange: onPeriodChange,
-        tabs: tabs
-      })]
-    })
-  });
-};
-const AvailabilityChart = () => {
-  const theme = useTheme();
-  const [scrubIndex, setScrubIndex] = useState();
-  const ChartDefs = /*#__PURE__*/memo(_ref8 => {
-    var _rangeBounds$min, _rangeBounds$max, _yScale, _yScale2, _yScale3, _yScale4;
+    return dayOfWeek + ", " + monthDay + ", " + time;
+  }, []);
+  const scrubberLabel = useCallback(index => {
+    const price = scrubberPriceFormatter.format(prices[index].value);
+    const date = formatDate(prices[index].date);
+    const regularStyle = {
+      fontFamilies: ['Inter'],
+      fontSize: 14,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(theme.color.fgMuted)
+    };
+    const boldStyle = _extends({
+      fontFamilies: ['Inter']
+    }, regularStyle, {
+      fontStyle: {
+        weight: FontWeight.Bold
+      }
+    });
+    const builder = Skia.ParagraphBuilder.Make({
+      textAlign: TextAlign.Left
+    }, fontMgr);
+    builder.pushStyle(boldStyle);
+    builder.addText(price + " USD");
+    builder.pushStyle(regularStyle);
+    builder.addText(" " + date);
+    const para = builder.build();
+    para.layout(512);
+    return para;
+  }, [scrubberPriceFormatter, prices, formatDate, theme.color.fgMuted, fontMgr]);
+  const formatAxisLabelPrice = useCallback(price => {
+    return formatPrice(price);
+  }, [formatPrice]);
+
+  // Custom tick label component with offset positioning
+  const CustomYAxisTickLabel = useCallback(props => /*#__PURE__*/_jsx(DefaultAxisTickLabel, _extends({}, props, {
+    dx: 4,
+    dy: -12,
+    horizontalAlignment: "left"
+  })), []);
+  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
-      yellowThresholdPercentage = 85,
-      greenThresholdPercentage = 90
-    } = _ref8;
+      dataX,
+      dataY,
+      seriesId,
+      isIdle,
+      animate = true
+    } = _ref11;
     const {
-      getYScale,
-      getYAxis
+      getSeries,
+      getXSerializableScale,
+      getYSerializableScale
     } = useCartesianChartContext();
-    const yScale = getYScale();
-    const yAxis = getYAxis();
-    if (!yScale) return null;
-    const rangeBounds = yAxis == null ? void 0 : yAxis.domain;
-    const rangeMin = (_rangeBounds$min = rangeBounds == null ? void 0 : rangeBounds.min) != null ? _rangeBounds$min : 0;
-    const rangeMax = (_rangeBounds$max = rangeBounds == null ? void 0 : rangeBounds.max) != null ? _rangeBounds$max : 100;
+    const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+    const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
+    const animatedX = useSharedValue(0);
+    const animatedY = useSharedValue(0);
 
-    // Calculate the Y positions in the chart coordinate system
-    const yellowThresholdY = (_yScale = yScale(yellowThresholdPercentage)) != null ? _yScale : 0;
-    const greenThresholdY = (_yScale2 = yScale(greenThresholdPercentage)) != null ? _yScale2 : 0;
-    const minY = (_yScale3 = yScale(rangeMax)) != null ? _yScale3 : 0; // Top of chart (max value)
-    const maxY = (_yScale4 = yScale(rangeMin)) != null ? _yScale4 : 0; // Bottom of chart (min value)
+    // Calculate the target point position - project data to pixels
+    const targetPoint = useDerivedValue(() => {
+      if (!xScale || !yScale) return {
+        x: 0,
+        y: 0
+      };
+      return projectPointWithSerializableScale({
+        x: unwrapAnimatedValue(dataX),
+        y: unwrapAnimatedValue(dataY),
+        xScale,
+        yScale
+      });
+    }, [dataX, dataY, xScale, yScale]);
+    useAnimatedReaction(() => {
+      return {
+        point: targetPoint.value,
+        isIdle: unwrapAnimatedValue(isIdle)
+      };
+    }, (current, previous) => {
+      // When animation is disabled, on initial render, or when we are starting,
+      // continuing, or finishing scrubbing we should immediately transition
+      if (!animate || previous === null || !previous.isIdle || !current.isIdle) {
+        animatedX.value = current.point.x;
+        animatedY.value = current.point.y;
+        return;
+      }
+      animatedX.value = buildTransition(current.point.x, defaultTransition);
+      animatedY.value = buildTransition(current.point.y, defaultTransition);
+    }, [animate]);
 
-    // Calculate percentages based on actual chart positions
-    const yellowThreshold = (yellowThresholdY - minY) / (maxY - minY) * 100;
-    const greenThreshold = (greenThresholdY - minY) / (maxY - minY) * 100;
-    return /*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsxs(LinearGradient, {
-        gradientUnits: "userSpaceOnUse",
-        id: "availabilityGradient",
-        x1: "0%",
-        x2: "0%",
-        y1: minY,
-        y2: maxY,
-        children: [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: theme.color.fgPositive
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: greenThreshold + "%",
-          stopColor: theme.color.fgPositive
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: greenThreshold + "%",
-          stopColor: theme.color.fgWarning
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: yellowThreshold + "%",
-          stopColor: theme.color.fgWarning
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: yellowThreshold + "%",
-          stopColor: theme.color.fgNegative
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: theme.color.fgNegative
-        })]
-      })
+    // Create animated point using the animated values
+    const animatedPoint = useDerivedValue(() => {
+      return {
+        x: animatedX.value,
+        y: animatedY.value
+      };
+    }, [animatedX, animatedY]);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Circle, {
+        c: animatedPoint,
+        color: theme.color.bg,
+        r: 5
+      }), /*#__PURE__*/_jsx(Circle, {
+        c: animatedPoint,
+        color: theme.color.fg,
+        r: 5,
+        strokeWidth: 3,
+        style: "stroke"
+      })]
     });
   });
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showYAxis: true,
+    height: 200,
+    inset: {
+      top: 64
+    },
+    series: [{
+      id: 'btc',
+      data: prices.map(price => price.value),
+      color: theme.color.fg,
+      gradient: {
+        axis: 'x',
+        stops: _ref12 => {
+          let {
+            min
+          } = _ref12;
+          return [{
+            offset: min,
+            color: theme.color.fg,
+            opacity: 0
+          }, {
+            offset: 32,
+            color: theme.color.fg,
+            opacity: 1
+          }];
+        }
+      }
+    }],
+    xAxis: {
+      range: _ref13 => {
+        let {
+          max
+        } = _ref13;
+        return {
+          min: 96,
+          max
+        };
+      }
+    },
+    yAxis: {
+      position: 'left',
+      width: 0,
+      showGrid: true,
+      tickLabelFormatter: formatAxisLabelPrice,
+      TickLabelComponent: CustomYAxisTickLabel
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true,
+      labelElevated: true,
+      BeaconComponent: CustomScrubberBeacon,
+      LineComponent: SolidLine,
+      label: scrubberLabel
+    })
+  });
+}
+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
+  }], []);
   return /*#__PURE__*/_jsxs(CartesianChart, {
     enableScrubbing: true,
-    height: defaultChartHeight,
-    onScrubberPositionChange: setScrubIndex,
+    height: 200,
     series: [{
       id: 'availability',
       data: availabilityEvents.map(event => event.availability),
-      color: 'url(#availabilityGradient)'
+      gradient: {
+        stops: _ref14 => {
+          let {
+            min,
+            max
+          } = _ref14;
+          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: _ref9 => {
+      domain: _ref15 => {
         let {
           min,
           max
-        } = _ref9;
+        } = _ref15;
         return {
           min: Math.max(min - 2, 0),
           max: Math.min(max + 2, 100)
         };
       }
     },
-    children: [/*#__PURE__*/_jsx(ChartDefs, {}), /*#__PURE__*/_jsx(XAxis, {
+    children: [/*#__PURE__*/_jsx(XAxis, {
       showGrid: true,
       showLine: true,
       showTickMarks: true,
@@ -1970,279 +1459,490 @@ const AvailabilityChart = () => {
       tickLabelFormatter: value => value + "%"
     }), /*#__PURE__*/_jsx(Line, {
       curve: "stepAfter",
-      renderPoints: () => ({
+      points: props => _extends({}, props, {
         fill: theme.color.bg,
-        stroke: 'url(#availabilityGradient)',
-        strokeWidth: 2
+        stroke: props.fill
       }),
       seriesId: "availability"
     }), /*#__PURE__*/_jsx(Scrubber, {
-      overlayOffset: 10
+      hideOverlay: true
     })]
   });
-};
-const sampleData = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-const LineChartStories = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
+}
+function ForecastAssetPrice() {
+  const startYear = 2020;
+  const data = [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
+  const clipOffset = strokeWidth;
+  const axisFormatter = useCallback(dataIndex => {
+    return "" + (startYear + dataIndex);
+  }, [startYear]);
+  const HistoricalLineComponent = /*#__PURE__*/memo(props => {
+    const {
+      drawingArea,
+      getXScale
+    } = useCartesianChartContext();
+    const xScale = getXScale();
+    const historicalClipPath = useMemo(() => {
+      if (!xScale || !drawingArea) return null;
+      const currentX = xScale(currentIndex);
+      if (currentX === undefined) return null;
+
+      // Create clip path for historical data (left side)
+      const clip = Skia.Path.Make();
+      clip.addRect({
+        x: drawingArea.x - clipOffset,
+        y: drawingArea.y - clipOffset,
+        width: currentX + clipOffset - drawingArea.x,
+        height: drawingArea.height + clipOffset * 2
+      });
+      return clip;
+    }, [xScale, drawingArea]);
+    if (!historicalClipPath) return null;
+    return /*#__PURE__*/_jsx(Group, {
+      clip: historicalClipPath,
+      children: /*#__PURE__*/_jsx(SolidLine, _extends({
+        strokeWidth: strokeWidth
+      }, props))
+    });
+  });
+
+  // Since the solid and dotted line have different curves,
+  // we need two separate line components. Otherwise we could
+  // have one line component with SolidLine and DottedLine inside
+  // of it and two clipPaths.
+  const ForecastLineComponent = /*#__PURE__*/memo(props => {
+    const {
+      drawingArea,
+      getXScale
+    } = useCartesianChartContext();
+    const xScale = getXScale();
+    const forecastClipPath = useMemo(() => {
+      if (!xScale || !drawingArea) return null;
+      const currentX = xScale(currentIndex);
+      if (currentX === undefined) return null;
+
+      // Create clip path for forecast data (right side)
+      const clip = Skia.Path.Make();
+      clip.addRect({
+        x: currentX,
+        y: drawingArea.y - clipOffset,
+        width: drawingArea.x + drawingArea.width - currentX + clipOffset * 2,
+        height: drawingArea.height + clipOffset * 2
+      });
+      return clip;
+    }, [xScale, drawingArea]);
+    if (!forecastClipPath) return null;
+    return /*#__PURE__*/_jsx(Group, {
+      clip: forecastClipPath,
+      children: /*#__PURE__*/_jsx(DottedLine, _extends({
+        dashIntervals: [0, strokeWidth * 2],
+        strokeWidth: strokeWidth
+      }, props))
+    });
+  });
+  const CustomScrubber = /*#__PURE__*/memo(() => {
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const idleScrubberOpacity = useDerivedValue(() => scrubberPosition.value === undefined ? 1 : 0, [scrubberPosition]);
+    const scrubberOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
+
+    // Fade in animation for the Scrubber
+    const fadeInOpacity = useSharedValue(0);
+    useEffect(() => {
+      fadeInOpacity.value = withDelay(350, withTiming(1, {
+        duration: 150
+      }));
+    }, [fadeInOpacity]);
+    return /*#__PURE__*/_jsxs(Group, {
+      opacity: fadeInOpacity,
+      children: [/*#__PURE__*/_jsx(Group, {
+        opacity: scrubberOpacity,
+        children: /*#__PURE__*/_jsx(Scrubber, {
+          hideOverlay: true
+        })
+      }), /*#__PURE__*/_jsx(Group, {
+        opacity: idleScrubberOpacity,
+        children: /*#__PURE__*/_jsx(DefaultScrubberBeacon, {
+          isIdle: true,
+          dataX: currentIndex,
+          dataY: data[currentIndex],
+          seriesId: "price"
+        })
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: 200,
+    series: [{
+      id: 'price',
+      data,
+      color: assets.btc.color
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      LineComponent: HistoricalLineComponent,
+      curve: "linear",
+      seriesId: "price"
+    }), /*#__PURE__*/_jsx(Line, {
+      LineComponent: ForecastLineComponent,
+      curve: "monotone",
+      seriesId: "price",
+      type: "dotted"
+    }), /*#__PURE__*/_jsx(XAxis, {
+      position: "bottom",
+      requestedTickCount: 3,
+      tickLabelFormatter: axisFormatter
+    }), /*#__PURE__*/_jsx(CustomScrubber, {})]
+  });
+}
+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(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: exampleThumbnail,
+      title: "Line Chart Card",
       children: /*#__PURE__*/_jsx(LineChart, {
-        enableScrubbing: true,
         showArea: true,
-        showYAxis: true,
-        curve: "monotone",
-        height: defaultChartHeight,
-        series: [{
-          id: 'prices',
-          data: sampleData
-        }],
-        yAxis: {
-          showGrid: true
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Simple",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        curve: "monotone",
-        height: defaultChartHeight,
-        series: [{
-          id: 'prices',
-          data: sampleData
-        }]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Gain/Loss",
-      children: /*#__PURE__*/_jsx(GainLossChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "BTC Price Chart",
-      children: /*#__PURE__*/_jsx(BTCPriceChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Price Chart",
-      children: /*#__PURE__*/_jsx(PriceChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Asset Price Dotted",
-      children: /*#__PURE__*/_jsx(AssetPriceDotted, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Multiple Series",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        enableScrubbing: true,
-        showXAxis: true,
-        showYAxis: true,
-        height: defaultChartHeight,
-        series: [{
-          id: 'pageViews',
-          data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
-          label: 'Page Views',
-          color: theme.color.accentBoldBlue,
-          curve: 'natural'
-        }, {
-          id: 'uniqueVisitors',
-          data: [4000, 3000, 2000, 2780, 1890, 2390, 3490],
-          label: 'Unique Visitors',
-          color: theme.color.accentBoldGreen,
-          curve: 'natural'
-        }],
-        xAxis: {
-          data: ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
-          scaleType: 'band'
-        },
-        yAxis: {
-          domain: {
-            min: 0
-          },
-          showGrid: true,
-          tickLabelFormatter: value => value.toLocaleString()
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Points",
-      children: /*#__PURE__*/_jsxs(CartesianChart, {
-        height: defaultChartHeight,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-        }],
-        children: [/*#__PURE__*/_jsx(Area, {
-          curve: "monotone",
-          fill: "rgb(" + theme.spectrum.blue5 + ")",
-          seriesId: "prices"
-        }), /*#__PURE__*/_jsx(Line, {
-          curve: "monotone",
-          renderPoints: _ref0 => {
-            let {
-                dataX
-              } = _ref0,
-              props = _objectWithoutPropertiesLoose(_ref0, _excluded4);
-            return [4, 6, 7, 9, 10].includes(dataX) ? _extends({}, props, {
-              strokeWidth: 2,
-              stroke: theme.color.bg,
-              radius: 5,
-              onClick: () => alert('You have clicked a key market shift!')
-            }) : false;
-          },
-          seriesId: "prices"
-        })]
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries
       })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Data Formats",
+    }), /*#__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, {
-        enableScrubbing: true,
         showArea: true,
-        showXAxis: true,
-        showYAxis: true,
-        curve: "natural",
-        height: defaultChartHeight,
-        renderPoints: () => true,
-        series: [{
-          id: 'line',
-          data: [2, 5.5, 2, 8.5, 1.5, 5]
-        }],
-        xAxis: {
-          data: [1, 2, 3, 5, 8, 10],
-          showLine: true,
-          showTickMarks: true,
-          showGrid: true
-        },
-        yAxis: {
-          domain: {
-            min: 0
-          },
-          position: 'left',
-          showLine: true,
-          showTickMarks: true,
-          showGrid: true
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries
       })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Bitcoin Chart with Scrubber Beacon",
-      children: /*#__PURE__*/_jsx(BitcoinChartWithScrubberBeacon, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Scrubber with Imperative Handle",
-      children: /*#__PURE__*/_jsx(ScrubberWithImperativeHandle, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Asset Price",
-      children: /*#__PURE__*/_jsx(AssetPrice, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Line Styles",
-      children: /*#__PURE__*/_jsx(LineStyles, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Chart Scale",
-      children: /*#__PURE__*/_jsx(ChartScale, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Color Shift Chart",
-      children: /*#__PURE__*/_jsx(ColorShiftChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Price Chart",
-      children: /*#__PURE__*/_jsx(PriceChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Forecast Chart",
-      children: /*#__PURE__*/_jsx(ForecastChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Period Selector",
-      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Live Asset Price",
-      children: /*#__PURE__*/_jsx(LiveAssetPrice, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Availability Chart",
-      children: /*#__PURE__*/_jsx(AvailabilityChart, {})
-    })]
-  });
-};
-const AssetPriceScreen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Scrubber with Imperative Handle",
-      children: /*#__PURE__*/_jsx(ScrubberWithImperativeHandle, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Basic",
+    }), /*#__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, {
-        enableScrubbing: true,
         showArea: true,
-        showYAxis: true,
-        curve: "monotone",
-        height: defaultChartHeight,
-        series: [{
-          id: 'prices',
-          data: sampleData
-        }],
-        yAxis: {
-          showGrid: true
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Simple",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        curve: "monotone",
-        height: defaultChartHeight,
-        series: [{
-          id: 'prices',
-          data: sampleData
-        }]
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries,
+        showXAxis: false,
+        showYAxis: false
       })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Data Formats",
+    }), /*#__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, {
-        enableScrubbing: true,
         showArea: true,
-        showXAxis: true,
-        showYAxis: true,
-        curve: "natural",
-        height: defaultChartHeight,
-        series: [{
-          id: 'line',
-          data: [2, 5.5, 2, 8.5, 1.5, 5]
-        }],
-        xAxis: {
-          data: [1, 2, 3, 5, 8, 10],
-          showLine: true,
-          showTickMarks: true,
-          showGrid: true
-        },
-        yAxis: {
-          domain: {
-            min: 0
-          },
-          position: 'left',
-          showLine: true,
-          showTickMarks: true,
-          showGrid: true
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
+        accessibilityLabel: "Price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries2,
+        showXAxis: false,
+        showYAxis: false
       })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Color Shift Chart",
-      children: /*#__PURE__*/_jsx(ColorShiftChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Asset Price Dotted",
-      children: /*#__PURE__*/_jsx(AssetPriceDotted, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Asset Price Multiple Dotted",
-      children: /*#__PURE__*/_jsx(AssetPriceMultipleDotted, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Asset Price Dotted (Old)",
-      children: /*#__PURE__*/_jsx(AssetPriceDottedNonMemoized, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "BTC Price Chart",
-      children: /*#__PURE__*/_jsx(BTCPriceChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Gain/Loss",
-      children: /*#__PURE__*/_jsx(GainLossChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Live Asset Price",
-      children: /*#__PURE__*/_jsx(LiveAssetPrice, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Prediction Chart",
-      children: /*#__PURE__*/_jsx(PredictionChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Availability Chart",
-      children: /*#__PURE__*/_jsx(AvailabilityChart, {})
     })]
   });
-};
-export default AssetPriceScreen;
+}
+function ExampleNavigator() {
+  const theme = useTheme();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      showArea: true,
+      height: 200,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+      }]
+    })
+  }, {
+    title: 'Multiple Lines',
+    component: /*#__PURE__*/_jsx(MultipleLine, {})
+  }, {
+    title: 'Data Format',
+    component: /*#__PURE__*/_jsx(DataFormat, {})
+  }, {
+    title: 'Live Updates',
+    component: /*#__PURE__*/_jsx(LiveUpdates, {})
+  }, {
+    title: 'Missing Data',
+    component: /*#__PURE__*/_jsx(MissingData, {})
+  }, {
+    title: 'Empty State',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      height: 200,
+      series: [{
+        id: 'line',
+        color: "rgb(" + theme.spectrum.gray50 + ")",
+        data: [1, 1],
+        showArea: true
+      }],
+      yAxis: {
+        domain: {
+          min: -1,
+          max: 3
+        }
+      }
+    })
+  }, {
+    title: 'Scales',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      showArea: true,
+      showYAxis: true,
+      height: 200,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+      }],
+      yAxis: {
+        scaleType: 'log',
+        showGrid: true,
+        ticks: [1, 10, 100]
+      }
+    })
+  }, {
+    title: 'Interaction',
+    component: /*#__PURE__*/_jsx(Interaction, {})
+  }, {
+    title: 'Points',
+    component: /*#__PURE__*/_jsx(Points, {})
+  }, {
+    title: 'Transitions',
+    component: /*#__PURE__*/_jsx(Transitions, {})
+  }, {
+    title: 'Basic Accessible',
+    component: /*#__PURE__*/_jsx(BasicAccessible, {})
+  }, {
+    title: 'Styling Axes',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      showArea: true,
+      showXAxis: true,
+      showYAxis: true,
+      height: 200,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+      }],
+      xAxis: {
+        showGrid: true,
+        showLine: true,
+        showTickMarks: true,
+        tickLabelFormatter: dataX => "Day " + dataX
+      },
+      yAxis: {
+        showGrid: true,
+        showLine: true,
+        showTickMarks: true
+      }
+    })
+  }, {
+    title: 'Gradients',
+    component: /*#__PURE__*/_jsx(Gradients, {})
+  }, {
+    title: 'Gain/Loss',
+    component: /*#__PURE__*/_jsx(GainLossChart, {})
+  }, {
+    title: 'Styling Lines',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      height: 200,
+      series: [{
+        id: 'top',
+        data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38]
+      }, {
+        id: 'upperMiddle',
+        data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+        color: '#ef4444',
+        type: 'dotted'
+      }, {
+        id: 'lowerMiddle',
+        data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+        color: '#f59e0b',
+        curve: 'natural',
+        gradient: {
+          axis: 'x',
+          stops: [{
+            offset: 0,
+            color: '#E3D74D'
+          }, {
+            offset: 9,
+            color: '#F7931A'
+          }]
+        },
+        strokeWidth: 6
+      }, {
+        id: 'bottom',
+        data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
+        color: '#800080',
+        curve: 'step',
+        AreaComponent: DottedArea,
+        showArea: true
+      }]
+    })
+  }, {
+    title: 'Styling Reference Lines',
+    component: /*#__PURE__*/_jsxs(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      height: 200,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        color: theme.color.fgPositive
+      }],
+      xAxis: {
+        // Give space before the end of the chart for the scrubber
+        range: _ref16 => {
+          let {
+            min,
+            max
+          } = _ref16;
+          return {
+            min,
+            max: max - 24
+          };
+        }
+      },
+      children: [/*#__PURE__*/_jsx(ReferenceLine, {
+        LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+          dashIntervals: [0, 16],
+          strokeWidth: 3
+        })),
+        dataY: 10,
+        stroke: theme.color.fg
+      }), /*#__PURE__*/_jsx(Scrubber, {})]
+    })
+  }, {
+    title: 'High/Low Price',
+    component: /*#__PURE__*/_jsx(HighLowPrice, {})
+  }, {
+    title: 'Styling Scrubber',
+    component: /*#__PURE__*/_jsx(StylingScrubber, {})
+  }, {
+    title: 'Compact',
+    component: /*#__PURE__*/_jsx(Compact, {})
+  }, {
+    title: 'Asset Price With Dotted Area',
+    component: /*#__PURE__*/_jsx(AssetPriceWithDottedArea, {})
+  }, {
+    title: 'Performance',
+    component: /*#__PURE__*/_jsx(Performance, {})
+  }, {
+    title: 'Monotone Asset Price',
+    component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
+  }, {
+    title: 'Service Availability',
+    component: /*#__PURE__*/_jsx(ServiceAvailability, {})
+  }, {
+    title: 'Forecast Asset Price',
+    component: /*#__PURE__*/_jsx(ForecastAssetPrice, {})
+  }, {
+    title: 'In DataCard',
+    component: /*#__PURE__*/_jsx(DataCardWithLineChart, {})
+  }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
+  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__*/_jsx(Box, {
+        padding: 1,
+        children: currentExample.component
+      })]
+    })
+  });
+}
+export default ExampleNavigator;