@flanksource/clicky-ui 0.3.55 → 0.3.56

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

package/dist/data/charts/StackedBarChart.js

@@ -0,0 +1,241 @@
+import { CHART_INK, chartColor } from "./chart-palette.js";
+import { assertChartSize, assertFinite, clampLabelX, formatChartValue, labelStep, niceTicks, px, textWidth, truncateLabel } from "./chart-scale.js";
+import { BarMark, ChartEmpty, ChartFrame, WithLegend } from "./chart-marks.js";
+import { Fragment, jsx, jsxs } from "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 = formatChartValue, className }) {
+	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) => {
+			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__ */ jsx(ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const colors = series.map((entry, index) => entry.color ?? 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__ */ jsx(WithLegend, {
+		className,
+		items: series.map((entry, index) => ({
+			label: entry.label,
+			color: colors[index]
+		})),
+		show: legend ?? series.length > 1,
+		width,
+		children: (svgClassName) => /* @__PURE__ */ 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__ */ jsx(Fragment, { children: stack.segments.map((segment, index) => {
+		if (segment.value <= 0) return null;
+		const start = base + direction * offsets[index];
+		return /* @__PURE__ */ 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 = px(start);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-series": label,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx(BarMark, {
+				base: start,
+				cross,
+				fill,
+				length,
+				orientation,
+				rounded,
+				thickness
+			}),
+			hasBoundary && (orientation === "vertical" ? /* @__PURE__ */ jsx("line", {
+				stroke: CHART_INK.surface,
+				strokeWidth: 2,
+				x1: px(cross),
+				x2: px(cross + thickness),
+				y1: boundary,
+				y2: boundary
+			}) : /* @__PURE__ */ jsx("line", {
+				stroke: CHART_INK.surface,
+				strokeWidth: 2,
+				x1: boundary,
+				x2: boundary,
+				y1: px(cross),
+				y2: px(cross + thickness)
+			}))
+		]
+	});
+}
+function VerticalStacks({ stacks, width, height, format, className }) {
+	const ticks = niceTicks(0, Math.max(...stacks.map((stack) => stack.total)));
+	const top = ticks[ticks.length - 1];
+	const axisWidth = Math.max(...ticks.map((tick) => 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 = labelStep(stacks.map((stack) => stack.category), slot);
+	const yOf = (value) => px(baseline - value / top * plotHeight);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: `Stacked bar chart of ${stacks.length} categories`,
+		width,
+		children: [ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+			stroke: CHART_INK.grid,
+			x1: px(axisWidth),
+			x2: width,
+			y1: yOf(tick),
+			y2: yOf(tick)
+		}), /* @__PURE__ */ jsx("text", {
+			"data-role": "y-tick",
+			dominantBaseline: "central",
+			fill: CHART_INK.axis,
+			textAnchor: "end",
+			x: px(axisWidth - GAP),
+			y: yOf(tick),
+			children: format(tick)
+		})] }, tick)), stacks.map((stack, index) => {
+			const center = axisWidth + index * slot + slot / 2;
+			const label = truncateLabel(stack.category, slot * step - GAP);
+			return /* @__PURE__ */ jsxs("g", {
+				"data-category": stack.category,
+				children: [
+					/* @__PURE__ */ jsx("title", { children: `${stack.category}: total ${format(stack.total)}` }),
+					/* @__PURE__ */ jsx("rect", {
+						fill: "transparent",
+						height: plotHeight,
+						width: px(slot),
+						x: px(axisWidth + index * slot),
+						y: plotTop
+					}),
+					/* @__PURE__ */ jsx(Segments, {
+						base: baseline,
+						cross: center - thickness / 2,
+						format,
+						orientation: "vertical",
+						scale: plotHeight / top,
+						stack,
+						thickness
+					}),
+					index % step === 0 && /* @__PURE__ */ jsx("text", {
+						"data-role": "x-label",
+						fill: CHART_INK.axis,
+						textAnchor: "middle",
+						x: 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) => textWidth(stack.category)))) + GAP;
+	const totalWidth = Math.max(...stacks.map((stack) => textWidth(format(stack.total)))) + GAP;
+	const plot = width - labelWidth - totalWidth;
+	if (plot < 8) throw new Error(`StackedBarChart: width ${width} leaves ${px(plot)}px for stacks after labels and totals`);
+	const scale = plot / (Math.max(...stacks.map((stack) => stack.total)) || 1);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: `Stacked bar chart of ${stacks.length} categories`,
+		width,
+		children: [/* @__PURE__ */ jsx("line", {
+			stroke: CHART_INK.grid,
+			x1: px(labelWidth),
+			x2: px(labelWidth),
+			y1: pad,
+			y2: px(height - pad)
+		}), stacks.map((stack, index) => {
+			const middle = pad + index * rowHeight + rowHeight / 2;
+			return /* @__PURE__ */ jsxs("g", {
+				"data-category": stack.category,
+				children: [
+					/* @__PURE__ */ jsx("title", { children: `${stack.category}: total ${format(stack.total)}` }),
+					/* @__PURE__ */ jsx("rect", {
+						fill: "transparent",
+						height: px(rowHeight),
+						width,
+						x: 0,
+						y: px(middle - rowHeight / 2)
+					}),
+					/* @__PURE__ */ jsx("text", {
+						"data-role": "label",
+						dominantBaseline: "central",
+						fill: CHART_INK.axis,
+						textAnchor: "end",
+						x: px(labelWidth - GAP),
+						y: px(middle),
+						children: truncateLabel(stack.category, labelWidth - GAP)
+					}),
+					/* @__PURE__ */ jsx(Segments, {
+						base: labelWidth,
+						cross: middle - thickness / 2,
+						format,
+						orientation: "horizontal",
+						scale,
+						stack,
+						thickness
+					}),
+					/* @__PURE__ */ jsx("text", {
+						"data-role": "value",
+						dominantBaseline: "central",
+						fill: CHART_INK.text,
+						x: px(labelWidth + stack.total * scale + GAP),
+						y: px(middle),
+						children: format(stack.total)
+					})
+				]
+			}, `${index}-${stack.category}`);
+		})]
+	});
+}
+export { StackedBarChart };
+
+//# sourceMappingURL=StackedBarChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.js","names":["_Fragment"],"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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"}