@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/charts/LineChart.d.ts

@@ -1,22 +1,44 @@
-import type { CurveFactory } from "d3-shape";
-import type { BaseChartProps } from "./types";
-export declare enum LineChartMode {
-    NORMAL = "NORMAL",
-    STACKED = "STACKED"
-}
-export interface LineChartProps extends BaseChartProps {
-    /** Normal or stacked line mode */
-    mode?: LineChartMode;
-    /** Line stroke width in px */
+import { LineChartCurve } from "./types";
+import type { BaseCartesianChartProps, ChartSeriesStyles, ChartSize, LineChartLineDatum } from "./types";
+export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & ChartSize & {
+    /**
+     * Presentation for every metric, keyed by metric.
+     *
+     * `TMetric` is inferred from these keys alone — `lines` wraps it in
+     * `NoInfer` — so a mistyped metric is a compile error rather than a line
+     * that silently fails to draw.
+     */
+    series: ChartSeriesStyles<TMetric>;
+    /** One entry per line. Lines may be sparse. */
+    lines: LineChartLineDatum<NoInfer<TMetric>>[];
+    /**
+     * Explicit category order along the x-axis.
+     *
+     * Worth supplying whenever the lines are sparse: the inferred order is the
+     * union of each line's categories in first-seen order, which is only
+     * correct if some line covers them all.
+     */
+    categories?: string[];
+    /** @default LineChartCurve.SMOOTH */
+    curve?: LineChartCurve;
+    /** Default stroke width in px, overridable per line. */
     strokeWidth?: number;
-    /** Data-point dot radius in px (0 to hide dots) */
-    dotRadius?: number;
-    /** Show grid lines */
-    showGrid?: boolean;
-    /** Fill area under lines */
-    showArea?: boolean;
-    /** D3 curve factory for line interpolation */
-    curveType?: CurveFactory;
-}
-declare const LineChart: ({ data, series, width, height, margin: marginOverride, fillWidth, aspectRatio, mode, strokeWidth, dotRadius, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showGrid, showArea, curveType, ariaLabel, }: LineChartProps) => import("react").JSX.Element;
+    /** Draw a vertical rule at the active category. @default true */
+    showCursor?: boolean;
+    /**
+     * Notified when a category is pinned or unpinned by a click.
+     *
+     * The index is a position on the category axis.
+     */
+    onPinnedChange?: (categoryIndex: number | null) => void;
+};
+/**
+ * Line chart over a categorical x-axis.
+ *
+ * Hit testing is per category column rather than per stroke: the tooltip
+ * reports every line at the hovered category at once, which is almost always
+ * what a reader wants, and it avoids the proximity search a
+ * nearest-point-to-cursor model needs.
+ */
+declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -1,250 +1,199 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import Wrapper from "../containers/Wrapper.js";
-import { getChartPalette } from "./constants.js";
-import { buildLinearScale, buildPointScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor } from "./utils.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartTooltip from "./ChartTooltip.js";
-import { XAxisPoint, YAxis } from "./ChartAxis.js";
-/* empty css                    */
-import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { area, curveMonotoneX, line } from "d3-shape";
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+import { ChartMarkState, LineChartCurve } from "./types.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
+import { addAxisTitleSpace, getValueTicks } from "./chartScales.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { buildLineChartGeometry } from "./lineChartGeometry.js";
+import { resolveSeriesColor } from "./chartTheme.js";
+import { ChartAreaPath, ChartCursorLine, ChartHitTarget, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
+import ChartFrame from "./ChartFrame.js";
+import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/LineChart.tsx
-var LineChartMode = /* @__PURE__ */ function(LineChartMode) {
-	LineChartMode["NORMAL"] = "NORMAL";
-	LineChartMode["STACKED"] = "STACKED";
-	return LineChartMode;
-}({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartWrapper",
-	class: "c8llr95",
-	propsAsIs: false,
-	vars: {
-		"c8llr95-0": [_exp()],
-		"c8llr95-1": [_exp2()]
-	}
-}));
-var LineChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "NORMAL", strokeWidth = 2, dotRadius = 4, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showGrid = true, showArea = false, curveType = curveMonotoneX, ariaLabel }) => {
+/**
+* Line chart over a categorical x-axis.
+*
+* Hit testing is per category column rather than per stroke: the tooltip
+* reports every line at the hovered category at once, which is almost always
+* what a reader wants, and it avoids the proximity search a
+* nearest-point-to-cursor model needs.
+*/
+var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
 	const { theme } = useGalaxyTheme();
 	const containerRef = useRef(null);
-	const svgRef = useRef(null);
-	const [tooltip, setTooltip] = useState(null);
-	const [hoveredDatumIndex, setHoveredDatumIndex] = 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 margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
-	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
-		resolvedWidth,
-		resolvedHeight,
-		margin
+	const dimensions = useChartDimensions({
+		containerRef,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin: addAxisTitleSpace(margin, {
+			hasValueTitle: Boolean(valueAxisTitle),
+			hasCategoryTitle: Boolean(categoryAxisTitle)
+		})
+	});
+	const { plotWidth, plotHeight } = dimensions;
+	const { formatValue, formatLabel } = useChartFormatters({
+		valueFormatter,
+		valueUnit,
+		labelFormatter
+	});
+	const metricKeys = useMemo(() => Object.keys(series), [series]);
+	const resolveColor = useCallback(({ metric }) => resolveSeriesColor(theme, metricKeys.indexOf(metric), series[metric]?.color), [
+		theme,
+		metricKeys,
+		series
 	]);
-	const seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
-	const labels = useMemo(() => data.map((d) => d.label), [data]);
-	const xScale = useMemo(() => buildPointScale(labels, [0, plotWidth]), [labels, plotWidth]);
-	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
-		data,
-		seriesKeys,
-		mode
+	const geometry = useMemo(() => buildLineChartGeometry({
+		lines,
+		categories,
+		plotWidth,
+		plotHeight,
+		curve,
+		valueDomain,
+		strokeWidth,
+		resolveColor
+	}), [
+		lines,
+		categories,
+		plotWidth,
+		plotHeight,
+		curve,
+		valueDomain,
+		strokeWidth,
+		resolveColor
 	]);
-	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
-	const stackedValues = useMemo(() => {
-		if (mode !== "STACKED") return null;
-		return data.map((datum) => {
-			let cumulative = 0;
-			const values = {};
-			for (const s of series) {
-				const value = datum.values[s.key] ?? 0;
-				values[s.key] = {
-					y0: cumulative,
-					y1: cumulative + value
-				};
-				cumulative += value;
-			}
-			return values;
-		});
-	}, [
-		data,
+	const valueTicks = useMemo(() => getValueTicks(geometry.valueScale, valueDomain), [geometry.valueScale, valueDomain]);
+	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
+	const legendItems = useMemo(() => metricKeys.map((metric, lineIndex) => ({
+		key: metric,
+		label: series[metric].label,
+		color: resolveColor({
+			metric,
+			lineIndex
+		})
+	})), [
+		metricKeys,
 		series,
-		mode
+		resolveColor
 	]);
-	const handlePointMouseEnter = useCallback((datumIndex, x, y) => {
-		const datum = data[datumIndex];
-		if (!datum) return;
-		setHoveredDatumIndex(datumIndex);
-		setTooltip({
-			label: datum.label,
-			items: series.map((s, i) => ({
-				seriesKey: s.key,
-				seriesName: s.name,
-				value: datum.values[s.key] ?? 0,
-				color: resolveSeriesColor(s, i, palette)
-			})),
-			x: x + margin.left,
-			y: y + margin.top
-		});
+	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const interaction = useChartInteraction({
+		categoryCount: geometry.columns.length,
+		seriesKeys: legendKeys,
+		disabled: noTooltip || isLoading || isEmpty,
+		onPinnedChange
+	});
+	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
+	const tooltipModel = useMemo(() => {
+		if (noTooltip || !activeColumn) return null;
+		const rows = [...activeColumn.points].sort((a, b) => b.value - a.value).map((point) => ({
+			key: point.id,
+			label: series[point.metric]?.label ?? point.metric,
+			value: point.value,
+			formattedValue: formatValue(point.value),
+			color: point.color
+		}));
+		return {
+			label: formatLabel(activeColumn.label),
+			rows,
+			anchorX: activeColumn.x,
+			anchorY: activeColumn.anchorY
+		};
 	}, [
-		data,
+		noTooltip,
+		activeColumn,
 		series,
-		palette,
-		margin
+		formatValue,
+		formatLabel
 	]);
-	const handlePointMouseLeave = useCallback(() => {
-		setHoveredDatumIndex(null);
-		setTooltip(null);
-	}, []);
-	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth
-	});
-	const renderNormalLines = () => {
-		return series.map((s, seriesIndex) => {
-			const color = resolveSeriesColor(s, seriesIndex, palette);
-			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			const areaPath = showArea ? area().x((_, i) => xScale(data[i].label) ?? 0).y0(plotHeight).y1((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "" : "";
-			return /* @__PURE__ */ jsxs("g", { children: [
-				showArea && /* @__PURE__ */ jsx("path", {
-					d: areaPath,
-					fill: color,
-					opacity: .1,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: linePath,
-					fill: "none",
-					stroke: color,
-					strokeWidth,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				data.map((datum, datumIndex) => {
-					const cx = xScale(datum.label) ?? 0;
-					const cy = yScale(datum.values[s.key] ?? 0);
-					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius,
-						fill: color,
-						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						role: "graphics-symbol",
-						"aria-roledescription": "data point",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
-					}), /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius + 6,
-						fill: "transparent",
-						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onMouseLeave: handlePointMouseLeave,
-						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onBlur: handlePointMouseLeave,
-						tabIndex: 0,
-						style: { cursor: "pointer" }
-					})] }, datum.label);
-				})
-			] }, s.key);
-		});
-	};
-	const renderStackedLines = () => {
-		if (!stackedValues) return null;
-		return series.map((s, seriesIndex) => {
-			const color = resolveSeriesColor(s, seriesIndex, palette);
-			const areaPath = area().x((_, i) => xScale(data[i].label) ?? 0).y0((_, i) => yScale(stackedValues[i][s.key].y0)).y1((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			return /* @__PURE__ */ jsxs("g", { children: [
-				/* @__PURE__ */ jsx("path", {
-					d: areaPath,
-					fill: color,
-					opacity: .3,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: linePath,
-					fill: "none",
-					stroke: color,
-					strokeWidth,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				data.map((datum, datumIndex) => {
-					const cx = xScale(datum.label) ?? 0;
-					const cy = yScale(stackedValues[datumIndex][s.key].y1);
-					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius,
-						fill: color,
-						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						role: "graphics-symbol",
-						"aria-roledescription": "data point",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
-					}), /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius + 6,
-						fill: "transparent",
-						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onMouseLeave: handlePointMouseLeave,
-						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onBlur: handlePointMouseLeave,
-						tabIndex: 0,
-						style: { cursor: "pointer" }
-					})] }, datum.label);
-				})
-			] }, s.key);
-		});
-	};
-	const defaultAriaLabel = `Line chart with ${data.length} data points and ${series.length} series`;
-	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__ */ jsxs("g", {
-					transform: `translate(${margin.left}, ${margin.top})`,
-					children: [
-						/* @__PURE__ */ jsx(YAxis, {
-							scale: yScale,
-							transform: "translate(0, 0)",
-							plotWidth,
-							formatter: valueFormatter,
-							showGrid,
-							theme
-						}),
-						/* @__PURE__ */ jsx(XAxisPoint, {
-							scale: xScale,
-							transform: `translate(0, ${plotHeight})`,
-							plotWidth,
-							formatter: labelFormatter
-						}),
-						mode === "STACKED" ? renderStackedLines() : renderNormalLines()
-					]
-				})
-			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
-				data: tooltip,
-				valueFormatter
-			}))]
-		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
-			direction: FlexDirection.ROW,
-			gap: 0,
-			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
-				series,
-				palette
-			})]
-		})]
+	const categoryPositions = useMemo(() => geometry.columns.map((column) => column.x - geometry.step / 2), [geometry.columns, geometry.step]);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		containerRef,
+		dimensions,
+		fillWidth,
+		fillHeight,
+		interaction,
+		ariaLabel: ariaLabel ?? `Line chart with ${geometry.categories.length} categories and ${lines.length} series`,
+		ariaDescription,
+		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+			ticks: valueTicks,
+			scale: geometry.valueScale,
+			plotWidth,
+			plotHeight,
+			marginLeft: dimensions.margin.left,
+			formatter: formatValue,
+			showGrid,
+			title: valueAxisTitle
+		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: geometry.categories,
+			positions: categoryPositions,
+			step: geometry.step,
+			plotWidth,
+			plotHeight,
+			formatter: formatLabel,
+			mode: categoryLabelMode,
+			title: categoryAxisTitle
+		})] }),
+		noTooltip,
+		tooltipModel,
+		tooltipRenderer,
+		anchorHalfWidth: geometry.step / 2,
+		isEmpty,
+		isLoading,
+		contentWhenEmpty,
+		showLegend,
+		legendItems,
+		children: [
+			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
+				d: linePath.areaPath,
+				fill: linePath.color,
+				fillOpacity: LINE_AREA_OPACITY,
+				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: linePath.metric })
+			}, `${linePath.id}:area`) : null),
+			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+				x1: activeColumn.x,
+				x2: activeColumn.x,
+				y1: 0,
+				y2: plotHeight
+			}),
+			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
+				d: linePath.path,
+				stroke: linePath.color,
+				strokeWidth: linePath.strokeWidth,
+				strokeDasharray: linePath.dashArray,
+				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: linePath.metric })
+			}, linePath.id)),
+			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({ seriesKey: point.metric })
+			}, `${point.id}:isolated`)),
+			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, point.id)),
+			!noTooltip && !isLoading && geometry.columns.map((column) => /* @__PURE__ */ jsx(ChartHitTarget, {
+				x: column.bandX,
+				y: 0,
+				width: column.bandWidth,
+				height: plotHeight,
+				"data-interactive": "true",
+				onMouseEnter: () => interaction.onCategoryEnter(column.categoryIndex),
+				onMouseLeave: interaction.onCategoryLeave,
+				onClick: () => interaction.onCategoryClick(column.categoryIndex)
+			}, column.categoryIndex))
+		]
 	});
 };
 //#endregion
-export { LineChartMode, LineChart as default };
+export { LineChart as default };

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;