@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/lupi/ballot-tally.js

@@ -0,0 +1,125 @@
+"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 } from "../util.js";
+import { DimGroup as s, HitRect as c, TipText as l } from "../hover.js";
+import { TICK as u } from "../marks.js";
+import { FootNote as d } from "../plot-note.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { ballotTallyDemo as m } from "./ballot-tally.data.js";
+import { argMax as h } from "./util-b.js";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/charts/lupi/ballot-tally.tsx
+var y = {
+	five: u.md,
+	one: u.sm,
+	ten: u.lg
+}, b = (e, t) => Math.min(t, (Math.floor(Math.max(0, ...e.map((e) => e.value)) / 10) + 1) * 10), x = (e) => (e + 1) % 10 == 0 ? y.ten : (e + 1) % 5 == 0 ? y.five : y.one, S = ({ band: e, format: t, hero: n, index: r, layout: i, row: a, ruler: s }) => {
+	let { base: l, pitch: u, tall: d, x0: f } = i, m = Math.round(a.value), h = n ? "fill-hero" : "fill-l2", b = f + u * (m - 1) + 1;
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ _(c, {
+			height: e.h,
+			width: e.w,
+			x: e.x,
+			y: e.y
+		}),
+		/* @__PURE__ */ _(p, {
+			muted: !n,
+			order: r,
+			tier: "series",
+			voice: "label",
+			x: f,
+			y: l - d - 12,
+			children: a.label
+		}),
+		/* @__PURE__ */ _("g", {
+			className: "fade fill-l5",
+			style: o(r, "series"),
+			children: Array.from({ length: Math.max(0, s - m) }, (e, t) => {
+				let n = m + t, r = x(n);
+				return /* @__PURE__ */ _("rect", {
+					height: r,
+					width: 1,
+					x: f + u * n,
+					y: l - r
+				}, `rule-${a.label}-${n}`);
+			})
+		}),
+		/* @__PURE__ */ _("g", {
+			className: h,
+			children: Array.from({ length: m }, (e, t) => {
+				let n = d - y.ten + x(t);
+				return /* @__PURE__ */ _("rect", {
+					className: "grow-y",
+					height: n,
+					style: o(r * 12 + t, "dense"),
+					width: 1,
+					x: f + u * t,
+					y: l - n
+				}, `tall-${a.label}-${t}`);
+			})
+		}),
+		/* @__PURE__ */ _(p, {
+			order: r + 3,
+			tier: "series",
+			voice: "value",
+			x: b + 6,
+			y: l - d + 9,
+			children: t(a.value)
+		})
+	] });
+}, C = (o) => {
+	let c = o.data ?? m, u = o.total ?? 100, p = o.format ?? String, g = o.height ?? 460, y = e(), x = o.highlight ?? h(c.map((e) => e.value)), C = b(c, u);
+	return /* @__PURE__ */ _(t, { children: (e) => {
+		let t = i(r(o), e - 16, 24), m = c.map((e) => a(p(e.value), 11)), h = (e) => Math.max(e * (C - 1) + 1, ...c.map((t, n) => e * (Math.round(t.value) - 1) + 7 + (m[n] ?? 0))), b = Math.max(2, Math.floor((e - 1) / (C - 1)));
+		for (; b > 2 && h(b) > e;) --b;
+		let w = Math.round((e - h(b)) / 2), T = (g - t - 8) / Math.max(1, c.length), E = Math.round(Math.min(44, T * .42)), D = (e) => ({
+			base: Math.round(T * (e + 1) - T * .22),
+			pitch: b,
+			tall: E,
+			x0: w
+		}), O = y.key === null ? void 0 : c[y.key];
+		return /* @__PURE__ */ v("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ v(f, {
+				height: g,
+				label: c.map((e) => `${e.label}: ${p(e.value)} of ${u}`).join(", "),
+				leave: y.clear,
+				title: "Days out",
+				width: e,
+				children: [c.map((t, n) => /* @__PURE__ */ _(s, {
+					dim: y.dim(n),
+					onPointerEnter: y.enter(n),
+					children: /* @__PURE__ */ _(S, {
+						band: {
+							h: T,
+							w: e,
+							x: 0,
+							y: T * n
+						},
+						format: p,
+						hero: x === n,
+						index: n,
+						layout: D(n),
+						row: t,
+						ruler: C
+					})
+				}, t.label)), /* @__PURE__ */ _(d, {
+					height: g,
+					text: r(o),
+					width: e
+				})]
+			}), O !== void 0 && y.key !== null && /* @__PURE__ */ _(n, {
+				x: w + b * Math.round(O.value) * .5,
+				y: D(y.key).base - E - 24,
+				children: /* @__PURE__ */ _(l, {
+					facts: [`${p(O.value)} of ${u} went`],
+					lead: O.label
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { C as BallotTally };

package/lib/charts/lupi/barcode-lollipop.data.js

@@ -0,0 +1,195 @@
+"use client";
+//#region src/charts/lupi/barcode-lollipop.data.ts
+var e = Date.UTC(2026, 9, 1), t = [
+	6.087,
+	5.891,
+	5.689,
+	5.554,
+	5.54,
+	5.638,
+	5.784,
+	5.912,
+	5.973,
+	6.09,
+	6.116,
+	6.051,
+	5.914,
+	5.73,
+	5.522,
+	5.316,
+	5.138,
+	5.022,
+	4.997,
+	5.071,
+	5.227,
+	5.429,
+	5.642,
+	5.873,
+	6.143,
+	6.347,
+	6.459,
+	6.463,
+	6.361,
+	6.175,
+	5.943,
+	5.717,
+	5.556,
+	5.498,
+	5.529,
+	5.613,
+	5.798,
+	5.937,
+	6.009,
+	6.007,
+	5.942,
+	5.828,
+	5.685,
+	5.53,
+	5.377,
+	5.241,
+	5.138,
+	5.087,
+	5.105,
+	5.197,
+	5.405,
+	5.689,
+	5.984,
+	6.251,
+	6.454,
+	6.564,
+	6.566,
+	6.465,
+	6.282,
+	6.048,
+	5.8,
+	5.582,
+	5.477,
+	5.516,
+	5.598,
+	5.692,
+	5.771,
+	5.821,
+	5.835,
+	5.814,
+	5.763,
+	5.691,
+	5.606,
+	5.512,
+	5.416,
+	5.322,
+	5.24,
+	5.248,
+	5.356,
+	5.518,
+	5.729,
+	5.97,
+	6.212,
+	6.421,
+	6.56,
+	6.605,
+	6.544,
+	6.386,
+	6.148,
+	5.86,
+	5.693,
+	5.572
+], n = [
+	-.101,
+	.101,
+	.276,
+	.356,
+	.688,
+	.312,
+	.177,
+	.02,
+	-.149,
+	-.248,
+	-.243,
+	-.147,
+	.015,
+	.218,
+	.433,
+	.634,
+	.791,
+	.872,
+	.858,
+	1.109,
+	.75,
+	.576,
+	.316,
+	.002,
+	-.268,
+	-.458,
+	-.544,
+	-.519,
+	-.395,
+	-.204,
+	.01,
+	.191,
+	.294,
+	.6,
+	.306,
+	.257,
+	.083,
+	-.058,
+	-.123,
+	-.108,
+	-.026,
+	.102,
+	.251,
+	.403,
+	.54,
+	.649,
+	.716,
+	.729,
+	.682,
+	.815,
+	.559,
+	.254,
+	-.059,
+	-.334,
+	-.532,
+	-.628,
+	-.618,
+	-.516,
+	-.349,
+	-.147,
+	.057,
+	.23,
+	.352,
+	.445,
+	.346,
+	.229,
+	.13,
+	.071,
+	.058,
+	.086,
+	.14,
+	.209,
+	.282,
+	.355,
+	.425,
+	.493,
+	.55,
+	.583,
+	.576,
+	.482,
+	.247,
+	-.019,
+	-.282,
+	-.501,
+	-.643,
+	-.691,
+	-.641,
+	-.503,
+	-.292,
+	-.033,
+	.239,
+	.399
+], r = t.map((t, r) => ({
+	date: new Date(e + r * 864e5),
+	low: n[r],
+	value: t
+}));
+//#endregion
+export { r as barcodeLollipopDemo };

package/lib/charts/lupi/barcode-lollipop.js

@@ -0,0 +1,161 @@
+"use client";
+import { monthTickLabels as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { clamp as i, noteOf as a, noteSpace as o, sansWidth as s, stagger as c } from "../util.js";
+import { DimGroup as l, TipText as u } from "../hover.js";
+import { crisp as d } from "../axes.js";
+import { DOT as f } from "../marks.js";
+import { Dot as p } from "../markers.js";
+import { PlotNote as m } from "../plot-note.js";
+import { Stem as h, VRule as g } from "../rules.js";
+import { ChartSvg as _ } from "../svg.js";
+import { Label as v } from "../text.js";
+import { argMax as y } from "./util-b.js";
+import { barcodeLollipopDemo as b } from "./barcode-lollipop.data.js";
+import { scaleLinear as x } from "d3-scale";
+import { format as S } from "d3-format";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/charts/lupi/barcode-lollipop.tsx
+var T = S(".2f"), E = (e) => `${T(e)} m`, D = (e) => e.toLocaleString("en-GB", {
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC",
+	weekday: "short"
+}), O = (e, t, n) => {
+	let r = e.map((e) => ({ ...e })).toSorted((e, t) => e.x - t.x), a = (e, t) => Math.abs(e.y - t.y) < 14;
+	for (let e = 0; e < 40; e += 1) {
+		let e = !1;
+		for (let [t, n] of r.entries()) {
+			let i = r[t - 1], o = i === void 0 ? 0 : i.x + i.w / 2 + 6 - (n.x - n.w / 2);
+			i !== void 0 && o > .5 && a(i, n) && (i.x -= o / 2, n.x += o / 2, e = !0);
+		}
+		for (let e of r) e.x = i(e.x, t + e.w / 2, n - e.w / 2);
+		if (!e) break;
+	}
+	return new Map(r.map((e) => [e.i, e.x]));
+}, k = (e, t, n, r, i) => ({
+	i: e,
+	w: s(n(t.value), 12),
+	x: r(e),
+	y: i(t.value)
+}), A = ({ datum: e, dim: t, dotSize: n, format: r, hero: i, i: a, isTop: o, labelX: s, low: u, x: m, y: g }) => {
+	let _ = g(e.value), y = f[i ? "md" : n], b = i ? Math.round(m) : d(m);
+	return /* @__PURE__ */ w(l, {
+		dim: t,
+		children: [
+			/* @__PURE__ */ C(h, {
+				className: `grow-y from-top ${i ? "stroke-hero" : "stroke-l4"}`,
+				hero: i,
+				style: c(a, "dense"),
+				x: m,
+				y0: _,
+				y1: g(u)
+			}),
+			/* @__PURE__ */ C(p, {
+				className: `pop ${i ? "fill-hero" : "fill-l2"}`,
+				cx: b,
+				cy: _,
+				size: i ? "md" : n,
+				style: c(a, "dense")
+			}),
+			o ? /* @__PURE__ */ C(v, {
+				anchor: "middle",
+				className: "fade",
+				halo: !0,
+				voice: i ? "value" : "axis",
+				x: s ?? m,
+				y: _ - y - 8,
+				children: r(e.value)
+			}) : null
+		]
+	});
+}, j = (t) => {
+	let n = t.data.flatMap((e, t) => t === 0 || e.date.getUTCDate() === 1 ? [t] : []), r = e(n.map((e) => t.data[e].date));
+	return /* @__PURE__ */ C("g", { children: n.map((e, n) => /* @__PURE__ */ C(v, {
+		voice: "axis",
+		x: t.x(e),
+		y: t.floor + 22,
+		children: r[n]
+	}, `month-${t.data[e].date.toISOString()}`)) });
+}, M = (e) => /* @__PURE__ */ w("g", { children: [e.data.map((t, n) => /* @__PURE__ */ C(g, {
+	className: `grow-y ${e.hover === n ? "stroke-l5 shape-crisp" : "grid-line"}`,
+	kind: "plain",
+	style: c(n, "dense"),
+	x: e.x(n),
+	y0: e.top,
+	y1: e.floor
+}, `bar-${t.date.toISOString()}`)), /* @__PURE__ */ C(j, {
+	data: e.data,
+	floor: e.floor,
+	x: e.x
+})] }), N = (e) => {
+	let s = e.data ?? b, c = e.height ?? 440, l = e.format ?? E, d = e.top ?? 3, p = t(), h = s.map((e) => e.low ?? e.value * .9), g = new Set(s.map((e, t) => ({
+		i: t,
+		v: e.value
+	})).toSorted((e, t) => t.v - e.v).slice(0, d).map((e) => e.i)), v = y(s.map((e) => e.value));
+	return /* @__PURE__ */ C(n, {
+		overlay: p.at === null ? null : /* @__PURE__ */ C(r, {
+			x: p.at.x,
+			y: p.at.y,
+			children: /* @__PURE__ */ C(u, {
+				facts: [`high ${l(s[p.at.key].value)}`, `low ${l(h[p.at.key])}`],
+				lead: D(s[p.at.key].date)
+			})
+		}),
+		children: (t) => {
+			let n = {
+				bottom: 30 + o(a(e), t - 12, 20),
+				left: 4,
+				right: 8,
+				top: 10
+			}, r = c - n.bottom, u = (t - n.left - n.right) / Math.max(1, s.length - 1), d = (e) => n.left + e * u, y = x().domain([Math.min(...h), Math.max(...s.map((e) => e.value))]).range([r - 6, n.top + 22]), b = u >= 8 ? "sm" : "xs", S = O([...g].map((e) => k(e, s[e], l, d, y)), n.left - u / 2, t - 2), T = (e) => {
+				let r = e.clientX - e.currentTarget.getBoundingClientRect().left;
+				if (r < n.left - u || r > t - n.right + u) {
+					p.clear();
+					return;
+				}
+				let a = i(Math.round((r - n.left) / u), 0, s.length - 1);
+				p.show(a, d(a), y(s[a].value) - f[b] - 6);
+			};
+			return /* @__PURE__ */ w(_, {
+				height: c,
+				label: `Daily high and low water over ${s.length} days. Highest high water: ${[...g].map((e) => `${D(s[e].date)} ${l(s[e].value)}`).join(", ")}`,
+				leave: p.clear,
+				onPointerMove: T,
+				title: "One hairline per day, a lollipop at each day's high water",
+				width: t,
+				children: [
+					/* @__PURE__ */ C(M, {
+						data: s,
+						floor: r,
+						hover: p.key,
+						top: n.top,
+						x: d
+					}),
+					s.map((e, t) => /* @__PURE__ */ C(A, {
+						datum: e,
+						dim: p.dim(t),
+						dotSize: b,
+						format: l,
+						i: t,
+						hero: t === v,
+						isTop: g.has(t),
+						labelX: S.get(t),
+						low: h[t],
+						x: d(t),
+						y
+					}, `day-${e.date.toISOString()}`)),
+					/* @__PURE__ */ C(m, {
+						text: a(e),
+						width: t - n.left - n.right,
+						x: (n.left + t - n.right) / 2,
+						y: c - 6
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { N as BarcodeLollipop };

package/lib/charts/lupi/brand-spectrum.data.js

@@ -0,0 +1,70 @@
+"use client";
+//#region src/charts/lupi/brand-spectrum.data.ts
+var e = [
+	"Snowdon",
+	"Scafell Pike",
+	"Slieve Donard"
+], t = [
+	{
+		left: "Low",
+		others: [
+			.81,
+			.73,
+			.63
+		],
+		right: "High",
+		us: 1
+	},
+	{
+		left: "Minor",
+		others: [
+			.77,
+			.68,
+			.61
+		],
+		right: "Prominent",
+		us: 1
+	},
+	{
+		left: "Low col",
+		others: [
+			.04,
+			.05,
+			.02
+		],
+		right: "High col",
+		us: 0
+	},
+	{
+		left: "Southern",
+		others: [
+			.33,
+			.45,
+			.43
+		],
+		right: "Northern",
+		us: .65
+	},
+	{
+		left: "Western",
+		others: [
+			.53,
+			.6,
+			.38
+		],
+		right: "Eastern",
+		us: .46
+	},
+	{
+		left: "Few lists",
+		others: [
+			.67,
+			1,
+			.58
+		],
+		right: "Many lists",
+		us: .58
+	}
+];
+//#endregion
+export { e as brandSpectrumCompetitors, t as brandSpectrumDemo };