@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/basics/plumb-scatter.js

@@ -0,0 +1,229 @@
+"use client";
+import { plural as e } from "../../lib/format.js";
+import { resolveFormat as t } from "../../schema/format.js";
+import { keyOf as n } from "../../schema/key.js";
+import { useHover as r } from "../hooks.js";
+import { Plot as i, Tooltip as a } from "../core.js";
+import { hasText as o, noteLines as s, noteOf as c, sansWidth as l, stagger as u } from "../util.js";
+import { DimGroup as d, HitRect as f, TipText as p } from "../hover.js";
+import { crisp as m } from "../axes.js";
+import { Dot as h } from "../markers.js";
+import { FootNote as g } from "../plot-note.js";
+import { HRule as _, Stem as v } from "../rules.js";
+import { chartTable as y, plotOptions as b, scoped as x } from "../shared-options.js";
+import { ChartSvg as S } from "../svg.js";
+import { Label as C } from "../text.js";
+import { TEXTURE_PITCH as w } from "../texture-ids.js";
+import { DottedLine as T } from "../texture.js";
+import { scaleLinear as E } from "d3-scale";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region src/charts/basics/plumb-scatter.tsx
+var k = ({ floor: e, highName: t, lowName: n, x0: r, x1: i, yLabel: a }) => /* @__PURE__ */ O("g", { children: [
+	/* @__PURE__ */ D(_, {
+		x0: Math.round(r),
+		x1: Math.round(i),
+		y: e
+	}),
+	/* @__PURE__ */ D(C, {
+		voice: "axis",
+		x: r,
+		y: e + 20,
+		children: n
+	}),
+	/* @__PURE__ */ D(C, {
+		anchor: "end",
+		voice: "axis",
+		x: i,
+		y: e + 20,
+		children: t
+	}),
+	/* @__PURE__ */ D(C, {
+		voice: "axis",
+		x: r,
+		y: 20,
+		children: a
+	})
+] }), A = (e) => e ? "pop fill-hero" : "pop fill-l3", j = 2, M = {
+	anchor: "middle",
+	dx: 0,
+	dy: -12
+}, N = [
+	M,
+	{
+		anchor: "start",
+		dx: 10,
+		dy: 4
+	},
+	{
+		anchor: "end",
+		dx: -10,
+		dy: 4
+	}
+], P = (e, t, n) => e.anchor === "middle" ? [t - n / 2, t + n / 2] : e.anchor === "start" ? [t + e.dx, t + e.dx + n] : [t + e.dx - n, t + e.dx], F = (e, t, n, r) => {
+	let i = (t) => {
+		let [r, i] = P(t, e.px, e.w);
+		return r >= j && i <= n - j && e.py + t.dy - 10 > 0;
+	}, a = (n) => {
+		let [r, i] = P(n, e.px, e.w);
+		return t.every((t) => t.px === e.px || t.px < r - 4 || t.px > i + 4 || t.py > e.py + n.dy + 2);
+	}, o = N.find((e) => i(e) && a(e));
+	if (o !== void 0 || !r) return o;
+	let s = e.w / 2;
+	return N.find(i) ?? {
+		...M,
+		dx: Math.max(j + s - e.px, Math.min(0, n - j - s - e.px))
+	};
+}, I = ({ datum: e, dim: t, floor: n, format: r, hero: i, onEnter: a, order: o, place: s, x: c, y: l }) => {
+	let p = c(e.x), g = l(e.y), _ = s !== void 0;
+	return /* @__PURE__ */ O(d, {
+		dim: t,
+		onPointerEnter: () => {
+			a(p, g - (_ ? 28 : 10));
+		},
+		children: [
+			/* @__PURE__ */ D(f, {
+				height: n - g + 10,
+				width: 18,
+				x: p - 9,
+				y: g - 10
+			}),
+			i ? /* @__PURE__ */ D(v, {
+				className: "grow-y stroke-hero",
+				hero: !0,
+				style: u(o, "mark"),
+				x: p,
+				y0: Math.round(n),
+				y1: g
+			}) : /* @__PURE__ */ D("g", {
+				className: "fade",
+				style: u(o, "mark"),
+				children: /* @__PURE__ */ D(T, {
+					pitch: w.dense,
+					tone: "fill-l3",
+					x0: p,
+					x1: p,
+					y0: g + 4,
+					y1: n - 2
+				})
+			}),
+			/* @__PURE__ */ D(h, {
+				className: A(i),
+				cx: m(p),
+				cy: g,
+				size: i ? "md" : "sm",
+				style: u(o + 6, "mark")
+			}),
+			s === void 0 ? null : /* @__PURE__ */ O(C, {
+				anchor: s.anchor,
+				halo: !0,
+				order: o + 8,
+				tier: "mark",
+				voice: i ? "label" : "axis",
+				x: p + s.dx,
+				y: g + s.dy,
+				children: [
+					e.label,
+					" · ",
+					r(e.y)
+				]
+			})
+		]
+	});
+}, L = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return e.map((e) => {
+		let r = n(e), i = t.get(r) ?? 0;
+		return t.set(r, i + 1), `${r}#${i}`;
+	});
+}, R = (e) => {
+	if (e.length === 0) return [0, 1];
+	let t = Math.min(...e), n = Math.floor((t - 10) / 10) * 10, r = t < 0 ? n : Math.max(0, n), i = Math.max(...e);
+	return [r, i > r ? i : r + 1];
+}, z = (e) => {
+	if (e.length === 0) return [0, 10];
+	let t = Math.min(...e) < 0 ? Math.floor(Math.min(...e) * 1.12 / 10) * 10 : 0, n = Math.ceil(Math.max(...e) * 1.12 / 10) * 10;
+	return [t, n > t ? n : t + 10];
+}, B = (e, t, r) => {
+	if (t === void 0) return new Set(r);
+	let i = new Set(t);
+	return new Set(e.flatMap((e, t) => i.has(n(e)) ? [t] : []));
+}, V = (t, n) => {
+	if (t.length === 0) return "No data.";
+	let r = t.map((e) => e.y), i = t[r.indexOf(Math.max(...r))], a = t[r.indexOf(Math.min(...r))];
+	return `${e(t.length, "point")}. Highest: ${i.label}, ${n(i.y)}. Lowest: ${a.label}, ${n(a.y)}. The data table lists every point.`;
+}, H = (e, t, n) => e.length === 0 ? "No data" : e.map((e) => `${e.label}: ${t(e.x)}, ${n(e.y)}`).join("; "), U = (e, t, n, r) => e === null ? null : /* @__PURE__ */ D(a, {
+	x: e.x,
+	y: e.y,
+	children: /* @__PURE__ */ D(p, {
+		facts: [n(t[e.key].x), r(t[e.key].y)],
+		lead: t[e.key].label
+	})
+}), W = (e) => {
+	let a = (e.data ?? []).filter((e) => Number.isFinite(e.x) && Number.isFinite(e.y)), u = e.height ?? 440, d = t(e.format), f = e.formatX === void 0 ? (e) => `${Math.round(e)}` : t(e.formatX), [p, m] = e.xLabels ?? ["Low", "High"], h = o(c(e)), _ = r(), v = a.map((e) => e.y), x = a.map((e) => e.x), C = L(a), w = v.length === 0 ? -1 : v.indexOf(Math.max(...v)), T = v.length === 0 ? -1 : v.indexOf(Math.min(...v)), A = e.emphasis === void 0 ? w : a.findIndex((t) => n(t) === e.emphasis), j = B(a, e.labelled, [w, T]), M = e.xDomain ?? z(x), N = e.yDomain ?? R(v), P = a.map((e, t) => ({
+		i: t,
+		x: e.x
+	})).toSorted((e, t) => e.x - t.x), W = new Map(P.map((e, t) => [e.i, t])), G = e.title ?? H(a, f, d);
+	return /* @__PURE__ */ D(i, {
+		...b(e),
+		initialWidth: e.initialWidth,
+		table: y(e, e.title ?? "Points", [
+			"Label",
+			"X",
+			"Y"
+		], a.map((e) => [
+			e.label,
+			f(e.x),
+			d(e.y)
+		])),
+		width: e.width,
+		overlay: U(_.at, a, f, d),
+		children: (t) => {
+			let n = Math.min(t - 4, 600), r = (t - n) / 2, i = s(c(e), t - 24, e.metrics), o = Math.round(u) - (h ? 58 : 36) - Math.max(0, i.length - 1) * 12, f = E().domain(M).range([r, r + n]), v = E().domain(N).range([o - 14, 46]);
+			return /* @__PURE__ */ O(S, {
+				desc: V(a, d),
+				height: u,
+				label: G,
+				leave: _.clear,
+				width: t,
+				children: [
+					/* @__PURE__ */ D(k, {
+						floor: o,
+						highName: m,
+						lowName: p,
+						x0: r,
+						x1: r + n,
+						yLabel: e.yLabel ?? "Higher ↑"
+					}),
+					a.map((n, r) => /* @__PURE__ */ D(I, {
+						place: j.has(r) ? F({
+							px: f(n.x),
+							py: v(n.y),
+							w: l(`${n.label} · ${d(n.y)}`, A === r ? 12 : 11, e.metrics)
+						}, a.map((e) => ({
+							px: f(e.x),
+							py: v(e.y)
+						})), t, A === r) : void 0,
+						datum: n,
+						dim: _.dim(r),
+						floor: o,
+						format: d,
+						hero: A === r,
+						onEnter: _.showAt(r),
+						order: W.get(r) ?? r,
+						x: f,
+						y: v
+					}, C[r])),
+					/* @__PURE__ */ D(g, {
+						gutter: 12,
+						height: u,
+						metrics: e.metrics,
+						text: c(e),
+						width: t
+					})
+				]
+			});
+		}
+	});
+}, G = (e) => x(e.idPrefix, /* @__PURE__ */ D(W, { ...e }));
+//#endregion
+export { G as PlumbScatter };

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

@@ -0,0 +1,178 @@
+"use client";
+import { plural as e } from "../../lib/format.js";
+import { resolveFormat as t } from "../../schema/format.js";
+import { keyOf as n } from "../../schema/key.js";
+import { useHover as r } from "../hooks.js";
+import { Plot as i, Tooltip as a } from "../core.js";
+import { countingUnit as o, noteOf as s, noteSpace as c, sansWidth as l, stagger as u } from "../util.js";
+import { DimGroup as d, HitRect as f, TipText as p } from "../hover.js";
+import { FootNote as m } from "../plot-note.js";
+import { HRule as h } from "../rules.js";
+import { chartTable as g, plotOptions as _, scoped as v } from "../shared-options.js";
+import { ChartSvg as y } from "../svg.js";
+import { Label as b } from "../text.js";
+import { maxIndex as x } from "./util-b.js";
+import { paint as S, useTextureIds as C } from "../texture-ids.js";
+import { CrossHatch as w, Hatch as T } from "../texture.js";
+import { rungPitch as E, rungY as D } from "./rung-geometry.js";
+import { Rungs as O } from "./rungs.js";
+import { scaleBand as k } from "d3-scale";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+//#region src/charts/basics/rung-bars.tsx
+var M = 10, N = .4, P = 10, F = 3, I = 8, L = 14, R = (e, t, n) => {
+	let r = e.map((e) => l(e, void 0, n));
+	return r.slice(1).some((e, n) => (r[n] + e) / 2 + I > t);
+}, z = (e) => {
+	let { floor: t, right: n, shadow: r, top: i } = e, a = [
+		[n, i],
+		[n + r, i + r],
+		[n + r, t],
+		[n, t]
+	].map((e) => e.join(",")).join(" ");
+	return /* @__PURE__ */ A("polygon", {
+		className: "fade shape-crisp",
+		fill: S(e.tex(e.hero ? "shade-hero" : "shade")),
+		points: a,
+		style: u(e.index)
+	});
+}, B = (e) => {
+	let t = D(e.floor, e.rungs - 1, e.pitch), n = e.left + e.bandwidth / 2, r = Math.round(e.left + e.bandwidth);
+	return /* @__PURE__ */ j(d, {
+		dim: e.dim,
+		onPointerEnter: e.onEnter,
+		children: [
+			/* @__PURE__ */ A(f, {
+				height: e.floor - t + 24,
+				width: e.bandwidth + 12 + e.shadow,
+				x: e.left - 6,
+				y: t - 24
+			}),
+			/* @__PURE__ */ A(z, {
+				floor: e.floor,
+				hero: e.hero,
+				index: e.index,
+				right: r,
+				shadow: e.shadow,
+				tex: e.tex,
+				top: t
+			}),
+			/* @__PURE__ */ A(O, {
+				accent: e.hero ? "fill-hero" : "fill-l2",
+				className: e.hero ? "fill-hero" : "fill-l4",
+				every: P,
+				reach: F,
+				floor: e.floor,
+				id: e.datum.label,
+				left: e.left,
+				n: e.rungs,
+				order: e.index * 2,
+				pitch: e.pitch,
+				width: e.bandwidth
+			}),
+			/* @__PURE__ */ A(b, {
+				anchor: "middle",
+				order: e.index,
+				voice: "value",
+				x: n,
+				y: t - 10,
+				children: e.format(e.datum.value)
+			}),
+			/* @__PURE__ */ A(b, {
+				anchor: "middle",
+				muted: !0,
+				voice: "label",
+				x: n,
+				y: e.floor + 18 + e.labelDrop,
+				children: e.datum.label
+			})
+		]
+	});
+}, V = (t, n) => {
+	if (t.length === 0) return "No data.";
+	let r = (e) => `${t[e].label}, ${n(t[e].value)}`, i = x(t.map((e) => e.value)), a = x(t.map((e) => -e.value));
+	return `${e(t.length, "bar")}. Largest: ${r(i)}.${t.length > 1 ? ` Smallest: ${r(a)}.` : ""} The data table lists every bar.`;
+}, H = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return e.map((e) => {
+		let r = n(e), i = t.get(r) ?? 0;
+		return t.set(r, i + 1), `${r}#${i}`;
+	});
+}, U = (e, t, n) => e === null ? null : /* @__PURE__ */ A(a, {
+	x: e.x,
+	y: e.y,
+	children: /* @__PURE__ */ A(p, {
+		facts: [n(t[e.key].value)],
+		lead: t[e.key].label
+	})
+}), W = (e, t, n) => {
+	let r = Math.min(t - 32, e.length * 120), i = (t - r) / 2, a = k().domain(e.map((e, t) => t)).range([i, i + r]).paddingInner(.42).paddingOuter(.3);
+	return {
+		alternate: R(e.map((e) => e.label), a.step(), n),
+		plotWidth: r,
+		x: a,
+		x0: i
+	};
+}, G = (a) => {
+	let l = (a.data ?? []).filter((e) => Number.isFinite(e.value)), u = o(a.unit !== void 0 && a.unit > 0 ? a.unit : 1, Math.max(0, ...l.map((e) => e.value))), d = a.width !== void 0 && a.height !== void 0, f = a.height ?? 460, p = t(a.format), v = r(), b = C("counted"), S = a.title ?? `Bar chart of ${e(l.length, "value")}`;
+	return /* @__PURE__ */ A(i, {
+		..._(a),
+		initialWidth: a.initialWidth,
+		table: g(a, S, ["Label", "Value"], l.map((e) => [e.label, p(e.value)])),
+		width: a.width,
+		overlay: U(v.at, l, p),
+		children: (e) => {
+			let t = {
+				bottom: 30 + c(s(a), e - 16, 20, a.metrics),
+				top: 28
+			}, { alternate: r, plotWidth: i, x: o, x0: g } = W(l, e, a.metrics), _ = t.bottom + (r ? L : 0), C = Math.max(0, ...l.map((e) => e.value / u)), O = E(f - _ - t.top, C), k = Math.round(C) * O, P = d ? f : Math.max(Math.min(f, t.top + Math.ceil(C) * O + _), t.top + k + _), F = Math.round(P - _), I = Math.min(M, Math.round((o.step() - o.bandwidth()) * N)), R = H(l), z = a.emphasis === void 0 ? x(l.map((e) => e.value)) : l.findIndex((e) => n(e) === a.emphasis);
+			return /* @__PURE__ */ j(y, {
+				desc: V(l, p),
+				height: P,
+				label: S,
+				leave: v.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ j("defs", { children: [/* @__PURE__ */ A(T, {
+						id: b("shade"),
+						tone: "fill-l4"
+					}), /* @__PURE__ */ A(w, {
+						id: b("shade-hero"),
+						tone: "fill-l3"
+					})] }),
+					/* @__PURE__ */ A(h, {
+						x0: Math.round(g),
+						x1: Math.round(g + i),
+						y: F
+					}),
+					l.map((e, t) => {
+						let n = o(t) ?? 0, i = Math.max(0, Math.round(e.value / u));
+						return /* @__PURE__ */ A(B, {
+							bandwidth: o.bandwidth(),
+							datum: e,
+							dim: v.dim(t),
+							floor: F,
+							format: p,
+							hero: z === t,
+							index: t,
+							labelDrop: r && t % 2 == 1 ? L : 0,
+							left: n,
+							pitch: O,
+							rungs: i,
+							shadow: I,
+							tex: b,
+							onEnter: v.enter(t, n + o.bandwidth() / 2, D(F, i - 1, O) - 22)
+						}, R[t]);
+					}),
+					/* @__PURE__ */ A(m, {
+						height: P,
+						metrics: a.metrics,
+						text: s(a),
+						width: e
+					})
+				]
+			});
+		}
+	});
+}, K = (e) => v(e.idPrefix, /* @__PURE__ */ A(G, { ...e }));
+//#endregion
+export { K as RungBars };

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

@@ -0,0 +1,6 @@
+"use client";
+import "../marks.js";
+//#region src/charts/basics/rung-geometry.ts
+var e = 2, t = (t, n, r = 12) => Math.max(e + 2, Math.min(r, Math.floor(t / Math.max(1, n)))), n = (t, n, r) => Math.round(t) - (n + 1) * r + Math.floor((r - e) / 2);
+//#endregion
+export { e as RUNG, t as rungPitch, n as rungY };

package/lib/charts/basics/rung-histogram.data.js

@@ -0,0 +1,73 @@
+"use client";
+//#region src/charts/basics/rung-histogram.data.ts
+var e = [
+	79,
+	157,
+	243,
+	285,
+	409,
+	839,
+	512,
+	615,
+	744,
+	746,
+	772,
+	1058,
+	975,
+	1019,
+	1203,
+	1308,
+	1390,
+	1815,
+	1210,
+	1248,
+	1239,
+	1341,
+	1334,
+	1272,
+	1328,
+	1164,
+	1184,
+	1149,
+	1134,
+	1178,
+	895,
+	753,
+	801,
+	703,
+	714,
+	620,
+	581,
+	505,
+	462,
+	438,
+	383,
+	417,
+	276,
+	245,
+	236,
+	208,
+	194,
+	208,
+	151,
+	131,
+	124,
+	121,
+	108,
+	122
+].map((e, t) => ({
+	count: e,
+	x0: 150 + t * 5,
+	x1: 150 + t * 5 + 5
+})), t = (e) => {
+	let t = 0;
+	for (let n of e) t += n.count;
+	let n = 0;
+	for (let r of e) {
+		if (n + r.count >= t / 2) return r.x0 + (t / 2 - n) / r.count * (r.x1 - r.x0);
+		n += r.count;
+	}
+	return e.at(-1)?.x1 ?? 0;
+};
+//#endregion
+export { t as binMedian, e as rungHistogramDemo };

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

@@ -0,0 +1,153 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, stagger as i } from "../util.js";
+import { DimGroup as a, HitRect as o, TipText as s } from "../hover.js";
+import { FootNote as c } from "../plot-note.js";
+import { HRule as l, Tick as u } from "../rules.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { maxIndex as p } from "./util-b.js";
+import { DottedLine as m } from "../texture.js";
+import { rungPitch as h, rungY as g } from "./rung-geometry.js";
+import { Rungs as _ } from "./rungs.js";
+import { binMedian as v, rungHistogramDemo as y } from "./rung-histogram.data.js";
+import { scaleLinear as b } from "d3-scale";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/charts/basics/rung-histogram.tsx
+var C = (e) => `${Math.floor(e / 60)}:${String(e % 60).padStart(2, "0")}`, w = (e, t, n, r, i) => {
+	let a = Math.min(e - 36, n.length * 58), o = (e - a) / 2, s = Math.round(t - (i ? 66 : 36)), c = Math.max(1, ...n.map((e) => Math.round(e.count / r))), l = n[0]?.x0 ?? 0, u = n.at(-1)?.x1 ?? 1;
+	return {
+		floor: s,
+		pitch: h(s - 34 - 6, c, 18),
+		plotW: a,
+		top: 34,
+		x: b().domain([l, u]).range([o, o + a]),
+		x0: o
+	};
+}, T = (e) => {
+	let { layout: t } = e, n = e.data.at(-1), r = [...e.data.map((e) => e.x0), ...n === void 0 ? [] : [n.x1]], i = Math.max(1, e.every * (t.plotW / e.data.length < 34 ? 2 : 1)), a = t.floor + 4;
+	return /* @__PURE__ */ S("g", { children: [/* @__PURE__ */ x(l, {
+		x0: Math.round(t.x0 - 8),
+		x1: Math.round(t.x0 + t.plotW + 8),
+		y: a
+	}), r.map((n, r) => /* @__PURE__ */ S("g", { children: [/* @__PURE__ */ x(u, {
+		size: r % i === 0 ? "md" : "sm",
+		x: t.x(n),
+		y: a + 1
+	}), r % i === 0 ? /* @__PURE__ */ x(f, {
+		anchor: "middle",
+		voice: "axis",
+		x: t.x(n),
+		y: t.floor + 30,
+		children: e.formatX(n)
+	}) : null] }, n))] });
+}, E = (e) => {
+	let { bin: t, layout: n, index: r } = e, i = Math.round(t.count / e.unit), s = n.x(t.x0), c = n.x(t.x1) - s, l = g(n.floor, i - 1, n.pitch), u = Math.min(l, n.floor - 30) - 12;
+	return /* @__PURE__ */ S(a, {
+		dim: e.dim,
+		onPointerEnter: () => {
+			e.onHover(s + c / 2, l - (e.peak ? 26 : 6));
+		},
+		children: [
+			/* @__PURE__ */ x(o, {
+				height: n.floor - u,
+				width: c,
+				x: s,
+				y: u
+			}),
+			/* @__PURE__ */ x(_, {
+				accent: e.peak ? "fill-hero" : "fill-l2",
+				className: e.peak ? "fill-hero" : "fill-l4",
+				floor: n.floor,
+				id: `bin-${t.x0}`,
+				left: s + c * .12,
+				n: i,
+				order: r * 1.6,
+				pitch: n.pitch,
+				width: c * .76
+			}),
+			e.peak ? /* @__PURE__ */ x(f, {
+				anchor: "middle",
+				order: r,
+				tier: "series",
+				voice: "value",
+				x: s + c / 2,
+				y: l - 10,
+				children: e.format(t.count)
+			}) : null
+		]
+	});
+}, D = (e) => {
+	let { layout: t } = e, n = t.x(e.value), r = n > t.x0 + t.plotW * .7;
+	return /* @__PURE__ */ S("g", {
+		className: "fade",
+		pointerEvents: "none",
+		style: i(10),
+		children: [/* @__PURE__ */ x(m, {
+			tone: "fill-l2",
+			x0: n,
+			x1: n,
+			y0: t.top - 2,
+			y1: t.floor + 3
+		}), /* @__PURE__ */ x(f, {
+			anchor: r ? "end" : "start",
+			halo: !0,
+			voice: "axis",
+			x: n + (r ? -8 : 8),
+			y: t.top + 2,
+			children: e.label
+		})]
+	});
+}, O = (i) => {
+	let a = i.data ?? y, o = i.height ?? 440, l = i.unit ?? 1, u = i.formatX ?? C, f = i.format ?? String, m = i.marker === void 0 ? v(a) : i.marker, h = p(a.map((e) => e.count)), g = e(), _ = a.map((e) => `${u(e.x0)}–${u(e.x1)}: ${f(e.count)}`).join(", "), b = a[0]?.x0 ?? 0, O = a.at(-1)?.x1 ?? 0;
+	return /* @__PURE__ */ x(t, {
+		overlay: g.at === null ? null : /* @__PURE__ */ x(n, {
+			x: g.at.x,
+			y: g.at.y,
+			children: /* @__PURE__ */ x(s, {
+				facts: [f(a[g.at.key].count)],
+				lead: `${u(a[g.at.key].x0)}–${u(a[g.at.key].x1)}`
+			})
+		}),
+		children: (e) => {
+			let t = w(e, o, a, l, r(i) !== void 0);
+			return /* @__PURE__ */ S(d, {
+				height: o,
+				label: _,
+				leave: g.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ x(T, {
+						data: a,
+						every: i.labelEvery ?? 3,
+						formatX: u,
+						layout: t
+					}),
+					a.map((e, n) => /* @__PURE__ */ x(E, {
+						bin: e,
+						dim: g.dim(n),
+						format: f,
+						index: n,
+						layout: t,
+						onHover: g.showAt(n),
+						peak: n === h,
+						unit: l
+					}, e.x0)),
+					m !== null && m >= b && m <= O ? /* @__PURE__ */ x(D, {
+						label: i.markerLabel ?? `Median · ${u(Math.round(m))}`,
+						layout: t,
+						value: m
+					}) : null,
+					/* @__PURE__ */ x(c, {
+						height: o,
+						text: r(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { O as RungHistogram };

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

@@ -0,0 +1,30 @@
+"use client";
+//#region src/charts/basics/rung-waterfall.data.ts
+var e = [
+	{
+		label: "Fossil",
+		value: 35.9
+	},
+	{
+		label: "Land use",
+		value: 5
+	},
+	{
+		label: "Emitted",
+		total: !0
+	},
+	{
+		label: "Ocean",
+		value: -11.8
+	},
+	{
+		label: "Plants",
+		value: -8.7
+	},
+	{
+		label: "Air",
+		total: !0
+	}
+];
+//#endregion
+export { e as rungWaterfallDemo };