@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,946 +0,0 @@
-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;