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

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

@@ -0,0 +1,2372 @@
+const _excluded = ["dataX", "dataY"],
+  _excluded2 = ["label"],
+  _excluded3 = ["style"],
+  _excluded4 = ["x", "y", "width", "height", "originY", "dataX"],
+  _excluded5 = ["seriesId", "color", "label"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { 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, 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 { Avatar, RemoteImage } from '@coinbase/cds-mobile/media';
+import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
+import { Pressable } from '@coinbase/cds-mobile/system';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { Circle, FontWeight, Group, Line as SkiaLine, Rect, Skia, TextAlign } from '@shopify/react-native-skia';
+import { Area, DottedArea } from '../../area';
+import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
+import { BarPlot } from '../../bar';
+import { CartesianChart } from '../../CartesianChart';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
+import { Point } from '../../point';
+import { DefaultScrubberBeacon, DefaultScrubberBeaconLabel, DefaultScrubberLabel, Scrubber } from '../../scrubber';
+import { buildTransition, defaultTransition, getLineData, getPointOnSerializableScale, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
+import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function MultipleLine() {
+  const theme = useTheme();
+  const [scrubberPosition, setScrubberPosition] = useState();
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
+  const scrubberAccessibilityLabel = useCallback(index => {
+    return pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.";
+  }, [pages, pageViews, uniqueVisitors]);
+  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+  }).format(value), []);
+  const accessibilityLabel = useMemo(() => {
+    if (scrubberPosition !== undefined) {
+      return scrubberAccessibilityLabel(scrubberPosition);
+    }
+    return chartAccessibilityLabel;
+  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: accessibilityLabel,
+    height: 200,
+    onScrubberPositionChange: setScrubberPosition,
+    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, {})
+  });
+}
+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,
+    accessibilityLabel: accessibilityLabel,
+    curve: "natural",
+    height: 200,
+    inset: {
+      top: 16,
+      right: 16,
+      bottom: 0,
+      left: 0
+    },
+    onScrubberPositionChange: setScrubberPosition,
+    series: [{
+      id: 'line',
+      data: yData
+    }],
+    xAxis: {
+      data: xData,
+      showLine: true,
+      showTickMarks: true,
+      showGrid: true
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      position: 'left',
+      showLine: true,
+      showTickMarks: true,
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+}
+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;
+      },
+      seriesId: "prices"
+    })]
+  });
+}
+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',
+      maximumFractionDigits: 0
+    }).format(value), []);
+    const valueAtIndexFormatter = useCallback(dataIndex => new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(data[dataIndex]), [data]);
+    const lineGradient = {
+      stops: [{
+        offset: 0,
+        color: negativeColor
+      }, {
+        offset: 0,
+        color: positiveColor
+      }]
+    };
+    return /*#__PURE__*/_jsxs(CartesianChart, {
+      enableScrubbing: true,
+      height: 200,
+      inset: {
+        top: 32,
+        bottom: 32,
+        left: 16,
+        right: 16
+      },
+      series: [{
+        id: 'prices',
+        data: data,
+        gradient: lineGradient
+      }],
+      yAxis: {
+        domain: {
+          min: -domainLimit,
+          max: domainLimit
+        }
+      },
+      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
+      })]
+    });
+  }
+  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: 'prices',
+      data: data
+    }],
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+}
+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: 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, {
+      points: true,
+      showYAxis: true,
+      height: 200,
+      series: [{
+        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: {
+        showGrid: true
+      }
+    })]
+  });
+}
+function GainLossChart() {
+  const theme = useTheme();
+  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), []);
+
+  // Line gradient: hard color change at 0 (full opacity for line)
+  const lineGradient = {
+    stops: [{
+      offset: 0,
+      color: negativeColor
+    }, {
+      offset: 0,
+      color: positiveColor
+    }]
+  };
+  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: 200,
+    series: [{
+      id: 'prices',
+      data: data,
+      gradient: lineGradient
+    }],
+    children: [/*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      requestedTickCount: 2,
+      tickLabelFormatter: tickLabelFormatter
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      AreaComponent: GradientDottedArea,
+      seriesId: "prices",
+      strokeWidth: 3
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })]
+  });
+}
+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 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 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
+    });
+  }, []);
+  const CompactChart = /*#__PURE__*/memo(_ref6 => {
+    let {
+      data,
+      showArea,
+      color,
+      referenceY
+    } = _ref6;
+    return /*#__PURE__*/_jsx(Box, {
+      style: {
+        padding: 1
+      },
+      children: /*#__PURE__*/_jsx(LineChart, _extends({}, dimensions, {
+        enableScrubbing: false,
+        inset: 0,
+        series: [{
+          id: 'btc',
+          data,
+          color
+        }],
+        showArea: showArea,
+        children: /*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: referenceY
+        })
+      }))
+    });
+  });
+  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
+      },
+      subdetail: subdetail
+    });
+  });
+  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 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 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: "xl",
+            source: assets.btc.imageUrl
+          })
+        }),
+        title: /*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Bitcoin"
+        })
+      }), /*#__PURE__*/_jsx(LineChart, {
+        enableScrubbing: true,
+        showArea: true,
+        areaType: "dotted",
+        height: 200,
+        inset: {
+          top: 52
+        },
+        series: [{
+          id: 'btc',
+          data: sparklineTimePeriodDataValues,
+          color: assets.btc.color
+        }],
+        children: /*#__PURE__*/_jsx(Scrubber, {
+          idlePulse: true,
+          labelElevated: true,
+          label: d => {
+            const date = formatDate(sparklineTimePeriodDataTimestamps[d]);
+            const price = formatPrice(sparklineTimePeriodDataValues[d]);
+            const regularStyle = {
+              fontFamilies: ['Inter'],
+              fontSize: 14,
+              fontStyle: {
+                weight: FontWeight.Normal
+              },
+              color: Skia.Color(theme.color.fgMuted)
+            };
+            const boldStyle = _extends({
+              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
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsx(AssetPriceDotted, {});
+}
+const LegendDot = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(Box, _extends({
+    borderRadius: 1000,
+    height: 10,
+    width: 10
+  }, props));
+});
+const LegendItem = /*#__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 shownPosition = scrubberPosition !== undefined ? scrubberPosition : sparklineTimePeriodDataValues.length - 1;
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 1,
+    paddingX: 1,
+    children: [/*#__PURE__*/_jsx(LegendItem, {
+      color: theme.color.fgPositive,
+      label: "High Price",
+      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 1.2)
+    }), /*#__PURE__*/_jsx(LegendItem, {
+      color: assets.btc.color,
+      label: "Actual Price",
+      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition])
+    }), /*#__PURE__*/_jsx(LegendItem, {
+      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,
+    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: 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, {
+      idlePulse: true,
+      label: getScrubberLabel
+    })
+  });
+});
+function Performance() {
+  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 [scrubberPosition, setScrubberPosition] = useState();
+  const sparklineTimePeriodData = useMemo(() => {
+    return sparklineInteractiveData[timePeriod.id];
+  }, [timePeriod]);
+  const sparklineTimePeriodDataValues = useMemo(() => {
+    return sparklineTimePeriodData.map(d => d.value);
+  }, [sparklineTimePeriodData]);
+  const onPeriodChange = useCallback(period => {
+    setTimePeriod(period || tabs[0]);
+  }, [tabs]);
+  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
+    })]
+  });
+}
+const candlestickStockData = btcCandles.slice(0, 90).reverse();
+const CandlesticksHeader = /*#__PURE__*/memo(_ref11 => {
+  let {
+    currentIndex
+  } = _ref11;
+  const formatPrice = useCallback(price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(parseFloat(price));
+  }, []);
+  const formatThousandsPriceNumber = useCallback(price => {
+    const formattedPrice = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000);
+    return formattedPrice + "k";
+  }, []);
+  const currentText = useMemo(() => {
+    if (currentIndex !== undefined) {
+      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
+    }
+    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
+  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
+  return /*#__PURE__*/_jsx(Text, {
+    "aria-live": "polite",
+    font: "headline",
+    children: currentText
+  });
+});
+const CandlesticksChart = /*#__PURE__*/memo(_ref12 => {
+  let {
+    infoTextId,
+    onScrubberPositionChange
+  } = _ref12;
+  const theme = useTheme();
+  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
+  const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+    strokeWidth: 1
+  })));
+
+  // Custom line component that renders a rect to highlight the entire bandwidth
+  const BandwidthHighlight = /*#__PURE__*/memo(_ref13 => {
+    let {
+      stroke
+    } = _ref13;
+    const {
+      getXSerializableScale,
+      drawingArea
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+    const rectWidth = useMemo(() => {
+      if (xScale !== undefined && xScale.type === 'band') {
+        return xScale.bandwidth;
+      }
+      return 0;
+    }, [xScale]);
+    const xPos = useDerivedValue(() => {
+      const position = unwrapAnimatedValue(scrubberPosition);
+      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
+      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
+    }, [scrubberPosition, xScale]);
+    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
+    return /*#__PURE__*/_jsx(Rect, {
+      color: stroke,
+      height: drawingArea.height,
+      opacity: opacity,
+      width: rectWidth,
+      x: xPos,
+      y: drawingArea.y
+    });
+  });
+  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
+  const CandlestickBarComponent = /*#__PURE__*/memo(_ref14 => {
+    var _yScale, _yScale2;
+    let {
+        x,
+        y,
+        width,
+        height,
+        dataX
+      } = _ref14,
+      props = _objectWithoutPropertiesLoose(_ref14, _excluded4);
+    const {
+      getYScale
+    } = useCartesianChartContext();
+    const yScale = getYScale();
+    const wickX = x + width / 2;
+    const timePeriodValue = candlestickStockData[dataX];
+    const open = parseFloat(timePeriodValue.open);
+    const close = parseFloat(timePeriodValue.close);
+    const bullish = open < close;
+    const theme = useTheme();
+    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
+    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
+    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
+    const bodyHeight = Math.abs(openY - closeY);
+    const bodyY = openY < closeY ? openY : closeY;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SkiaLine, {
+        color: color,
+        p1: {
+          x: wickX,
+          y
+        },
+        p2: {
+          x: wickX,
+          y: y + height
+        },
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Rect, {
+        color: color,
+        height: bodyHeight,
+        width: width,
+        x: x,
+        y: bodyY
+      })]
+    });
+  });
+  const formatThousandsPriceNumber = useCallback(price => {
+    const formattedPrice = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000);
+    return formattedPrice + "k";
+  }, []);
+  const formatTime = useCallback(index => {
+    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
+    const ts = parseInt(candlestickStockData[index].start);
+    return new Date(ts * 1000).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    animate: false,
+    "aria-labelledby": infoTextId,
+    borderRadius: 0,
+    height: 150,
+    inset: {
+      top: 8,
+      bottom: 8,
+      left: 0,
+      right: 0
+    },
+    onScrubberPositionChange: onScrubberPositionChange,
+    series: [{
+      id: 'stock-prices',
+      data: candlesData
+    }],
+    xAxis: {
+      scaleType: 'band'
+    },
+    yAxis: {
+      domain: {
+        min
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      tickLabelFormatter: formatTime
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      GridLineComponent: ThinSolidLine,
+      tickLabelFormatter: formatThousandsPriceNumber,
+      width: 40
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true,
+      LineComponent: BandwidthHighlight,
+      lineStroke: theme.color.fgMuted,
+      seriesIds: []
+    }), /*#__PURE__*/_jsx(BarPlot, {
+      BarComponent: CandlestickBarComponent,
+      BarStackComponent: _ref15 => {
+        let {
+          children
+        } = _ref15;
+        return /*#__PURE__*/_jsx("g", {
+          children: children
+        });
+      }
+    })]
+  });
+});
+function Candlesticks() {
+  const infoTextId = useId();
+  const [currentIndex, setCurrentIndex] = useState();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
+      currentIndex: currentIndex
+    }), /*#__PURE__*/_jsx(CandlesticksChart, {
+      infoTextId: infoTextId,
+      onScrubberPositionChange: setCurrentIndex
+    })]
+  });
+}
+function MonotoneAssetPrice() {
+  const theme = useTheme();
+  const prices = sparklineInteractiveData.hour;
+  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'
+    });
+    const time = date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+    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(_ref16 => {
+    let {
+      dataX,
+      dataY,
+      seriesId,
+      isIdle,
+      animate = true
+    } = _ref16;
+    const {
+      getSeries,
+      getXSerializableScale,
+      getYSerializableScale
+    } = useCartesianChartContext();
+    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 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]);
+
+    // 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: _ref17 => {
+          let {
+            min
+          } = _ref17;
+          return [{
+            offset: min,
+            color: theme.color.fg,
+            opacity: 0
+          }, {
+            offset: 32,
+            color: theme.color.fg,
+            opacity: 1
+          }];
+        }
+      }
+    }],
+    xAxis: {
+      range: _ref18 => {
+        let {
+          max
+        } = _ref18;
+        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: 200,
+    series: [{
+      id: 'availability',
+      data: availabilityEvents.map(event => event.availability),
+      gradient: {
+        stops: _ref19 => {
+          let {
+            min,
+            max
+          } = _ref19;
+          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: _ref20 => {
+        let {
+          min,
+          max
+        } = _ref20;
+        return {
+          min: Math.max(min - 2, 0),
+          max: Math.min(max + 2, 100)
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      tickLabelFormatter: value => new Date(value).toLocaleDateString()
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      position: "left",
+      tickLabelFormatter: value => value + "%"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "stepAfter",
+      points: props => _extends({}, props, {
+        fill: theme.color.bg,
+        stroke: props.fill
+      }),
+      seriesId: "availability"
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })]
+  });
+}
+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 ImperativeHandle() {
+  const theme = useTheme();
+  const scrubberRef = useRef(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showYAxis: true,
+      height: 250,
+      series: [{
+        id: 'priceA',
+        data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
+        label: 'Price A',
+        color: theme.color.accentBoldBlue
+      }, {
+        id: 'priceB',
+        data: [2000, 2491, 4501, 6049, 5019, 4930, 5910],
+        label: 'Price B',
+        color: theme.color.accentBoldGreen
+      }, {
+        id: 'priceC',
+        data: [1000, 4910, 2300, 5910, 3940, 2940, 1940],
+        label: 'Price C',
+        color: theme.color.accentBoldPurple
+      }, {
+        id: 'priceD',
+        data: [4810, 2030, 5810, 3940, 2940, 1940, 940],
+        label: 'Price D',
+        color: theme.color.accentBoldYellow
+      }],
+      xAxis: {
+        // Give space for pulse animation
+        range: _ref21 => {
+          let {
+            min,
+            max
+          } = _ref21;
+          return {
+            min,
+            max: max - 8
+          };
+        }
+      },
+      yAxis: {
+        domain: {
+          min: 0
+        },
+        showGrid: true,
+        tickLabelFormatter: value => value.toLocaleString()
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        ref: scrubberRef
+      })
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: () => {
+        var _scrubberRef$current2;
+        return (_scrubberRef$current2 = scrubberRef.current) == null ? void 0 : _scrubberRef$current2.pulse();
+      },
+      children: "Pulse"
+    })]
+  });
+}
+function CustomBeaconLabel() {
+  const theme = useTheme();
+  // This custom component label shows the percentage value of the data at the scrubber position.
+  const MyScrubberBeaconLabel = /*#__PURE__*/memo(_ref22 => {
+    let {
+        seriesId,
+        color,
+        label
+      } = _ref22,
+      props = _objectWithoutPropertiesLoose(_ref22, _excluded5);
+    const {
+      getSeriesData,
+      series
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
+    const dataLength = useMemo(() => {
+      var _series$reduce;
+      return (_series$reduce = series == null ? void 0 : series.reduce((max, s) => {
+        var _seriesData$length;
+        const seriesData = getSeriesData(s.id);
+        return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
+      }, 0)) != null ? _series$reduce : 0;
+    }, [series, getSeriesData]);
+    const dataIndex = useDerivedValue(() => {
+      var _scrubberPosition$val;
+      return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
+    }, [scrubberPosition, dataLength]);
+    const percentageLabel = useDerivedValue(() => {
+      if (seriesData !== undefined) {
+        const dataAtPosition = seriesData[dataIndex.value];
+        return unwrapAnimatedValue(label) + " \xB7 " + dataAtPosition + "%";
+      }
+      return unwrapAnimatedValue(label);
+    }, [label, seriesData, dataIndex]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      background: color,
+      color: theme.color.bg,
+      label: percentageLabel,
+      seriesId: seriesId
+    }));
+  });
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    areaType: "dotted",
+    height: 200,
+    series: [{
+      id: 'Boston',
+      data: [25, 30, 35, 45, 60, 100],
+      color: "rgb(" + theme.spectrum.green40 + ")",
+      label: 'Boston'
+    }, {
+      id: 'Miami',
+      data: [20, 25, 30, 35, 20, 0],
+      color: "rgb(" + theme.spectrum.blue40 + ")",
+      label: 'Miami'
+    }, {
+      id: 'Denver',
+      data: [10, 15, 20, 25, 40, 0],
+      color: "rgb(" + theme.spectrum.orange40 + ")",
+      label: 'Denver'
+    }, {
+      id: 'Phoenix',
+      data: [15, 10, 5, 0, 0, 0],
+      color: "rgb(" + theme.spectrum.red40 + ")",
+      label: 'Phoenix'
+    }],
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      BeaconLabelComponent: MyScrubberBeaconLabel
+    })
+  });
+}
+function CustomLabelComponent() {
+  const CustomLabelComponent = /*#__PURE__*/memo(props => {
+    const theme = useTheme();
+    const {
+      drawingArea
+    } = useCartesianChartContext();
+    if (!drawingArea) return;
+    return /*#__PURE__*/_jsx(DefaultScrubberLabel, _extends({}, props, {
+      elevated: true,
+      background: theme.color.bgPrimary,
+      color: theme.color.bgPrimaryWash,
+      dy: 32,
+      fontWeight: FontWeight.Bold,
+      y: drawingArea.y + drawingArea.height
+    }));
+  });
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    height: 200,
+    inset: {
+      top: 16,
+      bottom: 64
+    },
+    series: [{
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      LabelComponent: CustomLabelComponent,
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+}
+function HiddenScrubberWhenIdle() {
+  const MyScrubberBeacon = /*#__PURE__*/memo(props => {
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const beaconOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeacon, _extends({}, props, {
+      opacity: beaconOpacity
+    }));
+  });
+  const MyScrubberBeaconLabel = /*#__PURE__*/memo(props => {
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const labelOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      opacity: labelOpacity
+    }));
+  });
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      label: 'hello'
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      BeaconComponent: MyScrubberBeacon,
+      BeaconLabelComponent: MyScrubberBeaconLabel
+    })
+  });
+}
+function TwoLineScrubberLabel() {
+  const theme = useTheme();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+  const [alignment, setAlignment] = useState(TextAlign.Center);
+  const fontMgr = useMemo(() => {
+    const fontProvider = Skia.TypefaceFontProvider.Make();
+    return fontProvider;
+  }, []);
+  const formatPrice = useCallback(price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(price);
+  }, []);
+  const scrubberLabel = useCallback(index => {
+    const price = formatPrice(data[index] * 100);
+    const day = "Day " + (index + 100);
+    const priceStyle = {
+      fontFamilies: ['Inter'],
+      fontSize: 16,
+      fontStyle: {
+        weight: FontWeight.Bold
+      },
+      color: Skia.Color(theme.color.fg)
+    };
+    const dayStyle = {
+      fontFamilies: ['Inter'],
+      fontSize: 14,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(theme.color.fgMuted)
+    };
+    const builder = Skia.ParagraphBuilder.Make({
+      textAlign: alignment
+    }, fontMgr);
+    builder.pushStyle(priceStyle);
+    builder.addText(price);
+    builder.addText('\n');
+    builder.pushStyle(dayStyle);
+    builder.addText(day);
+    const para = builder.build();
+    // First layout with large width to get intrinsic size
+    para.layout(384);
+    return para;
+  }, [data, formatPrice, theme.color.fg, theme.color.fgMuted, fontMgr, alignment]);
+
+  // Custom scrubber label component that uses the selected alignment
+  const AlignedScrubberLabel = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultScrubberLabel, _extends({}, props, {
+    paragraphAlignment: alignment
+  })));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: () => setAlignment(TextAlign.Left),
+        variant: alignment === TextAlign.Left ? 'primary' : 'secondary',
+        children: "Left"
+      }), /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: () => setAlignment(TextAlign.Center),
+        variant: alignment === TextAlign.Center ? 'primary' : 'secondary',
+        children: "Center"
+      }), /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: () => setAlignment(TextAlign.Right),
+        variant: alignment === TextAlign.Right ? 'primary' : 'secondary',
+        children: "Right"
+      })]
+    }), /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      height: 200,
+      inset: {
+        top: 64
+      },
+      series: [{
+        id: 'prices',
+        data: data,
+        color: theme.color.accentBoldBlue
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        idlePulse: true,
+        labelElevated: true,
+        LabelComponent: AlignedScrubberLabel,
+        label: scrubberLabel
+      })
+    })]
+  });
+}
+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: 'Imperative Handle',
+    component: /*#__PURE__*/_jsx(ImperativeHandle, {})
+  }, {
+    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: _ref23 => {
+          let {
+            min,
+            max
+          } = _ref23;
+          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: 'Candlesticks',
+    component: /*#__PURE__*/_jsx(Candlesticks, {})
+  }, {
+    title: 'Monotone Asset Price',
+    component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
+  }, {
+    title: 'Service Availability',
+    component: /*#__PURE__*/_jsx(ServiceAvailability, {})
+  }, {
+    title: 'Forecast Asset Price',
+    component: /*#__PURE__*/_jsx(ForecastAssetPrice, {})
+  }, {
+    title: 'Custom Beacon Label',
+    component: /*#__PURE__*/_jsx(CustomBeaconLabel, {})
+  }, {
+    title: 'Custom Label Component',
+    component: /*#__PURE__*/_jsx(CustomLabelComponent, {})
+  }, {
+    title: 'Hidden Scrubber When Idle',
+    component: /*#__PURE__*/_jsx(HiddenScrubberWhenIdle, {})
+  }, {
+    title: 'Two-Line Scrubber Label',
+    component: /*#__PURE__*/_jsx(TwoLineScrubberLabel, {})
+  }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
+  const currentExample = examples[currentIndex];
+  const isFirstExample = currentIndex === 0;
+  const isLastExample = currentIndex === examples.length - 1;
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => Math.max(0, prev - 1));
+  }, []);
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => Math.min(examples.length - 1, prev + 1));
+  }, [examples.length]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    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",
+          disabled: isFirstExample,
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          gap: 1,
+          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",
+          disabled: isLastExample,
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: currentExample.component
+      })]
+    })
+  });
+}
+export default ExampleNavigator;