@flanksource/clicky-ui 0.3.54 → 0.3.56

package/dist/data/charts/BarChart.js

@@ -0,0 +1,194 @@
+import { CHART_INK, chartColor } from "./chart-palette.js";
+import { assertChartSize, assertFinite, clampLabelX, foldTail, formatChartValue, labelStep, px, textWidth, truncateLabel } from "./chart-scale.js";
+import { BarMark, ChartEmpty, ChartFrame } from "./chart-marks.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/data/charts/BarChart.tsx
+var ROW_HEIGHT = 22;
+var PAD = 4;
+var GAP = 6;
+var VERTICAL_HEIGHT = 160;
+/** A single-series bar chart: one bar per row, value labelled directly. */
+function BarChart({ data, width, height, orientation = "horizontal", format = formatChartValue, maxBars, className }) {
+	assertChartSize("BarChart", width, height);
+	data.forEach((datum) => {
+		assertFinite("BarChart", datum.label, datum.value);
+		if (datum.value < 0) throw new Error(`BarChart: negative value ${datum.value} for "${datum.label}"; bars start at 0`);
+	});
+	const rows = foldTail(data, maxBars).map((row) => "folded" in row ? {
+		label: row.label,
+		value: row.value,
+		fill: CHART_INK.other,
+		title: `Other (${row.folded} more): ${format(row.value)}`
+	} : {
+		label: row.label,
+		value: row.value,
+		fill: row.color ?? chartColor(0),
+		title: `${row.label}: ${format(row.value)}`
+	});
+	if (rows.length === 0) return /* @__PURE__ */ jsx(ChartEmpty, {
+		className,
+		height: height ?? (orientation === "vertical" ? VERTICAL_HEIGHT : 44),
+		width
+	});
+	const props = {
+		rows,
+		width,
+		format,
+		className
+	};
+	return orientation === "vertical" ? /* @__PURE__ */ jsx(VerticalBars, {
+		...props,
+		height: height ?? VERTICAL_HEIGHT
+	}) : /* @__PURE__ */ jsx(HorizontalBars, {
+		...props,
+		height: height ?? rows.length * ROW_HEIGHT + 8
+	});
+}
+function HorizontalBars({ rows, width, height, format, className }) {
+	const rowHeight = (height - 8) / rows.length;
+	const thickness = Math.min(14, rowHeight * .7);
+	const labelWidth = Math.min(width * .35, Math.max(...rows.map((row) => textWidth(row.label)))) + GAP;
+	const valueWidth = Math.max(...rows.map((row) => textWidth(format(row.value)))) + GAP;
+	const plot = width - labelWidth - valueWidth;
+	if (plot < 8) throw new Error(`BarChart: width ${width} leaves ${px(plot)}px for bars after labels and values`);
+	const max = Math.max(...rows.map((row) => row.value)) || 1;
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: `Bar chart of ${rows.length} rows`,
+		width,
+		children: [/* @__PURE__ */ jsx("line", {
+			stroke: CHART_INK.grid,
+			x1: px(labelWidth),
+			x2: px(labelWidth),
+			y1: PAD,
+			y2: px(height - PAD)
+		}), rows.map((row, index) => {
+			const top = PAD + index * rowHeight;
+			const middle = px(top + rowHeight / 2);
+			const length = row.value > 0 ? Math.max(2, row.value / max * plot) : 0;
+			return /* @__PURE__ */ jsxs("g", {
+				"data-label": row.label,
+				children: [
+					/* @__PURE__ */ jsx("title", { children: row.title }),
+					/* @__PURE__ */ jsx("rect", {
+						fill: "transparent",
+						height: px(rowHeight),
+						width,
+						x: 0,
+						y: px(top)
+					}),
+					/* @__PURE__ */ jsx("text", {
+						"data-role": "label",
+						dominantBaseline: "central",
+						fill: CHART_INK.axis,
+						textAnchor: "end",
+						x: px(labelWidth - GAP),
+						y: middle,
+						children: truncateLabel(row.label, labelWidth - GAP)
+					}),
+					/* @__PURE__ */ jsx(BarMark, {
+						base: labelWidth,
+						cross: middle - thickness / 2,
+						fill: row.fill,
+						length,
+						orientation: "horizontal",
+						rounded: true,
+						thickness
+					}),
+					/* @__PURE__ */ jsx("text", {
+						"data-role": "value",
+						dominantBaseline: "central",
+						fill: CHART_INK.text,
+						x: px(labelWidth + length + GAP),
+						y: middle,
+						children: format(row.value)
+					})
+				]
+			}, `${index}-${row.label}`);
+		})]
+	});
+}
+function VerticalBars({ rows, width, height, format, className }) {
+	const top = 16;
+	const baseline = height - 22;
+	const plot = baseline - top;
+	if (plot < 8) throw new Error(`BarChart: height ${height} leaves ${plot}px for bars after labels`);
+	const slot = width / rows.length;
+	const thickness = Math.max(1, Math.min(slot - 2, 64));
+	const step = labelStep(rows.map((row) => row.label), slot);
+	const max = Math.max(...rows.map((row) => row.value)) || 1;
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: `Bar chart of ${rows.length} bars`,
+		width,
+		children: [
+			[
+				.25,
+				.5,
+				.75
+			].map((fraction) => /* @__PURE__ */ jsx("line", {
+				stroke: CHART_INK.grid,
+				x1: 0,
+				x2: width,
+				y1: px(baseline - plot * fraction),
+				y2: px(baseline - plot * fraction)
+			}, fraction)),
+			/* @__PURE__ */ jsx("line", {
+				stroke: CHART_INK.grid,
+				x1: 0,
+				x2: width,
+				y1: baseline,
+				y2: baseline
+			}),
+			rows.map((row, index) => {
+				const center = px(index * slot + slot / 2);
+				const length = row.value > 0 ? Math.max(2, row.value / max * plot) : 0;
+				const value = format(row.value);
+				const label = truncateLabel(row.label, slot * step - GAP);
+				return /* @__PURE__ */ jsxs("g", {
+					"data-label": row.label,
+					children: [
+						/* @__PURE__ */ jsx("title", { children: row.title }),
+						/* @__PURE__ */ jsx("rect", {
+							fill: "transparent",
+							height,
+							width: px(slot),
+							x: px(index * slot),
+							y: 0
+						}),
+						/* @__PURE__ */ jsx(BarMark, {
+							base: baseline,
+							cross: center - thickness / 2,
+							fill: row.fill,
+							length,
+							orientation: "vertical",
+							rounded: true,
+							thickness
+						}),
+						textWidth(value) <= slot && /* @__PURE__ */ jsx("text", {
+							"data-role": "value",
+							fill: CHART_INK.text,
+							textAnchor: "middle",
+							x: center,
+							y: px(baseline - length - 4),
+							children: value
+						}),
+						index % step === 0 && /* @__PURE__ */ jsx("text", {
+							"data-role": "label",
+							fill: CHART_INK.axis,
+							textAnchor: "middle",
+							x: clampLabelX(center, label, width),
+							y: height - 6,
+							children: label
+						})
+					]
+				}, `${index}-${row.label}`);
+			})
+		]
+	});
+}
+export { BarChart };
+
+//# sourceMappingURL=BarChart.js.map

package/dist/data/charts/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../../src/data/charts/BarChart.tsx"],"sourcesContent":["import { BarMark, ChartEmpty, ChartFrame } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport {\n  assertChartSize,\n  assertFinite,\n  clampLabelX,\n  foldTail,\n  formatChartValue,\n  labelStep,\n  px,\n  textWidth,\n  truncateLabel,\n  X_AXIS_BAND,\n  X_LABEL_INSET,\n} from \"./chart-scale\";\n\nexport type BarChartDatum = { label: string; value: number; color?: string };\n\nexport type BarChartProps = {\n  data: BarChartDatum[];\n  width: number;\n  /** Horizontal charts derive it from the row count when omitted. */\n  height?: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  format?: (n: number) => string;\n  /** Show at most this many bars; the tail is summed into one \"Other\" bar. */\n  maxBars?: number;\n  className?: string;\n};\n\ntype Row = { label: string; value: number; fill: string; title: string };\n\nconst ROW_HEIGHT = 22;\nconst PAD = 4;\nconst GAP = 6;\nconst VERTICAL_HEIGHT = 160;\n\n/** A single-series bar chart: one bar per row, value labelled directly. */\nexport function BarChart({ data, width, height, orientation = \"horizontal\", format = formatChartValue, maxBars, className }: BarChartProps) {\n  assertChartSize(\"BarChart\", width, height);\n  data.forEach((datum) => {\n    assertFinite(\"BarChart\", datum.label, datum.value);\n    if (datum.value < 0) throw new Error(`BarChart: negative value ${datum.value} for \"${datum.label}\"; bars start at 0`);\n  });\n  const rows: Row[] = foldTail(data, maxBars).map((row) =>\n    \"folded\" in row\n      ? { label: row.label, value: row.value, fill: CHART_INK.other, title: `Other (${row.folded} more): ${format(row.value)}` }\n      : { label: row.label, value: row.value, fill: row.color ?? chartColor(0), title: `${row.label}: ${format(row.value)}` },\n  );\n  if (rows.length === 0) {\n    return <ChartEmpty className={className} height={height ?? (orientation === \"vertical\" ? VERTICAL_HEIGHT : ROW_HEIGHT * 2)} width={width} />;\n  }\n  const props = { rows, width, format, className };\n  return orientation === \"vertical\" ? (\n    <VerticalBars {...props} height={height ?? VERTICAL_HEIGHT} />\n  ) : (\n    <HorizontalBars {...props} height={height ?? rows.length * ROW_HEIGHT + PAD * 2} />\n  );\n}\n\ntype LayoutProps = { rows: Row[]; width: number; height: number; format: (n: number) => string; className: string | undefined };\n\nfunction HorizontalBars({ rows, width, height, format, className }: LayoutProps) {\n  const rowHeight = (height - PAD * 2) / rows.length;\n  const thickness = Math.min(14, rowHeight * 0.7);\n  const labelWidth = Math.min(width * 0.35, Math.max(...rows.map((row) => textWidth(row.label)))) + GAP;\n  const valueWidth = Math.max(...rows.map((row) => textWidth(format(row.value)))) + GAP;\n  const plot = width - labelWidth - valueWidth;\n  if (plot < 8) throw new Error(`BarChart: width ${width} leaves ${px(plot)}px for bars after labels and values`);\n  const max = Math.max(...rows.map((row) => row.value)) || 1;\n\n  return (\n    <ChartFrame className={className} height={height} label={`Bar chart of ${rows.length} rows`} width={width}>\n      <line stroke={CHART_INK.grid} x1={px(labelWidth)} x2={px(labelWidth)} y1={PAD} y2={px(height - PAD)} />\n      {rows.map((row, index) => {\n        const top = PAD + index * rowHeight;\n        const middle = px(top + rowHeight / 2);\n        const length = row.value > 0 ? Math.max(2, (row.value / max) * plot) : 0;\n        return (\n          <g data-label={row.label} key={`${index}-${row.label}`}>\n            <title>{row.title}</title>\n            <rect fill=\"transparent\" height={px(rowHeight)} width={width} x={0} y={px(top)} />\n            <text data-role=\"label\" dominantBaseline=\"central\" fill={CHART_INK.axis} textAnchor=\"end\" x={px(labelWidth - GAP)} y={middle}>\n              {truncateLabel(row.label, labelWidth - GAP)}\n            </text>\n            <BarMark base={labelWidth} cross={middle - thickness / 2} fill={row.fill} length={length} orientation=\"horizontal\" rounded thickness={thickness} />\n            <text data-role=\"value\" dominantBaseline=\"central\" fill={CHART_INK.text} x={px(labelWidth + length + GAP)} y={middle}>\n              {format(row.value)}\n            </text>\n          </g>\n        );\n      })}\n    </ChartFrame>\n  );\n}\n\nfunction VerticalBars({ rows, width, height, format, className }: LayoutProps) {\n  const top = 16;\n  const baseline = height - X_AXIS_BAND;\n  const plot = baseline - top;\n  if (plot < 8) throw new Error(`BarChart: height ${height} leaves ${plot}px for bars after labels`);\n  const slot = width / rows.length;\n  const thickness = Math.max(1, Math.min(slot - 2, 64));\n  const step = labelStep(rows.map((row) => row.label), slot);\n  const max = Math.max(...rows.map((row) => row.value)) || 1;\n\n  return (\n    <ChartFrame className={className} height={height} label={`Bar chart of ${rows.length} bars`} width={width}>\n      {[0.25, 0.5, 0.75].map((fraction) => (\n        <line key={fraction} stroke={CHART_INK.grid} x1={0} x2={width} y1={px(baseline - plot * fraction)} y2={px(baseline - plot * fraction)} />\n      ))}\n      <line stroke={CHART_INK.grid} x1={0} x2={width} y1={baseline} y2={baseline} />\n      {rows.map((row, index) => {\n        const center = px(index * slot + slot / 2);\n        const length = row.value > 0 ? Math.max(2, (row.value / max) * plot) : 0;\n        const value = format(row.value);\n        const label = truncateLabel(row.label, slot * step - GAP);\n        return (\n          <g data-label={row.label} key={`${index}-${row.label}`}>\n            <title>{row.title}</title>\n            <rect fill=\"transparent\" height={height} width={px(slot)} x={px(index * slot)} y={0} />\n            <BarMark base={baseline} cross={center - thickness / 2} fill={row.fill} length={length} orientation=\"vertical\" rounded thickness={thickness} />\n            {textWidth(value) <= slot && (\n              <text data-role=\"value\" fill={CHART_INK.text} textAnchor=\"middle\" x={center} y={px(baseline - length - 4)}>\n                {value}\n              </text>\n            )}\n            {index % step === 0 && (\n              <text data-role=\"label\" fill={CHART_INK.axis} textAnchor=\"middle\" x={clampLabelX(center, label, width)} y={height - X_LABEL_INSET}>\n                {label}\n              </text>\n            )}\n          </g>\n        );\n      })}\n    </ChartFrame>\n  );\n}\n"],"mappings":"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"}

package/dist/data/charts/ChartLegend.cjs

@@ -0,0 +1,54 @@
+const require_chart_palette = require("./chart-palette.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/charts/ChartLegend.tsx
+var LIST_STYLE = {
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "4px 16px",
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	fontSize: 12,
+	lineHeight: 1.4,
+	color: require_chart_palette.CHART_INK.axis
+};
+var ITEM_STYLE = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6
+};
+var SWATCH_STYLE = {
+	width: 10,
+	height: 10,
+	borderRadius: 2,
+	flexShrink: 0
+};
+/**
+* The series key. The swatch carries the colour; the label stays in text ink,
+* because a legend written in its own hue is the most common way a chart fails
+* contrast.
+*/
+function ChartLegend({ items, className, style }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className,
+		style: style ? {
+			...LIST_STYLE,
+			...style
+		} : LIST_STYLE,
+		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+			style: ITEM_STYLE,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				style: {
+					...SWATCH_STYLE,
+					backgroundColor: item.color
+				}
+			}), item.label]
+		}, `${index}-${item.label}`))
+	});
+}
+exports.ChartLegend = ChartLegend;
+
+//# sourceMappingURL=ChartLegend.cjs.map

package/dist/data/charts/ChartLegend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.cjs","names":["CHART_INK"],"sources":["../../../src/data/charts/ChartLegend.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { CHART_FONT_SIZE, CHART_INK } from \"./chart-palette\";\n\nexport type ChartLegendItem = { label: string; color: string };\n\nexport type ChartLegendProps = {\n  items: ChartLegendItem[];\n  className?: string;\n  style?: CSSProperties;\n};\n\n// Inline styles rather than Tailwind classes: a static report may render\n// without clicky-ui's stylesheet, and the legend must still lay out.\nconst LIST_STYLE: CSSProperties = {\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  gap: \"4px 16px\",\n  margin: 0,\n  padding: 0,\n  listStyle: \"none\",\n  fontSize: CHART_FONT_SIZE + 1,\n  lineHeight: 1.4,\n  color: CHART_INK.axis,\n};\nconst ITEM_STYLE: CSSProperties = { display: \"flex\", alignItems: \"center\", gap: 6 };\nconst SWATCH_STYLE: CSSProperties = { width: 10, height: 10, borderRadius: 2, flexShrink: 0 };\n\n/**\n * The series key. The swatch carries the colour; the label stays in text ink,\n * because a legend written in its own hue is the most common way a chart fails\n * contrast.\n */\nexport function ChartLegend({ items, className, style }: ChartLegendProps) {\n  if (items.length === 0) return null;\n  return (\n    <ul className={className} style={style ? { ...LIST_STYLE, ...style } : LIST_STYLE}>\n      {items.map((item, index) => (\n        <li key={`${index}-${item.label}`} style={ITEM_STYLE}>\n          <span aria-hidden style={{ ...SWATCH_STYLE, backgroundColor: item.color }} />\n          {item.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;AAaA,IAAM,aAA4B;CAChC,SAAS;CACT,UAAU;CACV,YAAY;CACZ,KAAK;CACL,QAAQ;CACR,SAAS;CACT,WAAW;CACX,UAAA;CACA,YAAY;CACZ,OAAOA,sBAAAA,UAAU;AACnB;AACA,IAAM,aAA4B;CAAE,SAAS;CAAQ,YAAY;CAAU,KAAK;AAAE;AAClF,IAAM,eAA8B;CAAE,OAAO;CAAI,QAAQ;CAAI,cAAc;CAAG,YAAY;AAAE;;;;;;AAO5F,SAAgB,YAAY,EAAE,OAAO,WAAW,SAA2B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAe;EAAW,OAAO,QAAQ;GAAE,GAAG;GAAY,GAAG;EAAM,IAAI;EACpE,UAAA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAmC,OAAO;GAA1C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,eAAA;IAAY,OAAO;KAAE,GAAG;KAAc,iBAAiB,KAAK;IAAM;GAAI,CAAA,GAC3E,KAAK,KACJ;EAHK,GAAA,GAAG,MAAM,GAAG,KAAK,OAGtB,CACL;CACC,CAAA;AAER"}

package/dist/data/charts/ChartLegend.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export type ChartLegendItem = {
+    label: string;
+    color: string;
+};
+export type ChartLegendProps = {
+    items: ChartLegendItem[];
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * The series key. The swatch carries the colour; the label stays in text ink,
+ * because a legend written in its own hue is the most common way a chart fails
+ * contrast.
+ */
+export declare function ChartLegend({ items, className, style }: ChartLegendProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/data/charts/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/data/charts/ChartLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAmBF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,sCAYxE"}

package/dist/data/charts/ChartLegend.js

@@ -0,0 +1,54 @@
+import { CHART_INK } from "./chart-palette.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/data/charts/ChartLegend.tsx
+var LIST_STYLE = {
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "4px 16px",
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	fontSize: 12,
+	lineHeight: 1.4,
+	color: CHART_INK.axis
+};
+var ITEM_STYLE = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6
+};
+var SWATCH_STYLE = {
+	width: 10,
+	height: 10,
+	borderRadius: 2,
+	flexShrink: 0
+};
+/**
+* The series key. The swatch carries the colour; the label stays in text ink,
+* because a legend written in its own hue is the most common way a chart fails
+* contrast.
+*/
+function ChartLegend({ items, className, style }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className,
+		style: style ? {
+			...LIST_STYLE,
+			...style
+		} : LIST_STYLE,
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+			style: ITEM_STYLE,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				style: {
+					...SWATCH_STYLE,
+					backgroundColor: item.color
+				}
+			}), item.label]
+		}, `${index}-${item.label}`))
+	});
+}
+export { ChartLegend };
+
+//# sourceMappingURL=ChartLegend.js.map

package/dist/data/charts/ChartLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.js","names":[],"sources":["../../../src/data/charts/ChartLegend.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { CHART_FONT_SIZE, CHART_INK } from \"./chart-palette\";\n\nexport type ChartLegendItem = { label: string; color: string };\n\nexport type ChartLegendProps = {\n  items: ChartLegendItem[];\n  className?: string;\n  style?: CSSProperties;\n};\n\n// Inline styles rather than Tailwind classes: a static report may render\n// without clicky-ui's stylesheet, and the legend must still lay out.\nconst LIST_STYLE: CSSProperties = {\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  gap: \"4px 16px\",\n  margin: 0,\n  padding: 0,\n  listStyle: \"none\",\n  fontSize: CHART_FONT_SIZE + 1,\n  lineHeight: 1.4,\n  color: CHART_INK.axis,\n};\nconst ITEM_STYLE: CSSProperties = { display: \"flex\", alignItems: \"center\", gap: 6 };\nconst SWATCH_STYLE: CSSProperties = { width: 10, height: 10, borderRadius: 2, flexShrink: 0 };\n\n/**\n * The series key. The swatch carries the colour; the label stays in text ink,\n * because a legend written in its own hue is the most common way a chart fails\n * contrast.\n */\nexport function ChartLegend({ items, className, style }: ChartLegendProps) {\n  if (items.length === 0) return null;\n  return (\n    <ul className={className} style={style ? { ...LIST_STYLE, ...style } : LIST_STYLE}>\n      {items.map((item, index) => (\n        <li key={`${index}-${item.label}`} style={ITEM_STYLE}>\n          <span aria-hidden style={{ ...SWATCH_STYLE, backgroundColor: item.color }} />\n          {item.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;AAaA,IAAM,aAA4B;CAChC,SAAS;CACT,UAAU;CACV,YAAY;CACZ,KAAK;CACL,QAAQ;CACR,SAAS;CACT,WAAW;CACX,UAAA;CACA,YAAY;CACZ,OAAO,UAAU;AACnB;AACA,IAAM,aAA4B;CAAE,SAAS;CAAQ,YAAY;CAAU,KAAK;AAAE;AAClF,IAAM,eAA8B;CAAE,OAAO;CAAI,QAAQ;CAAI,cAAc;CAAG,YAAY;AAAE;;;;;;AAO5F,SAAgB,YAAY,EAAE,OAAO,WAAW,SAA2B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,OACE,oBAAC,MAAD;EAAe;EAAW,OAAO,QAAQ;GAAE,GAAG;GAAY,GAAG;EAAM,IAAI;EACpE,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,MAAD;GAAmC,OAAO;GAA1C,UAAA,CACE,oBAAC,QAAD;IAAM,eAAA;IAAY,OAAO;KAAE,GAAG;KAAc,iBAAiB,KAAK;IAAM;GAAI,CAAA,GAC3E,KAAK,KACJ;EAHK,GAAA,GAAG,MAAM,GAAG,KAAK,OAGtB,CACL;CACC,CAAA;AAER"}

package/dist/data/charts/Sparkline.cjs

@@ -0,0 +1,56 @@
+const require_chart_palette = require("./chart-palette.cjs");
+const require_chart_scale = require("./chart-scale.cjs");
+const require_chart_marks = require("./chart-marks.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/charts/Sparkline.tsx
+/**
+* A trend line with no axes: "which way, and how bumpy", nothing else. One
+* marker on the latest point, ringed in the surface colour so it stays legible
+* where it lands on the line. The range is in the SVG title for hover.
+*/
+function Sparkline({ values, width, height, color = require_chart_palette.chartColor(0), className }) {
+	require_chart_scale.assertChartSize("Sparkline", width, height);
+	values.forEach((value, index) => require_chart_scale.assertFinite("Sparkline", `#${index}`, value));
+	if (values.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart_marks.ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const radius = Math.min(4, Math.max(1.5, height / 8));
+	const pad = radius + 1;
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const at = (index) => {
+		const x = values.length === 1 ? width / 2 : pad + index / (values.length - 1) * (width - pad * 2);
+		const y = max === min ? height / 2 : height - pad - (values[index] - min) / (max - min) * (height - pad * 2);
+		return [require_chart_scale.px(x), require_chart_scale.px(y)];
+	};
+	const points = values.map((_, index) => at(index));
+	const [lastX, lastY] = points[points.length - 1];
+	const summary = `${require_chart_scale.formatChartValue(values[0])} → ${require_chart_scale.formatChartValue(values[values.length - 1])} (min ${require_chart_scale.formatChartValue(min)}, max ${require_chart_scale.formatChartValue(max)})`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_chart_marks.ChartFrame, {
+		className,
+		height,
+		label: summary,
+		title: summary,
+		width,
+		children: [points.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
+			fill: "none",
+			points: points.map((point) => point.join(",")).join(" "),
+			stroke: color,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 2
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: lastX,
+			cy: lastY,
+			fill: color,
+			r: require_chart_scale.px(radius),
+			stroke: require_chart_palette.CHART_INK.surface,
+			strokeWidth: 2
+		})]
+	});
+}
+exports.Sparkline = Sparkline;
+
+//# sourceMappingURL=Sparkline.cjs.map

package/dist/data/charts/Sparkline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.cjs","names":["chartColor","assertFinite","ChartEmpty","px","formatChartValue","ChartFrame","CHART_INK"],"sources":["../../../src/data/charts/Sparkline.tsx"],"sourcesContent":["import { ChartEmpty, ChartFrame } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport { assertChartSize, assertFinite, formatChartValue, px } from \"./chart-scale\";\n\nexport type SparklineProps = {\n  values: number[];\n  width: number;\n  height: number;\n  /** Any CSS colour; defaults to the first categorical slot. */\n  color?: string;\n  className?: string;\n};\n\n/**\n * A trend line with no axes: \"which way, and how bumpy\", nothing else. One\n * marker on the latest point, ringed in the surface colour so it stays legible\n * where it lands on the line. The range is in the SVG title for hover.\n */\nexport function Sparkline({ values, width, height, color = chartColor(0), className }: SparklineProps) {\n  assertChartSize(\"Sparkline\", width, height);\n  values.forEach((value, index) => assertFinite(\"Sparkline\", `#${index}`, value));\n  if (values.length === 0) return <ChartEmpty className={className} height={height} width={width} />;\n\n  const radius = Math.min(4, Math.max(1.5, height / 8));\n  const pad = radius + 1;\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n  const at = (index: number): [number, number] => {\n    const x = values.length === 1 ? width / 2 : pad + (index / (values.length - 1)) * (width - pad * 2);\n    const y = max === min ? height / 2 : height - pad - ((values[index]! - min) / (max - min)) * (height - pad * 2);\n    return [px(x), px(y)];\n  };\n  const points = values.map((_, index) => at(index));\n  const [lastX, lastY] = points[points.length - 1]!;\n  const summary = `${formatChartValue(values[0]!)} → ${formatChartValue(values[values.length - 1]!)} (min ${formatChartValue(min)}, max ${formatChartValue(max)})`;\n\n  return (\n    <ChartFrame className={className} height={height} label={summary} title={summary} width={width}>\n      {points.length > 1 && (\n        <polyline\n          fill=\"none\"\n          points={points.map((point) => point.join(\",\")).join(\" \")}\n          stroke={color}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n        />\n      )}\n      <circle cx={lastX} cy={lastY} fill={color} r={px(radius)} stroke={CHART_INK.surface} strokeWidth={2} />\n    </ChartFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,UAAU,EAAE,QAAQ,OAAO,QAAQ,QAAQA,sBAAAA,WAAW,CAAC,GAAG,aAA6B;CACrG,oBAAA,gBAAgB,aAAa,OAAO,MAAM;CAC1C,OAAO,SAAS,OAAO,UAAUC,oBAAAA,aAAa,aAAa,IAAI,SAAS,KAAK,CAAC;CAC9E,IAAI,OAAO,WAAW,GAAG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EAAuB;EAAmB;EAAe;CAAQ,CAAA;CAEjG,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC;CACpD,MAAM,MAAM,SAAS;CACrB,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,UAAoC;EAC9C,MAAM,IAAI,OAAO,WAAW,IAAI,QAAQ,IAAI,MAAO,SAAS,OAAO,SAAS,MAAO,QAAQ,MAAM;EACjG,MAAM,IAAI,QAAQ,MAAM,SAAS,IAAI,SAAS,OAAQ,OAAO,SAAU,QAAQ,MAAM,QAAS,SAAS,MAAM;EAC7G,OAAO,CAACC,oBAAAA,GAAG,CAAC,GAAGA,oBAAAA,GAAG,CAAC,CAAC;CACtB;CACA,MAAM,SAAS,OAAO,KAAK,GAAG,UAAU,GAAG,KAAK,CAAC;CACjD,MAAM,CAAC,OAAO,SAAS,OAAO,OAAO,SAAS;CAC9C,MAAM,UAAU,GAAGC,oBAAAA,iBAAiB,OAAO,EAAG,EAAE,KAAKA,oBAAAA,iBAAiB,OAAO,OAAO,SAAS,EAAG,EAAE,QAAQA,oBAAAA,iBAAiB,GAAG,EAAE,QAAQA,oBAAAA,iBAAiB,GAAG,EAAE;CAE9J,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAD;EAAuB;EAAmB;EAAQ,OAAO;EAAS,OAAO;EAAgB;EAAzF,UAAA,CACG,OAAO,SAAS,KACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACE,MAAK;GACL,QAAQ,OAAO,KAAK,UAAU,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG;GACvD,QAAQ;GACR,eAAc;GACd,gBAAe;GACf,aAAa;EACd,CAAA,GAEH,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAQ,IAAI;GAAO,IAAI;GAAO,MAAM;GAAO,GAAGF,oBAAAA,GAAG,MAAM;GAAG,QAAQG,sBAAAA,UAAU;GAAS,aAAa;EAAI,CAAA,CAC5F;;AAEhB"}

package/dist/data/charts/Sparkline.d.ts

@@ -0,0 +1,15 @@
+export type SparklineProps = {
+    values: number[];
+    width: number;
+    height: number;
+    /** Any CSS colour; defaults to the first categorical slot. */
+    color?: string;
+    className?: string;
+};
+/**
+ * A trend line with no axes: "which way, and how bumpy", nothing else. One
+ * marker on the latest point, ringed in the surface colour so it stays legible
+ * where it lands on the line. The range is in the SVG title for hover.
+ */
+export declare function Sparkline({ values, width, height, color, className }: SparklineProps): import("react").JSX.Element;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/data/charts/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/data/charts/Sparkline.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAqB,EAAE,SAAS,EAAE,EAAE,cAAc,+BAiCpG"}

package/dist/data/charts/Sparkline.js

@@ -0,0 +1,56 @@
+import { CHART_INK, chartColor } from "./chart-palette.js";
+import { assertChartSize, assertFinite, formatChartValue, px } from "./chart-scale.js";
+import { ChartEmpty, ChartFrame } from "./chart-marks.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/data/charts/Sparkline.tsx
+/**
+* A trend line with no axes: "which way, and how bumpy", nothing else. One
+* marker on the latest point, ringed in the surface colour so it stays legible
+* where it lands on the line. The range is in the SVG title for hover.
+*/
+function Sparkline({ values, width, height, color = chartColor(0), className }) {
+	assertChartSize("Sparkline", width, height);
+	values.forEach((value, index) => assertFinite("Sparkline", `#${index}`, value));
+	if (values.length === 0) return /* @__PURE__ */ jsx(ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const radius = Math.min(4, Math.max(1.5, height / 8));
+	const pad = radius + 1;
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const at = (index) => {
+		const x = values.length === 1 ? width / 2 : pad + index / (values.length - 1) * (width - pad * 2);
+		const y = max === min ? height / 2 : height - pad - (values[index] - min) / (max - min) * (height - pad * 2);
+		return [px(x), px(y)];
+	};
+	const points = values.map((_, index) => at(index));
+	const [lastX, lastY] = points[points.length - 1];
+	const summary = `${formatChartValue(values[0])} → ${formatChartValue(values[values.length - 1])} (min ${formatChartValue(min)}, max ${formatChartValue(max)})`;
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: summary,
+		title: summary,
+		width,
+		children: [points.length > 1 && /* @__PURE__ */ jsx("polyline", {
+			fill: "none",
+			points: points.map((point) => point.join(",")).join(" "),
+			stroke: color,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: lastX,
+			cy: lastY,
+			fill: color,
+			r: px(radius),
+			stroke: CHART_INK.surface,
+			strokeWidth: 2
+		})]
+	});
+}
+export { Sparkline };
+
+//# sourceMappingURL=Sparkline.js.map

package/dist/data/charts/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","names":[],"sources":["../../../src/data/charts/Sparkline.tsx"],"sourcesContent":["import { ChartEmpty, ChartFrame } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport { assertChartSize, assertFinite, formatChartValue, px } from \"./chart-scale\";\n\nexport type SparklineProps = {\n  values: number[];\n  width: number;\n  height: number;\n  /** Any CSS colour; defaults to the first categorical slot. */\n  color?: string;\n  className?: string;\n};\n\n/**\n * A trend line with no axes: \"which way, and how bumpy\", nothing else. One\n * marker on the latest point, ringed in the surface colour so it stays legible\n * where it lands on the line. The range is in the SVG title for hover.\n */\nexport function Sparkline({ values, width, height, color = chartColor(0), className }: SparklineProps) {\n  assertChartSize(\"Sparkline\", width, height);\n  values.forEach((value, index) => assertFinite(\"Sparkline\", `#${index}`, value));\n  if (values.length === 0) return <ChartEmpty className={className} height={height} width={width} />;\n\n  const radius = Math.min(4, Math.max(1.5, height / 8));\n  const pad = radius + 1;\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n  const at = (index: number): [number, number] => {\n    const x = values.length === 1 ? width / 2 : pad + (index / (values.length - 1)) * (width - pad * 2);\n    const y = max === min ? height / 2 : height - pad - ((values[index]! - min) / (max - min)) * (height - pad * 2);\n    return [px(x), px(y)];\n  };\n  const points = values.map((_, index) => at(index));\n  const [lastX, lastY] = points[points.length - 1]!;\n  const summary = `${formatChartValue(values[0]!)} → ${formatChartValue(values[values.length - 1]!)} (min ${formatChartValue(min)}, max ${formatChartValue(max)})`;\n\n  return (\n    <ChartFrame className={className} height={height} label={summary} title={summary} width={width}>\n      {points.length > 1 && (\n        <polyline\n          fill=\"none\"\n          points={points.map((point) => point.join(\",\")).join(\" \")}\n          stroke={color}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n        />\n      )}\n      <circle cx={lastX} cy={lastY} fill={color} r={px(radius)} stroke={CHART_INK.surface} strokeWidth={2} />\n    </ChartFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,UAAU,EAAE,QAAQ,OAAO,QAAQ,QAAQ,WAAW,CAAC,GAAG,aAA6B;CACrG,gBAAgB,aAAa,OAAO,MAAM;CAC1C,OAAO,SAAS,OAAO,UAAU,aAAa,aAAa,IAAI,SAAS,KAAK,CAAC;CAC9E,IAAI,OAAO,WAAW,GAAG,OAAO,oBAAC,YAAD;EAAuB;EAAmB;EAAe;CAAQ,CAAA;CAEjG,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC;CACpD,MAAM,MAAM,SAAS;CACrB,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,UAAoC;EAC9C,MAAM,IAAI,OAAO,WAAW,IAAI,QAAQ,IAAI,MAAO,SAAS,OAAO,SAAS,MAAO,QAAQ,MAAM;EACjG,MAAM,IAAI,QAAQ,MAAM,SAAS,IAAI,SAAS,OAAQ,OAAO,SAAU,QAAQ,MAAM,QAAS,SAAS,MAAM;EAC7G,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;CACtB;CACA,MAAM,SAAS,OAAO,KAAK,GAAG,UAAU,GAAG,KAAK,CAAC;CACjD,MAAM,CAAC,OAAO,SAAS,OAAO,OAAO,SAAS;CAC9C,MAAM,UAAU,GAAG,iBAAiB,OAAO,EAAG,EAAE,KAAK,iBAAiB,OAAO,OAAO,SAAS,EAAG,EAAE,QAAQ,iBAAiB,GAAG,EAAE,QAAQ,iBAAiB,GAAG,EAAE;CAE9J,OACE,qBAAC,YAAD;EAAuB;EAAmB;EAAQ,OAAO;EAAS,OAAO;EAAgB;EAAzF,UAAA,CACG,OAAO,SAAS,KACf,oBAAC,YAAD;GACE,MAAK;GACL,QAAQ,OAAO,KAAK,UAAU,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG;GACvD,QAAQ;GACR,eAAc;GACd,gBAAe;GACf,aAAa;EACd,CAAA,GAEH,oBAAC,UAAD;GAAQ,IAAI;GAAO,IAAI;GAAO,MAAM;GAAO,GAAG,GAAG,MAAM;GAAG,QAAQ,UAAU;GAAS,aAAa;EAAI,CAAA,CAC5F;;AAEhB"}