@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/glance/force-graph.data.js

@@ -0,0 +1,77 @@
+"use client";
+//#region src/charts/glance/force-graph.data.ts
+var e = {
+	links: [
+		{
+			source: "Thames",
+			target: "Wey",
+			value: 8.08
+		},
+		{
+			source: "Thames",
+			target: "Cherwell",
+			value: 6.71
+		},
+		{
+			source: "Thames",
+			target: "Mole",
+			value: 5.71
+		},
+		{
+			source: "Thames",
+			target: "Colne",
+			value: 4.43
+		},
+		{
+			source: "Thames",
+			target: "Evenlode",
+			value: 4.03
+		},
+		{
+			source: "Thames",
+			target: "Thame",
+			value: 3.81
+		},
+		{
+			source: "Thames",
+			target: "Windrush",
+			value: 3.7
+		}
+	],
+	nodes: [
+		{
+			id: "Thames",
+			value: 65.36
+		},
+		{
+			id: "Wey",
+			value: 8.08
+		},
+		{
+			id: "Cherwell",
+			value: 6.71
+		},
+		{
+			id: "Mole",
+			value: 5.71
+		},
+		{
+			id: "Colne",
+			value: 4.43
+		},
+		{
+			id: "Evenlode",
+			value: 4.03
+		},
+		{
+			id: "Thame",
+			value: 3.81
+		},
+		{
+			id: "Windrush",
+			value: 3.7
+		}
+	]
+};
+//#endregion
+export { e as forceGraphDemo };

package/lib/charts/glance/force-graph.js

@@ -0,0 +1,211 @@
+"use client";
+import { useReducedMotion as e, useReveal as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { dimClass as i, noteOf as a, noteSpace as o } from "../util.js";
+import { DimGroup as s, HitCircle as c, TipText as l } from "../hover.js";
+import { FootNote as u } from "../plot-note.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { textWidth as p } from "./util-a.js";
+import { bundleLines as m } from "./util-b.js";
+import { LinkBundle as h } from "./link-bundle.js";
+import { forceGraphDemo as g } from "./force-graph.data.js";
+import { useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { forceCollide as C, forceLink as w, forceManyBody as T, forceSimulation as E, forceX as D, forceY as O } from "d3-force";
+//#region src/charts/glance/force-graph.tsx
+var k = 7, A = -6, j = (e) => {
+	let t = e.x ?? 0, n = (e.y ?? 0) - A;
+	return !e.hub && t < -.4 * Math.hypot(t, n);
+}, M = (e) => `${e.toFixed(1)} m³/s`, N = (e, t) => {
+	let n = Math.max(...e.map((e) => e.value)), r = e[0].id;
+	for (let t of e) t.value === n && (r = t.id);
+	let i = e.map((t, i) => {
+		let a = i / e.length * Math.PI * 2, o = t.id === r;
+		return {
+			datum: t,
+			fx: o ? 0 : null,
+			fy: o ? A : null,
+			hub: o,
+			r: Math.max(9, 40 * Math.sqrt(t.value / n)),
+			x: Math.cos(a) * 12,
+			y: Math.sin(a) * 12
+		};
+	}), a = new Map(i.map((e) => [e.datum.id, e]));
+	return {
+		edges: t.flatMap((e) => {
+			let t = a.get(e.source), n = a.get(e.target);
+			return t === void 0 || n === void 0 ? [] : [{
+				hub: t.hub || n.hub,
+				id: `${e.source}→${e.target}`,
+				s: t,
+				t: n,
+				value: e.value
+			}];
+		}),
+		maxLink: Math.max(...t.map((e) => e.value)),
+		nodes: i
+	};
+}, P = (e, t) => t < 1 ? e ? 16 : 34 : e ? 44 : 40, F = (e, t) => {
+	let n = e.edges.map((e) => ({
+		source: e.s,
+		target: e.t
+	}));
+	return E(e.nodes).force("link", w(n).distance((n, r) => {
+		let i = e.edges[r];
+		return (i.hub ? 118 + (i.s.r + i.t.r) * .9 : 80) * t;
+	}).strength((t, n) => e.edges[n].hub ? .7 : .22)).force("charge", T().strength(-340 * t)).force("collide", C((e) => e.r * t + P(e.hub, t))).force("x", D(0).strength(t < 1 ? .12 : .02)).force("y", O(A).strength(t < 1 ? .02 : .05)).alphaDecay(.035).stop();
+}, I = (e, t, n, r) => {
+	let [, i] = b(0), a = y(null);
+	return _(() => {
+		let o = F(e, t);
+		return a.current = o, o.on("tick", () => {
+			i((e) => e + 1);
+		}), n && r ? (o.alpha(1), o.tick(320), o.alpha(.002).restart()) : n && o.alpha(1).restart(), () => {
+			o.stop(), o.on("tick", null), a.current = null;
+		};
+	}, [
+		e,
+		t,
+		n,
+		r
+	]), {
+		redraw: () => {
+			i((e) => e + 1);
+		},
+		simRef: a
+	};
+}, L = (e, t) => t ? "stroke-ink" : e ? "stroke-l2" : "stroke-l4", R = (e) => e.edges.filter((e) => e.hub).toSorted((e, t) => t.value - e.value)[0], z = ({ graph: e, focus: t, at: n }) => {
+	let r = R(e);
+	return /* @__PURE__ */ x("g", { children: e.edges.map((a) => {
+		let o = t !== null && (a.s === t || a.t === t);
+		return /* @__PURE__ */ x(h, {
+			className: `${L(o, a === r)} ${i(t !== null && !o)}`,
+			lines: m(a.value, e.maxLink),
+			s: n(a.s),
+			t: n(a.t)
+		}, a.id);
+	}) });
+}, B = (e, t, n, r) => e ? n : t ? n - r - 7 : n + r + 7, V = (e, t) => e ? "middle" : t ? "end" : "start", H = ({ n: e, at: t, r: n, left: r, dim: i, grabbing: a, onPointerEnter: o, onPointerDown: l, onPointerMove: u, onPointerUp: d }) => /* @__PURE__ */ S(s, {
+	className: a ? "cursor-grabbing" : "cursor-grab",
+	dim: i,
+	onPointerEnter: o,
+	onPointerDown: l,
+	onPointerMove: u,
+	onPointerUp: d,
+	onPointerCancel: d,
+	children: [
+		/* @__PURE__ */ x(c, {
+			cx: t.x,
+			cy: t.y,
+			r: n + 6
+		}),
+		/* @__PURE__ */ x("circle", {
+			className: e.hub ? "fill-hero" : "fill-paper stroke-l3",
+			cx: t.x,
+			cy: t.y,
+			r: e.hub ? n : n - .75,
+			strokeWidth: e.hub ? void 0 : 1.5
+		}),
+		/* @__PURE__ */ x(f, {
+			anchor: V(e.hub, r),
+			className: e.hub ? "fill-paper pointer-events-none" : "pointer-events-none",
+			dy: "0.35em",
+			muted: !e.hub,
+			voice: "label",
+			x: B(e.hub, r, t.x, n),
+			y: t.y,
+			children: e.datum.id
+		})
+	]
+}), U = (e, t) => {
+	let n = e.r * t, r = e.hub ? 0 : k + p(e.datum.id, "t-label"), i = j(e);
+	return {
+		left: n + (i ? r : 0),
+		right: n + (i ? 0 : r)
+	};
+}, W = (e, t, n) => {
+	let r = Infinity, i = -Infinity;
+	for (let a of e) {
+		let { left: e, right: o } = U(a, t);
+		r = Math.min(r, n(a) - e), i = Math.max(i, n(a) + o);
+	}
+	return -(r + i) / 2;
+}, G = (n) => {
+	let { width: i, height: a } = n, s = y(null), c = t(s), f = e(), [p, m] = b(null), [h, g] = b(null), _ = i < 460 ? .78 : 1, C = v(() => N(n.nodes, n.links), [n.nodes, n.links]), { redraw: w, simRef: T } = I(C, _, c, f), E = i / 2, D = a / 2 - o(n.note, i - 16, 16) / 2, O = (e, t) => {
+		let { left: n, right: r } = U(e, _);
+		return Math.max(-E + n, Math.min(E - r, t));
+	}, k = (e, t) => Math.max(-D + t + 8, Math.min(a - D - t - 8, e)), [M, P] = b(null), F = M ?? W(C.nodes, _, (e) => O(e, e.x ?? 0)), L = (e) => ({
+		x: E + F + O(e, e.x ?? 0),
+		y: D + k(e.y ?? 0, e.r * _)
+	}), R = (e, t) => {
+		let n = t.currentTarget.ownerSVGElement?.getBoundingClientRect();
+		n !== void 0 && (e.fx = O(e, t.clientX - n.left - E - F), e.fy = k(t.clientY - n.top - D, e.r * _));
+	}, B = h ?? p, V = /* @__PURE__ */ new Set();
+	for (let e of C.edges) B !== null && (e.s === B || e.t === B) && (V.add(e.s), V.add(e.t));
+	let G = `${C.nodes.find((e) => e.hub)?.datum.id ?? "Hub"} linked to ${C.nodes.length - 1} tributaries: ${C.nodes.flatMap((e) => e.hub ? [] : [`${e.datum.id} ${n.format(e.datum.value)}`]).join(", ")}. Drag a node to move it.`;
+	return /* @__PURE__ */ S("div", {
+		ref: s,
+		className: "relative",
+		children: [/* @__PURE__ */ S(d, {
+			className: "fade touch-none",
+			height: a,
+			label: G,
+			leave: () => {
+				h === null && m(null);
+			},
+			width: i,
+			children: [
+				/* @__PURE__ */ x(z, {
+					graph: C,
+					focus: B,
+					at: L
+				}),
+				C.nodes.map((e) => /* @__PURE__ */ x(H, {
+					n: e,
+					at: L(e),
+					r: e.r * _,
+					left: j(e),
+					dim: B !== null && B !== e && !V.has(e),
+					grabbing: h === e,
+					onPointerEnter: () => {
+						h === null && m(e);
+					},
+					onPointerDown: (t) => {
+						t.currentTarget.setPointerCapture(t.pointerId), P(F), R(e, t), g(e), T.current?.alphaTarget(.3).restart();
+					},
+					onPointerMove: (t) => {
+						h === e && (R(e, t), w());
+					},
+					onPointerUp: (t) => {
+						t.currentTarget.releasePointerCapture(t.pointerId), e.fx = e.hub ? 0 : null, e.fy = e.hub ? A : null, g(null), P(null), m(null), T.current?.alphaTarget(0);
+					}
+				}, e.datum.id)),
+				/* @__PURE__ */ x(u, {
+					height: a,
+					text: n.note,
+					width: i
+				})
+			]
+		}), B === null ? null : /* @__PURE__ */ x(r, {
+			x: L(B).x,
+			y: L(B).y - B.r * _ - 4,
+			children: /* @__PURE__ */ x(l, {
+				facts: [n.format(B.datum.value)],
+				lead: B.datum.id
+			})
+		})]
+	});
+}, K = (e) => {
+	let t = e.height ?? 440, r = e.nodes ?? g.nodes, i = e.links ?? g.links, o = e.format ?? M;
+	return /* @__PURE__ */ x(n, { children: (n) => /* @__PURE__ */ x(G, {
+		width: n,
+		height: n < 460 ? Math.min(n, 360) : t,
+		nodes: r,
+		links: i,
+		format: o,
+		note: a(e)
+	}) });
+};
+//#endregion
+export { K as ForceGraph };

package/lib/charts/glance/jitter-strip.data.js

@@ -0,0 +1,10 @@
+"use client";
+import e from "./jitter-strip.easter.json.js";
+//#region src/charts/glance/jitter-strip.data.ts
+var t = e.map((e) => ({
+	label: e.label,
+	names: e.days.map((t, n) => String(e.start + n)),
+	values: e.days
+}));
+//#endregion
+export { t as jitterStripDemo };

package/lib/charts/glance/jitter-strip.easter.json.js

@@ -0,0 +1,430 @@
+"use client";
+//#region src/charts/glance/jitter-strip.easter.json
+var e = [
+	{
+		label: "1800s",
+		start: 1800,
+		days: [
+			23,
+			15,
+			28,
+			20,
+			11,
+			24,
+			16,
+			8,
+			27,
+			12,
+			32,
+			24,
+			8,
+			28,
+			20,
+			5,
+			24,
+			16,
+			1,
+			21,
+			12,
+			32,
+			17,
+			9,
+			28,
+			13,
+			5,
+			25,
+			16,
+			29,
+			21,
+			13,
+			32,
+			17,
+			9,
+			29,
+			13,
+			5,
+			25,
+			10,
+			29,
+			21,
+			6,
+			26,
+			17,
+			2,
+			22,
+			14,
+			33,
+			18,
+			10,
+			30,
+			21,
+			6,
+			26,
+			18,
+			2,
+			22,
+			14,
+			34,
+			18,
+			10,
+			30,
+			15,
+			6,
+			26,
+			11,
+			31,
+			22,
+			7,
+			27,
+			19,
+			10,
+			23,
+			15,
+			7,
+			26,
+			11,
+			31,
+			23,
+			7,
+			27,
+			19,
+			4,
+			23,
+			15,
+			35,
+			20,
+			11,
+			31,
+			16,
+			8,
+			27,
+			12,
+			4,
+			24,
+			15,
+			28,
+			20,
+			12
+		]
+	},
+	{
+		label: "1900s",
+		start: 1900,
+		days: [
+			25,
+			17,
+			9,
+			22,
+			13,
+			33,
+			25,
+			10,
+			29,
+			21,
+			6,
+			26,
+			17,
+			2,
+			22,
+			14,
+			33,
+			18,
+			10,
+			30,
+			14,
+			6,
+			26,
+			11,
+			30,
+			22,
+			14,
+			27,
+			18,
+			10,
+			30,
+			15,
+			6,
+			26,
+			11,
+			31,
+			22,
+			7,
+			27,
+			19,
+			3,
+			23,
+			15,
+			35,
+			19,
+			11,
+			31,
+			16,
+			7,
+			27,
+			19,
+			4,
+			23,
+			15,
+			28,
+			20,
+			11,
+			31,
+			16,
+			8,
+			27,
+			12,
+			32,
+			24,
+			8,
+			28,
+			20,
+			5,
+			24,
+			16,
+			8,
+			21,
+			12,
+			32,
+			24,
+			9,
+			28,
+			20,
+			5,
+			25,
+			16,
+			29,
+			21,
+			13,
+			32,
+			17,
+			9,
+			29,
+			13,
+			5,
+			25,
+			10,
+			29,
+			21,
+			13,
+			26,
+			17,
+			9,
+			22,
+			14
+		]
+	},
+	{
+		label: "2000s",
+		start: 2e3,
+		days: [
+			33,
+			25,
+			10,
+			30,
+			21,
+			6,
+			26,
+			18,
+			2,
+			22,
+			14,
+			34,
+			18,
+			10,
+			30,
+			15,
+			6,
+			26,
+			11,
+			31,
+			22,
+			14,
+			27,
+			19,
+			10,
+			30,
+			15,
+			7,
+			26,
+			11,
+			31,
+			23,
+			7,
+			27,
+			19,
+			4,
+			23,
+			15,
+			35,
+			20,
+			11,
+			31,
+			16,
+			8,
+			27,
+			19,
+			4,
+			24,
+			15,
+			28,
+			20,
+			12,
+			31,
+			16,
+			8,
+			28,
+			12,
+			32,
+			24,
+			9,
+			28,
+			20,
+			5,
+			25,
+			16,
+			8,
+			21,
+			13,
+			32,
+			24,
+			9,
+			29,
+			20,
+			5,
+			25,
+			17,
+			29,
+			21,
+			13,
+			33,
+			17,
+			9,
+			29,
+			14,
+			5,
+			25,
+			10,
+			30,
+			21,
+			13,
+			26,
+			18,
+			9,
+			22,
+			14,
+			34,
+			25,
+			10,
+			30,
+			22
+		]
+	},
+	{
+		label: "2100s",
+		start: 2100,
+		days: [
+			7,
+			27,
+			19,
+			4,
+			23,
+			15,
+			28,
+			20,
+			11,
+			31,
+			16,
+			8,
+			27,
+			12,
+			32,
+			24,
+			8,
+			28,
+			20,
+			5,
+			24,
+			16,
+			8,
+			21,
+			12,
+			32,
+			24,
+			9,
+			28,
+			20,
+			5,
+			25,
+			16,
+			29,
+			21,
+			13,
+			32,
+			17,
+			9,
+			29,
+			13,
+			5,
+			25,
+			10,
+			29,
+			21,
+			13,
+			26,
+			17,
+			9,
+			22,
+			14,
+			33,
+			25,
+			10,
+			30,
+			21,
+			6,
+			26,
+			18,
+			2,
+			22,
+			14,
+			34,
+			18,
+			10,
+			30,
+			15,
+			6,
+			26,
+			11,
+			31,
+			22,
+			14,
+			27,
+			19,
+			10,
+			30,
+			15,
+			7,
+			26,
+			11,
+			31,
+			23,
+			7,
+			27,
+			19,
+			4,
+			23,
+			15,
+			35,
+			20,
+			11,
+			31,
+			16,
+			8,
+			27,
+			19,
+			4,
+			24
+		]
+	}
+];
+//#endregion
+export { e as default };