@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.1

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

@@ -0,0 +1,2248 @@
+const _excluded = ["label"],
+  _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; }
+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';
+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 { useTheme } from '@coinbase/cds-mobile';
+import { Button } from '@coinbase/cds-mobile/buttons';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { RemoteImage } from '@coinbase/cds-mobile/media';
+import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
+import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
+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 { 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 { 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];
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    renderPoints: () => true,
+    series: [{
+      id: 'monthly-growth',
+      data: chartData,
+      label: 'Monthly Growth',
+      color: '#2ca02c'
+    }],
+    yAxis: {
+      requestedTickCount: 2,
+      tickLabelFormatter: value => "$" + value,
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+export const BasicLineChartWithPoints = () => {
+  const chartData = [65, 78, 45, 88, 92, 73, 69];
+  return /*#__PURE__*/_jsxs(LineChart, {
+    showYAxis: true,
+    height: defaultChartHeight,
+    renderPoints: () => true,
+    series: [{
+      id: 'monthly-growth',
+      data: chartData,
+      label: 'Monthly Growth',
+      color: '#2ca02c'
+    }],
+    yAxis: {
+      requestedTickCount: 2,
+      tickLabelFormatter: value => "$" + value,
+      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
+      },
+      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
+    })]
+  });
+};
+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', {
+      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', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(Math.abs(priceChange));
+    const formattedPercentChange = Math.abs(percentChange).toFixed(2) + "%";
+    return {
+      direction: trendDirection,
+      text: formattedPriceChange + " (" + formattedPercentChange + ")"
+    };
+  }, [highlightedItemIndex, isHovering]);
+  return /*#__PURE__*/_jsx(VStack, {
+    gap: 2,
+    children: /*#__PURE__*/_jsxs(LineChart, {
+      showArea: true,
+      height: defaultChartHeight,
+      inset: {
+        top: 4,
+        bottom: 8,
+        left: 0,
+        right: 0
+      },
+      onScrubberPositionChange: onScrubberPositionChange,
+      series: [{
+        id: 'price',
+        data: parsedPrices,
+        color: assets.btc.color
+      }],
+      xAxis: {
+        domain: {
+          min: 0,
+          max: pricePointsPerHour * 24
+        }
+      },
+      children: [/*#__PURE__*/_jsx(XAxis, {
+        tickLabelFormatter: index => indexToTime(index).slice(0, -3),
+        ticks: index => index % (12 * 6) === 0
+      }), /*#__PURE__*/_jsx(ReferenceLine, {
+        dataY: parsedPrices[0]
+      })]
+    })
+  });
+};
+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,
+    series: [{
+      id: 'top',
+      data: topChartData
+    }, {
+      id: 'upperMiddle',
+      data: upperMiddleChartData,
+      color: '#ef4444'
+    }, {
+      id: 'lowerMiddle',
+      data: lowerMiddleChartData,
+      color: '#f59e0b'
+    }, {
+      id: 'bottom',
+      data: bottomChartData,
+      color: '#800080'
+    }],
+    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"
+    })]
+  });
+};
+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]);
+  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
+        })]
+      })
+    }), /*#__PURE__*/_jsx(LineChart, {
+      showArea: true,
+      showYAxis: true,
+      curve: "natural",
+      height: defaultChartHeight,
+      series: [{
+        id: 'growth',
+        data: exponentialData,
+        color: '#10b981'
+      }],
+      yAxis: {
+        scaleType: selectedScaleType == null ? void 0 : selectedScaleType.id,
+        requestedTickCount: 5,
+        tickLabelFormatter: value => value.toLocaleString(),
+        showGrid: true,
+        width: 70
+      }
+    })]
+  });
+};
+export const ColorShiftChart = () => {
+  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]);
+
+  // 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;
+  };
+  const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0
+  }).format(value), []);
+  const solidColor = "url(#" + gradientId + "-solid)";
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: defaultChartHeight,
+    inset: {
+      top: 1.5,
+      bottom: 1.5,
+      left: 0,
+      right: 0
+    },
+    series: [{
+      id: 'prices',
+      data: data,
+      color: solidColor
+    }],
+    children: [/*#__PURE__*/_jsx(ChartDefs, {}), /*#__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",
+      seriesId: "prices",
+      stroke: solidColor,
+      strokeWidth: 3
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })]
+  });
+};
+const BitcoinChartWithScrubberBeacon = () => {
+  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 formatPercentChange = price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'percent',
+      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, {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0.80)'
+      },
+      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
+        },
+        series: [{
+          id: 'btcPrice',
+          data: prices,
+          color: assets.btc.color
+        }],
+        width: "100%",
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })]
+    })
+  });
+};
+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();
+      },
+      children: "Pulse Beacons"
+    })]
+  });
+};
+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);
+  }, []);
+  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 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, {
+          justifyContent: "center",
+          children: /*#__PURE__*/_jsx(RemoteImage, {
+            shape: "circle",
+            size: "xxl",
+            source: assets.btc.imageUrl
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(CartesianChart, {
+        enableScrubbing: true,
+        height: 200,
+        inset: {
+          bottom: 0,
+          right: 3,
+          left: 0,
+          top: 6
+        },
+        onScrubberPositionChange: onScrubberPositionChange,
+        series: [{
+          id: 'price',
+          data: currentData,
+          color: 'black'
+        }],
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Line, {
+          showArea: true,
+          AreaComponent: AreaComponent,
+          seriesId: "price",
+          strokeWidth: 3
+        }), /*#__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
+        })
+      })]
+    })
+  });
+};
+const LiveAssetPrice = () => {
+  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$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]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'btc',
+      data: priceData,
+      color: assets.btc.color
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      ref: scrubberRef
+    })
+  });
+};
+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]);
+  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 periodData = useMemo(() => {
+    return predictionData[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 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',
+      month: 'short',
+      day: 'numeric',
+      year: date.getFullYear() !== currentYear ? 'numeric' : undefined
+    }, shouldIncludeTime && {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+    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 && {
+      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;
+    let {
+      yellowThresholdPercentage = 85,
+      greenThresholdPercentage = 90
+    } = _ref8;
+    const {
+      getYScale,
+      getYAxis
+    } = 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;
+
+    // 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 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
+        })]
+      })
+    });
+  });
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: defaultChartHeight,
+    onScrubberPositionChange: setScrubIndex,
+    series: [{
+      id: 'availability',
+      data: availabilityEvents.map(event => event.availability),
+      color: 'url(#availabilityGradient)'
+    }],
+    xAxis: {
+      data: availabilityEvents.map(event => event.date.getTime())
+    },
+    yAxis: {
+      domain: _ref9 => {
+        let {
+          min,
+          max
+        } = _ref9;
+        return {
+          min: Math.max(min - 2, 0),
+          max: Math.min(max + 2, 100)
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(ChartDefs, {}), /*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      tickLabelFormatter: value => new Date(value).toLocaleDateString()
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      position: "left",
+      tickLabelFormatter: value => value + "%"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "stepAfter",
+      renderPoints: () => ({
+        fill: theme.color.bg,
+        stroke: 'url(#availabilityGradient)',
+        strokeWidth: 2
+      }),
+      seriesId: "availability"
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      overlayOffset: 10
+    })]
+  });
+};
+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",
+      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"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Data Formats",
+      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, {})
+      })
+    }), /*#__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",
+      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: "Data Formats",
+      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, {})
+      })
+    }), /*#__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;