@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/forms/radial-year.js

@@ -0,0 +1,156 @@
+"use client";
+import { fmtDegC as e, fmtMonth as t, monthTickLabels as n } from "../../lib/format.js";
+import { useHover as r } from "../hooks.js";
+import { Plot as i, Tooltip as a } from "../core.js";
+import { stagger as o } from "../util.js";
+import { TipText as s } from "../hover.js";
+import { RING_STEP as c } from "../marks.js";
+import { Dot as l } from "../markers.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { paint as f, useTextureIds as p } from "../texture-ids.js";
+import { DotRing as m, Hatch as h, PlateLabel as g } from "../texture.js";
+import { signupMonthsDemo as _ } from "./radial-year.data.js";
+import { scaleLinear as v } from "d3-scale";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { curveCatmullRomClosed as x, lineRadial as S } from "d3-shape";
+//#region src/charts/forms/radial-year.tsx
+var C = e, w = (t) => e(t).replace(".0 °C", " °C"), T = 30, E = (e, t) => e / t * Math.PI * 2, D = Math.PI / 12, O = (e, t) => ({
+	x: Math.sin(e) * t,
+	y: -Math.cos(e) * t
+}), k = 10, A = 7.5, j = (e) => {
+	let t = e.data.length, n = (n) => {
+		let r = (n + t) % t;
+		return O(E(r, t), e.r(e.data[r].value));
+	}, [r, i, a, o] = [
+		n(-1),
+		n(0),
+		n(1),
+		n(2)
+	];
+	return Math.hypot((9 * (i.x + a.x) - r.x - o.x) / 16, (9 * (i.y + a.y) - r.y - o.y) / 16);
+}, M = (e) => {
+	let t = e.data.length, r = n(e.data.map((e) => e.date)), i = j(e);
+	return /* @__PURE__ */ b("g", { children: [e.rings.map((t) => {
+		let n = O(D, e.r(t) - k), r = i > e.r(t) - k - A;
+		return /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ y(m, {
+			cx: 0,
+			cy: 0,
+			r: e.r(t),
+			step: c.guide,
+			tone: "fill-l4"
+		}), r ? /* @__PURE__ */ y(g, {
+			className: "t-axis",
+			text: w(t),
+			x: n.x,
+			y: n.y
+		}) : /* @__PURE__ */ y(d, {
+			anchor: "middle",
+			halo: !0,
+			middle: !0,
+			voice: "axis",
+			x: n.x,
+			y: n.y,
+			children: w(t)
+		})] }, t);
+	}), e.data.map((n, i) => {
+		let a = O(E(i, t), e.outer + T / 2);
+		return /* @__PURE__ */ y(d, {
+			anchor: "middle",
+			middle: !0,
+			voice: e.hover === i ? "label" : "axis",
+			x: a.x,
+			y: a.y,
+			children: r[i]
+		}, n.date.toISOString());
+	})] });
+}, N = (e) => S().curve(x.alpha(.5)).angle((t, n) => E(n, e.data.length)).radius((t) => e.r(t.value))(e.data) ?? "", P = (e) => /* @__PURE__ */ y("path", {
+	className: "fade",
+	d: N(e),
+	fill: f(e.hatch)
+}), F = (e) => {
+	let t = e.data.length, n = N(e), r = e.data[e.peak], i = O(E(e.peak, t), e.r(r.value)), a = e.hover === null ? null : O(E(e.hover, t), e.r(e.data[e.hover].value));
+	return /* @__PURE__ */ b("g", { children: [
+		/* @__PURE__ */ y("path", {
+			className: "draw stroke-l3 stroke-medium cap-round fill-none",
+			d: n,
+			pathLength: 1
+		}),
+		a === null ? null : /* @__PURE__ */ y(l, {
+			className: "fill-l2",
+			cx: a.x,
+			cy: a.y,
+			size: "sm"
+		}),
+		/* @__PURE__ */ y(l, {
+			className: "pop fill-hero",
+			cx: i.x,
+			cy: i.y,
+			size: "md",
+			style: o(4, "series")
+		}),
+		/* @__PURE__ */ y(d, {
+			anchor: i.x >= 0 ? "start" : "end",
+			dx: i.x >= 0 ? 10 : -10,
+			halo: !0,
+			middle: !0,
+			order: 4,
+			tier: "series",
+			voice: "value",
+			x: i.x,
+			y: i.y,
+			children: C(r.value)
+		})
+	] });
+}, I = (e) => {
+	let n = e.data ?? _, o = r(), c = p("year")("hatch"), l = n.map((e) => e.value), d = l.indexOf(Math.max(...l));
+	return /* @__PURE__ */ y(i, {
+		overlay: o.at === null ? null : /* @__PURE__ */ y(a, {
+			x: o.at.x,
+			y: o.at.y,
+			children: /* @__PURE__ */ y(s, {
+				facts: [`${C(n[o.at.key].value)} mean daily maximum`],
+				lead: t(n[o.at.key].date)
+			})
+		}),
+		children: (e) => {
+			let r = Math.min(e, 460), i = r / 2 - T, a = v().domain([0, Math.max(...l)]).nice(3).range([0, i]), s = a.ticks(3).filter((e) => e > 0), f = Math.round(e / 2), p = Math.round(r / 2), m = `Mean daily maximum temperature by month, 2022: warmest ${C(n[d].value)} in ${t(n[d].date)}`, g = (e) => {
+				let t = e.currentTarget.getBoundingClientRect(), r = e.clientX - t.left - f, i = e.clientY - t.top - p, s = (Math.atan2(r, -i) + Math.PI * 2) % (Math.PI * 2), c = Math.round(s / (Math.PI * 2) * n.length) % n.length, l = O(E(c, n.length), a(n[c].value));
+				o.show(c, f + l.x, p + l.y - 10);
+			}, _ = {
+				data: n,
+				hover: o.key,
+				outer: a(a.domain()[1]),
+				r: a,
+				rings: s
+			};
+			return /* @__PURE__ */ b(u, {
+				className: "touch-pan-y",
+				height: r,
+				label: m,
+				leave: o.clear,
+				onPointerMove: g,
+				width: e,
+				children: [/* @__PURE__ */ y("defs", { children: /* @__PURE__ */ y(h, {
+					id: c,
+					tone: "fill-l5"
+				}) }), /* @__PURE__ */ b("g", {
+					transform: `translate(${f} ${p})`,
+					children: [
+						/* @__PURE__ */ y(P, {
+							..._,
+							hatch: c
+						}),
+						/* @__PURE__ */ y(M, { ..._ }),
+						/* @__PURE__ */ y(F, {
+							..._,
+							peak: d
+						})
+					]
+				})]
+			});
+		}
+	});
+};
+//#endregion
+export { I as RadialYear };

package/lib/charts/frame.js

@@ -0,0 +1,73 @@
+"use client";
+import { useId as e } from "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/charts/frame.tsx
+var i = (e) => /* @__PURE__ */ r("svg", {
+	"aria-hidden": !0,
+	className: "size-4",
+	fill: "none",
+	style: { anchorName: e.anchor },
+	viewBox: "0 0 16 16",
+	children: [
+		/* @__PURE__ */ n("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.5",
+			stroke: "currentColor"
+		}),
+		/* @__PURE__ */ n("circle", {
+			cx: "8",
+			cy: "5.25",
+			fill: "currentColor",
+			r: "0.85"
+		}),
+		/* @__PURE__ */ n("path", {
+			d: "M8 7.5v4",
+			stroke: "currentColor",
+			strokeLinecap: "round"
+		})
+	]
+}), a = (a) => {
+	let o = `hl-note-${e().replaceAll(/[^\w-]/gu, "")}`, s = a.source !== void 0 || a.footnote !== void 0;
+	return /* @__PURE__ */ r("figure", {
+		"aria-label": a.name,
+		className: "m-0 flex min-w-0 flex-col gap-8",
+		children: [
+			/* @__PURE__ */ r("figcaption", {
+				className: "text-text text-small flex items-center justify-between gap-4",
+				children: [a.name, a.note === void 0 ? null : /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("button", {
+					"aria-label": `About ${a.name}`,
+					className: "text-muted hover:text-text focus-visible:outline-muted [&:has(+:popover-open)]:text-text -my-3 -mr-3.5 inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 transition-colors focus-visible:outline-1 focus-visible:-outline-offset-8 focus-visible:outline-solid",
+					popoverTarget: o,
+					type: "button",
+					children: /* @__PURE__ */ n(i, { anchor: `--${o}` })
+				}), /* @__PURE__ */ n("div", {
+					className: "note-pop rounded-tip bg-ink text-paper text-small border-0 p-4",
+					id: o,
+					popover: "auto",
+					style: { positionAnchor: `--${o}` },
+					children: /* @__PURE__ */ n("p", {
+						className: "m-0",
+						children: a.note
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex min-w-0 flex-1 flex-col justify-center",
+				children: a.children
+			}),
+			s ? /* @__PURE__ */ r("footer", {
+				className: "text-muted text-small flex flex-col gap-1",
+				children: [a.source === void 0 ? null : /* @__PURE__ */ n("p", {
+					className: "m-0",
+					children: a.source
+				}), a.footnote === void 0 ? null : /* @__PURE__ */ n("p", {
+					className: "m-0",
+					children: a.footnote
+				})]
+			}) : null
+		]
+	});
+};
+//#endregion
+export { a as Frame };

package/lib/charts/glance/aggregate-sankey.data.js

@@ -0,0 +1,74 @@
+"use client";
+//#region src/charts/glance/aggregate-sankey.data.ts
+var e = {
+	flows: [
+		{
+			from: "Labour",
+			to: "Aye",
+			value: 234
+		},
+		{
+			from: "Labour",
+			to: "No",
+			value: 147
+		},
+		{
+			from: "Labour",
+			to: "Did not vote",
+			value: 18
+		},
+		{
+			from: "Conservative",
+			to: "Aye",
+			value: 23
+		},
+		{
+			from: "Conservative",
+			to: "No",
+			value: 92
+		},
+		{
+			from: "Conservative",
+			to: "Did not vote",
+			value: 3
+		},
+		{
+			from: "Liberal Democrat",
+			to: "Aye",
+			value: 61
+		},
+		{
+			from: "Liberal Democrat",
+			to: "No",
+			value: 11
+		},
+		{
+			from: "Other",
+			to: "Aye",
+			value: 12
+		},
+		{
+			from: "Other",
+			to: "No",
+			value: 25
+		},
+		{
+			from: "Other",
+			to: "Did not vote",
+			value: 21
+		}
+	],
+	sources: [
+		"Labour",
+		"Conservative",
+		"Liberal Democrat",
+		"Other"
+	],
+	targets: [
+		"Aye",
+		"No",
+		"Did not vote"
+	]
+};
+//#endregion
+export { e as aggregateSankeyDemo };

package/lib/charts/glance/aggregate-sankey.js

@@ -0,0 +1,242 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, ranks as i, stagger as a, wrapWords as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { crisp as l } from "../axes.js";
+import { FootNote as u } from "../plot-note.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { paint as p, useTextureIds as m } from "../texture-ids.js";
+import { CrossHatch as h, Hatch as g, Rules as _, Stipple as v } from "../texture.js";
+import { aggregateSankeyDemo as y } from "./aggregate-sankey.data.js";
+import { textWidth as b } from "./util-a.js";
+import { useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { sankey as w, sankeyLinkHorizontal as T } from "d3-sankey";
+//#region src/charts/glance/aggregate-sankey.tsx
+var E = (e) => Math.round(e).toLocaleString("en-GB"), D = [
+	"falling",
+	"rising",
+	"dots",
+	"rule"
+], O = 12, k = 4, A = 13, j = (e) => b(e, "t-label"), M = (e, t, n, r) => {
+	let i = Math.max(n ? 84 : 128, t * .4) - O - k, a = new Map(e.sources.map((e) => {
+		let t = `${e} · ${r(e)}`;
+		return [e, j(t) <= i ? [t] : [...o(e, i, j), r(e)]];
+	})), s = Math.max(0, ...[...a.values()].flat().map((e) => j(e))), c = Math.max(0, ...e.targets.map((e) => j(`${e} ${r(e)}`) + 6)), l = Math.ceil(s) + O + k, u = Math.ceil(c) + O + k, d = Math.max(0, (n ? 84 : 128) - l, (n ? 52 : 92) - u);
+	return {
+		left: l + d,
+		right: u + d,
+		sourceLines: a
+	};
+}, N = (e, t, n, r, i, a) => {
+	let o = {
+		left: a.left,
+		right: a.right,
+		top: 8
+	}, s = [...e.sources.map((e, t) => ({
+		id: `s:${e}`,
+		index: t,
+		name: e,
+		side: "source"
+	})), ...e.targets.map((e, t) => ({
+		id: `t:${e}`,
+		index: t,
+		name: e,
+		side: "target"
+	}))], c = e.flows.map((e) => ({
+		from: e.from,
+		source: `s:${e.from}`,
+		target: `t:${e.to}`,
+		to: e.to,
+		value: e.value
+	}));
+	return w().nodeId((e) => e.id).nodeWidth(r ? 10 : 15).nodePadding(r ? 12 : 16).nodeSort((e, t) => e.index - t.index).extent([[o.left, o.top], [t - o.right, n - i]])({
+		links: c,
+		nodes: s
+	});
+}, P = (e, t, n) => e === null ? !0 : e.flow === null ? t.from === e.node || t.to === e.node : e.flow === n, F = (e, t) => e === null ? {
+	face: "",
+	ribbon: ""
+} : t ? {
+	face: "stroke-l3",
+	ribbon: ""
+} : {
+	face: "",
+	ribbon: "opacity-30"
+}, I = (e, t, n) => {
+	if (e === null || e.node === n) return !0;
+	if (e.flow === null) return !1;
+	let r = t.flows[e.flow];
+	return r.from === n || r.to === n;
+}, L = (e) => {
+	let t = T(), n = e.graph.links.map((e, t) => ({
+		k: t,
+		l: e
+	})).toSorted((t, n) => Number(e.grainOf(t.l.from) === e.heroGrain) - Number(e.grainOf(n.l.from) === e.heroGrain));
+	return /* @__PURE__ */ S("g", { children: n.map(({ l: n, k: r }) => {
+		let i = F(e.focus, P(e.focus, e.data.flows[r], r));
+		return /* @__PURE__ */ C("g", {
+			className: `fill-none transition-opacity ${i.ribbon}`,
+			onPointerEnter: () => {
+				e.onFocus({
+					flow: r,
+					node: null,
+					x: e.midX,
+					y: ((n.y0 ?? 0) + (n.y1 ?? 0)) / 2 - (n.width ?? 0) / 2 - 4
+				});
+			},
+			children: [/* @__PURE__ */ S("path", {
+				className: "draw stroke-l5",
+				d: t(n) ?? "",
+				pathLength: 1,
+				strokeWidth: Math.max(3, n.width ?? 1),
+				style: a(r, "mark")
+			}), /* @__PURE__ */ S("path", {
+				className: `draw transition-tone ${i.face}`,
+				d: t(n) ?? "",
+				pathLength: 1,
+				stroke: p(e.grainOf(n.from)),
+				strokeWidth: Math.max(1, (n.width ?? 1) - 2),
+				style: a(r, "mark")
+			})]
+		}, `${n.from}-${n.to}`);
+	}) });
+}, R = (e) => e.lines.length === 1 ? /* @__PURE__ */ C(f, {
+	anchor: "end",
+	dy: "0.36em",
+	voice: "label",
+	x: e.x,
+	y: e.y,
+	children: [e.name, /* @__PURE__ */ C("tspan", {
+		className: "fill-muted",
+		children: [" · ", e.valueText]
+	})]
+}) : /* @__PURE__ */ S(f, {
+	anchor: "end",
+	voice: "label",
+	y: e.y - (e.lines.length - 1) * A / 2,
+	children: e.lines.map((t, n) => /* @__PURE__ */ S("tspan", {
+		className: n === e.lines.length - 1 ? "fill-muted" : void 0,
+		dy: n === 0 ? "0.36em" : A,
+		x: e.x,
+		children: t
+	}, `${e.name}-${t}`))
+}), z = (e) => {
+	let t = e.node.x0 ?? 0, n = e.node.x1 ?? 0, r = e.node.y0 ?? 0, i = e.node.y1 ?? 0, o = (r + i) / 2;
+	return /* @__PURE__ */ C(s, {
+		dim: !e.lit,
+		onPointerEnter: () => {
+			e.onEnter({
+				flow: null,
+				node: e.node.name,
+				x: (t + n) / 2,
+				y: r - 6
+			});
+		},
+		children: [/* @__PURE__ */ S("rect", {
+			className: `grow-y ${e.fill}`,
+			style: a(e.i, "mark"),
+			x: e.pattern === void 0 ? t : l(t),
+			y: e.pattern === void 0 ? r : l(r),
+			width: Math.round(n - t) - (e.pattern === void 0 ? 0 : 1),
+			height: Math.max(2, Math.round(i - r) - 1),
+			rx: 2,
+			fill: e.pattern,
+			strokeWidth: 1
+		}), e.node.side === "source" ? /* @__PURE__ */ S(R, {
+			lines: e.lines,
+			name: e.node.name,
+			valueText: e.valueText,
+			x: t - O,
+			y: o
+		}) : /* @__PURE__ */ C(f, {
+			dy: "0.36em",
+			voice: "label",
+			x: n + O,
+			y: o,
+			children: [e.node.name, /* @__PURE__ */ S("tspan", {
+				className: "t-value",
+				dx: 6,
+				children: e.valueText
+			})]
+		})]
+	});
+}, B = ({ tex: e }) => /* @__PURE__ */ C("defs", { children: [
+	/* @__PURE__ */ S(h, {
+		id: e("cross"),
+		tone: "fill-l3"
+	}),
+	/* @__PURE__ */ S(g, {
+		angle: "falling",
+		id: e("falling"),
+		tone: "fill-l4"
+	}),
+	/* @__PURE__ */ S(g, {
+		id: e("rising"),
+		tone: "fill-l4"
+	}),
+	/* @__PURE__ */ S(v, {
+		id: e("dots"),
+		tone: "fill-l3"
+	}),
+	/* @__PURE__ */ S(_, {
+		id: e("rule"),
+		tone: "fill-l4"
+	})
+] }), V = (a) => {
+	let o = a.data ?? y, s = a.height ?? 420, l = a.format ?? E, f = a.unit ?? "MPs", [h, g] = x(null), _ = i(o.sources.map((e) => o.flows.filter((t) => t.from === e).reduce((e, t) => e + t.value, 0))), v = m("flow"), b = a.highlight ?? o.sources[_.indexOf(0)] ?? "", w = o.sources.filter((e) => e !== b), T = v("cross"), O = (e) => e === b ? T : v(D[w.indexOf(e) % D.length]), k = (e) => e.side === "target" ? "fill-l4" : e.name === b ? "fill-hero" : "stroke-l5", A = (e) => o.flows.filter((t) => t.from === e || t.to === e).reduce((e, t) => e + t.value, 0), j = `Flows from ${o.sources.join(", ")} into ${o.targets.join(", ")}`;
+	return /* @__PURE__ */ S(e, {
+		overlay: h === null ? null : /* @__PURE__ */ S(t, {
+			x: h.x,
+			y: h.y,
+			children: h.flow === null ? /* @__PURE__ */ S(c, {
+				facts: [`${l(A(h.node ?? ""))} ${f}`],
+				lead: h.node ?? ""
+			}) : /* @__PURE__ */ S(c, {
+				facts: [`${l(o.flows[h.flow].value)} ${f}`],
+				lead: `${o.flows[h.flow].from} → ${o.flows[h.flow].to}`
+			})
+		}),
+		children: (e) => {
+			let t = e < 480, i = 8 + r(n(a), e - 16, 32), c = M(o, e, t, (e) => l(A(e))), f = N(o, e, s, t, i, c);
+			return /* @__PURE__ */ C(d, {
+				height: s,
+				label: j,
+				leave: () => {
+					g(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ S(B, { tex: v }),
+					/* @__PURE__ */ S(L, {
+						data: o,
+						focus: h,
+						graph: f,
+						grainOf: O,
+						heroGrain: T,
+						midX: e / 2,
+						onFocus: g
+					}),
+					f.nodes.map((e, t) => /* @__PURE__ */ S(z, {
+						fill: k(e),
+						pattern: e.side === "source" && e.name !== b ? p(O(e.name)) : void 0,
+						i: t,
+						lines: c.sourceLines.get(e.name) ?? [],
+						lit: I(h, o, e.name),
+						node: e,
+						onEnter: g,
+						valueText: l(e.value ?? 0)
+					}, e.id)),
+					/* @__PURE__ */ S(u, {
+						height: s,
+						text: n(a),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { V as AggregateSankey };

package/lib/charts/glance/bar-race.data.js

@@ -0,0 +1,122 @@
+"use client";
+//#region src/charts/glance/bar-race.data.ts
+var e = {
+	periods: [
+		"2017-18",
+		"2018-19",
+		"2019-20",
+		"2020-21",
+		"2021-22",
+		"2022-23",
+		"2023-24",
+		"2024-25"
+	],
+	series: [
+		{
+			label: "Waterloo",
+			values: [
+				94.4,
+				94.2,
+				86.9,
+				12.2,
+				41.4,
+				57.8,
+				62.5,
+				70.4
+			]
+		},
+		{
+			label: "Victoria",
+			values: [
+				75,
+				74.7,
+				73.6,
+				13.8,
+				36.8,
+				45.6,
+				50.8,
+				53.8
+			]
+		},
+		{
+			label: "Liverpool Street",
+			values: [
+				67,
+				69.5,
+				66,
+				11.2,
+				32.2,
+				80.4,
+				94.5,
+				98
+			]
+		},
+		{
+			label: "London Bridge",
+			values: [
+				48.5,
+				61.3,
+				63.1,
+				13.8,
+				33.3,
+				47.7,
+				50,
+				54.7
+			]
+		},
+		{
+			label: "Stratford",
+			values: [
+				40.1,
+				41.2,
+				41.9,
+				14,
+				28.2,
+				44.1,
+				56.6,
+				51.5
+			]
+		},
+		{
+			label: "Paddington",
+			values: [
+				36.6,
+				38.2,
+				44.9,
+				6.4,
+				23.9,
+				59.2,
+				66.9,
+				69.9
+			]
+		},
+		{
+			label: "Euston",
+			values: [
+				44.7,
+				46.1,
+				44.8,
+				6.6,
+				23.1,
+				31.3,
+				36.2,
+				40.2
+			]
+		},
+		{
+			label: "Farringdon",
+			values: [
+				12.6,
+				15.1,
+				16.5,
+				2.6,
+				6.9,
+				31.5,
+				46,
+				50.2
+			]
+		}
+	]
+};
+//#endregion
+export { e as barRaceDemo };