@langchain/macaw-components 1.0.0-beta.0

package/dist/components/BarChart/BarChart.js

@@ -0,0 +1,248 @@
+import { cn } from "../../utils/cn.js";
+import "../../utils/chartConstants.js";
+import { clamp } from "../../utils/clamp.js";
+import { formatBarChartValue, getBarChartCategories, getBarChartLayout, getBarChartValueDomain, normalizeBarChartSeries } from "./BarChart.utils.js";
+import { getCategoricalFillChartColor } from "../../utils/chartColors.js";
+import { getYAxisLeftMargin } from "../../utils/getYAxisLeftMargin.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { BAR_CHART_DEFAULT_AXIS_ID, BAR_CHART_DEFAULT_GROUP_PADDING } from "./constants.js";
+import { BarChartPlot } from "./BarChartPlot.js";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useResizeObserver } from "@mantine/hooks";
+import { scaleLinear } from "@visx/scale";
+import { getStringWidth } from "@visx/text";
+//#region packages/components/src/components/BarChart/BarChart.tsx
+var HORIZONTAL_VALUE_TICK_LABEL_GAP = 8;
+var getAxisIds = (configuredAxes, series) => {
+	const axisIds = Array.from(new Set(configuredAxes?.map((axis) => axis.id) ?? []));
+	for (const item of series) if (!axisIds.includes(item.valueAxisId)) axisIds.push(item.valueAxisId);
+	return axisIds.length === 0 ? [BAR_CHART_DEFAULT_AXIS_ID] : axisIds;
+};
+var getHorizontalValueAxisEdgeMargin = (config, bars) => {
+	const scale = scaleLinear({
+		domain: getBarChartValueDomain(bars, config.id, config.domain),
+		range: [0, 1],
+		nice: config.nice ?? config.domain == null
+	});
+	const tickValues = config.tickValues ?? scale.ticks(config.tickCount ?? 4);
+	const formatValue = config.formatValue ?? formatBarChartValue;
+	const tickLabelStyle = { fontSize: `12px` };
+	const maximumTickLabelWidth = Math.max(0, ...tickValues.map((value) => getStringWidth(formatValue(value), tickLabelStyle) ?? 0));
+	return Math.ceil(maximumTickLabelWidth / 2);
+};
+var getAutomaticHorizontalValueAxisTickCount = (config, bars, innerWidth) => {
+	const scale = scaleLinear({
+		domain: getBarChartValueDomain(bars, config.id, config.domain),
+		range: [0, innerWidth],
+		nice: config.nice ?? config.domain == null
+	});
+	const formatValue = config.formatValue ?? formatBarChartValue;
+	const tickLabelStyle = { fontSize: `12px` };
+	const minimumTickSpacing = Math.max(0, ...scale.ticks(4).map((value) => getStringWidth(formatValue(value), tickLabelStyle) ?? formatValue(value).length * 12)) + HORIZONTAL_VALUE_TICK_LABEL_GAP;
+	return Math.max(1, Math.min(4, Math.floor(innerWidth / minimumTickSpacing)));
+};
+var resolveAxes = (configuredAxes, bars, orientation, innerWidth, innerHeight) => {
+	return configuredAxes.map((config) => {
+		return {
+			...config,
+			scale: scaleLinear({
+				domain: getBarChartValueDomain(bars, config.id, config.domain),
+				range: orientation === "vertical" ? [innerHeight, 0] : [0, innerWidth],
+				nice: config.nice ?? config.domain == null
+			})
+		};
+	});
+};
+/**
+* Responsive, presentational bars for categorical and time-bucket data. Supports
+* vertical or horizontal orientation, grouped or signed stacks, multiple value
+* axes, threshold bands, controlled legend filtering, selection and active
+* states, keyboard targets, and consumer-owned SVG slots. Bars always use
+* square corners in every orientation and mode.
+*
+* The component is deliberately presentational: consumers retain fetching,
+* sorting, Top-K/Other aggregation, formatting, tooltip content, links, frozen
+* interaction state, and the loading and empty states — pair it with
+* `ChartCard`, `ChartTooltip`, and `EmptyState`. Reach for `slots` before asking
+* for a new prop; each slot receives the resolved scales and geometry.
+*
+* @example
+* ```tsx
+* <BarChart
+*   aria-label="Requests by environment"
+*   series={[{ id: 'prod', label: 'Production', data }]}
+*   selectedIds={selectedIds}
+*   legendProps={{ onItemClick: (item) => toggleId(item.id) }}
+* />
+* ```
+*/
+var BarChart = ({ series, categoryAxis, valueAxes, mode = "grouped", orientation = "vertical", selectedIds, grid, valueBands = [], activeCategory, activeGuideBarId, activeBarId, activeLegendItemId, selectionRange, categoryPadding, plotPadding, minimumPlotWidth = 160, groupPadding = BAR_CHART_DEFAULT_GROUP_PADDING, minimumBarSize = 1, shouldAnimate = true, slots, isRendering = true, showLegend, legendProps, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, getBarAriaLabel, getCategoryAriaLabel, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, onDatumActivate, onDatumFocus, onDatumBlur, onBarPointerMove, onBarPointerOut, onBarActivate, onBarFocus, onBarBlur, ...rest }) => {
+	const [containerRef, dimensions] = useResizeObserver();
+	const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState(null);
+	const isVertical = orientation === "vertical";
+	const { displaySeries, visibleSeries, categories, bars, axisIds } = useMemo(() => {
+		const normalized = normalizeBarChartSeries(series);
+		const defaultAxisId = valueAxes?.[0]?.id ?? "bar-chart-default-axis";
+		const resolved = normalized.map((item, index) => ({
+			...item,
+			color: item.color ?? (normalized.length === 1 ? "var(--chart-single-fill)" : getCategoricalFillChartColor(index)),
+			valueAxisId: item.valueAxisId ?? defaultAxisId,
+			opacity: item.opacity == null || !Number.isFinite(item.opacity) ? 1 : clamp(item.opacity, 0, 1)
+		}));
+		const visible = selectedIds == null || selectedIds.size === 0 ? resolved : resolved.filter((item) => selectedIds.has(item.id));
+		const allCategories = getBarChartCategories(resolved, categoryAxis?.domain);
+		return {
+			displaySeries: resolved,
+			visibleSeries: visible,
+			categories: allCategories,
+			bars: getBarChartLayout(visible, allCategories, mode),
+			axisIds: getAxisIds(valueAxes, visible)
+		};
+	}, [
+		series,
+		valueAxes,
+		selectedIds,
+		categoryAxis?.domain,
+		mode
+	]);
+	const getValueAxisThickness = (config) => {
+		if (config?.thickness != null) return Math.max(0, config.thickness);
+		const labelThickness = config?.label == null ? 0 : 20;
+		if (!isVertical) return 32 + labelThickness;
+		return Math.max(48, getYAxisLeftMargin({
+			yDomain: getBarChartValueDomain(bars, config.id, config.domain),
+			formatTick: config?.formatValue ?? formatBarChartValue,
+			fontSize: 12,
+			numTicks: config?.tickCount ?? 4,
+			tickValues: config?.tickValues,
+			tickLength: 8,
+			nice: config?.nice ?? config?.domain == null
+		})) + labelThickness;
+	};
+	const configuredAxesById = new Map(valueAxes?.map((axis) => [axis.id, axis]) ?? []);
+	const resolvedValueAxes = axisIds.map((axisId) => {
+		const config = configuredAxesById.get(axisId) ?? { id: axisId };
+		return {
+			...config,
+			thickness: getValueAxisThickness(config)
+		};
+	});
+	const primaryAxisThickness = resolvedValueAxes[0]?.thickness ?? 48;
+	const secondaryAxisThickness = resolvedValueAxes.slice(1).reduce((total, axis) => total + axis.thickness, 0);
+	const padding = {
+		top: Math.max(0, plotPadding?.top ?? 0),
+		right: Math.max(0, plotPadding?.right ?? 0),
+		bottom: Math.max(0, plotPadding?.bottom ?? 0),
+		left: Math.max(0, plotPadding?.left ?? 0)
+	};
+	const defaultCategoryAxisThickness = (isVertical ? 32 : 112) + (categoryAxis?.label == null ? 0 : 20);
+	const categoryAxisThickness = categoryAxis?.thickness ?? defaultCategoryAxisThickness;
+	const horizontalValueAxisEdgeMargin = isVertical ? 0 : Math.max(0, ...resolvedValueAxes.map((axis) => getHorizontalValueAxisEdgeMargin(axis, bars)));
+	const chartMargin = isVertical ? {
+		top: 8 + padding.top,
+		right: 8 + secondaryAxisThickness + padding.right,
+		bottom: categoryAxisThickness + padding.bottom,
+		left: primaryAxisThickness + padding.left
+	} : {
+		top: 8 + secondaryAxisThickness + padding.top,
+		right: Math.max(8, horizontalValueAxisEdgeMargin) + padding.right,
+		bottom: primaryAxisThickness + padding.bottom,
+		left: Math.max(categoryAxisThickness, horizontalValueAxisEdgeMargin) + padding.left
+	};
+	const chartWidth = dimensions.width === 0 ? 0 : Math.max(dimensions.width, chartMargin.left + chartMargin.right + Math.max(0, minimumPlotWidth));
+	const innerWidth = Math.max(0, chartWidth - chartMargin.left - chartMargin.right);
+	const innerHeight = Math.max(0, dimensions.height - chartMargin.top - chartMargin.bottom);
+	const axes = resolveAxes(isVertical ? resolvedValueAxes : resolvedValueAxes.map((axis) => axis.tickCount != null || axis.tickValues != null ? axis : {
+		...axis,
+		tickCount: getAutomaticHorizontalValueAxisTickCount(axis, bars, innerWidth)
+	}), bars, orientation, innerWidth, innerHeight);
+	const legendItems = displaySeries.map((item) => ({
+		id: item.id,
+		label: item.label,
+		markerColor: item.color,
+		selected: selectedIds?.has(item.id) ?? false
+	}));
+	const hasLegend = (showLegend ?? legendItems.length > 1) && legendItems.length > 0;
+	const legendLayout = legendProps?.layout ?? "inline";
+	const plot = /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("relative size-full min-h-0 min-w-0 overflow-y-hidden", minimumPlotWidth <= 0 ? "overflow-x-hidden" : "overflow-x-auto"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "h-full min-h-0",
+			style: { width: chartWidth },
+			children: /* @__PURE__ */ jsx(BarChartPlot, {
+				width: chartWidth,
+				height: dimensions.height,
+				innerWidth,
+				innerHeight,
+				chartMargin,
+				categories,
+				series: visibleSeries,
+				bars,
+				axes,
+				orientation,
+				categoryAxis,
+				categoryAxisThickness,
+				categoryPadding: {
+					inner: clamp(categoryPadding?.inner ?? .2, 0, 1),
+					outer: clamp(categoryPadding?.outer ?? .1, 0, 1)
+				},
+				groupPadding: clamp(groupPadding, 0, .95),
+				minimumBarSize: Math.max(0, minimumBarSize),
+				shouldAnimate,
+				grid,
+				valueBands,
+				activeCategory,
+				activeGuideBarId,
+				activeBarId,
+				activeBuiltInLegendItemId: hasLegend ? activeBuiltInLegendItemId : null,
+				activeLegendItemId,
+				selectionRange,
+				slots,
+				isRendering,
+				"aria-label": ariaLabel,
+				"aria-describedby": ariaDescribedBy,
+				getBarAriaLabel,
+				getCategoryAriaLabel,
+				onDatumPointerDown,
+				onDatumPointerMove,
+				onDatumPointerOut,
+				onDatumPointerUp,
+				onDatumActivate,
+				onDatumFocus,
+				onDatumBlur,
+				onBarPointerMove,
+				onBarPointerOut,
+				onBarActivate,
+				onBarFocus,
+				onBarBlur
+			})
+		})
+	});
+	const legend = /* @__PURE__ */ jsx(ChartLegend, {
+		"aria-label": `${ariaLabel} legend`,
+		...legendProps,
+		layout: legendLayout,
+		items: legendItems,
+		onItemActiveChange: (item) => {
+			setActiveBuiltInLegendItemId(item?.id ?? null);
+			legendProps?.onItemActiveChange?.(item);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("size-full min-h-0 min-w-0 @container", className),
+		...rest,
+		children: hasLegend ? /* @__PURE__ */ jsx("div", {
+			className: cn("grid size-full min-h-0 min-w-0 grid-cols-1", legendLayout === "list" ? "grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5" : "grid-rows-[auto_minmax(0,1fr)] gap-space-2"),
+			children: legendLayout === "list" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [plot, /* @__PURE__ */ jsx("div", {
+				className: "scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden",
+				children: legend
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [legend, plot] })
+		}) : plot
+	});
+};
+//#endregion
+export { BarChart };
+
+//# sourceMappingURL=BarChart.js.map

package/dist/components/BarChart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { useResizeObserver } from '@mantine/hooks';\nimport { scaleLinear } from '@visx/scale';\nimport { getStringWidth } from '@visx/text';\n\nimport {\n  CHART_SINGLE_FILL_COLOR,\n  getCategoricalFillChartColor,\n} from '../../utils/chartColors';\nimport {\n  CHART_AXIS_LABEL_THICKNESS,\n  CHART_TICK_FONT_SIZE,\n  CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport { clamp } from '../../utils/clamp';\nimport { cn } from '../../utils/cn';\nimport { getYAxisLeftMargin } from '../../utils/getYAxisLeftMargin';\nimport { ChartLegend, type ChartLegendItem } from '../ChartLegend';\nimport type {\n  BarChartDisplayAxis,\n  BarChartDisplaySeries,\n  BarChartLayoutBar,\n  BarChartOrientation,\n  BarChartProps,\n  BarChartValueAxis,\n} from './BarChart.types';\nimport {\n  formatBarChartValue,\n  getBarChartCategories,\n  getBarChartLayout,\n  getBarChartValueDomain,\n  normalizeBarChartSeries,\n} from './BarChart.utils';\nimport { BarChartPlot } from './BarChartPlot';\nimport {\n  BAR_CHART_AXIS_THICKNESS,\n  BAR_CHART_DEFAULT_AXIS_ID,\n  BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER,\n  BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER,\n  BAR_CHART_DEFAULT_GROUP_PADDING,\n  BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE,\n  BAR_CHART_DEFAULT_TICK_COUNT,\n  BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS,\n  BAR_CHART_MARGIN_RIGHT,\n  BAR_CHART_MARGIN_TOP,\n  BAR_CHART_MINIMUM_PLOT_WIDTH,\n  BAR_CHART_VALUE_AXIS_THICKNESS,\n} from './constants';\n\nconst HORIZONTAL_VALUE_TICK_LABEL_GAP = 8;\n\nconst getAxisIds = (\n  configuredAxes: readonly BarChartValueAxis[] | undefined,\n  series: readonly BarChartDisplaySeries[]\n): readonly string[] => {\n  const axisIds = Array.from(\n    new Set(configuredAxes?.map((axis) => axis.id) ?? [])\n  );\n  for (const item of series) {\n    if (!axisIds.includes(item.valueAxisId)) axisIds.push(item.valueAxisId);\n  }\n  return axisIds.length === 0 ? [BAR_CHART_DEFAULT_AXIS_ID] : axisIds;\n};\n\nconst getHorizontalValueAxisEdgeMargin = (\n  config: BarChartValueAxis,\n  bars: readonly BarChartLayoutBar[]\n) => {\n  const scale = scaleLinear<number>({\n    domain: getBarChartValueDomain(bars, config.id, config.domain),\n    range: [0, 1],\n    nice: config.nice ?? config.domain == null,\n  });\n  const tickValues =\n    config.tickValues ??\n    scale.ticks(config.tickCount ?? BAR_CHART_DEFAULT_TICK_COUNT);\n  const formatValue = config.formatValue ?? formatBarChartValue;\n  const tickLabelStyle = { fontSize: `${CHART_TICK_FONT_SIZE}px` };\n  const maximumTickLabelWidth = Math.max(\n    0,\n    ...tickValues.map(\n      (value) => getStringWidth(formatValue(value), tickLabelStyle) ?? 0\n    )\n  );\n  return Math.ceil(maximumTickLabelWidth / 2);\n};\n\nconst getAutomaticHorizontalValueAxisTickCount = (\n  config: BarChartValueAxis,\n  bars: readonly BarChartLayoutBar[],\n  innerWidth: number\n) => {\n  const scale = scaleLinear<number>({\n    domain: getBarChartValueDomain(bars, config.id, config.domain),\n    range: [0, innerWidth],\n    nice: config.nice ?? config.domain == null,\n  });\n  const formatValue = config.formatValue ?? formatBarChartValue;\n  const tickLabelStyle = { fontSize: `${CHART_TICK_FONT_SIZE}px` };\n  const maximumTickLabelWidth = Math.max(\n    0,\n    ...scale\n      .ticks(BAR_CHART_DEFAULT_TICK_COUNT)\n      .map(\n        (value) =>\n          getStringWidth(formatValue(value), tickLabelStyle) ??\n          formatValue(value).length * CHART_TICK_FONT_SIZE\n      )\n  );\n  const minimumTickSpacing =\n    maximumTickLabelWidth + HORIZONTAL_VALUE_TICK_LABEL_GAP;\n\n  return Math.max(\n    1,\n    Math.min(\n      BAR_CHART_DEFAULT_TICK_COUNT,\n      Math.floor(innerWidth / minimumTickSpacing)\n    )\n  );\n};\n\nconst resolveAxes = (\n  configuredAxes: readonly Omit<BarChartDisplayAxis, 'scale'>[],\n  bars: readonly BarChartLayoutBar[],\n  orientation: BarChartOrientation,\n  innerWidth: number,\n  innerHeight: number\n): readonly BarChartDisplayAxis[] => {\n  return configuredAxes.map((config) => {\n    return {\n      ...config,\n      scale: scaleLinear<number>({\n        domain: getBarChartValueDomain(bars, config.id, config.domain),\n        range: orientation === 'vertical' ? [innerHeight, 0] : [0, innerWidth],\n        nice: config.nice ?? config.domain == null,\n      }),\n    };\n  });\n};\n\n/**\n * Responsive, presentational bars for categorical and time-bucket data. Supports\n * vertical or horizontal orientation, grouped or signed stacks, multiple value\n * axes, threshold bands, controlled legend filtering, selection and active\n * states, keyboard targets, and consumer-owned SVG slots. Bars always use\n * square corners in every orientation and mode.\n *\n * The component is deliberately presentational: consumers retain fetching,\n * sorting, Top-K/Other aggregation, formatting, tooltip content, links, frozen\n * interaction state, and the loading and empty states — pair it with\n * `ChartCard`, `ChartTooltip`, and `EmptyState`. Reach for `slots` before asking\n * for a new prop; each slot receives the resolved scales and geometry.\n *\n * @example\n * ```tsx\n * <BarChart\n *   aria-label=\"Requests by environment\"\n *   series={[{ id: 'prod', label: 'Production', data }]}\n *   selectedIds={selectedIds}\n *   legendProps={{ onItemClick: (item) => toggleId(item.id) }}\n * />\n * ```\n */\nexport const BarChart = ({\n  series,\n  categoryAxis,\n  valueAxes,\n  mode = 'grouped',\n  orientation = 'vertical',\n  selectedIds,\n  grid,\n  valueBands = [],\n  activeCategory,\n  activeGuideBarId,\n  activeBarId,\n  activeLegendItemId,\n  selectionRange,\n  categoryPadding,\n  plotPadding,\n  minimumPlotWidth = BAR_CHART_MINIMUM_PLOT_WIDTH,\n  groupPadding = BAR_CHART_DEFAULT_GROUP_PADDING,\n  minimumBarSize = BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE,\n  shouldAnimate = true,\n  slots,\n  isRendering = true,\n  showLegend,\n  legendProps,\n  className,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  getBarAriaLabel,\n  getCategoryAriaLabel,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  onDatumActivate,\n  onDatumFocus,\n  onDatumBlur,\n  onBarPointerMove,\n  onBarPointerOut,\n  onBarActivate,\n  onBarFocus,\n  onBarBlur,\n  ...rest\n}: BarChartProps) => {\n  const [containerRef, dimensions] = useResizeObserver();\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const isVertical = orientation === 'vertical';\n\n  // The data half of the pipeline is independent of the measured size, and the\n  // documented tooltip pattern re-renders this component on every pointermove.\n  const { displaySeries, visibleSeries, categories, bars, axisIds } =\n    useMemo(() => {\n      const normalized = normalizeBarChartSeries(series);\n      const defaultAxisId = valueAxes?.[0]?.id ?? BAR_CHART_DEFAULT_AXIS_ID;\n      const resolved: readonly BarChartDisplaySeries[] = normalized.map(\n        (item, index) => ({\n          ...item,\n          color:\n            item.color ??\n            (normalized.length === 1\n              ? CHART_SINGLE_FILL_COLOR\n              : getCategoricalFillChartColor(index)),\n          valueAxisId: item.valueAxisId ?? defaultAxisId,\n          opacity:\n            item.opacity == null || !Number.isFinite(item.opacity)\n              ? 1\n              : clamp(item.opacity, 0, 1),\n        })\n      );\n      const visible =\n        selectedIds == null || selectedIds.size === 0\n          ? resolved\n          : resolved.filter((item) => selectedIds.has(item.id));\n      const allCategories = getBarChartCategories(\n        resolved,\n        categoryAxis?.domain\n      );\n      return {\n        displaySeries: resolved,\n        visibleSeries: visible,\n        categories: allCategories,\n        bars: getBarChartLayout(visible, allCategories, mode),\n        axisIds: getAxisIds(valueAxes, visible),\n      };\n    }, [series, valueAxes, selectedIds, categoryAxis?.domain, mode]);\n\n  // A vertical value axis is only as wide as its widest tick label needs, so\n  // currency and large counts are not clipped by a fixed gutter.\n  const getValueAxisThickness = (config: BarChartValueAxis) => {\n    if (config?.thickness != null) return Math.max(0, config.thickness);\n    const labelThickness =\n      config?.label == null ? 0 : CHART_AXIS_LABEL_THICKNESS;\n    if (!isVertical) return BAR_CHART_AXIS_THICKNESS + labelThickness;\n    return (\n      Math.max(\n        BAR_CHART_VALUE_AXIS_THICKNESS,\n        getYAxisLeftMargin({\n          yDomain: getBarChartValueDomain(bars, config.id, config.domain),\n          formatTick: config?.formatValue ?? formatBarChartValue,\n          fontSize: CHART_TICK_FONT_SIZE,\n          numTicks: config?.tickCount ?? BAR_CHART_DEFAULT_TICK_COUNT,\n          tickValues: config?.tickValues,\n          tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n          nice: config?.nice ?? config?.domain == null,\n        })\n      ) + labelThickness\n    );\n  };\n  const configuredAxesById = new Map(\n    valueAxes?.map((axis) => [axis.id, axis]) ?? []\n  );\n  const resolvedValueAxes: readonly Omit<BarChartDisplayAxis, 'scale'>[] =\n    axisIds.map((axisId) => {\n      const config = configuredAxesById.get(axisId) ?? { id: axisId };\n      return {\n        ...config,\n        thickness: getValueAxisThickness(config),\n      };\n    });\n  const primaryAxisThickness =\n    resolvedValueAxes[0]?.thickness ?? BAR_CHART_VALUE_AXIS_THICKNESS;\n  const secondaryAxisThickness = resolvedValueAxes\n    .slice(1)\n    .reduce((total, axis) => total + axis.thickness, 0);\n  const padding = {\n    top: Math.max(0, plotPadding?.top ?? 0),\n    right: Math.max(0, plotPadding?.right ?? 0),\n    bottom: Math.max(0, plotPadding?.bottom ?? 0),\n    left: Math.max(0, plotPadding?.left ?? 0),\n  };\n  const defaultCategoryAxisThickness =\n    (isVertical\n      ? BAR_CHART_AXIS_THICKNESS\n      : BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS) +\n    (categoryAxis?.label == null ? 0 : CHART_AXIS_LABEL_THICKNESS);\n  const categoryAxisThickness =\n    categoryAxis?.thickness ?? defaultCategoryAxisThickness;\n  const horizontalValueAxisEdgeMargin = isVertical\n    ? 0\n    : Math.max(\n        0,\n        ...resolvedValueAxes.map((axis) =>\n          getHorizontalValueAxisEdgeMargin(axis, bars)\n        )\n      );\n  const chartMargin = isVertical\n    ? {\n        top: BAR_CHART_MARGIN_TOP + padding.top,\n        right: BAR_CHART_MARGIN_RIGHT + secondaryAxisThickness + padding.right,\n        bottom: categoryAxisThickness + padding.bottom,\n        left: primaryAxisThickness + padding.left,\n      }\n    : {\n        top: BAR_CHART_MARGIN_TOP + secondaryAxisThickness + padding.top,\n        right:\n          Math.max(BAR_CHART_MARGIN_RIGHT, horizontalValueAxisEdgeMargin) +\n          padding.right,\n        bottom: primaryAxisThickness + padding.bottom,\n        left:\n          Math.max(categoryAxisThickness, horizontalValueAxisEdgeMargin) +\n          padding.left,\n      };\n  const chartWidth =\n    dimensions.width === 0\n      ? 0\n      : Math.max(\n          dimensions.width,\n          chartMargin.left + chartMargin.right + Math.max(0, minimumPlotWidth)\n        );\n  const innerWidth = Math.max(\n    0,\n    chartWidth - chartMargin.left - chartMargin.right\n  );\n  const innerHeight = Math.max(\n    0,\n    dimensions.height - chartMargin.top - chartMargin.bottom\n  );\n  const sizedValueAxes = isVertical\n    ? resolvedValueAxes\n    : resolvedValueAxes.map((axis) =>\n        axis.tickCount != null || axis.tickValues != null\n          ? axis\n          : {\n              ...axis,\n              tickCount: getAutomaticHorizontalValueAxisTickCount(\n                axis,\n                bars,\n                innerWidth\n              ),\n            }\n      );\n  const axes = resolveAxes(\n    sizedValueAxes,\n    bars,\n    orientation,\n    innerWidth,\n    innerHeight\n  );\n  const legendItems: readonly ChartLegendItem[] = displaySeries.map((item) => ({\n    id: item.id,\n    label: item.label,\n    markerColor: item.color,\n    selected: selectedIds?.has(item.id) ?? false,\n  }));\n  const hasLegend =\n    (showLegend ?? legendItems.length > 1) && legendItems.length > 0;\n  const legendLayout = legendProps?.layout ?? 'inline';\n\n  const plot = (\n    <div\n      ref={containerRef}\n      className={cn(\n        'relative size-full min-h-0 min-w-0 overflow-y-hidden',\n        minimumPlotWidth <= 0 ? 'overflow-x-hidden' : 'overflow-x-auto'\n      )}\n    >\n      <div className=\"h-full min-h-0\" style={{ width: chartWidth }}>\n        <BarChartPlot\n          width={chartWidth}\n          height={dimensions.height}\n          innerWidth={innerWidth}\n          innerHeight={innerHeight}\n          chartMargin={chartMargin}\n          categories={categories}\n          series={visibleSeries}\n          bars={bars}\n          axes={axes}\n          orientation={orientation}\n          categoryAxis={categoryAxis}\n          categoryAxisThickness={categoryAxisThickness}\n          categoryPadding={{\n            inner: clamp(\n              categoryPadding?.inner ??\n                BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER,\n              0,\n              1\n            ),\n            outer: clamp(\n              categoryPadding?.outer ??\n                BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER,\n              0,\n              1\n            ),\n          }}\n          groupPadding={clamp(groupPadding, 0, 0.95)}\n          minimumBarSize={Math.max(0, minimumBarSize)}\n          shouldAnimate={shouldAnimate}\n          grid={grid}\n          valueBands={valueBands}\n          activeCategory={activeCategory}\n          activeGuideBarId={activeGuideBarId}\n          activeBarId={activeBarId}\n          activeBuiltInLegendItemId={\n            hasLegend ? activeBuiltInLegendItemId : null\n          }\n          activeLegendItemId={activeLegendItemId}\n          selectionRange={selectionRange}\n          slots={slots}\n          isRendering={isRendering}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          getBarAriaLabel={getBarAriaLabel}\n          getCategoryAriaLabel={getCategoryAriaLabel}\n          onDatumPointerDown={onDatumPointerDown}\n          onDatumPointerMove={onDatumPointerMove}\n          onDatumPointerOut={onDatumPointerOut}\n          onDatumPointerUp={onDatumPointerUp}\n          onDatumActivate={onDatumActivate}\n          onDatumFocus={onDatumFocus}\n          onDatumBlur={onDatumBlur}\n          onBarPointerMove={onBarPointerMove}\n          onBarPointerOut={onBarPointerOut}\n          onBarActivate={onBarActivate}\n          onBarFocus={onBarFocus}\n          onBarBlur={onBarBlur}\n        />\n      </div>\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={`${ariaLabel} legend`}\n      {...legendProps}\n      layout={legendLayout}\n      items={legendItems}\n      onItemActiveChange={(item) => {\n        setActiveBuiltInLegendItemId(item?.id ?? null);\n        legendProps?.onItemActiveChange?.(item);\n      }}\n    />\n  );\n\n  return (\n    <div\n      className={cn('size-full min-h-0 min-w-0 @container', className)}\n      {...rest}\n    >\n      {hasLegend ? (\n        <div\n          className={cn(\n            'grid size-full min-h-0 min-w-0 grid-cols-1',\n            legendLayout === 'list'\n              ? 'grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5'\n              : 'grid-rows-[auto_minmax(0,1fr)] gap-space-2'\n          )}\n        >\n          {legendLayout === 'list' ? (\n            <>\n              {plot}\n              <div className=\"scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n                {legend}\n              </div>\n            </>\n          ) : (\n            <>\n              {legend}\n              {plot}\n            </>\n          )}\n        </div>\n      ) : (\n        plot\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/BarChart/BarChart.types.d.ts

@@ -0,0 +1,239 @@
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, PointerEvent, ReactNode } from 'react';
+import type { scaleLinear } from '@visx/scale';
+import type { ChartLegendProps } from '../ChartLegend/index.js';
+export type BarChartCategory = string | number;
+export type BarChartDataPoint = {
+    /** Stable ID for controlled active state and callbacks. Must be unique within the chart. */
+    id?: string;
+    category: BarChartCategory;
+    /** Null renders a gap rather than a zero-height bar. */
+    value: number | null;
+    /** Overrides the series color for this bar. Use a design-system CSS chart color token. */
+    color?: string;
+    /** Legend item that represents this bar. Defaults to the containing series ID. */
+    legendItemId?: string;
+};
+export type BarChartSeries = {
+    id: string;
+    label: ReactNode;
+    /** Plain-text series name for assistive technology. Defaults to `label` when it is text, then `id`. */
+    ariaLabel?: string;
+    data: readonly BarChartDataPoint[];
+    /** Use a design-system CSS chart color token. */
+    color?: string;
+    valueAxisId?: string;
+    /** Series opacity from 0 to 1. Defaults to 1. */
+    opacity?: number;
+};
+export type BarChartMode = 'grouped' | 'stacked';
+export type BarChartOrientation = 'vertical' | 'horizontal';
+export type BarChartGrid = {
+    /** Guides parallel to the category axis. Defaults to true. */
+    value?: boolean;
+    /** Guides through category buckets. Defaults to false. */
+    category?: boolean;
+    /** Value guides to draw. Defaults to the primary value axis tick count. */
+    tickCount?: number;
+    /** Exact value guides to draw. Overrides `tickCount`. */
+    tickValues?: readonly number[];
+};
+export type BarChartCategoryAxis = {
+    label?: string;
+    /** Explicit category order. By default, first appearance wins. */
+    domain?: readonly BarChartCategory[];
+    /** Defaults to `String(category)`. */
+    formatValue?: (value: BarChartCategory) => string;
+    tickCount?: number;
+    tickValues?: readonly BarChartCategory[];
+    /** Reserved width for horizontal charts or height for vertical charts, in pixels. */
+    thickness?: number;
+};
+export type BarChartValueAxis = {
+    id: string;
+    label?: string;
+    domain?: readonly [number, number];
+    /** Rounds the domain out to whole tick values. Defaults to true only when `domain` is omitted. */
+    nice?: boolean;
+    /** Defaults to a plain `en-US` number; pass a unit-aware formatter for cost or duration. */
+    formatValue?: (value: number) => string;
+    tickCount?: number;
+    tickValues?: readonly number[];
+    /** Reserved width for vertical charts or height for horizontal charts, in pixels. */
+    thickness?: number;
+};
+export type BarChartValueBand = {
+    id: string;
+    /** Defaults to the primary value axis. */
+    valueAxisId?: string;
+    /** Defaults to the lower edge of the axis domain. */
+    from?: number;
+    /** Defaults to the upper edge of the axis domain. */
+    to?: number;
+    /** Use a design-system CSS chart color token. */
+    color: string;
+    /** Defaults to 0.5. */
+    opacity?: number;
+    ariaLabel?: string;
+};
+export type BarChartSelectionRange = {
+    from: BarChartCategory;
+    to: BarChartCategory;
+};
+export type BarChartDisplaySeries = BarChartSeries & {
+    color: string;
+    valueAxisId: string;
+    opacity: number;
+};
+export type BarChartLayoutBar = {
+    id: string;
+    category: BarChartCategory;
+    value: number;
+    startValue: number;
+    endValue: number;
+    seriesId: string;
+    seriesLabel: ReactNode;
+    legendItemId: string;
+    color: string;
+    valueAxisId: string;
+    opacity: number;
+    groupIndex: number;
+    groupCount: number;
+};
+export type BarChartDisplayAxis = Omit<BarChartValueAxis, 'thickness'> & {
+    thickness: number;
+    scale: ReturnType<typeof scaleLinear<number>>;
+};
+export type BarChartInteractionBar = Pick<BarChartLayoutBar, 'id' | 'category' | 'value' | 'startValue' | 'endValue' | 'seriesId' | 'seriesLabel' | 'color' | 'valueAxisId'>;
+export type BarChartInteractionDatum = {
+    category: BarChartCategory;
+    /** SVG position snapped to the category center on the category axis. */
+    categoryPosition: number;
+    /** SVG coordinates suitable for consumer-owned overlays. */
+    xPosition: number;
+    yPosition: number;
+    bars: readonly BarChartInteractionBar[];
+};
+export type BarChartRenderedBar = BarChartLayoutBar & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    baselinePosition: number;
+};
+export type BarChartCategoryAxisSlotProps = {
+    orientation: BarChartOrientation;
+    categories: readonly BarChartCategory[];
+    innerWidth: number;
+    innerHeight: number;
+    bandwidth: number;
+    getCategoryPosition: (category: BarChartCategory) => number | undefined;
+    formatValue: (category: BarChartCategory) => string;
+};
+export type BarChartValueAxisSlotProps = {
+    orientation: BarChartOrientation;
+    axis: BarChartValueAxis;
+    index: number;
+    innerWidth: number;
+    innerHeight: number;
+    getValuePosition: (value: number) => number;
+};
+export type BarChartPlotSlotProps = {
+    orientation: BarChartOrientation;
+    categories: readonly BarChartCategory[];
+    bars: readonly BarChartRenderedBar[];
+    innerWidth: number;
+    innerHeight: number;
+    bandwidth: number;
+    getCategoryPosition: (category: BarChartCategory) => number | undefined;
+    getValuePosition: (valueAxisId: string, value: number) => number | undefined;
+};
+export type BarChartSlots = {
+    /** Replaces the built-in category axis. Return SVG-compatible content. */
+    categoryAxis?: (props: BarChartCategoryAxisSlotProps) => ReactNode;
+    /** Replaces each built-in value axis. Return SVG-compatible content. */
+    valueAxis?: (props: BarChartValueAxisSlotProps) => ReactNode;
+    /** Renders SVG-compatible content beneath the bars, above the grid. */
+    background?: (props: BarChartPlotSlotProps) => ReactNode;
+    /** Renders SVG-compatible content after an individual bar. */
+    barLabel?: (bar: BarChartRenderedBar) => ReactNode;
+    /** Renders SVG-compatible content over the completed plot. */
+    overlay?: (props: BarChartPlotSlotProps) => ReactNode;
+};
+/**
+ * Naming and interaction hooks. Declared once so the public component and the
+ * plot renderer cannot drift apart.
+ */
+export type BarChartInteractionProps = {
+    /** Naming a bar also makes it a keyboard target. */
+    getBarAriaLabel?: (bar: BarChartInteractionBar) => string | undefined;
+    /** Naming a category also makes its whole band a keyboard target. */
+    getCategoryAriaLabel?: (datum: BarChartInteractionDatum) => string | undefined;
+    onDatumPointerDown?: (datum: BarChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    onDatumPointerMove?: (datum: BarChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    /** Fires when the pointer leaves the plot area or the chart entirely. */
+    onDatumPointerOut?: () => void;
+    /** The raw pointer release. `onDatumActivate` is the semantic click. */
+    onDatumPointerUp?: (datum: BarChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    /** Fires for a primary pointer release or Enter/Space on a category target. */
+    onDatumActivate?: (datum: BarChartInteractionDatum, event: PointerEvent<SVGSVGElement> | KeyboardEvent<SVGRectElement>) => void;
+    onDatumFocus?: (datum: BarChartInteractionDatum, event: FocusEvent<SVGRectElement>) => void;
+    onDatumBlur?: (datum: BarChartInteractionDatum, event: FocusEvent<SVGRectElement>) => void;
+    /** Fires while the pointer is over a rendered bar. Track its ID and set `ChartTooltipRow.highlighted` on the matching tooltip row. */
+    onBarPointerMove?: (bar: BarChartInteractionBar, event: PointerEvent<SVGPathElement>) => void;
+    /** Fires when the pointer leaves a rendered bar. Clear the matching `ChartTooltipRow.highlighted` state here. */
+    onBarPointerOut?: () => void;
+    /** Fires for a primary pointer release or Enter/Space on a bar, and stops the datum-level activation. */
+    onBarActivate?: (bar: BarChartInteractionBar, event: PointerEvent<SVGPathElement> | KeyboardEvent<SVGPathElement>) => void;
+    onBarFocus?: (bar: BarChartInteractionBar, event: FocusEvent<SVGPathElement>) => void;
+    onBarBlur?: (bar: BarChartInteractionBar, event: FocusEvent<SVGPathElement>) => void;
+};
+export type BarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'aria-label'> & BarChartInteractionProps & {
+    series: readonly BarChartSeries[];
+    /** Defaults to true when the chart has more than one series. */
+    showLegend?: boolean;
+    /** Forwarded to the rendered `ChartLegend`. Inert when there is no legend. */
+    legendProps?: Omit<ChartLegendProps, 'items'>;
+    categoryAxis?: BarChartCategoryAxis;
+    valueAxes?: readonly BarChartValueAxis[];
+    /** Defaults to grouped. */
+    mode?: BarChartMode;
+    /** Defaults to vertical. */
+    orientation?: BarChartOrientation;
+    /** Controlled legend filter. An empty set renders every series. */
+    selectedIds?: ReadonlySet<string>;
+    grid?: BarChartGrid;
+    valueBands?: readonly BarChartValueBand[];
+    /** Highlights one category band and draws a guide through its center. */
+    activeCategory?: BarChartCategory | null;
+    /** Draws a guide through the center of one bar. Takes precedence over `activeCategory`. */
+    activeGuideBarId?: string | null;
+    /** Emphasizes one bar and dims the rest. */
+    activeBarId?: string | null;
+    /** Emphasizes marks represented by one external legend item. Built-in legends set this automatically. */
+    activeLegendItemId?: string | null;
+    selectionRange?: BarChartSelectionRange;
+    /** Band-scale padding from 0 to 1. */
+    categoryPadding?: {
+        inner?: number;
+        outer?: number;
+    };
+    /** Additional room around the plot for consumer-owned SVG slots. */
+    plotPadding?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** Narrowest the plot area gets before the chart scrolls. Defaults to 160; pass 0 to always fit. */
+    minimumPlotWidth?: number;
+    /** Fraction of each grouped slot reserved as a gap. Defaults to 0.08. */
+    groupPadding?: number;
+    /** Minimum visible bar length for zero or very small values. Defaults to 1. */
+    minimumBarSize?: number;
+    /** Animates the chart unless reduced motion is preferred. Defaults to true. */
+    shouldAnimate?: boolean;
+    slots?: BarChartSlots;
+    /** Set false to drop the marks while a parent is actively resizing. Defaults to true. */
+    isRendering?: boolean;
+    'aria-label': string;
+};

package/dist/components/BarChart/BarChart.utils.d.ts

@@ -0,0 +1,51 @@
+import type { scaleBand } from '@visx/scale';
+import type { BarChartCategory, BarChartDisplayAxis, BarChartDisplaySeries, BarChartInteractionBar, BarChartLayoutBar, BarChartMode, BarChartOrientation, BarChartRenderedBar, BarChartSeries } from './BarChart.types.js';
+export declare const groupBarChartItemsBy: <Item>(items: readonly Item[], getKey: (item: Item) => string) => ReadonlyMap<string, Item[]>;
+/** Default value-axis tick text. Consumers localize via `formatValue`. */
+export declare const formatBarChartValue: (value: number) => string;
+/** Categories are compared across types, so the key carries the type too. */
+export declare const getCategoryKey: (category: BarChartCategory) => string;
+export declare const normalizeBarChartSeries: (series: readonly BarChartSeries[]) => readonly BarChartSeries[];
+export declare const getBarChartCategories: (series: readonly BarChartSeries[], configuredCategories?: readonly BarChartCategory[]) => readonly BarChartCategory[];
+export declare const getBarChartLayout: (series: readonly BarChartDisplaySeries[], categories: readonly BarChartCategory[], mode: BarChartMode) => readonly BarChartLayoutBar[];
+export declare const getBarChartValueDomain: (bars: readonly BarChartLayoutBar[], valueAxisId: string, configuredDomain?: readonly [number, number]) => [number, number];
+/** Builds a square-cornered SVG bar outline. */
+export declare const getBarPath: ({ x, y, width, height, }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => string;
+export declare const toBarChartInteractionBar: (bar: BarChartLayoutBar) => BarChartInteractionBar;
+/**
+ * Resolves each layout bar to SVG geometry.
+ *
+ * The two ends of a bar are clamped to the plot box independently, so a bar that
+ * runs past a configured axis domain is truncated at the edge rather than slid
+ * back inside it — sliding would redraw it at a value it does not have, and can
+ * even flip a negative bar to the positive side of the baseline. Bars therefore
+ * never overflow, which is also why they need no clip path and their focus rings
+ * stay visible.
+ */
+export declare const getBarChartRenderedBars: ({ bars, orientation, categoryScale, axisById, groupPadding, minimumBarSize, innerWidth, innerHeight, }: {
+    bars: readonly BarChartLayoutBar[];
+    orientation: BarChartOrientation;
+    categoryScale: ReturnType<typeof scaleBand<BarChartCategory>>;
+    axisById: ReadonlyMap<string, BarChartDisplayAxis>;
+    groupPadding: number;
+    minimumBarSize: number;
+    innerWidth: number;
+    innerHeight: number;
+}) => readonly BarChartRenderedBar[];
+export declare const getBarChartIsBarDimmed: ({ bars, activeBuiltInLegendItemId, activeLegendItemId, activeBarId, }: {
+    bars: readonly BarChartRenderedBar[];
+    activeBuiltInLegendItemId?: string | null;
+    activeLegendItemId?: string | null;
+    activeBarId?: string | null;
+}) => (bar: BarChartRenderedBar) => boolean;
+type BarAnimationRange = {
+    start: number;
+    end: number;
+};
+export declare const getBarAnimationRanges: (bars: readonly BarChartRenderedBar[], orientation: BarChartOrientation) => ReadonlyMap<string, BarAnimationRange>;
+export {};