@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/glance/scatter-morph.data.js

@@ -0,0 +1,78 @@
+"use client";
+//#region src/charts/glance/scatter-morph.data.ts
+var e = [
+	{
+		label: "Ceres",
+		value: 939,
+		x: 10.59,
+		y: .0797
+	},
+	{
+		label: "Vesta",
+		value: 523,
+		x: 7.14,
+		y: .0902
+	},
+	{
+		label: "Pallas",
+		value: 513,
+		x: 34.93,
+		y: .2307
+	},
+	{
+		label: "Hygiea",
+		value: 407,
+		x: 3.83,
+		y: .1067
+	},
+	{
+		label: "Interamnia",
+		value: 306,
+		x: 17.32,
+		y: .1551
+	},
+	{
+		label: "Europa",
+		value: 304,
+		x: 7.48,
+		y: .1125
+	},
+	{
+		label: "Davida",
+		value: 270,
+		x: 15.95,
+		y: .1894
+	},
+	{
+		label: "Euphrosyne",
+		value: 267,
+		x: 26.31,
+		y: .2158
+	},
+	{
+		label: "Patientia",
+		value: 254,
+		x: 15.21,
+		y: .0695
+	},
+	{
+		label: "Sylvia",
+		value: 253,
+		x: 10.85,
+		y: .0942
+	},
+	{
+		label: "Juno",
+		value: 247,
+		x: 12.99,
+		y: .2557
+	},
+	{
+		label: "Cybele",
+		value: 237,
+		x: 3.57,
+		y: .1279
+	}
+];
+//#endregion
+export { e as scatterMorphDemo };

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

@@ -0,0 +1,338 @@
+"use client";
+import { useHover as e, useReducedMotion as t, useReveal as n } from "../hooks.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { 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 { FootNote as d } from "../plot-note.js";
+import { HRule as f } from "../rules.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { paint as h, useTextureIds as g } from "../texture-ids.js";
+import { Hatch as _ } from "../texture.js";
+import { blendPts as v, circlePts as y, labelRoom as b, ptsPath as x, rankTones as S, rectPts as C, sectorPts as w } from "./util-a.js";
+import { Control as T } from "../control.js";
+import { DURATION as E, easeTravel as D } from "../motion.js";
+import { useFrame as O } from "../playback.js";
+import { ControlSlot as k } from "./control-slot.js";
+import { placeNames as A } from "./scatter-labels.js";
+import { scatterMorphDemo as j } from "./scatter-morph.data.js";
+import { useEffect as M, useRef as N, useState as P } from "react";
+import { scaleLinear as F } from "d3-scale";
+import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
+//#region src/charts/glance/scatter-morph.tsx
+var z = [
+	"scatter",
+	"bars",
+	"ring"
+], B = {
+	bars: "Bars",
+	ring: "Ring",
+	scatter: "Scatter"
+}, V = 3e3, H = E.long, U = 2, W = (e) => `${e} km`, G = (e) => `${e}°`, K = (e) => e.toFixed(2), q = (e) => {
+	let t = [Math.min(0, ...e.data.map((e) => e.y)), Math.max(...e.data.map((e) => e.y))], n = F().domain(t).nice(4).ticks(4).map(e.fy), r = {
+		bottom: 34,
+		left: b(n, "t-axis") + 8,
+		right: 0,
+		top: 14
+	}, i = F().domain([0, Math.max(...e.data.map((e) => e.x))]).nice(4).range([r.left, e.width - r.right - 30]), a = F().domain(t).nice(4).range([e.h - r.bottom, r.top]), o = Math.max(...e.data.map((e) => e.value)), s = (t) => Math.max(5, (e.narrow ? 18 : 24) * Math.sqrt(t / o));
+	return {
+		furniture: /* @__PURE__ */ R("g", { children: [
+			a.ticks(4).map((t) => /* @__PURE__ */ R("g", { children: [/* @__PURE__ */ L(f, {
+				kind: t === 0 ? "hairline" : "grid",
+				x0: r.left,
+				x1: e.width - r.right,
+				y: a(t)
+			}), /* @__PURE__ */ L(m, {
+				anchor: "end",
+				dy: "0.35em",
+				voice: "axis",
+				x: r.left - 8,
+				y: a(t),
+				children: e.fy(t)
+			})] }, `y${t}`)),
+			i.ticks(4).map((t) => /* @__PURE__ */ L(m, {
+				anchor: "middle",
+				voice: "axis",
+				x: i(t),
+				y: e.h - r.bottom + 18,
+				children: e.fx(t)
+			}, `x${t}`)),
+			/* @__PURE__ */ R(m, {
+				anchor: "end",
+				voice: "axis",
+				x: e.width - r.right,
+				y: e.h - 2,
+				children: [e.xLabel, " →"]
+			}),
+			/* @__PURE__ */ R(m, {
+				voice: "axis",
+				x: r.left,
+				y: r.top - 6,
+				children: ["↑ ", e.yLabel]
+			})
+		] }),
+		labels: A(e.data, {
+			left: r.left,
+			right: e.width
+		}, (e) => [
+			i(e.x),
+			a(e.y),
+			s(e.value)
+		]),
+		marks: e.data.map((e) => y(i(e.x), a(e.y), s(e.value) - U)),
+		tips: e.data.map((e) => [i(e.x), a(e.y) - s(e.value)])
+	};
+}, J = (e) => {
+	let t = (e.width - 12) / e.data.length, n = Math.max(...e.data.map((e) => s(e.label, 12))), r = e.narrow || n > t - 6, i = {
+		bottom: r ? 60 : 30,
+		left: 6,
+		right: 6,
+		top: 24
+	}, a = t * (e.narrow ? .7 : .62), o = e.h - i.bottom, c = F().domain([0, Math.max(...e.data.map((e) => e.value))]).range([o, i.top]), l = new Map(e.order.map((e, t) => [e, t])), u = (e) => i.left + ((l.get(e) ?? 0) + .5) * t;
+	return {
+		furniture: /* @__PURE__ */ L("line", {
+			className: "hairline",
+			x1: i.left,
+			x2: e.width - i.right,
+			y1: o + .5,
+			y2: o + .5
+		}),
+		labels: e.data.flatMap((e, t) => [{
+			anchor: r ? "end" : "middle",
+			id: `${e.label}-cat`,
+			kind: "category",
+			rotate: r ? -50 : 0,
+			text: e.label,
+			x: u(t),
+			y: o + 14
+		}, {
+			anchor: "middle",
+			id: `${e.label}-val`,
+			kind: "value",
+			text: String(e.value),
+			x: u(t),
+			y: c(e.value) - 8
+		}]),
+		marks: e.data.map((e, t) => C(u(t) - a / 2 + U, c(e.value) + U, u(t) + a / 2 - U, o - U)),
+		tips: e.data.map((e, t) => [u(t), c(e.value) - 18])
+	};
+}, Y = 14, X = (e, t, n, r) => {
+	let i = e.map((e) => e.y), a = i.filter((e) => e < t).length;
+	for (let e = a - 2; e >= 0; --e) i[e] = Math.min(i[e], i[e + 1] - Y);
+	a > 0 && (i[0] = Math.max(n, i[0]));
+	for (let e = 1; e < i.length; e += 1) i[e] = Math.max(i[e], i[e - 1] + Y);
+	let o = i.length - 1;
+	if (o >= 0 && i[o] > r) {
+		i[o] = r;
+		for (let e = o - 1; e >= 0; --e) i[e] = Math.min(i[e], i[e + 1] - Y);
+	}
+	return new Map(e.map((e, t) => [e.i, i[t]]));
+}, Z = {
+	bars: J,
+	ring: (e) => {
+		let t = e.width / 2, n = e.h / 2, r = Math.min(e.h / 2 - 26, e.width / 2 - (e.narrow ? 70 : 110)), i = r * .42, a = e.data.reduce((e, t) => e + t.value, 0), o = /* @__PURE__ */ new Map(), s = 0;
+		for (let t of e.order) {
+			let n = s / a * Math.PI * 2;
+			s += e.data[t].value, o.set(t, {
+				a0: n,
+				a1: s / a * Math.PI * 2
+			});
+		}
+		let c = (e) => o.get(e) ?? {
+			a0: 0,
+			a1: 0
+		}, l = (e) => (c(e).a0 + c(e).a1) / 2, u = e.narrow ? 14 : 34, d = e.data.flatMap((t, n) => e.narrow && c(n).a1 - c(n).a0 < .25 ? [] : [n]), f = (e) => [t + (r + 16) * Math.sin(l(e)), n - (r + 16) * Math.cos(l(e))], p = (e) => d.flatMap((t) => Math.sin(l(t)) >= 0 === e ? [{
+			i: t,
+			y: f(t)[1]
+		}] : []).toSorted((e, t) => e.y - t.y), m = new Map([...X(p(!0), n, 7, e.h - 7), ...X(p(!1), n, 7, e.h - 7)]);
+		return {
+			furniture: null,
+			labels: d.map((i) => {
+				let a = Math.sin(l(i)), o = -Math.cos(l(i)), s = a >= 0, [c] = f(i), d = m.get(i) ?? f(i)[1], p = c + (s ? u : -u);
+				return {
+					anchor: s ? "start" : "end",
+					id: e.data[i].label,
+					kind: "name",
+					leader: `M${t + (r + 4) * a},${n + (r + 4) * o}L${c},${d}L${p},${d}`,
+					text: e.data[i].label,
+					x: p + (s ? 6 : -6),
+					y: d
+				};
+			}),
+			marks: e.data.map((e, a) => w(t, n, i + U, r - U, c(a).a0, c(a).a1, 3.5)),
+			tips: e.data.map((e, i) => [t + r * Math.sin(l(i)), n - r * Math.cos(l(i))])
+		};
+	},
+	scatter: q
+}, Q = (e, t) => {
+	if (e.kind === "view") return t(e.view);
+	let n = Q(e.from, t), r = t(e.to), i = D(e.t);
+	return n.map((e, t) => v(e, r[t], i));
+}, $ = (e, t, n) => {
+	let [r, i] = P({
+		kind: "view",
+		view: 0
+	}), [a, o] = P(0), [s, c] = P(1), l = s >= 1, u = (e) => {
+		e !== a && (i(l || t ? {
+			kind: "view",
+			view: a
+		} : {
+			from: r,
+			kind: "between",
+			t: s,
+			to: a
+		}), o(e), c(+!!t));
+	};
+	O(!l && !t, (e) => {
+		c((t) => Math.min(1, t + e / H));
+	});
+	let d = (a + 1) % z.length, f = e && !t && !n && l;
+	return M(() => {
+		let e = 0;
+		return f && (e = window.setTimeout(() => {
+			i({
+				kind: "view",
+				view: a
+			}), o(d), c(0);
+		}, V)), () => {
+			window.clearTimeout(e);
+		};
+	}, [
+		f,
+		d,
+		a
+	]), {
+		go: u,
+		settled: l,
+		start: r,
+		t: s,
+		to: a
+	};
+}, ee = ({ onPointerEnter: e, ...t }) => /* @__PURE__ */ L(l, {
+	className: "pop",
+	dim: t.dim,
+	style: c(t.i, "mark"),
+	strokeLinejoin: "round",
+	onPointerEnter: e,
+	children: t.fill === void 0 ? /* @__PURE__ */ L("path", {
+		className: "fill-hero stroke-hero",
+		d: t.d,
+		strokeWidth: 4
+	}) : /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("path", {
+		className: "fill-l5 stroke-l5",
+		d: t.d,
+		strokeWidth: 4
+	}), /* @__PURE__ */ L("path", {
+		d: t.d,
+		fill: t.fill,
+		stroke: t.fill,
+		strokeWidth: 2
+	})] })
+}), te = ({ active: e, onPick: t }) => /* @__PURE__ */ R("fieldset", {
+	className: "m-0 flex gap-1 border-0 p-0",
+	children: [/* @__PURE__ */ L("legend", {
+		className: "sr-only",
+		children: "View"
+	}), z.map((n, r) => /* @__PURE__ */ L(T, {
+		pressed: r === e,
+		onClick: () => {
+			t(r);
+		},
+		children: B[n]
+	}, n))]
+}), ne = ({ labels: e, halo: t }) => /* @__PURE__ */ L("g", {
+	className: "pointer-events-none",
+	children: e.map((e) => /* @__PURE__ */ R("g", {
+		className: "fade",
+		children: [e.leader === void 0 ? null : /* @__PURE__ */ L("path", {
+			className: "stroke-faint",
+			d: e.leader,
+			fill: "none",
+			strokeWidth: 1
+		}), /* @__PURE__ */ L(m, {
+			anchor: e.anchor,
+			dy: "0.35em",
+			halo: t,
+			muted: e.kind === "category",
+			transform: e.rotate === void 0 || e.rotate === 0 ? void 0 : `rotate(${e.rotate} ${e.x} ${e.y})`,
+			voice: e.kind === "value" ? "value" : "label",
+			x: e.x,
+			y: e.y,
+			children: e.text
+		})]
+	}, e.id))
+}), re = (s) => {
+	let c = s.data ?? j, l = s.height ?? 380, f = s.format ?? W, m = s.formatX ?? G, v = s.formatY ?? K, y = s.xLabel ?? "Inclination", b = s.yLabel ?? "Eccentricity", C = N(null), w = n(C), T = t(), E = e(), D = $(w, T, E.key !== null), O = g("morph"), A = D.go, M = S(c.map((e) => e.value), [0, 4]), P = c.map((e, t) => t).toSorted((e, t) => c[t].value - c[e].value), F = z[D.to], I = `${c.length} items shown as ${B[F].toLowerCase()}: ${P.map((e) => `${c[e].label} ${f(c[e].value)}`).join(", ")}`;
+	return /* @__PURE__ */ R("div", {
+		ref: C,
+		children: [/* @__PURE__ */ L(k, { children: /* @__PURE__ */ L(te, {
+			active: D.to,
+			onPick: A
+		}) }), /* @__PURE__ */ L(r, { children: (e) => {
+			let t = o(a(s), e - 16, 16), n = l - 44 - t, r = {
+				data: c,
+				fx: m,
+				fy: v,
+				h: n,
+				narrow: e < 460,
+				order: P,
+				width: e,
+				xLabel: y,
+				yLabel: b
+			}, g = Z[F](r), S = D.settled ? g.marks : Q({
+				from: D.start,
+				kind: "between",
+				t: D.t,
+				to: D.to
+			}, (e) => Z[z[e]](r).marks), C = E.key === null ? void 0 : g.tips[E.key];
+			return /* @__PURE__ */ R("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ R(p, {
+					height: n + t,
+					label: I,
+					leave: E.clear,
+					width: e,
+					children: [
+						/* @__PURE__ */ L("defs", { children: /* @__PURE__ */ L(_, {
+							id: O("hatch"),
+							tone: "fill-l3"
+						}) }),
+						D.settled ? /* @__PURE__ */ L("g", {
+							className: "fade",
+							children: g.furniture
+						}, `f-${F}`) : null,
+						c.map((e, t) => /* @__PURE__ */ L(ee, {
+							d: x(S[t]),
+							dim: E.dim(t),
+							fill: M[t] === 0 ? void 0 : h(O("hatch")),
+							i: t,
+							onPointerEnter: E.enter(t)
+						}, e.label)),
+						D.settled ? /* @__PURE__ */ L(ne, {
+							labels: g.labels,
+							halo: F === "scatter"
+						}, `l-${F}`) : null,
+						/* @__PURE__ */ L(d, {
+							height: n + t,
+							text: a(s),
+							width: e
+						})
+					]
+				}), C === void 0 || E.key === null ? null : /* @__PURE__ */ L(i, {
+					x: C[0],
+					y: C[1],
+					children: /* @__PURE__ */ L(u, {
+						facts: [
+							f(c[E.key].value),
+							`${m(c[E.key].x)} ${y.toLowerCase()}`,
+							`${v(c[E.key].y)} ${b.toLowerCase()}`
+						],
+						lead: c[E.key].label
+					})
+				})]
+			});
+		} })]
+	});
+};
+//#endregion
+export { re as ScatterMorph };

package/lib/charts/glance/single-axis.data.js

@@ -0,0 +1,6 @@
+"use client";
+import e from "./single-axis.tides.json.js";
+//#region src/charts/glance/single-axis.data.ts
+var t = e;
+//#endregion
+export { t as singleAxisDemo };

package/lib/charts/glance/single-axis.js

@@ -0,0 +1,150 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, ranks as i, sansWidth as a, stagger as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { crisp as l } from "../axes.js";
+import { FootNote as u } from "../plot-note.js";
+import { HRule as d } from "../rules.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { paint as m, useTextureIds as h } from "../texture-ids.js";
+import { Hatch as g } from "../texture.js";
+import { singleAxisDemo as _ } from "./single-axis.data.js";
+import { useState as v } from "react";
+import { scaleSqrt as y } from "d3-scale";
+import { format as b } from "d3-format";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/charts/glance/single-axis.tsx
+var C = (e) => `${String(e).padStart(2, "0")}:00`, w = b(".1f"), T = (e) => {
+	let t = l(e.grid.cy(e.i));
+	return /* @__PURE__ */ S(s, {
+		dim: e.dimmed,
+		children: [
+			/* @__PURE__ */ x(d, {
+				kind: "rule",
+				x0: e.x0,
+				x1: e.x1,
+				y: e.grid.cy(e.i)
+			}),
+			/* @__PURE__ */ x(p, {
+				className: e.labelClass,
+				dy: "0.35em",
+				voice: "label",
+				x: 0,
+				y: t,
+				children: e.row.label
+			}),
+			e.row.values.map((n, r) => n > 0 ? /* @__PURE__ */ x("circle", {
+				className: `pop ${e.fill}`,
+				fill: e.pattern,
+				style: o(r + e.i * 2, "fine"),
+				cx: e.grid.cx(r),
+				cy: t,
+				r: Math.max(2, e.grid.rad(n)),
+				strokeWidth: 1
+			}, `${e.row.label}-${C(r)}`) : null)
+		]
+	});
+}, E = (e) => /* @__PURE__ */ x("g", {
+	className: "fill-transparent",
+	children: e.data.map((t, n) => e.columns.map((r, i) => /* @__PURE__ */ x("rect", {
+		x: e.grid.cx(i) - e.grid.step / 2,
+		y: e.grid.cy(n) - e.grid.pitch / 2,
+		width: e.grid.step,
+		height: e.grid.pitch,
+		onPointerEnter: () => {
+			e.onEnter({
+				c: i,
+				r: n,
+				x: e.grid.cx(i),
+				y: e.grid.cy(n) - Math.max(4, e.grid.rad(t.values[i])) - 4
+			});
+		}
+	}, `${t.label}-${r}`)))
+}), D = (e, t, n, r, i) => `Predicted tide height by hour at ${e.length} stations: ${e.map((e) => {
+	let a = Math.max(...e.values);
+	return `${e.label} highest ${n(a)} ${r} at ${t[e.values.indexOf(a)]} ${i}`;
+}).join(", ")}`, O = (o) => {
+	let s = o.data ?? _, l = o.height ?? 400, d = s[0]?.values.length ?? 24, b = o.columns ?? Array.from({ length: d }, (e, t) => C(t)), O = o.ticks ?? [
+		0,
+		6,
+		12,
+		18
+	], k = o.format ?? w, A = o.unit ?? "m", j = o.zone ?? "EST", [M, N] = v(null), P = s.map((e) => e.values.reduce((e, t) => e + t, 0)), F = i(P), I = o.highlight ?? F.indexOf(0), L = h("punch"), R = Math.max(...s.flatMap((e) => e.values)), z = D(s, b, k, A, j);
+	return /* @__PURE__ */ x(e, {
+		overlay: M === null ? null : /* @__PURE__ */ x(t, {
+			x: M.x,
+			y: M.y,
+			children: /* @__PURE__ */ x(c, {
+				facts: [`${k(s[M.r].values[M.c])} ${A}`],
+				lead: `${s[M.r].label} ${b[M.c]} ${j}`
+			})
+		}),
+		children: (e) => {
+			let t = {
+				bottom: 28 + r(n(o), e - 16, 18),
+				left: Math.ceil(Math.max(...s.map((e) => a(e.label, 12)))) + 12,
+				right: 0,
+				top: 14
+			}, i = (e - t.left - t.right) / (d + .45), c = Math.min((l - t.top - t.bottom) / s.length, Math.max(28, i * 3.2)), h = Math.round(t.top + c * s.length + t.bottom), _ = {
+				cx: (e) => t.left + i * (e + .5),
+				cy: (e) => t.top + c * (e + .5),
+				pitch: c,
+				rad: y().domain([0, R]).range([0, Math.min(c * .46, i * .95)]),
+				step: i
+			}, v = h - t.bottom;
+			return /* @__PURE__ */ S(f, {
+				height: h,
+				label: z,
+				leave: () => {
+					N(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ x("defs", { children: /* @__PURE__ */ x(g, {
+						id: L("hatch"),
+						tone: "fill-l4"
+					}) }),
+					s.map((n, r) => /* @__PURE__ */ x(T, {
+						dimmed: M !== null && M.r !== r,
+						fill: I === r ? "fill-hero stroke-paper" : "stroke-l5",
+						pattern: I === r ? void 0 : m(L("hatch")),
+						grid: _,
+						i: r,
+						labelClass: I === r ? "fill-text" : "fill-muted",
+						row: n,
+						x0: t.left,
+						x1: e - t.right
+					}, n.label)),
+					/* @__PURE__ */ x(E, {
+						columns: b,
+						data: s,
+						grid: _,
+						onEnter: N
+					}),
+					O.map((e) => /* @__PURE__ */ x(p, {
+						anchor: "middle",
+						voice: "axis",
+						x: _.cx(e),
+						y: v + 16,
+						children: b[e]
+					}, b[e])),
+					/* @__PURE__ */ x(p, {
+						anchor: "end",
+						voice: "axis",
+						x: e - t.right,
+						y: v + 16,
+						children: j
+					}),
+					/* @__PURE__ */ x(u, {
+						height: h,
+						text: n(o),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { O as SingleAxis };