@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/lupi/launch-fan.js

@@ -0,0 +1,198 @@
+"use client";
+import { fmtDay as e, fmtMonth as t, monthTickLabels as n } from "../../lib/format.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { noteOf as a, noteSpace as o, sansWidth as s, stagger as c } from "../util.js";
+import { DimGroup as l, HitCircle as u, TipText as d } from "../hover.js";
+import { FootNote as f } from "../plot-note.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { PixelLine as h } from "../texture.js";
+import { argMax as g } from "./util-b.js";
+import { arrivalWeekDate as _, launchFanDemo as v } from "./launch-fan.data.js";
+import { arcPath as y, clock as b } from "./util-a.js";
+import { useState as x } from "react";
+import { scaleSqrt as S } from "d3-scale";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/charts/lupi/launch-fan.tsx
+var T = (e) => 10 + s(e.name, 10.4), E = (e, t, n, r, i, a) => {
+	let o = (e) => n.length === 1 ? 43 : 4 + 78 * e / (n.length - 1), c = Math.max(58, ...n.map((e, t) => 16 + s(e.name, 12) * Math.cos(o(t) * Math.PI / 180))), l = i + 2, u = (e, t) => {
+		let r = o(t) * Math.PI / 180;
+		return (e + T(n[t])) * Math.sin(r) + 7 * Math.cos(r);
+	}, d = Math.min(...n.map((t, n) => {
+		let r = o(n) * Math.PI / 180;
+		return (e - l - 7 * Math.cos(r)) / Math.sin(r) - T(t);
+	})), f = Math.max(150, Math.min((t - c - 6 - a) / .96, d)), p = Math.max(...n.map((e, t) => u(f, t))), m = f * .2, h = S().domain([0, Math.max(...n.map((e) => e.size))]).range([0, Math.min(11, f / 30)]), g = Math.max(1, ...n.flatMap((e) => e.weekly ?? [0]));
+	return {
+		a0: 4,
+		a1: 82,
+		angle: o,
+		bottom: f * .96 + c,
+		cx: l + Math.max(0, (e - l - p) / 2),
+		cy: f + c,
+		ringR: (e) => m + (f - m) * e / r,
+		rungR: (e) => 1.5 + 3.5 * Math.sqrt(e / g),
+		sizeR: (e) => h(e)
+	};
+}, D = (e) => `${e.toFixed(2)}%`, O = (e) => e === "demo" ? 24 : e === "week" ? 20 : 24, k = (e, t) => e === "week" ? 5 : t <= 18 ? 3 : t <= 48 ? 6 : 12, A = (e, t) => {
+	let n = k(e, t);
+	return Array.from({ length: Math.floor(t / n) }, (e, t) => (t + 1) * n);
+}, j = (e) => {
+	let { a0: t, a1: n, cx: r, cy: i, ringR: a } = e.layout, { rings: o } = e;
+	return /* @__PURE__ */ C("g", { children: o.map((o, s) => {
+		let l = a(o), [u, d] = b(r, i, l, t - 4);
+		return /* @__PURE__ */ w("g", {
+			className: "fade",
+			style: c(s),
+			children: [/* @__PURE__ */ C("path", {
+				className: "grid-line shape-smooth",
+				d: y(r, i, l, t - 3, n + 2),
+				fill: "none"
+			}), /* @__PURE__ */ C(m, {
+				anchor: "end",
+				middle: !0,
+				voice: "axis",
+				x: u - 2,
+				y: d,
+				children: e.labels[s]
+			})]
+		}, `ring-${o}`);
+	}) });
+}, M = ({ datum: e, dim: t, hero: n, i: r, layout: i, onTip: a, weeks: o }) => {
+	let { angle: s, cx: d, cy: f, ringR: p, rungR: g, sizeR: _ } = i, v = s(r), y = Math.max(0, e.launch), [x, S] = b(d, f, p(y), v), [T, E] = b(d, f, p(o), v), [D, O] = b(d, f, p(o) + 10, v), k = Array.from({ length: Math.max(0, o - y) }, (e, t) => t + 1), A = Math.max(...e.weekly ?? [1]) * .3;
+	return /* @__PURE__ */ w(l, {
+		dim: t,
+		onPointerEnter: () => {
+			a({
+				i: r,
+				x,
+				y: S - _(e.size) - 4
+			});
+		},
+		children: [
+			/* @__PURE__ */ C("line", {
+				stroke: "transparent",
+				strokeWidth: 14,
+				x1: x,
+				x2: T,
+				y1: S,
+				y2: E
+			}),
+			/* @__PURE__ */ C("line", {
+				className: "draw stroke-rule",
+				pathLength: 1,
+				strokeWidth: 1,
+				style: c(r, "mark"),
+				x1: x,
+				x2: T,
+				y1: S,
+				y2: E
+			}),
+			k.map((t) => {
+				let [n, i] = b(d, f, p(y + t), v), o = g(e.weekly?.[t] ?? A), s = Math.cos(v * Math.PI / 180), l = Math.sin(v * Math.PI / 180);
+				return /* @__PURE__ */ w("g", {
+					className: "fade",
+					onPointerEnter: () => {
+						a({
+							i: r,
+							week: t,
+							x: n,
+							y: i - 6
+						});
+					},
+					style: c(r * 3 + t, "dense"),
+					children: [/* @__PURE__ */ C(u, {
+						cx: n,
+						cy: i,
+						r: 5
+					}), /* @__PURE__ */ C(h, {
+						tone: "fill-l3",
+						x0: n - s * o,
+						x1: n + s * o,
+						y0: i - l * o,
+						y1: i + l * o
+					})]
+				}, `${e.name}-w${t}`);
+			}),
+			/* @__PURE__ */ C("circle", {
+				className: `pop ${n ? "fill-hero stroke-hero" : "fill-paper stroke-l3"}`,
+				cx: x,
+				cy: S,
+				r: _(e.size),
+				strokeWidth: 1.5,
+				style: c(r, "mark")
+			}),
+			/* @__PURE__ */ C(m, {
+				middle: !0,
+				muted: !n,
+				order: r,
+				tier: "mark",
+				transform: `translate(${D},${O}) rotate(${v - 90})`,
+				voice: "label",
+				children: e.name
+			})
+		]
+	});
+}, N = {
+	month: "month",
+	week: "week"
+}, P = {
+	month: "M",
+	week: "W"
+}, F = (e) => {
+	let t = e.data === void 0, n = e.unit ?? (t ? "week" : "month");
+	return {
+		periodDate: e.periodDate ?? (t ? _ : void 0),
+		unit: n,
+		weeks: e.periods ?? e.weeks ?? O(t ? "demo" : n)
+	};
+}, I = (c) => {
+	let l = (c.data ?? v).toSorted((e, t) => e.launch - t.launch), { periodDate: u, unit: m, weeks: h } = F(c), _ = c.height ?? 460, y = c.format ?? D, b = N[m], S = m === "week" ? e : t, T = (e) => u === void 0 ? `${P[m]}${e}` : S(u(e)), O = A(m, h), k = u === void 0 ? O.map(T) : n(O.map(u)), I = Math.max(0, ...k.map((e) => s(e, 11))), [L, R] = x(null), z = c.highlight ?? l.at(g(l.map((e) => e.size)))?.name;
+	return /* @__PURE__ */ C(r, {
+		overlay: L === null ? null : /* @__PURE__ */ C(i, {
+			x: L.x,
+			y: L.y,
+			children: /* @__PURE__ */ C(d, {
+				facts: [`arrived ${T(l[L.i].launch)}`, ((e) => {
+					let t = l[e.i];
+					return e.week === void 0 ? `peak ${y(t.size)}` : `${T(t.launch + e.week)} · ${y(t.weekly?.[e.week] ?? 0)}`;
+				})(L)],
+				lead: l[L.i].name
+			})
+		}),
+		children: (e) => {
+			let t = o(a(c), e - 16, 30), n = E(e, _, l, h, I, t), r = Math.min(_, Math.round(n.bottom + 6 + t));
+			return /* @__PURE__ */ w(p, {
+				height: r,
+				label: `Arrival fan: ${l.map((e) => `${e.name} arrived ${T(e.launch)}, peak ${y(e.size)}`).join("; ")}`,
+				leave: () => {
+					R(null);
+				},
+				title: `Arrival ${b} and peak reporting of each migrant, one spoke each`,
+				width: e,
+				children: [
+					/* @__PURE__ */ C(j, {
+						labels: k,
+						layout: n,
+						rings: O
+					}),
+					l.map((e, t) => /* @__PURE__ */ C(M, {
+						datum: e,
+						dim: L !== null && L.i !== t,
+						hero: z === e.name,
+						i: t,
+						layout: n,
+						onTip: R,
+						weeks: h
+					}, e.name)),
+					/* @__PURE__ */ C(f, {
+						height: r,
+						text: a(c),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { I as LaunchFan };

package/lib/charts/lupi/matrix-heat.data.js

@@ -0,0 +1,97 @@
+"use client";
+var e = {
+	rows: [
+		"E",
+		"T",
+		"A",
+		"O",
+		"I",
+		"N",
+		"S",
+		"R"
+	],
+	values: [
+		[
+			4,
+			6,
+			7,
+			2,
+			2,
+			10,
+			13,
+			16
+		],
+		[
+			14,
+			3,
+			8,
+			12,
+			14,
+			0,
+			5,
+			5
+		],
+		[
+			0,
+			14,
+			0,
+			0,
+			3,
+			18,
+			8,
+			12
+		],
+		[
+			1,
+			6,
+			2,
+			3,
+			1,
+			18,
+			4,
+			16
+		],
+		[
+			5,
+			11,
+			4,
+			9,
+			0,
+			25,
+			10,
+			3
+		],
+		[
+			11,
+			16,
+			7,
+			7,
+			6,
+			2,
+			7,
+			1
+		],
+		[
+			14,
+			19,
+			8,
+			8,
+			10,
+			1,
+			8,
+			1
+		],
+		[
+			24,
+			7,
+			10,
+			10,
+			11,
+			3,
+			7,
+			2
+		]
+	]
+};
+//#endregion
+export { e as matrixHeatDemo };

package/lib/charts/lupi/matrix-heat.js

@@ -0,0 +1,246 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { sansWidth as n, stagger as r, sum as i } from "../util.js";
+import { TipText as a } from "../hover.js";
+import { KEY as o } from "../marks.js";
+import { ChartSvg as s } from "../svg.js";
+import { Label as c } from "../text.js";
+import { HALFTONE_R as l, TEXTURE_PITCH as u, paint as d, useTextureIds as f } from "../texture-ids.js";
+import { CrossHatch as p, DotScreen as m, Hatch as h, KeySwatch as g, PlateLabel as _ } from "../texture.js";
+import { byStep as v } from "./util-b.js";
+import { matrixHeatDemo as y } from "./matrix-heat.data.js";
+import { useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/charts/lupi/matrix-heat.tsx
+var C = 2, w = (e) => {
+	for (let [t, n] of e.entries()) {
+		if (n.length !== e.length) return !1;
+		for (let [r, i] of n.entries()) if (e[r]?.[t] !== i) return !1;
+	}
+	return !0;
+}, T = ([e, t]) => e < t ? [t, e] : [e, t], E = (e) => {
+	let t = [0, 0], n = -Infinity;
+	for (let [r, i] of e.entries()) for (let [e, a] of i.entries()) a !== null && a > n && (n = a, t = [r, e]);
+	return t;
+}, D = ({ rows: e, cols: t, g: n, hover: r, triangle: i }) => /* @__PURE__ */ S("g", { children: [t.map((e, a) => {
+	if (i && a === t.length - 1) return null;
+	let o = n.x0 + n.cell * a + n.size / 2 + 3, s = n.top + (i ? n.cell * a : 0) - 12;
+	return /* @__PURE__ */ x(c, {
+		className: r?.[1] === a ? "fill-ink" : "fill-muted",
+		order: a,
+		tier: "mark",
+		voice: "label",
+		x: o,
+		y: s,
+		transform: `rotate(-55 ${o} ${s})`,
+		children: e
+	}, `col-${e}`);
+}), e.map((e, t) => i && t === 0 ? null : /* @__PURE__ */ x(c, {
+	anchor: "end",
+	className: r?.[0] === t ? "fill-ink" : "fill-muted",
+	middle: !0,
+	order: t,
+	tier: "mark",
+	voice: "label",
+	x: n.x0 - 14,
+	y: n.top + n.cell * (i ? t - 1 : t) + n.size / 2,
+	children: e
+}, `row-${e}`))] }), O = ({ className: e, fill: t, size: n, x: r, y: i }) => /* @__PURE__ */ x("g", {
+	transform: `translate(${Math.round(r)} ${Math.round(i)})`,
+	children: /* @__PURE__ */ x("rect", {
+		className: `shape-crisp ${e ?? "stroke-l5"}`,
+		fill: t,
+		height: n - 1,
+		rx: C,
+		strokeWidth: 1,
+		width: n - 1,
+		x: .5,
+		y: .5
+	})
+}), k = ({ labels: e, screens: t, x: a, y: s, span: l, wide: u }) => {
+	let f = e.map((e) => o.swatch + o.gap + n(e, 11) + o.entryGap), p = u ? t.length : 3, m = Math.min(l / p, Math.max(...f)), h = f.map((e, t) => u ? i(f.slice(0, t)) : t % p * m);
+	return /* @__PURE__ */ x("g", {
+		className: "fade",
+		style: r(10),
+		children: t.map((t, n) => /* @__PURE__ */ S("g", { children: [/* @__PURE__ */ x(g, {
+			fill: d(t),
+			x: a + (h[n] ?? 0),
+			y: s - 6 + Math.floor(n / p) * 20
+		}), /* @__PURE__ */ x(c, {
+			middle: !0,
+			voice: "axis",
+			x: a + (h[n] ?? 0) + o.swatch + o.gap,
+			y: s + Math.floor(n / p) * 20,
+			children: e[n]
+		})] }, t))
+	});
+}, A = ({ at: e, bin: t, fills: n, format: i, g: a, hero: o, i: s, j: c, lit: l, onHover: u, v: f }) => {
+	let p = Math.round(a.x0 + a.cell * c), m = Math.round(a.top + a.cell * e);
+	return f === null ? /* @__PURE__ */ x("g", {
+		className: "fade",
+		children: /* @__PURE__ */ x(O, {
+			fill: d(n.empty),
+			size: a.size,
+			x: p,
+			y: m
+		})
+	}) : /* @__PURE__ */ S("g", {
+		className: `transition-opacity ${l ? "" : "opacity-30"}`,
+		onPointerEnter: () => {
+			u([s, c]);
+		},
+		children: [/* @__PURE__ */ x("g", {
+			className: "pop",
+			style: r(s + c, "mark"),
+			children: /* @__PURE__ */ x(O, {
+				className: o ? "stroke-hero" : "stroke-l5",
+				fill: d(o ? n.hero : n.screens[t(f)] ?? n.empty),
+				size: a.size,
+				x: p,
+				y: m
+			})
+		}), a.size >= 24 || o ? /* @__PURE__ */ x("g", {
+			className: "fade",
+			style: r(o ? 8 : s + c, "mark"),
+			children: /* @__PURE__ */ x(_, {
+				hero: o,
+				text: i(f),
+				x: p + a.size / 2,
+				y: m + a.size / 2
+			})
+		}) : null]
+	});
+}, j = ({ fills: e, data: t, rows: n, cols: r, g: i, hover: a, keyCell: o, bin: s, format: c, onHover: l, triangle: u }) => /* @__PURE__ */ x("g", { children: t.values.map((t, d) => t.map((t, f) => u && f >= d ? null : /* @__PURE__ */ x(A, {
+	at: u ? d - 1 : d,
+	bin: s,
+	fills: e,
+	format: c,
+	g: i,
+	hero: o[0] === d && o[1] === f,
+	i: d,
+	j: f,
+	lit: a === null || a[0] === d || a[1] === f,
+	onHover: l,
+	v: t
+}, `${n[d] ?? "row"}-${r[f] ?? "col"}`))) }), M = ({ fills: e }) => /* @__PURE__ */ S("defs", { children: [
+	/* @__PURE__ */ x(h, {
+		id: e.empty,
+		tone: "fill-l5"
+	}),
+	/* @__PURE__ */ x(p, {
+		id: e.hero,
+		tone: "fill-hero"
+	}),
+	l.map((t, n) => /* @__PURE__ */ x(m, {
+		id: e.screens[n] ?? "",
+		pitch: u.screen,
+		r: t,
+		tone: "fill-l3"
+	}, t))
+] }), N = (e, t, [n, r]) => `${e[n] ?? ""} then ${t[r] ?? ""}`, P = 55, F = (e, t, r, i, a) => {
+	let o = i ? t.slice(1) : t, s = i ? r.slice(0, -1) : r, c = Math.max(0, ...o.map((e) => n(e, 11))) + 14, l = P * Math.PI / 180, u = (e) => {
+		let t = Math.round(e - e * .16);
+		return Math.max(e * (s.length - 1) + t, a ?? 0, ...s.map((r, i) => e * i + t / 2 + 3 + n(r, 11) * Math.cos(l) + 3 * Math.sin(l)));
+	}, d = 56;
+	for (; d > 18 && c + u(d) > e;) d -= .25;
+	let f = u(d);
+	return {
+		g: {
+			cell: d,
+			size: Math.round(d - d * .16),
+			top: a === null ? 58 : 76,
+			x0: c + Math.max(0, (e - c - f) / 2)
+		},
+		left: c,
+		right: f
+	};
+}, I = (r) => {
+	let o = r.data ?? y, { rows: c } = o, u = o.cols ?? o.rows, d = r.thresholds ?? [
+		10,
+		20,
+		30,
+		45
+	], p = r.unit ?? "%", m = r.format ?? String, [h, g] = b(null), _ = f("matrix"), C = {
+		empty: _("empty"),
+		hero: _("hero"),
+		screens: l.map((e, t) => _(`screen-${t}`))
+	}, O = (e) => v(e, [
+		{
+			min: d[3],
+			out: 4
+		},
+		{
+			min: d[2],
+			out: 3
+		},
+		{
+			min: d[1],
+			out: 2
+		},
+		{
+			min: d[0],
+			out: 1
+		}
+	], 0), A = w(o.values), P = (e) => A ? e - 1 : e, I = r.highlight ?? E(o.values), L = A ? T(I) : I, R = [
+		`<${d[0]}${p}`,
+		`${d[0]}–${d[1] - 1}${p}`,
+		`${d[1]}–${d[2] - 1}${p}`,
+		`${d[2]}–${d[3] - 1}${p}`,
+		`${d[3]}${p}+`
+	];
+	return /* @__PURE__ */ x(e, { children: (e) => {
+		let l = e < 460, d = l ? null : i(R.map((e) => 18 + n(e, 11) + 20)) - 20, { g: f, left: _, right: v } = F(e, c, u, A, d), { cell: y, size: b, x0: w } = f, T = f.top + y * (P(c.length - 1) + 1) + 34, E = r.height ?? T + (l ? 32 : 14), I = h === null ? null : o.values[h[0]]?.[h[1]] ?? null, z = o.values[L[0]]?.[L[1]] ?? 0;
+		return /* @__PURE__ */ S("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ S(s, {
+				height: E,
+				label: `${c.length} by ${u.length} matrix; strongest ${c[L[0]] ?? ""} then ${u[L[1]] ?? ""} at ${m(z)}${p}`,
+				leave: () => {
+					g(null);
+				},
+				title: "Letter pairs",
+				width: e,
+				children: [
+					/* @__PURE__ */ x(D, {
+						rows: c,
+						cols: u,
+						g: f,
+						hover: h,
+						triangle: A
+					}),
+					/* @__PURE__ */ x(M, { fills: C }),
+					/* @__PURE__ */ x(j, {
+						fills: C,
+						data: o,
+						rows: c,
+						cols: u,
+						g: f,
+						hover: h,
+						keyCell: L,
+						triangle: A,
+						bin: O,
+						format: m,
+						onHover: g
+					}),
+					/* @__PURE__ */ x(k, {
+						labels: R,
+						screens: C.screens,
+						x: l ? w - _ : w,
+						y: T,
+						span: l ? _ + v : y * u.length,
+						wide: !l
+					})
+				]
+			}), h !== null && I !== null && /* @__PURE__ */ x(t, {
+				x: w + y * h[1] + b / 2,
+				y: f.top + y * P(h[0]) - 4,
+				children: /* @__PURE__ */ x(a, {
+					facts: [`${m(I)}${p}`],
+					lead: N(c, u, h)
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { I as MatrixHeat };

package/lib/charts/lupi/parallel-coordinates.data.js

@@ -0,0 +1,54 @@
+"use client";
+//#region src/charts/lupi/parallel-coordinates.data.ts
+var e = (e, t, n, r, i) => ({
+	name: e,
+	values: {
+		calcium: r,
+		fat: t,
+		protein: n,
+		sodium: i
+	}
+}), t = {
+	axes: [
+		{
+			domain: [0, 50],
+			key: "fat",
+			label: "Fat",
+			unit: "g"
+		},
+		{
+			domain: [0, 40],
+			key: "protein",
+			label: "Protein",
+			unit: "g"
+		},
+		{
+			domain: [0, 1200],
+			key: "calcium",
+			label: "Calcium",
+			unit: "mg"
+		},
+		{
+			domain: [0, 2e3],
+			key: "sodium",
+			label: "Sodium",
+			unit: "mg"
+		}
+	],
+	rows: [
+		e("Cheddar", 34.9, 25.4, 739, 723),
+		e("Stilton", 35, 23.7, 326, 788),
+		e("Brie", 29.1, 20.3, 256, 556),
+		e("Camembert", 22.7, 21.5, 235, 605),
+		e("Edam", 26, 26.7, 795, 996),
+		e("Emmental", 30.9, 30.2, 1025, 187),
+		e("Parmesan", 29.7, 36.2, 1025, 660),
+		e("Feta", 20.2, 15.6, 360, 1e3),
+		e("Mozzarella", 20.3, 18.6, 362, 395),
+		e("Roquefort", 32.9, 19.7, 530, 1670),
+		e("Mascarpone", 44.5, 4.6, 161, 70),
+		e("Cottage", 6, 9.4, 127, 250)
+	]
+};
+//#endregion
+export { t as parallelDemo };