@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/range-chart/range-chart.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"RangeChartProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"RangeChartProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "animate", "refers": [], "required": false, "says": "Whether the marks animate in, which they do only outside reduced motion."}, {"accepts": "readonly Annotation[]", "fallback": "", "kind": "option", "name": "annotations", "refers": ["kit.Annotation", "kit.ChartColor"], "required": false, "says": "Marks pinned to the data, a moment, a period or a point each, which the tooltip lists at their category. None unless stated."}, {"accepts": "RangeBand", "fallback": "", "kind": "option", "name": "band", "refers": ["kit.ChartColor", "kit.RangeBand", "react.ReactElement", "react.ReactPortal"], "required": true, "says": "Band between two fields of each row, such as the low and high ends of a forecast."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "caption", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Finding the chart shows, in words, which names the figure."}, {"accepts": "Extract<keyof Row, string>", "fallback": "", "kind": "option", "name": "categoryKey", "refers": [], "required": true, "says": "Field of each row the category axis reads, such as a day or a plan."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Recharts elements rendered inside the chart after the marks, such as a `ReferenceLine`."}, {"accepts": "Curve", "fallback": "", "kind": "option", "name": "curve", "refers": ["kit.Curve"], "required": false, "says": "Path of each line and of the band's edges between two points. Smoothed through them unless stated."}, {"accepts": "Row[]", "fallback": "", "kind": "option", "name": "data", "refers": ["kit.Row"], "required": true, "says": "Rows the chart plots, in order. The array passes to recharts as it is."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "defaultHiddenKeys", "refers": [], "required": false, "says": "Keys of the series hidden when the chart first renders, for the uncontrolled case."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "defaultIndex", "refers": [], "required": false, "says": "Index in `data` of the row the tooltip shows when the chart first renders, until the pointer or a key moves it. No tooltip shows at first unless stated."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "empty", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Message the chart renders in the plot's place while it has no rows."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "grid", "refers": [], "required": false, "says": "Whether lines cross the plot at the value ticks."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "hiddenKeys", "refers": [], "required": false, "says": "Keys of the series the legend hides, where the caller controls them."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name of the chart's keyboard layer, such as \"Revenue per day\"."}, {"accepts": "DateTimeFormatOptions", "fallback": "", "kind": "option", "name": "labelOptions", "refers": [], "required": false, "says": "`Intl.DateTimeFormat` options the category ticks and the tooltip's heading are written with, for a time axis. The category as it is unless stated."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "legend", "refers": [], "required": false, "says": "Whether the legend renders below the plot. It renders while two or more series have rows unless stated."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "legendLabel", "refers": [], "required": false, "says": "Accessible name of the legend's group of buttons."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "locale", "refers": [], "required": false, "says": "Locale the values are written in. The locale in scope unless stated."}, {"accepts": "((hidden: readonly string[]) => void)", "fallback": "", "kind": "option", "name": "onHiddenKeysChange", "refers": [], "required": false, "says": "Called with every key hidden after a press in the legend."}, {"accepts": "\"golden\" | \"landscape\" | \"portrait\" | \"rows\" | \"square\" | \"ultrawide\" | \"video\" | \"wide\"", "fallback": "", "kind": "variant", "name": "ratio", "refers": [], "required": false, "says": "Aspect ratio of the plot and of the empty state in its place, one of the theme's ratios, or `rows` for a plot as tall as its rows."}, {"accepts": "readonly CartesianSeries[]", "fallback": "", "kind": "option", "name": "series", "refers": ["kit.CartesianSeries", "kit.ChartColor", "react.ReactElement", "react.ReactPortal"], "required": false, "says": "Series plotted as lines over the band, such as the estimate or the actual value."}, {"accepts": "AxisDomain", "fallback": "", "kind": "option", "name": "valueDomain", "refers": ["recharts.AxisDomain", "recharts.AxisDomainItem", "recharts.NumberDomain"], "required": false, "says": "Domain of the value axis in recharts' terms, such as `[0, 100]`. From zero unless stated."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "valueOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the value ticks and the tooltip's values are written with."}]};
+export const shapes = {"kit.RangeBand": [{"accepts": "string", "name": "high", "says": "Field of each row the band's upper edge reads."}, {"accepts": "string", "name": "low", "says": "Field of each row the band's lower edge reads."}, {"accepts": "ChartColor", "name": "color", "says": "Palette the series takes its color from. The theme's series color at its position unless stated."}, {"accepts": "number", "name": "ink", "says": "Share of the ink, `fg`, in percent, the series' color mixes in: 0 keeps the color, 100 is the ink. The mix keeps 3:1 or more against the page. None unless stated."}, {"accepts": "string", "name": "key", "says": "Field of each row the series reads, which a recharts mark takes as its `dataKey`."}, {"accepts": "ReactNode", "name": "label", "says": "Name the tooltip and the legend show. The key unless stated."}], "kit.ChartColor": [{"accepts": "", "name": "\"accent\"", "says": ""}, {"accepts": "", "name": "\"blue\"", "says": ""}, {"accepts": "", "name": "\"cyan\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"gray\"", "says": ""}, {"accepts": "", "name": "\"green\"", "says": ""}, {"accepts": "", "name": "\"indigo\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"orange\"", "says": ""}, {"accepts": "", "name": "\"pink\"", "says": ""}, {"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"purple\"", "says": ""}, {"accepts": "", "name": "\"red\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"series.1\"", "says": ""}, {"accepts": "", "name": "\"series.2\"", "says": ""}, {"accepts": "", "name": "\"series.3\"", "says": ""}, {"accepts": "", "name": "\"series.4\"", "says": ""}, {"accepts": "", "name": "\"series.5\"", "says": ""}, {"accepts": "", "name": "\"series.6\"", "says": ""}, {"accepts": "", "name": "\"series.7\"", "says": ""}, {"accepts": "", "name": "\"series.8\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"teal\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}, {"accepts": "", "name": "\"yellow\"", "says": ""}], "react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.Curve": [{"accepts": "", "name": "\"linear\"", "says": ""}, {"accepts": "", "name": "\"monotone\"", "says": ""}], "kit.CartesianSeries": [{"accepts": "ChartColor", "name": "color", "says": "Palette the series takes its color from. The theme's series color at its position unless stated."}, {"accepts": "boolean", "name": "dashed", "says": "Whether the series' line renders dashed, as a target or a projection does. A series with `previousOf` renders dashed unless stated."}, {"accepts": "string", "name": "previousOf", "says": "Key of the series this series is the earlier period of, such as last week's revenue for this week's. The series takes the neutral palette unless it states a color, and the tooltip writes the change from it after the other series' value."}, {"accepts": "number", "name": "ink", "says": "Share of the ink, `fg`, in percent, the series' color mixes in: 0 keeps the color, 100 is the ink. The mix keeps 3:1 or more against the page. None unless stated."}, {"accepts": "string", "name": "key", "says": "Field of each row the series reads, which a recharts mark takes as its `dataKey`."}, {"accepts": "ReactNode", "name": "label", "says": "Name the tooltip and the legend show. The key unless stated."}], "kit.Annotation": [{"accepts": "string | number", "name": "at", "says": "Category the mark is at, or the category its period starts at."}, {"accepts": "ChartColor", "name": "color", "says": "Palette of the mark, such as `warning` for a flagged point. The neutral palette unless stated."}, {"accepts": "string", "name": "key", "says": "Identity of the mark, unique among the chart's annotations."}, {"accepts": "string", "name": "label", "says": "Words for the mark, written on the plot and in the tooltip at its category."}, {"accepts": "string | number", "name": "until", "says": "Category the mark's period ends at, which makes the mark a period."}, {"accepts": "number", "name": "value", "says": "Value of the point the mark rings, which makes the mark a point."}], "recharts.AxisDomain": [{"accepts": "", "name": "readonly string[]", "says": ""}, {"accepts": "", "name": "readonly number[]", "says": ""}, {"accepts": "", "name": "([dataMin, dataMax]: NumberDomain, allowDataOverflow: boolean) => NumberDomain", "says": ""}, {"accepts": "", "name": "readonly [AxisDomainItem, AxisDomainItem]", "says": ""}], "recharts.AxisDomainItem": [{"accepts": "", "name": "string", "says": ""}, {"accepts": "", "name": "number", "says": ""}, {"accepts": "", "name": "(d: number) => string | number", "says": ""}]};

package/dist/pages/regression-overlay/regression-overlay.js

@@ -0,0 +1,494 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { S as linearRegression, ft as ScatterPlot, x as RegressionOverlay } from "../../shared-DVZJ2nST.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+//#region src/regression-overlay/examples/channels.example.tsx
+var channels_example_exports = /* @__PURE__ */ __exportAll({
+	Channels: () => Channels,
+	source: () => source$2
+});
+const ONLINE = [
+	[9, 520],
+	[12, 470],
+	[15, 430],
+	[18, 395],
+	[22, 330],
+	[26, 300],
+	[30, 250],
+	[34, 215],
+	[38, 180]
+].map(([price = 0, units = 0]) => ({
+	price,
+	units
+}));
+const STORE = [
+	[10, 260],
+	[13, 255],
+	[17, 240],
+	[20, 236],
+	[24, 220],
+	[28, 214],
+	[32, 200],
+	[36, 195],
+	[40, 182]
+].map(([price = 0, units = 0]) => ({
+	price,
+	units
+}));
+function Channels() {
+	const $ = c(33);
+	const { i18n, t } = useWords("regression-overlay");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = linearRegression(ONLINE, "price", "units");
+		$[0] = t0;
+	} else t0 = $[0];
+	const online = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = linearRegression(STORE, "price", "units");
+		$[1] = t1;
+	} else t1 = $[1];
+	const store = t1;
+	let T0;
+	let t2;
+	if ($[2] !== i18n.language || $[3] !== t) {
+		const number = new Intl.NumberFormat(i18n.language, { maximumFractionDigits: 0 });
+		T0 = ScatterPlot;
+		t2 = t("channels.caption", {
+			online: number.format(-(online?.slope ?? 0)),
+			store: number.format(-(store?.slope ?? 0))
+		});
+		$[2] = i18n.language;
+		$[3] = t;
+		$[4] = T0;
+		$[5] = t2;
+	} else {
+		T0 = $[4];
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("channels.label");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("channels.online");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = {
+			key: "online",
+			label: t4,
+			points: ONLINE
+		};
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("channels.store");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t6) {
+		t7 = {
+			key: "store",
+			label: t6,
+			points: STORE
+		};
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t5 || $[17] !== t7) {
+		t8 = [t5, t7];
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = t("channels.price");
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = {
+			currency: "EUR",
+			maximumFractionDigits: 0,
+			style: "currency"
+		};
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t) {
+		t11 = t("channels.units");
+		$[22] = t;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	let t13;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(RegressionOverlay, {
+			data: ONLINE,
+			series: "online",
+			xKey: "price",
+			yKey: "units"
+		});
+		t13 = /* @__PURE__ */ jsx(RegressionOverlay, {
+			data: STORE,
+			series: "store",
+			xKey: "price",
+			yKey: "units"
+		});
+		$[24] = t12;
+		$[25] = t13;
+	} else {
+		t12 = $[24];
+		t13 = $[25];
+	}
+	let t14;
+	if ($[26] !== T0 || $[27] !== t11 || $[28] !== t2 || $[29] !== t3 || $[30] !== t8 || $[31] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(T0, {
+			caption: t2,
+			label: t3,
+			series: t8,
+			xKey: "price",
+			xLabel: t9,
+			xOptions: t10,
+			yKey: "units",
+			yLabel: t11,
+			children: [t12, t13]
+		});
+		$[26] = T0;
+		$[27] = t11;
+		$[28] = t2;
+		$[29] = t3;
+		$[30] = t8;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	return t14;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RegressionOverlay, ScatterPlot, linearRegression } from \"@stealthscale/component-charts\";\n\nconst ONLINE = [\n  [9, 520],\n  [12, 470],\n  [15, 430],\n  [18, 395],\n  [22, 330],\n  [26, 300],\n  [30, 250],\n  [34, 215],\n  [38, 180],\n].map(([price = 0, units = 0]) => ({ price, units }));\n\nconst STORE = [\n  [10, 260],\n  [13, 255],\n  [17, 240],\n  [20, 236],\n  [24, 220],\n  [28, 214],\n  [32, 200],\n  [36, 195],\n  [40, 182],\n].map(([price = 0, units = 0]) => ({ price, units }));\n\nexport function Channels(): ReactElement {\n  const { i18n, t } = useWords(\"regression-overlay\");\n  const online = linearRegression(ONLINE, \"price\", \"units\");\n  const store = linearRegression(STORE, \"price\", \"units\");\n  const number = new Intl.NumberFormat(i18n.language, { maximumFractionDigits: 0 });\n\n  return (\n    <ScatterPlot\n      caption={t(\"channels.caption\", {\n        online: number.format(-(online?.slope ?? 0)),\n        store: number.format(-(store?.slope ?? 0)),\n      })}\n      label={t(\"channels.label\")}\n      series={[\n        { key: \"online\", label: t(\"channels.online\"), points: ONLINE },\n        { key: \"store\", label: t(\"channels.store\"), points: STORE },\n      ]}\n      xKey=\"price\"\n      xLabel={t(\"channels.price\")}\n      xOptions={{ currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" }}\n      yKey=\"units\"\n      yLabel={t(\"channels.units\")}\n    >\n      <RegressionOverlay data={ONLINE} series=\"online\" xKey=\"price\" yKey=\"units\" />\n      <RegressionOverlay data={STORE} series=\"store\" xKey=\"price\" yKey=\"units\" />\n    </ScatterPlot>\n  );\n}\n";
+//#endregion
+//#region src/regression-overlay/examples/fit.example.tsx
+var fit_example_exports = /* @__PURE__ */ __exportAll({
+	Fit: () => Fit,
+	source: () => source$1
+});
+const PRODUCTS = [
+	[9, 410],
+	[12, 388],
+	[14, 352],
+	[15, 371],
+	[18, 318],
+	[20, 290],
+	[22, 301],
+	[25, 262],
+	[27, 240],
+	[30, 228],
+	[32, 199],
+	[35, 187],
+	[38, 170],
+	[40, 152]
+].map(([price = 0, units = 0]) => ({
+	price,
+	units
+}));
+function Fit() {
+	const $ = c(23);
+	const { i18n, t } = useWords("regression-overlay");
+	let T0;
+	let t0;
+	if ($[0] !== i18n.language || $[1] !== t) {
+		const fit = linearRegression(PRODUCTS, "price", "units");
+		const number = new Intl.NumberFormat(i18n.language, { maximumFractionDigits: 2 });
+		T0 = ScatterPlot;
+		t0 = t("fit.caption", {
+			r2: number.format(fit?.r2 ?? 0),
+			units: number.format(Math.round(-(fit?.slope ?? 0)))
+		});
+		$[0] = i18n.language;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = t0;
+	} else {
+		T0 = $[2];
+		t0 = $[3];
+	}
+	let t1;
+	if ($[4] !== t) {
+		t1 = t("fit.label");
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t) {
+		t2 = t("fit.products");
+		$[6] = t;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t2) {
+		t3 = [{
+			key: "products",
+			label: t2,
+			points: PRODUCTS
+		}];
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t) {
+		t4 = t("fit.price");
+		$[10] = t;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			currency: "EUR",
+			maximumFractionDigits: 0,
+			style: "currency"
+		};
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("fit.units");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(RegressionOverlay, {
+			data: PRODUCTS,
+			xKey: "price",
+			yKey: "units"
+		});
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== T0 || $[17] !== t0 || $[18] !== t1 || $[19] !== t3 || $[20] !== t4 || $[21] !== t6) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			label: t1,
+			series: t3,
+			xKey: "price",
+			xLabel: t4,
+			xOptions: t5,
+			yKey: "units",
+			yLabel: t6,
+			children: t7
+		});
+		$[16] = T0;
+		$[17] = t0;
+		$[18] = t1;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t6;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RegressionOverlay, ScatterPlot, linearRegression } from \"@stealthscale/component-charts\";\n\nconst PRODUCTS = [\n  [9, 410],\n  [12, 388],\n  [14, 352],\n  [15, 371],\n  [18, 318],\n  [20, 290],\n  [22, 301],\n  [25, 262],\n  [27, 240],\n  [30, 228],\n  [32, 199],\n  [35, 187],\n  [38, 170],\n  [40, 152],\n].map(([price = 0, units = 0]) => ({ price, units }));\n\nexport function Fit(): ReactElement {\n  const { i18n, t } = useWords(\"regression-overlay\");\n  const fit = linearRegression(PRODUCTS, \"price\", \"units\");\n  const number = new Intl.NumberFormat(i18n.language, { maximumFractionDigits: 2 });\n\n  return (\n    <ScatterPlot\n      caption={t(\"fit.caption\", {\n        r2: number.format(fit?.r2 ?? 0),\n        units: number.format(Math.round(-(fit?.slope ?? 0))),\n      })}\n      label={t(\"fit.label\")}\n      series={[{ key: \"products\", label: t(\"fit.products\"), points: PRODUCTS }]}\n      xKey=\"price\"\n      xLabel={t(\"fit.price\")}\n      xOptions={{ currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" }}\n      yKey=\"units\"\n      yLabel={t(\"fit.units\")}\n    >\n      <RegressionOverlay data={PRODUCTS} xKey=\"price\" yKey=\"units\" />\n    </ScatterPlot>\n  );\n}\n";
+//#endregion
+//#region src/regression-overlay/examples/weak.example.tsx
+var weak_example_exports = /* @__PURE__ */ __exportAll({
+	Weak: () => Weak,
+	source: () => source
+});
+const TEAMS = [
+	[3, 9],
+	[4, 12],
+	[5, 8],
+	[5, 14],
+	[6, 10],
+	[7, 15],
+	[7, 9],
+	[8, 13],
+	[9, 16],
+	[10, 11],
+	[11, 17],
+	[12, 10],
+	[13, 15],
+	[14, 12],
+	[15, 18],
+	[16, 11]
+].map(([people = 0, deploys = 0]) => ({
+	deploys,
+	people
+}));
+function Weak() {
+	const $ = c(25);
+	const { i18n, t } = useWords("regression-overlay");
+	let T0;
+	let fit;
+	let t0;
+	if ($[0] !== i18n.language || $[1] !== t) {
+		fit = linearRegression(TEAMS, "people", "deploys");
+		const share = new Intl.NumberFormat(i18n.language, { style: "percent" });
+		T0 = ScatterPlot;
+		t0 = t("weak.caption", { share: share.format(fit?.r2 ?? 0) });
+		$[0] = i18n.language;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = fit;
+		$[4] = t0;
+	} else {
+		T0 = $[2];
+		fit = $[3];
+		t0 = $[4];
+	}
+	let t1;
+	if ($[5] !== t) {
+		t1 = t("weak.label");
+		$[5] = t;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== t) {
+		t2 = t("weak.teams");
+		$[7] = t;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t2) {
+		t3 = [{
+			key: "teams",
+			label: t2,
+			points: TEAMS
+		}];
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t) {
+		t4 = t("weak.people");
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t) {
+		t5 = t("weak.deploys");
+		$[13] = t;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== fit) {
+		t6 = fit !== void 0 && fit.r2 >= .5 ? /* @__PURE__ */ jsx(RegressionOverlay, {
+			data: TEAMS,
+			xKey: "people",
+			yKey: "deploys"
+		}) : null;
+		$[15] = fit;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== T0 || $[18] !== t0 || $[19] !== t1 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			label: t1,
+			series: t3,
+			xKey: "people",
+			xLabel: t4,
+			yKey: "deploys",
+			yLabel: t5,
+			children: t6
+		});
+		$[17] = T0;
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RegressionOverlay, ScatterPlot, linearRegression } from \"@stealthscale/component-charts\";\n\nconst TEAMS = [\n  [3, 9],\n  [4, 12],\n  [5, 8],\n  [5, 14],\n  [6, 10],\n  [7, 15],\n  [7, 9],\n  [8, 13],\n  [9, 16],\n  [10, 11],\n  [11, 17],\n  [12, 10],\n  [13, 15],\n  [14, 12],\n  [15, 18],\n  [16, 11],\n].map(([people = 0, deploys = 0]) => ({ deploys, people }));\n\nexport function Weak(): ReactElement {\n  const { i18n, t } = useWords(\"regression-overlay\");\n  const fit = linearRegression(TEAMS, \"people\", \"deploys\");\n  const share = new Intl.NumberFormat(i18n.language, { style: \"percent\" });\n\n  return (\n    <ScatterPlot\n      caption={t(\"weak.caption\", { share: share.format(fit?.r2 ?? 0) })}\n      label={t(\"weak.label\")}\n      series={[{ key: \"teams\", label: t(\"weak.teams\"), points: TEAMS }]}\n      xKey=\"people\"\n      xLabel={t(\"weak.people\")}\n      yKey=\"deploys\"\n      yLabel={t(\"weak.deploys\")}\n    >\n      {fit !== undefined && fit.r2 >= 0.5 ? (\n        <RegressionOverlay data={TEAMS} xKey=\"people\" yKey=\"deploys\" />\n      ) : null}\n    </ScatterPlot>\n  );\n}\n";
+//#endregion
+//#region src/regression-overlay/regression-overlay.specimen.tsx
+/**
+* Catalogue page for the trend line across a scatter.
+*
+* @remarks
+*   The trend line has no recipe of its own: it is a recharts child the chart's recipe styles, so
+*   every scene is hand-written. The scenes render a strong fit with its r² in the caption, a line
+*   per series that follows the legend, a weak fit the page leaves without a line, and the strong
+*   fit at a phone's width. Every scene renders a component from `examples/` and shows that file as
+*   its source. The words are keys under `regression-overlay` in
+*   `locales/en/specimen/regression-overlay.json`.
+*/
+/**
+* Hand-written scene for a strong fit.
+*/
+const strong = {
+	about: "regression-overlay.fit.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Fit, {})
+	}),
+	example: fit_example_exports,
+	title: "regression-overlay.fit.title"
+};
+/**
+* Hand-written scene for a trend line per series.
+*/
+const perSeries = {
+	about: "regression-overlay.channels.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Channels, {})
+	}),
+	example: channels_example_exports,
+	title: "regression-overlay.channels.title"
+};
+/**
+* Hand-written scene for a weak fit without a line.
+*/
+const loose = {
+	about: "regression-overlay.weak.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Weak, {})
+	}),
+	example: weak_example_exports,
+	title: "regression-overlay.weak.title"
+};
+/**
+* Hand-written scene for the strong fit at a phone's width.
+*/
+const narrow = {
+	about: "regression-overlay.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Fit, {})
+	}),
+	example: fit_example_exports,
+	title: "regression-overlay.narrow.title"
+};
+var regression_overlay_specimen_default = specimen({
+	about: "regression-overlay.about",
+	id: "components/charts/regression-overlay",
+	imports: "import { linearRegression, RegressionOverlay } from \"@stealthscale/component-charts\";",
+	scenes: [
+		strong,
+		perSeries,
+		loose,
+		narrow
+	],
+	title: "regression-overlay.title"
+});
+//#endregion
+export { regression_overlay_specimen_default as default, loose, narrow, perSeries, strong };

package/dist/pages/regression-overlay/regression-overlay.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"RegressionOverlayProps": {"conditions": 0, "foreign": 0}, "ScatterPlotProps": {"conditions": 284, "foreign": 1039}};
+export const parts = {"RegressionOverlayProps": [{"accepts": "readonly Point[]", "fallback": "", "kind": "option", "name": "data", "refers": ["kit.Point"], "required": true, "says": "Points to fit, the same points a scatter's series renders."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "series", "refers": [], "required": false, "says": "Key of the series the line summarises, whose color the line takes and whose legend state it follows. The line takes the neutral palette's chart color and ignores the legend unless stated."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "xKey", "refers": [], "required": true, "says": "Field each point's x is read from."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "yKey", "refers": [], "required": true, "says": "Field each point's y is read from."}], "ScatterPlotProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "animate", "refers": [], "required": false, "says": "Whether the points animate in, which they do only outside reduced motion."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "caption", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Finding the chart shows, in words, which names the figure."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Recharts elements rendered inside the chart after the points, such as a `RegressionOverlay`."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "defaultHiddenKeys", "refers": [], "required": false, "says": "Keys of the series hidden when the chart first renders, for the uncontrolled case."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "defaultIndex", "refers": [], "required": false, "says": "Index in the first series' points of the point the tooltip shows when the chart first renders. No tooltip shows at first unless stated."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "empty", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Message the chart renders in the plot's place while no series has a point."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "grid", "refers": [], "required": false, "says": "Whether lines cross the plot at the ticks of both axes."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "hiddenKeys", "refers": [], "required": false, "says": "Keys of the series the legend hides, where the caller controls them."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name of the chart's keyboard layer, such as \"Deal size by sales cycle\"."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "labelKey", "refers": [], "required": false, "says": "Field of each point whose words are written beside it and head its tooltip, such as a vendor's name."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "legend", "refers": [], "required": false, "says": "Whether the legend renders below the plot. It renders while two or more series have points unless stated."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "legendLabel", "refers": [], "required": false, "says": "Accessible name of the legend's group of buttons."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "locale", "refers": [], "required": false, "says": "Locale the values are written in. The locale in scope unless stated."}, {"accepts": "((hidden: readonly string[]) => void)", "fallback": "", "kind": "option", "name": "onHiddenKeysChange", "refers": [], "required": false, "says": "Called with every key hidden after a press in the legend."}, {"accepts": "Quadrants", "fallback": "", "kind": "option", "name": "quadrants", "refers": ["kit.Quadrants"], "required": false, "says": "Quadrants the plot divides into: two dashed lines, the name of each quadrant in its corner, and the quadrant of each point after its name in the tooltip."}, {"accepts": "\"golden\" | \"landscape\" | \"portrait\" | \"rows\" | \"square\" | \"ultrawide\" | \"video\" | \"wide\"", "fallback": "", "kind": "variant", "name": "ratio", "refers": [], "required": false, "says": "Aspect ratio of the plot and of the empty state in its place, one of the theme's ratios, or `rows` for a plot as tall as its rows."}, {"accepts": "readonly ScatterSeries<Point>[]", "fallback": "", "kind": "option", "name": "series", "refers": ["kit.ChartColor", "kit.Point", "kit.ScatterSeries", "react.ReactElement", "react.ReactPortal"], "required": true, "says": "Series the chart plots, in the order the legend lists them."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "size", "refers": [], "required": false, "says": "Area of every point in square pixels, while no field sizes the points."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "sizeKey", "refers": [], "required": false, "says": "Field of each point its area reads, for a bubble chart."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "sizeLabel", "refers": [], "required": false, "says": "Name of the size's field, which the tooltip writes beside the value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "sizeOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the tooltip writes the size with."}, {"accepts": "readonly [number, number]", "fallback": "", "kind": "option", "name": "sizeRange", "refers": [], "required": false, "says": "Smallest and largest area of a sized point, in square pixels."}, {"accepts": "AxisDomain", "fallback": "", "kind": "option", "name": "xDomain", "refers": ["recharts.AxisDomain", "recharts.AxisDomainItem", "recharts.NumberDomain"], "required": false, "says": "Domain of the x axis in recharts' terms. Recharts' rounded domain unless stated."}, {"accepts": "readonly [string, string]", "fallback": "", "kind": "option", "name": "xEnds", "refers": [], "required": false, "says": "Words for the x axis' two ends, the low end's first, such as \"Rare\" and \"Certain\", written in place of its ticks. The axis then spans `xDomain`, 0 to 1 unless it states two numbers."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "xKey", "refers": [], "required": true, "says": "Field of each point the x axis reads."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "xLabel", "refers": [], "required": true, "says": "Title of the x axis, which the tooltip repeats beside the x value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "xOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the x ticks and the tooltip's x value are written with."}, {"accepts": "AxisDomain", "fallback": "", "kind": "option", "name": "yDomain", "refers": ["recharts.AxisDomain", "recharts.AxisDomainItem", "recharts.NumberDomain"], "required": false, "says": "Domain of the y axis in recharts' terms. Recharts' rounded domain unless stated."}, {"accepts": "readonly [string, string]", "fallback": "", "kind": "option", "name": "yEnds", "refers": [], "required": false, "says": "Words for the y axis' two ends, the low end's first, written in place of its ticks. The axis then spans `yDomain`, 0 to 1 unless it states two numbers."}, {"accepts": "Extract<keyof Point, string>", "fallback": "", "kind": "option", "name": "yKey", "refers": [], "required": true, "says": "Field of each point the y axis reads."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "yLabel", "refers": [], "required": true, "says": "Title of the y axis, which the tooltip repeats beside the y value."}, {"accepts": "NumberFormatOptions", "fallback": "", "kind": "option", "name": "yOptions", "refers": [], "required": false, "says": "`Intl.NumberFormat` options the y ticks and the tooltip's y value are written with."}]};
+export const shapes = {"react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.Quadrants": [{"accepts": "Readonly<Record<QuadrantId, string>>", "name": "names", "says": "Name of each quadrant, keyed by the reading direction."}, {"accepts": "number", "name": "x", "says": "Value on the x axis the quadrants divide at. The middle of the x axis' span unless stated: its domain's two numbers, 0 to 1 for an axis with named ends, else the points' x values."}, {"accepts": "number", "name": "y", "says": "Value on the y axis the quadrants divide at. The middle of the y axis' span unless stated."}], "kit.ScatterSeries": [{"accepts": "readonly Point[]", "name": "points", "says": "Points of the series, each with its own x and y."}, {"accepts": "ChartColor", "name": "color", "says": "Palette the series takes its color from. The theme's series color at its position unless stated."}, {"accepts": "number", "name": "ink", "says": "Share of the ink, `fg`, in percent, the series' color mixes in: 0 keeps the color, 100 is the ink. The mix keeps 3:1 or more against the page. None unless stated."}, {"accepts": "string", "name": "key", "says": "Field of each row the series reads, which a recharts mark takes as its `dataKey`."}, {"accepts": "ReactNode", "name": "label", "says": "Name the tooltip and the legend show. The key unless stated."}], "kit.ChartColor": [{"accepts": "", "name": "\"accent\"", "says": ""}, {"accepts": "", "name": "\"blue\"", "says": ""}, {"accepts": "", "name": "\"cyan\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"gray\"", "says": ""}, {"accepts": "", "name": "\"green\"", "says": ""}, {"accepts": "", "name": "\"indigo\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"orange\"", "says": ""}, {"accepts": "", "name": "\"pink\"", "says": ""}, {"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"purple\"", "says": ""}, {"accepts": "", "name": "\"red\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"series.1\"", "says": ""}, {"accepts": "", "name": "\"series.2\"", "says": ""}, {"accepts": "", "name": "\"series.3\"", "says": ""}, {"accepts": "", "name": "\"series.4\"", "says": ""}, {"accepts": "", "name": "\"series.5\"", "says": ""}, {"accepts": "", "name": "\"series.6\"", "says": ""}, {"accepts": "", "name": "\"series.7\"", "says": ""}, {"accepts": "", "name": "\"series.8\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"teal\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}, {"accepts": "", "name": "\"yellow\"", "says": ""}], "recharts.AxisDomain": [{"accepts": "", "name": "readonly string[]", "says": ""}, {"accepts": "", "name": "readonly number[]", "says": ""}, {"accepts": "", "name": "([dataMin, dataMax]: NumberDomain, allowDataOverflow: boolean) => NumberDomain", "says": ""}, {"accepts": "", "name": "readonly [AxisDomainItem, AxisDomainItem]", "says": ""}], "recharts.AxisDomainItem": [{"accepts": "", "name": "string", "says": ""}, {"accepts": "", "name": "number", "says": ""}, {"accepts": "", "name": "(d: number) => string | number", "says": ""}]};