@howells/hairline 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,180 @@
+"use client";
+//#region src/charts/glance/single-axis.tides.json
+var e = [
+	{
+		label: "Sandy Hook",
+		values: [
+			1.189,
+			1.118,
+			.931,
+			.712,
+			.548,
+			.471,
+			.479,
+			.59,
+			.796,
+			1.028,
+			1.213,
+			1.336,
+			1.396,
+			1.353,
+			1.177,
+			.921,
+			.685,
+			.519,
+			.424,
+			.414,
+			.515,
+			.696,
+			.881,
+			1.029
+		]
+	},
+	{
+		label: "Battery",
+		values: [
+			1.149,
+			1.155,
+			1.04,
+			.823,
+			.619,
+			.512,
+			.489,
+			.533,
+			.681,
+			.913,
+			1.13,
+			1.274,
+			1.356,
+			1.373,
+			1.279,
+			1.059,
+			.795,
+			.598,
+			.484,
+			.421,
+			.443,
+			.584,
+			.779,
+			.945
+		]
+	},
+	{
+		label: "Haverstraw",
+		values: [
+			.587,
+			.719,
+			.806,
+			.845,
+			.805,
+			.671,
+			.488,
+			.337,
+			.261,
+			.246,
+			.302,
+			.464,
+			.689,
+			.883,
+			1.003,
+			1.055,
+			1.03,
+			.914,
+			.732,
+			.552,
+			.422,
+			.334,
+			.278,
+			.3
+		]
+	},
+	{
+		label: "Hyde Park",
+		values: [
+			.218,
+			.344,
+			.525,
+			.677,
+			.78,
+			.824,
+			.785,
+			.665,
+			.519,
+			.416,
+			.357,
+			.305,
+			.306,
+			.437,
+			.657,
+			.862,
+			1.007,
+			1.087,
+			1.078,
+			.965,
+			.782,
+			.603,
+			.468,
+			.344
+		]
+	},
+	{
+		label: "Coxsackie",
+		values: [
+			.666,
+			.441,
+			.277,
+			.297,
+			.494,
+			.706,
+			.889,
+			1.083,
+			1.193,
+			1.125,
+			.961,
+			.802,
+			.662,
+			.523,
+			.403,
+			.412,
+			.618,
+			.89,
+			1.106,
+			1.309,
+			1.468,
+			1.451,
+			1.272,
+			1.054
+		]
+	},
+	{
+		label: "Albany",
+		values: [
+			.733,
+			.543,
+			.392,
+			.267,
+			.26,
+			.487,
+			.822,
+			1.045,
+			1.168,
+			1.243,
+			1.167,
+			.924,
+			.647,
+			.436,
+			.319,
+			.29,
+			.369,
+			.65,
+			1.076,
+			1.386,
+			1.49,
+			1.507,
+			1.432,
+			1.208
+		]
+	}
+];
+//#endregion
+export { e as default };

package/lib/charts/glance/stagger-wave.data.js

@@ -0,0 +1,66 @@
+"use client";
+//#region src/charts/glance/stagger-wave.data.ts
+var e = Date.UTC(2010, 10, 2), t = 864e5, n = [
+	11,
+	12.7,
+	13.5,
+	13.6,
+	8.1,
+	5.2,
+	4.4,
+	5.8,
+	5.4,
+	6.7,
+	9.8,
+	7.5,
+	4.9,
+	2.9,
+	3.5,
+	3.1,
+	7.1,
+	6.1,
+	5.2,
+	4.7,
+	5.4,
+	5.1,
+	1.6,
+	.2,
+	-.5,
+	-1.6,
+	-4,
+	-2.5,
+	-1,
+	-2,
+	-1.3,
+	-2.6,
+	-1.5,
+	.4,
+	-3.8,
+	-3.5,
+	-2.7,
+	.5,
+	3.8,
+	6,
+	.8,
+	1.5,
+	1.9,
+	3.3,
+	4.2,
+	-2.1,
+	-3,
+	-6.8,
+	-7,
+	-5.9,
+	-2.1,
+	-2.2,
+	-2.8,
+	-5.9,
+	-3.6,
+	-1.7
+], r = n.map((n, r) => ({
+	date: new Date(e + r * t),
+	value: n
+}));
+n.indexOf(Math.min(...n));
+//#endregion
+export { r as staggerWaveDemo };

package/lib/charts/glance/stagger-wave.js

@@ -0,0 +1,132 @@
+"use client";
+import { fmtDegC as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { cx as i, noteOf as a, noteSpace as o, stagger as s } from "../util.js";
+import { DimGroup as c, HitRect as l, TipText as u } from "../hover.js";
+import { Bar as d } from "../markers.js";
+import { FootNote as f } from "../plot-note.js";
+import { HRule as p } from "../rules.js";
+import { ChartSvg as m } from "../svg.js";
+import { Label as h } from "../text.js";
+import { paint as g, useTextureIds as _ } from "../texture-ids.js";
+import { Hatch as v } from "../texture.js";
+import { labelRoom as y } from "./util-a.js";
+import { staggerWaveDemo as b } from "./stagger-wave.data.js";
+import { scaleBand as x, scaleLinear as S } from "d3-scale";
+import { utcFormat as C } from "d3-time-format";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/charts/glance/stagger-wave.tsx
+var E = (e) => {
+	let t = e.top <= e.zero;
+	return /* @__PURE__ */ w(d, {
+		className: i("grow-y", t ? null : "from-top", e.hero && "fill-hero"),
+		dir: t ? "up" : "down",
+		fill: e.hero ? void 0 : g(e.hatch),
+		h: t ? e.zero - e.top : e.top - e.zero,
+		style: s(e.i, "fine"),
+		w: e.bw,
+		x: e.left,
+		y: t ? e.top : e.zero
+	});
+}, D = (e) => /* @__PURE__ */ w("g", { children: e.y.ticks(6).map((t) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w(p, {
+	kind: t === 0 ? "hairline" : "grid",
+	x0: e.left,
+	x1: e.right,
+	y: e.y(t)
+}), /* @__PURE__ */ w(h, {
+	anchor: "end",
+	dy: "0.35em",
+	voice: "axis",
+	x: e.left - 10,
+	y: e.y(t),
+	children: e.format(t)
+})] }, t)) }), O = C("%-d %b"), k = C("%-d"), A = C("%a %-d %b"), j = (e) => e.map((t, n) => {
+	let r = e[n - 1];
+	return r === void 0 || r.getUTCMonth() !== t.getUTCMonth() ? O(t) : k(t);
+}), M = (t) => e(t), N = (e) => `${e < 0 ? "−" : ""}${Math.abs(e)} °C`, P = (e) => y(e.map(N), "t-axis") + 10, F = (e) => e.ticks.map((t, n) => /* @__PURE__ */ w(h, {
+	anchor: n === 0 ? "start" : "middle",
+	dx: n === 0 ? -e.bw / 2 : 0,
+	voice: "axis",
+	x: t.at + e.bw / 2,
+	y: e.y,
+	children: e.labels[n]
+}, t.d.date.toISOString())), I = (e) => {
+	let i = e.data ?? b, s = e.height ?? 340, d = e.format ?? M, p = t(), h = Math.max(...i.map((e) => e.value)), g = e.highlight ?? i.findIndex((e) => e.value === h), y = _("wave")("hatch"), C = Math.min(...i.map((e) => e.value)), O = `Daily mean temperature over ${i.length} days, from ${d(C)} to ${d(h)}.`;
+	return /* @__PURE__ */ w(n, {
+		overlay: p.at === null ? null : /* @__PURE__ */ w(r, {
+			x: p.at.x,
+			y: p.at.y,
+			children: /* @__PURE__ */ w(u, {
+				facts: [d(i[p.at.key].value)],
+				lead: A(i[p.at.key].date)
+			})
+		}),
+		children: (t) => {
+			let n = 24 + o(a(e), t - 16, 16), r = s - n, u = S().domain([Math.min(0, C), Math.max(0, h)]).nice(6).range([r, 8]), d = {
+				bottom: n,
+				left: P(u.ticks(6)),
+				right: 0,
+				top: 8
+			}, _ = x().domain(i.map((e, t) => t)).range([d.left, t - d.right]).paddingInner(t < 460 ? .25 : .32).paddingOuter(.1), b = _.bandwidth(), k = t < 460 ? 14 : 7, A = i.flatMap((e, t) => t % k === 0 ? [{
+				d: e,
+				i: t
+			}] : []), M = j(A.map((e) => e.d.date));
+			return /* @__PURE__ */ T(m, {
+				height: s,
+				label: O,
+				leave: p.clear,
+				width: t,
+				children: [
+					/* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w(v, {
+						id: y,
+						tone: "fill-l4"
+					}) }),
+					/* @__PURE__ */ w(D, {
+						format: N,
+						left: d.left,
+						right: t - d.right,
+						y: u
+					}),
+					/* @__PURE__ */ w("g", { children: i.map((e, t) => {
+						let n = _(t) ?? 0, i = u(e.value), a = u(0);
+						return /* @__PURE__ */ T(c, {
+							dim: p.dim(t),
+							onPointerEnter: p.enter(t, n + b / 2, Math.min(i, a) - 4),
+							children: [/* @__PURE__ */ w(l, {
+								x: n - (_.step() - b) / 2,
+								y: d.top,
+								width: _.step(),
+								height: r - d.top
+							}), /* @__PURE__ */ w(E, {
+								bw: b,
+								zero: a,
+								hatch: y,
+								hero: g === t,
+								i: t,
+								left: n,
+								top: i
+							})]
+						}, e.date.toISOString());
+					}) }),
+					/* @__PURE__ */ w(F, {
+						bw: b,
+						labels: M,
+						ticks: A.map((e) => ({
+							at: _(e.i) ?? 0,
+							d: e.d
+						})),
+						y: r + 16
+					}),
+					/* @__PURE__ */ w(f, {
+						height: s,
+						text: a(e),
+						width: t
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { I as StaggerWave };

package/lib/charts/glance/tree-lr.data.js

@@ -0,0 +1,41 @@
+"use client";
+//#region src/charts/glance/tree-lr.data.ts
+var e = {
+	children: [
+		{
+			children: [
+				{ name: "English" },
+				{ name: "German" },
+				{ name: "Icelandic" }
+			],
+			name: "Germanic"
+		},
+		{
+			children: [
+				{ name: "French" },
+				{ name: "Italian" },
+				{ name: "Romanian" }
+			],
+			name: "Romance"
+		},
+		{
+			children: [
+				{ name: "Irish" },
+				{ name: "Welsh" },
+				{ name: "Breton" }
+			],
+			name: "Celtic"
+		},
+		{
+			children: [
+				{ name: "Russian" },
+				{ name: "Polish" },
+				{ name: "Bulgarian" }
+			],
+			name: "Slavic"
+		}
+	],
+	name: "Indo-European"
+};
+//#endregion
+export { e as treeLRDemo };

package/lib/charts/glance/tree-lr.js

@@ -0,0 +1,135 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { dimClass as n, noteOf as r, noteSpace as i, stagger as a } from "../util.js";
+import { DimGroup as o, HitRect as s, TipText as c } from "../hover.js";
+import { Dot as l } from "../markers.js";
+import { FootNote as u } from "../plot-note.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { fillFor as p, labelRoom as m, strokeFor as h } from "./util-a.js";
+import { treeLRDemo as g } from "./tree-lr.data.js";
+import { useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { linkHorizontal as b } from "d3-shape";
+import { hierarchy as x, tree as S } from "d3-hierarchy";
+//#region src/charts/glance/tree-lr.tsx
+var C = 4, w = (e) => e.ancestors().toReversed().map((e) => e.data.name).join(" › "), T = (e) => e.children === void 0 ? [e.name] : e.children.flatMap(T), E = (e) => {
+	let t = e.ancestors().find((e) => e.depth === 1), n = e.ancestors().at(-1)?.children ?? [];
+	return t === void 0 ? -1 : n.indexOf(t);
+}, D = {
+	leaf: "fill-muted",
+	mid: "fill-text t-halo",
+	root: "fill-ink"
+}, O = (e, t, n, r) => e === "leaf" ? {
+	anchor: "start",
+	x: t + 6,
+	y: n
+} : e === "mid" ? {
+	anchor: "middle",
+	x: t,
+	y: r ? n - 14 : n + 14
+} : {
+	anchor: "end",
+	x: t - 10,
+	y: n
+}, k = ({ n: e, x: t, y: n, k: r, tone: i, lit: c, hitRight: u, onEnter: d }) => {
+	let p = e.children === void 0, m = "mid";
+	e.depth === 0 ? m = "root" : p && (m = "leaf");
+	let h = e.x <= (e.ancestors().at(-1)?.x ?? e.x), g = O(m, t, n, h);
+	return /* @__PURE__ */ y(o, {
+		dim: !c,
+		onPointerEnter: d,
+		children: [
+			/* @__PURE__ */ v(s, {
+				x: p ? t - 8 : t - 40,
+				y: p || !h ? n - 10 : n - 24,
+				width: p ? u + 8 : 80,
+				height: p ? 20 : 34
+			}),
+			p ? null : /* @__PURE__ */ v(l, {
+				className: `pop ${i}`,
+				style: a(e.depth * 4 + r * .2, "series"),
+				cx: t,
+				cy: n,
+				size: "md"
+			}),
+			/* @__PURE__ */ v(f, {
+				anchor: g.anchor,
+				className: D[m],
+				dy: "0.35em",
+				order: e.depth * 4 + r * .2,
+				tier: "series",
+				voice: "label",
+				x: g.x,
+				y: g.y,
+				children: e.data.name
+			})
+		]
+	});
+}, A = (o) => {
+	let s = o.data ?? g, l = o.height ?? 360, [f, D] = _(null), O = `Language family: ${(s.children ?? []).map((e) => `${e.name} (${(e.children ?? []).map((e) => e.name).join(", ")})`).join("; ")}`;
+	return /* @__PURE__ */ v(e, {
+		overlay: f === null ? null : /* @__PURE__ */ v(t, {
+			x: f.x,
+			y: f.y,
+			children: /* @__PURE__ */ v(c, {
+				facts: f.node.children === void 0 ? [] : [`${f.node.leaves().length} languages`],
+				lead: w(f.node)
+			})
+		}),
+		children: (e) => {
+			let t = {
+				bottom: 10 + i(r(o), e - 16, 20),
+				left: m([s.name], "t-label") + 10,
+				right: m(T(s), "t-label") + 6,
+				top: 10
+			}, c = S().size([l - t.top - t.bottom, e - t.left - t.right]).separation((e, t) => e.parent === t.parent ? 1 : 1.9)(x(s)), g = (e) => t.left + e.y, _ = (e) => t.top + e.x, A = b().x(g).y(_), j = o.highlight ?? c.children?.[0]?.data.name, M = (e) => {
+				let t = E(e);
+				return t >= 0 && c.children?.[t].data.name === j;
+			}, N = (e) => E(e) < 0 ? 0 : C, P = new Set(f === null ? [] : [...f.node.ancestors(), ...f.node.descendants()].map(w)), F = (e) => f === null || P.has(w(e));
+			return /* @__PURE__ */ y(d, {
+				height: l,
+				label: O,
+				leave: () => {
+					D(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ v("g", {
+						fill: "none",
+						strokeWidth: 1,
+						children: c.links().map((e) => /* @__PURE__ */ v("path", {
+							className: `draw ${h(N(e.target), M(e.target))} ${n(!F(e.target))}`,
+							pathLength: 1,
+							style: a((e.target.depth - 1 + (e.target.parent?.children?.indexOf(e.target) ?? 0) * .15) * 4, "series"),
+							d: A(e) ?? ""
+						}, w(e.target)))
+					}),
+					c.descendants().map((e, n) => /* @__PURE__ */ v(k, {
+						n: e,
+						x: g(e),
+						y: _(e),
+						k: n,
+						tone: p(N(e), M(e)),
+						lit: F(e),
+						hitRight: t.right,
+						onEnter: () => {
+							D({
+								node: e,
+								x: g(e),
+								y: _(e) - 8
+							});
+						}
+					}, w(e))),
+					/* @__PURE__ */ v(u, {
+						height: l,
+						text: r(o),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { A as TreeLR };

package/lib/charts/glance/util-a.js

@@ -0,0 +1,49 @@
+"use client";
+import { ranks as e, sansWidth as t } from "../util.js";
+//#region src/charts/glance/util-a.ts
+var n = /* @__PURE__ */ new Map(), r = null, i = (e, i) => {
+	let a = `${i}|${e}`, o = n.get(a);
+	if (o !== void 0) return o;
+	if (typeof document > "u" || document.fonts.status !== "loaded") return t(e);
+	if (r === null) {
+		let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		e.setAttribute("aria-hidden", "true"), e.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none", r = document.createElementNS("http://www.w3.org/2000/svg", "text"), e.append(r), document.body.append(e);
+	}
+	r.setAttribute("class", i), r.textContent = e;
+	let s = r.getComputedTextLength();
+	return n.set(a, s), s;
+}, a = (e, t = "t-label") => Math.ceil(Math.max(0, ...e.map((e) => i(e, t)))), o = [
+	"fill-hero",
+	"fill-l2",
+	"fill-l2",
+	"fill-l3",
+	"fill-l4",
+	"fill-l5",
+	"fill-l5"
+], s = [
+	"stroke-l0",
+	"stroke-l1",
+	"stroke-l2",
+	"stroke-l3",
+	"stroke-l4",
+	"stroke-l5",
+	"stroke-l6"
+], c = (e) => Math.max(0, Math.min(6, Math.round(e))), l = (e, t = !1) => t ? "fill-hero" : o[c(e)], u = (e, t = !1) => t ? "stroke-hero" : s[c(e)], d = (t, n) => e(t).map((e) => n[Math.min(n.length - 1, e)]), f = 16, p = Array.from({ length: f }, (e, t) => t / f), m = (e, t, n, r) => [
+	...p.map((r) => [e + (n - e) * r, t]),
+	...p.map((e) => [n, t + (r - t) * e]),
+	...p.map((t) => [n - (n - e) * t, r]),
+	...p.map((n) => [e, r - (r - t) * n])
+], h = (e, t, n) => Array.from({ length: 64 }, (r, i) => {
+	let a = -3 * Math.PI / 4 + i / 64 * Math.PI * 2;
+	return [e + n * Math.cos(a), t + n * Math.sin(a)];
+}), g = (e, t, n, r, i, a, o) => {
+	let s = (n, r) => [e + n * Math.sin(r), t - n * Math.cos(r)], c = (e) => i + Math.min(o / e, (a - i) / 2.2), l = (e) => a - Math.min(o / e, (a - i) / 2.2);
+	return [
+		...p.map((e) => s(r, c(r) + (l(r) - c(r)) * e)),
+		...p.map((e) => s(r - (r - n) * e, l(r - (r - n) * e))),
+		...p.map((e) => s(n, l(n) - (l(n) - c(n)) * e)),
+		...p.map((e) => s(n + (r - n) * e, c(n + (r - n) * e)))
+	];
+}, _ = (e) => `M${e.map((e) => `${e[0].toFixed(1)},${e[1].toFixed(1)}`).join("L")}Z`, v = (e, t, n) => e.map((e, r) => [e[0] + (t[r][0] - e[0]) * n, e[1] + (t[r][1] - e[1]) * n]);
+//#endregion
+export { o as LADDER_FILL, s as LADDER_STROKE, v as blendPts, h as circlePts, l as fillFor, a as labelRoom, _ as ptsPath, d as rankTones, m as rectPts, g as sectorPts, u as strokeFor, i as textWidth };

package/lib/charts/glance/util-b.js

@@ -0,0 +1,19 @@
+"use client";
+//#region src/charts/glance/util-b.ts
+var e = (e, t, n = 5) => {
+	if (t <= 1) return 0;
+	let r = Math.round(e / (t - 1) * n);
+	return Math.max(0, Math.min(n, r));
+}, t = 1 / Math.sqrt(2 * Math.PI), n = (e, n, r) => n.map((n) => {
+	let i = 0;
+	for (let a of e) {
+		let e = (n - a) / r;
+		i += t * Math.exp(-.5 * e * e);
+	}
+	return i / (e.length * r);
+}), r = (e) => {
+	let t = e.length, n = e.reduce((e, t) => e + t, 0) / t;
+	return 1.06 * Math.sqrt(e.reduce((e, t) => e + (t - n) ** 2, 0) / Math.max(1, t - 1)) * t ** -.2;
+}, i = 4, a = (e, t) => Math.max(1, Math.min(i, Math.ceil(e / t * i)));
+//#endregion
+export { a as bundleLines, n as density, e as ladderStep, r as silverman };

package/lib/charts/glance/violin.data.js

@@ -0,0 +1,9 @@
+"use client";
+import e from "./violin.tenors.json.js";
+//#region src/charts/glance/violin.data.ts
+var t = 112, n = e.map((e) => ({
+	label: e.label,
+	values: e.lb.map((e) => e / t)
+}));
+//#endregion
+export { n as violinDemo };