@flanksource/clicky-ui 0.3.55 → 0.3.57

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

package/dist/data/charts/TrendChart.cjs

@@ -0,0 +1,157 @@
+const require_format = require("../../lib/format.cjs");
+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/TrendChart.tsx
+var GAP = 6;
+var PAD = 8;
+function xAt(plot, index) {
+	return require_chart_scale.px(plot.count === 1 ? plot.left + plot.width / 2 : plot.left + index / (plot.count - 1) * plot.width);
+}
+function yAt(plot, value) {
+	return require_chart_scale.px(plot.top + (plot.high - value) / (plot.high - plot.low) * plot.height);
+}
+/** Series over evenly spaced x positions, on a y axis of nice ticks that includes 0. */
+function TrendChart({ x, series, width, height, variant = "line", legend, yFormat, xFormat = require_chart_scale.formatChartX, className }) {
+	require_chart_scale.assertChartSize("TrendChart", width, height);
+	series.forEach((entry) => {
+		if (entry.values.length !== x.length) throw new Error(`TrendChart: series "${entry.label}" has ${entry.values.length} values for ${x.length} x positions`);
+		entry.values.forEach((value, index) => require_chart_scale.assertFinite("TrendChart", `${entry.label}[${index}]`, value));
+	});
+	if (x.length === 0 || series.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart_marks.ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const tickFormat = yFormat ?? require_format.formatShort;
+	const valueFormat = yFormat ?? require_chart_scale.formatChartValue;
+	const all = series.flatMap((entry) => entry.values);
+	const ticks = require_chart_scale.niceTicks(Math.min(0, ...all), Math.max(0, ...all));
+	const left = Math.max(...ticks.map((tick) => require_chart_scale.textWidth(tickFormat(tick)))) + GAP;
+	const plot = {
+		left,
+		top: PAD,
+		width: width - left - PAD,
+		height: height - PAD - 22,
+		low: ticks[0],
+		high: ticks[ticks.length - 1],
+		count: x.length
+	};
+	if (plot.width < 8 || plot.height < 8) throw new Error(`TrendChart: ${width}×${height} leaves no plot area after the axes`);
+	const colors = series.map((entry, index) => entry.color ?? require_chart_palette.chartColor(index));
+	const labels = x.map(xFormat);
+	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.jsxs)(require_chart_marks.ChartFrame, {
+			className: svgClassName,
+			height,
+			label: `Trend of ${series.length} series over ${x.length} points`,
+			width,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Axes, {
+					height,
+					labels,
+					plot,
+					tickFormat,
+					ticks,
+					width
+				}),
+				series.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SeriesMark, {
+					color: colors[index],
+					label: entry.label,
+					plot,
+					values: entry.values,
+					variant
+				}, `${index}-${entry.label}`)),
+				labels.map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverColumn, {
+					index,
+					plot,
+					title: `${label} — ${series.map((entry) => `${entry.label}: ${valueFormat(entry.values[index])}`).join(" · ")}`
+				}, `${index}-${label}`))
+			]
+		})
+	});
+}
+function Axes({ plot, ticks, labels, tickFormat, width, height }) {
+	const step = require_chart_scale.labelStep(labels, plot.count === 1 ? plot.width : plot.width / (plot.count - 1));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { 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(plot.left),
+		x2: require_chart_scale.px(plot.left + plot.width),
+		y1: yAt(plot, tick),
+		y2: yAt(plot, 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(plot.left - GAP),
+		y: yAt(plot, tick),
+		children: tickFormat(tick)
+	})] }, tick)), labels.map((label, index) => 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(xAt(plot, index), label, width),
+		y: height - 6,
+		children: label
+	}, `${index}-${label}`) : null)] });
+}
+function SeriesMark({ label, values, color, plot, variant }) {
+	const points = values.map((value, index) => `${xAt(plot, index)},${yAt(plot, value)}`);
+	const zero = yAt(plot, 0);
+	const lastX = xAt(plot, values.length - 1);
+	const lastY = yAt(plot, values[values.length - 1]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		"data-series": label,
+		children: [
+			variant === "area" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: `M${xAt(plot, 0)},${zero} L${points.join(" L")} L${lastX},${zero} Z`,
+				"data-mark": "area",
+				fill: color,
+				fillOpacity: .12
+			}),
+			values.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
+				fill: "none",
+				points: points.join(" "),
+				stroke: color,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: lastX,
+				cy: lastY,
+				fill: color,
+				r: 4,
+				stroke: require_chart_palette.CHART_INK.surface,
+				strokeWidth: 2
+			})
+		]
+	});
+}
+function HoverColumn({ plot, index, title }) {
+	const half = (plot.count === 1 ? plot.width : plot.width / (plot.count - 1)) / 2;
+	const start = Math.max(plot.left, xAt(plot, index) - half);
+	const end = Math.min(plot.left + plot.width, xAt(plot, index) + half);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		"data-role": "hover",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "transparent",
+			height: require_chart_scale.px(plot.height),
+			width: require_chart_scale.px(end - start),
+			x: require_chart_scale.px(start),
+			y: require_chart_scale.px(plot.top)
+		})]
+	});
+}
+exports.TrendChart = TrendChart;
+
+//# sourceMappingURL=TrendChart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.cjs","names":["px","formatChartX","assertFinite","ChartEmpty","formatShort","formatChartValue","niceTicks","textWidth","chartColor","WithLegend","ChartFrame","labelStep","_Fragment","CHART_INK","clampLabelX"],"sources":["../../../src/data/charts/TrendChart.tsx"],"sourcesContent":["import { formatShort } from \"../../lib/format\";\nimport { ChartEmpty, ChartFrame, WithLegend } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport {\n  assertChartSize,\n  assertFinite,\n  clampLabelX,\n  formatChartValue,\n  formatChartX,\n  labelStep,\n  niceTicks,\n  px,\n  textWidth,\n  X_AXIS_BAND,\n  X_LABEL_INSET,\n} from \"./chart-scale\";\nimport type { ChartSeries } from \"./StackedBarChart\";\n\nexport type TrendChartProps = {\n  /** ISO dates or labels, drawn evenly spaced. */\n  x: string[];\n  /** `values[i]` is the series' value at `x[i]`. */\n  series: ChartSeries[];\n  width: number;\n  height: number;\n  variant?: \"line\" | \"area\";\n  /** Defaults to on for two or more series. */\n  legend?: boolean;\n  /** Formats y ticks and hover values. Ticks default to SI-short (1.2K), hover values to grouped digits. */\n  yFormat?: (n: number) => string;\n  /** Formats x labels; ISO dates default to \"Aug 16\". */\n  xFormat?: (x: string) => string;\n  className?: string;\n};\n\ntype Plot = { left: number; top: number; width: number; height: number; low: number; high: number; count: number };\n\nconst GAP = 6;\nconst PAD = 8;\n\nfunction xAt(plot: Plot, index: number): number {\n  return px(plot.count === 1 ? plot.left + plot.width / 2 : plot.left + (index / (plot.count - 1)) * plot.width);\n}\n\nfunction yAt(plot: Plot, value: number): number {\n  return px(plot.top + ((plot.high - value) / (plot.high - plot.low)) * plot.height);\n}\n\n/** Series over evenly spaced x positions, on a y axis of nice ticks that includes 0. */\nexport function TrendChart({ x, series, width, height, variant = \"line\", legend, yFormat, xFormat = formatChartX, className }: TrendChartProps) {\n  assertChartSize(\"TrendChart\", width, height);\n  series.forEach((entry) => {\n    if (entry.values.length !== x.length) {\n      throw new Error(`TrendChart: series \"${entry.label}\" has ${entry.values.length} values for ${x.length} x positions`);\n    }\n    entry.values.forEach((value, index) => assertFinite(\"TrendChart\", `${entry.label}[${index}]`, value));\n  });\n  if (x.length === 0 || series.length === 0) return <ChartEmpty className={className} height={height} width={width} />;\n\n  const tickFormat = yFormat ?? formatShort;\n  const valueFormat = yFormat ?? formatChartValue;\n  const all = series.flatMap((entry) => entry.values);\n  const ticks = niceTicks(Math.min(0, ...all), Math.max(0, ...all));\n  const left = Math.max(...ticks.map((tick) => textWidth(tickFormat(tick)))) + GAP;\n  const plot: Plot = {\n    left,\n    top: PAD,\n    width: width - left - PAD,\n    height: height - PAD - X_AXIS_BAND,\n    low: ticks[0]!,\n    high: ticks[ticks.length - 1]!,\n    count: x.length,\n  };\n  if (plot.width < 8 || plot.height < 8) throw new Error(`TrendChart: ${width}×${height} leaves no plot area after the axes`);\n  const colors = series.map((entry, index) => entry.color ?? chartColor(index));\n  const labels = x.map(xFormat);\n\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) => (\n        <ChartFrame className={svgClassName} height={height} label={`Trend of ${series.length} series over ${x.length} points`} width={width}>\n          <Axes height={height} labels={labels} plot={plot} tickFormat={tickFormat} ticks={ticks} width={width} />\n          {series.map((entry, index) => (\n            <SeriesMark color={colors[index]!} key={`${index}-${entry.label}`} label={entry.label} plot={plot} values={entry.values} variant={variant} />\n          ))}\n          {labels.map((label, index) => (\n            <HoverColumn\n              index={index}\n              key={`${index}-${label}`}\n              plot={plot}\n              title={`${label} — ${series.map((entry) => `${entry.label}: ${valueFormat(entry.values[index]!)}`).join(\" · \")}`}\n            />\n          ))}\n        </ChartFrame>\n      )}\n    </WithLegend>\n  );\n}\n\nfunction Axes({\n  plot,\n  ticks,\n  labels,\n  tickFormat,\n  width,\n  height,\n}: {\n  plot: Plot;\n  ticks: number[];\n  labels: string[];\n  tickFormat: (n: number) => string;\n  width: number;\n  height: number;\n}) {\n  const step = labelStep(labels, plot.count === 1 ? plot.width : plot.width / (plot.count - 1));\n  return (\n    <>\n      {ticks.map((tick) => (\n        <g key={tick}>\n          <line stroke={CHART_INK.grid} x1={px(plot.left)} x2={px(plot.left + plot.width)} y1={yAt(plot, tick)} y2={yAt(plot, tick)} />\n          <text data-role=\"y-tick\" dominantBaseline=\"central\" fill={CHART_INK.axis} textAnchor=\"end\" x={px(plot.left - GAP)} y={yAt(plot, tick)}>\n            {tickFormat(tick)}\n          </text>\n        </g>\n      ))}\n      {labels.map((label, index) =>\n        index % step === 0 ? (\n          <text data-role=\"x-label\" fill={CHART_INK.axis} key={`${index}-${label}`} textAnchor=\"middle\" x={clampLabelX(xAt(plot, index), label, width)} y={height - X_LABEL_INSET}>\n            {label}\n          </text>\n        ) : null,\n      )}\n    </>\n  );\n}\n\nfunction SeriesMark({\n  label,\n  values,\n  color,\n  plot,\n  variant,\n}: {\n  label: string;\n  values: number[];\n  color: string;\n  plot: Plot;\n  variant: \"line\" | \"area\";\n}) {\n  const points = values.map((value, index) => `${xAt(plot, index)},${yAt(plot, value)}`);\n  const zero = yAt(plot, 0);\n  const lastX = xAt(plot, values.length - 1);\n  const lastY = yAt(plot, values[values.length - 1]!);\n  return (\n    <g data-series={label}>\n      {variant === \"area\" && (\n        <path\n          d={`M${xAt(plot, 0)},${zero} L${points.join(\" L\")} L${lastX},${zero} Z`}\n          data-mark=\"area\"\n          fill={color}\n          fillOpacity={0.12}\n        />\n      )}\n      {values.length > 1 && (\n        <polyline fill=\"none\" points={points.join(\" \")} stroke={color} strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} />\n      )}\n      <circle cx={lastX} cy={lastY} fill={color} r={4} stroke={CHART_INK.surface} strokeWidth={2} />\n    </g>\n  );\n}\n\nfunction HoverColumn({ plot, index, title }: { plot: Plot; index: number; title: string }) {\n  const half = (plot.count === 1 ? plot.width : plot.width / (plot.count - 1)) / 2;\n  const start = Math.max(plot.left, xAt(plot, index) - half);\n  const end = Math.min(plot.left + plot.width, xAt(plot, index) + half);\n  return (\n    <g data-role=\"hover\">\n      <title>{title}</title>\n      <rect fill=\"transparent\" height={px(plot.height)} width={px(end - start)} x={px(start)} y={px(plot.top)} />\n    </g>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { ChartSeries } from './StackedBarChart.js';
+export type TrendChartProps = {
+    /** ISO dates or labels, drawn evenly spaced. */
+    x: string[];
+    /** `values[i]` is the series' value at `x[i]`. */
+    series: ChartSeries[];
+    width: number;
+    height: number;
+    variant?: "line" | "area";
+    /** Defaults to on for two or more series. */
+    legend?: boolean;
+    /** Formats y ticks and hover values. Ticks default to SI-short (1.2K), hover values to grouped digits. */
+    yFormat?: (n: number) => string;
+    /** Formats x labels; ISO dates default to "Aug 16". */
+    xFormat?: (x: string) => string;
+    className?: string;
+};
+/** Series over evenly spaced x positions, on a y axis of nice ticks that includes 0. */
+export declare function TrendChart({ x, series, width, height, variant, legend, yFormat, xFormat, className }: TrendChartProps): import("react").JSX.Element;
+//# sourceMappingURL=TrendChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.d.ts","sourceRoot":"","sources":["../../../src/data/charts/TrendChart.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,CAAC,EAAE,MAAM,EAAE,CAAC;IACZ,kDAAkD;IAClD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAeF,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,OAAsB,EAAE,SAAS,EAAE,EAAE,eAAe,+BAqD7I"}

package/dist/data/charts/TrendChart.js

@@ -0,0 +1,157 @@
+import { formatShort } from "../../lib/format.js";
+import { CHART_INK, chartColor } from "./chart-palette.js";
+import { assertChartSize, assertFinite, clampLabelX, formatChartValue, formatChartX, labelStep, niceTicks, px, textWidth } from "./chart-scale.js";
+import { ChartEmpty, ChartFrame, WithLegend } from "./chart-marks.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/data/charts/TrendChart.tsx
+var GAP = 6;
+var PAD = 8;
+function xAt(plot, index) {
+	return px(plot.count === 1 ? plot.left + plot.width / 2 : plot.left + index / (plot.count - 1) * plot.width);
+}
+function yAt(plot, value) {
+	return px(plot.top + (plot.high - value) / (plot.high - plot.low) * plot.height);
+}
+/** Series over evenly spaced x positions, on a y axis of nice ticks that includes 0. */
+function TrendChart({ x, series, width, height, variant = "line", legend, yFormat, xFormat = formatChartX, className }) {
+	assertChartSize("TrendChart", width, height);
+	series.forEach((entry) => {
+		if (entry.values.length !== x.length) throw new Error(`TrendChart: series "${entry.label}" has ${entry.values.length} values for ${x.length} x positions`);
+		entry.values.forEach((value, index) => assertFinite("TrendChart", `${entry.label}[${index}]`, value));
+	});
+	if (x.length === 0 || series.length === 0) return /* @__PURE__ */ jsx(ChartEmpty, {
+		className,
+		height,
+		width
+	});
+	const tickFormat = yFormat ?? formatShort;
+	const valueFormat = yFormat ?? formatChartValue;
+	const all = series.flatMap((entry) => entry.values);
+	const ticks = niceTicks(Math.min(0, ...all), Math.max(0, ...all));
+	const left = Math.max(...ticks.map((tick) => textWidth(tickFormat(tick)))) + GAP;
+	const plot = {
+		left,
+		top: PAD,
+		width: width - left - PAD,
+		height: height - PAD - 22,
+		low: ticks[0],
+		high: ticks[ticks.length - 1],
+		count: x.length
+	};
+	if (plot.width < 8 || plot.height < 8) throw new Error(`TrendChart: ${width}×${height} leaves no plot area after the axes`);
+	const colors = series.map((entry, index) => entry.color ?? chartColor(index));
+	const labels = x.map(xFormat);
+	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__ */ jsxs(ChartFrame, {
+			className: svgClassName,
+			height,
+			label: `Trend of ${series.length} series over ${x.length} points`,
+			width,
+			children: [
+				/* @__PURE__ */ jsx(Axes, {
+					height,
+					labels,
+					plot,
+					tickFormat,
+					ticks,
+					width
+				}),
+				series.map((entry, index) => /* @__PURE__ */ jsx(SeriesMark, {
+					color: colors[index],
+					label: entry.label,
+					plot,
+					values: entry.values,
+					variant
+				}, `${index}-${entry.label}`)),
+				labels.map((label, index) => /* @__PURE__ */ jsx(HoverColumn, {
+					index,
+					plot,
+					title: `${label} — ${series.map((entry) => `${entry.label}: ${valueFormat(entry.values[index])}`).join(" · ")}`
+				}, `${index}-${label}`))
+			]
+		})
+	});
+}
+function Axes({ plot, ticks, labels, tickFormat, width, height }) {
+	const step = labelStep(labels, plot.count === 1 ? plot.width : plot.width / (plot.count - 1));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		stroke: CHART_INK.grid,
+		x1: px(plot.left),
+		x2: px(plot.left + plot.width),
+		y1: yAt(plot, tick),
+		y2: yAt(plot, tick)
+	}), /* @__PURE__ */ jsx("text", {
+		"data-role": "y-tick",
+		dominantBaseline: "central",
+		fill: CHART_INK.axis,
+		textAnchor: "end",
+		x: px(plot.left - GAP),
+		y: yAt(plot, tick),
+		children: tickFormat(tick)
+	})] }, tick)), labels.map((label, index) => index % step === 0 ? /* @__PURE__ */ jsx("text", {
+		"data-role": "x-label",
+		fill: CHART_INK.axis,
+		textAnchor: "middle",
+		x: clampLabelX(xAt(plot, index), label, width),
+		y: height - 6,
+		children: label
+	}, `${index}-${label}`) : null)] });
+}
+function SeriesMark({ label, values, color, plot, variant }) {
+	const points = values.map((value, index) => `${xAt(plot, index)},${yAt(plot, value)}`);
+	const zero = yAt(plot, 0);
+	const lastX = xAt(plot, values.length - 1);
+	const lastY = yAt(plot, values[values.length - 1]);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-series": label,
+		children: [
+			variant === "area" && /* @__PURE__ */ jsx("path", {
+				d: `M${xAt(plot, 0)},${zero} L${points.join(" L")} L${lastX},${zero} Z`,
+				"data-mark": "area",
+				fill: color,
+				fillOpacity: .12
+			}),
+			values.length > 1 && /* @__PURE__ */ jsx("polyline", {
+				fill: "none",
+				points: points.join(" "),
+				stroke: color,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: lastX,
+				cy: lastY,
+				fill: color,
+				r: 4,
+				stroke: CHART_INK.surface,
+				strokeWidth: 2
+			})
+		]
+	});
+}
+function HoverColumn({ plot, index, title }) {
+	const half = (plot.count === 1 ? plot.width : plot.width / (plot.count - 1)) / 2;
+	const start = Math.max(plot.left, xAt(plot, index) - half);
+	const end = Math.min(plot.left + plot.width, xAt(plot, index) + half);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-role": "hover",
+		children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("rect", {
+			fill: "transparent",
+			height: px(plot.height),
+			width: px(end - start),
+			x: px(start),
+			y: px(plot.top)
+		})]
+	});
+}
+export { TrendChart };
+
+//# sourceMappingURL=TrendChart.js.map