@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/forms/chord-ring.js

@@ -0,0 +1,167 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { sansWidth as r, stagger as i, sum as a } from "../util.js";
+import { DimGroup as o, TipText as s } from "../hover.js";
+import { ChartSvg as c } from "../svg.js";
+import { Label as l } from "../text.js";
+import { TEXTURE_PITCH as u, paint as d, useTextureIds as f } from "../texture-ids.js";
+import { Hatch as p } from "../texture.js";
+import { sharedWorkDemo as m } from "./chord-ring.data.js";
+import { useMemo as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { arc as v } from "d3-shape";
+import { chord as y } from "d3-chord";
+//#region src/charts/forms/chord-ring.tsx
+var b = (e) => `£${(e / 1e3).toFixed(1)}bn`, x = 66, S = 3, C = 3, w = 40, T = (e, t) => ({
+	x: Math.sin(e) * t,
+	y: -Math.cos(e) * t
+}), E = (e, t) => +(t - e > Math.PI), D = (e, t) => {
+	let n = T(e.source.startAngle, t), r = T(e.source.endAngle, t), i = T(e.target.startAngle, t), a = T(e.target.endAngle, t);
+	return [
+		`M${n.x} ${n.y}`,
+		`A${t} ${t} 0 ${E(e.source.startAngle, e.source.endAngle)} 1 ${r.x} ${r.y}`,
+		`Q0 0 ${i.x} ${i.y}`,
+		`A${t} ${t} 0 ${E(e.target.startAngle, e.target.endAngle)} 1 ${a.x} ${a.y}`,
+		`Q0 0 ${n.x} ${n.y}Z`
+	].join("");
+}, O = (e) => (e.startAngle + e.endAngle) / 2, k = (e, t, n) => {
+	let r = T(O(e.source), t), i = T(O(e.target), t);
+	return Array.from({ length: 41 }, (e, t) => {
+		let a = t / w, o = (1 - a) ** 2 * r.x + a ** 2 * i.x, s = (1 - a) ** 2 * r.y + a ** 2 * i.y, c = 2 * a * i.x - 2 * (1 - a) * r.x, l = 2 * a * i.y - 2 * (1 - a) * r.y, u = Math.hypot(c, l);
+		return {
+			x: o - l / u * n,
+			y: s + c / u * n
+		};
+	}).map((e, t) => `${t === 0 ? "M" : "L"}${e.x.toFixed(1)} ${e.y.toFixed(1)}`).join("");
+}, A = (e, t) => Math.min(3, Math.ceil(e / t * 3)), j = (e) => Array.from({ length: e }, (t, n) => (n - (e - 1) / 2) * u.dense), M = (e) => {
+	let t = Math.sin(e);
+	return Math.abs(t) < .15 ? "middle" : t > 0 ? "start" : "end";
+}, N = (e) => y().padAngle(.035).sortSubgroups((e, t) => t - e)(e), P = (e, t, n) => {
+	let i = -t, a = t;
+	for (let n of N(e.matrix).groups) {
+		let o = (n.startAngle + n.endAngle) / 2, s = Math.sin(o) * (t + 12), c = r(e.teams[n.index], 12), l = M(o);
+		l === "start" ? a = Math.max(a, s + c) : l === "end" ? i = Math.min(i, s - c) : (i = Math.min(i, s - c / 2), a = Math.max(a, s + c / 2));
+	}
+	return Math.round((n - (a - i)) / 2 - i);
+}, F = (e) => {
+	let t = (e.group.startAngle + e.group.endAngle) / 2, n = T(t, e.r + 12), r = Math.cos(t), i = "0.34em";
+	return r > .85 ? i = "0" : r < -.85 && (i = "0.71em"), /* @__PURE__ */ g(l, {
+		anchor: M(t),
+		className: "fade",
+		dy: i,
+		voice: e.hot ? "value" : "label",
+		x: n.x,
+		y: n.y,
+		children: e.name
+	});
+}, I = (e, t) => e.source.index === t || e.target.index === t, L = (e, t) => {
+	let n = N(e.matrix), r = t - S, i = Math.max(...n.map((e) => e.source.value)), a = n.map((t) => ({
+		chord: t,
+		key: `${e.teams[t.source.index]}-${e.teams[t.target.index]}`,
+		ribbon: D(t, r - C),
+		threads: j(A(t.source.value, i)).map((e) => ({
+			d: k(t, r - C, e),
+			shift: e
+		}))
+	})), o = v().innerRadius(r).outerRadius(t);
+	return {
+		groups: n.groups.map((e) => ({
+			d: o(e) ?? "",
+			group: e
+		})),
+		pairs: a
+	};
+}, R = (e) => /* @__PURE__ */ _("g", { children: [
+	/* @__PURE__ */ g(o, {
+		dim: e.hovering,
+		children: e.geometry.pairs.map((t) => /* @__PURE__ */ g("g", {
+			className: "ease-enter transition-opacity",
+			opacity: +!I(t.chord, e.focus),
+			children: t.threads.map((e) => /* @__PURE__ */ g("path", {
+				className: "draw stroke-l4 fill-none",
+				d: e.d,
+				pathLength: 1,
+				strokeWidth: 1
+			}, e.shift))
+		}, t.key))
+	}),
+	e.geometry.pairs.map((t) => /* @__PURE__ */ g("g", {
+		className: "ease-enter transition-opacity",
+		opacity: +!!I(t.chord, e.focus),
+		children: /* @__PURE__ */ g("path", {
+			className: "fade stroke-l5",
+			d: t.ribbon,
+			fill: d(e.hatch),
+			strokeWidth: 1
+		})
+	}, t.key)),
+	e.geometry.groups.map(({ d: t, group: n }) => /* @__PURE__ */ _("g", { children: [/* @__PURE__ */ g("path", {
+		className: `pop transition-tone ${n.index === e.focus ? "fill-hero" : "fill-l3"}`,
+		d: t,
+		style: i(n.index, "mark")
+	}), /* @__PURE__ */ g(F, {
+		group: n,
+		hot: n.index === e.focus,
+		name: e.data.teams[n.index],
+		r: e.r
+	})] }, e.data.teams[n.index]))
+] }), z = (e, t) => {
+	let n = (t + Math.PI * 2) % (Math.PI * 2), r = (e) => {
+		if (n >= e.startAngle && n <= e.endAngle) return 0;
+		let t = Math.min(Math.abs(n - e.startAngle), Math.abs(n - e.endAngle));
+		return Math.min(t, Math.PI * 2 - t);
+	};
+	return e.groups.map(({ group: e }) => e).toSorted((e, t) => r(e) - r(t))[0];
+}, B = (e) => {
+	let { data: t, hover: n, totals: r, width: i } = e, a = f("exports")("hatch"), o = r.indexOf(Math.max(...r)), s = Math.min(i, 460), l = s / 2 - x, u = P(t, l, i), d = Math.round(s / 2), m = h(() => L(t, l), [t, l]), v = `UK goods exports in 2025 between ${t.teams.length} partners and kinds of goods; ${t.teams[o]} is the largest, ${b(r[o])}`;
+	return /* @__PURE__ */ _(c, {
+		className: "touch-pan-y",
+		height: s,
+		label: v,
+		leave: n.clear,
+		onPointerMove: (e) => {
+			let t = e.currentTarget.getBoundingClientRect(), r = e.clientX - t.left - u, i = e.clientY - t.top - d;
+			if (Math.hypot(r, i) < l * .45) return;
+			let a = z(m, Math.atan2(r, -i));
+			if (a === void 0 || a.index === n.key) return;
+			let o = T(O(a), l);
+			n.show(a.index, u + o.x, d + o.y - 12);
+		},
+		width: i,
+		children: [/* @__PURE__ */ g("defs", { children: /* @__PURE__ */ g(p, {
+			id: a,
+			tone: "fill-hero"
+		}) }), /* @__PURE__ */ g("g", {
+			transform: `translate(${u} ${d})`,
+			children: /* @__PURE__ */ g(R, {
+				data: t,
+				focus: n.key ?? o,
+				geometry: m,
+				hatch: a,
+				hovering: n.key !== null,
+				r: l
+			})
+		})]
+	});
+}, V = (r) => {
+	let i = r.data ?? m, o = e(), c = i.matrix.map((e) => a(e));
+	return /* @__PURE__ */ g(t, {
+		overlay: o.at === null ? null : /* @__PURE__ */ g(n, {
+			x: o.at.x,
+			y: o.at.y,
+			children: /* @__PURE__ */ g(s, {
+				facts: [b(c[o.at.key])],
+				lead: i.teams[o.at.key]
+			})
+		}),
+		children: (e) => /* @__PURE__ */ g(B, {
+			data: i,
+			hover: o,
+			totals: c,
+			width: e
+		})
+	});
+};
+//#endregion
+export { V as ChordRing };

package/lib/charts/forms/circle-pack.data.js

@@ -0,0 +1,80 @@
+"use client";
+//#region src/charts/forms/circle-pack.data.ts
+var e = {
+	children: [
+		{
+			children: [
+				{
+					name: "Devon",
+					value: 415
+				},
+				{
+					name: "Somerset",
+					value: 384
+				},
+				{
+					name: "Lincolnshire",
+					value: 347
+				},
+				{
+					name: "Suffolk",
+					value: 279
+				},
+				{
+					name: "Norfolk",
+					value: 251
+				},
+				{
+					name: "Kent",
+					value: 238
+				}
+			],
+			name: "England"
+		},
+		{
+			children: [
+				{
+					name: "Powys",
+					value: 54
+				},
+				{
+					name: "Monmouthshire",
+					value: 30
+				},
+				{
+					name: "The Vale of Glamorgan",
+					value: 21
+				},
+				{
+					name: "Carmarthenshire",
+					value: 13
+				}
+			],
+			name: "Wales"
+		},
+		{
+			children: [
+				{
+					name: "New South Wales",
+					value: 36
+				},
+				{
+					name: "Victoria",
+					value: 12
+				},
+				{
+					name: "Western Australia",
+					value: 8
+				},
+				{
+					name: "South Australia",
+					value: 5
+				}
+			],
+			name: "Australia"
+		}
+	],
+	name: "Dove"
+};
+//#endregion
+export { e as orgDemo };

package/lib/charts/forms/circle-pack.js

@@ -0,0 +1,99 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { sansWidth as n, stagger as r } from "../util.js";
+import { TipText as i } from "../hover.js";
+import { ChartSvg as a } from "../svg.js";
+import { Label as o } from "../text.js";
+import { paint as s, useTextureIds as c } from "../texture-ids.js";
+import { PlateLabel as l, Stipple as u } from "../texture.js";
+import { orgDemo as d } from "./circle-pack.data.js";
+import { useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { hierarchy as h, pack as g } from "d3-hierarchy";
+//#region src/charts/forms/circle-pack.tsx
+var _ = (e) => e.ancestors().map((e) => e.data.name).join("/"), v = (e, t) => t ? "stroke-ink" : e.children === void 0 ? "stroke-l3" : "stroke-l5", y = (e) => e.depth === 0 ? "fill-transparent" : e.children === void 0 ? "fill-paper" : "", b = (e) => {
+	let { n: t } = e;
+	return n(t.data.name, 11) + 8 < t.r * 2 && t.r > 13 ? e.hero ? /* @__PURE__ */ m("g", {
+		className: "fade pointer-events-none",
+		style: r(6, "mark"),
+		children: [/* @__PURE__ */ p(l, {
+			className: "t-label",
+			hero: !0,
+			text: t.data.name,
+			x: t.x,
+			y: t.y - 7.5
+		}), /* @__PURE__ */ p(l, {
+			hero: !0,
+			text: String(t.value ?? 0),
+			x: t.x,
+			y: t.y + 7.5
+		})]
+	}) : /* @__PURE__ */ p(o, {
+		anchor: "middle",
+		className: "pointer-events-none",
+		middle: !0,
+		order: 6,
+		tier: "mark",
+		voice: "axis",
+		x: t.x,
+		y: t.y,
+		children: t.data.name
+	}) : null;
+}, x = (e, t) => g().size([t, t]).padding((e) => e.depth === 0 ? 10 : 4)(h(e).sum((e) => e.value ?? 0)), S = (n) => {
+	let o = n.data ?? d, [l, h] = f(null), g = c("towers")("stipple");
+	return /* @__PURE__ */ p(e, {
+		overlay: l === null ? null : /* @__PURE__ */ p(t, {
+			x: l.x,
+			y: l.y,
+			children: /* @__PURE__ */ p(i, {
+				facts: [`${l.value} towers`],
+				lead: l.name
+			})
+		}),
+		children: (e) => {
+			let t = Math.min(e, 460), n = x(o, t), i = n.descendants(), c = n.leaves(), [d] = c;
+			for (let e of c) (e.value ?? 0) > (d.value ?? 0) && (d = e);
+			let f = Math.round((e - t) / 2), S = `Towers with a ring of bells, by county, ${n.value} in all; most in ${d.data.name}, ${d.value}`;
+			return /* @__PURE__ */ m(a, {
+				height: t,
+				label: S,
+				leave: () => {
+					h(null);
+				},
+				width: e,
+				children: [/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ p(u, {
+					id: g,
+					tone: "fill-l4"
+				}) }), /* @__PURE__ */ m("g", {
+					transform: `translate(${f} 0)`,
+					children: [i.map((e, t) => {
+						let n = _(e), i = e === d;
+						return /* @__PURE__ */ p("circle", {
+							className: `pop transition-tone ${i ? "fill-hero" : `${y(e)} ${v(e, l?.key === n)}`}`,
+							cx: e.x,
+							cy: e.y,
+							fill: e.depth === 1 ? s(g) : void 0,
+							onPointerEnter: () => {
+								h({
+									key: n,
+									name: e.data.name,
+									value: e.value ?? 0,
+									x: f + e.x,
+									y: e.y - e.r - 4
+								});
+							},
+							r: e.r - .5,
+							strokeWidth: +!i,
+							style: r(t, "fine")
+						}, n);
+					}), c.map((e) => /* @__PURE__ */ p(b, {
+						hero: e === d,
+						n: e
+					}, `label-${_(e)}`))]
+				})]
+			});
+		}
+	});
+};
+//#endregion
+export { S as CirclePack };

package/lib/charts/forms/hatched-stack.data.js

@@ -0,0 +1,71 @@
+"use client";
+//#region src/charts/forms/hatched-stack.data.ts
+var e = {
+	kinds: [
+		{
+			name: "Farmland",
+			texture: "upright"
+		},
+		{
+			name: "Woodland",
+			texture: "cross"
+		},
+		{
+			name: "Built",
+			texture: "dots"
+		},
+		{
+			name: "Other",
+			texture: "level"
+		}
+	],
+	rows: [
+		{
+			shares: [
+				61.2,
+				11.4,
+				13.4,
+				14
+			],
+			team: "England"
+		},
+		{
+			shares: [
+				24.1,
+				18.2,
+				2.9,
+				54.8
+			],
+			team: "Scotland"
+		},
+		{
+			shares: [
+				41.1,
+				19,
+				7.3,
+				32.6
+			],
+			team: "Wales"
+		},
+		{
+			shares: [
+				46.8,
+				10,
+				6.1,
+				37.1
+			],
+			team: "Northern Ireland"
+		},
+		{
+			shares: [
+				46.8,
+				14.1,
+				9.1,
+				30
+			],
+			team: "UK"
+		}
+	]
+};
+//#endregion
+export { e as timeSharesDemo };

package/lib/charts/forms/hatched-stack.js

@@ -0,0 +1,228 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { dimClass as n, sansWidth as r, stagger as i, sum as a } from "../util.js";
+import { DimGroup as o, HitRect as s, TipText as c } from "../hover.js";
+import { KEY as l } from "../marks.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { HALFTONE_R as f, TEXTURE_PITCH as p, paint as m, useTextureIds as h } from "../texture-ids.js";
+import { CrossHatch as g, DotScreen as _, EngravedRect as v, KeySwatch as y, Rules as b } from "../texture.js";
+import { timeSharesDemo as x } from "./hatched-stack.data.js";
+import { useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/charts/forms/hatched-stack.tsx
+var T = 55, E = 88, D = 20, O = 12, k = l.swatch, A = l.gap, j = (e) => {
+	let t = {
+		kind: 0,
+		row: 0
+	};
+	for (let [n, r] of e.rows.entries()) for (let [i, a] of r.shares.entries()) a > e.rows[t.row].shares[t.kind] && (t = {
+		kind: i,
+		row: n
+	});
+	return t;
+}, M = {
+	cross: "fill-l4",
+	dots: "fill-l3",
+	level: "fill-l5",
+	upright: "fill-l2"
+}, N = [
+	"cross",
+	"dots",
+	"level",
+	"upright"
+], P = {
+	cross: {
+		x: 0,
+		y: 0
+	},
+	dots: {
+		x: 0,
+		y: 0
+	},
+	level: {
+		x: 0,
+		y: 1
+	},
+	upright: {
+		x: 1,
+		y: 0
+	}
+}, F = {
+	cross: void 0,
+	dots: {
+		clear: 1,
+		pitch: p.screen
+	},
+	level: void 0,
+	upright: {
+		clear: 0,
+		pitch: p.dense
+	}
+}, I = (e, t, n) => e === "cross" ? /* @__PURE__ */ C(g, {
+	id: t,
+	tone: n
+}, t) : e === "dots" ? /* @__PURE__ */ C(_, {
+	id: t,
+	r: f[2],
+	tone: n
+}, t) : e === "level" ? /* @__PURE__ */ C(b, {
+	id: t,
+	tone: n
+}, t) : /* @__PURE__ */ C(b, {
+	angle: "upright",
+	id: t,
+	tone: n
+}, t), L = (e) => /* @__PURE__ */ w("defs", { children: [N.map((t) => I(t, e.tex(t), M[t])), I(e.heroTexture, e.tex("hero"), "fill-hero")] }), R = (e, t, n) => {
+	let r = a(e), i = 0;
+	return e.map((a, o) => {
+		let s = Math.round(t + (n - t) * i / r);
+		return i += a, {
+			k: o,
+			w: Math.round(t + (n - t) * i / r) - s - (o === e.length - 1 ? 0 : 1),
+			x: s
+		};
+	});
+}, z = (e, t, n) => {
+	let i = t, a = 0, o = [];
+	for (let [s, c] of e.entries()) {
+		let e = k + A + r(c.name, 11) + l.entryGap;
+		i + e - l.entryGap > n && i > t && (i = t, a += D), o.push({
+			k: s,
+			kind: c,
+			w: e,
+			x: i,
+			y: a
+		}), i += e;
+	}
+	return {
+		height: a + D + 8,
+		items: o
+	};
+}, B = (e) => /* @__PURE__ */ C("g", { children: e.items.map(({ k: t, kind: n, w: r, x: i, y: a }) => /* @__PURE__ */ w(o, {
+	dim: e.hover !== null && e.hover !== t,
+	onPointerEnter: () => {
+		e.onHover(t);
+	},
+	children: [
+		/* @__PURE__ */ C(s, {
+			height: D,
+			width: r,
+			x: i,
+			y: a
+		}),
+		/* @__PURE__ */ C(y, {
+			fill: m(e.tex(n.texture)),
+			x: i,
+			y: a + D / 2 - k / 2
+		}),
+		/* @__PURE__ */ C(d, {
+			middle: !0,
+			voice: "axis",
+			x: i + k + A,
+			y: a + D / 2,
+			children: n.name
+		})
+	]
+}, n.name)) }), V = (e) => {
+	let t = e.labelW, r = e.width - 40;
+	return /* @__PURE__ */ C("g", { children: e.data.rows.map((a, o) => {
+		let s = e.top + o * E, c = o === e.hero.row;
+		return /* @__PURE__ */ w("g", { children: [
+			/* @__PURE__ */ C(d, {
+				middle: !0,
+				muted: !c,
+				voice: "label",
+				x: 0,
+				y: s + T / 2,
+				children: a.team
+			}),
+			R(a.shares, t, r).map((t) => {
+				let r = c && t.k === e.hero.kind, { texture: a } = e.data.kinds[t.k];
+				return /* @__PURE__ */ C(v, {
+					className: `grow-x ${r ? "stroke-ink" : "stroke-l5"} ${n(e.hover !== null && e.hover.kind !== t.k)}`,
+					fill: m(e.tex(r ? "hero" : a)),
+					height: T,
+					lead: P[a],
+					onPointerEnter: () => {
+						e.setHover({
+							kind: t.k,
+							row: o,
+							x: t.x + t.w / 2,
+							y: s - 4
+						});
+					},
+					style: i(o * 2 + t.k, "mark"),
+					whole: F[a],
+					width: t.w,
+					x: t.x,
+					y: s
+				}, e.data.kinds[t.k].name);
+			}),
+			/* @__PURE__ */ C(d, {
+				anchor: "end",
+				className: "fade",
+				middle: !0,
+				muted: !c,
+				voice: "value",
+				x: e.width,
+				y: s + T / 2,
+				children: `${a.shares[e.hero.kind]}%`
+			})
+		] }, a.team);
+	}) });
+}, H = (n) => {
+	let i = n.data ?? x, a = h("shares"), [o, s] = S(null), l = j(i), d = Math.max(...i.rows.map((e) => r(e.team, 12))) + 16, f = o?.row ?? null, p = i.kinds[l.kind].name.toLowerCase();
+	return /* @__PURE__ */ C(e, {
+		overlay: o === null || f === null ? null : /* @__PURE__ */ C(t, {
+			x: o.x,
+			y: o.y,
+			children: /* @__PURE__ */ C(c, {
+				facts: [`${i.kinds[o.kind].name.toLowerCase()} ${i.rows[f].shares[o.kind]}%`],
+				lead: i.rows[f].team
+			})
+		}),
+		children: (e) => {
+			let t = z(i.kinds, e < 480 ? 0 : d, e), n = t.height + O, r = n + i.rows.length * E - 33, c = `Share of land by nation, 2021: ${i.rows.map((e) => `${e.team} ${e.shares[l.kind]}% ${p}`).join(", ")}`;
+			return /* @__PURE__ */ w(u, {
+				height: r,
+				label: c,
+				leave: () => {
+					s(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ C(L, {
+						heroTexture: i.kinds[l.kind].texture,
+						tex: a
+					}),
+					/* @__PURE__ */ C(B, {
+						hover: o?.kind ?? null,
+						items: t.items,
+						onHover: (e) => {
+							s(e === null ? null : {
+								kind: e,
+								row: null,
+								x: 0,
+								y: 0
+							});
+						},
+						tex: a
+					}),
+					/* @__PURE__ */ C(V, {
+						data: i,
+						hero: l,
+						hover: o,
+						labelW: d,
+						setHover: s,
+						tex: a,
+						top: n,
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { H as HatchedStack };

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

@@ -0,0 +1,13 @@
+"use client";
+import { activeDaysDemo as e } from "./brushed-overview.data.js";
+//#region src/charts/forms/radial-year.data.ts
+var t = Array.from({ length: 12 }, (t, n) => {
+	let r = 0, i = 0;
+	for (let t of e) t.date.getUTCMonth() === n && (r += t.value, i += 1);
+	return {
+		date: new Date(Date.UTC(2022, n, 1)),
+		value: Math.round(r / i * 10) / 10
+	};
+});
+//#endregion
+export { t as signupMonthsDemo };