@cdx-ui/components 0.3.5 → 0.3.7

package/lib/module/components/BarChart/index.js

@@ -0,0 +1,929 @@
+"use strict";
+
+/* SVG `x`/`y` are paint coordinates. RN View `x`/`y` layout props are deprecated and share the name. */
+/* eslint-disable @typescript-eslint/no-deprecated */
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { G, Line, Path, Svg, Text as SvgText } from 'react-native-svg';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, useControllableState } from '@cdx-ui/utils';
+import { ChartInspector, ChartTooltipLayer, expandHitBox } from '../chart/ChartInspector';
+import { defaultChartValueFormatter, formatChartPercent, resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { HIDDEN_SVG_PROPS } from '../chart/hiddenSvgProps';
+import { useChartHostWidth } from '../chart/useChartHostWidth';
+import { CHART_MOTION_DURATION, useChartMorph, useChartMotionEnabled, lerpVector } from '../chart/motion';
+import { ChartLinearFills, chartFillUrl, chartSeriesColor, resolveChartColor, useChartChrome, useChartColorPaints, useChartGradientId, useChartPalette, useChartSimpleColor } from '../chart/palette';
+import { BAR_GAP_RATIO, CATEGORY_GAP_RATIO, barKeyboardNeighbor, barPath, barValueAnchor, DEFAULT_STACK_GAP, formatWaterfallBarValue, isExpandAxis, layoutBarChart, overlayDelta, readBarValue, resolveBarChartContentSize, resolveBarChartGutters, resolveBarGroups, stackedTotalAnchors, waterfallValueAnchor } from './geometry';
+import { BAR_RADIUS, barChartLegendItemVariants, barChartLegendLabelVariants, barChartLegendVariants, barChartRootVariants, resolveBarChartBox } from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const INACTIVE_OPACITY = 0.4;
+const DASH = '6 4';
+const SVG_OVERFLOW_VISIBLE = {
+  overflow: 'visible'
+};
+const LABEL_FADE_DURATION = 220;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+/** Keys of `TRow` whose value is a boolean. */
+
+/** Running-total series. Each row is a change, except rows flagged as totals. */
+
+/** Draws this series as a thinner comparison bar beside another series' bar. */
+
+function resolveBarPlan(series) {
+  const toGeometry = item => ({
+    id: item.id,
+    dataKey: item.dataKey,
+    label: item.label ?? '',
+    stack: item.stack,
+    stackOffset: item.stackOffset
+  });
+  const waterfall = series.find(item => item.waterfall !== undefined);
+  if (waterfall !== undefined) {
+    return {
+      kind: 'waterfall',
+      series: [waterfall],
+      geometry: [toGeometry(waterfall)],
+      totalKey: waterfall.waterfall?.totalKey
+    };
+  }
+  for (const comparison of series) {
+    const primary = comparison.overlay === undefined ? undefined : series.find(item => item.id === comparison.overlay?.seriesId && item !== comparison);
+    if (primary !== undefined) {
+      const pair = [primary, comparison];
+      return {
+        kind: 'overlay',
+        series: pair,
+        geometry: pair.map(item => ({
+          ...toGeometry(item),
+          stack: undefined
+        })),
+        totalKey: undefined
+      };
+    }
+  }
+  return {
+    kind: 'bars',
+    series,
+    geometry: series.map(toGeometry),
+    totalKey: undefined
+  };
+}
+function sameItem(a, b) {
+  return a?.seriesId === b.seriesId && a.dataIndex === b.dataIndex;
+}
+function barSelection(bar) {
+  return {
+    seriesId: bar.seriesId,
+    dataIndex: bar.index
+  };
+}
+function barAccessibilityName(label, seriesLabel, formatted, change = null) {
+  const base = seriesLabel.length > 0 ? `${label}, ${seriesLabel}, ${formatted}` : `${label}, ${formatted}`;
+  return change === null ? base : `${base}, ${change}`;
+}
+function BarChartInner({
+  dataset,
+  series: seriesProp,
+  xAxis,
+  yAxis,
+  size = 'lg',
+  width: widthProp,
+  height: heightProp,
+  layout: orientation = 'vertical',
+  hideLegend = false,
+  grid,
+  palette: paletteProp = 'auto',
+  barLabel = false,
+  borderRadius = BAR_RADIUS,
+  stackGap = DEFAULT_STACK_GAP,
+  categoryGapRatio = CATEGORY_GAP_RATIO,
+  barGapRatio = BAR_GAP_RATIO,
+  referenceLines,
+  emphasizedIndex,
+  scrollable = true,
+  visiblePoints,
+  selectedItem,
+  defaultSelectedItem,
+  onSelectedItemChange,
+  tooltip: tooltipProp,
+  locale,
+  localeText: localeTextProp,
+  animation,
+  accessibilityLabel,
+  className,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const animated = useChartMotionEnabled(animation);
+  const simpleColor = useChartSimpleColor();
+  const gradientId = useChartGradientId('bar-fill');
+  const chrome = useChartChrome();
+  const palette = useChartPalette();
+  const paints = useChartColorPaints();
+  const localeText = useMemo(() => resolveChartLocaleText(localeTextProp), [localeTextProp]);
+  const plan = useMemo(() => resolveBarPlan(seriesProp), [seriesProp]);
+  const {
+    kind,
+    geometry
+  } = plan;
+  const overlay = kind === 'overlay';
+  const waterfall = kind === 'waterfall';
+  const expandAxis = useMemo(() => isExpandAxis(kind, resolveBarGroups(geometry)), [kind, geometry]);
+  const categoryAxis = (orientation === 'vertical' ? xAxis : yAxis)?.[0];
+  const valueAxis = (orientation === 'vertical' ? yAxis : xAxis)?.[0];
+  const categoryKey = categoryAxis?.dataKey;
+  const categoryLabelPosition = categoryAxis?.position;
+  const showTicks = valueAxis?.position !== 'none';
+  const showGrid = grid === undefined ? true : (orientation === 'vertical' ? grid.horizontal : grid.vertical) === true;
+  const tickLabelInterval = categoryAxis?.tickLabelInterval;
+  const categories = useMemo(() => dataset.map((row, index) => {
+    if (categoryKey === undefined) {
+      return String(index);
+    }
+    const raw = row[categoryKey];
+    return raw === null || raw === undefined ? '' : String(raw);
+  }), [dataset, categoryKey]);
+  const hasNegative = useMemo(() => dataset.some(row => geometry.some(item => (readBarValue(row, item.dataKey) ?? 0) < 0)), [dataset, geometry]);
+  const sourceById = useMemo(() => new Map(plan.series.map(item => [item.id, item])), [plan.series]);
+  const valueAxisMin = valueAxis?.min;
+  const valueAxisMax = valueAxis?.max;
+  const valueAxisTicks = valueAxis?.tickNumber;
+  const valueAxisFormatter = valueAxis?.valueFormatter;
+  const valueAxisConfig = useMemo(() => ({
+    min: valueAxisMin,
+    max: valueAxisMax,
+    tickNumber: valueAxisTicks
+  }), [valueAxisMin, valueAxisMax, valueAxisTicks]);
+  const percentFormatter = useMemo(() => value => value === null ? '' : formatChartPercent(value, locale), [locale]);
+  const formatTick = useMemo(() => {
+    const formatter = valueAxisFormatter ?? (expandAxis ? percentFormatter : defaultChartValueFormatter(locale));
+    return value => formatter(value, {
+      location: 'tick'
+    });
+  }, [valueAxisFormatter, expandAxis, percentFormatter, locale]);
+  const formatBar = (bar, location) => {
+    const source = sourceById.get(bar.seriesId);
+    const context = {
+      location,
+      seriesId: bar.seriesId,
+      dataIndex: bar.index
+    };
+    if (bar.expand === true && source?.valueFormatter === undefined) {
+      return (valueAxisFormatter ?? percentFormatter)(bar.plotValue / 100, context);
+    }
+    const formatter = resolveValueFormatter(source, valueAxis, locale);
+    const format = value => formatter(value, context);
+    return bar.waterfallRole === undefined ? format(bar.value) : formatWaterfallBarValue(bar, format);
+  };
+  const seriesLabelOf = bar => {
+    if (bar.waterfallRole === 'increase') {
+      return localeText.waterfallIncrease;
+    }
+    if (bar.waterfallRole === 'decrease') {
+      return localeText.waterfallDecrease;
+    }
+    return bar.seriesLabel;
+  };
+  const box = resolveBarChartBox(size, widthProp, heightProp);
+  const [hostWidth, handleHostLayout] = useChartHostWidth(onLayout);
+  const viewportWidth = hostWidth > 0 ? Math.min(hostWidth, box.width) : box.width;
+  const viewportHeight = box.height;
+  const gutters = useMemo(() => resolveBarChartGutters({
+    categories,
+    hasNegative,
+    orientation,
+    barLabel,
+    categoryLabelPosition,
+    showTicks,
+    overlay
+  }), [categories, hasNegative, orientation, barLabel, categoryLabelPosition, showTicks, overlay]);
+  const content = useMemo(() => resolveBarChartContentSize({
+    viewportWidth,
+    viewportHeight,
+    categoryCount: dataset.length,
+    orientation,
+    gutters,
+    scrollable,
+    visiblePoints
+  }), [viewportWidth, viewportHeight, dataset.length, orientation, gutters, scrollable, visiblePoints]);
+  const showCategoryLabel = useMemo(() => {
+    if (typeof tickLabelInterval !== 'function') {
+      return undefined;
+    }
+    return index => {
+      const row = dataset.at(index);
+      const value = row === undefined || categoryKey === undefined ? index : row[categoryKey];
+      return tickLabelInterval(value, index);
+    };
+  }, [tickLabelInterval, dataset, categoryKey]);
+  const layout = useMemo(() => layoutBarChart({
+    dataset,
+    categories,
+    series: geometry,
+    kind,
+    waterfallTotalKey: plan.totalKey,
+    width: content.width,
+    height: content.height,
+    orientation,
+    barLabel,
+    categoryLabelPosition,
+    showTicks,
+    referenceLines,
+    valueAxis: valueAxisConfig,
+    formatTick,
+    stackGap,
+    categoryGapRatio,
+    barGapRatio,
+    showCategoryLabel
+  }), [dataset, categories, geometry, kind, plan.totalKey, content.width, content.height, orientation, barLabel, categoryLabelPosition, showTicks, referenceLines, valueAxisConfig, formatTick, stackGap, categoryGapRatio, barGapRatio, showCategoryLabel]);
+  const overflowsX = content.width > viewportWidth + 0.5;
+  const overflowsY = content.height > viewportHeight + 0.5;
+  const fills = waterfall ? dataset.map((_, index) => palette[index % palette.length] ?? simpleColor) : plan.series.map((item, seriesIndex) => {
+    const custom = resolveChartColor(item.color, paints);
+    if (custom !== undefined) {
+      return custom;
+    }
+    if (overlay) {
+      return seriesIndex === 0 ? simpleColor : chrome.grid;
+    }
+    return paints[chartSeriesColor(seriesIndex, plan.series.length, paletteProp, 'bar')];
+  });
+  const summaryCategories = dataset.map((row, dataIndex) => ({
+    label: categories[dataIndex] ?? '',
+    values: plan.series.flatMap(item => {
+      const value = readBarValue(row, item.dataKey);
+      if (value === null) {
+        return [];
+      }
+      // An expand axis formats 0–1 shares; the summary reads raw values.
+      const formatter = resolveValueFormatter(item, expandAxis ? null : valueAxis, locale);
+      return [{
+        label: item.label ?? '',
+        formattedValue: formatter(value, {
+          location: 'a11y',
+          seriesId: item.id,
+          dataIndex
+        })
+      }];
+    })
+  }));
+  const summary = accessibilityLabel ?? localeText.barChartSummary(summaryCategories);
+  const trigger = tooltipProp?.trigger ?? 'axis';
+  const tooltip = trigger !== 'none';
+  const interactive = onSelectedItemChange !== undefined || selectedItem !== undefined || defaultSelectedItem !== undefined;
+  const [selectedState, setSelectedItem] = useControllableState({
+    prop: selectedItem,
+    defaultProp: defaultSelectedItem ?? null,
+    onChange: onSelectedItemChange
+  });
+  const selected = selectedState ?? null;
+  const visibleBars = layout.bars.filter(bar => bar.stackId !== undefined ? bar.width > 0 && bar.height > 0 : orientation === 'vertical' ? bar.width > 0 : bar.height > 0);
+  const inspectable = (interactive || tooltip) && visibleBars.length > 0;
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [dismissed, setDismissed] = useState(false);
+  const [scrubbing, setScrubbing] = useState(false);
+  const scrollOffset = useRef({
+    x: 0,
+    y: 0
+  });
+  const selectedIndex = selected ? visibleBars.findIndex(bar => sameItem(selected, barSelection(bar))) : -1;
+  const activeBar = activeIndex === null ? undefined : visibleBars.at(activeIndex);
+  const highlightBar = activeBar ? barSelection(activeBar) : selectedIndex >= 0 && selected !== null ? selected : null;
+  const tooltipIndex = tooltip && !dismissed && activeIndex !== null ? activeIndex : null;
+  const activate = index => {
+    setDismissed(false);
+    setActiveIndex(prev => prev === index ? prev : index);
+  };
+  const deactivate = index => {
+    setActiveIndex(prev => prev === index ? null : prev);
+  };
+  const showLegend = !waterfall && plan.series.length > 0 && !hideLegend;
+  const plot = /*#__PURE__*/_jsx(BarPlot, {
+    layout: layout,
+    orientation: orientation,
+    overlay: overlay,
+    waterfall: waterfall,
+    showGrid: showGrid,
+    barLabel: barLabel,
+    formatBar: formatBar,
+    formatStackTotal: anchor => {
+      const context = {
+        location: 'label',
+        dataIndex: anchor.index
+      };
+      if (anchor.expand) {
+        return (valueAxisFormatter ?? percentFormatter)(anchor.total / 100, context);
+      }
+      return resolveValueFormatter(sourceById.get(anchor.seriesId), valueAxis, locale)(anchor.total, context);
+    },
+    fills: fills,
+    gradientId: gradientId,
+    chrome: chrome,
+    accent: simpleColor,
+    borderRadius: Math.max(borderRadius, 0),
+    animated: animated,
+    highlightBar: highlightBar,
+    emphasizedIndex: emphasizedIndex
+  });
+  const vertical = orientation === 'vertical';
+  const targets = inspectable ? barInspectorTargets({
+    bars: visibleBars,
+    layout,
+    orientation,
+    overlay,
+    waterfall,
+    trigger,
+    offsetX: vertical ? layout.plot.x : 0,
+    fills,
+    fallbackFill: chrome.grid,
+    formatBar,
+    seriesLabelOf,
+    localeText,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : null
+  }) : [];
+  const tip = tooltipIndex === null ? undefined : targets.at(tooltipIndex);
+  const dismissOnScroll = event => {
+    scrollOffset.current = event.nativeEvent.contentOffset;
+    if (tooltipIndex !== null) {
+      setDismissed(true);
+    }
+  };
+  const inspector = inspectable ? /*#__PURE__*/_jsx(BarInspector, {
+    bars: visibleBars,
+    targets: targets,
+    orientation: orientation,
+    summary: summary,
+    selectable: interactive,
+    activeIndex: activeIndex,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : null,
+    holdToScrub: overflowsX || overflowsY,
+    onScrubLockChange: setScrubbing,
+    onActivate: activate,
+    onDeactivate: deactivate,
+    onDismiss: () => {
+      setDismissed(true);
+    },
+    onSelectIndex: index => {
+      const bar = visibleBars.at(index);
+      if (bar) {
+        setDismissed(false);
+        const next = barSelection(bar);
+        setSelectedItem(sameItem(selected, next) ? null : next);
+      }
+    }
+  }) : null;
+  const tooltipLayer = tip !== undefined ? /*#__PURE__*/_jsx(ChartTooltipLayer, {
+    content: tip.tooltip,
+    noValueText: localeText.noValue,
+    slot: "bar-chart",
+    anchorX: vertical ? layout.plot.x + tip.anchorX - scrollOffset.current.x : tip.anchorX,
+    anchorY: vertical ? tip.anchorY : tip.anchorY - scrollOffset.current.y,
+    anchorRadius: tip.anchorRadius,
+    width: viewportWidth,
+    height: viewportHeight
+  }) : null;
+  const ticks = showTicks ? /*#__PURE__*/_jsx(_Fragment, {
+    children: layout.valueTicks.map(tick => /*#__PURE__*/_jsx(SvgText, {
+      x: tick.x,
+      y: tick.y,
+      fill: chrome.label,
+      fontFamily: chrome.fontFamily,
+      fontSize: chrome.labelSize,
+      textAnchor: orientation === 'vertical' ? 'end' : 'middle',
+      alignmentBaseline: "middle",
+      children: tick.text
+    }, `tick-${String(tick.value)}`))
+  }) : null;
+  const chart = /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: '100%',
+      maxWidth: viewportWidth,
+      height: viewportHeight
+    },
+    ...dataAttributes({
+      slot: 'bar-chart-plot'
+    }),
+    children: [orientation === 'vertical' ? /*#__PURE__*/_jsxs(View, {
+      className: "w-full flex-row",
+      style: {
+        height: viewportHeight
+      },
+      children: [/*#__PURE__*/_jsx(Svg, {
+        width: layout.plot.x,
+        height: viewportHeight,
+        viewBox: `0 0 ${String(layout.plot.x)} ${String(content.height)}`,
+        ...HIDDEN_SVG_PROPS,
+        children: ticks
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        nestedScrollEnabled: true,
+        scrollEnabled: overflowsX && !scrubbing,
+        showsHorizontalScrollIndicator: overflowsX,
+        scrollEventThrottle: 16,
+        onScroll: dismissOnScroll,
+        className: "flex-1",
+        style: {
+          height: viewportHeight
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            width: content.width - layout.plot.x,
+            height: viewportHeight
+          },
+          children: [/*#__PURE__*/_jsx(Svg, {
+            width: content.width - layout.plot.x,
+            height: viewportHeight,
+            viewBox: `0 0 ${String(content.width - layout.plot.x)} ${String(content.height)}`,
+            style: SVG_OVERFLOW_VISIBLE,
+            pointerEvents: "none",
+            ...HIDDEN_SVG_PROPS,
+            children: /*#__PURE__*/_jsx(G, {
+              transform: `translate(${String(-layout.plot.x)}, 0)`,
+              children: plot
+            })
+          }), inspector]
+        })
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: viewportWidth,
+        height: viewportHeight
+      },
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        nestedScrollEnabled: true,
+        scrollEnabled: overflowsY && !scrubbing,
+        showsVerticalScrollIndicator: overflowsY,
+        scrollEventThrottle: 16,
+        onScroll: dismissOnScroll,
+        style: {
+          height: viewportHeight - gutters.paddingBottom
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            width: viewportWidth,
+            height: content.height - gutters.paddingBottom
+          },
+          children: [/*#__PURE__*/_jsx(Svg, {
+            width: viewportWidth,
+            height: content.height - gutters.paddingBottom,
+            viewBox: `0 0 ${String(content.width)} ${String(content.height - gutters.paddingBottom)}`,
+            pointerEvents: "none",
+            ...HIDDEN_SVG_PROPS,
+            children: plot
+          }), inspector]
+        })
+      }), /*#__PURE__*/_jsx(Svg, {
+        width: viewportWidth,
+        height: gutters.paddingBottom,
+        viewBox: `0 0 ${String(content.width)} ${String(gutters.paddingBottom)}`,
+        ...HIDDEN_SVG_PROPS,
+        children: /*#__PURE__*/_jsx(G, {
+          transform: `translate(0, ${String(-(content.height - gutters.paddingBottom))})`,
+          children: ticks
+        })
+      })]
+    }), tooltipLayer]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(barChartRootVariants(), className),
+    style: style,
+    accessible: !inspectable && !showLegend,
+    accessibilityRole: !inspectable && !showLegend ? 'image' : undefined,
+    accessibilityLabel: !inspectable && !showLegend ? summary : undefined,
+    ...props,
+    onLayout: handleHostLayout,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'bar-chart'
+    })),
+    children: [chart, showLegend ? /*#__PURE__*/_jsx(View, {
+      className: barChartLegendVariants(),
+      ...dataAttributes({
+        slot: 'bar-chart-legend'
+      }),
+      children: plan.series.map((item, seriesIndex) => {
+        const isSelected = highlightBar?.seriesId === item.id;
+        return /*#__PURE__*/_jsxs(View, {
+          className: barChartLegendItemVariants(),
+          ...dataAttributes({
+            slot: 'bar-chart-legend-item'
+          }),
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "h-2 w-3 rounded-sm",
+            style: {
+              backgroundColor: fills[seriesIndex]
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            className: barChartLegendLabelVariants({
+              selected: isSelected
+            }),
+            children: item.label !== undefined && item.label.length > 0 ? item.label : localeText.defaultSeriesLabel
+          })]
+        }, item.id);
+      })
+    }) : null]
+  });
+}
+
+/**
+ * Category bars from `dataset` rows. MUI X Charts–shaped: `series[].dataKey`, axis arrays,
+ * `layout`, `stack` groups, and `selectedItem`.
+ */
+export const BarChart = /*#__PURE__*/forwardRef(BarChartInner);
+BarChart.displayName = 'BarChart';
+function BarPlot({
+  layout,
+  orientation,
+  overlay,
+  waterfall,
+  showGrid,
+  barLabel,
+  formatBar,
+  formatStackTotal,
+  fills,
+  gradientId,
+  chrome,
+  accent,
+  borderRadius,
+  animated,
+  highlightBar,
+  emphasizedIndex
+}) {
+  const labeledBars = layout.bars.filter(bar => {
+    if (bar.stackId !== undefined) {
+      return false;
+    }
+    if (emphasizedIndex !== undefined && bar.index !== emphasizedIndex) {
+      return false;
+    }
+    return !overlay || bar.seriesIndex === 0;
+  });
+  const stackLabels = stackedTotalAnchors(layout.bars, orientation).filter(anchor => emphasizedIndex === undefined || anchor.index === emphasizedIndex);
+  const paintedBars = overlay ? [...layout.bars].sort((a, b) => b.seriesIndex - a.seriesIndex) : layout.bars;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ChartLinearFills, {
+      idPrefix: gradientId,
+      colors: fills,
+      x2: orientation === 'vertical' ? '0%' : '100%',
+      y2: orientation === 'vertical' ? '100%' : '0%'
+    }), showGrid ? layout.gridLines.map(line => /*#__PURE__*/_jsx(Line, {
+      x1: line.x1,
+      y1: line.y1,
+      x2: line.x2,
+      y2: line.y2,
+      stroke: chrome.grid,
+      strokeWidth: 1
+    }, `grid-${String(line.x1)}-${String(line.y1)}`)) : /*#__PURE__*/_jsx(Line, {
+      x1: orientation === 'vertical' ? layout.plot.x : layout.baseline,
+      y1: orientation === 'vertical' ? layout.baseline : layout.plot.y,
+      x2: orientation === 'vertical' ? layout.plot.x + layout.plot.width : layout.baseline,
+      y2: orientation === 'vertical' ? layout.baseline : layout.plot.y + layout.plot.height,
+      stroke: chrome.grid,
+      strokeWidth: 1
+    }), layout.referenceLines.map((line, index) => /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Line, {
+        x1: line.x1,
+        y1: line.y1,
+        x2: line.x2,
+        y2: line.y2,
+        stroke: accent,
+        strokeWidth: 1,
+        strokeDasharray: DASH
+      }), line.label !== undefined && line.label.length > 0 ? /*#__PURE__*/_jsx(SvgText, {
+        x: line.x1 + 4,
+        y: orientation === 'vertical' ? line.y1 - 4 : line.y1 + 12,
+        fill: accent,
+        fontFamily: chrome.fontFamily,
+        fontSize: chrome.captionSize,
+        textAnchor: "start",
+        children: line.label
+      }) : null]
+    }, `ref-${String(line.x1)}-${String(line.y1)}-${String(index)}`)), layout.connectors.map((line, index) => /*#__PURE__*/_jsx(Line, {
+      x1: line.x1,
+      y1: line.y1,
+      x2: line.x2,
+      y2: line.y2,
+      stroke: chrome.grid,
+      strokeWidth: 1,
+      strokeDasharray: DASH
+    }, `wf-${String(line.x1)}-${String(line.y1)}-${String(index)}`)), paintedBars.map(bar => {
+      if (bar.width <= 0 || bar.height <= 0) {
+        return null;
+      }
+      const dimmed = highlightBar !== null && (bar.stackId !== undefined ? !sameItem(highlightBar, barSelection(bar)) : highlightBar.dataIndex !== bar.index);
+      const muted = emphasizedIndex !== undefined && bar.index !== emphasizedIndex;
+      const comparison = overlay && bar.seriesIndex > 0;
+      return /*#__PURE__*/_jsx(AnimatedBar, {
+        bar: bar,
+        orientation: orientation,
+        baseline: layout.baseline,
+        animated: animated,
+        fill: muted || waterfall && dimmed ? chrome.grid : comparison || waterfall ? fills[bar.seriesIndex] ?? chrome.grid : chartFillUrl(gradientId, bar.seriesIndex),
+        opacity: waterfall ? 1 : dimmed ? INACTIVE_OPACITY : 1,
+        radius: borderRadius
+      }, `${String(bar.index)}-${bar.seriesId}`);
+    }), layout.categoryLabels.map((item, index) => /*#__PURE__*/_jsx(SvgText, {
+      x: item.x,
+      y: item.y,
+      fill: chrome.label,
+      fontFamily: chrome.fontFamily,
+      fontSize: chrome.labelSize,
+      textAnchor: item.textAnchor,
+      alignmentBaseline: "middle",
+      children: item.label
+    }, `cat-${String(index)}-${item.label}`)), barLabel ? /*#__PURE__*/_jsx(ValueLabels, {
+      animated: animated,
+      motionKey: `${orientation}-${overlay ? '1' : '0'}-${layout.bars.map(bar => [bar.x, bar.y, bar.width, bar.height].join(',')).join(';')}`,
+      children: labelOpacity => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [stackLabels.map(label => /*#__PURE__*/_jsx(SvgText, {
+          x: label.x,
+          y: label.y,
+          fill: chrome.label,
+          fillOpacity: labelOpacity,
+          fontFamily: chrome.fontFamily,
+          fontSize: chrome.captionSize,
+          textAnchor: label.textAnchor,
+          alignmentBaseline: "middle",
+          children: formatStackTotal(label)
+        }, `stack-val-${label.key}`)), labeledBars.map(bar => {
+          const anchor = waterfall ? waterfallValueAnchor(bar, orientation) : barValueAnchor(bar, orientation);
+          return /*#__PURE__*/_jsx(G, {
+            children: /*#__PURE__*/_jsx(SvgText, {
+              x: anchor.x,
+              y: anchor.y,
+              fill: chrome.label,
+              fillOpacity: labelOpacity,
+              fontFamily: chrome.fontFamily,
+              fontSize: chrome.captionSize,
+              textAnchor: anchor.textAnchor,
+              alignmentBaseline: "middle",
+              children: formatBar(bar, 'label')
+            })
+          }, `val-${String(bar.index)}-${bar.seriesId}`);
+        })]
+      })
+    }) : null]
+  });
+}
+function barTooltipContent(group, bar, trigger, fills, fallbackFill, formatBar, seriesLabelOf) {
+  const shown = trigger === 'axis' ? group : [bar];
+  return {
+    title: bar.label,
+    items: shown.map(item => ({
+      seriesId: item.seriesId,
+      label: seriesLabelOf(item),
+      color: fills[item.seriesIndex] ?? fallbackFill,
+      formattedValue: formatBar(item, 'tooltip')
+    }))
+  };
+}
+
+/**
+ * One hit target per drawn bar. Grouped bars get the full value-axis span of their slot so short
+ * bars stay easy to hover. Stacked segments keep their own rect, expanded to a 44px minimum
+ * (WCAG 2.5.8 / HIG) so a 9px-tall bar is still a usable touch target.
+ */
+/** Targets in scroll-content coordinates, shifted left by `offsetX`. */
+function barInspectorTargets({
+  bars,
+  layout,
+  orientation,
+  overlay,
+  waterfall,
+  trigger,
+  offsetX,
+  fills,
+  fallbackFill,
+  formatBar,
+  seriesLabelOf,
+  localeText,
+  selectedIndex
+}) {
+  const {
+    plot
+  } = layout;
+  const vertical = orientation === 'vertical';
+  const groups = new Map();
+  bars.forEach(bar => {
+    const group = groups.get(bar.index);
+    if (group === undefined) {
+      groups.set(bar.index, [bar]);
+    } else {
+      group.push(bar);
+    }
+  });
+  const outlines = new Map([...groups].map(([categoryIndex, group]) => {
+    const start = Math.min(...group.map(item => vertical ? item.x : item.y));
+    const end = Math.max(...group.map(item => vertical ? item.x + item.width : item.y + item.height));
+    const outline = vertical ? {
+      left: start - offsetX - 4,
+      top: plot.y,
+      width: end - start + 8,
+      height: plot.height
+    } : {
+      left: plot.x - offsetX,
+      top: start - 4,
+      width: plot.width,
+      height: end - start + 8
+    };
+    return [categoryIndex, outline];
+  }));
+  const trendText = bar => {
+    if (!overlay || bar.seriesIndex !== 0) {
+      return null;
+    }
+    const group = groups.get(bar.index) ?? [];
+    const delta = overlayDelta(group, bar.index);
+    if (delta === null) {
+      return null;
+    }
+    const comparison = group.find(item => item.seriesIndex === 1);
+    return localeText.trend({
+      direction: delta > 0 ? 'up' : delta < 0 ? 'down' : 'none',
+      formattedDelta: formatBar({
+        ...bar,
+        value: Math.abs(delta)
+      }, 'a11y'),
+      comparisonLabel: comparison?.seriesLabel ?? ''
+    });
+  };
+  return bars.map((bar, index) => {
+    const x = bar.x - offsetX;
+    const raw = bar.stackId !== undefined || waterfall || !vertical ? {
+      left: x,
+      top: bar.y,
+      width: bar.width,
+      height: bar.height
+    } : {
+      left: x,
+      top: plot.y,
+      width: bar.width,
+      height: plot.height
+    };
+    const box = expandHitBox(raw.left, raw.top, raw.width, raw.height);
+    const group = groups.get(bar.index) ?? [bar];
+    const outline = outlines.get(bar.index);
+    return {
+      key: `hit-${String(bar.index)}-${bar.seriesId}`,
+      ...box,
+      outline,
+      anchorX: vertical ? x + bar.width / 2 : x + bar.width,
+      anchorY: bar.y,
+      anchorRadius: vertical ? bar.width / 2 : 0,
+      tooltip: barTooltipContent(group, bar, trigger === 'item' ? 'item' : 'axis', fills, fallbackFill, formatBar, seriesLabelOf),
+      accessibilityLabel: barAccessibilityName(bar.label, seriesLabelOf(bar), formatBar(bar, 'a11y'), trendText(bar)),
+      selected: selectedIndex === index
+    };
+  });
+}
+function BarInspector({
+  bars,
+  targets,
+  orientation,
+  summary,
+  selectable,
+  activeIndex,
+  selectedIndex,
+  onActivate,
+  onDeactivate,
+  onDismiss,
+  onSelectIndex,
+  holdToScrub,
+  onScrubLockChange
+}) {
+  return /*#__PURE__*/_jsx(ChartInspector, {
+    targets: targets,
+    summary: summary,
+    selectable: selectable,
+    activeIndex: activeIndex,
+    selectedIndex: selectedIndex,
+    slot: "bar-chart",
+    holdToScrub: holdToScrub,
+    onScrubLockChange: onScrubLockChange,
+    hitTest: (x, y) => {
+      let best = null;
+      let bestDist = Number.POSITIVE_INFINITY;
+      targets.forEach((target, index) => {
+        if (x < target.left || x > target.left + target.width || y < target.top || y > target.top + target.height) {
+          return;
+        }
+        const dist = Math.hypot(x - (target.left + target.width / 2), y - (target.top + target.height / 2));
+        if (dist < bestDist) {
+          bestDist = dist;
+          best = index;
+        }
+      });
+      return best;
+    },
+    onActivate: onActivate,
+    onDeactivate: onDeactivate,
+    onDismiss: onDismiss,
+    onSelectIndex: onSelectIndex,
+    neighborIndex: (index, key) => barKeyboardNeighbor(bars, index, key, orientation)
+  });
+}
+function collapsedBar(bar, orientation, baseline) {
+  if (orientation === 'vertical') {
+    const onBaseline = Math.abs((bar.plotValue >= 0 ? bar.y + bar.height : bar.y) - baseline) < 1;
+    return onBaseline ? [bar.x, baseline, bar.width, 0] : [bar.x, bar.y + bar.height, bar.width, 0];
+  }
+  const onBaseline = Math.abs((bar.plotValue >= 0 ? bar.x : bar.x + bar.width) - baseline) < 1;
+  return onBaseline ? [baseline, bar.y, 0, bar.height] : [bar.x, bar.y, 0, bar.height];
+}
+function AnimatedBar({
+  bar,
+  orientation,
+  baseline,
+  animated,
+  fill,
+  opacity,
+  radius
+}) {
+  const {
+    rounded,
+    roundAll,
+    value
+  } = bar;
+  const morph = useChartMorph([bar.x, bar.y, bar.width, bar.height], collapsedBar(bar, orientation, baseline), animated);
+  const {
+    from,
+    to,
+    progress
+  } = morph;
+  const animatedProps = useAnimatedProps(() => {
+    const [x = 0, y = 0, width = 0, height = 0] = lerpVector(from.get(), to.get(), progress.get());
+    return {
+      d: barPath({
+        x,
+        y,
+        width,
+        height,
+        rounded,
+        roundAll,
+        value
+      }, orientation, radius)
+    };
+  }, [from, to, progress, rounded, roundAll, value, orientation, radius]);
+  return /*#__PURE__*/_jsx(AnimatedPath, {
+    animatedProps: animatedProps,
+    fill: fill,
+    opacity: opacity
+  });
+}
+function ValueLabels({
+  animated,
+  motionKey,
+  children
+}) {
+  const [shownKey, setShownKey] = useState(animated ? null : motionKey);
+  useEffect(() => {
+    if (!animated) {
+      setShownKey(motionKey);
+      return;
+    }
+    const id = setTimeout(() => setShownKey(motionKey), CHART_MOTION_DURATION);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [animated, motionKey]);
+  if (!animated) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children(1)
+    });
+  }
+  if (shownKey !== motionKey) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(FadeInLabels, {
+    children: children
+  }, motionKey);
+}
+
+/** Group opacity on native SVG flashes a full-opacity frame; fade each text's fill instead. */
+function FadeInLabels({
+  children
+}) {
+  const [opacity, setOpacity] = useState(0);
+  useEffect(() => {
+    let frame = 0;
+    const started = Date.now();
+    const tick = () => {
+      const t = Math.min(1, (Date.now() - started) / LABEL_FADE_DURATION);
+      setOpacity(1 - (1 - t) ** 3);
+      if (t < 1) {
+        frame = requestAnimationFrame(tick);
+      }
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children(opacity)
+  });
+}
+//# sourceMappingURL=index.js.map