@howells/hairline 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,170 @@
+"use client";
+//#region src/charts/lupi/dotty-matrix.data.ts
+var e = /* @__PURE__ */ "1987–89.1988–90.1989–91.1990–92.1991–93.1992–94.1993–95.1994–96.1995–97.1996–98.1997–99.1998–00.1999–01.2000–02.2001–03.2002–04.2003–05.2004–06.2005–07.2006–08.2007–09.2008–10.2009–11.2010–12.2011–13.2012–14.2013–15.2014–16.2015–17.2016–18.2017–19.2018–20.2019–21.2020–22.2021–23.2022–24".split("."), t = (t) => e[t] ?? "", n = [
+	{
+		label: "Northern Ireland",
+		values: [
+			2.33,
+			2.58,
+			2.98,
+			3.4,
+			3.58,
+			3.85,
+			3.96,
+			4.36,
+			4.67,
+			5.01,
+			5.12,
+			5.32,
+			5.64,
+			6.04,
+			6.4,
+			6.67,
+			6.84,
+			6.93,
+			7,
+			7.18,
+			7.52,
+			7.82,
+			8.25,
+			8.54,
+			8.85,
+			9.11,
+			9.16,
+			9.39,
+			9.32,
+			9.55,
+			9.64,
+			9.56,
+			9.32,
+			9.27,
+			9.6,
+			9.63
+		]
+	},
+	{
+		label: "England",
+		values: [
+			1.57,
+			1.77,
+			2,
+			2.29,
+			2.51,
+			2.85,
+			3.02,
+			3.27,
+			3.43,
+			3.66,
+			3.92,
+			4.21,
+			4.53,
+			4.82,
+			5.05,
+			5.36,
+			5.71,
+			6.08,
+			6.37,
+			6.62,
+			6.92,
+			7.23,
+			7.63,
+			7.93,
+			8.12,
+			8.25,
+			8.26,
+			8.33,
+			8.35,
+			8.4,
+			8.51,
+			8.15,
+			7.91,
+			7.75,
+			7.99,
+			8.31
+		]
+	},
+	{
+		label: "Scotland",
+		values: [
+			1.44,
+			1.65,
+			1.95,
+			2.27,
+			2.36,
+			2.59,
+			2.77,
+			2.97,
+			3.13,
+			3.29,
+			3.53,
+			3.74,
+			3.99,
+			4.21,
+			4.4,
+			4.68,
+			5.12,
+			5.49,
+			5.69,
+			5.89,
+			6.24,
+			6.69,
+			7.1,
+			7.4,
+			7.67,
+			7.95,
+			8.01,
+			7.99,
+			7.93,
+			7.95,
+			8.03,
+			7.68,
+			7.46,
+			7.42,
+			7.67,
+			8.01
+		]
+	},
+	{
+		label: "Wales",
+		values: [
+			1.81,
+			2.06,
+			2.28,
+			2.6,
+			2.72,
+			2.91,
+			2.9,
+			3.18,
+			3.29,
+			3.67,
+			3.78,
+			4.06,
+			4.3,
+			4.74,
+			4.95,
+			5.26,
+			5.58,
+			6.04,
+			6.16,
+			6.35,
+			6.56,
+			6.99,
+			7.31,
+			7.55,
+			7.63,
+			7.85,
+			7.84,
+			7.84,
+			7.7,
+			7.65,
+			7.82,
+			7.59,
+			7.46,
+			7.41,
+			7.54,
+			7.73
+		]
+	}
+];
+//#endregion
+export { n as dottyMatrixDemo, t as dottyPeriodLabel };

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

@@ -0,0 +1,126 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { clamp as n, noteOf as r, noteSpace as i, sansWidth as a, stagger as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { FootNote as l } from "../plot-note.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 { Stipple as m } from "../texture.js";
+import { dottyMatrixDemo as h, dottyPeriodLabel as g } from "./dotty-matrix.data.js";
+import { useState as _ } from "react";
+import { scaleSqrt as v } from "d3-scale";
+import { format as y } from "d3-format";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/lupi/dotty-matrix.tsx
+var S = y(".1f"), C = [
+	"fill-hero",
+	"fill-l3",
+	"fill-l4",
+	"fill-l5"
+], w = (e, t, r, i, a, o) => {
+	let s = 1 + .485 * (r - 1), c = n(Math.min((t - 24 - a) / s, (e - 14 - o) / 2), 70, 190), l = c / (i - 1 + 1.55);
+	return {
+		a: l,
+		b: l / 2,
+		cx: (e - 2 * c - 14 - o) / 2 + c,
+		gap: c * .485,
+		halfW: c,
+		height: Math.min(t, Math.round(16 + c * s + 8 + a)),
+		n: i,
+		top: 16 + c / 2
+	};
+}, T = ({ dim: e, g: t, geo: n, group: r, onHover: i, radius: a, screen: c }) => {
+	let { a: l, b: u, cx: p, gap: m, halfW: h, n: g } = n, _ = n.top + t * m, v = `M${p},${_ - h / 2}L${p + h},${_}L${p},${_ + h / 2}L${p - h},${_}Z`, y = C.at(t) ?? "fill-l5";
+	return /* @__PURE__ */ x(s, {
+		dim: e,
+		children: [
+			/* @__PURE__ */ b("g", {
+				className: "fade",
+				style: o(t),
+				children: /* @__PURE__ */ b("path", {
+					className: "stroke-l5",
+					d: v,
+					fill: f(c),
+					strokeWidth: 1
+				})
+			}),
+			r.values.map((e, n) => {
+				let s = Math.floor(n / g), c = n % g, d = p + (c - s) * l, f = _ + (s + c - (g - 1)) * u, m = `${r.label}-${n}`;
+				return e <= 0 ? null : /* @__PURE__ */ b("circle", {
+					className: `pop ${y}`,
+					cx: d,
+					cy: f,
+					onPointerEnter: () => {
+						i({
+							g: t,
+							k: n,
+							x: d,
+							y: f - a(e) - 4
+						});
+					},
+					r: a(e),
+					style: o(t * 12 + n, "dense")
+				}, m);
+			}),
+			/* @__PURE__ */ b(d, {
+				className: "fade",
+				middle: !0,
+				muted: t !== 0,
+				voice: "label",
+				x: p + h + 14,
+				y: _,
+				children: r.label
+			})
+		]
+	});
+}, E = (n) => {
+	let o = n.data ?? h, s = n.height ?? 440, d = n.format ?? S, f = n.cellLabel ?? g, y = n.noun ?? "years gained", [C, E] = _(null), D = p("plane")("screen"), O = Math.max(2, Math.round(Math.sqrt(Math.max(...o.map((e) => e.values.length))))), k = Math.max(1, ...o.flatMap((e) => e.values));
+	return /* @__PURE__ */ b(e, {
+		overlay: C === null ? null : /* @__PURE__ */ b(t, {
+			x: C.x,
+			y: C.y,
+			children: /* @__PURE__ */ b(c, {
+				facts: [f(C.k), `${d(o[C.g].values[C.k])} ${y}`],
+				lead: o[C.g].label
+			})
+		}),
+		children: (e) => {
+			let t = w(e, s, o.length, O, i(r(n), e - 16, 20), Math.max(0, ...o.map((e) => a(e.label, 10.7)))), c = v().domain([0, k]).range([0, t.a * .3]), f = (e) => Math.max(2, c(e)), p = o.map((e, t) => ({
+				g: t,
+				group: e
+			})).toReversed();
+			return /* @__PURE__ */ x(u, {
+				height: t.height,
+				label: `Stacked dot planes: ${o.map((e) => `${e.label} ${d(e.values.reduce((e, t) => e + t, 0))} ${y}`).join(", ")}`,
+				leave: () => {
+					E(null);
+				},
+				title: "Isometric planes of dots, one plane per group",
+				width: e,
+				children: [
+					/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ b(m, {
+						id: D,
+						tone: "fill-l5"
+					}) }),
+					p.map(({ g: e, group: n }) => /* @__PURE__ */ b(T, {
+						dim: C !== null && C.g !== e,
+						g: e,
+						geo: t,
+						group: n,
+						onHover: E,
+						radius: f,
+						screen: D
+					}, n.label)),
+					/* @__PURE__ */ b(l, {
+						height: t.height,
+						text: r(n),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { E as DottyMatrix };

package/lib/charts/lupi/hourglass-stream.data.js

@@ -0,0 +1,30 @@
+"use client";
+//#region src/charts/lupi/hourglass-stream.data.ts
+var e = [
+	{
+		label: "£1 or more",
+		value: 24992
+	},
+	{
+		label: "£100 or more",
+		value: 5953
+	},
+	{
+		label: "£500 or more",
+		value: 2554
+	},
+	{
+		label: "£1,000 or more",
+		value: 1581
+	},
+	{
+		label: "£2,500 or more",
+		value: 704
+	},
+	{
+		label: "£5,000 or more",
+		value: 311
+	}
+];
+//#endregion
+export { e as hourglassDemo };

package/lib/charts/lupi/hourglass-stream.js

@@ -0,0 +1,158 @@
+"use client";
+import { fmtInt as e } from "../../lib/format.js";
+import { useHover 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, sansWidth as s, stagger as c } from "../util.js";
+import { DimGroup as l, HitRect as u, TipText as d } from "../hover.js";
+import { crisp as f } from "../axes.js";
+import { PlotNote as p } from "../plot-note.js";
+import { HRule as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { TEXTURE_PITCH as _ } from "../texture-ids.js";
+import { vCurve as v } from "./util-b.js";
+import { hourglassDemo as y } from "./hourglass-stream.data.js";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/charts/lupi/hourglass-stream.tsx
+var C = _.hatch, w = (e, t, n, r) => {
+	let i = Math.max(3, Math.round(e.value / t * r)), a = i * C, o = Math.round(n - a / 2);
+	return {
+		bars: Array.from({ length: i }, (t, n) => ({
+			id: `${e.label}-${n}`,
+			x: f(o + C * n + C / 2)
+		})),
+		w: a,
+		x0: o
+	};
+}, T = (e, t, n) => e.slice(1).flatMap((r, i) => {
+	let a = e[i];
+	return r.bars.filter((e, t) => t % 2 == 0).map((e, o) => {
+		let s = (e.x - r.x0) / r.w, c = Math.min(a.bars.length - 1, Math.floor(s * a.bars.length)), l = a.bars[c]?.x ?? a.x0;
+		return {
+			d: v(l, t(i) + n / 2, e.x, t(i + 1) - n / 2, .55),
+			id: `thread-${i}-${o}`,
+			k: o,
+			step: i
+		};
+	});
+}), E = ({ stage: e, strip: t, index: n, y: r, h: i, labelX: a, hero: o, format: s }) => /* @__PURE__ */ S(b, { children: [
+	/* @__PURE__ */ x(u, {
+		x: t.x0 - 6,
+		y: r - i / 2 - 6,
+		width: a + 100 - t.x0,
+		height: i + 12
+	}),
+	t.bars.map((e, t) => /* @__PURE__ */ x("line", {
+		className: `grow-y shape-crisp ${o ? "stroke-hero" : "stroke-l3"}`,
+		style: c(n * 6 + t * .08, "mark"),
+		x1: e.x,
+		x2: e.x,
+		y1: Math.round(r + i / 2),
+		y2: Math.round(r - i / 2),
+		strokeWidth: 1
+	}, e.id)),
+	a - 10 - (t.x0 + t.w + 14) < 16 ? null : /* @__PURE__ */ x(m, {
+		className: "fade",
+		kind: "rule",
+		style: c(n, "series"),
+		x0: t.x0 + t.w + 14,
+		x1: a - 10,
+		y: r
+	}),
+	/* @__PURE__ */ x(g, {
+		order: n,
+		tier: "series",
+		voice: "label",
+		x: a,
+		y: r - 4,
+		children: e.label
+	}),
+	/* @__PURE__ */ x(g, {
+		order: n,
+		tier: "series",
+		voice: "value",
+		x: a,
+		y: r + 13,
+		children: s(e.value)
+	})
+] }), D = ({ data: e, left: t, strips: n, yOf: r }) => /* @__PURE__ */ x("g", { children: e.slice(1).map((i, a) => {
+	let o = e[a]?.value ?? 1, l = (r(a) + r(a + 1)) / 2, u = `${Math.round(i.value / o * 100)}%`, d = t + s(u, 11) + 10, f = ((n[a]?.bars[0]?.x ?? 0) + (n[a + 1]?.bars[0]?.x ?? 0)) / 2;
+	return /* @__PURE__ */ S("g", {
+		className: "fade",
+		style: c(a + 3, "series"),
+		children: [/* @__PURE__ */ x(g, {
+			middle: !0,
+			voice: "value",
+			x: t,
+			y: l,
+			children: u
+		}), f - 10 - d < 16 ? null : /* @__PURE__ */ x(m, {
+			kind: "rule",
+			x0: Math.round(d),
+			x1: Math.round(f - 10),
+			y: l
+		})]
+	}, `share-${i.label}`);
+}) }), O = (u) => {
+	let f = u.data ?? y, m = u.height ?? 470, g = u.format ?? e, _ = t(), v = Math.max(...f.map((e) => e.value));
+	return /* @__PURE__ */ x(n, { children: (e) => {
+		let t = e < 460, n = Math.min(e, 640), y = (e - n) / 2, b = Math.max(...f.flatMap((e) => [s(e.label, 11), s(g(e.value), 11)])), O = y + n - b, k = y + (t ? 60 : 96), A = O - (t ? 16 : 30), j = (k + A) / 2, M = e - 16 - 2 * Math.abs(j - e / 2), N = t ? 20 : 28, P = N / 2 + 4, F = f.length > 1 ? (m - P - N / 2 - 12 - o(a(u), M, 24)) / (f.length - 1) : 0, I = (e) => P + F * e, L = f.map((e) => w(e, v, j, Math.floor((A - k) / C))), R = _.key === null ? void 0 : f[_.key], [z] = f;
+		return /* @__PURE__ */ S("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ S(h, {
+				height: m,
+				label: `Payments by size: ${f.map((e) => `${e.label} ${g(e.value)}`).join(", ")}`,
+				leave: _.clear,
+				title: "Library earnings",
+				width: e,
+				children: [
+					/* @__PURE__ */ x("g", {
+						className: "stroke-l5 fill-none",
+						children: T(L, I, N).map((e) => /* @__PURE__ */ x("path", {
+							className: `draw ${i(_.key !== null && _.key !== e.step && _.key !== e.step + 1)}`,
+							pathLength: 1,
+							style: c(e.step * 10 + e.k % 10, "fine"),
+							d: e.d,
+							strokeWidth: 1
+						}, e.id))
+					}),
+					/* @__PURE__ */ x(D, {
+						data: f,
+						left: y,
+						strips: L,
+						yOf: I
+					}),
+					f.map((e, t) => /* @__PURE__ */ x(l, {
+						dim: _.dim(t),
+						onPointerEnter: _.enter(t),
+						children: /* @__PURE__ */ x(E, {
+							stage: e,
+							strip: L[t],
+							index: t,
+							y: I(t),
+							h: N,
+							labelX: O,
+							hero: (u.highlight ?? f.length - 1) === t,
+							format: g
+						})
+					}, e.label)),
+					/* @__PURE__ */ x(p, {
+						text: a(u),
+						width: M,
+						x: j,
+						y: m - 6
+					})
+				]
+			}), R !== void 0 && _.key !== null && z !== void 0 && /* @__PURE__ */ x(r, {
+				x: j,
+				y: I(_.key) - N / 2 - 4,
+				children: /* @__PURE__ */ x(d, {
+					facts: [g(R.value), ..._.key > 0 ? [`${Math.round(R.value / z.value * 100)}% of ${z.label.toLowerCase()}`] : []],
+					lead: R.label
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { O as HourglassStream };

package/lib/charts/lupi/hundred-field.data.js

@@ -0,0 +1,38 @@
+"use client";
+//#region src/charts/lupi/hundred-field.data.ts
+var e = [
+	{
+		label: "O positive",
+		value: 36
+	},
+	{
+		label: "AB negative",
+		value: 1
+	},
+	{
+		label: "A positive",
+		value: 28
+	},
+	{
+		label: "B negative",
+		value: 3
+	},
+	{
+		label: "O negative",
+		value: 14
+	},
+	{
+		label: "AB positive",
+		value: 2
+	},
+	{
+		label: "A negative",
+		value: 8
+	},
+	{
+		label: "B positive",
+		value: 8
+	}
+];
+//#endregion
+export { e as hundredFieldDemo };