@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/ChartCard/ChartCard.js

@@ -0,0 +1,718 @@
+import { ArcVegaChart } from "../../lib/vega/ArcVegaChart.js";
+import { arcEmbedOptions } from "../../lib/vega/embed.js";
+import { useChartTokens } from "../../lib/vega/tokens.js";
+import { ArcTooltipRows, useArcTooltipHandler } from "../../lib/vega/tooltip.js";
+import { CHART_TYPES, buildChartDescription, buildChartPlotDescription, buildChartTableModel, buildRadarWebRows, buildRampBuckets, createChartFormatters, deriveChartState, hasEnoughData, inferFieldType, missingChartFields, normalizeChartData, resolveChartColorMode, resolveChartLabels } from "./ChartCard.model.js";
+import { CHART_AXES_DATASET, CHART_SERIES_NAMES_PARAM, CHART_TABLE_DATASET, buildChartSpec } from "./ChartCard.chart.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Badge, Box, Button, HorizontalScroll, Popover, PopoverPopup, PopoverTitle, PopoverTrigger, Skeleton, SkeletonGroup, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow, Toggle, cn } from "@arcfusionz/arc-primitive-ui";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChartCard/ChartCard.tsx
+const sizeStyles = {
+	sm: {
+		padding: "sm",
+		gap: "gap-2",
+		gapPx: 8,
+		title: "text-base",
+		titleLinePx: 24,
+		legendLinePx: 20,
+		plotHeight: 180
+	},
+	md: {
+		padding: "md",
+		gap: "gap-3",
+		gapPx: 12,
+		title: "text-lg",
+		titleLinePx: 28,
+		legendLinePx: 22,
+		plotHeight: 240
+	},
+	lg: {
+		padding: "lg",
+		gap: "gap-4",
+		gapPx: 16,
+		title: "text-xl",
+		titleLinePx: 32,
+		legendLinePx: 24,
+		plotHeight: 320
+	}
+};
+const titleClasses = "font-heading font-semibold tracking-tight text-foreground";
+const legendLabelClasses = "font-sans text-xs font-medium uppercase tracking-widest";
+const panelStateClasses = "w-full max-w-none gap-3 px-3 py-4 [--artwork-box:4rem]";
+const X_AXIS_HEIGHT_PX = 24;
+const PX_PER_TICK = 52;
+const MISSING_NAME = "Chart";
+const NO_SERIES = [];
+function TableIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "16",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M3 10h18M9 10v10" })]
+	});
+}
+/**
+* A legend swatch in the plot's own mark shape, so a series' meaning never
+* rests on colour alone — the shape and the label carry it too.
+*/
+function ChartKey({ mark, color }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 14 14",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "shrink-0",
+		style: { color },
+		children: mark === "line" ? /* @__PURE__ */ jsx("line", {
+			x1: "1",
+			y1: "7",
+			x2: "13",
+			y2: "7",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round"
+		}) : mark === "area" || mark === "band" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "1",
+			y: "6",
+			width: "12",
+			height: "5",
+			rx: "1",
+			fill: "currentColor",
+			opacity: "0.3"
+		}), /* @__PURE__ */ jsx("line", {
+			x1: "1",
+			y1: "6",
+			x2: "13",
+			y2: "6",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round"
+		})] }) : mark === "bar" || mark === "rect" || mark === "boxplot" ? /* @__PURE__ */ jsx("rect", {
+			x: "2",
+			y: "2",
+			width: "10",
+			height: "10",
+			rx: "2",
+			fill: "currentColor"
+		}) : mark === "tick" || mark === "rule" ? /* @__PURE__ */ jsx("line", {
+			x1: "7",
+			y1: "1",
+			x2: "7",
+			y2: "13",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round"
+		}) : /* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "7",
+			r: "4.5",
+			fill: "currentColor"
+		})
+	});
+}
+function useMergedRef(forwarded) {
+	const inner = useRef(null);
+	return [inner, useCallback((node) => {
+		inner.current = node;
+		if (typeof forwarded === "function") forwarded(node);
+		else if (forwarded) forwarded.current = node;
+	}, [forwarded])];
+}
+function usePlotWidth(ref, enabled) {
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const el = ref.current;
+		if (!el) return;
+		let frame = 0;
+		const measure = () => {
+			const next = Math.round(el.getBoundingClientRect().width);
+			setWidth((prev) => prev === next ? prev : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return width;
+}
+/**
+* A chart panel for dashboards: a title, a legend, and a chart — nothing else
+* on its face. `type` picks one of 36 Vega-Lite forms, `data` is plain records
+* and the remaining fields are field NAMES, so the same card draws a stacked
+* bar, a donut, a heatmap, a box plot or a radar without changing shape.
+*
+* Where the other cards in this package answer one fixed question in text and
+* illustrate it with a plot, ChartCard is the plot: the comparison is the form
+* the consumer chose. Every state is handled and layout-stable, and the text
+* equivalents the chart owes a screen reader — a generated description, a
+* generated plot label, and a table twin holding every value — are all there,
+* none of them on the card's face.
+*/
+const ChartCard = forwardRef(({ title, name: nameProp, type, data, x: xField, y: yField, series: seriesField, value: valueField, sizeBy: sizeField, x2: x2Field, xType: xTypeProp, yType: yTypeProp, xLabel, yLabel, valueLabel, seriesLabel, sizeLabel, axisTitles = false, axes = true, grid = true, legend, legendPosition = "top", visibleSeries, defaultVisibleSeries, onVisibleSeriesChange, seriesColor = "auto", maxSeries, sort = "none", aggregate, maxBins = 20, extent, innerRadius = .6, format = "compact", formatValue, height: heightProp, tooltip = true, status = "ready", filtered = false, stale = false, onRetry, onClearFilters, size = "md", titleLevel = 3, locale, timeZone, labels: labelOverrides, description, action, tableToggle = "focus", defaultTableOpen = false, onEmbed, patchSpec, render, className, ...rest }, forwardedRef) => {
+	const labels = useMemo(() => resolveChartLabels(labelOverrides), [labelOverrides]);
+	const sizes = sizeStyles[size];
+	const info = CHART_TYPES[type];
+	const plotHeight = heightProp ?? sizes.plotHeight + (axes && !info.polar ? X_AXIS_HEIGHT_PX : 0);
+	const name = nameProp ?? (typeof title === "string" ? title : MISSING_NAME);
+	const id = useId();
+	const headingId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	const tableId = `${id}-table`;
+	const [rootRef, setRootRef] = useMergedRef(forwardedRef);
+	const plotRef = useRef(null);
+	const [tableOpen, setTableOpen] = useState(defaultTableOpen);
+	const [popoverContainer, setPopoverContainer] = useState(null);
+	const tokens = useChartTokens(rootRef);
+	const isVisibleControlled = visibleSeries !== void 0;
+	const [innerVisible, setInnerVisible] = useState(defaultVisibleSeries);
+	const visibleRequest = isVisibleControlled ? visibleSeries : innerVisible;
+	const pendingAnnounce = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	const xType = xTypeProp ?? inferFieldType(data, xField) ?? "nominal";
+	const yType = yTypeProp ?? inferFieldType(data, yField) ?? "quantitative";
+	const missing = useMemo(() => missingChartFields(type, {
+		x: xField,
+		y: yField,
+		series: seriesField,
+		value: valueField,
+		size: sizeField,
+		x2: x2Field
+	}), [
+		type,
+		xField,
+		yField,
+		seriesField,
+		valueField,
+		sizeField,
+		x2Field
+	]);
+	const seriesCount = useMemo(() => {
+		if (!seriesField) return 1;
+		const seen = /* @__PURE__ */ new Set();
+		for (const record of data) {
+			const raw = record[seriesField];
+			if (raw != null) seen.add(String(raw));
+		}
+		return Math.max(1, seen.size);
+	}, [data, seriesField]);
+	const slots = tokens?.category.length ?? 3;
+	const colorMode = resolveChartColorMode(seriesColor, type, maxSeries != null ? Math.min(seriesCount, maxSeries) : seriesCount, slots);
+	const summary = useMemo(() => tokens && missing.length === 0 ? normalizeChartData(data, {
+		type,
+		x: xField,
+		y: yField,
+		series: seriesField,
+		value: valueField,
+		size: sizeField,
+		x2: x2Field,
+		xType,
+		yType,
+		visible: visibleRequest,
+		maxSeries,
+		otherLabel: labels.other,
+		sort,
+		colorMode,
+		tokens
+	}) : null, [
+		tokens,
+		missing,
+		data,
+		type,
+		xField,
+		yField,
+		seriesField,
+		valueField,
+		sizeField,
+		x2Field,
+		xType,
+		yType,
+		visibleRequest,
+		maxSeries,
+		labels.other,
+		sort,
+		colorMode
+	]);
+	const dimensionName = xLabel ?? xField ?? seriesLabel ?? seriesField ?? "category";
+	const measureName = valueLabel ?? valueField ?? yLabel ?? yField ?? "value";
+	const seriesName = seriesLabel ?? seriesField ?? labels.tableSeries;
+	const positionName = yLabel ?? yField ?? measureName;
+	const formatters = useMemo(() => createChartFormatters({
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType,
+		yType,
+		granularity: summary?.granularity ?? "day"
+	}), [
+		format,
+		locale,
+		timeZone,
+		formatValue,
+		xType,
+		yType,
+		summary
+	]);
+	const hasData = data.length > 0;
+	const hasChart = missing.length === 0 && hasEnoughData(type, summary);
+	const state = deriveChartState({
+		status,
+		hasChart,
+		hasData,
+		filtered
+	});
+	const showContent = state === "ready" || state === "refreshing";
+	const allSeries = summary?.series ?? NO_SERIES;
+	const visibleKeys = useMemo(() => {
+		const known = new Set(allSeries.map((entry) => entry.key));
+		const requested = visibleRequest?.filter((key) => known.has(key));
+		return requested && requested.length > 0 ? requested : [...known];
+	}, [allSeries, visibleRequest]);
+	const visibleSet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
+	const toggleSeries = useCallback((key, shown) => {
+		const keys = allSeries.map((entry) => entry.key);
+		const next = shown ? keys.filter((entry) => visibleSet.has(entry) || entry === key) : visibleKeys.filter((entry) => entry !== key);
+		if (next.length === 0) return;
+		pendingAnnounce.current = true;
+		if (!isVisibleControlled) setInnerVisible(next);
+		onVisibleSeriesChange?.(next);
+	}, [
+		allSeries,
+		visibleSet,
+		visibleKeys,
+		isVisibleControlled,
+		onVisibleSeriesChange
+	]);
+	const cardDescription = description ?? buildChartDescription({
+		name,
+		type,
+		state,
+		summary,
+		visibleKeys,
+		formatters,
+		labels,
+		measureName,
+		dimensionName,
+		aggregate,
+		stale
+	});
+	useEffect(() => {
+		if (!pendingAnnounce.current) return;
+		pendingAnnounce.current = false;
+		setAnnouncement(cardDescription);
+	}, [cardDescription]);
+	const plotWidth = usePlotWidth(plotRef, showContent && hasChart);
+	const plotSize = info.square ? Math.max(0, Math.min(plotWidth, plotHeight)) : plotWidth;
+	const tooltipContent = useCallback(({ value }) => {
+		if (value == null) return null;
+		if (typeof value !== "object") return String(value);
+		const rows = Object.entries(value).filter(([label]) => label !== "" && label !== "c" && label !== "s" && label !== "o" && label !== "i").map(([label, entry]) => [label, String(entry)]);
+		return rows.length > 0 ? /* @__PURE__ */ jsx(ArcTooltipRows, { rows }) : null;
+	}, []);
+	const { handler: tooltipHandler, tooltip: tooltipNode } = useArcTooltipHandler({ content: tooltipContent });
+	const embedOptions = useMemo(() => arcEmbedOptions({ tooltip: tooltip ? tooltipHandler : false }), [tooltip, tooltipHandler]);
+	const yTicks = Math.max(2, Math.round(plotHeight / PX_PER_TICK));
+	const timeGrammar = (kind) => [
+		kind,
+		locale ?? "",
+		timeZone ?? ""
+	].join("@").replace(/@+$/, "");
+	const axisGranularity = summary?.granularity === "datetime" ? "day-time" : summary?.granularity ?? "day";
+	const valueFormatGrammar = locale ? `${format}@${locale}` : format;
+	const timeFormatGrammar = timeGrammar(summary?.granularity ?? "day");
+	const axisTimeFormatGrammar = timeGrammar(axisGranularity === "day" ? "day-short" : axisGranularity);
+	const xAxisTitle = axisTitles ? dimensionName : null;
+	const yAxisTitle = axisTitles ? positionName : null;
+	const spec = useMemo(() => {
+		if (!tokens) return null;
+		const built = buildChartSpec({
+			type,
+			xType,
+			yType,
+			height: plotHeight,
+			axes,
+			grid,
+			axisTitles,
+			xTitle: xAxisTitle,
+			yTitle: yAxisTitle,
+			valueTitle: measureName,
+			seriesTitle: seriesName,
+			sizeTitle: sizeLabel ?? sizeField,
+			valueFormat: valueFormatGrammar,
+			timeFormat: timeFormatGrammar,
+			axisTimeFormat: axisTimeFormatGrammar,
+			aggregate,
+			maxBins,
+			extent,
+			tooltip,
+			hasX: xField != null,
+			innerRadius,
+			yTicks,
+			locale,
+			timeZone
+		}, tokens);
+		return patchSpec ? patchSpec(built) : built;
+	}, [
+		tokens,
+		type,
+		xType,
+		yType,
+		plotHeight,
+		axes,
+		grid,
+		axisTitles,
+		xAxisTitle,
+		yAxisTitle,
+		measureName,
+		seriesName,
+		sizeLabel,
+		sizeField,
+		valueFormatGrammar,
+		timeFormatGrammar,
+		axisTimeFormatGrammar,
+		aggregate,
+		maxBins,
+		extent,
+		tooltip,
+		xField,
+		innerRadius,
+		yTicks,
+		locale,
+		timeZone,
+		patchSpec
+	]);
+	const rows = summary?.rows;
+	const webRows = useMemo(() => type === "radar" ? buildRadarWebRows(summary) : [], [type, summary]);
+	const datasets = useMemo(() => ({
+		[CHART_TABLE_DATASET]: rows ?? [],
+		[CHART_AXES_DATASET]: webRows
+	}), [rows, webRows]);
+	const seriesNames = useMemo(() => allSeries.map((entry) => entry.label), [allSeries]);
+	const signals = useMemo(() => type === "violin" ? { [CHART_SERIES_NAMES_PARAM]: seriesNames } : void 0, [type, seriesNames]);
+	const plotDescription = buildChartPlotDescription({
+		type,
+		measureName,
+		dimensionName,
+		labels
+	});
+	const rampBuckets = useMemo(() => info.legend === "ramp" && tokens ? buildRampBuckets(summary?.domain ?? null, tokens, formatters.formatValue) : [], [
+		info.legend,
+		tokens,
+		summary,
+		formatters
+	]);
+	const legendKind = info.legend === "ramp" ? "ramp" : allSeries.length > 1 ? "series" : "none";
+	const showLegend = (legend ?? legendKind !== "none") && showContent && legendKind !== "none";
+	const reserveLegend = legend ?? (seriesCount > 1 || info.legend === "ramp");
+	const legendNode = showLegend && /* @__PURE__ */ jsx(HorizontalScroll, {
+		fade: true,
+		className: "min-w-0",
+		"data-part": "legend-scroll",
+		children: /* @__PURE__ */ jsx("div", {
+			role: legendKind === "series" ? "group" : void 0,
+			"aria-label": legendKind === "series" ? labels.legendGroup(name) : void 0,
+			className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1",
+			style: { minHeight: sizes.legendLinePx },
+			"data-part": "legend",
+			children: legendKind === "series" ? allSeries.map((entry) => {
+				const shown = visibleSet.has(entry.key);
+				return /* @__PURE__ */ jsxs(Toggle, {
+					variant: "ghost",
+					size: "sm",
+					pressed: shown,
+					onPressedChange: (next) => toggleSeries(entry.key, next),
+					disabled: shown && visibleKeys.length <= 1,
+					"aria-label": shown ? labels.hideSeries(entry.label) : labels.showSeries(entry.label),
+					className: cn("h-auto max-w-full gap-1.5 bg-transparent px-1 py-0.5 hover:bg-muted", "data-pressed:bg-transparent data-pressed:hover:bg-muted", shown ? "" : "opacity-50"),
+					"data-part": "legend-chip",
+					"data-shown": shown ? "" : void 0,
+					children: [/* @__PURE__ */ jsx(ChartKey, {
+						mark: info.mark,
+						color: shown ? entry.color : tokens?.mutedForeground ?? "currentColor"
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(legendLabelClasses, "min-w-0 truncate text-muted-foreground"),
+						children: entry.label
+					})]
+				}, entry.key);
+			}) : rampBuckets.map((bucket, at) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex max-w-full items-center gap-1.5 px-1 py-0.5",
+				"data-part": "legend-bucket",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-3 shrink-0 rounded-sm",
+					style: { background: bucket.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(legendLabelClasses, "min-w-0 truncate text-muted-foreground tabular-nums"),
+					children: bucket.label
+				})]
+			}, at))
+		})
+	});
+	const tableModel = useMemo(() => showContent ? buildChartTableModel({
+		type,
+		summary,
+		formatters,
+		labels,
+		measureName,
+		dimensionName,
+		seriesName,
+		sizeName: sizeLabel ?? sizeField
+	}) : null, [
+		showContent,
+		type,
+		summary,
+		formatters,
+		labels,
+		measureName,
+		dimensionName,
+		seriesName,
+		sizeLabel,
+		sizeField
+	]);
+	const hasTable = tableModel != null && tableToggle !== "none";
+	const bodyMinHeight = plotHeight + (reserveLegend ? sizes.legendLinePx + sizes.gapPx : 0);
+	const HeadingTag = `h${titleLevel}`;
+	const busy = state === "loading" || state === "refreshing";
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setRootRef,
+		render: render ?? /* @__PURE__ */ jsx("figure", {}),
+		padding: sizes.padding,
+		"aria-labelledby": headingId,
+		"aria-describedby": descriptionId,
+		"aria-busy": busy || void 0,
+		"data-status": status,
+		"data-state": state,
+		"data-size": size,
+		"data-type": type,
+		"data-intent": info.intent,
+		"data-series-color": colorMode,
+		"data-legend": showLegend ? legendKind : void 0,
+		"data-empty": state === "empty" || state === "no-match" ? "" : void 0,
+		"data-insufficient": state === "insufficient" ? "" : void 0,
+		"data-stale": stale ? "" : void 0,
+		"data-folded": showContent && summary && summary.folded > 0 ? summary.folded : void 0,
+		"data-hidden": showContent ? allSeries.length - visibleKeys.length || void 0 : void 0,
+		...rest,
+		className: cn("relative flex min-w-0 flex-col", sizes.gap, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsx(HeadingTag, {
+					id: headingId,
+					className: cn(titleClasses, sizes.title, "min-w-0 line-clamp-2"),
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						stale && /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							appearance: "soft",
+							size: "sm",
+							children: labels.stale
+						}),
+						hasTable && /* @__PURE__ */ jsxs(Popover, {
+							open: tableOpen,
+							onOpenChange: setTableOpen,
+							children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconOnly: true,
+									circular: true,
+									"aria-label": tableOpen ? labels.hideTable(name) : labels.showTable(name),
+									className: cn("size-6 min-w-0 text-muted-foreground hover:text-foreground", tableToggle === "focus" && !tableOpen && "sr-only focus-visible:not-sr-only focus-visible:relative focus-visible:size-6")
+								}),
+								children: /* @__PURE__ */ jsx(TableIcon, { className: "size-3.5" })
+							}), popoverContainer && /* @__PURE__ */ jsxs(PopoverPopup, {
+								id: tableId,
+								anchor: rootRef,
+								container: popoverContainer,
+								side: "right",
+								align: "start",
+								collisionPadding: 8,
+								className: "pointer-events-auto w-[min(32rem,var(--available-width))]",
+								"data-part": "data-popover",
+								children: [
+									/* @__PURE__ */ jsx(PopoverTitle, {
+										className: "mb-3",
+										children: name
+									}),
+									/* @__PURE__ */ jsx(TableContainer, {
+										variant: "plain",
+										tabIndex: 0,
+										role: "region",
+										"aria-label": labels.tableCaption(name),
+										className: "max-h-[min(22rem,calc(var(--available-height)-5rem))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+										"data-part": "table",
+										children: /* @__PURE__ */ jsxs(Table, {
+											size: "sm",
+											stickyHeader: true,
+											hoverable: false,
+											children: [
+												/* @__PURE__ */ jsx(TableCaption, {
+													side: "top",
+													className: "sr-only",
+													children: labels.tableCaption(name)
+												}),
+												/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: tableModel.columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+													className: column.numeric ? "text-right" : void 0,
+													children: column.label
+												}, column.key)) }) }),
+												/* @__PURE__ */ jsx(TableBody, { children: tableModel.rows.map((cells, at) => /* @__PURE__ */ jsx(TableRow, { children: cells.map((cell, index) => /* @__PURE__ */ jsx(TableCell, {
+													className: tableModel.columns[index].numeric ? "text-right tabular-nums" : void 0,
+													children: cell
+												}, tableModel.columns[index].key)) }, at)) })
+											]
+										})
+									}),
+									tableModel.shown < tableModel.total && /* @__PURE__ */ jsx("p", {
+										className: "mt-3 font-sans text-xs text-muted-foreground",
+										children: labels.tableTruncated(tableModel.shown, tableModel.total)
+									})
+								]
+							})]
+						}),
+						action
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "sr-only",
+				children: cardDescription
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				"data-part": "announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("relative flex min-w-0 flex-col", sizes.gap),
+				style: { minHeight: bodyMinHeight },
+				children: [
+					state === "loading" && /* @__PURE__ */ jsxs(SkeletonGroup, {
+						className: cn("flex flex-col", sizes.gap),
+						children: [reserveLegend && /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-3",
+							children: Array.from({ length: Math.max(2, Math.min(4, seriesCount || 3)) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+								variant: "rounded",
+								className: "w-20",
+								style: { height: sizes.legendLinePx }
+							}, index))
+						}), /* @__PURE__ */ jsx(Skeleton, {
+							variant: "rounded",
+							className: "w-full",
+							style: { height: plotHeight }
+						})]
+					}),
+					state === "error" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "server-error",
+						scope: "inline",
+						title: labels.error,
+						description: false,
+						action: onRetry ? /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: onRetry,
+							children: labels.retry
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "empty" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.noData,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "no-match" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "no-results",
+						scope: "inline",
+						title: labels.noMatch,
+						description: false,
+						action: onClearFilters ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClearFilters,
+							children: labels.clearFilters
+						}) : void 0,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					state === "insufficient" && /* @__PURE__ */ jsx(SystemState, {
+						variant: "empty",
+						scope: "inline",
+						title: labels.insufficient,
+						description: false,
+						className: cn(panelStateClasses, "my-auto")
+					}),
+					showContent && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-col", sizes.gap),
+						children: [
+							legendPosition === "top" && legendNode,
+							/* @__PURE__ */ jsx("div", {
+								ref: plotRef,
+								className: cn("relative w-full", info.square && "flex items-center justify-center"),
+								style: { height: plotHeight },
+								"data-part": "plot",
+								children: plotSize > 0 && spec ? /* @__PURE__ */ jsx(ArcVegaChart, {
+									spec,
+									options: embedOptions,
+									datasets,
+									signals,
+									description: plotDescription,
+									width: plotSize,
+									height: info.square ? plotSize : plotHeight,
+									onEmbed,
+									className: cn("[&_svg]:block [&_.vega-bindings:empty]:hidden", info.square ? "shrink-0" : "absolute inset-0"),
+									fallback: /* @__PURE__ */ jsx(Skeleton, {
+										variant: "rounded",
+										className: "size-full"
+									})
+								}) : /* @__PURE__ */ jsx(Skeleton, {
+									variant: "rounded",
+									className: "size-full"
+								})
+							}),
+							legendPosition === "bottom" && legendNode
+						]
+					}),
+					state === "refreshing" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute -inset-1 rounded-md bg-veil"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPopoverContainer,
+				className: "pointer-events-none absolute inset-0",
+				"data-part": "popover-host"
+			}),
+			tooltipNode
+		]
+	});
+});
+ChartCard.displayName = "ChartCard";
+//#endregion
+export { ChartCard };