@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/maps/world-choropleth.js

@@ -0,0 +1,46 @@
+"use client";
+import { noteOf as e } from "../util.js";
+import { withoutRemoteIslets as t, withoutWrappedParts as n } from "./geo.js";
+import { Choropleth as r } from "./choropleth.js";
+import { worldChoroplethDemo as i, worldCountries as a } from "./world-choropleth.data.js";
+import { useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { geoEqualEarth as c } from "d3-geo";
+//#region src/charts/maps/world-choropleth.tsx
+var l = [
+	1,
+	2,
+	3,
+	4
+], u = [
+	"Portugal",
+	"France",
+	"Italy",
+	"Australia",
+	"Argentina"
+], d = (e, t) => c().fitSize(e, t), f = (e) => Number.isInteger(e) ? String(e) : e.toFixed(1), p = (e) => e.toFixed(1), m = a.map((e) => t(n(e))), h = (t) => {
+	let n = t.data ?? i, a = t.format ?? p, c = o(() => n.map((e) => ({
+		dx: e.dx,
+		dy: e.dy,
+		key: e.country,
+		label: e.code,
+		value: e.value
+	})), [n]), h = t.highlight === void 0 ? u : [t.highlight].flat(), g = n.toSorted((e, t) => t.value - e.value).slice(0, 5).map((e) => `${e.code ?? e.country} ${a(e.value)}`);
+	return /* @__PURE__ */ s(r, {
+		ariaLabel: `World choropleth, highest: ${g.join(", ")}`,
+		aspect: .46,
+		data: c,
+		emptyLabel: t.emptyLabel ?? "No data",
+		format: a,
+		labels: h,
+		maxHeight: t.height ?? 480,
+		note: e(t),
+		project: d,
+		regions: m,
+		short: t.short ?? f,
+		thresholds: t.thresholds ?? l,
+		unit: t.unit
+	});
+};
+//#endregion
+export { h as WorldChoropleth };

package/lib/charts/markers.js

@@ -0,0 +1,35 @@
+"use client";
+import { cx as e } from "./util.js";
+import { crisp as t } from "./axes.js";
+import { DOT as n, RING_WEIGHT as r } from "./marks.js";
+import { barPath as i } from "./shapes.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/charts/markers.tsx
+var o = ({ size: e = "sm", ...t }) => /* @__PURE__ */ a("circle", {
+	r: n[e],
+	...t
+}), s = ({ className: e = "", open: t = !1, size: i = "sm", weight: o = "rest", ...s }) => {
+	let c = r[o];
+	return /* @__PURE__ */ a("circle", {
+		className: `${t ? "fill-none" : "fill-paper"} ${e}`,
+		r: n[i] - c / 2,
+		strokeWidth: c,
+		...s
+	});
+}, c = ({ className: n, dir: r, fill: o, h: s, outline: c = "stroke-l5", w: l, x: u, y: d, ...f }) => {
+	if (o === void 0) return /* @__PURE__ */ a("path", {
+		className: n,
+		d: i(u, d, l, s, r),
+		...f
+	});
+	let p = r === "up" || r === "down", m = t(u), h = t(d);
+	return /* @__PURE__ */ a("path", {
+		className: e("shape-crisp", c, n),
+		d: i(m, h, p ? Math.round(l) - 1 : Math.round(u + l) - Math.round(u), p ? Math.round(d + s) - Math.round(d) : Math.round(s) - 1, r),
+		fill: o,
+		strokeWidth: 1,
+		...f
+	});
+};
+//#endregion
+export { c as Bar, o as Dot, s as Ring };

package/lib/charts/marks.js

@@ -0,0 +1,31 @@
+"use client";
+//#region src/charts/marks.ts
+var e = {
+	lg: 6,
+	md: 4.5,
+	sm: 3,
+	xs: 2
+}, t = {
+	cursor: 1.5,
+	rest: 1
+}, n = {
+	lg: 9,
+	md: 6,
+	sm: 4,
+	xl: 14
+}, r = 2, i = {
+	hero: 2,
+	rest: 1
+}, a = {
+	h: 2,
+	w: 6
+}, o = {
+	guide: 4,
+	mark: 3
+}, s = {
+	entryGap: 16,
+	gap: 6,
+	swatch: 12
+};
+//#endregion
+export { e as DOT, s as KEY, a as LABEL_TICK, r as MARK_WEIGHT, o as RING_STEP, t as RING_WEIGHT, i as STEM, n as TICK };

package/lib/charts/motion.js

@@ -0,0 +1,11 @@
+"use client";
+//#region src/charts/motion.ts
+var e = (e) => e < .5 ? 8 * e ** 4 : 1 - (-2 * e + 2) ** 4 / 2, t = {
+	change: 400,
+	enter: 600,
+	grow: 800,
+	hover: 150,
+	long: 1200
+};
+//#endregion
+export { t as DURATION, e as easeTravel };

package/lib/charts/originals/daily-users.data.js

@@ -0,0 +1,101 @@
+"use client";
+//#region src/charts/originals/daily-users.data.ts
+var e = Date.UTC(1976, 5, 1), t = [
+	15.9,
+	16.3,
+	16,
+	18.9,
+	19.8,
+	23.5,
+	24.6,
+	28.4,
+	26.9,
+	19,
+	19.8,
+	19.8,
+	22.7,
+	21.6,
+	21.6,
+	15.4,
+	17.6,
+	20.1,
+	14.1,
+	18.1,
+	20.8,
+	24.1,
+	26.2,
+	25.8,
+	29,
+	29.3,
+	29.8,
+	30.3,
+	30.1,
+	29.7,
+	30.4,
+	31.8,
+	33.1,
+	31.3,
+	31.3,
+	31.6,
+	30.4,
+	29.5,
+	23.5,
+	23.4,
+	27.3,
+	26.3,
+	21.8,
+	21.9,
+	23.1,
+	21.7,
+	22.7,
+	24.4,
+	21.6,
+	18.4,
+	19.6,
+	20.5,
+	19.7,
+	20,
+	21.3,
+	21.1,
+	23.4,
+	20.5,
+	22.8,
+	19.3,
+	17.2,
+	19,
+	19.3,
+	20.2,
+	20,
+	20.7,
+	21.4,
+	21.8,
+	22.9,
+	23.2,
+	24.3,
+	25.2,
+	25.7,
+	25.2,
+	24,
+	25.3,
+	25.9,
+	26.4,
+	24,
+	25.2,
+	27.2,
+	24.9,
+	26.6,
+	27.2,
+	28.9,
+	28.8,
+	26.7,
+	20.6,
+	19.4,
+	21.4,
+	17.7,
+	19
+].map((t, n) => ({
+	date: new Date(e + n * 864e5),
+	value: t
+}));
+//#endregion
+export { t as dailyUsers };

package/lib/charts/originals/daily-users.js

@@ -0,0 +1,203 @@
+"use client";
+import { fmtDegC as e, monthTickLabels as t } from "../../lib/format.js";
+import { useScrub as n } from "../hooks.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { cx as a, stagger as o, weeklyMean as s } from "../util.js";
+import { TipText as c } from "../hover.js";
+import { crisp as l } from "../axes.js";
+import { Dot as u } from "../markers.js";
+import { Stem as d } from "../rules.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { TEXTURE_PITCH as m, paint as h, useTextureIds as g } from "../texture-ids.js";
+import { Hatch as _, KeySwatch as v, Stipple as y } from "../texture.js";
+import { ValueGrid as b } from "../value-grid.js";
+import { dailyUsers as x } from "./daily-users.data.js";
+import { Key as S } from "./key.js";
+import { scaleLinear as C } from "d3-scale";
+import { utcFormat as w } from "d3-time-format";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { area as O, curveMonotoneX as k, line as A } from "d3-shape";
+//#region src/charts/originals/daily-users.tsx
+var j = w("%a %-d %b"), M = (e) => {
+	let t = Math.abs(e).toFixed(1);
+	return `${e < 0 && t !== "0.0" ? "−" : "+"}${t} °C`;
+}, N = (t) => e(t).replace(".0 °C", " °C"), P = (e, t) => e ? "stroke-ink" : t ? "stroke-l1" : "stroke-l4", F = ({ data: e, frame: t, hero: n, hover: r, mean: i }) => /* @__PURE__ */ E("g", { children: e.map((e, s) => {
+	let c = e.value >= i[s];
+	return /* @__PURE__ */ E(d, {
+		className: a("grow-y", "transition-tone", !c && "from-top", P(s === n, r === s)),
+		hero: s === n,
+		style: o(s, "dense"),
+		x: t.x(s),
+		y0: t.y(i[s]),
+		y1: t.y(e.value)
+	}, e.date.toISOString());
+}) }), I = ({ frame: e, mean: t, tex: n, values: r }) => {
+	let i = O().x((t, n) => e.x(n)).y0((n, r) => e.y(t[r])).y1((t) => e.y(t)).curve(k)(r), a = (n) => O().x((t, n) => e.x(n)).y0((t) => e.y(t)).y1(n).curve(k)(t) ?? "";
+	return /* @__PURE__ */ D("g", {
+		className: "fade",
+		style: o(4),
+		children: [/* @__PURE__ */ D("defs", { children: [
+			/* @__PURE__ */ E(y, {
+				id: n("over"),
+				pitch: m.dense,
+				tone: "fill-l3"
+			}),
+			/* @__PURE__ */ E(_, {
+				angle: "falling",
+				id: n("under"),
+				pitch: m.hatch,
+				tone: "fill-l4"
+			}),
+			/* @__PURE__ */ E("clipPath", {
+				id: n("above"),
+				children: /* @__PURE__ */ E("path", { d: a(0) })
+			}),
+			/* @__PURE__ */ E("clipPath", {
+				id: n("below"),
+				children: /* @__PURE__ */ E("path", { d: a(e.floor + 40) })
+			})
+		] }), ["above", "below"].map((e) => /* @__PURE__ */ E("path", {
+			className: "stroke-l5",
+			clipPath: h(n(e)),
+			d: i ?? "",
+			fill: h(n(e === "above" ? "over" : "under")),
+			strokeWidth: 1
+		}, e))]
+	});
+}, L = ({ data: e, frame: n, width: r }) => {
+	let i = e.flatMap((e, t) => e.date.getUTCDate() === 1 ? [t] : []), a = t(i.map((t) => e[t].date));
+	return /* @__PURE__ */ D("g", { children: [/* @__PURE__ */ E(b, {
+		floor: n.floor,
+		ticks: n.y.ticks(r < 420 ? 3 : 4),
+		format: N,
+		side: "right",
+		x0: n.x0,
+		x1: r,
+		y: n.y
+	}), i.map((t, r) => /* @__PURE__ */ E(p, {
+		voice: "axis",
+		x: n.x(t),
+		y: n.floor + 22,
+		children: a[r]
+	}, e[t].date.toISOString()))] });
+}, R = (e) => [
+	{
+		label: "Weekly mean",
+		mark: /* @__PURE__ */ E("line", {
+			className: "stroke-l2 cap-round",
+			strokeWidth: 1.5,
+			x1: 1,
+			x2: 11,
+			y1: 0,
+			y2: 0
+		})
+	},
+	{
+		label: "Above",
+		mark: /* @__PURE__ */ E(v, {
+			fill: h(e("over")),
+			x: 0,
+			y: -6
+		})
+	},
+	{
+		label: "Below",
+		mark: /* @__PURE__ */ E(v, {
+			fill: h(e("under")),
+			x: 0,
+			y: -6
+		})
+	}
+], z = {
+	bottom: 30,
+	left: 0,
+	right: 40,
+	top: 44
+}, B = (e, t, n) => {
+	let r = e.map((e) => e.value), i = Math.min(...r), a = Math.max(...r), o = z.left, s = t - z.right, c = n - z.bottom, l = (s - o) / e.length;
+	return {
+		floor: c,
+		x: (e) => o + (e + .5) * l,
+		x0: o,
+		x1: s,
+		y: C().domain([i - (a - i) * .06, a]).range([c, z.top])
+	};
+}, V = ({ data: t, height: n, scrub: r, width: a }) => {
+	let d = g("daily-users"), m = B(t, a, n), h = s(t.map((e) => e.value)), _ = t.map((e) => e.value), v = _.indexOf(Math.max(..._)), y = r.isHovering ? r.index : null, b = A().x((e, t) => m.x(t)).y((e) => m.y(e)).curve(k)(h) ?? "", x = `Daily maximum temperature, ${j(t[0].date)} to ${j(t.at(-1)?.date ?? t[0].date)}: hottest ${e(_[v])} on ${j(t[v].date)}`;
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D(f, {
+		height: n,
+		label: x,
+		width: a,
+		...r.bind(t.map((e, t) => m.x(t))),
+		children: [
+			/* @__PURE__ */ E(L, {
+				data: t,
+				frame: m,
+				width: a
+			}),
+			/* @__PURE__ */ E(I, {
+				frame: m,
+				mean: h,
+				tex: d,
+				values: _
+			}),
+			/* @__PURE__ */ E(F, {
+				data: t,
+				frame: m,
+				hero: v,
+				hover: y,
+				mean: h
+			}),
+			/* @__PURE__ */ E("path", {
+				className: "draw stroke-l2 cap-round fill-none",
+				d: b,
+				pathLength: 1,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ E(u, {
+				className: "pop fill-hero",
+				cx: Math.round(m.x(v)),
+				cy: m.y(_[v]),
+				size: "md",
+				style: o(8)
+			}),
+			/* @__PURE__ */ E(p, {
+				anchor: "middle",
+				order: 8,
+				voice: "value",
+				x: m.x(v),
+				y: m.y(_[v]) - 10,
+				children: e(_[v])
+			}),
+			y === null || y === v ? null : /* @__PURE__ */ E(u, {
+				className: "fill-l2",
+				cx: l(m.x(y)),
+				cy: m.y(_[y]),
+				size: "sm"
+			}),
+			/* @__PURE__ */ E(S, {
+				items: R(d),
+				right: a,
+				y: 10
+			})
+		]
+	}), y === null ? null : /* @__PURE__ */ E(i, {
+		x: m.x(y),
+		y: Math.min(m.y(_[y]), m.y(h[y])) - 6,
+		children: /* @__PURE__ */ E(c, {
+			facts: [e(_[y]), `${M(_[y] - h[y])} vs mean`],
+			lead: j(t[y].date)
+		})
+	})] });
+}, H = (e) => {
+	let t = e.data ?? x, i = e.height ?? 460, a = n(0, t.map((e) => e.date));
+	return /* @__PURE__ */ E(r, { children: (e) => /* @__PURE__ */ E(V, {
+		data: t,
+		height: i,
+		scrub: a,
+		width: e
+	}) });
+};
+//#endregion
+export { H as DailyUsers };

package/lib/charts/originals/feature-rank.data.js

@@ -0,0 +1,92 @@
+"use client";
+//#region src/charts/originals/feature-rank.data.ts
+var e = [
+	"1984",
+	"1994",
+	"2004",
+	"2014",
+	"2024"
+], t = [
+	{
+		feature: "Wheat",
+		weekly: [
+			1939.3,
+			1811.3,
+			1989.8,
+			1935.7,
+			1530.8
+		]
+	},
+	{
+		feature: "Barley",
+		weekly: [
+			1979.7,
+			1107.7,
+			1007.4,
+			1079.8,
+			1193.9
+		]
+	},
+	{
+		feature: "Oats",
+		weekly: [
+			105.2,
+			108.6,
+			107.8,
+			137.2,
+			182
+		]
+	},
+	{
+		feature: "Oilseed rape",
+		weekly: [
+			268.6,
+			404.4,
+			498.4,
+			674.6,
+			293.2
+		]
+	},
+	{
+		feature: "Potatoes",
+		weekly: [
+			198.4,
+			164.1,
+			148.4,
+			140.5,
+			118.4
+		]
+	},
+	{
+		feature: "Sugar beet",
+		weekly: [
+			199.1,
+			194.8,
+			153.9,
+			116.3,
+			102.8
+		]
+	},
+	{
+		feature: "Field beans",
+		weekly: [
+			32.4,
+			149.3,
+			179.2,
+			107.1,
+			135.4
+		]
+	},
+	{
+		feature: "Maize",
+		weekly: [
+			15.5,
+			94.2,
+			117.6,
+			183.5,
+			266.4
+		]
+	}
+];
+//#endregion
+export { e as QUARTERS, t as featureUse };

package/lib/charts/originals/feature-rank.js

@@ -0,0 +1,167 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { clamp as n, ranks as r, sansWidth as i, stagger as a } from "../util.js";
+import { DimGroup as o, TipText as s } from "../hover.js";
+import { HRule as c, VRule as l } from "../rules.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 { CrossHatch as m, Hatch as h } from "../texture.js";
+import { QUARTERS as g, featureUse as _ } from "./feature-rank.data.js";
+import { useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/originals/feature-rank.tsx
+var S = 40, C = 64, w = 20, T = 12, E = .3, D = 22, O = (e) => `${Math.round(e).toLocaleString("en-GB")}k`, k = [
+	"1st",
+	"2nd",
+	"3rd"
+], A = (e) => k.at(e) ?? `${e + 1}th`, j = (e, t) => {
+	let n = Math.max(...e.map((e) => i(e.feature, 12))), r = Math.max(...e.map((e) => i(O(e.weekly.at(-1) ?? 0), 12))), a = Math.max(...e.flatMap((e) => e.weekly)), o = w, s = t - (T + n + T + r), c = (s - o) / g.length;
+	return {
+		cx: (e) => o + (e + .5) * c,
+		half: c * E,
+		thick: (e) => Math.max(2, Math.round(D / 2 * e / a)),
+		x0: o,
+		x1: s,
+		y: (e) => Math.round(S + e * C)
+	};
+}, M = (e, t) => e.map((n, r) => ({
+	a: Math.round(t.cx(r) - t.half),
+	b: r === e.length - 1 ? Math.round(t.x1) : Math.round(t.cx(r) + t.half),
+	y: t.y(n)
+})), N = (e, t, n, r) => {
+	let i = M(e, n).map((e, i) => ({
+		...e,
+		e: e.y + r * (n.thick(t[i]) - .5)
+	}));
+	return i.flatMap((e, t) => {
+		let n = i.at(t + 1), r = [`${e.a},${e.e}`, `${e.b},${e.e}`];
+		if (n === void 0 || n.y !== e.y || n.e === e.e) return r;
+		let a = Math.round((e.b + n.a) / 2);
+		return [
+			...r,
+			`${a},${e.e}`,
+			`${a},${n.e}`
+		];
+	});
+}, P = (e, t, n) => {
+	let r = N(e, t, n, -1), i = N(e, t, n, 1).toReversed();
+	return `M${[...r, ...i].join(" L")}Z`;
+}, F = ({ datum: e, dim: t, hero: n, i: r, lay: i, rank: s, tex: c, width: l }) => {
+	let u = s.at(-1) ?? 0, p = i.y(u);
+	return /* @__PURE__ */ x(o, {
+		dim: t,
+		children: [
+			/* @__PURE__ */ b("path", {
+				className: `grow-x ${n ? "stroke-ink" : "stroke-l5"}`,
+				d: P(s, e.weekly, i),
+				fill: f(c(n ? "hero" : "band")),
+				strokeLinejoin: "miter",
+				strokeWidth: 1,
+				style: a(r, "series")
+			}),
+			/* @__PURE__ */ b(d, {
+				middle: !0,
+				muted: !n,
+				order: r + 8,
+				voice: "label",
+				x: i.x1 + T,
+				y: p,
+				children: e.feature
+			}),
+			/* @__PURE__ */ b(d, {
+				anchor: "end",
+				middle: !0,
+				muted: !n,
+				order: r + 8,
+				voice: "value",
+				x: l,
+				y: p,
+				children: O(e.weekly.at(-1) ?? 0)
+			})
+		]
+	});
+}, I = ({ count: e, lay: t }) => /* @__PURE__ */ x("g", { children: [
+	g.slice(1).map((n, r) => /* @__PURE__ */ b(l, {
+		kind: "grid",
+		x: (t.cx(r) + t.cx(r + 1)) / 2,
+		y0: t.y(0) - 14,
+		y1: t.y(e - 1) + 14
+	}, n)),
+	g.map((e, n) => /* @__PURE__ */ b(d, {
+		anchor: "middle",
+		voice: "axis",
+		x: t.cx(n),
+		y: 14,
+		children: e
+	}, e)),
+	Array.from({ length: e }, (e, n) => /* @__PURE__ */ x("g", { children: [/* @__PURE__ */ b(c, {
+		kind: "grid",
+		x0: Math.round(t.x0),
+		x1: t.x1,
+		y: t.y(n)
+	}), /* @__PURE__ */ b(d, {
+		middle: !0,
+		voice: "axis",
+		x: 0,
+		y: t.y(n),
+		children: n + 1
+	})] }, `rank-${n + 1}`))
+] }), L = (i) => {
+	let a = i.data ?? _, [o, c] = v(null), l = p("feature-rank"), d = g.map((e, t) => r(a.map((e) => e.weekly[t]))), f = a.map((e, t) => d.map((e) => e[t])), w = f.findIndex((e) => e.at(-1) === 0), T = S + (a.length - 1) * C + 20, E = [...[...a.keys()].filter((e) => e !== w), w], D = `Arable crops ranked by area in the United Kingdom, ${g[0]} to ${g.at(-1) ?? ""}: ${a[w].feature} leads with ${O(a[w].weekly.at(-1) ?? 0)}`;
+	return /* @__PURE__ */ b(e, { children: (e) => {
+		let r = j(a, e), i = (r.x1 - r.x0) / g.length;
+		return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x(u, {
+			className: "touch-pan-y",
+			height: T,
+			label: D,
+			leave: () => {
+				c(null);
+			},
+			onPointerMove: (e) => {
+				let t = e.currentTarget.getBoundingClientRect(), o = n(Math.floor((e.clientX - t.left - r.x0) / i), 0, g.length - 1), s = n(Math.round((e.clientY - t.top - S) / C), 0, a.length - 1);
+				c({
+					f: d[o].indexOf(s),
+					q: o
+				});
+			},
+			width: e,
+			children: [
+				/* @__PURE__ */ x("defs", { children: [/* @__PURE__ */ b(h, {
+					id: l("band"),
+					tone: "fill-l4"
+				}), /* @__PURE__ */ b(m, {
+					id: l("hero"),
+					tone: "fill-hero"
+				})] }),
+				/* @__PURE__ */ b(I, {
+					count: a.length,
+					lay: r
+				}),
+				E.map((t) => /* @__PURE__ */ b(F, {
+					datum: a[t],
+					dim: o !== null && o.f !== t,
+					hero: t === w,
+					i: t,
+					lay: r,
+					rank: f[t],
+					tex: l,
+					width: e
+				}, a[t].feature))
+			]
+		}), o === null ? null : /* @__PURE__ */ b(t, {
+			x: r.cx(o.q),
+			y: r.y(f[o.f][o.q]) - 6,
+			children: /* @__PURE__ */ b(s, {
+				facts: [
+					g[o.q],
+					A(f[o.f][o.q]),
+					O(a[o.f].weekly[o.q])
+				],
+				lead: a[o.f].feature
+			})
+		})] });
+	} });
+};
+//#endregion
+export { L as FeatureRank };

package/lib/charts/originals/format.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/charts/originals/format.ts
+var e = (e) => `${Number(e.toFixed(1))}%`;
+//#endregion
+export { e as fmtPercent };