@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/basics/rung-waterfall.js

@@ -0,0 +1,150 @@
+"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 { paint as m, useTextureIds as h } from "../texture-ids.js";
+import { Beads as g } from "../texture.js";
+import { rungPitch as _, rungY as v } from "./rung-geometry.js";
+import { Rungs as y } from "./rungs.js";
+import { rungWaterfallDemo as b } from "./rung-waterfall.data.js";
+import { scaleBand as x } from "d3-scale";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/charts/basics/rung-waterfall.tsx
+var w = (e, t) => e < 0 ? `−${t(-e)}` : `+${t(e)}`, T = (e, t) => e.step ? w(e.shown, t) : t(e.shown), E = (e) => {
+	let t = 0;
+	return e.map((e) => {
+		if (e.total === !0) return t = e.value ?? t, {
+			from: 0,
+			label: e.label,
+			shown: t,
+			step: !1,
+			to: t
+		};
+		let n = t;
+		return t += e.value ?? 0, {
+			from: n,
+			label: e.label,
+			shown: e.value ?? 0,
+			step: !0,
+			to: t
+		};
+	});
+}, D = (e) => e.step && e.shown < 0, O = (e, t) => t ? "fill-hero" : D(e) ? "" : e.step ? "fill-l4" : "fill-l3", k = (e, t) => t ? "fill-hero" : D(e) ? "" : "fill-l2", A = ({ beads: e, bw: t, col: n, dim: r, floor: i, format: a, hero: o, index: l, left: u, onEnter: d, pitch: f, unit: h }) => {
+	let g = Math.round(Math.min(n.from, n.to) / h), _ = Math.round(Math.max(n.from, n.to) / h), b = v(i, _ - 1, f);
+	return /* @__PURE__ */ C(s, {
+		dim: r,
+		onPointerEnter: () => {
+			d(u + t / 2, b - 26);
+		},
+		children: [
+			/* @__PURE__ */ S(c, {
+				height: i - b + 26,
+				width: t + 12,
+				x: u - 6,
+				y: b - 26
+			}),
+			/* @__PURE__ */ S(y, {
+				accent: k(n, o),
+				className: O(n, o),
+				fill: !o && D(n) ? m(e) : void 0,
+				floor: i,
+				from: g,
+				id: n.label,
+				left: u,
+				n: _ - g,
+				order: l * 4,
+				pitch: f,
+				width: t
+			}),
+			/* @__PURE__ */ S(p, {
+				anchor: "middle",
+				order: l,
+				tier: "series",
+				voice: n.step ? "axis" : "value",
+				x: u + t / 2,
+				y: b - 11,
+				children: T(n, a)
+			}),
+			/* @__PURE__ */ S(p, {
+				anchor: "middle",
+				muted: !0,
+				voice: "label",
+				x: u + t / 2,
+				y: i + 18,
+				children: n.label
+			})
+		]
+	});
+}, j = (s) => {
+	let c = E(s.data ?? b), p = s.unit ?? 1, m = s.height ?? 440, y = s.format ?? String, w = r(a(s)), D = e(), O = h("waterfall"), k = c.map((e) => `${e.label} ${T(e, y)}`).join(", ");
+	return /* @__PURE__ */ S(t, {
+		overlay: D.at === null ? null : /* @__PURE__ */ S(n, {
+			x: D.at.x,
+			y: D.at.y,
+			children: /* @__PURE__ */ S(l, {
+				facts: [`${T(c[D.at.key], y)}${c[D.at.key].step ? ` → ${y(c[D.at.key].to)}` : ""}`],
+				lead: c[D.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = Math.min(e - 32, c.length * 135), n = (e - t) / 2, r = x().domain(c.map((e) => e.label)).range([n, n + t]).paddingInner(.42).paddingOuter(.22), l = r.bandwidth(), h = i(a(s), e - 24), b = Math.round(m - (w ? 50 : 30) - Math.max(0, h.length - 1) * 12), T = _(b - 34, Math.max(...c.flatMap((e) => [e.from, e.to])) / p), E = s.highlight ?? c.length - 1, j = c.slice(0, -1).map((e, t) => ({
+				id: `link-${e.label}`,
+				x1: (r(e.label) ?? 0) + l,
+				x2: r(c[t + 1].label) ?? 0,
+				y: v(b, Math.round(e.to / p) - 1, T)
+			}));
+			return /* @__PURE__ */ C(f, {
+				height: m,
+				label: k,
+				leave: D.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ S("defs", { children: /* @__PURE__ */ S(g, {
+						id: O("beads"),
+						tone: "fill-l3"
+					}) }),
+					/* @__PURE__ */ S(d, {
+						x0: Math.round(n),
+						x1: Math.round(n + t),
+						y: b
+					}),
+					j.map((e, t) => /* @__PURE__ */ S(d, {
+						className: "fade",
+						kind: "rule",
+						style: o(t + 2, "series"),
+						x0: Math.round(e.x1),
+						x1: Math.round(e.x2),
+						y: e.y
+					}, e.id)),
+					c.map((e, t) => /* @__PURE__ */ S(A, {
+						beads: O("beads"),
+						bw: l,
+						col: e,
+						dim: D.dim(t),
+						floor: b,
+						format: y,
+						hero: E === t,
+						index: t,
+						left: r(e.label) ?? 0,
+						onEnter: D.showAt(t),
+						pitch: T,
+						unit: p
+					}, e.label)),
+					/* @__PURE__ */ S(u, {
+						gutter: 12,
+						height: m,
+						text: a(s),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { j as RungWaterfall };

package/lib/charts/basics/rungs.js

@@ -0,0 +1,22 @@
+"use client";
+import { stagger as e } from "../util.js";
+import { RUNG as t, rungY as n } from "./rung-geometry.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/charts/basics/rungs.tsx
+var i = (i) => {
+	let a = i.from ?? 0, o = Math.round(i.left), s = Math.max(1, Math.round(i.left + i.width) - o), c = i.every ?? 5, l = Math.round(i.reach ?? 0);
+	return /* @__PURE__ */ r("g", { children: Array.from({ length: i.n }, (u, d) => {
+		let f = a + d, p = i.accent !== void 0 && i.accent !== "" && (d + 1) % c === 0;
+		return /* @__PURE__ */ r("rect", {
+			className: `grow-x ${p ? i.accent : i.className}`,
+			fill: p ? void 0 : i.fill,
+			height: t,
+			style: e((i.order ?? 0) + d * .35, "fine"),
+			width: p ? s + l * 2 : s,
+			x: p ? o - l : o,
+			y: n(i.floor, f, i.pitch)
+		}, `${i.id}-${f}`);
+	}) });
+};
+//#endregion
+export { i as Rungs };

package/lib/charts/basics/series-key.js

@@ -0,0 +1,26 @@
+"use client";
+import { sansWidth as e } from "../util.js";
+import { KEY as t } from "../marks.js";
+import { Label as n } from "../text.js";
+import { KeySwatch as r } from "../texture.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/charts/basics/series-key.tsx
+var { entryGap: o, gap: s, swatch: c } = t, l = (t) => c + s + Math.ceil(e(t.name, 11)), u = (e) => e.reduce((e, t, n) => e + l(t) + (n > 0 ? o : 0), 0), d = (e) => {
+	let t = e.align === "end" ? e.x - u(e.items) : e.x, d = e.items.map((n, r) => t + e.items.slice(0, r).reduce((e, t) => e + l(t) + o, 0));
+	return /* @__PURE__ */ i("g", {
+		className: "fade",
+		children: e.items.map((t, o) => /* @__PURE__ */ a("g", { children: [/* @__PURE__ */ i(r, {
+			fill: t.fill,
+			tone: t.tone,
+			x: d[o],
+			y: e.y - 10
+		}), /* @__PURE__ */ i(n, {
+			voice: "axis",
+			x: d[o] + c + s,
+			y: e.y,
+			children: t.name
+		})] }, t.name))
+	});
+};
+//#endregion
+export { d as SeriesKey };

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

@@ -0,0 +1,42 @@
+"use client";
+//#region src/charts/basics/stacked-rungs.data.ts
+var e = [
+	{
+		label: "London 2012",
+		parts: [
+			29,
+			18,
+			18
+		]
+	},
+	{
+		label: "Rio 2016",
+		parts: [
+			27,
+			23,
+			17
+		]
+	},
+	{
+		label: "Tokyo 2020",
+		parts: [
+			22,
+			20,
+			22
+		]
+	},
+	{
+		label: "Paris 2024",
+		parts: [
+			14,
+			22,
+			29
+		]
+	}
+], t = [
+	"Gold",
+	"Silver",
+	"Bronze"
+];
+//#endregion
+export { e as stackedRungsDemo, t as stackedRungsSeries };

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

@@ -0,0 +1,174 @@
+"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, sum 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 { TEXTURE_PITCH as h, paint as g, useTextureIds as _ } from "../texture-ids.js";
+import { Beads as v, Rules as y, Stipple as b } from "../texture.js";
+import { rungPitch as x, rungY as S } from "./rung-geometry.js";
+import { Rungs as C } from "./rungs.js";
+import { SeriesKey as w } from "./series-key.js";
+import { stackedRungsDemo as T, stackedRungsSeries as E } from "./stacked-rungs.data.js";
+import { scaleBand as D } from "d3-scale";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/charts/basics/stacked-rungs.tsx
+var A = [
+	"fill-l2",
+	"fill-l4",
+	""
+], j = ["fill-l2", "fill-l3"], M = 2, N = (e, t) => e[Math.min(t, e.length - 1)], P = [
+	{
+		Pattern: y,
+		name: "key-0",
+		tone: "fill-l2"
+	},
+	{
+		Pattern: y,
+		name: "key-1",
+		tone: "fill-l4"
+	},
+	{
+		Pattern: b,
+		name: "key-2",
+		tone: "fill-l3"
+	}
+], F = (e, t) => e.parts.reduce((e, n) => e + Math.round(n / t), 0) + Math.max(0, e.parts.length - 1), I = (e, t) => {
+	let n = [], r = 0;
+	for (let [i, a] of e.parts.entries()) {
+		let o = Math.round(a / t);
+		n.push({
+			id: `${e.label}-part-${i}`,
+			k: i,
+			n: o,
+			start: r,
+			value: a
+		}), r += o + 1;
+	}
+	return n;
+}, L = ({ beads: e, bw: t, datum: n, dim: r, floor: i, format: a, hero: l, index: u, labelRoom: d, left: f, onEnter: m, pitch: h, unit: _ }) => {
+	let v = S(i, F(n, _) - 1, h), y = I(n, _);
+	return /* @__PURE__ */ k(s, {
+		dim: r,
+		onPointerEnter: () => {
+			m(f + t / 2, v - 30);
+		},
+		children: [
+			/* @__PURE__ */ O(c, {
+				height: i - v + 30,
+				width: t + d + 16,
+				x: f - 8,
+				y: v - 30
+			}),
+			y.map((n) => /* @__PURE__ */ k("g", { children: [/* @__PURE__ */ O(C, {
+				accent: l && n.k === 0 ? "fill-hero" : j.at(n.k),
+				className: l && n.k === 0 ? "fill-hero" : N(A, n.k),
+				fill: n.k >= 2 ? g(e) : void 0,
+				floor: i,
+				from: n.start,
+				id: n.id,
+				left: f,
+				n: n.n,
+				order: n.start * .35 + u * 2,
+				pitch: h,
+				reach: M,
+				width: t
+			}), n.n > 0 ? /* @__PURE__ */ O(p, {
+				dy: "0.35em",
+				order: u + n.k,
+				voice: "axis",
+				x: f + t + 7,
+				y: Math.round(i) - (n.start + n.n / 2) * h,
+				children: a(n.value)
+			}) : null] }, n.id)),
+			/* @__PURE__ */ O(p, {
+				anchor: "middle",
+				order: u + 3,
+				voice: "value",
+				x: f + t / 2,
+				y: v - 14,
+				children: a(o(n.parts))
+			}),
+			/* @__PURE__ */ O(p, {
+				anchor: "middle",
+				muted: !0,
+				voice: "label",
+				x: f + t / 2,
+				y: i + 18,
+				children: n.label
+			})
+		]
+	});
+}, R = (s) => {
+	let c = s.data ?? T, p = s.series ?? E, y = s.unit ?? 1, b = s.height ?? 440, S = s.format ?? String, C = r(a(s)), A = e(), j = _("stack"), M = (e) => p.at(e) ?? `#${e + 1}`, N = (e) => e.parts.map((e, t) => `${M(t)} ${S(e)}`).join(" · "), I = c.map((e) => `${e.label} ${S(o(e.parts))}: ${N(e)}`).join("; ");
+	return /* @__PURE__ */ O(t, {
+		overlay: A.at === null ? null : /* @__PURE__ */ O(n, {
+			x: A.at.x,
+			y: A.at.y,
+			children: /* @__PURE__ */ O(l, {
+				facts: [S(o(c[A.at.key].parts)), N(c[A.at.key])],
+				lead: c[A.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = Math.min(e - 32, c.length * 135), n = (e - t) / 2, r = D().domain(c.map((e) => e.label)).range([n, n + t]).paddingInner(.3).paddingOuter(.3), l = r.bandwidth(), _ = e < 440 ? 18 : 26, T = Math.round(Math.min(56, l - _ - 6)), E = i(a(s), e - 24), M = Math.round(b - (C ? 50 : 30) - Math.max(0, E.length - 1) * 12), N = x(M - 52, Math.max(...c.map((e) => F(e, y))), 10), R = s.highlight ?? m(c.map((e) => o(e.parts)));
+			return /* @__PURE__ */ k(f, {
+				height: b,
+				label: I,
+				leave: A.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ k("defs", { children: [/* @__PURE__ */ O(v, {
+						id: j("beads"),
+						tone: "fill-l3"
+					}), P.map((e) => /* @__PURE__ */ O(e.Pattern, {
+						id: j(e.name),
+						pitch: h.dense,
+						tone: e.tone
+					}, e.name))] }),
+					/* @__PURE__ */ O(w, {
+						align: "end",
+						items: p.slice(0, P.length).map((e, t) => ({
+							fill: g(j(P[t].name)),
+							name: e
+						})),
+						x: Math.round(n + t),
+						y: 16
+					}),
+					/* @__PURE__ */ O(d, {
+						x0: Math.round(n),
+						x1: Math.round(n + t),
+						y: M
+					}),
+					c.map((e, t) => /* @__PURE__ */ O(L, {
+						beads: j("beads"),
+						bw: T,
+						datum: e,
+						dim: A.dim(t),
+						floor: M,
+						format: S,
+						hero: R === t,
+						index: t,
+						labelRoom: _,
+						left: (r(e.label) ?? 0) + l / 2 - (T + _) / 2,
+						onEnter: A.showAt(t),
+						pitch: N,
+						unit: y
+					}, e.label)),
+					/* @__PURE__ */ O(u, {
+						gutter: 12,
+						height: b,
+						text: a(s),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { R as StackedRungs };

package/lib/charts/basics/stream-ribbon.data.js

@@ -0,0 +1,124 @@
+"use client";
+var e = {
+	dates: [
+		"2008",
+		"2009",
+		"2010",
+		"2011",
+		"2012",
+		"2013",
+		"2014",
+		"2015",
+		"2016",
+		"2017",
+		"2018",
+		"2019",
+		"2020",
+		"2021",
+		"2022",
+		"2023",
+		"2024",
+		"2025",
+		"2026"
+	].map((e) => /* @__PURE__ */ new Date(`${e}-01-01T00:00:00Z`)),
+	series: [
+		{
+			name: "Running",
+			values: [
+				6259,
+				7040,
+				7393,
+				8430,
+				9281,
+				9169,
+				7390,
+				6829,
+				7596,
+				7233,
+				7258,
+				7257,
+				7766,
+				7398,
+				8600,
+				8984,
+				8391,
+				8440,
+				8263
+			]
+		},
+		{
+			name: "Fours",
+			values: [
+				6812,
+				5268,
+				6832,
+				7664,
+				7644,
+				8208,
+				6248,
+				6428,
+				6532,
+				6444,
+				6608,
+				6612,
+				6332,
+				6196,
+				8080,
+				8700,
+				8700,
+				9040,
+				9332
+			]
+		},
+		{
+			name: "Sixes",
+			values: [
+				3738,
+				3036,
+				3510,
+				3834,
+				4398,
+				4050,
+				4284,
+				4152,
+				3834,
+				4230,
+				5232,
+				4704,
+				4410,
+				4122,
+				6372,
+				6744,
+				7566,
+				7806,
+				8556
+			]
+		},
+		{
+			name: "Extras",
+			values: [
+				1128,
+				976,
+				1129,
+				1226,
+				1130,
+				1114,
+				987,
+				923,
+				900,
+				862,
+				803,
+				827,
+				844,
+				906,
+				1343,
+				1260,
+				1314,
+				1217,
+				1299
+			]
+		}
+	]
+};
+//#endregion
+export { e as streamRibbonDemo };