@flanksource/clicky-ui 0.3.55 → 0.3.57

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"}

package/dist/data/charts/StackedBarChart.cjs

@@ -0,0 +1,241 @@
+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/StackedBarChart.tsx
+var GAP = 6;
+/** One stacked bar per category, a segment per series, totals in the titles. */
+function StackedBarChart({ categories, series, width, height, orientation = "vertical", legend, format = require_chart_scale.formatChartValue, className }) {
+	require_chart_scale.assertChartSize("StackedBarChart", width, height);
+	series.forEach((entry) => {
+		if (entry.values.length !== categories.length) throw new Error(`StackedBarChart: series "${entry.label}" has ${entry.values.length} values for ${categories.length} categories`);
+		entry.values.forEach((value, index) => {
+			require_chart_scale.assertFinite("StackedBarChart", `${entry.label}[${index}]`, value);
+			if (value < 0) throw new Error(`StackedBarChart: negative value ${value} in "${entry.label}"; stacks start at 0`);
+		});
+	});
+	if (categories.length === 0 || series.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart_marks.ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const colors = series.map((entry, index) => entry.color ?? require_chart_palette.chartColor(index));
+	const stacks = categories.map((category, index) => {
+		const segments = series.map((entry, j) => ({
+			label: entry.label,
+			value: entry.values[index],
+			fill: colors[j]
+		}));
+		return {
+			category,
+			total: segments.reduce((sum, segment) => sum + segment.value, 0),
+			segments
+		};
+	});
+	const Layout = orientation === "horizontal" ? HorizontalStacks : VerticalStacks;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart_marks.WithLegend, {
+		className,
+		items: series.map((entry, index) => ({
+			label: entry.label,
+			color: colors[index]
+		})),
+		show: legend ?? series.length > 1,
+		width,
+		children: (svgClassName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, {
+			className: svgClassName,
+			format,
+			height,
+			stacks,
+			width
+		})
+	});
+}
+/** The segments of one stack, from the base outward, with surface-coloured gaps between them. */
+function Segments({ stack, orientation, base, cross, thickness, scale, format }) {
+	const direction = orientation === "vertical" ? -1 : 1;
+	const outermost = stack.segments.findLastIndex((segment) => segment.value > 0);
+	const offsets = stack.segments.map((_, index) => stack.segments.slice(0, index).reduce((sum, segment) => sum + segment.value * scale, 0));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: stack.segments.map((segment, index) => {
+		if (segment.value <= 0) return null;
+		const start = base + direction * offsets[index];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentMark, {
+			boundary: start !== base,
+			cross,
+			fill: segment.fill,
+			label: segment.label,
+			length: segment.value * scale,
+			orientation,
+			rounded: index === outermost,
+			start,
+			thickness,
+			title: `${stack.category} · ${segment.label}: ${format(segment.value)}`
+		}, `${index}-${segment.label}`);
+	}) });
+}
+function SegmentMark({ label, title, orientation, start, cross, length, thickness, fill, rounded, boundary: hasBoundary }) {
+	const boundary = require_chart_scale.px(start);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		"data-series": label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart_marks.BarMark, {
+				base: start,
+				cross,
+				fill,
+				length,
+				orientation,
+				rounded,
+				thickness
+			}),
+			hasBoundary && (orientation === "vertical" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				stroke: require_chart_palette.CHART_INK.surface,
+				strokeWidth: 2,
+				x1: require_chart_scale.px(cross),
+				x2: require_chart_scale.px(cross + thickness),
+				y1: boundary,
+				y2: boundary
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				stroke: require_chart_palette.CHART_INK.surface,
+				strokeWidth: 2,
+				x1: boundary,
+				x2: boundary,
+				y1: require_chart_scale.px(cross),
+				y2: require_chart_scale.px(cross + thickness)
+			}))
+		]
+	});
+}
+function VerticalStacks({ stacks, width, height, format, className }) {
+	const ticks = require_chart_scale.niceTicks(0, Math.max(...stacks.map((stack) => stack.total)));
+	const top = ticks[ticks.length - 1];
+	const axisWidth = Math.max(...ticks.map((tick) => require_chart_scale.textWidth(format(tick)))) + GAP;
+	const plotTop = 6;
+	const baseline = height - 22;
+	const plotHeight = baseline - plotTop;
+	if (plotHeight < 8) throw new Error(`StackedBarChart: height ${height} leaves ${plotHeight}px for stacks after labels`);
+	const slot = (width - axisWidth) / stacks.length;
+	const thickness = Math.max(1, Math.min(slot - 2, 64));
+	const step = require_chart_scale.labelStep(stacks.map((stack) => stack.category), slot);
+	const yOf = (value) => require_chart_scale.px(baseline - value / top * plotHeight);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_chart_marks.ChartFrame, {
+		className,
+		height,
+		label: `Stacked bar chart of ${stacks.length} categories`,
+		width,
+		children: [ticks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			stroke: require_chart_palette.CHART_INK.grid,
+			x1: require_chart_scale.px(axisWidth),
+			x2: width,
+			y1: yOf(tick),
+			y2: yOf(tick)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+			"data-role": "y-tick",
+			dominantBaseline: "central",
+			fill: require_chart_palette.CHART_INK.axis,
+			textAnchor: "end",
+			x: require_chart_scale.px(axisWidth - GAP),
+			y: yOf(tick),
+			children: format(tick)
+		})] }, tick)), stacks.map((stack, index) => {
+			const center = axisWidth + index * slot + slot / 2;
+			const label = require_chart_scale.truncateLabel(stack.category, slot * step - GAP);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				"data-category": stack.category,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: `${stack.category}: total ${format(stack.total)}` }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						fill: "transparent",
+						height: plotHeight,
+						width: require_chart_scale.px(slot),
+						x: require_chart_scale.px(axisWidth + index * slot),
+						y: plotTop
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segments, {
+						base: baseline,
+						cross: center - thickness / 2,
+						format,
+						orientation: "vertical",
+						scale: plotHeight / top,
+						stack,
+						thickness
+					}),
+					index % step === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+						"data-role": "x-label",
+						fill: require_chart_palette.CHART_INK.axis,
+						textAnchor: "middle",
+						x: require_chart_scale.clampLabelX(center, label, width),
+						y: height - 6,
+						children: label
+					})
+				]
+			}, `${index}-${stack.category}`);
+		})]
+	});
+}
+function HorizontalStacks({ stacks, width, height, format, className }) {
+	const pad = 4;
+	const rowHeight = (height - 8) / stacks.length;
+	const thickness = Math.min(16, rowHeight * .7);
+	const labelWidth = Math.min(width * .3, Math.max(...stacks.map((stack) => require_chart_scale.textWidth(stack.category)))) + GAP;
+	const totalWidth = Math.max(...stacks.map((stack) => require_chart_scale.textWidth(format(stack.total)))) + GAP;
+	const plot = width - labelWidth - totalWidth;
+	if (plot < 8) throw new Error(`StackedBarChart: width ${width} leaves ${require_chart_scale.px(plot)}px for stacks after labels and totals`);
+	const scale = plot / (Math.max(...stacks.map((stack) => stack.total)) || 1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_chart_marks.ChartFrame, {
+		className,
+		height,
+		label: `Stacked bar chart of ${stacks.length} categories`,
+		width,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			stroke: require_chart_palette.CHART_INK.grid,
+			x1: require_chart_scale.px(labelWidth),
+			x2: require_chart_scale.px(labelWidth),
+			y1: pad,
+			y2: require_chart_scale.px(height - pad)
+		}), stacks.map((stack, index) => {
+			const middle = pad + index * rowHeight + rowHeight / 2;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				"data-category": stack.category,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: `${stack.category}: total ${format(stack.total)}` }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						fill: "transparent",
+						height: require_chart_scale.px(rowHeight),
+						width,
+						x: 0,
+						y: require_chart_scale.px(middle - rowHeight / 2)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+						"data-role": "label",
+						dominantBaseline: "central",
+						fill: require_chart_palette.CHART_INK.axis,
+						textAnchor: "end",
+						x: require_chart_scale.px(labelWidth - GAP),
+						y: require_chart_scale.px(middle),
+						children: require_chart_scale.truncateLabel(stack.category, labelWidth - GAP)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segments, {
+						base: labelWidth,
+						cross: middle - thickness / 2,
+						format,
+						orientation: "horizontal",
+						scale,
+						stack,
+						thickness
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+						"data-role": "value",
+						dominantBaseline: "central",
+						fill: require_chart_palette.CHART_INK.text,
+						x: require_chart_scale.px(labelWidth + stack.total * scale + GAP),
+						y: require_chart_scale.px(middle),
+						children: format(stack.total)
+					})
+				]
+			}, `${index}-${stack.category}`);
+		})]
+	});
+}
+exports.StackedBarChart = StackedBarChart;
+
+//# sourceMappingURL=StackedBarChart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.cjs","names":["formatChartValue","ChartEmpty","chartColor","WithLegend","_Fragment","px","BarMark","CHART_INK","niceTicks","textWidth","labelStep","ChartFrame","truncateLabel","clampLabelX"],"sources":["../../../src/data/charts/StackedBarChart.tsx"],"sourcesContent":["import { BarMark, ChartEmpty, ChartFrame, WithLegend } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport {\n  assertChartSize,\n  assertFinite,\n  clampLabelX,\n  formatChartValue,\n  labelStep,\n  niceTicks,\n  px,\n  textWidth,\n  truncateLabel,\n  X_AXIS_BAND,\n  X_LABEL_INSET,\n} from \"./chart-scale\";\n\nexport type ChartSeries = { label: string; values: number[]; color?: string };\n\nexport type StackedBarChartProps = {\n  categories: string[];\n  /** `values[i]` is the series' amount in `categories[i]`. */\n  series: ChartSeries[];\n  width: number;\n  height: number;\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Defaults to on for two or more series. */\n  legend?: boolean;\n  format?: (n: number) => string;\n  className?: string;\n};\n\ntype Stack = {\n  category: string;\n  total: number;\n  segments: { label: string; value: number; fill: string }[];\n};\n\nconst GAP = 6;\n\n/** One stacked bar per category, a segment per series, totals in the titles. */\nexport function StackedBarChart({\n  categories,\n  series,\n  width,\n  height,\n  orientation = \"vertical\",\n  legend,\n  format = formatChartValue,\n  className,\n}: StackedBarChartProps) {\n  assertChartSize(\"StackedBarChart\", width, height);\n  series.forEach((entry) => {\n    if (entry.values.length !== categories.length) {\n      throw new Error(\n        `StackedBarChart: series \"${entry.label}\" has ${entry.values.length} values for ${categories.length} categories`,\n      );\n    }\n    entry.values.forEach((value, index) => {\n      assertFinite(\"StackedBarChart\", `${entry.label}[${index}]`, value);\n      if (value < 0) throw new Error(`StackedBarChart: negative value ${value} in \"${entry.label}\"; stacks start at 0`);\n    });\n  });\n  if (categories.length === 0 || series.length === 0) return <ChartEmpty className={className} height={height} width={width} />;\n\n  const colors = series.map((entry, index) => entry.color ?? chartColor(index));\n  const stacks: Stack[] = categories.map((category, index) => {\n    const segments = series.map((entry, j) => ({ label: entry.label, value: entry.values[index]!, fill: colors[j]! }));\n    return { category, total: segments.reduce((sum, segment) => sum + segment.value, 0), segments };\n  });\n  const Layout = orientation === \"horizontal\" ? HorizontalStacks : VerticalStacks;\n  return (\n    <WithLegend\n      className={className}\n      items={series.map((entry, index) => ({ label: entry.label, color: colors[index]! }))}\n      show={legend ?? series.length > 1}\n      width={width}\n    >\n      {(svgClassName) => <Layout className={svgClassName} format={format} height={height} stacks={stacks} width={width} />}\n    </WithLegend>\n  );\n}\n\ntype LayoutProps = { stacks: Stack[]; width: number; height: number; format: (n: number) => string; className: string | undefined };\n\n/** The segments of one stack, from the base outward, with surface-coloured gaps between them. */\nfunction Segments({\n  stack,\n  orientation,\n  base,\n  cross,\n  thickness,\n  scale,\n  format,\n}: {\n  stack: Stack;\n  orientation: \"horizontal\" | \"vertical\";\n  base: number;\n  cross: number;\n  thickness: number;\n  scale: number;\n  format: (n: number) => string;\n}) {\n  const direction = orientation === \"vertical\" ? -1 : 1;\n  const outermost = stack.segments.findLastIndex((segment) => segment.value > 0);\n  const offsets = stack.segments.map((_, index) =>\n    stack.segments.slice(0, index).reduce((sum, segment) => sum + segment.value * scale, 0),\n  );\n  return (\n    <>\n      {stack.segments.map((segment, index) => {\n        if (segment.value <= 0) return null;\n        const start = base + direction * offsets[index]!;\n        return (\n          <SegmentMark\n            boundary={start !== base}\n            cross={cross}\n            fill={segment.fill}\n            key={`${index}-${segment.label}`}\n            label={segment.label}\n            length={segment.value * scale}\n            orientation={orientation}\n            rounded={index === outermost}\n            start={start}\n            thickness={thickness}\n            title={`${stack.category} · ${segment.label}: ${format(segment.value)}`}\n          />\n        );\n      })}\n    </>\n  );\n}\n\nfunction SegmentMark({\n  label,\n  title,\n  orientation,\n  start,\n  cross,\n  length,\n  thickness,\n  fill,\n  rounded,\n  boundary: hasBoundary,\n}: {\n  label: string;\n  title: string;\n  orientation: \"horizontal\" | \"vertical\";\n  start: number;\n  cross: number;\n  length: number;\n  thickness: number;\n  fill: string;\n  rounded: boolean;\n  boundary: boolean;\n}) {\n  const boundary = px(start);\n  return (\n    <g data-series={label}>\n      <title>{title}</title>\n      <BarMark base={start} cross={cross} fill={fill} length={length} orientation={orientation} rounded={rounded} thickness={thickness} />\n      {hasBoundary &&\n        (orientation === \"vertical\" ? (\n          <line stroke={CHART_INK.surface} strokeWidth={2} x1={px(cross)} x2={px(cross + thickness)} y1={boundary} y2={boundary} />\n        ) : (\n          <line stroke={CHART_INK.surface} strokeWidth={2} x1={boundary} x2={boundary} y1={px(cross)} y2={px(cross + thickness)} />\n        ))}\n    </g>\n  );\n}\n\nfunction VerticalStacks({ stacks, width, height, format, className }: LayoutProps) {\n  const ticks = niceTicks(0, Math.max(...stacks.map((stack) => stack.total)));\n  const top = ticks[ticks.length - 1]!;\n  const axisWidth = Math.max(...ticks.map((tick) => textWidth(format(tick)))) + GAP;\n  const plotTop = 6;\n  const baseline = height - X_AXIS_BAND;\n  const plotHeight = baseline - plotTop;\n  if (plotHeight < 8) throw new Error(`StackedBarChart: height ${height} leaves ${plotHeight}px for stacks after labels`);\n  const slot = (width - axisWidth) / stacks.length;\n  const thickness = Math.max(1, Math.min(slot - 2, 64));\n  const step = labelStep(stacks.map((stack) => stack.category), slot);\n  const yOf = (value: number) => px(baseline - (value / top) * plotHeight);\n\n  return (\n    <ChartFrame className={className} height={height} label={`Stacked bar chart of ${stacks.length} categories`} width={width}>\n      {ticks.map((tick) => (\n        <g key={tick}>\n          <line stroke={CHART_INK.grid} x1={px(axisWidth)} x2={width} y1={yOf(tick)} y2={yOf(tick)} />\n          <text data-role=\"y-tick\" dominantBaseline=\"central\" fill={CHART_INK.axis} textAnchor=\"end\" x={px(axisWidth - GAP)} y={yOf(tick)}>\n            {format(tick)}\n          </text>\n        </g>\n      ))}\n      {stacks.map((stack, index) => {\n        const center = axisWidth + index * slot + slot / 2;\n        const label = truncateLabel(stack.category, slot * step - GAP);\n        return (\n          <g data-category={stack.category} key={`${index}-${stack.category}`}>\n            <title>{`${stack.category}: total ${format(stack.total)}`}</title>\n            <rect fill=\"transparent\" height={plotHeight} width={px(slot)} x={px(axisWidth + index * slot)} y={plotTop} />\n            <Segments base={baseline} cross={center - thickness / 2} format={format} orientation=\"vertical\" scale={plotHeight / top} stack={stack} thickness={thickness} />\n            {index % step === 0 && (\n              <text data-role=\"x-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\nfunction HorizontalStacks({ stacks, width, height, format, className }: LayoutProps) {\n  const pad = 4;\n  const rowHeight = (height - pad * 2) / stacks.length;\n  const thickness = Math.min(16, rowHeight * 0.7);\n  const labelWidth = Math.min(width * 0.3, Math.max(...stacks.map((stack) => textWidth(stack.category)))) + GAP;\n  const totalWidth = Math.max(...stacks.map((stack) => textWidth(format(stack.total)))) + GAP;\n  const plot = width - labelWidth - totalWidth;\n  if (plot < 8) throw new Error(`StackedBarChart: width ${width} leaves ${px(plot)}px for stacks after labels and totals`);\n  const scale = plot / (Math.max(...stacks.map((stack) => stack.total)) || 1);\n\n  return (\n    <ChartFrame className={className} height={height} label={`Stacked bar chart of ${stacks.length} categories`} width={width}>\n      <line stroke={CHART_INK.grid} x1={px(labelWidth)} x2={px(labelWidth)} y1={pad} y2={px(height - pad)} />\n      {stacks.map((stack, index) => {\n        const middle = pad + index * rowHeight + rowHeight / 2;\n        return (\n          <g data-category={stack.category} key={`${index}-${stack.category}`}>\n            <title>{`${stack.category}: total ${format(stack.total)}`}</title>\n            <rect fill=\"transparent\" height={px(rowHeight)} width={width} x={0} y={px(middle - rowHeight / 2)} />\n            <text data-role=\"label\" dominantBaseline=\"central\" fill={CHART_INK.axis} textAnchor=\"end\" x={px(labelWidth - GAP)} y={px(middle)}>\n              {truncateLabel(stack.category, labelWidth - GAP)}\n            </text>\n            <Segments base={labelWidth} cross={middle - thickness / 2} format={format} orientation=\"horizontal\" scale={scale} stack={stack} thickness={thickness} />\n            <text data-role=\"value\" dominantBaseline=\"central\" fill={CHART_INK.text} x={px(labelWidth + stack.total * scale + GAP)} y={px(middle)}>\n              {format(stack.total)}\n            </text>\n          </g>\n        );\n      })}\n    </ChartFrame>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+export type ChartSeries = {
+    label: string;
+    values: number[];
+    color?: string;
+};
+export type StackedBarChartProps = {
+    categories: string[];
+    /** `values[i]` is the series' amount in `categories[i]`. */
+    series: ChartSeries[];
+    width: number;
+    height: number;
+    orientation?: "vertical" | "horizontal";
+    /** Defaults to on for two or more series. */
+    legend?: boolean;
+    format?: (n: number) => string;
+    className?: string;
+};
+/** One stacked bar per category, a segment per series, totals in the titles. */
+export declare function StackedBarChart({ categories, series, width, height, orientation, legend, format, className, }: StackedBarChartProps): import("react").JSX.Element;
+//# sourceMappingURL=StackedBarChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../../../src/data/charts/StackedBarChart.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,4DAA4D;IAC5D,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,gFAAgF;AAChF,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAwB,EACxB,MAAM,EACN,MAAyB,EACzB,SAAS,GACV,EAAE,oBAAoB,+BA+BtB"}