@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/Chart/Chart.js

@@ -0,0 +1,370 @@
+'use client';
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { useControllableState } from "../_internal/useControllableState.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { useSize } from "../_internal/useSize.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { ChartTable } from "./ChartTable.js";
+import { ChartTooltip } from "./ChartTooltip.js";
+import { LiveRegion } from "../LiveRegion/LiveRegion.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { categoryIndexAt, computeLayout, isEmpty, layoutMarkers, markerLabelsAt, markerPath, markerShape, resolveMarkers, resolveSeries, visibleSeries } from "./chartModel.js";
+import Chart_module_default from "./Chart.module.js";
+import { forwardRef, useEffect, useId, useMemo, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Chart/Chart.tsx
+var NO_MARKERS = [];
+var NO_DROPPED = [];
+var seriesStyle = (slot) => ({ "--chart-series-color": slot === 0 ? "var(--chart-total-comparison)" : `var(--chart-series-${slot})` });
+function useDevWarnings(dropped, overflowCount, droppedMarkers) {
+	const droppedKey = dropped.join("|");
+	const droppedMarkersKey = droppedMarkers.join("|");
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (droppedMarkersKey) console.warn(`[Chart] Ignored markers (${droppedMarkersKey.split("|").join(", ")}): at/from/to must be one of categories.`);
+	}, [droppedMarkersKey]);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (droppedKey) console.warn(`[Chart] Ignored comparison series (${droppedKey.split("|").join(", ")}): comparisonOf must name a series in line/bar, or be 'total' in stacked-bar/area.`);
+	}, [droppedKey]);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (overflowCount > 0) console.warn(`[Chart] ${overflowCount} series beyond the 8-colour palette reuse colours. Fold the tail into an "Other" series.`);
+	}, [overflowCount]);
+}
+/**
+* Time-series chart (line, bar, stacked bar, area) that fills a `DashboardWidget variant="chart"` body.
+* @see docs/components/Chart.md
+*/
+var Chart = forwardRef(function Chart({ type, label, categories, series, formatValue, emptyMessage, hiddenSeries, onHiddenSeriesChange, markers = NO_MARKERS, footnote, className, ...rest }, ref) {
+	const t = useTranslation();
+	const resolved = useMemo(() => resolveSeries(type, series, categories.length), [
+		type,
+		series,
+		categories.length
+	]);
+	const resolvedMarkers = useMemo(() => resolveMarkers(markers, categories), [markers, categories]);
+	useDevWarnings(resolved.dropped, resolved.overflowCount, categories.length > 0 ? resolvedMarkers.dropped : NO_DROPPED);
+	const [rawHidden, setHidden] = useControllableState({
+		value: hiddenSeries,
+		defaultValue: [],
+		onChange: onHiddenSeriesChange
+	});
+	const hidden = useMemo(() => {
+		const primaries = resolved.series.filter((s) => s.comparisonOf === void 0);
+		return primaries.length > 0 && primaries.every((s) => rawHidden.includes(s.key)) ? rawHidden.filter((k) => !primaries.some((s) => s.key === k)) : rawHidden;
+	}, [resolved.series, rawHidden]);
+	const [hoverKey, setHoverKey] = useState(null);
+	const [focusedKey, setFocusedKey] = useState(null);
+	const focusKey = hoverKey ?? focusedKey;
+	const hintId = useId();
+	const footnoteId = useId();
+	const hasFootnote = footnote != null && footnote !== false && footnote !== "";
+	const footnoteEl = hasFootnote && /* @__PURE__ */ jsx("div", {
+		id: footnoteId,
+		className: Chart_module_default.footnote,
+		children: footnote
+	});
+	const visible = useMemo(() => visibleSeries(resolved.series, hidden), [resolved.series, hidden]);
+	const empty = isEmpty(categories, resolved.series);
+	const [setPlotEl, size, plotEl] = useSize();
+	const [setRootEl, rootSize] = useSize();
+	const figureRef = useMemo(() => mergeRefs(ref, (el) => setRootEl(el)), [ref, setRootEl]);
+	const layout = useMemo(() => !empty && size.width > 0 && size.height > 0 ? computeLayout({
+		type,
+		categories,
+		series: visible,
+		width: size.width,
+		height: size.height,
+		formatValue
+	}) : null, [
+		empty,
+		size.width,
+		size.height,
+		type,
+		categories,
+		visible,
+		formatValue
+	]);
+	const markerGeometry = useMemo(() => layout ? layoutMarkers(resolvedMarkers.markers, layout) : [], [layout, resolvedMarkers.markers]);
+	const [active, setActive] = useState(null);
+	const [activeSource, setActiveSource] = useState(null);
+	const n = categories.length;
+	const current = active !== null && active < n ? active : null;
+	const inspect = (index, source) => {
+		setActive(index);
+		setActiveSource(index === null ? null : source);
+	};
+	const onKeyDown = (e) => {
+		let next;
+		switch (e.key) {
+			case "ArrowRight":
+				next = current === null ? 0 : Math.min(n - 1, current + 1);
+				break;
+			case "ArrowLeft":
+				next = current === null ? n - 1 : Math.max(0, current - 1);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = n - 1;
+				break;
+			case "Escape":
+				if (current === null) return;
+				next = null;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		inspect(next, "keyboard");
+	};
+	const pointerActive = activeSource === "pointer" && current !== null;
+	useEffect(() => {
+		if (!pointerActive || !plotEl) return;
+		const dismiss = (e) => {
+			if (e.composedPath().includes(plotEl)) return;
+			setActive(null);
+			setActiveSource(null);
+		};
+		document.addEventListener("pointerdown", dismiss, true);
+		return () => document.removeEventListener("pointerdown", dismiss, true);
+	}, [pointerActive, plotEl]);
+	const onPointer = (e) => {
+		if (!layout) return;
+		const rect = e.currentTarget.getBoundingClientRect();
+		inspect(categoryIndexAt(layout, e.clientX - rect.left), "pointer");
+	};
+	const parentLabel = (s) => resolved.series.find((p) => p.key === s.comparisonOf)?.label;
+	const columnHeader = (s) => parentLabel(s) ? `${s.label} (${parentLabel(s)})` : s.label;
+	const rows = current === null ? [] : visible.map((s) => ({
+		key: s.key,
+		label: s.label,
+		slot: s.slot,
+		comparison: s.comparisonOf !== void 0,
+		value: s.values[current] === null ? t("chart.noData") : formatValue(s.values[current])
+	}));
+	const anchorX = current !== null && layout ? layout.categoryX[current] : void 0;
+	const anchorY = layout?.plot.y;
+	const point = useMemo(() => anchorX === void 0 || anchorY === void 0 ? null : {
+		x: anchorX,
+		y: anchorY
+	}, [anchorX, anchorY]);
+	const notes = current === null ? [] : markerLabelsAt(resolvedMarkers.markers, current);
+	const liveText = activeSource === "keyboard" && current !== null ? `${categories[current]}: ${visible.map((s, i) => `${columnHeader(s)} ${rows[i].value}`).join(", ")}${notes.length ? `. ${notes.join(", ")}` : ""}` : "";
+	const known = hidden.filter((k) => resolved.series.some((s) => s.key === k));
+	const visiblePrimaries = resolved.series.filter((s) => s.comparisonOf === void 0 && !hidden.includes(s.key));
+	const toggle = (key) => {
+		if (known.includes(key)) {
+			setHidden(known.filter((k) => k !== key));
+			return;
+		}
+		if (resolved.series.find((s) => s.key === key)?.comparisonOf === void 0 && visiblePrimaries.length <= 1) return;
+		setHidden([...known, key]);
+	};
+	const activeKey = focusKey !== null && visible.some((s) => s.key === focusKey) ? focusKey : null;
+	const dimmed = (key) => activeKey !== null && key !== activeKey && resolved.series.find((s) => s.key === key)?.comparisonOf !== activeKey ? "" : void 0;
+	const legendItems = resolved.series.map((s) => ({
+		key: s.key,
+		label: s.label,
+		slot: s.slot,
+		comparison: s.comparisonOf !== void 0,
+		overflow: s.overflow,
+		locked: s.comparisonOf === void 0 && visiblePrimaries.length === 1 && visiblePrimaries[0] === s,
+		parentLabel: parentLabel(s),
+		parentHidden: s.comparisonOf !== void 0 && s.comparisonOf !== "total" && hidden.includes(s.comparisonOf)
+	}));
+	const compact = rootSize.height > 0 && rootSize.height < 120;
+	const columns = visible.map((s) => ({
+		key: s.key,
+		header: columnHeader(s),
+		values: s.values
+	}));
+	if (empty) return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		ref,
+		role: "figure",
+		"aria-label": label,
+		"aria-labelledby": void 0,
+		"data-empty": "",
+		"data-footnote": hasFootnote || void 0,
+		className: clsx(Chart_module_default.root, className),
+		children: [/* @__PURE__ */ jsx(EmptyState, {
+			title: emptyMessage || t("chart.empty"),
+			size: "sm"
+		}), footnoteEl]
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		ref: figureRef,
+		role: "figure",
+		"aria-label": label,
+		"aria-labelledby": void 0,
+		"data-compact": compact || void 0,
+		"data-footnote": hasFootnote || void 0,
+		className: clsx(Chart_module_default.root, className),
+		children: [
+			legendItems.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, {
+				items: legendItems,
+				hidden,
+				fitWidth: compact ? rootSize.width : void 0,
+				onToggle: toggle,
+				onHoverKey: setHoverKey,
+				onFocusKey: setFocusedKey
+			}) : /* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				id: hintId,
+				children: t("chart.keyboardHint")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: setPlotEl,
+				className: Chart_module_default.plot,
+				role: "group",
+				"aria-label": label,
+				"aria-describedby": hasFootnote ? `${hintId} ${footnoteId}` : hintId,
+				tabIndex: 0,
+				onKeyDown,
+				onPointerMove: onPointer,
+				onPointerDown: onPointer,
+				onPointerLeave: (e) => e.pointerType !== "touch" && activeSource === "pointer" && inspect(null, null),
+				onBlur: () => inspect(null, null),
+				children: layout && /* @__PURE__ */ jsxs("svg", {
+					className: Chart_module_default.svg,
+					width: size.width,
+					height: size.height,
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [
+						/* @__PURE__ */ jsx("g", {
+							className: Chart_module_default.markers,
+							children: markerGeometry.map((m) => m.kind === "band" && /* @__PURE__ */ jsx("rect", {
+								className: Chart_module_default.markerBand,
+								"data-tone": m.tone,
+								x: m.x,
+								y: layout.plot.y,
+								width: m.width,
+								height: layout.plot.height
+							}, m.key))
+						}),
+						/* @__PURE__ */ jsx("g", {
+							className: Chart_module_default.grid,
+							children: layout.yTicks.map((tick) => /* @__PURE__ */ jsx("line", {
+								x1: layout.plot.x,
+								x2: layout.plot.x + layout.plot.width,
+								y1: tick.y,
+								y2: tick.y
+							}, tick.value))
+						}),
+						/* @__PURE__ */ jsxs("g", {
+							className: Chart_module_default.axis,
+							children: [layout.yTicks.map((tick) => /* @__PURE__ */ jsx("text", {
+								x: layout.plot.x - 8,
+								y: tick.y,
+								dy: "0.32em",
+								textAnchor: "end",
+								children: tick.label
+							}, tick.value)), layout.xLabels.map((x) => /* @__PURE__ */ jsx("text", {
+								x: x.x,
+								y: size.height - 4,
+								textAnchor: "middle",
+								children: x.label
+							}, x.index))]
+						}),
+						current !== null && (type === "bar" || type === "stacked-bar" ? /* @__PURE__ */ jsx("rect", {
+							className: Chart_module_default.band,
+							x: layout.categoryX[current] - layout.step / 2,
+							y: layout.plot.y,
+							width: layout.step,
+							height: layout.plot.height
+						}) : /* @__PURE__ */ jsx("line", {
+							className: Chart_module_default.crosshair,
+							x1: layout.categoryX[current],
+							x2: layout.categoryX[current],
+							y1: layout.plot.y,
+							y2: layout.plot.y + layout.plot.height
+						})),
+						/* @__PURE__ */ jsx("g", {
+							className: Chart_module_default.markers,
+							children: markerGeometry.map((m) => m.kind === "line" && /* @__PURE__ */ jsx("line", {
+								className: Chart_module_default.markerLine,
+								"data-tone": m.tone,
+								x1: m.x,
+								x2: m.x,
+								y1: layout.plot.y,
+								y2: layout.plot.y + layout.plot.height
+							}, m.key))
+						}),
+						layout.marks.map((m) => /* @__PURE__ */ jsxs("g", {
+							className: Chart_module_default.series,
+							style: seriesStyle(m.slot),
+							"data-series": m.key,
+							"data-comparison": m.comparison || void 0,
+							"data-overflow": m.overflow || void 0,
+							"data-dimmed": dimmed(m.key),
+							children: [
+								m.area && /* @__PURE__ */ jsx("path", {
+									className: Chart_module_default.area,
+									d: m.area
+								}),
+								m.line && /* @__PURE__ */ jsx("path", {
+									className: Chart_module_default.line,
+									d: m.line
+								}),
+								m.bars?.map((d, i) => d && /* @__PURE__ */ jsx("path", {
+									className: Chart_module_default.bar,
+									d
+								}, i)),
+								m.dots.map((p, i) => /* @__PURE__ */ jsx("circle", {
+									className: Chart_module_default.dot,
+									cx: p.x,
+									cy: p.y,
+									r: 3
+								}, i))
+							]
+						}, m.key)),
+						current !== null && layout.marks.map((m) => m.kind !== "bars" && m.points[current] && /* @__PURE__ */ jsx("g", {
+							className: Chart_module_default.series,
+							style: seriesStyle(m.slot),
+							"data-dimmed": dimmed(m.key),
+							children: /* @__PURE__ */ jsx("path", {
+								className: Chart_module_default.marker,
+								d: markerPath(markerShape(m.slot), m.points[current].x, m.points[current].y, 4)
+							})
+						}, m.key)),
+						!compact && /* @__PURE__ */ jsx("g", {
+							className: Chart_module_default.markerLabels,
+							children: markerGeometry.map((m) => m.label && /* @__PURE__ */ jsx("text", {
+								x: m.label.x,
+								y: layout.plot.y + 12,
+								textAnchor: m.label.anchor,
+								children: m.label.text
+							}, m.key))
+						})
+					]
+				})
+			}),
+			footnoteEl,
+			/* @__PURE__ */ jsx(ChartTooltip, {
+				anchor: plotEl,
+				point,
+				title: current === null ? "" : categories[current],
+				rows,
+				notes
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: liveText }),
+			/* @__PURE__ */ jsx(ChartTable, {
+				caption: label,
+				categoryHeader: t("chart.category"),
+				noData: t("chart.noData"),
+				categories,
+				columns,
+				formatValue,
+				markersHeader: t("chart.markers"),
+				markers: resolvedMarkers.markers
+			})
+		]
+	});
+});
+export { Chart };

package/dist/components/Chart/Chart.module.js

@@ -0,0 +1,63 @@
+import "./Chart.css";
+// src/components/Chart/Chart.module.scss
+var root = "Chart__root__fNxVa";
+var footnote = "Chart__footnote__yPxRh";
+var plot = "Chart__plot__pF_Gz";
+var svg = "Chart__svg__J_H6K";
+var grid = "Chart__grid__HhnLQ";
+var axis = "Chart__axis__VgTAi";
+var band = "Chart__band__zCQF5";
+var markers = "Chart__markers__udWJ5";
+var markerBand = "Chart__markerBand__hkSrH";
+var markerLine = "Chart__markerLine__Jq765";
+var markerLabels = "Chart__markerLabels__2rN1x";
+var crosshair = "Chart__crosshair__BM-0V";
+var series = "Chart__series__z0T5c";
+var line = "Chart__line__cna4S";
+var area = "Chart__area__z40RQ";
+var bar = "Chart__bar__DxGWQ";
+var dot = "Chart__dot__AiKWN";
+var marker = "Chart__marker__UKc4a";
+var legend = "Chart__legend__I00Hy";
+var legendEntry = "Chart__legendEntry__t2DSp";
+var legendItem = "Chart__legendItem__BVcJX";
+var swatch = "Chart__swatch__tb9Kl";
+var legendMore = "Chart__legendMore__vQG6h";
+var tooltip = "Chart__tooltip__9qz3j";
+var tooltipTitle = "Chart__tooltipTitle__FFnFP";
+var tooltipRow = "Chart__tooltipRow__xzTtZ";
+var tooltipLabel = "Chart__tooltipLabel__53j5n";
+var tooltipNote = "Chart__tooltipNote__InW4e";
+var tooltipValue = "Chart__tooltipValue___hzAK";
+var Chart_module_default = {
+	root,
+	footnote,
+	plot,
+	svg,
+	grid,
+	axis,
+	band,
+	markers,
+	markerBand,
+	markerLine,
+	markerLabels,
+	crosshair,
+	series,
+	line,
+	area,
+	bar,
+	dot,
+	marker,
+	legend,
+	legendEntry,
+	legendItem,
+	swatch,
+	legendMore,
+	tooltip,
+	tooltipTitle,
+	tooltipRow,
+	tooltipLabel,
+	tooltipNote,
+	tooltipValue
+};
+export { area, axis, band, bar, crosshair, Chart_module_default as default, dot, footnote, grid, legend, legendEntry, legendItem, legendMore, line, marker, markerBand, markerLabels, markerLine, markers, plot, root, series, svg, swatch, tooltip, tooltipLabel, tooltipNote, tooltipRow, tooltipTitle, tooltipValue };

package/dist/components/Chart/ChartLegend.d.ts

@@ -0,0 +1,21 @@
+export interface ChartLegendItem {
+    key: string;
+    label: string;
+    slot: number;
+    comparison: boolean;
+    overflow: boolean;
+    /** Last visible primary series: can't be hidden. */
+    locked: boolean;
+    parentLabel?: string;
+    parentHidden: boolean;
+}
+/** Internal: legend toggles. Label text stays in text ink; the swatch carries identity. */
+export declare function ChartLegend({ items, hidden, fitWidth, onToggle, onHoverKey, onFocusKey, }: {
+    items: ChartLegendItem[];
+    hidden: readonly string[];
+    /** Compact mode: the row width the legend must fit on one line. Omit to show every item. */
+    fitWidth?: number;
+    onToggle: (key: string) => void;
+    onHoverKey: (key: string | null) => void;
+    onFocusKey: (key: string | null) => void;
+}): import("react").JSX.Element;

package/dist/components/Chart/ChartLegend.js

@@ -0,0 +1,64 @@
+'use client';
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { fitLegend } from "./chartModel.js";
+import Chart_module_default from "./Chart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Chart/ChartLegend.tsx
+var swatchStyle = (slot) => ({ "--chart-series-color": slot === 0 ? "var(--chart-total-comparison)" : `var(--chart-series-${slot})` });
+/** Internal: legend toggles. Label text stays in text ink; the swatch carries identity. */
+function ChartLegend({ items, hidden, fitWidth, onToggle, onHoverKey, onFocusKey }) {
+	const forced = (i) => hidden.includes(i.key);
+	const optional = items.filter((i) => !forced(i));
+	const pick = (k) => {
+		let room = k;
+		return items.filter((i) => forced(i) || room-- > 0);
+	};
+	let k = optional.length;
+	if (fitWidth !== void 0) {
+		for (; k > 0; k--) {
+			const labels = pick(k).map((i) => i.label);
+			if (k < optional.length) labels.push("+99");
+			if (fitLegend(labels, fitWidth) >= labels.length) break;
+		}
+		if (k === 0 && !items.some(forced)) k = Math.min(1, optional.length);
+	}
+	const shown = pick(k);
+	const more = items.length - shown.length;
+	return /* @__PURE__ */ jsxs("ul", {
+		className: Chart_module_default.legend,
+		children: [shown.map((item) => {
+			const on = !hidden.includes(item.key) && !item.parentHidden;
+			return /* @__PURE__ */ jsx("li", {
+				className: Chart_module_default.legendEntry,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: Chart_module_default.legendItem,
+					"aria-pressed": on,
+					"aria-disabled": item.locked || void 0,
+					disabled: item.parentHidden,
+					style: swatchStyle(item.slot),
+					onClick: () => onToggle(item.key),
+					onPointerEnter: (e) => e.pointerType !== "touch" && onHoverKey(item.key),
+					onPointerLeave: (e) => e.pointerType !== "touch" && onHoverKey(null),
+					onFocus: () => onFocusKey(item.key),
+					onBlur: () => onFocusKey(null),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: Chart_module_default.swatch,
+							"data-comparison": item.comparison || void 0,
+							"data-overflow": item.overflow || void 0,
+							"aria-hidden": "true"
+						}),
+						item.label,
+						item.parentLabel && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [", ", item.parentLabel] })
+					]
+				})
+			}, item.key);
+		}), more > 0 && /* @__PURE__ */ jsxs("li", {
+			className: Chart_module_default.legendMore,
+			"aria-hidden": "true",
+			children: ["+", more]
+		})]
+	});
+}
+export { ChartLegend };

package/dist/components/Chart/ChartTable.d.ts

@@ -0,0 +1,17 @@
+import { type ResolvedMarker } from './chartModel.js';
+export interface ChartTableColumn {
+    key: string;
+    header: string;
+    values: (number | null)[];
+}
+/** Internal: the screen-reader view of the chart. Always the same numbers as the plot. */
+export declare function ChartTable({ caption, categoryHeader, noData, categories, columns, formatValue, markersHeader, markers, }: {
+    caption: string;
+    categoryHeader: string;
+    noData: string;
+    categories: readonly string[];
+    columns: ChartTableColumn[];
+    formatValue: (n: number) => string;
+    markersHeader: string;
+    markers: readonly ResolvedMarker[];
+}): import("react").JSX.Element;

package/dist/components/Chart/ChartTable.js

@@ -0,0 +1,41 @@
+'use client';
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { markerLabelsAt } from "./chartModel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Chart/ChartTable.tsx
+/** Internal: the screen-reader view of the chart. Always the same numbers as the plot. */
+function ChartTable({ caption, categoryHeader, noData, categories, columns, formatValue, markersHeader, markers }) {
+	const hasNotes = markers.some((m) => m.label);
+	return /* @__PURE__ */ jsx(VisuallyHidden, {
+		as: "div",
+		children: /* @__PURE__ */ jsxs("table", { children: [
+			/* @__PURE__ */ jsx("caption", { children: caption }),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: categoryHeader
+				}),
+				columns.map((c) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: c.header
+				}, c.key)),
+				hasNotes && /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: markersHeader
+				})
+			] }) }),
+			/* @__PURE__ */ jsx("tbody", { children: categories.map((category, i) => /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					children: category
+				}),
+				columns.map((c) => {
+					const v = c.values[i];
+					return /* @__PURE__ */ jsx("td", { children: v === null ? noData : formatValue(v) }, c.key);
+				}),
+				hasNotes && /* @__PURE__ */ jsx("td", { children: markerLabelsAt(markers, i).join(", ") })
+			] }, i)) })
+		] })
+	});
+}
+export { ChartTable };

package/dist/components/Chart/ChartTooltip.d.ts

@@ -0,0 +1,26 @@
+export interface ChartTooltipRow {
+    key: string;
+    label: string;
+    slot: number;
+    comparison: boolean;
+    value: string;
+    /** CSS colour for the swatch; overrides `slot` (FunnelChart's ramp colours). */
+    color?: string;
+}
+/**
+ * Internal: values at the active category. Portalled because DashboardWidget clips its body.
+ * aria-hidden: screen readers get the same text from Chart's live line and the data table.
+ * `point` must be referentially stable between renders with the same x/y.
+ */
+export declare function ChartTooltip({ anchor, point, title, rows, notes, }: {
+    /** The plot element; `point` is relative to its top-left. */
+    anchor: HTMLElement | null;
+    point: {
+        x: number;
+        y: number;
+    } | null;
+    title: string;
+    rows: ChartTooltipRow[];
+    /** Labels of the markers covering this category. */
+    notes: string[];
+}): import("react").ReactPortal | null;