@howells/hairline 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,218 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, noteSpace as i, sansWidth as a, stagger as o, wrapWords as s } from "../util.js";
+import { DimGroup as c, TipText as l } from "../hover.js";
+import { TICK as u } from "../marks.js";
+import { Dot as d } from "../markers.js";
+import { PlotNote as f } from "../plot-note.js";
+import { HRule as p, VRule as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { paint as _, useTextureIds as v } from "../texture-ids.js";
+import { Hatch as y, Stipple as b } from "../texture.js";
+import { parallelDemo as x } from "./parallel-coordinates.data.js";
+import { scaleLinear as S } from "d3-scale";
+import { quantile as C } from "d3-array";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/charts/lupi/parallel-coordinates.tsx
+var E = u.md, D = (e) => {
+	let t = e.slice(1).map((t, n) => {
+		let r = e[n], i = (t.x - r.x) * .45;
+		return `C${r.x + i},${r.y} ${t.x - i},${t.y} ${t.x},${t.y}`;
+	});
+	return e.length > 0 ? `M${e[0].x},${e[0].y}${t.join("")}` : "";
+}, O = (e, t) => `${D(e)}L${D(t.toReversed()).slice(1)}Z`, k = 14, A = (e, t, n) => t === 0 ? "0" : `${n(t).replace("-", "−")}${e.unit ?? ""}`, j = ({ axis: e, rug: t, index: n, x: r, top: i, bottom: a, lines: s, format: c }) => /* @__PURE__ */ T("g", {
+	className: "fade",
+	style: o(n, "mark"),
+	children: [
+		s.map((e, t) => /* @__PURE__ */ w(g, {
+			anchor: "middle",
+			muted: !0,
+			voice: "label",
+			x: r,
+			y: i - 26 - (s.length - 1 - t) * k,
+			children: e
+		}, e)),
+		/* @__PURE__ */ w(m, {
+			kind: "rule",
+			x: r,
+			y0: Math.round(i),
+			y1: Math.round(a)
+		}),
+		t.map((t) => /* @__PURE__ */ w(p, {
+			className: "stroke-l2 shape-crisp",
+			kind: "plain",
+			strokeWidth: 1,
+			x0: Math.round(r) + 1 - E,
+			x1: Math.round(r) + 1,
+			y: t
+		}, `${e.key}-${t}`)),
+		/* @__PURE__ */ w(g, {
+			middle: !0,
+			muted: !0,
+			voice: "axis",
+			x: r + 9,
+			y: i,
+			children: A(e, e.domain[1], c)
+		}),
+		/* @__PURE__ */ w(g, {
+			middle: !0,
+			muted: !0,
+			voice: "axis",
+			x: r + 9,
+			y: a,
+			children: A(e, e.domain[0], c)
+		})
+	]
+}), M = ({ row: e, index: t, pts: n, hero: r, active: i, onEnter: a }) => {
+	let s = D(n), l = r || i === !0, u = n.at(-1);
+	return /* @__PURE__ */ T(c, {
+		dim: i === !1,
+		onPointerEnter: a,
+		children: [
+			/* @__PURE__ */ w("path", {
+				className: "fill-none stroke-transparent",
+				d: s,
+				strokeWidth: 10
+			}),
+			/* @__PURE__ */ w("path", {
+				className: `draw cap-round fill-none ${l ? "stroke-hero" : "stroke-l4"}`,
+				d: s,
+				pathLength: 1,
+				strokeWidth: l ? 2 : 1,
+				style: o(r ? 14 : t, "mark")
+			}),
+			r ? n.map((n) => /* @__PURE__ */ w(d, {
+				className: "fade fill-hero",
+				cx: n.x,
+				cy: n.y,
+				size: "md",
+				style: o(t + 4, "mark")
+			}, `${e.name}-${n.x}`)) : null,
+			r && u !== void 0 && /* @__PURE__ */ w(g, {
+				middle: !0,
+				order: 16,
+				voice: "label",
+				x: u.x + 12,
+				y: u.y,
+				children: e.name
+			})
+		]
+	});
+}, N = (e) => /* @__PURE__ */ T("g", {
+	className: "fade",
+	style: o(2, "series"),
+	children: [
+		/* @__PURE__ */ T("defs", { children: [/* @__PURE__ */ w(b, {
+			id: e.ids("range"),
+			tone: "fill-l4"
+		}), /* @__PURE__ */ w(y, {
+			id: e.ids("middle"),
+			tone: "fill-l5"
+		})] }),
+		/* @__PURE__ */ w("path", {
+			className: "stroke-l5",
+			d: e.range,
+			fill: _(e.ids("range")),
+			strokeWidth: 1
+		}),
+		/* @__PURE__ */ w("path", {
+			className: "stroke-l5",
+			d: e.middle,
+			fill: _(e.ids("middle")),
+			strokeWidth: 1
+		})
+	]
+}), P = (e, t) => {
+	let n = e.rows.map((e) => e.values[t.key] ?? t.domain[0]);
+	return [Math.min(t.domain[0], ...n), Math.max(t.domain[1], ...n)];
+}, F = (e, t, n) => e.axes.map((r) => S().domain(P(e, r)).range([n, t])), I = (e) => a(e, 10.4), L = (e, t) => Math.max(0, ...s(e?.label ?? "", t - 10, I).map(I)) / 2, R = (e, t, n, r) => {
+	let i = e.axes.at(0), a = e.axes.at(-1), o = a === void 0 ? 0 : Math.max(...P(e, a).map((e) => I(A(a, e, n)))), s = e.rows.some((e) => e.name === r) ? 12 + I(r ?? "") : 0, c = (n) => {
+		let r = (t - n.l - n.r) / Math.max(1, e.axes.length - 1);
+		return {
+			gap: r,
+			l: Math.max(E, L(i, r)),
+			r: Math.max(L(a, r), 9 + o, s)
+		};
+	}, l = c({
+		l: 30,
+		r: 30
+	}), u = c(l);
+	for (let e = 0; e < 4 && (u.l !== l.l || u.r !== l.r); e += 1) l = u, u = c(u);
+	return {
+		gap: Math.max(l.gap, u.gap),
+		l: Math.max(l.l, u.l),
+		r: Math.max(l.r, u.r)
+	};
+}, z = (e, t, n, r) => e.axes.map((i, a) => ({
+	x: n(a),
+	y: t[a](C(e.rows.map((e) => e.values[i.key] ?? i.domain[0]), r) ?? i.domain[0])
+})), B = (a) => {
+	let o = a.data ?? x, c = a.height ?? 470, u = a.format ?? ((e) => `${e}`), d = e(), p = v("ranges"), m = o.rows.map((e, t) => ({
+		i: t,
+		r: e
+	})).toSorted((e, t) => Number(e.r.name === a.highlight) - Number(t.r.name === a.highlight));
+	return /* @__PURE__ */ w(t, { children: (e) => {
+		let t = Math.min(e, a.maxWidth ?? 600), g = R(o, t, u, a.highlight), _ = (e - t) / 2 + g.l, v = (e + t) / 2 - g.r, y = e - 16 - Math.abs(_ + v - e), b = c - (30 + i(r(a), y, 24)), x = (e) => _ + (v - _) * e / Math.max(1, o.axes.length - 1), S = F(o, 58, b), { gap: C } = g, E = o.axes.map((e, t) => {
+			let n = S.at(t), r = n === void 0 ? e.domain[0] : n.invert(b), i = n === void 0 ? e.domain[1] : n.invert(58);
+			return {
+				...e,
+				domain: [r, i]
+			};
+		}), D = (e) => o.axes.map((t, n) => ({
+			x: x(n),
+			y: S[n](e.values[t.key] ?? t.domain[0])
+		})), k = (e) => z(o, S, x, e), P = d.key === null ? void 0 : o.rows[d.key], L = P === void 0 ? [] : D(P);
+		return /* @__PURE__ */ T("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ T(h, {
+				height: c,
+				label: `${o.rows.length} cheeses across ${o.axes.map((e) => e.label).join(", ")}`,
+				leave: d.clear,
+				title: "Twelve cheeses",
+				width: e,
+				children: [
+					/* @__PURE__ */ w(N, {
+						ids: p,
+						middle: O(k(.75), k(.25)),
+						range: O(k(1), k(0))
+					}),
+					E.map((e, t) => /* @__PURE__ */ w(j, {
+						axis: e,
+						bottom: b,
+						format: u,
+						index: t,
+						rug: [...new Set(o.rows.map((n) => S[t](n.values[e.key] ?? e.domain[0])))],
+						lines: s(e.label, C - 10, I),
+						top: 58,
+						x: x(t)
+					}, e.key)),
+					m.map(({ r: e, i: t }) => /* @__PURE__ */ w(M, {
+						active: d.key === null ? null : d.key === t,
+						hero: a.highlight === e.name,
+						index: t,
+						onEnter: d.enter(t),
+						pts: D(e),
+						row: e
+					}, e.name)),
+					/* @__PURE__ */ w(f, {
+						text: r(a),
+						width: y,
+						x: (_ + v) / 2,
+						y: c - 6
+					})
+				]
+			}), P !== void 0 && L.length > 0 && /* @__PURE__ */ w(n, {
+				x: L[Math.floor(L.length / 2)].x,
+				y: Math.min(...L.map((e) => e.y)) - 6,
+				children: /* @__PURE__ */ w(l, {
+					facts: o.axes.map((e) => `${e.label} ${A(e, P.values[e.key] ?? 0, u)}`),
+					lead: P.name
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { B as ParallelCoordinates };

package/lib/charts/lupi/radial-convergence.data.js

@@ -0,0 +1,178 @@
+"use client";
+//#region src/charts/lupi/radial-convergence.data.ts
+var e = [
+	{
+		id: "Alex",
+		theme: "2020/21"
+	},
+	{
+		id: "Barbara",
+		theme: "2020/21"
+	},
+	{
+		id: "Aiden",
+		theme: "2020/21"
+	},
+	{
+		id: "Bella",
+		theme: "2020/21"
+	},
+	{
+		id: "Christoph",
+		theme: "2020/21"
+	},
+	{
+		id: "Darcy",
+		theme: "2020/21"
+	},
+	{
+		id: "Evert",
+		theme: "2020/21"
+	},
+	{
+		id: "Arwen",
+		theme: "2021/22"
+	},
+	{
+		id: "Barra",
+		theme: "2021/22"
+	},
+	{
+		id: "Malik",
+		theme: "2021/22"
+	},
+	{
+		id: "Corrie",
+		theme: "2021/22"
+	},
+	{
+		id: "Dudley",
+		theme: "2021/22"
+	},
+	{
+		id: "Eunice",
+		theme: "2021/22"
+	},
+	{
+		id: "Franklin",
+		theme: "2021/22"
+	},
+	{
+		id: "Otto",
+		theme: "2022/23"
+	},
+	{
+		id: "Noa",
+		theme: "2022/23"
+	},
+	{
+		id: "Antoni",
+		theme: "2022/23"
+	},
+	{
+		id: "Betty",
+		theme: "2022/23"
+	},
+	{
+		id: "Agnes",
+		theme: "2023/24"
+	},
+	{
+		id: "Babet",
+		theme: "2023/24"
+	},
+	{
+		id: "Ciarán",
+		theme: "2023/24"
+	},
+	{
+		id: "Debi",
+		theme: "2023/24"
+	},
+	{
+		id: "Elin",
+		theme: "2023/24"
+	},
+	{
+		id: "Fergus",
+		theme: "2023/24"
+	},
+	{
+		id: "Gerrit",
+		theme: "2023/24"
+	},
+	{
+		id: "Henk",
+		theme: "2023/24"
+	},
+	{
+		id: "Isha",
+		theme: "2023/24"
+	},
+	{
+		id: "Jocelyn",
+		theme: "2023/24"
+	},
+	{
+		id: "Kathleen",
+		theme: "2023/24"
+	},
+	{
+		id: "Lilian",
+		theme: "2023/24"
+	},
+	{
+		id: "Ashley",
+		theme: "2024/25"
+	},
+	{
+		id: "Bert",
+		theme: "2024/25"
+	},
+	{
+		id: "Conall",
+		theme: "2024/25"
+	},
+	{
+		id: "Darragh",
+		theme: "2024/25"
+	},
+	{
+		id: "Éowyn",
+		theme: "2024/25"
+	},
+	{
+		id: "Floris",
+		theme: "2024/25"
+	},
+	{
+		id: "Amy",
+		theme: "2025/26"
+	},
+	{
+		id: "Benjamin",
+		theme: "2025/26"
+	},
+	{
+		id: "Claudia",
+		theme: "2025/26"
+	},
+	{
+		id: "Bram",
+		theme: "2025/26"
+	},
+	{
+		id: "Goretti",
+		theme: "2025/26"
+	},
+	{
+		id: "Chandra",
+		theme: "2025/26"
+	},
+	{
+		id: "Dave",
+		theme: "2025/26"
+	}
+];
+//#endregion
+export { e as radialConvergenceDemo };

package/lib/charts/lupi/radial-convergence.js

@@ -0,0 +1,208 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { clamp as n, dimClass as r, noteOf as i, noteSpace as a, sansWidth as o, stagger as s } from "../util.js";
+import { DimGroup as c, HitCircle as l, TipText as u } from "../hover.js";
+import { RING_STEP as d } from "../marks.js";
+import { FootNote as f } from "../plot-note.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { DotRing as h } from "../texture.js";
+import { argMax as g } from "./util-b.js";
+import { clock as _ } from "./util-a.js";
+import { radialConvergenceDemo as v } from "./radial-convergence.data.js";
+import { useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/lupi/radial-convergence.tsx
+var S = (e, t) => n(t / 90, 1.4, 2.2) * Math.sqrt(e), C = .35, w = (e) => {
+	let t = e.reduce((e, t) => e + Math.sin(t * Math.PI / 180), 0), n = e.reduce((e, t) => e + Math.cos(t * Math.PI / 180), 0);
+	return (Math.atan2(t, n) * 180 / Math.PI + 360) % 360;
+}, T = (e) => [...new Set(e.map((e) => e.theme))].map((t) => {
+	let n = e.flatMap((n, r) => n.theme === t ? [360 * r / e.length] : []);
+	return {
+		angle: w(n),
+		count: n.length,
+		theme: t
+	};
+}), E = (e, t) => T(e).map((e) => {
+	let [n, r] = _(t.cx, t.cy, t.R * .34, e.angle);
+	return {
+		...e,
+		x: n,
+		y: r
+	};
+}), D = (e) => {
+	let { hub: t, rim: n } = e, [r, i] = _(n.cx, n.cy, n.R + 16, t.angle), a = Math.sin(t.angle * Math.PI / 180), s = Math.abs(a) > C && n.stacked, l = o(s ? t.theme : `${t.theme} · ${t.count}`, 11), u = "middle", d = r;
+	a > C ? (u = "start", d = Math.min(r, n.width - l - 2)) : a < -.35 && (u = "end", d = Math.max(r, l + 2));
+	let f = e.focus === null || e.focus.theme === t.theme;
+	return /* @__PURE__ */ b(c, {
+		dim: !f,
+		onPointerEnter: e.onEnter,
+		children: s ? /* @__PURE__ */ x(m, {
+			anchor: u,
+			className: "fade",
+			muted: !e.hero,
+			voice: "label",
+			x: d,
+			y: i,
+			children: [/* @__PURE__ */ b("tspan", {
+				x: d,
+				dy: "-0.2em",
+				children: t.theme
+			}), /* @__PURE__ */ b("tspan", {
+				x: d,
+				dy: "1.25em",
+				children: t.count
+			})]
+		}) : /* @__PURE__ */ x(m, {
+			anchor: u,
+			className: "fade",
+			middle: !0,
+			muted: !e.hero,
+			voice: "label",
+			x: d,
+			y: i,
+			children: [
+				t.theme,
+				" · ",
+				t.count
+			]
+		})
+	});
+}, O = ({ focused: e, hub: t, k: n, lit: i, onEnter: a, rim: o }) => {
+	let c = o.angle(n), [u, d] = _(o.cx, o.cy, o.R, c), [f, p] = _(o.cx, o.cy, o.R * .52, c), m = t.x + (f - t.x) * .25, h = t.y + (p - t.y) * .25;
+	return /* @__PURE__ */ x("g", {
+		className: r(!i),
+		onPointerEnter: () => {
+			a(u, d);
+		},
+		children: [/* @__PURE__ */ b("path", {
+			className: `draw ${e ? "stroke-l3" : "stroke-l6"}`,
+			d: `M${u},${d}C${f},${p} ${m},${h} ${t.x},${t.y}`,
+			fill: "none",
+			pathLength: 1,
+			strokeWidth: 1.5,
+			style: s(n, "fine")
+		}), /* @__PURE__ */ b(l, {
+			cx: u,
+			cy: d,
+			r: 7
+		})]
+	});
+}, k = (e) => /* @__PURE__ */ b("g", { children: e.hubs.map((t) => /* @__PURE__ */ b("circle", {
+	className: `pop ${t.theme === e.hero ? "fill-hero" : "fill-l3"}`,
+	cx: t.x,
+	cy: t.y,
+	r: S(t.count, e.R),
+	style: s(6)
+}, `hub-${t.theme}`)) }), A = (e, t, r, i) => {
+	let a = T(r), s = (e, t) => {
+		let n = -e - 2, r = e + 2;
+		for (let i of a) {
+			let a = Math.sin(i.angle * Math.PI / 180), s = (e + 16) * a, c = o(t && Math.abs(a) > C ? i.theme : `${i.theme} · ${i.count}`, 12);
+			a > C ? r = Math.max(r, s + c) : a < -.35 ? n = Math.min(n, s - c) : (n = Math.min(n, s - c / 2), r = Math.max(r, s + c / 2));
+		}
+		return {
+			hi: r,
+			lo: n
+		};
+	}, c = (r) => {
+		let a = 240;
+		for (; a > 64 && s(a, r).hi - s(a, r).lo > e;) --a;
+		return n(Math.min(a, (t - 56 - i) / 2), 64, 240);
+	}, l = c(!1) < 130 && c(!0) > c(!1), u = c(l), d = s(u, l), f = r.length, p = Math.min(t, Math.round(2 * (u + 28) + i));
+	return {
+		plotH: p,
+		rim: {
+			R: u,
+			angle: (e) => 360 * e / f,
+			cx: (e - (d.hi - d.lo)) / 2 - d.lo,
+			cy: (p - i) / 2,
+			stacked: l,
+			width: e
+		}
+	};
+}, j = (n) => {
+	let r = n.data ?? v, o = n.height ?? 460, s = n.noun ?? "storm", [c, l] = y(null), [m, _] = y(null), C = () => {
+		l(null), _(null);
+	}, w = (e, t) => c === null || (c.item === null ? c.theme === e : c.item === t);
+	return /* @__PURE__ */ b(e, {
+		overlay: m === null ? null : /* @__PURE__ */ b(t, {
+			x: m.x,
+			y: m.y,
+			children: /* @__PURE__ */ b(u, {
+				facts: [m.value],
+				lead: m.label
+			})
+		}),
+		children: (e) => {
+			let t = a(i(n), e - 16, 20), { plotH: u, rim: m } = A(e, o, r, t), v = E(r, m), y = new Map(v.map((e) => [e.theme, e])), T = v.at(g(v.map((e) => e.count)))?.theme;
+			return /* @__PURE__ */ x(p, {
+				height: u,
+				label: `${r.length} named storms in ${v.length} seasons: ${v.map((e) => `${e.theme} ${e.count}`).join(", ")}`,
+				leave: C,
+				title: "Named storms on a rim bundled into season hubs",
+				width: e,
+				children: [
+					/* @__PURE__ */ b(h, {
+						className: "fade",
+						cx: m.cx,
+						cy: m.cy,
+						r: m.R,
+						step: d.guide,
+						tone: "fill-l4"
+					}),
+					v.map((e) => /* @__PURE__ */ b(D, {
+						focus: c,
+						hero: e.theme === T,
+						hub: e,
+						onEnter: () => {
+							l({
+								item: null,
+								theme: e.theme
+							}), _({
+								label: e.theme,
+								value: `${e.count} ${s}s`,
+								x: e.x,
+								y: e.y - S(e.count, m.R) - 4
+							});
+						},
+						rim: m
+					}, `label-${e.theme}`)),
+					r.map((e, t) => {
+						let n = y.get(e.theme);
+						return n === void 0 ? null : /* @__PURE__ */ b(O, {
+							focused: c !== null,
+							hub: n,
+							k: t,
+							lit: w(e.theme, t),
+							onEnter: (n, r) => {
+								l({
+									item: t,
+									theme: e.theme
+								}), _({
+									label: e.id,
+									value: e.theme,
+									x: n,
+									y: r - 8
+								});
+							},
+							rim: m
+						}, e.id);
+					}),
+					/* @__PURE__ */ b(k, {
+						R: m.R,
+						hero: T,
+						hubs: v
+					}),
+					/* @__PURE__ */ b(f, {
+						height: u,
+						text: i(n),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { j as RadialConvergence };