@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/glance/draw-in.goals.json.js

@@ -0,0 +1,289 @@
+"use client";
+//#region src/charts/glance/draw-in.goals.json
+var e = [
+	1,
+	13,
+	5,
+	2,
+	0,
+	0,
+	0,
+	0,
+	20,
+	12,
+	0,
+	0,
+	0,
+	0,
+	0,
+	22,
+	8,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	19,
+	4,
+	0,
+	0,
+	0,
+	0,
+	0,
+	22,
+	8,
+	0,
+	0,
+	0,
+	0,
+	0,
+	23,
+	7,
+	4,
+	0,
+	0,
+	0,
+	0,
+	24,
+	7,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	22,
+	6,
+	1,
+	0,
+	0,
+	0,
+	4,
+	16,
+	11,
+	0,
+	0,
+	0,
+	0,
+	0,
+	17,
+	7,
+	3,
+	0,
+	0,
+	0,
+	0,
+	14,
+	12,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	22,
+	7,
+	2,
+	0,
+	0,
+	0,
+	2,
+	21,
+	11,
+	0,
+	5,
+	25,
+	5,
+	0,
+	16,
+	16,
+	3,
+	0,
+	0,
+	0,
+	0,
+	14,
+	15,
+	2,
+	0,
+	0,
+	0,
+	0,
+	17,
+	15,
+	0,
+	0,
+	0,
+	16,
+	1,
+	0,
+	20,
+	8,
+	0,
+	4,
+	0,
+	0,
+	21,
+	8,
+	3,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	15,
+	9,
+	6,
+	0,
+	15,
+	20,
+	4,
+	0,
+	0,
+	0,
+	0,
+	20,
+	9,
+	0,
+	0,
+	0,
+	0,
+	0,
+	21,
+	10,
+	3,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	4,
+	0,
+	3,
+	19,
+	4,
+	0,
+	0,
+	4,
+	0,
+	4,
+	20,
+	9,
+	0,
+	15,
+	10,
+	2,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	12,
+	7,
+	1,
+	0,
+	0,
+	0,
+	0,
+	18,
+	6,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	0,
+	5,
+	14,
+	1,
+	0,
+	15,
+	9,
+	3,
+	0,
+	0,
+	0,
+	0,
+	17,
+	18,
+	1,
+	0,
+	5,
+	0,
+	0,
+	15,
+	9,
+	3,
+	3,
+	4,
+	0,
+	0,
+	15,
+	8,
+	0,
+	0,
+	0,
+	2,
+	1,
+	10,
+	15,
+	2,
+	0,
+	0,
+	0,
+	0,
+	8,
+	14,
+	0,
+	0,
+	0,
+	0,
+	3,
+	0,
+	13,
+	5,
+	10,
+	0,
+	0,
+	0,
+	0,
+	24
+];
+//#endregion
+export { e as default };

package/lib/charts/glance/draw-in.js

@@ -0,0 +1,214 @@
+"use client";
+import { monthTickLabels as e } from "../../lib/format.js";
+import { useHover as t, useSvgId as n } from "../hooks.js";
+import { Plot as r, Tooltip as i } from "../core.js";
+import { noteOf as a, noteSpace as o } from "../util.js";
+import { TipText as s } from "../hover.js";
+import { Dot as c, Ring as l } from "../markers.js";
+import { FootNote as u } from "../plot-note.js";
+import { HRule as d, VRule as f } from "../rules.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { HALFTONE_R as h, paint as g } from "../texture-ids.js";
+import { DotScreen as _ } from "../texture.js";
+import { ValueGrid as v } from "../value-grid.js";
+import { Control as y } from "../control.js";
+import { easeTravel as b } from "../motion.js";
+import { usePlayhead as x } from "../playback.js";
+import { ControlSlot as S } from "./control-slot.js";
+import { drawInDemo as C } from "./draw-in.data.js";
+import { useRef as w } from "react";
+import { scaleLinear as T, scaleUtc as E } from "d3-scale";
+import { utcFormat as D } from "d3-time-format";
+import { bisectCenter as O } from "d3-array";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { area as M, curveMonotoneX as N, line as P } from "d3-shape";
+import { utcMonth as F } from "d3-time";
+//#region src/charts/glance/draw-in.tsx
+var I = D("%-d %b"), L = (e) => Math.round(e).toLocaleString("en-GB"), R = (e) => `${L(e)} goals`, z = (e, t) => {
+	let n = x({
+		box: e,
+		end: 1,
+		rate: t,
+		reduced: "end"
+	});
+	return {
+		handleReplay: n.handleReplay,
+		p: n.reduced ? 1 : n.t,
+		reduced: n.reduced
+	};
+}, B = 30, V = 52, H = (e) => /* @__PURE__ */ j("g", { children: [/* @__PURE__ */ A(m, {
+	voice: "figure",
+	x: e.x,
+	y: B,
+	children: e.text
+}), e.caption === void 0 ? null : /* @__PURE__ */ A(m, {
+	muted: !0,
+	voice: "label",
+	x: e.x,
+	y: V,
+	children: e.caption
+})] }), U = (e) => /* @__PURE__ */ j(k, { children: [
+	/* @__PURE__ */ j("defs", { children: [/* @__PURE__ */ A(_, {
+		id: `${e.clip}-screen`,
+		r: h[0],
+		tone: "fill-l4"
+	}), /* @__PURE__ */ A("clipPath", {
+		id: e.clip,
+		children: /* @__PURE__ */ A("rect", {
+			x: 0,
+			y: 0,
+			width: Math.max(0, e.tipX + 2),
+			height: e.height
+		})
+	})] }),
+	/* @__PURE__ */ A("path", {
+		clipPath: `url(#${e.clip})`,
+		d: M().curve(N).y0(e.floor)(e.pts) ?? "",
+		fill: g(`${e.clip}-screen`)
+	}),
+	/* @__PURE__ */ A(v, {
+		floor: e.floor,
+		ticks: e.y.ticks(4),
+		format: L,
+		side: "right",
+		x0: e.left,
+		x1: e.width,
+		y: e.y
+	}),
+	/* @__PURE__ */ A("g", {
+		clipPath: `url(#${e.clip})`,
+		children: /* @__PURE__ */ A("path", {
+			d: P().curve(N)(e.pts) ?? "",
+			className: "stroke-ink fill-none",
+			strokeWidth: 2,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		})
+	})
+] }), W = (t) => {
+	let [n] = t.data, r = t.data.at(-1) ?? n, i = t.narrow ? 3 : 2, a = F.range(n.date, r.date).filter((e) => e.getUTCMonth() % i === 0), o = e(a);
+	return /* @__PURE__ */ j(k, { children: [
+		/* @__PURE__ */ A(d, {
+			x0: t.left,
+			x1: t.width,
+			y: t.floor
+		}),
+		a.map((e, n) => /* @__PURE__ */ A(m, {
+			voice: "axis",
+			x: t.x(e),
+			y: t.floor + 16,
+			children: o[n]
+		}, e.getTime())),
+		t.hover === null ? null : /* @__PURE__ */ j("g", {
+			pointerEvents: "none",
+			children: [/* @__PURE__ */ A(f, {
+				kind: "cursor",
+				x: t.hover.x,
+				y0: Math.round(t.y(t.data[t.hover.key].value)),
+				y1: t.floor
+			}), /* @__PURE__ */ A(l, {
+				className: "stroke-ink",
+				cx: t.hover.x,
+				cy: t.y(t.data[t.hover.key].value),
+				size: "md",
+				weight: "cursor"
+			})]
+		})
+	] });
+}, G = (e) => /* @__PURE__ */ j(y, {
+	onClick: e.onReplay,
+	label: "Replay the draw",
+	children: [/* @__PURE__ */ A("svg", {
+		width: 9,
+		height: 10,
+		viewBox: "0 0 9 10",
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ A("path", {
+			d: "M7.5 3.2A3.6 3.6 0 1 0 8 6",
+			className: "fill-none stroke-current",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	}), "Replay"]
+}), K = (e, t) => {
+	let n = t * (e.length - 1), r = Math.floor(n), i = Math.min(e.length - 1, r + 1);
+	return e[r].value + (e[i].value - e[r].value) * (n - r);
+}, q = (e) => {
+	let l = a(e), d = e.data ?? C, f = e.format ?? R, m = n("drawin"), h = w(null), g = z(h, e.duration ?? 2200), _ = (e.height ?? 380) - (g.reduced ? 0 : 44), v = t(), [y] = d, x = d.at(-1) ?? y, D = b(g.p), k = K(d, D), M = v.at === null ? e.caption : `to ${I(d[v.at.key].date)}`, N = `Cumulative line from ${f(y.value)} to ${f(x.value)}${e.caption === void 0 ? "" : `, ${e.caption}`}`;
+	return /* @__PURE__ */ j("div", {
+		ref: h,
+		className: "relative",
+		children: [g.reduced ? null : /* @__PURE__ */ A(S, { children: /* @__PURE__ */ A(G, { onReplay: g.handleReplay }) }), /* @__PURE__ */ A(r, {
+			overlay: v.at === null ? null : /* @__PURE__ */ A(i, {
+				x: v.at.x,
+				y: v.at.y,
+				children: /* @__PURE__ */ A(s, {
+					facts: [`${f(d[v.at.key].value)} to date`],
+					lead: I(d[v.at.key].date)
+				})
+			}),
+			children: (t) => {
+				let n = t < 480, r = e.caption === void 0 ? 48 : 70, i = {
+					bottom: 26 + o(l, t - 16, 18),
+					left: 4,
+					right: 48,
+					top: n ? r : 52
+				}, a = E().domain([y.date, x.date]).range([i.left, t - i.right]), s = T().domain([0, x.value]).range([_ - i.bottom, i.top]), h = d.map((e) => [a(e.date), s(e.value)]), b = h.map((e) => e[0]), S = i.left + (t - i.right - i.left) * D;
+				return /* @__PURE__ */ j(p, {
+					className: "touch-pan-y",
+					height: _,
+					label: N,
+					leave: v.clear,
+					onPointerMove: (e) => {
+						if (g.p >= 1) {
+							let t = O(b, e.clientX - e.currentTarget.getBoundingClientRect().left);
+							v.show(t, b[t], s(d[t].value) - 10);
+						}
+					},
+					width: t,
+					children: [
+						/* @__PURE__ */ A(H, {
+							caption: M,
+							text: f(v.at === null ? k : d[v.at.key].value),
+							x: i.left
+						}),
+						/* @__PURE__ */ A(U, {
+							clip: m,
+							floor: _ - i.bottom,
+							height: _,
+							left: i.left,
+							pts: h,
+							tipX: S,
+							width: t,
+							y: s
+						}),
+						/* @__PURE__ */ A(W, {
+							data: d,
+							floor: _ - i.bottom,
+							hover: v.at,
+							left: i.left,
+							narrow: n,
+							width: t,
+							x: a,
+							y: s
+						}),
+						g.p > 0 && v.at === null ? /* @__PURE__ */ A(c, {
+							className: "fill-hero",
+							cx: S,
+							cy: s(k),
+							size: "md"
+						}) : null,
+						/* @__PURE__ */ A(u, {
+							height: _,
+							text: l,
+							width: t
+						})
+					]
+				});
+			}
+		})]
+	});
+};
+//#endregion
+export { q as DrawIn };

package/lib/charts/glance/dynamic-stream.data.js

@@ -0,0 +1,6 @@
+"use client";
+import { rnd as e } from "../../lib/random.js";
+//#region src/charts/glance/dynamic-stream.data.ts
+var t = (t) => 21 + 2.8 * Math.sin(t / 19) + 1.4 * Math.sin(t / 6.7 + 1) + (e(t, 5) - .5) * 1.3;
+//#endregion
+export { t as dynamicStreamDemo };

package/lib/charts/glance/dynamic-stream.js

@@ -0,0 +1,189 @@
+"use client";
+import { useHover as e, useSvgId as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { noteOf as i, noteSpace as a } from "../util.js";
+import { TipText as o } from "../hover.js";
+import { Dot as s, Ring as c } from "../markers.js";
+import { FootNote as l } from "../plot-note.js";
+import { HRule as u, VRule as d } from "../rules.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { paint as m } from "../texture-ids.js";
+import { Stipple as h } from "../texture.js";
+import { ValueGrid as g } from "../value-grid.js";
+import { Control as _ } from "../control.js";
+import { usePlayhead as v } from "../playback.js";
+import { ControlSlot as y } from "./control-slot.js";
+import { dynamicStreamDemo as b } from "./dynamic-stream.data.js";
+import { useMemo as x, useRef as S } from "react";
+import { scaleLinear as C } from "d3-scale";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { area as D, curveMonotoneX as O, line as k } from "d3-shape";
+//#region src/charts/glance/dynamic-stream.tsx
+var A = (e) => `${Math.round(e)}`, j = (e) => {
+	let t = Infinity, n = -Infinity;
+	for (let r = 0; r < 400; r += 1) {
+		let i = e(r);
+		t = Math.min(t, i), n = Math.max(n, i);
+	}
+	let r = (n - t) * .1;
+	return [t - r, n + r];
+}, M = (e, t) => {
+	let n = v({
+		box: e,
+		end: Infinity,
+		rate: 1,
+		reduced: "step",
+		step: {
+			every: t * 3,
+			unit: t
+		}
+	});
+	return {
+		elapsed: n.t,
+		handleToggle: n.handleToggle,
+		playing: n.playing,
+		reduced: n.reduced
+	};
+}, N = (e) => /* @__PURE__ */ T("svg", {
+	width: 8,
+	height: 8,
+	viewBox: "0 0 8 8",
+	"aria-hidden": !0,
+	children: /* @__PURE__ */ T("circle", {
+		cx: 4,
+		cy: 4,
+		r: 3,
+		className: `stroke-current ${e.playing ? "fill-current" : "fill-none"}`,
+		strokeWidth: 1
+	})
+}), P = (e) => /* @__PURE__ */ E(w, { children: [
+	/* @__PURE__ */ E("defs", { children: [/* @__PURE__ */ T(h, {
+		id: `${e.clip}-dots`,
+		tone: "fill-l4"
+	}), /* @__PURE__ */ T("clipPath", {
+		id: e.clip,
+		children: /* @__PURE__ */ T("rect", {
+			x: e.left,
+			y: 0,
+			width: e.right - e.left,
+			height: e.floor + 20
+		})
+	})] }),
+	/* @__PURE__ */ T("path", {
+		clipPath: `url(#${e.clip})`,
+		d: D().curve(O).y0(e.floor)(e.pts) ?? "",
+		fill: m(`${e.clip}-dots`)
+	}),
+	/* @__PURE__ */ T(g, {
+		floor: e.floor,
+		ticks: e.y.ticks(4),
+		format: e.format,
+		side: "right",
+		x0: e.left,
+		x1: e.width,
+		y: e.y
+	}),
+	/* @__PURE__ */ T("path", {
+		clipPath: `url(#${e.clip})`,
+		d: k().curve(O)(e.pts) ?? "",
+		className: "stroke-ink fill-none",
+		strokeWidth: 2,
+		strokeLinejoin: "round",
+		strokeLinecap: "round"
+	}),
+	/* @__PURE__ */ T(u, {
+		x0: e.left,
+		x1: e.width,
+		y: e.floor
+	}),
+	/* @__PURE__ */ T(s, {
+		className: "fill-hero",
+		cx: e.right,
+		cy: e.headY,
+		size: "md"
+	}),
+	/* @__PURE__ */ T(p, {
+		dy: "0.35em",
+		halo: !0,
+		voice: "value",
+		x: e.right + 9,
+		y: e.headY,
+		children: e.format(e.latest)
+	})
+] }), F = (s) => {
+	let u = s.feed ?? b, p = s.window ?? 50, m = s.interval ?? 300, h = (s.height ?? 320) - 44, g = s.format ?? A, v = t("stream"), w = S(null), D = M(w, m), O = e(), k = x(() => j(u), [u]), [F, I] = s.domain ?? k, L = p + Math.floor(D.elapsed / m), R = D.reduced ? 0 : D.elapsed % m / m, z = Array.from({ length: p + 2 }, (e, t) => L - p + t), B = u(L - 1), V = `Rolling line, latest value ${g(B)}, last ${p} values`;
+	return /* @__PURE__ */ E("div", {
+		ref: w,
+		className: "relative",
+		children: [/* @__PURE__ */ T(y, { children: /* @__PURE__ */ E(_, {
+			onClick: D.handleToggle,
+			label: D.playing ? "Pause the swell" : "Resume the swell",
+			children: [/* @__PURE__ */ T(N, { playing: D.playing }), D.playing ? "Running" : "Paused"]
+		}) }), /* @__PURE__ */ T(n, {
+			overlay: O.at === null ? null : /* @__PURE__ */ T(r, {
+				x: O.at.x,
+				y: O.at.y,
+				children: /* @__PURE__ */ T(o, {
+					facts: [g(u(O.at.key))],
+					lead: `${((L - 1 - O.at.key) * m / 1e3).toFixed(1)}s ago`
+				})
+			}),
+			children: (e) => {
+				let t = {
+					bottom: 12 + a(i(s), e - 16, 18),
+					left: 4,
+					right: 64,
+					top: 14
+				}, n = e - t.right, r = (n - t.left) / (p - 1), o = (e) => n - (L - e - 1 + R) * r, m = C().domain([F, I]).nice().range([h - t.bottom, t.top]);
+				return /* @__PURE__ */ E(f, {
+					className: "touch-pan-y",
+					height: h,
+					label: V,
+					leave: O.clear,
+					onPointerMove: (e) => {
+						let t = e.clientX - e.currentTarget.getBoundingClientRect().left, i = Math.round(L - 1 + R - (n - t) / r), a = Math.max(L - p + 1, Math.min(L - 1, i));
+						O.show(a, o(a), m(u(a)) - 10);
+					},
+					width: e,
+					children: [
+						/* @__PURE__ */ T(P, {
+							clip: v,
+							floor: h - t.bottom,
+							format: g,
+							headY: m(B) + (m(u(L)) - m(B)) * R,
+							latest: B,
+							left: t.left,
+							pts: z.map((e) => [o(e), m(u(e))]),
+							right: n,
+							width: e,
+							y: m
+						}),
+						O.key === null ? null : /* @__PURE__ */ E("g", {
+							pointerEvents: "none",
+							children: [/* @__PURE__ */ T(d, {
+								kind: "cursor",
+								x: o(O.key),
+								y0: t.top - 6,
+								y1: h - t.bottom
+							}), /* @__PURE__ */ T(c, {
+								className: "stroke-ink",
+								cx: o(O.key),
+								cy: m(u(O.key)),
+								size: "md",
+								weight: "cursor"
+							})]
+						}),
+						/* @__PURE__ */ T(l, {
+							height: h,
+							text: i(s),
+							width: e
+						})
+					]
+				});
+			}
+		})]
+	});
+};
+//#endregion
+export { F as DynamicStream };