@flanksource/clicky-ui 0.3.54 → 0.3.56

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.js","names":["_Fragment"],"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/chart-marks.cjs

@@ -0,0 +1,115 @@
+const require_chart_palette = require("./chart-palette.cjs");
+const require_ChartLegend = require("./ChartLegend.cjs");
+const require_chart_scale = require("./chart-scale.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/charts/chart-marks.tsx
+var FRAME_STYLE = {
+	display: "block",
+	maxWidth: "100%",
+	height: "auto",
+	overflow: "visible",
+	fontVariantNumeric: "tabular-nums"
+};
+function ChartFrame({ width, height, label, title, className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-label": label,
+		className,
+		fontSize: 11,
+		height,
+		role: "img",
+		style: FRAME_STYLE,
+		viewBox: `0 0 ${width} ${height}`,
+		width,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [title !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }), children]
+	});
+}
+/** An empty chart says so, at the size the chart would have had. */
+function ChartEmpty({ width, height, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartFrame, {
+		className,
+		height,
+		label: "No data",
+		width,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "none",
+			height: Math.max(0, height - 2),
+			rx: 4,
+			stroke: require_chart_palette.CHART_INK.grid,
+			strokeDasharray: "4 3",
+			width: Math.max(0, width - 2),
+			x: 1,
+			y: 1
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+			dominantBaseline: "central",
+			fill: require_chart_palette.CHART_INK.axis,
+			fontSize: Math.min(11, height * .6),
+			textAnchor: "middle",
+			x: width / 2,
+			y: height / 2,
+			children: "No data"
+		})]
+	});
+}
+/**
+* One bar. `base` is where the bar is anchored (x for horizontal, the baseline
+* y for vertical), `cross` the start of its thickness, and `length` grows away
+* from the base (rightward, or upward).
+*/
+function BarMark({ orientation, base, cross, length, thickness, fill, rounded }) {
+	if (length <= 0) return null;
+	const radius = rounded ? require_chart_scale.px(Math.min(4, thickness / 2)) : 0;
+	const square = require_chart_scale.px(Math.min(radius, length));
+	const horizontal = orientation === "horizontal";
+	const body = horizontal ? {
+		x: require_chart_scale.px(base),
+		y: require_chart_scale.px(cross),
+		width: require_chart_scale.px(length),
+		height: require_chart_scale.px(thickness)
+	} : {
+		x: require_chart_scale.px(cross),
+		y: require_chart_scale.px(base - length),
+		width: require_chart_scale.px(thickness),
+		height: require_chart_scale.px(length)
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		"data-mark": "bar",
+		fill,
+		rx: radius || void 0,
+		...body
+	}), square > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		fill,
+		...horizontal ? {
+			x: body.x,
+			y: body.y,
+			width: square,
+			height: body.height
+		} : {
+			x: body.x,
+			y: require_chart_scale.px(base - square),
+			width: body.width,
+			height: square
+		}
+	})] });
+}
+/** Wraps a chart with its legend below it when `show` is set. */
+function WithLegend({ show, items, width, className, children }) {
+	if (!show) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(className) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		style: {
+			width,
+			maxWidth: "100%"
+		},
+		children: [children(void 0), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
+			items,
+			style: { marginTop: 6 }
+		})]
+	});
+}
+exports.BarMark = BarMark;
+exports.ChartEmpty = ChartEmpty;
+exports.ChartFrame = ChartFrame;
+exports.WithLegend = WithLegend;
+
+//# sourceMappingURL=chart-marks.cjs.map

package/dist/data/charts/chart-marks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-marks.cjs","names":["CHART_INK","px","_Fragment","ChartLegend"],"sources":["../../../src/data/charts/chart-marks.tsx"],"sourcesContent":["/**\n * The marks every static chart is drawn from, ported from the playground's\n * design-system specimens (`dataviz-marks.tsx`):\n *\n *   - 2px strokes; thinner disappears on a dense page, thicker reads as decoration.\n *   - Rounded data ends, square at the baseline. `rx` rounds all four corners,\n *     so the baseline end is squared off by overdrawing it — rounding both ends\n *     makes a bar look like it floats above its own axis.\n *   - Adjacent fills are separated by a 2px gap in the SURFACE colour, so they\n *     read as separated rather than outlined.\n *   - A recessive grid; one that competes with the data is drawn too dark.\n *\n * Everything is plain SVG with explicit geometry: no measurement, no effects,\n * no state, so `renderToStaticMarkup` produces the finished chart.\n */\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { CHART_FONT_SIZE, CHART_INK } from \"./chart-palette\";\nimport { ChartLegend, type ChartLegendItem } from \"./ChartLegend\";\nimport { px } from \"./chart-scale\";\n\nconst FRAME_STYLE: CSSProperties = {\n  display: \"block\",\n  maxWidth: \"100%\",\n  height: \"auto\",\n  overflow: \"visible\",\n  fontVariantNumeric: \"tabular-nums\",\n};\n\nexport function ChartFrame({\n  width,\n  height,\n  label,\n  title,\n  className,\n  children,\n}: {\n  width: number;\n  height: number;\n  label: string;\n  title?: string;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <svg\n      aria-label={label}\n      className={className}\n      fontSize={CHART_FONT_SIZE}\n      height={height}\n      role=\"img\"\n      style={FRAME_STYLE}\n      viewBox={`0 0 ${width} ${height}`}\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {title !== undefined && <title>{title}</title>}\n      {children}\n    </svg>\n  );\n}\n\n/** An empty chart says so, at the size the chart would have had. */\nexport function ChartEmpty({ width, height, className }: { width: number; height: number; className?: string | undefined }) {\n  return (\n    <ChartFrame className={className} height={height} label=\"No data\" width={width}>\n      <rect\n        fill=\"none\"\n        height={Math.max(0, height - 2)}\n        rx={4}\n        stroke={CHART_INK.grid}\n        strokeDasharray=\"4 3\"\n        width={Math.max(0, width - 2)}\n        x={1}\n        y={1}\n      />\n      <text\n        dominantBaseline=\"central\"\n        fill={CHART_INK.axis}\n        fontSize={Math.min(CHART_FONT_SIZE, height * 0.6)}\n        textAnchor=\"middle\"\n        x={width / 2}\n        y={height / 2}\n      >\n        No data\n      </text>\n    </ChartFrame>\n  );\n}\n\n/**\n * One bar. `base` is where the bar is anchored (x for horizontal, the baseline\n * y for vertical), `cross` the start of its thickness, and `length` grows away\n * from the base (rightward, or upward).\n */\nexport function BarMark({\n  orientation,\n  base,\n  cross,\n  length,\n  thickness,\n  fill,\n  rounded,\n}: {\n  orientation: \"horizontal\" | \"vertical\";\n  base: number;\n  cross: number;\n  length: number;\n  thickness: number;\n  fill: string;\n  rounded: boolean;\n}) {\n  if (length <= 0) return null;\n  const radius = rounded ? px(Math.min(4, thickness / 2)) : 0;\n  const square = px(Math.min(radius, length));\n  const horizontal = orientation === \"horizontal\";\n  const body = horizontal\n    ? { x: px(base), y: px(cross), width: px(length), height: px(thickness) }\n    : { x: px(cross), y: px(base - length), width: px(thickness), height: px(length) };\n  return (\n    <>\n      <rect data-mark=\"bar\" fill={fill} rx={radius || undefined} {...body} />\n      {square > 0 && (\n        <rect\n          fill={fill}\n          {...(horizontal\n            ? { x: body.x, y: body.y, width: square, height: body.height }\n            : { x: body.x, y: px(base - square), width: body.width, height: square })}\n        />\n      )}\n    </>\n  );\n}\n\n/** Wraps a chart with its legend below it when `show` is set. */\nexport function WithLegend({\n  show,\n  items,\n  width,\n  className,\n  children,\n}: {\n  show: boolean;\n  items: ChartLegendItem[];\n  width: number;\n  className?: string | undefined;\n  children: (svgClassName: string | undefined) => ReactNode;\n}) {\n  if (!show) return <>{children(className)}</>;\n  return (\n    <div className={className} style={{ width, maxWidth: \"100%\" }}>\n      {children(undefined)}\n      <ChartLegend items={items} style={{ marginTop: 6 }} />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/charts/chart-marks.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ChartLegendItem } from './ChartLegend.js';
+export declare function ChartFrame({ width, height, label, title, className, children, }: {
+    width: number;
+    height: number;
+    label: string;
+    title?: string;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** An empty chart says so, at the size the chart would have had. */
+export declare function ChartEmpty({ width, height, className }: {
+    width: number;
+    height: number;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * One bar. `base` is where the bar is anchored (x for horizontal, the baseline
+ * y for vertical), `cross` the start of its thickness, and `length` grows away
+ * from the base (rightward, or upward).
+ */
+export declare function BarMark({ orientation, base, cross, length, thickness, fill, rounded, }: {
+    orientation: "horizontal" | "vertical";
+    base: number;
+    cross: number;
+    length: number;
+    thickness: number;
+    fill: string;
+    rounded: boolean;
+}): import("react").JSX.Element | null;
+/** Wraps a chart with its legend below it when `show` is set. */
+export declare function WithLegend({ show, items, width, className, children, }: {
+    show: boolean;
+    items: ChartLegendItem[];
+    width: number;
+    className?: string | undefined;
+    children: (svgClassName: string | undefined) => ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=chart-marks.d.ts.map

package/dist/data/charts/chart-marks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-marks.d.ts","sourceRoot":"","sources":["../../../src/data/charts/chart-marks.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAWlE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAiBA;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,+BAyBzH;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE;IACD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB,sCAqBA;AAED,iEAAiE;AACjE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,SAAS,CAAC;CAC3D,+BAQA"}