@coinbase/cds-mobile-visualization 3.4.0 → 3.6.2

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

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