@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/bar/__stories__/PercentageBarChart.stories.js

@@ -1,833 +0,0 @@
-const _excluded = ["x", "y", "width", "height", "borderRadius", "roundTop", "roundBottom", "d", "fill", "fillOpacity", "dataX", "origin", "dataY", "seriesId", "minSize"];
-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 React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { Switch } from '@coinbase/cds-mobile/controls';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { RollingNumber } from '@coinbase/cds-mobile/numbers';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { Group, Path as SkiaPath, Skia } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../../ChartProvider';
-import { DefaultLegendEntry, DefaultLegendShape, Legend } from '../../legend';
-import { Path } from '../../Path';
-import { getBarPath } from '../../utils';
-import { getDottedAreaPath } from '../../utils/path';
-import { DefaultBar } from '../DefaultBar';
-import { PercentageBarChart } from '../PercentageBarChart';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const DOTTED_BAR_PATTERN_SIZE = 4;
-const DOTTED_BAR_DOT_SIZE = 1;
-const DOTTED_BAR_OUTLINE_STROKE_WIDTH = 2;
-const DottedBarComponent = /*#__PURE__*/memo(function DottedBarComponent(props) {
-  const {
-    x,
-    y,
-    width,
-    height,
-    fill,
-    d
-  } = props;
-  const dottedPath = useMemo(() => getDottedAreaPath({
-    x,
-    y,
-    width,
-    height
-  }, DOTTED_BAR_PATTERN_SIZE, DOTTED_BAR_DOT_SIZE), [x, y, width, height]);
-  const barClipPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV;
-    return d ? (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined : undefined;
-  }, [d]);
-  const dotsSkiaPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV2;
-    return dottedPath ? (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(dottedPath)) != null ? _Skia$Path$MakeFromSV2 : undefined : undefined;
-  }, [dottedPath]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Group, {
-      clip: barClipPath,
-      children: dotsSkiaPath && fill ? /*#__PURE__*/_jsx(SkiaPath, {
-        color: fill,
-        path: dotsSkiaPath,
-        style: "fill"
-      }) : null
-    }), /*#__PURE__*/_jsx(DefaultBar, _extends({}, props, {
-      fill: undefined,
-      stroke: fill,
-      strokeWidth: DOTTED_BAR_OUTLINE_STROKE_WIDTH
-    }))]
-  });
-});
-
-/**
- * Builds an SVG path for a horizontal bar segment with a pill cap on one end
- * and a slanted straight edge on the other. The two segments' inner edges
- * are parallel, producing a parallelogram-shaped gap between them.
- */
-function getSlantedHorizontalBarPath(x, y, width, height, borderRadius, pillLeft, pillRight, slantDx) {
-  if (width <= 0 || height <= 0) return undefined;
-  if (pillLeft === pillRight) return undefined;
-  const r = Math.min(borderRadius, height / 2, width / 2);
-  const s = Math.min(Math.max(0, slantDx), width - r * 2);
-  const x0 = x;
-  const x1 = x + width;
-  const y0 = y;
-  const y1 = y + height;
-
-  // Pill left, slanted right
-  if (pillLeft && !pillRight) {
-    return ["M " + (x0 + r) + " " + y0, "L " + x1 + " " + y0, "L " + (x1 - s) + " " + y1, "L " + (x0 + r) + " " + y1, "A " + r + " " + r + " 0 0 1 " + x0 + " " + (y1 - r), "L " + x0 + " " + (y0 + r), "A " + r + " " + r + " 0 0 1 " + (x0 + r) + " " + y0, 'Z'].join(' ');
-  }
-
-  // Slanted left, pill right
-  if (!pillLeft && pillRight) {
-    return ["M " + (x0 + s) + " " + y0, "L " + (x1 - r) + " " + y0, "A " + r + " " + r + " 0 0 1 " + x1 + " " + (y0 + r), "L " + x1 + " " + (y1 - r), "A " + r + " " + r + " 0 0 1 " + (x1 - r) + " " + y1, "L " + x0 + " " + y1, 'Z'].join(' ');
-  }
-  return undefined;
-}
-const SLANT_DX = 8;
-const BASELINE_THRESHOLD = 1;
-const SlantedStackBar = /*#__PURE__*/memo(function SlantedStackBar(props) {
-  const {
-    layout
-  } = useCartesianChartContext();
-  const {
-      x,
-      y,
-      width,
-      height,
-      borderRadius = 4,
-      roundTop,
-      roundBottom,
-      d: defaultD,
-      fill,
-      fillOpacity,
-      dataX
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  const d = useMemo(() => {
-    var _ref, _getSlantedHorizontal;
-    if (layout !== 'horizontal') {
-      return defaultD != null ? defaultD : getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
-    }
-    const isLeftmost = Array.isArray(dataX) && Math.abs(dataX[0]) < BASELINE_THRESHOLD;
-    return (_ref = (_getSlantedHorizontal = getSlantedHorizontalBarPath(x, y, width, height, borderRadius, isLeftmost, !isLeftmost, SLANT_DX)) != null ? _getSlantedHorizontal : defaultD) != null ? _ref : getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
-  }, [layout, defaultD, dataX, x, y, width, height, borderRadius, roundTop, roundBottom]);
-  if (!d) return null;
-  return /*#__PURE__*/_jsx(Path, _extends({}, rest, {
-    animate: true,
-    clipPath: null,
-    d: d,
-    fill: fill,
-    fillOpacity: fillOpacity,
-    transitions: props.transitions
-  }));
-});
-const Basics = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    height: 16,
-    series: [{
-      id: 'a',
-      data: 70,
-      label: 'Segment A',
-      color: theme.color.fgPositive
-    }, {
-      id: 'b',
-      data: 45,
-      label: 'Segment B',
-      color: theme.color.fgNegative
-    }]
-  });
-};
-const StackGap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    height: 20,
-    series: [{
-      id: 'a',
-      data: 40,
-      label: 'A',
-      color: theme.color.fgPositive
-    }, {
-      id: 'b',
-      data: 35,
-      label: 'B',
-      color: theme.color.fgWarning
-    }, {
-      id: 'c',
-      data: 20,
-      label: 'C',
-      color: theme.color.accentBoldPurple
-    }],
-    stackGap: 6
-  });
-};
-const BorderRadius = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    borderRadius: 1000,
-    height: 28,
-    series: [{
-      id: 'a',
-      data: 45,
-      color: "rgb(" + theme.spectrum.purple30 + ")",
-      label: 'A'
-    }, {
-      id: 'b',
-      data: 30,
-      color: "rgb(" + theme.spectrum.blue30 + ")",
-      label: 'B'
-    }, {
-      id: 'c',
-      data: 20,
-      color: "rgb(" + theme.spectrum.teal30 + ")",
-      label: 'C'
-    }],
-    stackGap: 2
-  });
-};
-const DataExample = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    barMinSize: 12,
-    borderRadius: 8,
-    height: 100,
-    series: [{
-      id: 'a',
-      data: [40, null, 20],
-      label: 'A',
-      color: theme.color.fgPositive
-    }, {
-      id: 'b',
-      data: [-10, 60, 30],
-      label: 'B',
-      color: theme.color.fgWarning
-    }, {
-      id: 'c',
-      data: [null, 50],
-      label: 'C',
-      color: theme.color.fgMuted
-    }, {
-      id: 'd',
-      data: 45,
-      label: 'D',
-      color: theme.color.fgNegative
-    }],
-    stackGap: 2,
-    xAxis: {
-      showTickMarks: true
-    },
-    yAxis: {
-      data: ['Q1', 'Q2', 'Q3'],
-      position: 'left',
-      categoryPadding: 0.45
-    }
-  });
-};
-const BarStackSpacing = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    legend: true,
-    showXAxis: true,
-    showYAxis: true,
-    barMinSize: 18,
-    borderRadius: 24,
-    height: 240,
-    series: [{
-      id: 'a',
-      data: [55, 40, 35],
-      label: 'A',
-      color: theme.color.fgWarning
-    }, {
-      id: 'b',
-      data: [30, 45, 25],
-      label: 'B',
-      color: theme.color.accentBoldPurple
-    }, {
-      id: 'c',
-      data: [15, 15, 40],
-      label: 'C',
-      color: theme.color.fgMuted
-    }],
-    stackGap: 4,
-    xAxis: {
-      showTickMarks: true
-    },
-    yAxis: {
-      data: ['Q1', 'Q2', 'Q3'],
-      position: 'left',
-      categoryPadding: 0.7
-    }
-  });
-};
-const MinimumBarSize = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    barMinSize: 16,
-    height: 16,
-    series: [{
-      id: 'a',
-      data: 99,
-      label: 'Segment A',
-      color: theme.color.fgPositive
-    }, {
-      id: 'b',
-      data: 0.001,
-      label: 'Segment B',
-      color: theme.color.fgNegative
-    }],
-    stackGap: 2
-  });
-};
-const TaxesStyleConfirmedVsNeedReview = () => {
-  const theme = useTheme();
-  const series = [{
-    id: 'confirmed',
-    data: 28,
-    label: 'Confirmed',
-    color: theme.color.fgPositive
-  }, {
-    id: 'needs-review',
-    data: 2,
-    label: 'Needs review',
-    color: theme.color.fgWarning
-  }];
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    paddingX: 2,
-    children: [/*#__PURE__*/_jsxs(VStack, {
-      gap: 0.5,
-      children: [/*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        children: "Estimated gain"
-      }), /*#__PURE__*/_jsx(Text, {
-        font: "title2",
-        children: "+$30,000"
-      })]
-    }), /*#__PURE__*/_jsx(PercentageBarChart, {
-      height: 24,
-      series: series,
-      stackGap: 4
-    }), /*#__PURE__*/_jsxs(VStack, {
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 1,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
-            color: theme.color.fgPositive,
-            shape: "squircle"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "label1",
-            children: "Confirmed"
-          })]
-        }), /*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "body",
-            children: "+$28,000"
-          }), /*#__PURE__*/_jsx(IconButton, {
-            compact: true,
-            transparent: true,
-            accessibilityLabel: "Confirmed details",
-            name: "caretRight",
-            onPress: () => {},
-            variant: "foregroundMuted"
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 1,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
-            color: theme.color.fgWarning,
-            shape: "squircle"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "label1",
-            children: "Needs review"
-          })]
-        }), /*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          gap: 1,
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            alignItems: "flex-end",
-            gap: 0,
-            children: [/*#__PURE__*/_jsx(Text, {
-              font: "body",
-              children: "Up to $2,000"
-            }), /*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "body",
-              children: "11 transfers"
-            })]
-          }), /*#__PURE__*/_jsx(IconButton, {
-            compact: true,
-            transparent: true,
-            accessibilityLabel: "Needs review details",
-            name: "caretRight",
-            onPress: () => {},
-            variant: "foregroundMuted"
-          })]
-        })]
-      })]
-    })]
-  });
-};
-const DottedBarFirstSeriesOnly = () => {
-  const theme = useTheme();
-  const dottedBarSeries = useMemo(() => [{
-    id: 'segment-a',
-    data: 60,
-    label: 'Segment A',
-    color: "rgb(" + theme.spectrum.teal60 + ")",
-    BarComponent: DottedBarComponent
-  }, {
-    id: 'segment-b',
-    data: 30,
-    label: 'Segment B',
-    color: "rgb(" + theme.spectrum.chartreuse50 + ")"
-  }, {
-    id: 'segment-c',
-    data: 10,
-    label: 'Segment C',
-    color: "rgb(" + theme.spectrum.indigo40 + ")"
-  }], [theme]);
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    height: 24,
-    series: dottedBarSeries,
-    stackGap: 4
-  });
-};
-const DottedBarChartLevel = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    BarComponent: DottedBarComponent,
-    height: 24,
-    series: [{
-      id: 'segment-a',
-      data: 60,
-      label: 'Segment A',
-      color: "rgb(" + theme.spectrum.teal60 + ")"
-    }, {
-      id: 'segment-b',
-      data: 30,
-      label: 'Segment B',
-      color: "rgb(" + theme.spectrum.chartreuse50 + ")"
-    }, {
-      id: 'segment-c',
-      data: 10,
-      label: 'Segment C',
-      color: "rgb(" + theme.spectrum.indigo40 + ")"
-    }],
-    stackGap: 4
-  });
-};
-function randomShares() {
-  const raw = [Math.random() + 0.1, Math.random() + 0.1, Math.random() + 0.1];
-  const sum = raw[0] + raw[1] + raw[2];
-  return raw.map(v => Math.max(1, Math.round(v / sum * 100)));
-}
-function generateAnimationData() {
-  return [randomShares(), randomShares(), randomShares()];
-}
-const Animations = () => {
-  const theme = useTheme();
-  const [animate, setAnimate] = useState(true);
-  const [data, setData] = useState(generateAnimationData);
-  useEffect(() => {
-    const id = setInterval(() => setData(generateAnimationData()), 800);
-    return () => clearInterval(id);
-  }, []);
-  const series = useMemo(() => [{
-    id: 'btc',
-    data: data.map(q => q[0]),
-    label: 'BTC',
-    color: assets.btc.color
-  }, {
-    id: 'eth',
-    data: data.map(q => q[1]),
-    label: 'ETH',
-    color: assets.eth.color
-  }, {
-    id: 'other',
-    data: data.map(q => q[2]),
-    label: 'Other',
-    color: theme.color.fgMuted
-  }], [data, theme]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(HStack, {
-      alignItems: "center",
-      gap: 1,
-      justifyContent: "flex-end",
-      children: /*#__PURE__*/_jsx(Switch, {
-        checked: animate,
-        onChange: () => setAnimate(v => !v),
-        children: "Animate"
-      })
-    }), /*#__PURE__*/_jsx(PercentageBarChart, {
-      legend: true,
-      showXAxis: true,
-      showYAxis: true,
-      animate: animate,
-      barMinSize: 14,
-      borderRadius: 48,
-      height: 220,
-      inset: {
-        left: 24,
-        right: 0,
-        top: 0,
-        bottom: 0
-      },
-      legendPosition: "top",
-      series: series,
-      stackGap: 2,
-      transitions: {
-        enter: {
-          type: 'timing',
-          duration: 400,
-          staggerDelay: 0.2
-        },
-        update: {
-          type: 'timing',
-          duration: 300
-        }
-      },
-      xAxis: {
-        showTickMarks: true,
-        tickLabelFormatter: value => value + "%"
-      },
-      yAxis: {
-        categoryPadding: 0.75,
-        data: ['Q1 2025', 'Q2 2025', 'Q3 2025'],
-        position: 'left',
-        requestedTickCount: 5,
-        showTickMarks: true
-      }
-    })]
-  });
-};
-
-/** Fake "projected value" copy: scales with live % so subtitles stay in sync with the bar. */
-const liveFeedSubtitleBase = 100;
-const liveFeedYesDollarsPerPercentPoint = (182 - liveFeedSubtitleBase) / 50;
-const liveFeedNoDollarsPerPercentPoint = (222 - liveFeedSubtitleBase) / 50;
-function getLiveFeedProjectedValue(seriesId, percentage) {
-  const inverseShare = 100 - percentage;
-  if (seriesId === 'yes') {
-    return Math.round(liveFeedSubtitleBase + inverseShare * liveFeedYesDollarsPerPercentPoint);
-  }
-  if (seriesId === 'no') {
-    return Math.round(liveFeedSubtitleBase + inverseShare * liveFeedNoDollarsPerPercentPoint);
-  }
-  return undefined;
-}
-const liveFeedCurrencyFormat = {
-  style: 'currency',
-  currency: 'USD',
-  maximumFractionDigits: 0
-};
-const LiveFeedCTALegendEntry = /*#__PURE__*/memo(function LiveFeedCTALegendEntry(_ref2) {
-  var _, _seriesData$data;
-  let {
-    seriesId,
-    label,
-    color
-  } = _ref2;
-  const {
-    series: contextSeries
-  } = useCartesianChartContext();
-  const seriesData = contextSeries.find(s => s.id === seriesId);
-  const percentage = (_ = seriesData == null || (_seriesData$data = seriesData.data) == null ? void 0 : _seriesData$data[0]) != null ? _ : 0;
-  const projectedValue = getLiveFeedProjectedValue(seriesId, percentage);
-  return /*#__PURE__*/_jsx(Box, {
-    paddingX: 2,
-    paddingY: 1,
-    style: {
-      backgroundColor: color,
-      borderRadius: 200
-    },
-    children: /*#__PURE__*/_jsxs(VStack, {
-      alignItems: "center",
-      gap: 0.25,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 0.5,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          color: "fgInverse",
-          font: "label1",
-          children: [label, " ", '· ']
-        }), /*#__PURE__*/_jsx(RollingNumber, {
-          color: "fgInverse",
-          font: "label1",
-          format: {
-            style: 'percent',
-            maximumFractionDigits: 0
-          },
-          value: percentage / 100
-        })]
-      }), projectedValue != null && /*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        gap: 0.5,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          color: "fgInverse",
-          font: "legal",
-          children: ["$", liveFeedSubtitleBase, " \u2192"]
-        }), /*#__PURE__*/_jsx(RollingNumber, {
-          color: "fgInverse",
-          font: "legal",
-          format: liveFeedCurrencyFormat,
-          value: projectedValue
-        })]
-      })]
-    })
-  });
-});
-const LiveUpdatingData = () => {
-  const theme = useTheme();
-  const [tick, setTick] = useState(0);
-  const yesValue = 50 + Math.sin(tick * 0.05) * 49;
-  const noValue = 50 - Math.sin(tick * 0.05) * 49;
-  const series = [{
-    id: 'yes',
-    data: yesValue,
-    label: 'Yes',
-    color: theme.color.fgPositive
-  }, {
-    id: 'no',
-    data: noValue,
-    label: 'No',
-    color: theme.color.fgNegative
-  }];
-  useEffect(() => {
-    const id = setInterval(() => setTick(t => t + 4), 1000);
-    return () => clearInterval(id);
-  }, []);
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    barMinSize: 16,
-    borderRadius: 1000,
-    height: 78,
-    legend: /*#__PURE__*/_jsx(Legend, {
-      EntryComponent: LiveFeedCTALegendEntry,
-      justifyContent: "space-evenly",
-      paddingTop: 1
-    }),
-    legendPosition: "bottom",
-    series: series,
-    stackGap: 2
-  });
-};
-const VerticalMix = () => {
-  const theme = useTheme();
-  const series = [{
-    id: 'btc',
-    data: [55, 52, 48, 45, 50, 58, 62, 57, 53, 49, 44, 46],
-    label: 'BTC',
-    color: assets.btc.color
-  }, {
-    id: 'eth',
-    data: [30, 33, 35, 38, 32, 27, 25, 29, 34, 37, 40, 38],
-    label: 'ETH',
-    color: assets.eth.color
-  }, {
-    id: 'other',
-    data: [15, 15, 17, 17, 18, 15, 13, 14, 13, 14, 16, 16],
-    label: 'Other',
-    color: theme.color.fgMuted
-  }];
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    legend: true,
-    showXAxis: true,
-    showYAxis: true,
-    barMinSize: 28,
-    borderRadius: 48,
-    height: 240,
-    layout: "vertical",
-    legendPosition: "top",
-    series: series,
-    stackGap: 1,
-    xAxis: {
-      categoryPadding: 0.5,
-      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-      position: 'bottom',
-      showTickMarks: true
-    }
-  });
-};
-const BuyVsSellLegend = /*#__PURE__*/memo(function BuyVsSellLegend(_ref3) {
-  let {
-    series
-  } = _ref3;
-  const [buy, sell] = series;
-  return /*#__PURE__*/_jsxs(HStack, {
-    gap: 1,
-    justifyContent: "space-between",
-    children: [/*#__PURE__*/_jsx(DefaultLegendEntry, {
-      color: buy.color,
-      label: /*#__PURE__*/_jsxs(Text, {
-        color: "fgMuted",
-        font: "legal",
-        children: [buy.data, "% bought"]
-      }),
-      seriesId: buy.id,
-      shape: buy.legendShape
-    }), /*#__PURE__*/_jsx(DefaultLegendEntry, {
-      color: sell.color,
-      label: /*#__PURE__*/_jsxs(Text, {
-        color: "fgMuted",
-        font: "legal",
-        children: [sell.data, "% sold"]
-      }),
-      seriesId: sell.id,
-      shape: sell.legendShape
-    })]
-  });
-});
-const BuyVsSell = () => {
-  const theme = useTheme();
-  const buySellSeries = useMemo(() => [{
-    id: 'buy',
-    data: 76,
-    color: theme.color.fgPositive,
-    legendShape: 'circle'
-  }, {
-    id: 'sell',
-    data: 24,
-    color: theme.color.fgNegative,
-    legendShape: 'square'
-  }], [theme]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 1.5,
-    children: [/*#__PURE__*/_jsx(PercentageBarChart, {
-      barMinSize: 8,
-      borderRadius: 24,
-      height: 8,
-      series: buySellSeries,
-      stackGap: 4
-    }), /*#__PURE__*/_jsx(BuyVsSellLegend, {
-      series: buySellSeries
-    })]
-  });
-};
-const SlantedStackGap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(PercentageBarChart, {
-    BarComponent: SlantedStackBar,
-    animate: false,
-    barMinSize: 12,
-    borderRadius: 24,
-    height: 12,
-    series: [{
-      id: 'team-a',
-      data: 40,
-      color: "rgb(" + theme.spectrum.teal60 + ")"
-    }, {
-      id: 'team-b',
-      data: 61,
-      color: theme.color.accentBoldBlue
-    }]
-  });
-};
-function ExampleNavigator() {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const examples = useMemo(() => [{
-    title: 'Basics',
-    component: /*#__PURE__*/_jsx(Basics, {})
-  }, {
-    title: 'Stack Gap',
-    component: /*#__PURE__*/_jsx(StackGap, {})
-  }, {
-    title: 'Border Radius',
-    component: /*#__PURE__*/_jsx(BorderRadius, {})
-  }, {
-    title: 'Sparse Data',
-    component: /*#__PURE__*/_jsx(DataExample, {})
-  }, {
-    title: 'Bar Stack Spacing',
-    component: /*#__PURE__*/_jsx(BarStackSpacing, {})
-  }, {
-    title: 'Minimum Bar Size',
-    component: /*#__PURE__*/_jsx(MinimumBarSize, {})
-  }, {
-    title: 'Taxes style',
-    component: /*#__PURE__*/_jsx(TaxesStyleConfirmedVsNeedReview, {})
-  }, {
-    title: 'Slanted stack gap',
-    component: /*#__PURE__*/_jsx(SlantedStackGap, {})
-  }, {
-    title: 'Dotted bar (first series only)',
-    component: /*#__PURE__*/_jsx(DottedBarFirstSeriesOnly, {})
-  }, {
-    title: 'Dotted bar (chart-level)',
-    component: /*#__PURE__*/_jsx(DottedBarChartLevel, {})
-  }, {
-    title: 'Animations',
-    component: /*#__PURE__*/_jsx(Animations, {})
-  }, {
-    title: 'Live-updating Data',
-    component: /*#__PURE__*/_jsx(LiveUpdatingData, {})
-  }, {
-    title: 'Vertical Mix',
-    component: /*#__PURE__*/_jsx(VerticalMix, {})
-  }, {
-    title: 'Buy vs Sell',
-    component: /*#__PURE__*/_jsx(BuyVsSell, {})
-  }], []);
-  const currentExample = examples[currentIndex];
-  const handlePrevious = useCallback(() => {
-    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
-  }, [examples.length]);
-  const handleNext = useCallback(() => {
-    setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
-  }, [examples.length]);
-  return /*#__PURE__*/_jsx(ExampleScreen, {
-    paddingX: 0,
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 4,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: 2,
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          accessibilityHint: "Navigate to previous example",
-          accessibilityLabel: "Previous",
-          name: "arrowLeft",
-          onPress: handlePrevious,
-          variant: "secondary"
-        }), /*#__PURE__*/_jsxs(VStack, {
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "title3",
-            children: currentExample.title
-          }), /*#__PURE__*/_jsxs(Text, {
-            color: "fgMuted",
-            font: "label1",
-            children: [currentIndex + 1, " / ", examples.length]
-          })]
-        }), /*#__PURE__*/_jsx(IconButton, {
-          accessibilityHint: "Navigate to next example",
-          accessibilityLabel: "Next",
-          name: "arrowRight",
-          onPress: handleNext,
-          variant: "secondary"
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        padding: 1,
-        children: currentExample.component
-      })]
-    })
-  });
-}
-export default ExampleNavigator;