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

package/esm/chart/scrubber/__stories__/Scrubber.stories.js

@@ -0,0 +1,946 @@
+const _excluded = ["seriesId", "color", "label"],
+  _excluded2 = ["seriesId", "color", "label"],
+  _excluded3 = ["seriesId", "color"];
+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 { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { useTheme } from '@coinbase/cds-mobile';
+import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
+import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { FontWeight, Skia, TextAlign } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { LineChart, SolidLine } from '../../line';
+import { getLineData, unwrapAnimatedValue, useScrubberContext } from '../../utils';
+import { DefaultScrubberBeacon, DefaultScrubberBeaconLabel, DefaultScrubberLabel, Scrubber } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sampleData = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+const chartAccessibilityLabel = "Price chart with " + sampleData.length + " data points. Swipe to navigate.";
+const getScrubberAccessibilityLabel = index => "Point " + (index + 1) + ": " + sampleData[index];
+const BasicScrubber = () => {
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    xAxis: {
+      range: _ref => {
+        let {
+          min,
+          max
+        } = _ref;
+        return {
+          min,
+          max: max - 8
+        };
+      }
+    },
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true
+    })
+  });
+};
+const seriesFilterData = {
+  top: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
+  upperMiddle: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+  lowerMiddle: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+  bottom: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14]
+};
+const SeriesFilter = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": top " + seriesFilterData.top[index] + ", lowerMiddle " + seriesFilterData.lowerMiddle[index], []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with multiple series. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'top',
+      data: seriesFilterData.top
+    }, {
+      id: 'upperMiddle',
+      data: seriesFilterData.upperMiddle,
+      color: '#ef4444',
+      type: 'dotted'
+    }, {
+      id: 'lowerMiddle',
+      data: seriesFilterData.lowerMiddle,
+      color: '#f59e0b',
+      curve: 'natural'
+    }, {
+      id: 'bottom',
+      data: seriesFilterData.bottom,
+      color: '#800080',
+      curve: 'step',
+      showArea: true
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      seriesIds: ['top', 'lowerMiddle']
+    })
+  });
+};
+const WithLabels = () => {
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData,
+      label: 'Price'
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+};
+const IdlePulse = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData,
+      color: theme.color.fgPositive
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true
+    })
+  });
+};
+const ImperativePulse = () => {
+  const scrubberRef = useRef(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data: sampleData
+      }],
+      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"
+    })]
+  });
+};
+const BeaconStroke = () => {
+  const theme = useTheme();
+  const backgroundColor = "rgb(" + theme.spectrum.red40 + ")";
+  const foregroundColor = "rgb(" + theme.spectrum.gray0 + ")";
+  return /*#__PURE__*/_jsx(Box, {
+    borderRadius: 300,
+    padding: 2,
+    style: {
+      backgroundColor
+    },
+    children: /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data: sampleData,
+        color: foregroundColor
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        hideOverlay: true,
+        idlePulse: true,
+        beaconStroke: backgroundColor,
+        lineStroke: foregroundColor
+      })
+    })
+  });
+};
+const CustomBeacon = () => {
+  const theme = useTheme();
+  const InvertedBeacon = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultScrubberBeacon, _extends({}, props, {
+    color: theme.color.bg,
+    radius: 5,
+    stroke: theme.color.fg,
+    strokeWidth: 3
+  })));
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData,
+      color: theme.color.fg
+    }],
+    xAxis: {
+      range: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min,
+          max: max - 16
+        };
+      }
+    },
+    yAxis: {
+      showGrid: true,
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      BeaconComponent: InvertedBeacon
+    })
+  });
+};
+const CustomBeaconLabel = () => {
+  const theme = useTheme();
+  const MyScrubberBeaconLabel = /*#__PURE__*/memo(_ref3 => {
+    let {
+        seriesId,
+        color,
+        label
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+    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 _data$length;
+        const data = getSeriesData(s.id);
+        return Math.max(max, (_data$length = data == null ? void 0 : data.length) != null ? _data$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,
+    accessibilityLabel: "Temperature chart with 6 data points. Swipe to navigate.",
+    areaType: "dotted",
+    getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [25, 30, 35, 45, 60, 100][index] + "\xB0F",
+    height: 150,
+    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
+    })
+  });
+};
+const PercentageBeaconLabels = () => {
+  const theme = useTheme();
+  const PercentageScrubberBeaconLabel = /*#__PURE__*/memo(_ref4 => {
+    let {
+        seriesId,
+        color,
+        label
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2);
+    const {
+      getSeriesData,
+      series,
+      fontProvider
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
+    const dataLength = useMemo(() => {
+      var _series$reduce2;
+      return (_series$reduce2 = series == null ? void 0 : series.reduce((max, s) => {
+        var _data$length2;
+        const data = getSeriesData(s.id);
+        return Math.max(max, (_data$length2 = data == null ? void 0 : data.length) != null ? _data$length2 : 0);
+      }, 0)) != null ? _series$reduce2 : 0;
+    }, [series, getSeriesData]);
+    const dataIndex = useDerivedValue(() => {
+      var _scrubberPosition$val2;
+      return (_scrubberPosition$val2 = scrubberPosition.value) != null ? _scrubberPosition$val2 : Math.max(0, dataLength - 1);
+    }, [scrubberPosition, dataLength]);
+    const labelColor = "rgb(" + theme.spectrum.gray0 + ")";
+    const regularStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: 14,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(labelColor)
+    }), [labelColor]);
+    const boldStyle = useMemo(() => _extends({}, regularStyle, {
+      fontStyle: {
+        weight: FontWeight.Bold
+      }
+    }), [regularStyle]);
+    const percentageLabel = useDerivedValue(() => {
+      const labelValue = unwrapAnimatedValue(label);
+      if (seriesData !== undefined) {
+        const dataAtPosition = seriesData[dataIndex.value];
+        const builder = Skia.ParagraphBuilder.Make({
+          textAlign: TextAlign.Left
+        }, fontProvider);
+        builder.pushStyle(boldStyle);
+        builder.addText(dataAtPosition + "%");
+        builder.pushStyle(regularStyle);
+        builder.addText(" " + labelValue);
+        const para = builder.build();
+        para.layout(512);
+        return para;
+      }
+      return labelValue;
+    }, [label, seriesData, dataIndex, fontProvider, boldStyle, regularStyle]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      background: color,
+      label: percentageLabel,
+      seriesId: seriesId
+    }));
+  });
+  const isLightTheme = theme.activeColorScheme === 'light';
+  const background = isLightTheme ? "rgb(" + theme.spectrum.gray90 + ")" : "rgb(" + theme.spectrum.gray0 + ")";
+  const scrubberLineStroke = isLightTheme ? "rgb(" + theme.spectrum.gray0 + ")" : "rgb(" + theme.spectrum.gray90 + ")";
+  const seriesData = [{
+    id: 'prices2',
+    data: [90, 78, 71, 55, 2, 55, 78, 48, 79, 96, 32, 80, 79, 42],
+    color: "rgb(" + theme.spectrum.blue40 + ")",
+    label: 'ATL'
+  }, {
+    id: 'prices',
+    data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    color: "rgb(" + theme.spectrum.chartreuse40 + ")",
+    label: 'NYC'
+  }];
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(Box, {
+      borderRadius: 300,
+      padding: 2,
+      style: {
+        backgroundColor: background
+      },
+      children: /*#__PURE__*/_jsx(LineChart, {
+        enableScrubbing: true,
+        showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
+        areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
+        height: 150,
+        inset: {
+          bottom: 8,
+          left: 8,
+          top: 8,
+          right: 0
+        },
+        series: seriesData,
+        xAxis: {
+          range: _ref5 => {
+            let {
+              min,
+              max
+            } = _ref5;
+            return {
+              min,
+              max: max - 92
+            };
+          }
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {
+          hideOverlay: true,
+          idlePulse: true,
+          BeaconLabelComponent: PercentageScrubberBeaconLabel,
+          beaconStroke: background,
+          lineStroke: scrubberLineStroke
+        })
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      borderRadius: 300,
+      padding: 2,
+      style: {
+        backgroundColor: background
+      },
+      children: /*#__PURE__*/_jsx(LineChart, {
+        enableScrubbing: true,
+        showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
+        areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
+        height: 150,
+        inset: {
+          bottom: 8,
+          left: 8,
+          top: 8,
+          right: 0
+        },
+        series: seriesData,
+        xAxis: {
+          range: _ref6 => {
+            let {
+              min,
+              max
+            } = _ref6;
+            return {
+              min,
+              max: max - 92
+            };
+          }
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {
+          hideOverlay: true,
+          idlePulse: true,
+          BeaconLabelComponent: PercentageScrubberBeaconLabel,
+          beaconLabelPreferredSide: "left",
+          beaconStroke: background,
+          lineStroke: scrubberLineStroke
+        })
+      })
+    })]
+  });
+};
+const HideBeaconLabels = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    legend: true,
+    showArea: true,
+    accessibilityLabel: "Website visitors across 7 pages. Swipe to navigate.",
+    getScrubberAccessibilityLabel: index => "Page " + (index + 1) + ": " + [2400, 1398, 9800, 3908, 4800, 3800, 4300][index] + " views",
+    height: 200,
+    inset: {
+      top: 60
+    },
+    series: [{
+      id: 'pageViews',
+      data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
+      color: theme.color.accentBoldGreen,
+      label: 'Page Views'
+    }, {
+      id: 'uniqueVisitors',
+      data: [4000, 3000, 2000, 2780, 1890, 2390, 3490],
+      color: theme.color.accentBoldPurple,
+      label: 'Unique Visitors'
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideBeaconLabels: true,
+      labelElevated: true,
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+};
+const LabelElevated = () => {
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    inset: {
+      top: 60
+    },
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      labelElevated: true,
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+};
+const CustomLabelComponent = () => {
+  const theme = useTheme();
+  const MyLabelComponent = /*#__PURE__*/memo(props => {
+    const {
+      drawingArea
+    } = useCartesianChartContext();
+    if (!drawingArea) return null;
+    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,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    inset: {
+      top: 16,
+      bottom: 64
+    },
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      LabelComponent: MyLabelComponent,
+      label: dataIndex => "Day " + (dataIndex + 1)
+    })
+  });
+};
+const ethData = [5, 15, 18, 30, 65, 30, 15, 35, 15, 2, 45, 12, 15, 40];
+const LabelFonts = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Day " + (index + 1) + ": BTC " + sampleData[index] + ", ETH " + ethData[index], []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    accessibilityLabel: "BTC and ETH comparison chart. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'btc',
+      data: sampleData,
+      label: 'BTC',
+      color: assets.btc.color
+    }, {
+      id: 'eth',
+      data: ethData,
+      label: 'ETH',
+      color: assets.eth.color
+    }],
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      beaconLabelFont: "legal",
+      label: dataIndex => "Day " + (dataIndex + 1),
+      labelFont: "legal"
+    })
+  });
+};
+const LabelBoundsInset = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+      height: 150,
+      inset: {
+        left: 0,
+        right: 0
+      },
+      series: [{
+        id: 'prices',
+        data: sampleData
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        label: "Without bounds - text touches edge",
+        labelBoundsInset: 0
+      })
+    }), /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+      height: 150,
+      inset: {
+        left: 0,
+        right: 0
+      },
+      series: [{
+        id: 'prices',
+        data: sampleData
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        label: "With bounds inset - text has space",
+        labelBoundsInset: {
+          top: 0,
+          bottom: 0,
+          left: 12,
+          right: 12
+        }
+      })
+    })]
+  });
+};
+const CustomLine = () => {
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      LineComponent: SolidLine
+    })
+  });
+};
+const 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,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData,
+      label: 'Price'
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      BeaconComponent: MyScrubberBeacon,
+      BeaconLabelComponent: MyScrubberBeaconLabel
+    })
+  });
+};
+const HideOverlay = () => {
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true
+    })
+  });
+};
+const matchupBlueData = [47, 50, 51, 52, 53, 53, 53, 53, 52, 51, 51, 52, 53, 55, 57, 58, 59, 61, 63, 65, 64, 64, 64, 64, 64, 63, 63, 63, 64, 66, 68, 70, 71, 72, 74, 76, 76, 75, 74, 73, 74, 75, 75, 78];
+const matchupRedData = matchupBlueData.map(value => 100 - value);
+const matchupTeamLabels = {
+  blue: 'BLUE',
+  red: 'RED'
+};
+const MatchupBeaconLabels = () => {
+  const theme = useTheme();
+  const MatchupScrubberBeaconLabel = /*#__PURE__*/memo(_ref7 => {
+    var _matchupTeamLabels$se;
+    let {
+        seriesId,
+        color
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded3);
+    const {
+      getSeriesData,
+      series,
+      fontProvider
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const seriesData = useMemo(() => getLineData(getSeriesData(seriesId)), [getSeriesData, seriesId]);
+    const dataLength = useMemo(() => {
+      var _series$reduce3;
+      return (_series$reduce3 = series == null ? void 0 : series.reduce((max, currentSeries) => {
+        var _data$length3;
+        const data = getSeriesData(currentSeries.id);
+        return Math.max(max, (_data$length3 = data == null ? void 0 : data.length) != null ? _data$length3 : 0);
+      }, 0)) != null ? _series$reduce3 : 0;
+    }, [series, getSeriesData]);
+    const dataIndex = useDerivedValue(() => {
+      var _scrubberPosition$val3;
+      return (_scrubberPosition$val3 = scrubberPosition.value) != null ? _scrubberPosition$val3 : Math.max(0, dataLength - 1);
+    }, [scrubberPosition, dataLength]);
+    const teamLabel = (_matchupTeamLabels$se = matchupTeamLabels[seriesId]) != null ? _matchupTeamLabels$se : String(seriesId).toUpperCase();
+    const labelColor = color != null ? color : theme.color.fgPrimary;
+    const legalFontSize = theme.fontSize.legal;
+    const title3FontSize = theme.fontSize.title3;
+    const teamStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: legalFontSize,
+      fontStyle: {
+        weight: FontWeight.Normal
+      },
+      color: Skia.Color(labelColor)
+    }), [labelColor, legalFontSize]);
+    const percentageStyle = useMemo(() => ({
+      fontFamilies: ['Inter'],
+      fontSize: title3FontSize,
+      fontStyle: {
+        weight: FontWeight.Bold
+      },
+      color: Skia.Color(labelColor)
+    }), [title3FontSize, labelColor]);
+    const matchupLabel = useDerivedValue(() => {
+      if (seriesData === undefined) {
+        return teamLabel;
+      }
+      const value = seriesData[dataIndex.value];
+      const builder = Skia.ParagraphBuilder.Make({
+        textAlign: TextAlign.Left
+      }, fontProvider);
+      builder.pushStyle(teamStyle);
+      builder.addText(teamLabel);
+      builder.addText('\n');
+      builder.pushStyle(percentageStyle);
+      builder.addText(value + "%");
+      const paragraph = builder.build();
+      paragraph.layout(240);
+      return paragraph;
+    }, [dataIndex, fontProvider, percentageStyle, seriesData, teamLabel, teamStyle]);
+    return /*#__PURE__*/_jsx(DefaultScrubberBeaconLabel, _extends({}, props, {
+      background: "transparent",
+      color: labelColor,
+      elevated: false,
+      inset: 0,
+      label: matchupLabel,
+      seriesId: seriesId
+    }));
+  });
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": BLUE " + matchupBlueData[index] + "%, RED " + matchupRedData[index] + "%", []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: "BLUE vs RED matchup chart. Swipe to navigate.",
+    areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 300,
+    inset: {
+      bottom: 8,
+      left: 8,
+      top: 8,
+      right: 0
+    },
+    series: [{
+      id: 'blue',
+      data: matchupBlueData,
+      color: "rgb(" + theme.spectrum.blue50 + ")",
+      label: 'BLUE'
+    }, {
+      id: 'red',
+      data: matchupRedData,
+      color: "rgb(" + theme.spectrum.red50 + ")",
+      label: 'RED'
+    }],
+    xAxis: {
+      range: _ref8 => {
+        let {
+          min,
+          max
+        } = _ref8;
+        return {
+          min,
+          max: max - 64
+        };
+      }
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      idlePulse: true,
+      BeaconLabelComponent: MatchupScrubberBeaconLabel,
+      beaconLabelHorizontalOffset: 16,
+      beaconLabelPreferredSide: "right"
+    })
+  });
+};
+const ExampleNavigator = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(BasicScrubber, {})
+  }, {
+    title: 'Series Filter',
+    component: /*#__PURE__*/_jsx(SeriesFilter, {})
+  }, {
+    title: 'With Labels',
+    component: /*#__PURE__*/_jsx(WithLabels, {})
+  }, {
+    title: 'Idle Pulse',
+    component: /*#__PURE__*/_jsx(IdlePulse, {})
+  }, {
+    title: 'Imperative Pulse',
+    component: /*#__PURE__*/_jsx(ImperativePulse, {})
+  }, {
+    title: 'Beacon Stroke',
+    component: /*#__PURE__*/_jsx(BeaconStroke, {})
+  }, {
+    title: 'Custom Beacon',
+    component: /*#__PURE__*/_jsx(CustomBeacon, {})
+  }, {
+    title: 'Custom Beacon Label',
+    component: /*#__PURE__*/_jsx(CustomBeaconLabel, {})
+  }, {
+    title: 'Percentage Beacon Labels',
+    component: /*#__PURE__*/_jsx(PercentageBeaconLabels, {})
+  }, {
+    title: 'Hide Beacon Labels',
+    component: /*#__PURE__*/_jsx(HideBeaconLabels, {})
+  }, {
+    title: 'Label Elevated',
+    component: /*#__PURE__*/_jsx(LabelElevated, {})
+  }, {
+    title: 'Custom Label Component',
+    component: /*#__PURE__*/_jsx(CustomLabelComponent, {})
+  }, {
+    title: 'Label Fonts',
+    component: /*#__PURE__*/_jsx(LabelFonts, {})
+  }, {
+    title: 'Label Bounds Inset',
+    component: /*#__PURE__*/_jsx(LabelBoundsInset, {})
+  }, {
+    title: 'Custom Line',
+    component: /*#__PURE__*/_jsx(CustomLine, {})
+  }, {
+    title: 'Hidden Scrubber When Idle',
+    component: /*#__PURE__*/_jsx(HiddenScrubberWhenIdle, {})
+  }, {
+    title: 'Hide Overlay',
+    component: /*#__PURE__*/_jsx(HideOverlay, {})
+  }, {
+    title: 'Matchup Beacon Labels',
+    component: /*#__PURE__*/_jsx(MatchupBeaconLabels, {})
+  }], []);
+  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",
+        paddingY: 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;