@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/basics/hairline-line.js

@@ -0,0 +1,195 @@
+"use client";
+import { axisFormat as e, dayTickLabels as t, fmtInt as n, plural as r } from "../../lib/format.js";
+import { resolveDateFormat as i, resolveFormat as a } from "../../schema/format.js";
+import { useHover as o } from "../hooks.js";
+import { Plot as s, Tooltip as c } from "../core.js";
+import { noteOf as l, stagger as u } from "../util.js";
+import { TipText as d } from "../hover.js";
+import { crisp as f } from "../axes.js";
+import { Dot as p, Ring as m } from "../markers.js";
+import { FootNote as h } from "../plot-note.js";
+import { HRule as g, Stem as _, VRule as v } from "../rules.js";
+import { chartTable as y, plotOptions as b, pointerX as ee, scoped as x } from "../shared-options.js";
+import { ChartSvg as te } from "../svg.js";
+import { Label as S, XLabels as C } from "../text.js";
+import { TEXTURE_PITCH as w } from "../texture-ids.js";
+import { DottedLine as T } from "../texture.js";
+import { ValueGrid as ne } from "../value-grid.js";
+import { DailyEmpty as E } from "./daily-empty.js";
+import { heroOf as D, isLive as O, reactKeyOf as k, readingRows as A, readingsOf as j, seriesOf as M, valueAt as N } from "./daily-readings.js";
+import { dailyFloor as P, isWeekend as F } from "./util-a.js";
+import { scaleLinear as I } from "d3-scale";
+import { jsx as L, jsxs as R } from "react/jsx-runtime";
+import { line as z } from "d3-shape";
+//#region src/charts/basics/hairline-line.tsx
+var B = 864e5, V = (e, t) => t ? "fill-hero" : e ? "stroke-l3" : "fill-l3", H = ({ format: e, frame: t, hero: n, hover: r, live: i, readings: a }) => {
+	let o = i.at(-1) ?? 0, s = (e) => e === n || r === e ? "md" : "sm", c = n === o || n < 0 ? [o] : [n, o];
+	return /* @__PURE__ */ R("g", { children: [i.map((e) => {
+		let r = e !== n && F(a[e].date), i = {
+			className: `pop transition-radius ${V(r, e === n)}`,
+			cx: f(t.x(e)),
+			cy: t.y(N(a, e)),
+			size: s(e),
+			style: u(e, "mark")
+		}, o = k(a[e], e);
+		return L(r ? m : p, { ...i }, o);
+	}), c.map((r) => /* @__PURE__ */ L(S, {
+		anchor: "middle",
+		order: o,
+		tier: "mark",
+		voice: r === n ? "value" : "axis",
+		x: t.x(r),
+		y: t.y(N(a, r)) - 12,
+		children: e(N(a, r))
+	}, k(a[r], r)))] });
+}, U = ({ floor: e, frame: t, hero: n, live: r, readings: i }) => /* @__PURE__ */ L("g", { children: r.map((r) => {
+	let a = t.x(r), o = k(i[r], r);
+	return r === n ? /* @__PURE__ */ L(_, {
+		className: "grow-y stroke-hero",
+		hero: !0,
+		style: u(r, "mark"),
+		x: a,
+		y0: Math.round(e),
+		y1: t.y(N(i, r))
+	}, o) : F(i[r].date) ? /* @__PURE__ */ L("g", {
+		className: "fade",
+		style: u(r, "mark"),
+		children: /* @__PURE__ */ L(T, {
+			pitch: w.dense,
+			tone: "fill-l4",
+			x0: a,
+			x1: a,
+			y0: t.y(N(i, r)) + 6,
+			y1: e - 2
+		})
+	}, o) : null;
+}) }), W = ({ frame: e, readings: n }) => {
+	let r = n.flatMap((e, t) => e.date.getUTCDay() === 1 ? [t] : []), i = t(r.map((e) => n[e].date));
+	return /* @__PURE__ */ L(C, {
+		ticks: r.map((t, n) => ({
+			label: i[n],
+			x: e.x(t)
+		})),
+		y: e.floor + 20
+	});
+}, G = (e, t) => z().defined(O).x((e, n) => f(t.x(n))).y((e) => t.y(e.value ?? 0))(e) ?? "", K = (e, t, n, r) => {
+	let i = t;
+	for (let t of e) Math.abs(n(t) - r) < Math.abs(n(i) - r) && (i = t);
+	return i;
+}, q = 1e-290, J = ({ clear: t, emphasis: n, extreme: i, fmtDate: a, format: o, height: s, hover: c, metrics: l, note: u, readings: d, show: p, title: m, wholeNumbers: _, width: y }) => {
+	let b = M(d), { live: x } = b, S = P(s, u, y, l);
+	if (x.length === 0) return /* @__PURE__ */ L(E, {
+		floor: S,
+		height: s,
+		name: m,
+		width: y
+	});
+	let C = x.map((e) => N(d, e)), w = Math.min(...C), T = Math.max(...C), O = x[C.indexOf(T)], k = x[C.indexOf(w)], A = x.at(-1) ?? 0, [j] = x, F = D(d, x, n, {
+		peak: O,
+		trough: k
+	}[i]), z = Math.min(y - 16, 680), V = Math.round((y - z) / 2), J = V + z, Y = T - w, X = I().domain(Y < q ? [w - 1, T + 1] : [w - Y * .25, T]).nice(5).range([S, 40]), re = d[0].date.getTime(), Z = (e) => Math.round((d[e].date.getTime() - re) / B), Q = I().domain([0, Math.max(1, Z(d.length - 1))]).range([V + 8, J - 48]), $ = {
+		floor: S,
+		x: (e) => Q(Z(e)),
+		x0: V,
+		x1: J,
+		y: X
+	}, ie = G(d, $), ae = `Daily values, ${a(d[j].date)} to ${a(d[A].date)}: high ${o(T)} on ${a(d[O].date)}, low ${o(w)} on ${a(d[k].date)}, latest ${o(N(d, A))}`, oe = `${r(x.length, "reading")}. High ${o(T)} on ${a(d[O].date)}, low ${o(w)} on ${a(d[k].date)}. The data table lists every reading.`;
+	return /* @__PURE__ */ R(te, {
+		className: "touch-pan-y",
+		height: s,
+		desc: oe,
+		label: m ?? ae,
+		leave: t,
+		onPointerMove: (e) => {
+			let t = ee(e, y), n = K(x, j, Z, Q.invert(t));
+			p(n, $.x(n), $.y(N(d, n)) - 16);
+		},
+		width: y,
+		children: [
+			/* @__PURE__ */ L(ne, {
+				labelFloor: !0,
+				side: "right",
+				floor: S,
+				format: e(o, _, X.ticks(5)),
+				ticks: X.ticks(5),
+				x0: V,
+				x1: J,
+				y: X
+			}),
+			/* @__PURE__ */ L(g, {
+				x0: V,
+				x1: J,
+				y: S
+			}),
+			/* @__PURE__ */ L(U, {
+				floor: S,
+				frame: $,
+				hero: F,
+				...b
+			}),
+			c === null || c === F ? null : /* @__PURE__ */ L(v, {
+				kind: "rule",
+				x: $.x(c),
+				y0: $.y(N(d, c)),
+				y1: f(S)
+			}),
+			/* @__PURE__ */ L("path", {
+				className: "draw stroke-l3 stroke-medium cap-round fill-none",
+				d: ie,
+				pathLength: 1
+			}),
+			/* @__PURE__ */ L(H, {
+				format: o,
+				frame: $,
+				hero: F,
+				hover: c,
+				...b
+			}),
+			/* @__PURE__ */ L(W, {
+				frame: $,
+				readings: d
+			}),
+			/* @__PURE__ */ L(h, {
+				gutter: 12,
+				height: s,
+				metrics: l,
+				text: u,
+				width: y
+			})
+		]
+	});
+}, Y = (e) => {
+	let t = j(e.data ?? []), r = e.format === void 0 ? n : a(e.format), u = i(e.dateFormat), { at: f, clear: p, key: m, show: h } = o(), g = f === null ? void 0 : t[f.key];
+	return /* @__PURE__ */ L(s, {
+		initialWidth: e.initialWidth,
+		width: e.width,
+		...b(e),
+		table: y(e, e.title ?? "Daily values", ["Date", "Value"], A(t, u, r)),
+		overlay: f === null || g === void 0 ? null : /* @__PURE__ */ L(c, {
+			x: f.x,
+			y: f.y,
+			children: /* @__PURE__ */ L(d, {
+				facts: [r(g.value ?? 0), ...F(g.date) ? ["weekend"] : []],
+				lead: u(g.date)
+			})
+		}),
+		children: (n) => /* @__PURE__ */ L(J, {
+			clear: p,
+			emphasis: e.emphasis,
+			extreme: e.extreme ?? "peak",
+			fmtDate: u,
+			format: r,
+			height: e.height ?? 440,
+			hover: m,
+			metrics: e.metrics,
+			note: l(e),
+			readings: t,
+			show: h,
+			title: e.title,
+			wholeNumbers: e.format === void 0,
+			width: n
+		})
+	});
+}, X = (e) => x(e.idPrefix, /* @__PURE__ */ L(Y, { ...e }));
+//#endregion
+export { X as HairlineLine };

package/lib/charts/basics/nested-treemap.data.js

@@ -0,0 +1,55 @@
+"use client";
+//#region src/charts/basics/nested-treemap.data.ts
+var e = [
+	{
+		children: [{
+			name: "Drinking milk",
+			value: 6035
+		}],
+		name: "Liquid"
+	},
+	{
+		children: [
+			{
+				name: "Cheddar",
+				value: 3372
+			},
+			{
+				name: "Territorials",
+				value: 362
+			},
+			{
+				name: "Blue vein",
+				value: 84
+			},
+			{
+				name: "Other cheese",
+				value: 965
+			}
+		],
+		name: "Cheese"
+	},
+	{
+		children: [
+			{
+				name: "Butter",
+				value: 409
+			},
+			{
+				name: "Cream",
+				value: 437
+			},
+			{
+				name: "Yoghurt",
+				value: 522
+			},
+			{
+				name: "Condensed milk",
+				value: 329
+			}
+		],
+		name: "Other"
+	}
+];
+//#endregion
+export { e as nestedTreemapDemo };

package/lib/charts/basics/nested-treemap.js

@@ -0,0 +1,191 @@
+"use client";
+import { fmtInt as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { sansWidth as i, stagger as a, sum as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { ChartSvg as l } from "../svg.js";
+import { Label as u } from "../text.js";
+import { maxIndex as d } from "./util-b.js";
+import { paint as f, useTextureIds as p } from "../texture-ids.js";
+import { Hatch as m, PlateLabel as h, Rules as g, Stipple as _ } from "../texture.js";
+import { nestedTreemapDemo as v } from "./nested-treemap.data.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { hierarchy as S, treemap as C, treemapDice as w, treemapSquarify as T } from "d3-hierarchy";
+//#region src/charts/basics/nested-treemap.tsx
+var E = 30, D = 1, O = [
+	"stipple",
+	"hatch",
+	"rules"
+], k = (e, t) => O[Math.max(0, e.findIndex((e) => e.name === t)) % O.length] ?? "stipple", A = (e) => /* @__PURE__ */ x("defs", { children: [
+	/* @__PURE__ */ b(_, {
+		id: e.ids("stipple"),
+		tone: "fill-l3"
+	}),
+	/* @__PURE__ */ b(m, {
+		id: e.ids("hatch"),
+		tone: "fill-l4"
+	}),
+	/* @__PURE__ */ b(g, {
+		id: e.ids("rules"),
+		tone: "fill-l4"
+	})
+] }), j = (e, t, n) => {
+	let r = e < 520, i = T.ratio(1.2), a = n.map((e) => ({
+		children: e.children.toSorted((e, t) => t.value - e.value),
+		name: e.name,
+		total: o(e.children.map((e) => e.value))
+	})).toSorted((e, t) => t.total - e.total), s = S({
+		children: a,
+		name: "root"
+	}).sum((e) => e.value ?? 0), c = C().size([e, t]).tile((e, t, n, a, o) => {
+		e.depth === 0 && !r ? w(e, t, n, a, o) : i(e, t, n, a, o);
+	}).paddingInner((e) => e.depth === 0 ? r ? 12 : 18 : r ? 4 : 7).paddingTop((e) => e.depth === 1 ? E : 0).round(!0)(s), l = c.value ?? 1;
+	return {
+		bands: (c.children ?? []).map((e) => ({
+			name: e.data.name,
+			share: (e.value ?? 0) / l,
+			x: e.x0 + D,
+			y: e.y0 + E - 12
+		})),
+		tiles: c.leaves().map((e) => {
+			let t = e.parent?.data.name ?? "";
+			return {
+				group: t,
+				h: e.y1 - e.y0,
+				id: `${t}/${e.data.name}`,
+				name: e.data.name,
+				value: e.value ?? 0,
+				w: e.x1 - e.x0,
+				x: e.x0,
+				y: e.y0
+			};
+		})
+	};
+}, M = (e) => e.w < 48 || e.h < 48 ? 2 : 4, N = (e) => {
+	let t = i(e.name, 12);
+	return e.w >= t + 20 && e.h >= 36 ? "across" : e.h >= t + 20 && e.w >= 20 ? "up" : "none";
+}, P = 15, F = 8, I = (e) => {
+	let { tile: t } = e, n = N(t), r = e.format(t.value), o = i(r, 11);
+	if (n === "none") return null;
+	let s = t.x + F, c = t.y + F;
+	if (n === "up") return /* @__PURE__ */ b("g", {
+		className: "fade",
+		style: a(e.index, "series"),
+		transform: `translate(${s} ${c}) rotate(-90)`,
+		children: /* @__PURE__ */ b(h, {
+			anchor: "end",
+			className: "t-label",
+			hero: e.hero,
+			text: t.name,
+			x: 0,
+			y: P / 2
+		})
+	});
+	let l = t.h >= 52 && t.w >= o + 20;
+	return /* @__PURE__ */ x("g", {
+		className: "fade",
+		style: a(e.index, "series"),
+		children: [/* @__PURE__ */ b(h, {
+			anchor: "start",
+			className: "t-label",
+			hero: e.hero,
+			text: t.name,
+			x: s,
+			y: c + P / 2
+		}), l ? /* @__PURE__ */ b(h, {
+			anchor: "start",
+			className: "t-axis",
+			hero: e.hero,
+			text: r,
+			x: s,
+			y: c + P + P / 2
+		}) : null]
+	});
+}, L = (e) => {
+	let { tile: t } = e, n = {
+		height: t.h - 1,
+		rx: M(t),
+		style: a(e.index, "series"),
+		width: t.w - 1,
+		x: t.x + .5,
+		y: t.y + .5
+	};
+	return /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ b("rect", {
+			...n,
+			className: `grow-y from-top ${e.hero ? "fill-hero" : ""}`,
+			fill: e.hero ? void 0 : e.fill
+		}),
+		e.children,
+		/* @__PURE__ */ b("rect", {
+			...n,
+			className: `grow-y from-top shape-crisp fill-none ${e.hero ? "stroke-hero" : "stroke-l5"}`,
+			strokeWidth: 1
+		})
+	] });
+}, R = (i) => {
+	let a = i.data ?? v, m = i.height ?? 420, h = i.format ?? e, g = t(), _ = p("tree"), y = o(a.flatMap((e) => e.children.map((e) => e.value))), S = a.flatMap((e) => e.children.map((t) => ({
+		group: e.name,
+		id: `${e.name}/${t.name}`,
+		name: t.name,
+		value: t.value
+	}))), C = g.key === null ? void 0 : S.find((e) => e.id === g.key), w = a.map((e) => `${e.name}: ${e.children.map((e) => `${e.name} ${h(e.value)}`).join(", ")}`).join("; ");
+	return /* @__PURE__ */ b(n, {
+		overlay: g.at === null || C === void 0 ? null : /* @__PURE__ */ b(r, {
+			x: g.at.x,
+			y: g.at.y,
+			children: /* @__PURE__ */ b(c, {
+				facts: [
+					h(C.value),
+					`${Math.round(C.value / y * 100)}% of all`,
+					C.group
+				],
+				lead: C.name
+			})
+		}),
+		children: (e) => {
+			let { bands: t, tiles: n } = j(e, m, a), r = i.highlight === void 0 ? n[d(n.map((e) => e.value))]?.id : n.find((e) => e.id === i.highlight || e.name === i.highlight)?.id;
+			return /* @__PURE__ */ x(l, {
+				height: m,
+				label: w,
+				leave: g.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ b(A, { ids: _ }),
+					t.map((e, t) => /* @__PURE__ */ x(u, {
+						order: t,
+						tier: "series",
+						voice: "label",
+						x: e.x,
+						y: e.y,
+						children: [
+							e.name,
+							" · ",
+							Math.round(e.share * 100),
+							"%"
+						]
+					}, e.name)),
+					n.map((e, n) => /* @__PURE__ */ b(s, {
+						dim: g.dim(e.id),
+						onPointerEnter: g.enter(e.id, e.x + e.w / 2, e.y + 10),
+						children: /* @__PURE__ */ b(L, {
+							fill: f(_(k(t, e.group))),
+							hero: r === e.id,
+							index: n,
+							tile: e,
+							children: /* @__PURE__ */ b(I, {
+								format: h,
+								hero: r === e.id,
+								index: n,
+								tile: e
+							})
+						})
+					}, e.id))
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { R as NestedTreemap };

package/lib/charts/basics/paired-rungs.data.js

@@ -0,0 +1,31 @@
+"use client";
+//#region src/charts/basics/paired-rungs.data.ts
+var e = [
+	{
+		current: 45.1,
+		label: "Driving",
+		previous: 54.5
+	},
+	{
+		current: 31.2,
+		label: "At home",
+		previous: 10.3
+	},
+	{
+		current: 7.6,
+		label: "On foot",
+		previous: 9.8
+	},
+	{
+		current: 4.2,
+		label: "Bus",
+		previous: 7.2
+	},
+	{
+		current: 1.9,
+		label: "Train",
+		previous: 5
+	}
+];
+//#endregion
+export { e as pairedRungsDemo };

package/lib/charts/basics/paired-rungs.js

@@ -0,0 +1,151 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { hasText as r, noteLines as i, noteOf as a, stagger as o } from "../util.js";
+import { DimGroup as s, HitRect as c, TipText as l } from "../hover.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 { maxIndex as m } from "./util-b.js";
+import { paint as h, useTextureIds as g } from "../texture-ids.js";
+import { Hatch as _, Rules as v } from "../texture.js";
+import { rungPitch as y, rungY as b } from "./rung-geometry.js";
+import { Rungs as x } from "./rungs.js";
+import { pairedRungsDemo as S } from "./paired-rungs.data.js";
+import { SeriesKey as C } from "./series-key.js";
+import { scaleBand as w } from "d3-scale";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/charts/basics/paired-rungs.tsx
+var D = ({ bw: e, hatch: t, datum: n, dim: r, floor: i, format: a, gap: l, hero: u, index: d, left: f, onEnter: m, pitch: g, unit: _ }) => {
+	let v = Math.round(n.previous / _), y = Math.round(n.current / _), S = b(i, Math.max(v, y) - 1, g) - 26, C = e * 2 + l, w = b(i, v - 1, g);
+	return /* @__PURE__ */ E(s, {
+		dim: r,
+		onPointerEnter: () => {
+			m(f + C / 2, S);
+		},
+		children: [
+			/* @__PURE__ */ T(c, {
+				height: i - S,
+				width: C + 12,
+				x: f - 6,
+				y: S
+			}),
+			v > 0 ? /* @__PURE__ */ T("rect", {
+				className: "grow-y stroke-l5 shape-crisp",
+				fill: h(t),
+				height: Math.round(i) - w - 1,
+				strokeWidth: 1,
+				style: o(d * 2),
+				width: Math.round(e) - 1,
+				x: Math.round(f) + .5,
+				y: w + .5
+			}) : null,
+			/* @__PURE__ */ T(x, {
+				accent: u ? "fill-hero" : "fill-l2",
+				className: u ? "fill-hero" : "fill-l3",
+				floor: i,
+				id: `${n.label}-current`,
+				left: f + e + l,
+				n: y,
+				order: d * 2 + 1,
+				pitch: g,
+				width: e
+			}),
+			/* @__PURE__ */ T(p, {
+				anchor: "middle",
+				order: d,
+				voice: "axis",
+				x: f + e / 2,
+				y: b(i, v - 1, g) - 10,
+				children: a(n.previous)
+			}),
+			/* @__PURE__ */ T(p, {
+				anchor: "middle",
+				order: d,
+				voice: "value",
+				x: f + e + l + e / 2,
+				y: b(i, y - 1, g) - 10,
+				children: a(n.current)
+			}),
+			/* @__PURE__ */ T(p, {
+				anchor: "middle",
+				muted: !0,
+				voice: "label",
+				x: f + C / 2,
+				y: i + 18,
+				children: n.label
+			})
+		]
+	});
+}, O = (o) => {
+	let s = o.data ?? S, c = o.unit ?? 1, p = o.height ?? 440, b = o.format ?? String, [x, O] = o.periods ?? ["2011", "2021"], k = r(a(o)), A = e(), j = g("paired"), M = s.map((e) => `${e.label}: ${O} ${b(e.current)}, ${x} ${b(e.previous)}`).join("; ");
+	return /* @__PURE__ */ T(t, {
+		overlay: A.at === null ? null : /* @__PURE__ */ T(n, {
+			x: A.at.x,
+			y: A.at.y,
+			children: /* @__PURE__ */ T(l, {
+				facts: [`${O} ${b(s[A.at.key].current)}`, `${x} ${b(s[A.at.key].previous)}`],
+				lead: s[A.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = Math.min(e - 32, s.length * 130), n = (e - t) / 2, r = w().domain(s.map((e) => e.label)).range([n, n + t]).paddingInner(.34).paddingOuter(.2), l = r.bandwidth(), g = Math.max(4, Math.round(l * .1)), S = Math.max(...s.flatMap((e) => [e.current / c, e.previous / c])), N = i(a(o), e - 24), P = Math.round(p - (k ? 50 : 30) - Math.max(0, N.length - 1) * 12), F = y(P - 32, S), I = o.highlight ?? m(s.map((e) => e.current));
+			return /* @__PURE__ */ E(f, {
+				height: p,
+				label: M,
+				leave: A.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ E("defs", { children: [/* @__PURE__ */ T(_, {
+						id: j("hatch"),
+						tone: "fill-l4"
+					}), /* @__PURE__ */ T(v, {
+						id: j("rules"),
+						tone: "fill-l3"
+					})] }),
+					/* @__PURE__ */ T(C, {
+						align: "end",
+						items: [{
+							fill: h(j("hatch")),
+							name: x
+						}, {
+							fill: h(j("rules")),
+							name: O
+						}],
+						x: Math.round(n + t),
+						y: 16
+					}),
+					/* @__PURE__ */ T(d, {
+						x0: Math.round(n),
+						x1: Math.round(n + t),
+						y: P
+					}),
+					s.map((e, t) => /* @__PURE__ */ T(D, {
+						bw: (l - g) / 2,
+						hatch: j("hatch"),
+						datum: e,
+						dim: A.dim(t),
+						floor: P,
+						format: b,
+						gap: g,
+						hero: I === t,
+						index: t,
+						left: r(e.label) ?? 0,
+						onEnter: A.showAt(t),
+						pitch: F,
+						unit: c
+					}, e.label)),
+					/* @__PURE__ */ T(u, {
+						gutter: 12,
+						height: p,
+						text: a(o),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { O as PairedRungs };