@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/PieChart.d.ts

@@ -1,35 +1,51 @@
-import type { ChartLabelFormatter, ChartTooltipRenderer, ChartValueFormatter, PieSlice } from "./types";
-export interface PieChartProps {
-    /** Slice data */
-    slices: PieSlice[];
-    /** Chart width in pixels. Optional when fillWidth is true. */
-    width?: number;
-    /** Chart height in pixels. Optional when aspectRatio is provided. */
-    height?: number;
-    /** When true, chart fills container width */
-    fillWidth?: boolean;
-    /** Aspect ratio (width/height). Used to auto-calculate height when fillWidth is true. */
-    aspectRatio?: number;
-    /** Inner radius for donut charts (0 = full pie) */
-    innerRadius?: number;
-    /** Gap between slices in radians */
+import type { ReactNode } from "react";
+import type { BaseChartProps, ChartSeriesStyles, ChartSize, PieChartSliceDatum } from "./types";
+export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize & {
+    /**
+     * Presentation for every slice, keyed by slice.
+     *
+     * `TSlice` is inferred from these keys alone — `slices` wraps it in
+     * `NoInfer` — so a mistyped key is a compile error rather than a slice that
+     * silently fails to draw.
+     */
+    series: ChartSeriesStyles<TSlice>;
+    /** Slices, rendered clockwise from 12 o'clock in array order. */
+    slices: PieChartSliceDatum<NoInfer<TSlice>>[];
+    /**
+     * Hole size as a fraction of the outer radius, 0–1.
+     * `0` is a solid pie. Defaults to a donut.
+     */
+    innerRadiusRatio?: number;
+    /** Gap between slices, in radians. */
     padAngle?: number;
-    /** Rounded slice corners in px */
+    /** Slice corner radius in px. */
     cornerRadius?: number;
-    /** Format values in tooltip/labels */
-    valueFormatter?: ChartValueFormatter;
-    /** Format labels in legend/tooltip */
-    labelFormatter?: ChartLabelFormatter;
-    /** Custom tooltip renderer */
-    tooltipRenderer?: ChartTooltipRenderer;
-    /** Disable tooltip */
-    noTooltip?: boolean;
-    /** Show legend */
-    showLegend?: boolean;
-    /** Show percentage labels on slices */
-    showLabels?: boolean;
-    /** Accessible label for the chart SVG */
-    ariaLabel?: string;
-}
-declare const PieChart: ({ slices, width, height, fillWidth, aspectRatio, innerRadius, padAngle, cornerRadius, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showLabels, ariaLabel, }: PieChartProps) => import("react").JSX.Element;
+    /**
+     * Slices below this share of the total are folded into one bucket.
+     * Set `0` to render every slice faithfully.
+     */
+    minSliceShare?: number;
+    /** Label for the folded bucket. @default "Other" */
+    aggregatedLabel?: string;
+    /**
+     * Content for the donut hole — a total, a headline percentage.
+     * Ignored when `innerRadiusRatio` is 0.
+     */
+    centerContent?: ReactNode;
+    /**
+     * Notified when a slice is pinned or unpinned by a click.
+     *
+     * The index is a position in the *rendered* arcs, which excludes folded
+     * slices and may include the aggregated bucket.
+     */
+    onPinnedChange?: (sliceIndex: number | null) => void;
+};
+/**
+ * Pie and donut chart.
+ *
+ * Unlike the cartesian charts there is no category axis to hit-test against, so
+ * each arc is its own target. Small slices are folded into an "Other" bucket by
+ * default, which keeps every remaining arc large enough to actually hit.
+ */
+declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;

package/dist/charts/PieChart.js

@@ -1,183 +1,193 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextWeight } from "../text/Text.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import Wrapper from "../containers/Wrapper.js";
-import { getChartPalette } from "./constants.js";
-import { defaultLabelFormatter, defaultValueFormatter } from "./utils.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartTooltip from "./ChartTooltip.js";
-/* empty css                   */
-import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { arc, pie } from "d3-shape";
+import { ChartKind, ChartTargetShape } from "./types.js";
+import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { buildPieChartGeometry } from "./pieChartGeometry.js";
+import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
+import ChartFrame from "./ChartFrame.js";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/charts/PieChart.tsx
-var DEFAULT_PAD_ANGLE = .02;
-var DEFAULT_CORNER_RADIUS = 2;
-var PIE_MARGIN = 8;
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartWrapper",
-	class: "c1ez9f1",
-	propsAsIs: false,
-	vars: {
-		"c1ez9f1-0": [_exp()],
-		"c1ez9f1-1": [_exp2()]
-	}
-}));
-var resolveSliceColor = (slice, index, palette) => slice.color ?? palette[index % palette.length];
-var PieChart = ({ slices, width, height, fillWidth = false, aspectRatio, innerRadius = 0, padAngle = DEFAULT_PAD_ANGLE, cornerRadius = DEFAULT_CORNER_RADIUS, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showLabels = false, ariaLabel }) => {
-	const { theme } = useGalaxyTheme();
+/**
+* Pie and donut chart.
+*
+* Unlike the cartesian charts there is no category axis to hit-test against, so
+* each arc is its own target. Small slices are folded into an "Other" bucket by
+* default, which keeps every remaining arc large enough to actually hit.
+*/
+var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
 	const containerRef = useRef(null);
-	const svgRef = useRef(null);
-	const [tooltip, setTooltip] = useState(null);
-	const [hoveredSliceIndex, setHoveredSliceIndex] = useState(null);
-	const measuredWidth = useElementWidth(containerRef);
-	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
-	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
-	const palette = useMemo(() => getChartPalette(theme), [theme]);
-	const outerRadius = useMemo(() => Math.min(resolvedWidth, resolvedHeight) / 2 - PIE_MARGIN, [resolvedWidth, resolvedHeight]);
-	const effectivePadAngle = innerRadius > 0 ? padAngle : 0;
-	const pieGen = useMemo(() => pie().value((d) => d.value).sort(null).padAngle(effectivePadAngle), [effectivePadAngle]);
-	const arcs = useMemo(() => pieGen(slices), [pieGen, slices]);
-	const arcGen = useMemo(() => arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius), [
-		innerRadius,
-		outerRadius,
-		cornerRadius
+	const colors = useSeriesColorResolver(series);
+	const dimensions = useChartDimensions({
+		containerRef,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin,
+		defaultMargin: PIE_CHART_MARGIN
+	});
+	const { plotWidth, plotHeight } = dimensions;
+	const { formatValue, formatLabel } = useChartFormatters({
+		valueFormatter,
+		valueUnit,
+		labelFormatter
+	});
+	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
+	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
+	const geometry = useMemo(() => buildPieChartGeometry({
+		slices,
+		plotWidth,
+		plotHeight,
+		innerRadiusRatio,
+		padAngle,
+		cornerRadius,
+		minSliceShare,
+		aggregatedLabel,
+		resolveColor,
+		getSliceColor,
+		getSliceLabel
+	}), [
+		slices,
+		plotWidth,
+		plotHeight,
+		innerRadiusRatio,
+		padAngle,
+		cornerRadius,
+		minSliceShare,
+		aggregatedLabel,
+		resolveColor,
+		getSliceColor,
+		getSliceLabel
 	]);
-	const labelArc = useMemo(() => {
-		const mid = innerRadius > 0 ? (innerRadius + outerRadius) / 2 : outerRadius * .65;
-		return arc().innerRadius(mid).outerRadius(mid);
-	}, [innerRadius, outerRadius]);
-	const total = useMemo(() => slices.reduce((sum, s) => sum + s.value, 0), [slices]);
-	const handleSliceMouseEnter = useCallback((sliceIndex, event) => {
-		const slice = slices[sliceIndex];
-		if (!slice) return;
-		const svgRect = svgRef.current?.getBoundingClientRect();
-		if (!svgRect) return;
-		setHoveredSliceIndex(sliceIndex);
-		setTooltip({
-			label: labelFormatter(slice.label),
-			items: [{
-				seriesKey: slice.label,
-				seriesName: labelFormatter(slice.label),
-				value: slice.value,
-				color: resolveSliceColor(slice, sliceIndex, palette)
+	const isEmpty = geometry.arcs.length === 0;
+	const legendItems = useMemo(() => geometry.arcs.map((chartArc) => ({
+		key: chartArc.id,
+		label: formatLabel(chartArc.label),
+		color: chartArc.color
+	})), [geometry.arcs, formatLabel]);
+	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const interaction = useChartInteraction({
+		categoryCount: geometry.arcs.length,
+		seriesKeys: legendKeys,
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
+		onPinnedChange
+	});
+	const buildCategoryTooltip = useCallback((index) => {
+		const chartArc = geometry.arcs[index];
+		if (!chartArc) return null;
+		return {
+			label: formatLabel(chartArc.label),
+			rows: [{
+				key: chartArc.id,
+				label: `${Math.round(chartArc.share * 1e3) / 10}% of total`,
+				value: chartArc.value,
+				formattedValue: formatValue(chartArc.value),
+				color: chartArc.color
 			}],
-			x: event.clientX - svgRect.left,
-			y: event.clientY - svgRect.top
-		});
+			anchorX: chartArc.anchorX,
+			anchorY: chartArc.anchorY
+		};
 	}, [
-		slices,
-		palette,
-		labelFormatter
+		geometry.arcs,
+		formatValue,
+		formatLabel
 	]);
-	const handleSliceMouseMove = useCallback((event) => {
-		if (hoveredSliceIndex === null) return;
-		const svgRect = svgRef.current?.getBoundingClientRect();
-		if (!svgRect) return;
-		setTooltip((prev) => prev ? {
-			...prev,
-			x: event.clientX - svgRect.left,
-			y: event.clientY - svgRect.top
-		} : null);
-	}, [hoveredSliceIndex]);
-	const handleSliceMouseLeave = useCallback(() => {
-		setHoveredSliceIndex(null);
-		setTooltip(null);
-	}, []);
-	const legendSeries = useMemo(() => slices.map((s, i) => ({
-		key: s.label,
-		name: labelFormatter(s.label),
-		color: resolveSliceColor(s, i, palette)
-	})), [
-		slices,
-		palette,
-		labelFormatter
+	/**
+	* A slice reads better than the generic "label: row, row" sentence.
+	*
+	* The frame's default would render "Enterprise: 42.1% of total 1,240", which
+	* puts the share where a reader expects the value.
+	*/
+	const describeCategory = useCallback((index) => {
+		const chartArc = geometry.arcs[index];
+		if (!chartArc) return "";
+		const share = `${Math.round(chartArc.share * 1e3) / 10}% of total`;
+		return `${formatLabel(chartArc.label)}, ${formatValue(chartArc.value)}, ${share}`;
+	}, [
+		geometry.arcs,
+		formatValue,
+		formatLabel
 	]);
-	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth
-	});
-	const cx = resolvedWidth / 2;
-	const cy = resolvedHeight / 2;
-	const defaultAriaLabel = `Pie chart with ${slices.length} slices`;
-	return /* @__PURE__ */ jsxs(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth,
-		children: [/* @__PURE__ */ jsxs(Wrapper, {
-			position: "relative",
-			children: [/* @__PURE__ */ jsx("svg", {
-				ref: svgRef,
-				width: resolvedWidth,
-				height: resolvedHeight,
-				role: "img",
-				"aria-label": ariaLabel ?? defaultAriaLabel,
-				children: /* @__PURE__ */ jsx("g", {
-					transform: `translate(${cx}, ${cy})`,
-					children: arcs.map((d, i) => {
-						const color = resolveSliceColor(d.data, i, palette);
-						const isDimmed = hoveredSliceIndex !== null && hoveredSliceIndex !== i;
-						const path = arcGen(d) ?? "";
-						const pct = total > 0 ? Math.round(d.data.value / total * 100) : 0;
-						return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
-							d: path,
-							fill: color,
-							opacity: isDimmed ? .3 : 1,
-							style: {
-								transition: `opacity 150ms ease-in-out`,
-								cursor: "pointer"
-							},
-							onMouseEnter: (e) => handleSliceMouseEnter(i, e),
-							onMouseMove: handleSliceMouseMove,
-							onMouseLeave: handleSliceMouseLeave,
-							onFocus: (e) => handleSliceMouseEnter(i, e),
-							onBlur: handleSliceMouseLeave,
-							tabIndex: 0,
-							role: "graphics-symbol",
-							"aria-roledescription": "slice",
-							"aria-label": `${labelFormatter(d.data.label)}: ${valueFormatter(d.data.value)} (${pct}%)`
-						}), showLabels && pct > 5 && (() => {
-							const [lx, ly] = labelArc.centroid(d);
-							const labelW = 48;
-							const labelH = 20;
-							return /* @__PURE__ */ jsx("foreignObject", {
-								x: lx - labelW / 2,
-								y: ly - labelH / 2,
-								width: labelW,
-								height: labelH,
-								style: { pointerEvents: "none" },
-								children: /* @__PURE__ */ jsx(FlexWrapper, {
-									justifyContent: JustifyContent.CENTER,
-									alignItems: AlignItems.CENTER,
-									fillWidth: true,
-									fillHeight: true,
-									children: /* @__PURE__ */ jsx(Text, {
-										size: TextSize.CAPTION,
-										weight: TextWeight.MEDIUM,
-										hex: theme.color.text.primaryAlt,
-										children: `${pct}%`
-									})
-								})
-							});
-						})()] }, d.data.label);
-					})
+	/**
+	* Targets reuse each arc's own `d`, drawn again transparent above the marks.
+	*
+	* The arcs themselves stop being interactive: hit testing, focus and the
+	* focus ring then work identically on all three charts, instead of the pie
+	* attaching handlers permanently and toggling `data-interactive` while the
+	* cartesian charts rendered their targets away.
+	*/
+	const categoryTargets = useMemo(() => geometry.arcs.map((chartArc) => ({
+		key: chartArc.id,
+		shape: ChartTargetShape.PATH,
+		d: chartArc.path
+	})), [geometry.arcs]);
+	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		containerRef,
+		dimensions,
+		fillWidth,
+		fillHeight,
+		interaction,
+		kind: ChartKind.PIE,
+		categoryCount: geometry.arcs.length,
+		ariaLabel,
+		ariaDescription,
+		noTooltip,
+		buildCategoryTooltip,
+		tooltipRenderer,
+		categoryTargets,
+		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+		wrapCategoryNavigation: true,
+		describeCategory,
+		placeAwayFromX: geometry.centerX,
+		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
+		isEmpty,
+		isLoading,
+		contentWhenEmpty,
+		showLegend,
+		legendItems,
+		legendInset: 0,
+		plotOverlay: showCenter && !isEmpty ? /* @__PURE__ */ jsx(ChartDonutCenter, {
+			centerX: dimensions.margin.left + geometry.centerX,
+			centerY: dimensions.margin.top + geometry.centerY,
+			diameter: geometry.innerRadius * 2,
+			children: centerContent
+		}) : null,
+		children: /* @__PURE__ */ jsx("g", {
+			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
+				d: chartArc.path,
+				fill: chartArc.color,
+				"data-state": interaction.getMarkState({
+					categoryIndex: index,
+					seriesKey: chartArc.id
 				})
-			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
-				data: tooltip,
-				valueFormatter
-			}))]
-		}), showLegend && /* @__PURE__ */ jsx(FlexWrapper, {
-			direction: FlexDirection.ROW,
-			gap: 0,
-			children: /* @__PURE__ */ jsx(ChartLegend, {
-				series: legendSeries,
-				palette
-			})
-		})]
+			}, chartArc.id))
+		})
 	});
 };
+/** Positions arbitrary content inside the donut hole. */
+var ChartDonutCenter = ({ centerX, centerY, diameter, children }) => /* @__PURE__ */ jsx(ChartCenterBox, {
+	$centerX: centerX,
+	$centerY: centerY,
+	$diameter: diameter,
+	children: /* @__PURE__ */ jsx(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		justifyContent: JustifyContent.CENTER,
+		alignItems: AlignItems.CENTER,
+		gap: 2,
+		fillWidth: true,
+		fillHeight: true,
+		children
+	})
+});
 //#endregion
 export { PieChart as default };

package/dist/charts/barChartGeometry.d.ts

@@ -0,0 +1,120 @@
+import { buildValueScale } from "./chartScales";
+import { BarChartNormalization, BarCorners } from "./types";
+import type { BarChartGroupDatum, ChartPalette } from "./types";
+/**
+ * Rectangle with one pair of corners rounded.
+ *
+ * The radius is clamped to half the height as well as half the width, so a very
+ * short bar renders as a symmetric cap instead of a lopsided half-pill.
+ */
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, radius: number, corners: BarCorners): string;
+/**
+ * Signed value domain across every group.
+ *
+ * Percent-normalized charts always span 0–1, so the axis is stable no matter
+ * what the underlying totals are.
+ */
+export declare function getBarValueDomain<TMetric extends string, TComponentKey extends string>(groups: BarChartGroupDatum<TMetric, TComponentKey>[], normalization: BarChartNormalization): [number, number];
+/**
+ * A single rendered rectangle.
+ *
+ * The geometry layer flattens the group/bar/component hierarchy into an array
+ * of these, so rendering is a plain `.map()` with no nested loops or
+ * accumulators in the component body.
+ */
+export interface BarChartRect<TMetric extends string, TComponentKey extends string = string> {
+    /**
+     * React key: `${groupIndex}:${barIndex}:${componentKey}`.
+     *
+     * Deliberately index-based rather than label-based — group labels are free to
+     * repeat, and duplicated keys would silently drop rectangles.
+     */
+    id: string;
+    groupIndex: number;
+    metric: TMetric;
+    componentKey: TComponentKey;
+    /** The component's label, carried through for the tooltip. */
+    label: string;
+    /** The raw value, before any normalization. */
+    value: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Resolved from the theme — never a raw hex from consumer data. */
+    color: string;
+    /** Interior stack segments get {@link BarCorners.NONE}. */
+    corners: BarCorners;
+    /** Corner radius in px, reduced for narrow bars so the curve can't dominate. */
+    radius: number;
+}
+/**
+ * A category's invisible hit target and tooltip anchor.
+ *
+ * Hit testing happens per group rather than per rectangle: a two-pixel bar is
+ * then exactly as hoverable as a two-hundred-pixel one, and moving the pointer
+ * between segments inside one group fires nothing, so the tooltip stays put
+ * instead of jumping between segment tops.
+ */
+export interface BarChartGroupBand {
+    groupIndex: number;
+    label: string;
+    /** Tiles edge to edge with its neighbours, so there are no dead gutters. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Group centre, at the top of its tallest bar. Stable while hovering. */
+    anchorX: number;
+    anchorY: number;
+}
+export interface BarChartGeometry<TMetric extends string, TComponentKey extends string = string> {
+    /** Every rendered rectangle, in draw order. */
+    rects: BarChartRect<TMetric, TComponentKey>[];
+    /** One hit target per group, tiling the plot with no gaps. */
+    bands: BarChartGroupBand[];
+    /** The resolved value scale, shared with the axis. */
+    valueScale: ReturnType<typeof buildValueScale>;
+}
+interface BuildBarChartGeometryArgs<TMetric extends string, TComponentKey extends string> {
+    groups: BarChartGroupDatum<TMetric, TComponentKey>[];
+    plotWidth: number;
+    plotHeight: number;
+    normalization: BarChartNormalization;
+    /**
+     * Whether the chart as a whole is stacked.
+     *
+     * Chart-wide, not per bar, because it decides the *colour rule* and the legend
+     * lists one domain for the whole chart. Deriving it per bar would colour a
+     * single-component bar by metric while the legend named components.
+     */
+    isStacked: boolean;
+    /**
+     * The final value domain, already overridden, zeroed and niced.
+     *
+     * Resolved by the caller rather than here, because the left gutter is sized
+     * from the tick labels and therefore needs the domain before the plot — and
+     * hence this builder — exists.
+     */
+    domain: [number, number];
+    /**
+     * Maps one segment to a concrete color.
+     *
+     * The geometry deliberately does not decide the rule — it only reports what
+     * it knows about the segment. Whether a stack is coloured by component or a
+     * group by metric is a presentation question, and it needs the `series`
+     * record to answer, which this module has no business importing.
+     */
+    resolveColor: (args: ResolveBarColorArgs<TMetric>) => string;
+}
+export interface ResolveBarColorArgs<TMetric extends string> {
+    metric: TMetric;
+    /** Index of the component within its bar. */
+    componentIndex: number;
+    /** True when the *chart* is stacked — see the option of the same name. */
+    isStacked: boolean;
+    /** The component's own palette override, if it declared one. */
+    explicit?: ChartPalette;
+}
+export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
+export {};