@matthieumordrel/chart-studio-ui 0.5.2

package/dist/ui/chart-canvas.mjs

@@ -0,0 +1,872 @@
+import { useChartContext } from "./chart-context.mjs";
+import { selectVisibleXAxisTicks } from "./chart-axis-ticks.mjs";
+import { getPercentStackedDisplayValue } from "./percent-stacked.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, LabelList, Legend, Line, LineChart, Pie, PieChart, Tooltip, XAxis, YAxis } from "recharts";
+import { DATA_LABEL_DEFAULTS, createNumericRange, formatChartValue, formatTimeBucketLabel, getSeriesColor, resolveShowDataLabels, shouldAllowDecimalTicks } from "@matthieumordrel/chart-studio/_internal";
+//#region src/ui/chart-canvas.tsx
+/**
+* Chart canvas — renders the actual recharts chart based on the current state.
+*
+* Supports: bar, grouped-bar, percent-bar, line, area, percent-area (time-series), bar, grouped-bar, percent-bar, pie, donut (categorical).
+* Automatically switches between chart types based on the chart instance state.
+*/
+/**
+* Estimates the pixel width the YAxis needs so no label is ever clipped.
+* Considers both the visible range and the likely "nice" axis boundary Recharts
+* may choose above it, then measures the widest formatted label and adds a
+* small gutter for tick spacing.
+*/
+function estimateYAxisWidth(numericRange, valueColumn) {
+	const widestLabel = getYAxisLabelCandidates(numericRange, valueColumn).reduce((maxWidth, label) => Math.max(maxWidth, measureAxisLabelWidth(label)), 0);
+	return Math.max(MIN_Y_AXIS_WIDTH, Math.ceil(widestLabel + Y_AXIS_WIDTH_GUTTER));
+}
+/**
+* Font used by the shared chart axis ticks (`text-xs` in the default theme).
+*/
+const AXIS_TICK_FONT = "12px system-ui, sans-serif";
+/**
+* Canvas measurement can be unavailable in some environments, so keep a
+* slightly generous character-width fallback.
+*/
+const FALLBACK_AXIS_CHARACTER_WIDTH = 8;
+/**
+* Minimum width so short numeric axes still have breathing room.
+*/
+const MIN_Y_AXIS_WIDTH = 48;
+/**
+* Extra space for tick margin plus a small anti-clipping buffer.
+*/
+const Y_AXIS_WIDTH_GUTTER = 18;
+/**
+* Horizontal breathing room kept between two visible X-axis labels.
+*/
+const X_AXIS_MINIMUM_TICK_GAP = 8;
+/**
+* Build a small set of realistic axis labels and size for the widest one.
+* This catches cases where the chart data tops out below the rounded axis
+* tick, such as `950` minutes producing a `1000` minute top tick.
+*/
+function getYAxisLabelCandidates(numericRange, valueColumn) {
+	return getYAxisCandidateValues(numericRange).map((value) => formatChartValue(value, {
+		column: valueColumn,
+		surface: "axis",
+		numericRange
+	}));
+}
+/**
+* Include the visible extrema plus rounded axis boundaries so the width
+* estimate matches what the axis is likely to render.
+*/
+function getYAxisCandidateValues(numericRange) {
+	if (!numericRange) return [0];
+	const maxAbs = Math.max(Math.abs(numericRange.min), Math.abs(numericRange.max));
+	const niceMaxAbs = getNiceAxisBoundary(maxAbs);
+	const values = new Set([
+		0,
+		numericRange.min,
+		numericRange.max,
+		maxAbs,
+		niceMaxAbs
+	]);
+	if (numericRange.min < 0) values.add(-niceMaxAbs);
+	return Array.from(values);
+}
+/**
+* Approximate the rounded outer tick value chart libraries tend to choose for
+* a human-friendly numeric axis.
+*/
+function getNiceAxisBoundary(value) {
+	if (!Number.isFinite(value) || value <= 0) return 0;
+	const magnitude = 10 ** Math.floor(Math.log10(value));
+	const fraction = value / magnitude;
+	if (fraction <= 1) return magnitude;
+	if (fraction <= 2) return 2 * magnitude;
+	if (fraction <= 5) return 5 * magnitude;
+	return 10 * magnitude;
+}
+/**
+* Measure axis text width in the browser and fall back to a safe character
+* estimate in non-DOM environments.
+*/
+function measureAxisLabelWidth(label) {
+	if (typeof document === "undefined") return label.length * FALLBACK_AXIS_CHARACTER_WIDTH;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return label.length * FALLBACK_AXIS_CHARACTER_WIDTH;
+	context.font = AXIS_TICK_FONT;
+	return context.measureText(label).width;
+}
+/**
+* Approximate the drawable X-axis width after margins, Y-axis labels, and axis
+* padding have taken their share of the SVG width.
+*/
+function getCartesianPlotWidth(totalWidth, yAxisWidth) {
+	return Math.max(1, totalWidth - yAxisWidth - CARTESIAN_BASE_MARGIN.left - CARTESIAN_BASE_MARGIN.right - CARTESIAN_X_AXIS_PADDING.left - CARTESIAN_X_AXIS_PADDING.right);
+}
+/**
+* Resolve the raw categorical tick value used by Recharts for one transformed
+* pipeline point.
+*/
+function getXAxisTickValue(point) {
+	return typeof point["xKey"] === "string" || typeof point["xKey"] === "number" ? point["xKey"] : String(point["xLabel"]);
+}
+/**
+* Important recharts styling — mirrors shadcn's ChartContainer CSS.
+* Ensures proper text colors, grid lines, and outline handling.
+*/
+const RECHARTS_STYLES = [
+	"text-xs",
+	"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+	"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
+	"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
+	"[&_.recharts-layer]:outline-hidden",
+	"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
+	"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
+	"[&_.recharts-sector]:outline-hidden",
+	"[&_.recharts-surface]:outline-hidden"
+].join(" ");
+/**
+* Reserve enough top padding for the tallest bar/point label plus its offset so
+* data labels never clip against the SVG edge.
+*/
+const CARTESIAN_BASE_MARGIN = {
+	top: 4,
+	right: 8,
+	left: 0,
+	bottom: 0
+};
+/**
+* Vertical headroom required for one top-positioned cartesian data label.
+*/
+const CARTESIAN_DATA_LABEL_TOP_CLEARANCE = 28;
+/**
+* Expand the cartesian chart margin only when top-positioned data labels are
+* enabled.
+*/
+function getCartesianChartMargin(showDataLabels) {
+	return showDataLabels ? {
+		...CARTESIAN_BASE_MARGIN,
+		top: CARTESIAN_BASE_MARGIN.top + CARTESIAN_DATA_LABEL_TOP_CLEARANCE
+	} : CARTESIAN_BASE_MARGIN;
+}
+/**
+* Keep the first and last rendered values from hugging the chart edges.
+*/
+const CARTESIAN_X_AXIS_PADDING = {
+	left: 12,
+	right: 12
+};
+/**
+* Hook that measures a container's width using ResizeObserver.
+* Avoids the ResponsiveContainer issues with flexbox/grid layouts.
+*/
+function useContainerWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return {
+		ref,
+		width
+	};
+}
+/**
+* Read the resolved `--cs-radius` CSS variable and convert it to a pixel value
+* suitable for recharts bar corner radius (roughly half the theme radius).
+* Observes style attribute mutations on the root element so the chart reacts
+* when the consumer changes `--radius` at runtime.
+*/
+function useCssBarRadius() {
+	const [radiusPx, setRadiusPx] = useState(4);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		function read() {
+			const style = getComputedStyle(root);
+			const raw = style.getPropertyValue("--cs-radius").trim();
+			if (!raw) return;
+			const rem = parseFloat(raw);
+			if (Number.isNaN(rem)) return;
+			const fontSize = parseFloat(style.fontSize) || 16;
+			setRadiusPx(Math.max(0, Math.round(rem * fontSize / 2)));
+		}
+		read();
+		const observer = new MutationObserver(read);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return radiusPx;
+}
+/** Renders the appropriate recharts chart based on the chart instance state.
+* @param height - Chart height in pixels (default: 300)
+* @param className - Additional CSS classes
+* @param showDataLabels - Control data label visibility: `true`/`false` for explicit control, or `'auto'` (default) to let {@link DATA_LABEL_DEFAULTS} decide per chart type and time bucket.
+*/
+function ChartCanvas({ height = 300, className, showDataLabels = "auto" }) {
+	const chart = useChartContext();
+	const { chartType, transformedData, series, connectNulls } = chart;
+	const timeBucket = chart.isTimeSeries ? chart.timeBucket : void 0;
+	const resolvedShowDataLabels = resolveShowDataLabels(chartType, timeBucket, showDataLabels);
+	const dataLabelStyle = DATA_LABEL_DEFAULTS[chartType].style;
+	const { ref, width } = useContainerWidth();
+	const xColumn = chart.columns.find((column) => column.id === chart.xAxisId) ?? null;
+	const aggregateMetric = chart.metric.kind === "aggregate" ? chart.metric : null;
+	const valueColumn = (aggregateMetric ? chart.columns.find((column) => column.id === aggregateMetric.columnId && column.type === "number") : null) ?? {
+		type: "number",
+		format: void 0
+	};
+	const numericValues = transformedData.flatMap((point) => series.flatMap((seriesItem) => {
+		const value = point[seriesItem.dataKey];
+		return typeof value === "number" ? [value] : [];
+	}));
+	const valueRange = createNumericRange(numericValues);
+	const allowDecimalTicks = shouldAllowDecimalTicks(numericValues);
+	if (transformedData.length === 0) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `flex items-center justify-center text-sm text-muted-foreground ${className ?? ""}`,
+		style: { height },
+		children: "No data available"
+	});
+	if (chartType === "table") return /* @__PURE__ */ jsx("div", {
+		ref,
+		children: /* @__PURE__ */ jsx(TableRenderer, {
+			data: transformedData,
+			series,
+			height,
+			className,
+			valueColumn,
+			valueRange,
+			xColumn,
+			timeBucket
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `${RECHARTS_STYLES} ${className ?? ""}`,
+		style: { height },
+		children: width > 0 && (chartType === "pie" || chartType === "donut" ? /* @__PURE__ */ jsx(PieChartRenderer, {
+			data: transformedData,
+			series,
+			innerRadius: chartType === "donut",
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : chartType === "line" ? /* @__PURE__ */ jsx(LineChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : chartType === "percent-area" ? /* @__PURE__ */ jsx(PercentAreaChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : chartType === "area" ? /* @__PURE__ */ jsx(AreaChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : chartType === "grouped-bar" ? /* @__PURE__ */ jsx(GroupedBarChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : chartType === "percent-bar" ? /* @__PURE__ */ jsx(PercentBarChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}) : /* @__PURE__ */ jsx(BarChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket,
+			showDataLabels: resolvedShowDataLabels,
+			dataLabelStyle,
+			connectNulls
+		}))
+	});
+}
+/**
+* Percent-stacked charts use stackOffset="expand" which normalizes values to
+* the 0–1 range.  These constants let the shared formatting pipeline treat
+* them as proper percentages via Intl.NumberFormat({ style: 'percent' }).
+*/
+const PERCENT_STACKED_COLUMN = {
+	type: "number",
+	format: "percent"
+};
+const PERCENT_STACKED_RANGE = {
+	min: 0,
+	max: 1
+};
+function createStackedTooltipItemSorter(series) {
+	const order = new Map(series.map((s, index) => [s.dataKey, index]));
+	return (item) => {
+		const dataKey = typeof item.dataKey === "string" ? item.dataKey : typeof item.name === "string" ? item.name : "";
+		return -(order.get(dataKey) ?? -1);
+	};
+}
+/**
+* Remove data points where every series value is null.
+*
+* Stacked charts (percent-area, percent-bar) cannot represent null in the
+* stack — d3's stack layout coerces missing values to 0 which distorts the
+* visual.  Dropping entirely-empty buckets lets `connectNulls` bridge the
+* gap while keeping partially-populated buckets intact (null → 0 is
+* acceptable there because the segment genuinely contributes nothing to the
+* total).
+*/
+function filterAllNullPoints(data, series) {
+	return data.filter((point) => series.some((s) => point[s.dataKey] != null));
+}
+/**
+* Shared shell for all Cartesian chart types.
+* Owns the grid, axes, tooltip, and legend — the only things that change
+* per chart type are the root component and the series element.
+*/
+function CartesianChartShell({ data, series, width, height, valueColumn, valueRange, allowDecimalTicks, xColumn, timeBucket, showDataLabels, Chart, renderSeries, tooltipItemSorter }) {
+	const yAxisWidth = estimateYAxisWidth(valueRange, valueColumn);
+	const xAxisTickValues = selectVisibleXAxisTicks({
+		values: data.map(getXAxisTickValue),
+		labels: data.map((point) => formatXAxisValue(getXAxisTickValue(point), xColumn, timeBucket, "axis")),
+		plotWidth: getCartesianPlotWidth(width, yAxisWidth),
+		minimumTickGap: X_AXIS_MINIMUM_TICK_GAP,
+		measureLabelWidth: measureAxisLabelWidth
+	});
+	return /* @__PURE__ */ jsxs(Chart, {
+		data,
+		width,
+		height,
+		margin: getCartesianChartMargin(showDataLabels),
+		children: [
+			/* @__PURE__ */ jsx(CartesianGrid, {
+				vertical: false,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx(XAxis, {
+				dataKey: "xKey",
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 8,
+				interval: 0,
+				padding: CARTESIAN_X_AXIS_PADDING,
+				ticks: xAxisTickValues,
+				tickFormatter: (value) => formatXAxisValue(value, xColumn, timeBucket, "axis")
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 4,
+				allowDecimals: allowDecimalTicks,
+				width: yAxisWidth,
+				tickFormatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: valueColumn,
+					surface: "axis",
+					numericRange: valueRange
+				}) : String(value)
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				itemSorter: tooltipItemSorter,
+				formatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: valueColumn,
+					surface: "tooltip",
+					numericRange: valueRange
+				}) : value,
+				labelFormatter: (label, payload) => formatTooltipLabel(label, payload, xColumn, timeBucket)
+			}),
+			series.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+			series.map(renderSeries)
+		]
+	});
+}
+/**
+* Resolve the most descriptive tooltip label from the transformed data point.
+*/
+function formatTooltipLabel(label, payload, xColumn, timeBucket) {
+	if (!xColumn) return String(label);
+	const point = payload?.[0]?.payload;
+	return formatXAxisValue(typeof point?.["xKey"] === "string" || typeof point?.["xKey"] === "number" ? point["xKey"] : label, xColumn, timeBucket, "tooltip");
+}
+/**
+* Format one X-axis value using the same shared column rules as the rest of the
+* chart while preserving the special bucket labels for inferred date buckets.
+*/
+function formatXAxisValue(value, xColumn, timeBucket, surface) {
+	if (!xColumn) return String(value);
+	if (xColumn.type === "date" && timeBucket && typeof value === "string" && !xColumn.formatter) return formatTimeBucketLabel(value, timeBucket, surface);
+	return formatChartValue(value, {
+		column: xColumn,
+		surface,
+		timeBucket
+	});
+}
+function BarChartRenderer(props) {
+	const { series, showDataLabels, dataLabelStyle, valueColumn, valueRange } = props;
+	const barRadius = useCssBarRadius();
+	const isStacked = series.length > 1;
+	const topSeriesKey = series[series.length - 1]?.dataKey;
+	return /* @__PURE__ */ jsx(CartesianChartShell, {
+		...props,
+		Chart: BarChart,
+		tooltipItemSorter: isStacked ? createStackedTooltipItemSorter(series) : void 0,
+		renderSeries: (s) => {
+			const isTop = !isStacked || s.dataKey === topSeriesKey;
+			return /* @__PURE__ */ jsx(Bar, {
+				dataKey: s.dataKey,
+				name: s.label,
+				fill: s.color,
+				fillOpacity: .7,
+				radius: isTop ? [
+					barRadius,
+					barRadius,
+					0,
+					0
+				] : 0,
+				stackId: isStacked ? "stack" : void 0,
+				children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+					position: dataLabelStyle.position,
+					offset: dataLabelStyle.offset,
+					formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+				})
+			}, s.dataKey);
+		}
+	});
+}
+function LineChartRenderer(props) {
+	const { showDataLabels, dataLabelStyle, valueColumn, valueRange, connectNulls } = props;
+	return /* @__PURE__ */ jsx(CartesianChartShell, {
+		...props,
+		Chart: LineChart,
+		renderSeries: (s) => /* @__PURE__ */ jsx(Line, {
+			type: "monotone",
+			dataKey: s.dataKey,
+			name: s.label,
+			stroke: s.color,
+			strokeWidth: 2,
+			dot: { r: 3 },
+			activeDot: { r: 5 },
+			connectNulls,
+			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+				position: dataLabelStyle.position,
+				offset: dataLabelStyle.offset,
+				formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+			})
+		}, s.dataKey)
+	});
+}
+function AreaChartRenderer(props) {
+	const { showDataLabels, dataLabelStyle, valueColumn, valueRange, connectNulls } = props;
+	return /* @__PURE__ */ jsx(CartesianChartShell, {
+		...props,
+		Chart: AreaChart,
+		renderSeries: (s) => /* @__PURE__ */ jsx(Area, {
+			type: "monotone",
+			dataKey: s.dataKey,
+			name: s.label,
+			stroke: s.color,
+			fill: s.color,
+			fillOpacity: .3,
+			connectNulls,
+			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+				position: dataLabelStyle.position,
+				offset: dataLabelStyle.offset,
+				formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+			})
+		}, s.dataKey)
+	});
+}
+function PercentAreaChartRenderer(props) {
+	const { series, data, xColumn, timeBucket, showDataLabels, dataLabelStyle, connectNulls, width, height } = props;
+	const seriesKeys = series.map((s) => s.dataKey);
+	const tooltipItemSorter = createStackedTooltipItemSorter(series);
+	const stackableData = filterAllNullPoints(data, series);
+	const yAxisWidth = estimateYAxisWidth(PERCENT_STACKED_RANGE, PERCENT_STACKED_COLUMN);
+	const xAxisTickValues = selectVisibleXAxisTicks({
+		values: stackableData.map(getXAxisTickValue),
+		labels: stackableData.map((point) => formatXAxisValue(getXAxisTickValue(point), xColumn, timeBucket, "axis")),
+		plotWidth: getCartesianPlotWidth(width, yAxisWidth),
+		minimumTickGap: X_AXIS_MINIMUM_TICK_GAP,
+		measureLabelWidth: measureAxisLabelWidth
+	});
+	return /* @__PURE__ */ jsxs(AreaChart, {
+		data: stackableData,
+		width,
+		height,
+		margin: getCartesianChartMargin(showDataLabels),
+		stackOffset: "expand",
+		children: [
+			/* @__PURE__ */ jsx(CartesianGrid, {
+				vertical: false,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx(XAxis, {
+				dataKey: "xKey",
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 8,
+				interval: 0,
+				padding: CARTESIAN_X_AXIS_PADDING,
+				ticks: xAxisTickValues,
+				tickFormatter: (value) => formatXAxisValue(value, xColumn, timeBucket, "axis")
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 4,
+				tickFormatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: PERCENT_STACKED_COLUMN,
+					surface: "axis",
+					numericRange: PERCENT_STACKED_RANGE
+				}) : String(value),
+				width: yAxisWidth
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				itemSorter: tooltipItemSorter,
+				formatter: (_value, _name, entry) => {
+					const proportion = getPercentStackedDisplayValue(entry, String(entry.dataKey ?? ""), seriesKeys);
+					if (proportion != null) return formatChartValue(proportion, {
+						column: PERCENT_STACKED_COLUMN,
+						surface: "tooltip",
+						numericRange: PERCENT_STACKED_RANGE
+					});
+					return typeof _value === "number" ? formatChartValue(_value, {
+						column: PERCENT_STACKED_COLUMN,
+						surface: "tooltip",
+						numericRange: PERCENT_STACKED_RANGE
+					}) : _value;
+				},
+				labelFormatter: (label, payload) => formatTooltipLabel(label, payload, xColumn, timeBucket)
+			}),
+			series.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+			series.map((s) => /* @__PURE__ */ jsx(Area, {
+				type: "monotone",
+				dataKey: s.dataKey,
+				name: s.label,
+				stroke: s.color,
+				fill: s.color,
+				fillOpacity: .3,
+				stackId: "percent",
+				connectNulls,
+				children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+					position: dataLabelStyle.position,
+					offset: dataLabelStyle.offset,
+					valueAccessor: (entry) => getPercentStackedDisplayValue(entry, s.dataKey, seriesKeys) ?? 0,
+					formatter: (value) => formatDataLabel(value, PERCENT_STACKED_COLUMN, PERCENT_STACKED_RANGE)
+				})
+			}, s.dataKey))
+		]
+	});
+}
+function GroupedBarChartRenderer(props) {
+	const { showDataLabels, dataLabelStyle, valueColumn, valueRange } = props;
+	const barRadius = useCssBarRadius();
+	return /* @__PURE__ */ jsx(CartesianChartShell, {
+		...props,
+		Chart: BarChart,
+		renderSeries: (s) => /* @__PURE__ */ jsx(Bar, {
+			dataKey: s.dataKey,
+			name: s.label,
+			fill: s.color,
+			fillOpacity: .7,
+			radius: [
+				barRadius,
+				barRadius,
+				0,
+				0
+			],
+			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+				position: dataLabelStyle.position,
+				offset: dataLabelStyle.offset,
+				formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+			})
+		}, s.dataKey)
+	});
+}
+function PercentBarChartRenderer(props) {
+	const { series, data, xColumn, timeBucket, showDataLabels, dataLabelStyle, width, height } = props;
+	const barRadius = useCssBarRadius();
+	const topSeriesKey = series[series.length - 1]?.dataKey;
+	const seriesKeys = series.map((s) => s.dataKey);
+	const tooltipItemSorter = createStackedTooltipItemSorter(series);
+	const yAxisWidth = estimateYAxisWidth(PERCENT_STACKED_RANGE, PERCENT_STACKED_COLUMN);
+	const xAxisTickValues = selectVisibleXAxisTicks({
+		values: data.map(getXAxisTickValue),
+		labels: data.map((point) => formatXAxisValue(getXAxisTickValue(point), xColumn, timeBucket, "axis")),
+		plotWidth: getCartesianPlotWidth(width, yAxisWidth),
+		minimumTickGap: X_AXIS_MINIMUM_TICK_GAP,
+		measureLabelWidth: measureAxisLabelWidth
+	});
+	return /* @__PURE__ */ jsxs(BarChart, {
+		data,
+		width,
+		height,
+		margin: getCartesianChartMargin(showDataLabels),
+		stackOffset: "expand",
+		children: [
+			/* @__PURE__ */ jsx(CartesianGrid, {
+				vertical: false,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx(XAxis, {
+				dataKey: "xKey",
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 8,
+				interval: 0,
+				padding: CARTESIAN_X_AXIS_PADDING,
+				ticks: xAxisTickValues,
+				tickFormatter: (value) => formatXAxisValue(value, xColumn, timeBucket, "axis")
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 4,
+				tickFormatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: PERCENT_STACKED_COLUMN,
+					surface: "axis",
+					numericRange: PERCENT_STACKED_RANGE
+				}) : String(value),
+				width: yAxisWidth
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				itemSorter: tooltipItemSorter,
+				formatter: (_value, _name, entry) => {
+					const proportion = getPercentStackedDisplayValue(entry, String(entry.dataKey ?? ""), seriesKeys);
+					if (proportion != null) return formatChartValue(proportion, {
+						column: PERCENT_STACKED_COLUMN,
+						surface: "tooltip",
+						numericRange: PERCENT_STACKED_RANGE
+					});
+					return typeof _value === "number" ? formatChartValue(_value, {
+						column: PERCENT_STACKED_COLUMN,
+						surface: "tooltip",
+						numericRange: PERCENT_STACKED_RANGE
+					}) : _value;
+				},
+				labelFormatter: (label, payload) => formatTooltipLabel(label, payload, xColumn, timeBucket)
+			}),
+			series.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+			series.map((s) => {
+				const isTop = s.dataKey === topSeriesKey;
+				return /* @__PURE__ */ jsx(Bar, {
+					dataKey: s.dataKey,
+					name: s.label,
+					fill: s.color,
+					fillOpacity: .7,
+					radius: isTop ? [
+						barRadius,
+						barRadius,
+						0,
+						0
+					] : 0,
+					stackId: "percent",
+					children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+						position: dataLabelStyle.position,
+						offset: dataLabelStyle.offset,
+						valueAccessor: (entry) => getPercentStackedDisplayValue(entry, s.dataKey, seriesKeys) ?? 0,
+						formatter: (value) => formatDataLabel(value, PERCENT_STACKED_COLUMN, PERCENT_STACKED_RANGE)
+					})
+				}, s.dataKey);
+			})
+		]
+	});
+}
+function PieChartRenderer({ data, series, innerRadius, width, height, valueColumn, valueRange, xColumn, timeBucket, showDataLabels }) {
+	const valueKey = series[0]?.dataKey;
+	const pieData = data.map((point, index) => {
+		return {
+			name: typeof point["xKey"] === "string" || typeof point["xKey"] === "number" ? formatXAxisValue(point["xKey"], xColumn, timeBucket, "tooltip") : String(point["xLabel"]),
+			value: valueKey && typeof point[valueKey] === "number" ? point[valueKey] : 0,
+			fill: getSeriesColor(index)
+		};
+	});
+	return /* @__PURE__ */ jsxs(PieChart, {
+		width,
+		height,
+		children: [
+			/* @__PURE__ */ jsx(Tooltip, { formatter: (value) => typeof value === "number" ? formatChartValue(value, {
+				column: valueColumn,
+				surface: "tooltip",
+				numericRange: valueRange
+			}) : value }),
+			/* @__PURE__ */ jsx(Legend, {}),
+			/* @__PURE__ */ jsx(Pie, {
+				data: pieData,
+				dataKey: "value",
+				nameKey: "name",
+				cx: "50%",
+				cy: "50%",
+				innerRadius: innerRadius ? "40%" : 0,
+				outerRadius: "80%",
+				label: showDataLabels ? ({ name, value }) => shouldHideDataLabel(value) ? "" : `${name}: ${typeof value === "number" ? formatChartValue(value, {
+					column: valueColumn,
+					surface: "data-label",
+					numericRange: valueRange
+				}) : value}` : false,
+				labelLine: false
+			})
+		]
+	});
+}
+/**
+* Format one cartesian data label with the same surface-aware rules used
+* elsewhere in the chart UI.
+*/
+function formatDataLabel(value, valueColumn, valueRange) {
+	if (shouldHideDataLabel(value)) return "";
+	if (typeof value !== "number") return String(value);
+	return formatChartValue(value, {
+		column: valueColumn,
+		surface: "data-label",
+		numericRange: valueRange
+	});
+}
+/**
+* Suppress zero-value labels in the built-in UI so charts stay quieter by
+* default while tooltips and raw values remain unchanged.
+*/
+function shouldHideDataLabel(value) {
+	return value == null || typeof value === "number" && value === 0;
+}
+/**
+* Table renderer — shows the pipeline output as an HTML table.
+*
+* Applies the same formatting pipeline as the chart renderers (dates respect
+* time-bucket labels, numbers use full-precision `table-cell` surface rules).
+* Scrolls both axes when the data overflows the configured height.
+*/
+function TableRenderer({ data, series, height, className, valueColumn, valueRange, xColumn, timeBucket }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center text-sm text-muted-foreground ${className ?? ""}`,
+		style: { height },
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `overflow-auto border border-border/50 rounded-md ${className ?? ""}`,
+		style: { maxHeight: height },
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full border-collapse text-sm",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "sticky top-0 z-10 bg-muted/80 backdrop-blur-sm",
+				children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					className: "overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+					children: xColumn?.label ?? "Category"
+				}), series.map((s) => /* @__PURE__ */ jsx("th", {
+					className: "overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-right text-xs font-medium text-muted-foreground",
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center justify-end gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "inline-block h-2.5 w-2.5 shrink-0 rounded-[2px]",
+							style: { backgroundColor: s.color },
+							"aria-hidden": true
+						}), /* @__PURE__ */ jsx("span", {
+							className: "overflow-hidden text-ellipsis",
+							children: s.label
+						})]
+					})
+				}, s.dataKey))] })
+			}), /* @__PURE__ */ jsx("tbody", { children: data.map((point, rowIndex) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-t border-border/30 transition-colors hover:bg-muted/30",
+				children: [/* @__PURE__ */ jsx("td", {
+					className: "overflow-hidden text-ellipsis whitespace-nowrap px-3 py-1.5 font-medium text-foreground",
+					children: formatTableXValue(point, xColumn, timeBucket)
+				}), series.map((s) => /* @__PURE__ */ jsx("td", {
+					className: "overflow-hidden text-ellipsis whitespace-nowrap px-3 py-1.5 text-right tabular-nums text-foreground",
+					children: formatTableCellValue(point[s.dataKey], valueColumn, valueRange)
+				}, s.dataKey))]
+			}, rowIndex)) })]
+		})
+	});
+}
+/**
+* Format the X-axis value for a table row using the same logic as the chart
+* renderers: time-bucket-aware date labels, column formatters, etc.
+*/
+function formatTableXValue(point, xColumn, timeBucket) {
+	const rawValue = typeof point["xKey"] === "string" || typeof point["xKey"] === "number" ? point["xKey"] : point["xLabel"];
+	if (rawValue == null) return "Unknown";
+	return formatXAxisValue(rawValue, xColumn, timeBucket, "table-cell");
+}
+/**
+* Format one metric cell value with full precision (matches tooltip depth).
+*/
+function formatTableCellValue(value, valueColumn, valueRange) {
+	if (value == null) return "—";
+	if (typeof value !== "number") return String(value);
+	return formatChartValue(value, {
+		column: valueColumn,
+		surface: "table-cell",
+		numericRange: valueRange
+	});
+}
+//#endregion
+export { ChartCanvas };