@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/fills.js

@@ -0,0 +1,153 @@
+"use client";
+import { HALFTONE_R as e, TEXTURE_PITCH as t } from "./texture-ids.js";
+//#region src/charts/fills.ts
+var n = [
+	{
+		cls: "fill-hero",
+		id: "ink",
+		label: "Ink"
+	},
+	{
+		cls: "fill-l2",
+		id: "strong",
+		label: "Strong"
+	},
+	{
+		cls: "fill-l3",
+		id: "mid",
+		label: "Mid"
+	},
+	{
+		cls: "fill-l4",
+		id: "quiet",
+		label: "Quiet"
+	},
+	{
+		cls: "fill-l5",
+		id: "faint",
+		label: "Faint"
+	},
+	{
+		cls: "fill-alert",
+		id: "alert",
+		label: "Alert"
+	}
+], r = [
+	{
+		id: "solid",
+		label: "Solid",
+		tones: [
+			"ink",
+			"strong",
+			"mid",
+			"quiet",
+			"faint",
+			"alert"
+		]
+	},
+	{
+		id: "hatch",
+		label: "Hatch",
+		pitch: t.hatch,
+		tones: [
+			"ink",
+			"strong",
+			"mid",
+			"quiet",
+			"faint",
+			"alert"
+		]
+	},
+	{
+		id: "cross",
+		label: "Crosshatch",
+		pitch: t.cross,
+		tones: [
+			"ink",
+			"strong",
+			"mid",
+			"quiet",
+			"alert"
+		]
+	},
+	{
+		id: "rules",
+		label: "Rules",
+		pitch: t.dense,
+		tones: [
+			"ink",
+			"strong",
+			"mid",
+			"quiet",
+			"faint"
+		]
+	},
+	{
+		id: "upright",
+		label: "Upright rules",
+		pitch: t.dense,
+		tones: [
+			"ink",
+			"strong",
+			"mid",
+			"quiet",
+			"faint"
+		]
+	},
+	{
+		id: "stipple",
+		label: "Stipple",
+		pitch: t.screen,
+		tones: [
+			"strong",
+			"mid",
+			"quiet",
+			"faint"
+		]
+	},
+	{
+		id: "dense",
+		label: "Dense stipple",
+		pitch: t.dense,
+		tones: [
+			"strong",
+			"mid",
+			"quiet",
+			"faint"
+		]
+	},
+	{
+		id: "beads",
+		label: "Broken rungs",
+		pitch: t.dense,
+		tones: ["mid"]
+	}
+], i = [{
+	id: "halftone",
+	label: "Halftone",
+	steps: e.map((e) => ({
+		pitch: t.screen,
+		r: e
+	})),
+	tones: ["mid", "quiet"]
+}, {
+	id: "density",
+	label: "Hatch density",
+	steps: [
+		{
+			pitch: t.cross,
+			r: 0
+		},
+		{
+			pitch: t.hatch,
+			r: 0
+		},
+		{
+			pitch: t.dense,
+			r: 0
+		}
+	],
+	tones: ["mid"]
+}], a = (e) => n.find((t) => t.id === e)?.cls ?? "fill-l3";
+//#endregion
+export { r as FILL_FAMILIES, i as FILL_LADDERS, n as FILL_TONES, a as toneClass };

package/lib/charts/forms/area-difference.data.js

@@ -0,0 +1,62 @@
+"use client";
+//#region src/charts/forms/area-difference.data.ts
+var e = Date.UTC(2022, 0, 1), t = 6048e5, n = [
+	[6, 4.6],
+	[4.5, 5.3],
+	[2.8, 4.8],
+	[4.9, 4.3],
+	[7.1, 4.5],
+	[6.4, 4.6],
+	[7.4, 5],
+	[6.6, 5.4],
+	[6.5, 5.2],
+	[7.1, 6.5],
+	[8.5, 7.2],
+	[9.5, 7.1],
+	[7.4, 7.7],
+	[7.3, 8.2],
+	[9.9, 8.5],
+	[11.4, 9.3],
+	[9.3, 10.3],
+	[11.4, 10.6],
+	[13.2, 11.4],
+	[14.9, 11.7],
+	[13.3, 13],
+	[11.7, 13.6],
+	[14.2, 13.9],
+	[16.1, 14.4],
+	[15.5, 15.1],
+	[14.8, 16],
+	[15.8, 16.3],
+	[18.5, 16.4],
+	[20.9, 17],
+	[17.7, 17.4],
+	[18.7, 17.4],
+	[19.2, 17.2],
+	[20.2, 16.6],
+	[17.9, 16.4],
+	[17.3, 15.3],
+	[17.6, 15.1],
+	[15, 14.3],
+	[13.2, 13.8],
+	[10.9, 13.2],
+	[13.6, 12],
+	[10.7, 11.7],
+	[12.4, 10.2],
+	[14.4, 10],
+	[11.7, 9.3],
+	[11, 8.2],
+	[10.2, 7.4],
+	[7.3, 6.2],
+	[6.2, 6.1],
+	[2.4, 5.5],
+	[-2.2, 4.9],
+	[5.8, 4.8],
+	[6.9, 4.3]
+].map(([n, r], i) => ({
+	actual: n,
+	plan: r,
+	week: new Date(e + i * t)
+}));
+//#endregion
+export { n as planWeeksDemo };

package/lib/charts/forms/area-difference.js

@@ -0,0 +1,192 @@
+"use client";
+import { fmtDegC as e, monthTickLabels as t } from "../../lib/format.js";
+import { useHover as n } from "../hooks.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { clamp as a, sansWidth as o } from "../util.js";
+import { TipText as s } from "../hover.js";
+import { Dot as c } from "../markers.js";
+import { HRule as l, Stem as u } from "../rules.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { paint as p, useTextureIds as m } from "../texture-ids.js";
+import { CrossHatch as h, Hatch as g } from "../texture.js";
+import { ValueGrid as _ } from "../value-grid.js";
+import { planWeeksDemo as v } from "./area-difference.data.js";
+import { scaleLinear as y } from "d3-scale";
+import { utcFormat as b } from "d3-time-format";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { area as C, curveMonotoneX as w, line as T } from "d3-shape";
+//#region src/charts/forms/area-difference.tsx
+var E = 5, D = b("%-d %b"), O = "2022", k = "Normal", A = e, j = (t) => e(t).replace(".0 °C", " °C"), M = (e, t, n) => {
+	let r = e.flatMap((e) => [e.actual, e.plan]), i = n - 30, a = Math.min(...r), s = Math.max(...r), c = y().domain([a - (s - a) * .06, s]).range([i, 12]), l = Math.ceil(Math.max(...c.ticks(E).map((e) => o(j(e).replaceAll("1", "0"), 11)))) + 8, u = t - 8 - Math.ceil(Math.max(o(O, 11), o(k, 11))), d = y().domain([0, e.length - 1]).range([l, u]);
+	return {
+		bottom: i,
+		top: 12,
+		x: (e) => d(e),
+		x0: l,
+		x1: u,
+		y: c
+	};
+}, N = (e) => {
+	let t = e.data.at(-1);
+	if (t === void 0) return null;
+	let n = e.frame.y(t.actual), r = e.frame.y(t.plan), i = (n + r) / 2, a = Math.max(Math.abs(n - r), 14) / 2, o = n <= r;
+	return /* @__PURE__ */ S("g", {
+		className: "fade",
+		children: [/* @__PURE__ */ x(f, {
+			middle: !0,
+			voice: "label",
+			x: e.frame.x1 + 8,
+			y: o ? i - a : i + a,
+			children: O
+		}), /* @__PURE__ */ x(f, {
+			middle: !0,
+			voice: "axis",
+			x: e.frame.x1 + 8,
+			y: o ? i + a : i - a,
+			children: k
+		})]
+	});
+}, P = (e) => {
+	let { frame: n } = e, r = e.width < 520 ? 3 : 2, i = e.data.flatMap((t, n) => {
+		let i = e.data[n - 1];
+		return (i === void 0 || i.week.getUTCMonth() !== t.week.getUTCMonth()) && t.week.getUTCMonth() % r === 0 ? [n] : [];
+	}), a = t(i.map((t) => e.data[t].week));
+	return /* @__PURE__ */ S("g", { children: [/* @__PURE__ */ x(_, {
+		floor: n.bottom - 8,
+		ticks: n.y.ticks(E),
+		format: j,
+		x0: n.x0,
+		x1: n.x1,
+		y: n.y
+	}), i.map((t, r) => /* @__PURE__ */ x(f, {
+		anchor: "middle",
+		voice: "axis",
+		x: n.x(t),
+		y: n.bottom + 22,
+		children: a[r]
+	}, e.data[t].week.toISOString()))] });
+}, F = (e) => {
+	let t = e.frame.x(e.i), n = e.frame.y(e.d.actual), r = e.frame.y(e.d.plan);
+	return /* @__PURE__ */ S("g", {
+		className: "pointer-events-none",
+		children: [
+			/* @__PURE__ */ x(u, {
+				className: "stroke-ink",
+				x: t,
+				y0: Math.min(n, r),
+				y1: Math.max(n, r)
+			}),
+			/* @__PURE__ */ x(c, {
+				className: "fill-l4",
+				cx: t,
+				cy: r,
+				size: "sm"
+			}),
+			/* @__PURE__ */ x(c, {
+				className: "fill-hero",
+				cx: t,
+				cy: n,
+				size: "md"
+			})
+		]
+	});
+}, I = (e) => {
+	let t = m("plan-gap"), { data: n } = e, r = M(n, e.width, e.height), i = (e, t) => r.x(t), o = C().curve(w).x(i).y0((e) => r.y(e.plan)).y1((e) => r.y(e.actual))(n), s = C().curve(w).x(i).y0(r.top - 8).y1((e) => r.y(e.plan))(n), c = C().curve(w).x(i).y0(r.bottom + 8).y1((e) => r.y(e.plan))(n), u = (e) => T().curve(w).x(i).y((t) => r.y(t[e]))(n) ?? "", f = `Weekly mean temperature in Central England, 2022, against the 1991 to 2020 normal: above normal in ${n.filter((e) => e.actual >= e.plan).length} of ${n.length} weeks`;
+	return /* @__PURE__ */ S(d, {
+		className: "touch-pan-y",
+		height: e.height,
+		label: f,
+		leave: e.hover.clear,
+		onPointerMove: (t) => {
+			let i = (t.clientX - t.currentTarget.getBoundingClientRect().left - r.x0) / (r.x1 - r.x0), o = a(Math.round(i * (n.length - 1)), 0, n.length - 1), s = n[o];
+			e.hover.show(o, r.x(o), r.y(Math.max(s.actual, s.plan)) - 8);
+		},
+		width: e.width,
+		children: [
+			/* @__PURE__ */ S("defs", { children: [
+				/* @__PURE__ */ x(h, {
+					id: t("lead"),
+					tone: "fill-hero"
+				}),
+				/* @__PURE__ */ x(g, {
+					angle: "rising",
+					id: t("hatch"),
+					tone: "fill-l4"
+				}),
+				/* @__PURE__ */ x("clipPath", {
+					id: t("above"),
+					children: /* @__PURE__ */ x("path", { d: s ?? "" })
+				}),
+				/* @__PURE__ */ x("clipPath", {
+					id: t("below"),
+					children: /* @__PURE__ */ x("path", { d: c ?? "" })
+				})
+			] }),
+			/* @__PURE__ */ x(P, {
+				data: n,
+				frame: r,
+				width: e.width
+			}),
+			/* @__PURE__ */ S("g", {
+				className: "fade",
+				children: [/* @__PURE__ */ x("path", {
+					clipPath: p(t("above")),
+					d: o ?? "",
+					fill: p(t("lead"))
+				}), /* @__PURE__ */ x("path", {
+					clipPath: p(t("below")),
+					d: o ?? "",
+					fill: p(t("hatch"))
+				})]
+			}),
+			/* @__PURE__ */ x(l, {
+				x0: r.x0,
+				x1: r.x1,
+				y: r.bottom
+			}),
+			/* @__PURE__ */ x("path", {
+				className: "draw stroke-l3 stroke-medium cap-round fill-none",
+				d: u("plan"),
+				pathLength: 1
+			}),
+			/* @__PURE__ */ x("path", {
+				className: "draw stroke-ink stroke-medium cap-round fill-none",
+				d: u("actual"),
+				pathLength: 1
+			}),
+			/* @__PURE__ */ x(N, {
+				data: n,
+				frame: r
+			}),
+			e.hover.key === null ? null : /* @__PURE__ */ x(F, {
+				d: n[e.hover.key],
+				frame: r,
+				i: e.hover.key
+			})
+		]
+	});
+}, L = (e) => {
+	let t = e.actual - e.plan;
+	return t === 0 ? "at normal" : t > 0 ? `${A(t)} above normal` : `${A(-t)} below normal`;
+}, R = (e) => {
+	let t = e.data ?? v, a = n();
+	return /* @__PURE__ */ x(r, {
+		overlay: a.at === null ? null : /* @__PURE__ */ x(i, {
+			x: a.at.x,
+			y: a.at.y,
+			children: /* @__PURE__ */ x(s, {
+				facts: [A(t[a.at.key].actual), L(t[a.at.key])],
+				lead: `Week of ${D(t[a.at.key].week)}`
+			})
+		}),
+		children: (e) => /* @__PURE__ */ x(I, {
+			data: t,
+			height: 460,
+			hover: a,
+			width: e
+		})
+	});
+};
+//#endregion
+export { R as AreaDifference };

package/lib/charts/forms/brush-math.js

@@ -0,0 +1,42 @@
+"use client";
+import { clamp as e } from "../util.js";
+//#region src/charts/forms/brush-math.ts
+var t = 6, n = (n, r, i) => {
+	if (n.grip === "start") return {
+		a: e(n.from.a + r, 0, n.from.b - t),
+		b: n.from.b
+	};
+	if (n.grip === "end") return {
+		a: n.from.a,
+		b: e(n.from.b + r, n.from.a + t, i)
+	};
+	let a = e(r, -n.from.a, i - n.from.b);
+	return {
+		a: n.from.a + a,
+		b: n.from.b + a
+	};
+}, r = (t, n, r) => {
+	let i = t.b - t.a, a = e(Math.round(n - i / 2), 0, r - i);
+	return {
+		a,
+		b: a + i
+	};
+}, i = (t, n, r) => {
+	let i = n.b - n.a;
+	if (t === "Home") return {
+		a: 0,
+		b: i
+	};
+	if (t === "End") return {
+		a: r - i,
+		b: r
+	};
+	if (t !== "ArrowLeft" && t !== "ArrowRight") return null;
+	let a = e(t === "ArrowLeft" ? -7 : 7, -n.a, r - n.b);
+	return {
+		a: n.a + a,
+		b: n.b + a
+	};
+};
+//#endregion
+export { r as centreOn, n as dragTo, i as keyTo };

package/lib/charts/forms/brush-strip.js

@@ -0,0 +1,199 @@
+"use client";
+import { monthTickLabels as e } from "../../lib/format.js";
+import { HitRect as t } from "../hover.js";
+import "../marks.js";
+import { HRule as n } from "../rules.js";
+import { Label as r } from "../text.js";
+import { TEXTURE_PITCH as i, paint as a, useTextureIds as o } from "../texture-ids.js";
+import { Stipple as s } from "../texture.js";
+import { centreOn as c, dragTo as l, keyTo as u } from "./brush-math.js";
+import { useRef as d, useState as f } from "react";
+import { scaleLinear as p } from "d3-scale";
+import { utcFormat as m } from "d3-time-format";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { area as _, curveMonotoneX as v, line as y } from "d3-shape";
+//#region src/charts/forms/brush-strip.tsx
+var b = 48, x = 22, S = m("%-d %b %Y"), C = 64, w = (e) => {
+	let t = e / 12;
+	return t >= C ? 1 : t * 2 >= C ? 2 : 3;
+}, T = (t) => {
+	let n = t.data.flatMap((e, n) => e.date.getUTCDate() === 1 && e.date.getUTCMonth() % t.every === 0 ? [n] : []), i = e(n.map((e) => t.data[e].date));
+	return /* @__PURE__ */ h("g", { children: n.map((e, n) => /* @__PURE__ */ h(r, {
+		voice: "axis",
+		x: t.x(e) + 4,
+		y: 64,
+		children: i[n]
+	}, t.data[e].date.toISOString())) });
+}, E = (e, t, n, r) => {
+	let i = d(null), a = (t) => {
+		let n = t.currentTarget.ownerSVGElement?.getBoundingClientRect();
+		return e.invert(t.clientX - (n?.left ?? 0));
+	}, o = () => {
+		i.current = null;
+	};
+	return (e) => ({
+		onLostPointerCapture: o,
+		onPointerDown: (o) => {
+			o.currentTarget.setPointerCapture(o.pointerId);
+			let s = e === "outside" ? c(t, a(o), n) : t;
+			e === "outside" && r(s), i.current = {
+				from: s,
+				grip: e === "outside" ? "body" : e,
+				origin: a(o)
+			};
+		},
+		onPointerMove: (e) => {
+			if (i.current !== null) {
+				let t = Math.round(a(e) - i.current.origin);
+				r(l(i.current, t, n));
+			}
+		},
+		onPointerUp: o
+	});
+}, D = (e) => {
+	let { xa: n, xb: r } = e, i = Math.min(x, Math.max(0, (r - n) / 2)), a = e.focused ? 2 : 1;
+	return /* @__PURE__ */ g("g", { children: [
+		/* @__PURE__ */ h("rect", {
+			className: "stroke-ink shape-crisp fill-none",
+			height: b - a,
+			strokeWidth: a,
+			width: Math.max(1, r - n),
+			x: n + a / 2,
+			y: a / 2
+		}),
+		[n + 1, r].map((e) => /* @__PURE__ */ h("line", {
+			className: "stroke-ink",
+			strokeWidth: 2,
+			x1: e,
+			x2: e,
+			y1: b / 2 - 8,
+			y2: 32
+		}, e === r ? "end" : "start")),
+		/* @__PURE__ */ h(t, {
+			className: "cursor-grab active:cursor-grabbing",
+			height: b,
+			width: Math.max(0, r - n),
+			x: n,
+			y: 0,
+			...e.grip("body")
+		}),
+		/* @__PURE__ */ h(t, {
+			className: "cursor-ew-resize",
+			height: b,
+			width: x + i,
+			x: n - x,
+			y: 0,
+			...e.grip("start")
+		}),
+		/* @__PURE__ */ h(t, {
+			className: "cursor-ew-resize",
+			height: b,
+			width: x + i,
+			x: r - i,
+			y: 0,
+			...e.grip("end")
+		})
+	] });
+}, O = (e) => {
+	let r = o("brush"), [c, l] = f(!1), d = e.data.length - 1, m = p().domain([0, d]).range([e.x0, e.x1]), x = E(m, e.span, d, e.onChange), C = p().domain([Math.min(...e.mean), Math.max(...e.mean)]).range([42, 6]), O = y().x((e, t) => m(t)).y((e) => C(e)).curve(v)(e.mean) ?? "", k = _().x((e, t) => m(t)).y0(47).y1((e) => C(e)).curve(v)(e.mean) ?? "", A = Math.round(m(e.span.a)), j = Math.round(m(e.span.b)), M = e.span.b - e.span.a;
+	return /* @__PURE__ */ g("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ h("input", {
+			"aria-label": "Window over the year",
+			"aria-valuetext": `${S(e.data[e.span.a].date)} to ${S(e.data[e.span.b].date)}`,
+			className: "sr-only",
+			max: d - M,
+			min: 0,
+			onBlur: () => {
+				l(!1);
+			},
+			onChange: (t) => {
+				let n = Number(t.currentTarget.value);
+				e.onChange({
+					a: n,
+					b: n + M
+				});
+			},
+			onFocus: () => {
+				l(!0);
+			},
+			onKeyDown: (t) => {
+				let n = u(t.key, e.span, d);
+				n !== null && (t.preventDefault(), e.onChange(n));
+			},
+			type: "range",
+			value: e.span.a
+		}), /* @__PURE__ */ g("svg", {
+			"aria-hidden": "true",
+			className: "touch-none",
+			height: 72,
+			width: e.width,
+			children: [
+				/* @__PURE__ */ g("defs", { children: [
+					/* @__PURE__ */ h("clipPath", {
+						id: r("in"),
+						children: /* @__PURE__ */ h("rect", {
+							height: b,
+							width: Math.max(0, j - A),
+							x: A,
+							y: 0
+						})
+					}),
+					/* @__PURE__ */ h(s, {
+						id: r("out"),
+						pitch: i.dense,
+						tone: "fill-l5"
+					}),
+					/* @__PURE__ */ h(s, {
+						id: r("sel"),
+						pitch: i.dense,
+						tone: "fill-l4"
+					})
+				] }),
+				/* @__PURE__ */ h(n, {
+					x0: e.x0,
+					x1: e.x1,
+					y: 47
+				}),
+				/* @__PURE__ */ h("path", {
+					d: k,
+					fill: a(r("out"))
+				}),
+				/* @__PURE__ */ h("path", {
+					clipPath: a(r("in")),
+					d: k,
+					fill: a(r("sel"))
+				}),
+				/* @__PURE__ */ h("path", {
+					className: "stroke-l5 stroke-medium cap-round fill-none",
+					d: O
+				}),
+				/* @__PURE__ */ h("path", {
+					className: "stroke-l2 stroke-medium cap-round fill-none",
+					clipPath: a(r("in")),
+					d: O
+				}),
+				/* @__PURE__ */ h(T, {
+					data: e.data,
+					every: w(e.x1 - e.x0),
+					x: (e) => m(e)
+				}),
+				/* @__PURE__ */ h(t, {
+					height: b,
+					width: e.x1 - e.x0,
+					x: e.x0,
+					y: 0,
+					...x("outside")
+				}),
+				/* @__PURE__ */ h(D, {
+					focused: c,
+					grip: x,
+					xa: A,
+					xb: j
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { O as BrushStrip };