@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/glance/rainfall-dual-area.data.js

@@ -0,0 +1,177 @@
+"use client";
+var e = [
+	[
+		2015,
+		11,
+		28,
+		26,
+		64.7
+	],
+	[
+		2015,
+		11,
+		29,
+		11.8,
+		88.9
+	],
+	[
+		2015,
+		11,
+		30,
+		17.6,
+		70.6
+	],
+	[
+		2015,
+		12,
+		1,
+		4.2,
+		59.2
+	],
+	[
+		2015,
+		12,
+		2,
+		11.4,
+		52.9
+	],
+	[
+		2015,
+		12,
+		3,
+		24.6,
+		95.7
+	],
+	[
+		2015,
+		12,
+		4,
+		49.6,
+		78.9
+	],
+	[
+		2015,
+		12,
+		5,
+		76.8,
+		315.1
+	],
+	[
+		2015,
+		12,
+		6,
+		1,
+		210.2
+	],
+	[
+		2015,
+		12,
+		7,
+		11.8,
+		53.1
+	],
+	[
+		2015,
+		12,
+		8,
+		7.2,
+		62.2
+	],
+	[
+		2015,
+		12,
+		9,
+		43.6,
+		76.6
+	],
+	[
+		2015,
+		12,
+		10,
+		8.6,
+		162
+	],
+	[
+		2015,
+		12,
+		11,
+		5.2,
+		60.3
+	],
+	[
+		2015,
+		12,
+		12,
+		10.8,
+		60.3
+	],
+	[
+		2015,
+		12,
+		13,
+		16.6,
+		44
+	],
+	[
+		2015,
+		12,
+		14,
+		3.6,
+		55.7
+	],
+	[
+		2015,
+		12,
+		15,
+		4.2,
+		48.7
+	],
+	[
+		2015,
+		12,
+		16,
+		1.8,
+		51.9
+	],
+	[
+		2015,
+		12,
+		17,
+		2.4,
+		33.7
+	],
+	[
+		2015,
+		12,
+		18,
+		5,
+		31.1
+	],
+	[
+		2015,
+		12,
+		19,
+		29.4,
+		73.7
+	],
+	[
+		2015,
+		12,
+		20,
+		6.6,
+		83.2
+	],
+	[
+		2015,
+		12,
+		21,
+		36.2,
+		71.2
+	]
+].map(([e, t, n, r, i]) => ({
+	date: new Date(Date.UTC(e, t - 1, n)),
+	input: r,
+	output: i
+}));
+//#endregion
+export { e as rainfallDemo };

package/lib/charts/glance/rainfall-dual-area.js

@@ -0,0 +1,192 @@
+"use client";
+import { dayTickLabels as e, fmtDay as t } from "../../lib/format.js";
+import { useHover as n } from "../hooks.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { noteOf as a, noteSpace as o, stagger as s } from "../util.js";
+import { TipText as c } from "../hover.js";
+import { crisp as l } from "../axes.js";
+import { barPath as u } from "../shapes.js";
+import { Ring as d } from "../markers.js";
+import { FootNote as f } from "../plot-note.js";
+import { HRule as p, Stem as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { paint as _, useTextureIds as v } from "../texture-ids.js";
+import { Hatch as y, Rules as b } from "../texture.js";
+import { labelRoom as x } from "./util-a.js";
+import { rainfallDemo as S } from "./rainfall-dual-area.data.js";
+import { scaleBand as C, scaleLinear as w } from "d3-scale";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { area as D, curveMonotoneX as O, line as k } from "d3-shape";
+//#region src/charts/glance/rainfall-dual-area.tsx
+var A = (e) => `${e} mm`, j = (e) => `${e} m³/s`, M = (e) => w().domain([0, e]).nice(4).ticks(4), N = (e) => e.filter((t, n) => n === 0 || n === Math.floor(e.length / 2) || n === e.length - 1), P = ({ f: e, fmt: t }) => {
+	let n = e.x.bandwidth();
+	return /* @__PURE__ */ E("g", { children: [
+		N(e.inTicks).map((n) => /* @__PURE__ */ T(g, {
+			anchor: "end",
+			dy: "0.35em",
+			voice: "axis",
+			x: e.left - 10,
+			y: e.yIn(n),
+			children: t(n)
+		}, n)),
+		e.data.map((t, r) => t.input > 0 ? /* @__PURE__ */ T("path", {
+			className: `grow-y from-top transition-opacity ${e.hover === r ? "fill-l2 stroke-l2" : "stroke-l5"} shape-crisp ${e.hover !== null && e.hover !== r ? "opacity-30" : ""}`,
+			style: s(r, "mark"),
+			d: u(l(e.cx(r) - n / 2), l(e.top), Math.round(n) - 1, Math.round(e.yIn(t.input)) - Math.round(e.top), "down"),
+			fill: e.hover === r ? void 0 : _(e.tex("hatch")),
+			strokeWidth: 1
+		}, t.date.toISOString()) : null),
+		/* @__PURE__ */ T(p, {
+			x0: e.left,
+			x1: e.right,
+			y: e.top
+		})
+	] });
+}, F = ({ f: t, fmt: n, clip: r, narrow: i }) => {
+	let a = k().x((e, n) => t.cx(n)).y((e) => t.yOut(e.output)).curve(O), o = D().x((e, n) => t.cx(n)).y0(t.floor).y1((e) => t.yOut(e.output)).curve(O), s = i ? 6 : 3, c = t.data.flatMap((e, t) => t % s === 0 ? [{
+		d: e,
+		i: t
+	}] : []), l = e(c.map((e) => e.d.date));
+	return /* @__PURE__ */ E("g", { children: [
+		/* @__PURE__ */ T("path", {
+			fill: _(t.tex("rule")),
+			clipPath: `url(#${r})`,
+			d: o(t.data) ?? ""
+		}),
+		t.yOut.ticks(i ? 4 : 6).map((e) => /* @__PURE__ */ E("g", { children: [/* @__PURE__ */ T(p, {
+			kind: e === 0 ? "hairline" : "grid",
+			x0: t.left,
+			x1: t.right,
+			y: t.yOut(e)
+		}), /* @__PURE__ */ T(g, {
+			anchor: "end",
+			dy: "0.35em",
+			voice: "axis",
+			x: t.left - 10,
+			y: t.yOut(e),
+			children: n(e)
+		})] }, e)),
+		/* @__PURE__ */ T("g", {
+			clipPath: `url(#${r})`,
+			children: /* @__PURE__ */ T("path", {
+				className: "stroke-ink",
+				d: a(t.data) ?? "",
+				fill: "none",
+				strokeWidth: 2,
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			})
+		}),
+		c.map((e, n) => /* @__PURE__ */ T(g, {
+			anchor: n === 0 ? "start" : "middle",
+			dx: n === 0 ? -t.x.bandwidth() / 2 : 0,
+			voice: "axis",
+			x: t.cx(e.i),
+			y: t.floor + 16,
+			children: l[n]
+		}, e.d.date.toISOString()))
+	] });
+}, I = (e) => /* @__PURE__ */ E("g", {
+	pointerEvents: "none",
+	children: [/* @__PURE__ */ T(m, {
+		className: "stroke-muted",
+		x: e.f.cx(e.i),
+		y0: Math.round(e.f.yIn(e.datum.input) + 4),
+		y1: e.f.floor
+	}), /* @__PURE__ */ T(d, {
+		className: "stroke-ink",
+		cx: e.f.cx(e.i),
+		cy: e.f.yOut(e.datum.output),
+		size: "md",
+		weight: "cursor"
+	})]
+}), L = (e) => {
+	let s = e.data ?? S, l = e.height ?? 420, u = e.formatInput ?? A, d = e.formatOutput ?? j, p = e.inputName ?? "rain", m = e.outputName ?? "flow", g = v("rain"), _ = n(), D = s.at(-1), O = `${p} hanging from the top and ${m} rising below over ${s.length} days${D === void 0 ? "" : `; last: ${u(D.input)}, ${d(D.output)}`}`;
+	return /* @__PURE__ */ T(r, { children: (n) => {
+		let [, r = 1] = w().domain([0, Math.max(...s.map((e) => e.output))]).nice(6).domain(), v = M(Math.max(...s.map((e) => e.input))).at(-1), S = {
+			bottom: 24 + o(a(e), n - 16, 20),
+			left: x([u(v ?? 0), d(r)], "t-axis") + 12,
+			right: 0,
+			top: 6
+		}, D = l - S.top - S.bottom, k = l - S.bottom, A = C().domain(s.map((e, t) => t)).range([S.left, n - S.right]).paddingInner(.42).paddingOuter(.1), j = (e) => (A(e) ?? 0) + A.bandwidth() / 2, N = M(Math.max(...s.map((e) => e.input))), L = {
+			cx: j,
+			data: s,
+			floor: k,
+			hover: _.key,
+			inTicks: N,
+			left: S.left,
+			right: n - S.right,
+			tex: g,
+			top: S.top,
+			x: A,
+			yIn: w().domain([0, N.at(-1) ?? 1]).range([S.top, S.top + D * .3]),
+			yOut: w().domain([0, Math.max(...s.map((e) => e.output))]).range([k, S.top + D * .4]).nice(6)
+		}, R = (e) => {
+			let t = e.clientX - e.currentTarget.getBoundingClientRect().left, n = Math.round((t - j(0)) / A.step());
+			_.show(Math.max(0, Math.min(s.length - 1, n)));
+		}, z = _.key === null ? void 0 : s[_.key];
+		return /* @__PURE__ */ E("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ E(h, {
+				className: "touch-pan-y",
+				height: l,
+				label: O,
+				leave: _.clear,
+				onPointerMove: R,
+				width: n,
+				children: [
+					/* @__PURE__ */ E("defs", { children: [
+						/* @__PURE__ */ T(y, {
+							id: g("hatch"),
+							tone: "fill-l4"
+						}),
+						/* @__PURE__ */ T(b, {
+							id: g("rule"),
+							tone: "fill-l5"
+						}),
+						/* @__PURE__ */ T("clipPath", {
+							id: g("sweep"),
+							children: /* @__PURE__ */ T("rect", {
+								className: "sweep",
+								x: 0,
+								y: 0,
+								width: n,
+								height: l
+							})
+						})
+					] }),
+					/* @__PURE__ */ T(P, {
+						f: L,
+						fmt: u
+					}),
+					/* @__PURE__ */ T(F, {
+						f: L,
+						fmt: d,
+						clip: g("sweep"),
+						narrow: n < 460
+					}),
+					_.key !== null && z !== void 0 ? /* @__PURE__ */ T(I, {
+						datum: z,
+						f: L,
+						i: _.key
+					}) : null,
+					/* @__PURE__ */ T(f, {
+						height: l,
+						text: a(e),
+						width: n
+					})
+				]
+			}), _.key !== null && z !== void 0 ? /* @__PURE__ */ T(i, {
+				x: j(_.key),
+				y: L.yOut(z.output) - 8,
+				children: /* @__PURE__ */ T(c, {
+					facts: [`${u(z.input)} ${p}`, `${d(z.output)} ${m}`],
+					lead: t(z.date)
+				})
+			}) : null]
+		});
+	} });
+};
+//#endregion
+export { L as RainfallDualArea };

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

@@ -0,0 +1,76 @@
+"use client";
+//#region src/charts/glance/rank-strip.data.ts
+var e = {
+	outOf: 6,
+	periods: [
+		"1951–65",
+		"1966–80",
+		"1981–95",
+		"1996–2010",
+		"2011–25"
+	],
+	series: [
+		{
+			label: "USA",
+			ranks: [
+				1,
+				1,
+				1,
+				1,
+				1
+			]
+		},
+		{
+			label: "United Kingdom",
+			ranks: [
+				2,
+				2,
+				3,
+				2,
+				2
+			]
+		},
+		{
+			label: "Germany",
+			ranks: [
+				3,
+				3,
+				2,
+				4,
+				5
+			]
+		},
+		{
+			label: "France",
+			ranks: [
+				4,
+				4,
+				5,
+				5,
+				4
+			]
+		},
+		{
+			label: "Japan",
+			ranks: [
+				6,
+				6,
+				6,
+				3,
+				3
+			]
+		},
+		{
+			label: "Sweden",
+			ranks: [
+				5,
+				5,
+				4,
+				6,
+				6
+			]
+		}
+	]
+};
+//#endregion
+export { e as rankStripDemo };

package/lib/charts/glance/rank-strip.js

@@ -0,0 +1,172 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, stagger as i } from "../util.js";
+import { DimGroup as a, TipText as o } from "../hover.js";
+import { crisp as s } from "../axes.js";
+import { FootNote as c } from "../plot-note.js";
+import { ChartSvg as l } from "../svg.js";
+import { Label as u } from "../text.js";
+import { TEXTURE_PITCH as d, paint as f, useTextureIds as p } from "../texture-ids.js";
+import { Hatch as m, PlateLabel as h } from "../texture.js";
+import { textWidth as g } from "./util-a.js";
+import { ladderStep as _ } from "./util-b.js";
+import { rankStripDemo as v } from "./rank-strip.data.js";
+import { useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/glance/rank-strip.tsx
+var S = 4, C = [
+	{
+		name: "r1",
+		pitch: d.dense
+	},
+	{
+		name: "r2",
+		pitch: d.hatch
+	},
+	{
+		name: "r3",
+		pitch: d.cross
+	}
+], w = (e) => /* @__PURE__ */ b("defs", { children: C.map((t) => /* @__PURE__ */ b(m, {
+	id: e.tex(t.name),
+	pitch: t.pitch,
+	tone: "fill-l3"
+}, t.name)) }), T = (e) => (e.ranks[0] ?? 0) - (e.ranks.at(-1) ?? 0), E = (e) => e > 0 ? `+${e}` : e < 0 ? `−${-e}` : "±0", D = (e) => e ? 18 : 14, O = (e) => e ? 22 : 16, k = (e) => {
+	let { cell: t, gap: n, gridW: r, ring: o, x0: c } = e.geo, l = T(e.series);
+	return /* @__PURE__ */ x(a, {
+		dim: e.dimmed,
+		children: [
+			e.hero ? /* @__PURE__ */ b("rect", {
+				className: "fade stroke-hero fill-none",
+				style: i(e.periods.length + 2),
+				x: c - o,
+				y: e.y - o,
+				width: r + o * 2,
+				height: t + o * 2,
+				rx: S + o,
+				strokeWidth: 2
+			}) : null,
+			/* @__PURE__ */ b(u, {
+				anchor: "end",
+				className: e.hero ? "fill-ink" : void 0,
+				dy: "0.36em",
+				muted: !e.hero,
+				voice: "label",
+				x: c - D(e.hero),
+				y: e.y + t / 2,
+				children: e.series.label
+			}),
+			e.series.ranks.map((r, a) => {
+				let o = c + a * (t + n), l = e.periods[a];
+				return /* @__PURE__ */ x("g", {
+					className: "pop",
+					style: i(a * 2 + e.i * .5, "mark"),
+					onPointerEnter: () => {
+						e.onEnter({
+							c: a,
+							r: e.i,
+							x: o + t / 2,
+							y: e.y - 4
+						});
+					},
+					children: [/* @__PURE__ */ b("rect", {
+						x: s(o),
+						y: s(e.y),
+						width: Math.round(t) - 1,
+						height: Math.round(t) - 1,
+						rx: S,
+						className: "stroke-l5 shape-crisp",
+						fill: f(e.screen(r)),
+						strokeWidth: 1
+					}), /* @__PURE__ */ b(h, {
+						text: String(r),
+						x: s(o) + (Math.round(t) - 1) / 2,
+						y: s(e.y) + (Math.round(t) - 1) / 2
+					})]
+				}, l);
+			}),
+			/* @__PURE__ */ b(u, {
+				dy: "0.36em",
+				muted: !e.hero,
+				order: e.periods.length + 3,
+				voice: "value",
+				x: c + r + O(e.hero),
+				y: e.y + t / 2,
+				children: E(l)
+			})
+		]
+	});
+}, A = (e, t) => ({
+	deltaW: Math.max(...e.map((e) => g(E(T(e)), "t-value") + O(e.label === t))),
+	labelW: Math.max(...e.map((e) => g(e.label, "t-label") + D(e.label === t)))
+}), j = (e) => e.map((t, n) => {
+	let [r, i] = t.split(" ");
+	return {
+		part: r,
+		year: i === e[n - 1]?.split(" ")[1] ? void 0 : i
+	};
+}), M = (i) => {
+	let a = i.data ?? v, s = a.periods.length, d = a.series.length, f = Math.max(...a.series.flatMap((e) => e.ranks)), m = a.series.toSorted((e, t) => (e.ranks.at(-1) ?? 0) - (t.ranks.at(-1) ?? 0)), h = i.highlight ?? a.series.toSorted((e, t) => T(t) - T(e))[0]?.label, [S, E] = y(null), D = p("rank"), O = (e) => D(C[_(e - 1, f, C.length - 1)].name), M = j(a.periods), N = M.some((e) => e.year !== void 0), P = `Rank per period: ${m.map((e) => `${e.label} ${e.ranks.join(", ")}`).join("; ")}`;
+	return /* @__PURE__ */ b(e, {
+		overlay: S === null ? null : /* @__PURE__ */ b(t, {
+			x: S.x,
+			y: S.y,
+			children: /* @__PURE__ */ b(o, {
+				facts: [a.periods[S.c], `#${m[S.r].ranks[S.c]} of ${a.outOf ?? d}`],
+				lead: m[S.r].label
+			})
+		}),
+		children: (e) => {
+			let t = e < 480, { deltaW: o, labelW: f } = A(a.series, h), p = t ? 5 : 10, _ = t ? 12 : 16, v = Math.min(72, (e - f - o - p * (s - 1)) / s), y = v * s + p * (s - 1), C = {
+				cell: v,
+				gap: p,
+				gridW: y,
+				ring: _ / 2,
+				x0: f + Math.max(0, (e - f - o - y) / 2)
+			}, T = Math.max(...M.map((e) => g(e.part, "t-label"))) + 4 > v + p, j = (N ? 46 : 28) + (T ? 14 : 0), F = i.height ?? j + d * v + _ * (d - 1) + 10 + r(n(i), e - 16, 34);
+			return /* @__PURE__ */ x(l, {
+				height: F,
+				label: P,
+				leave: () => {
+					E(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ b(w, { tex: D }),
+					M.map((e, t) => /* @__PURE__ */ x("g", { children: [e.year === void 0 ? null : /* @__PURE__ */ b(u, {
+						anchor: "middle",
+						voice: "axis",
+						x: C.x0 + t * (v + p) + v / 2,
+						y: j - 30,
+						children: e.year
+					}), /* @__PURE__ */ b(u, {
+						anchor: "middle",
+						muted: !0,
+						voice: "label",
+						x: C.x0 + t * (v + p) + v / 2,
+						y: j - 12 - (T && t % 2 == 0 ? 14 : 0),
+						children: e.part
+					})] }, a.periods[t])),
+					m.map((e, t) => /* @__PURE__ */ b(k, {
+						dimmed: S !== null && S.r !== t,
+						geo: C,
+						hero: e.label === h,
+						i: t,
+						onEnter: E,
+						periods: a.periods,
+						screen: O,
+						series: e,
+						y: j + t * (v + _)
+					}, e.label)),
+					/* @__PURE__ */ b(c, {
+						height: F,
+						text: n(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { M as RankStrip };

package/lib/charts/glance/scatter-labels.js

@@ -0,0 +1,60 @@
+"use client";
+import { sansWidth as e } from "../util.js";
+//#region src/charts/glance/scatter-labels.ts
+var t = (e, t) => e.x0 < t.x1 && t.x0 < e.x1 && e.y0 < t.y1 && t.y0 < e.y1, n = (e, t) => e.anchor === "start" ? t.x0 : e.anchor === "end" ? t.x1 : (t.x0 + t.x1) / 2, r = (r, i, a) => {
+	let o = r.map((e) => {
+		let [t, n, r] = a(e);
+		return {
+			x0: t - r,
+			x1: t + r,
+			y0: n - r,
+			y1: n + r
+		};
+	}), s = [], c = /* @__PURE__ */ new Map(), l = r.map((e, t) => t).toSorted((e, t) => r[t].value - r[e].value);
+	for (let u of l) {
+		let d = r[u], [f, p, m] = a(d), h = e(d.label, 12), g = [
+			{
+				anchor: "start",
+				x0: f + m + 5,
+				yc: p
+			},
+			{
+				anchor: "end",
+				x0: f - m - 5 - h,
+				yc: p
+			},
+			{
+				anchor: "middle",
+				x0: f - h / 2,
+				yc: p - m - 9
+			},
+			{
+				anchor: "middle",
+				x0: f - h / 2,
+				yc: p + m + 9
+			}
+		], _ = (e) => e.anchor !== "middle" || r.every((t, n) => {
+			let [r, i] = a(t);
+			return n === u || Math.hypot(r - (e.x0 + h / 2), i - e.yc) > Math.hypot(f - (e.x0 + h / 2), p - e.yc);
+		}), v = (e, n) => e.x0 >= i.left && e.x1 <= i.right && e.y0 >= 0 && !s.some((n) => t(e, n)) && (n || !o.some((n, r) => r !== u && t(e, n)));
+		for (let e of u === l[0] ? [!1, !0] : [!1]) for (let t of g) {
+			let r = {
+				x0: t.x0,
+				x1: t.x0 + h,
+				y0: t.yc - 6,
+				y1: t.yc + 6
+			};
+			!c.has(u) && _(t) && v(r, e) && (s.push(r), c.set(u, {
+				anchor: t.anchor,
+				id: d.label,
+				kind: "name",
+				text: d.label,
+				x: n(t, r),
+				y: t.yc
+			}));
+		}
+	}
+	return r.flatMap((e, t) => c.get(t) ?? []);
+};
+//#endregion
+export { r as placeNames };