@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/glance/circular-graph.data.js

@@ -0,0 +1,146 @@
+"use client";
+//#region src/charts/glance/circular-graph.data.ts
+var e = {
+	links: [
+		{
+			source: "London",
+			target: "South East",
+			value: 243
+		},
+		{
+			source: "East",
+			target: "London",
+			value: 155
+		},
+		{
+			source: "South East",
+			target: "South West",
+			value: 108
+		},
+		{
+			source: "East",
+			target: "South East",
+			value: 78
+		},
+		{
+			source: "London",
+			target: "South West",
+			value: 66
+		},
+		{
+			source: "North West",
+			target: "Yorkshire",
+			value: 65
+		},
+		{
+			source: "East Midlands",
+			target: "West Midlands",
+			value: 59
+		},
+		{
+			source: "London",
+			target: "West Midlands",
+			value: 55
+		},
+		{
+			source: "East",
+			target: "East Midlands",
+			value: 53
+		},
+		{
+			source: "East Midlands",
+			target: "Yorkshire",
+			value: 53
+		},
+		{
+			source: "East Midlands",
+			target: "London",
+			value: 50
+		},
+		{
+			source: "East Midlands",
+			target: "South East",
+			value: 49
+		},
+		{
+			source: "London",
+			target: "North West",
+			value: 49
+		},
+		{
+			source: "North West",
+			target: "West Midlands",
+			value: 48
+		},
+		{
+			source: "South East",
+			target: "West Midlands",
+			value: 44
+		},
+		{
+			source: "South West",
+			target: "West Midlands",
+			value: 39
+		},
+		{
+			source: "London",
+			target: "Yorkshire",
+			value: 38
+		},
+		{
+			source: "North West",
+			target: "South East",
+			value: 35
+		},
+		{
+			source: "East Midlands",
+			target: "North West",
+			value: 34
+		},
+		{
+			source: "North East",
+			target: "Yorkshire",
+			value: 34
+		}
+	],
+	nodes: [
+		{
+			id: "North East",
+			value: 133
+		},
+		{
+			id: "North West",
+			value: 342
+		},
+		{
+			id: "Yorkshire",
+			value: 303
+		},
+		{
+			id: "East Midlands",
+			value: 344
+		},
+		{
+			id: "West Midlands",
+			value: 332
+		},
+		{
+			id: "East",
+			value: 419
+		},
+		{
+			id: "London",
+			value: 709
+		},
+		{
+			id: "South East",
+			value: 636
+		},
+		{
+			id: "South West",
+			value: 357
+		}
+	]
+};
+//#endregion
+export { e as circularGraphDemo };

package/lib/charts/glance/circular-graph.js

@@ -0,0 +1,138 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, sansWidth as i, stagger as a } from "../util.js";
+import { DimGroup as o, HitCircle as s, TipText as c } from "../hover.js";
+import { FootNote as l } from "../plot-note.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { bundleLines as f } from "./util-b.js";
+import { circularGraphDemo as p } from "./circular-graph.data.js";
+import { LinkBundle as m } from "./link-bundle.js";
+import { useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/charts/glance/circular-graph.tsx
+var v = (e) => `${e}k moves`, y = (e) => `${e.source}→${e.target}`, b = (e, t) => t.source === e || t.target === e, x = (e, t) => {
+	let [n] = e.filter((e) => b(t, e)).toSorted((e, t) => t.value - e.value);
+	return n === void 0 ? "" : n.source === t ? n.target : n.source;
+}, S = (e, t) => e ? "stroke-ink" : t ? "stroke-l2" : "stroke-l4", C = ({ links: e, at: t, cx: n, cy: r, focus: i, hero: o }) => {
+	let s = Math.max(...e.map((e) => e.value));
+	return /* @__PURE__ */ g("g", { children: e.map((e, c) => {
+		let l = t.get(e.source), u = t.get(e.target);
+		if (l === void 0 || u === void 0) return null;
+		let d = i !== null && b(i, e);
+		return /* @__PURE__ */ g(m, {
+			className: `draw transition-tone ${S(y(e) === o, d)} ${i !== null && !d ? "opacity-30" : ""}`,
+			lines: f(e.value, s),
+			q: {
+				x: ((l.x + u.x) / 2 + n) / 2,
+				y: ((l.y + u.y) / 2 + r) / 2
+			},
+			s: l,
+			style: a(c, "mark"),
+			t: u
+		}, y(e));
+	}) });
+}, w = (e) => {
+	let t = Math.cos(e.a) > -.2;
+	return {
+		right: t,
+		x: e.x + Math.cos(e.a) * 4 + (t ? e.r + 8 : -e.r - 8)
+	};
+}, T = ({ p: e, hero: t, dim: n, onEnter: r }) => {
+	let { right: i, x: c } = w(e);
+	return /* @__PURE__ */ _(o, {
+		dim: n,
+		onPointerEnter: r,
+		children: [
+			/* @__PURE__ */ g(s, {
+				cx: e.x,
+				cy: e.y,
+				r: e.r + 8
+			}),
+			/* @__PURE__ */ g("circle", {
+				className: `pop ${t ? "fill-hero" : "fill-paper stroke-l3"}`,
+				style: a(e.i, "mark"),
+				cx: e.x,
+				cy: e.y,
+				r: t ? e.r : e.r - .75,
+				strokeWidth: t ? void 0 : 1.5
+			}),
+			/* @__PURE__ */ g(d, {
+				anchor: i ? "start" : "end",
+				dy: "0.35em",
+				muted: !t,
+				order: e.i,
+				tier: "mark",
+				voice: "label",
+				x: c,
+				y: e.y + Math.sin(e.a) * 6,
+				children: e.node.id
+			})
+		]
+	});
+}, E = (a) => {
+	let o = a.nodes ?? p.nodes, s = a.links ?? p.links, d = a.height ?? 460, f = a.format ?? v, [m, S] = h(null), E = Math.max(...o.map((e) => e.value)), D = a.highlight ?? o.find((e) => e.value === E)?.id ?? "", [O] = s.filter((e) => b(D, e)).toSorted((e, t) => t.value - e.value), k = m === null ? null : m.node.id, A = new Set(s.flatMap((e) => k !== null && b(k, e) ? [e.source, e.target] : [])), j = `Moves between ${o.length} regions: ${s.map((e) => `${e.source}–${e.target} ${f(e.value)}`).join(", ")}`;
+	return /* @__PURE__ */ g(e, {
+		overlay: m === null ? null : /* @__PURE__ */ g(t, {
+			x: m.x,
+			y: m.y - m.r - 4,
+			children: /* @__PURE__ */ g(c, {
+				facts: [f(m.node.value), `most with ${x(s, m.node.id)}`],
+				lead: m.node.id
+			})
+		}),
+		children: (e) => {
+			let t = e < 460, c = r(n(a), e - 16, 16), f = t ? 18 : 26, p = Math.min(d / 2 - f - 12, e / 2 - (t ? 70 : 96)), m = (e, t, n) => o.map((r, i) => {
+				let a = -Math.PI / 2 + i / o.length * Math.PI * 2 - Math.PI / o.length;
+				return {
+					a,
+					i,
+					node: r,
+					r: Math.max(3, f * Math.sqrt(r.value / E)),
+					x: e + t * Math.cos(a),
+					y: n + t * Math.sin(a)
+				};
+			}), h = (t) => m(e / 2, t, 0).flatMap((e) => {
+				let { right: t, x: n } = w(e), r = t ? n + i(e.node.id, 11) : n - i(e.node.id, 11);
+				return [
+					e.x - e.r,
+					e.x + e.r,
+					r
+				];
+			}), v = Math.max(...h(p)) - Math.min(...h(p)), b = Math.max(40, p - Math.max(0, v - (e - 8)) / 2), x = Math.min(d, Math.round(2 * (b + f + 12) + c)), M = (x - c) / 2, N = h(b), P = e - (Math.min(...N) + Math.max(...N)) / 2, F = m(P, b, M), I = new Map(F.map((e) => [e.node.id, e]));
+			return /* @__PURE__ */ _(u, {
+				height: x,
+				label: j,
+				leave: () => {
+					S(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ g(C, {
+						links: s,
+						at: I,
+						cx: P,
+						cy: M,
+						focus: k,
+						hero: O === void 0 ? "" : y(O)
+					}),
+					F.map((e) => /* @__PURE__ */ g(T, {
+						p: e,
+						hero: e.node.id === D,
+						dim: k !== null && k !== e.node.id && !A.has(e.node.id),
+						onEnter: () => {
+							S(e);
+						}
+					}, e.node.id)),
+					/* @__PURE__ */ g(l, {
+						height: x,
+						text: n(a),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { E as CircularGraph };

package/lib/charts/glance/control-slot.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/charts/glance/control-slot.tsx
+var t = (t) => /* @__PURE__ */ e("div", {
+	className: "flex h-11 items-center gap-1",
+	children: t.children
+});
+//#endregion
+export { t as ControlSlot };

package/lib/charts/glance/diverging-bar.data.js

@@ -0,0 +1,34 @@
+"use client";
+//#region src/charts/glance/diverging-bar.data.ts
+var e = [
+	{
+		label: "Muhammad",
+		value: 2227
+	},
+	{
+		label: "Luca",
+		value: 2099
+	},
+	{
+		label: "Arlo",
+		value: 1464
+	},
+	{
+		label: "Theodore",
+		value: 1336
+	},
+	{
+		label: "Jacob",
+		value: -3592
+	},
+	{
+		label: "Jack",
+		value: -3776
+	},
+	{
+		label: "Oliver",
+		value: -3787
+	}
+];
+//#endregion
+export { e as divergingBarDemo };

package/lib/charts/glance/diverging-bar.js

@@ -0,0 +1,154 @@
+"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 { noteOf as i, noteSpace as a, stagger as o } from "../util.js";
+import { DimGroup as s, HitRect as c, TipText as l } from "../hover.js";
+import { crisp as u } from "../axes.js";
+import { barPath as d } from "../shapes.js";
+import { FootNote as f } from "../plot-note.js";
+import { VGrid as p, VRule as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { paint as _, useTextureIds as v } from "../texture-ids.js";
+import { Hatch as y, Stipple as b } from "../texture.js";
+import { labelRoom as x } from "./util-a.js";
+import { divergingBarDemo as S } from "./diverging-bar.data.js";
+import { scaleBand as C, scaleLinear as w } from "d3-scale";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/charts/glance/diverging-bar.tsx
+var D = (e) => {
+	let [, t] = w().domain([0, e]).ticks(4);
+	return t ?? 1;
+}, O = (e) => {
+	let t = e.d.value >= 0, { onPointerEnter: n } = e;
+	return /* @__PURE__ */ E(s, {
+		dim: e.dim,
+		onPointerEnter: n,
+		children: [
+			/* @__PURE__ */ T(c, {
+				x: 0,
+				y: e.cy - e.band / 2,
+				width: e.width,
+				height: e.band
+			}),
+			/* @__PURE__ */ T(g, {
+				anchor: "end",
+				dy: "0.35em",
+				muted: !e.hero,
+				voice: "label",
+				x: e.labelW,
+				y: e.cy,
+				children: e.d.label
+			}),
+			/* @__PURE__ */ T("path", {
+				className: `grow-x ${t ? "" : "from-right"} ${e.fill.className}`,
+				style: o(e.i, "series"),
+				d: e.fill.pattern === void 0 ? d(Math.min(e.zero, e.x1), e.cy - e.bh / 2, Math.abs(e.x1 - e.zero), e.bh, t ? "right" : "left") : d(u(Math.min(e.zero, e.x1)), u(e.cy - e.bh / 2), Math.round(Math.abs(e.x1 - e.zero)), Math.round(e.bh) - 1, t ? "right" : "left"),
+				fill: e.fill.pattern,
+				strokeWidth: 1
+			}),
+			/* @__PURE__ */ T(g, {
+				anchor: t ? "start" : "end",
+				dy: "0.35em",
+				muted: !e.hero,
+				order: e.i + 3,
+				tier: "series",
+				voice: "value",
+				x: t ? e.x1 + 8 : e.x1 - 8,
+				y: e.cy,
+				children: e.text
+			})
+		]
+	});
+}, k = (t) => t === 0 ? "0" : `${t > 0 ? "+" : "−"}${e(Math.abs(t))}`, A = (e) => {
+	let t = [Math.floor(e.lo / e.step) * e.step - (e.lo < 0 ? e.step * .5 : 0), Math.ceil(e.hi / e.step) * e.step], n = e.m.left + (e.lo < 0 ? 28 : 0), r = e.width - 4 - 8 - e.valueW, i = e.hi > 0 ? Math.min(e.width - 4, n + (r - n) * (t[1] - t[0]) / (e.hi - t[0])) : e.width - e.m.right;
+	return w().domain(t).range([n, i]);
+}, j = ([e, t], n) => {
+	let r = Math.ceil(e / n) * n;
+	return Array.from({ length: Math.floor((t - r) / n) + 1 }, (e, t) => r + t * n).filter((e) => e !== 0);
+}, M = (e, t, n, r) => t ? { className: "fill-hero" } : e ? {
+	className: "stroke-l5 shape-crisp",
+	pattern: _(r("hatch"))
+} : n ? { className: "fill-alert" } : {
+	className: "stroke-l5 shape-crisp",
+	pattern: _(r("dots"))
+}, N = (e) => {
+	let o = e.data ?? S, s = e.height ?? 340, c = e.format ?? k, d = t(), g = o.map((e) => `${e.label} ${c(e.value)}`).join(", "), _ = Math.min(0, ...o.map((e) => e.value)), w = Math.max(0, ...o.map((e) => e.value)), N = D(Math.max(-_, w)), P = v("net"), F = e.highlight ?? o.findIndex((e) => e.value === w && w > 0);
+	return /* @__PURE__ */ T(n, {
+		overlay: d.at === null ? null : /* @__PURE__ */ T(r, {
+			x: d.at.x,
+			y: d.at.y,
+			children: /* @__PURE__ */ T(l, {
+				facts: [c(o[d.at.key].value)],
+				lead: o[d.at.key].label
+			})
+		}),
+		children: (t) => {
+			let n = t < 460, r = x(o.map((e) => e.label), "t-label") + 4, l = x(o.map((e) => c(e.value)), "t-value"), v = {
+				bottom: 4 + a(i(e), t - 16, 24),
+				left: r + 16,
+				right: 40,
+				top: 4
+			}, S = A({
+				hi: w,
+				lo: _,
+				m: v,
+				step: N,
+				valueW: l,
+				width: t
+			}), D = C().domain(o.map((e, t) => t)).range([v.top, s - v.bottom]).paddingInner(.64).paddingOuter(.32), k = u(S(0)), I = j(S.domain(), N * (n ? 2 : 1));
+			return /* @__PURE__ */ E(h, {
+				height: s,
+				label: g,
+				leave: d.clear,
+				width: t,
+				children: [
+					/* @__PURE__ */ E("defs", { children: [/* @__PURE__ */ T(y, {
+						id: P("hatch"),
+						tone: "fill-l3"
+					}), /* @__PURE__ */ T(b, {
+						id: P("dots"),
+						tone: "fill-l3"
+					})] }),
+					/* @__PURE__ */ T(p, {
+						xs: I.map((e) => S(e)),
+						y0: v.top,
+						y1: s - v.bottom
+					}),
+					o.map((n, i) => {
+						let a = (D(i) ?? 0) + D.bandwidth() / 2, o = Math.min(D.bandwidth(), 22);
+						return /* @__PURE__ */ T(O, {
+							d: n,
+							i,
+							cy: a,
+							zero: k,
+							x1: S(n.value),
+							bh: o,
+							fill: M(n.value >= 0, F === i, e.alertLosses === !0, P),
+							hero: F === i,
+							labelW: r,
+							width: t,
+							band: D.step(),
+							dim: d.dim(i),
+							text: c(n.value),
+							onPointerEnter: d.enter(i, S(n.value), a - o / 2 - 2)
+						}, n.label);
+					}),
+					/* @__PURE__ */ T(m, {
+						x: S(0),
+						y0: v.top,
+						y1: s - v.bottom
+					}),
+					/* @__PURE__ */ T(f, {
+						height: s,
+						text: i(e),
+						width: t
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { N as DivergingBar };

package/lib/charts/glance/dot-waffle.data.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/charts/glance/dot-waffle.data.ts
+var e = [
+	{
+		label: "Rose family",
+		value: 23.6
+	},
+	{
+		label: "Cabbage family",
+		value: 20.5
+	},
+	{
+		label: "Pea family",
+		value: 16.1
+	},
+	{
+		label: "Borage family",
+		value: 7.9
+	},
+	{
+		label: "Everything else",
+		value: 31.9
+	}
+];
+//#endregion
+export { e as dotWaffleDemo };

package/lib/charts/glance/dot-waffle.js

@@ -0,0 +1,179 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { dimClass as r, noteOf as i, noteSpace as a, ranks as o, stagger as s } from "../util.js";
+import { DimGroup as c, HitRect as l, TipText as u } from "../hover.js";
+import { KEY as d } from "../marks.js";
+import { FootNote as f } from "../plot-note.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { paint as h, useTextureIds as g } from "../texture-ids.js";
+import { CrossHatch as _, Hatch as v, KeySwatch as y, Rules as b, Stipple as x } from "../texture.js";
+import { labelRoom as S } from "./util-a.js";
+import { dotWaffleDemo as C } from "./dot-waffle.data.js";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/charts/glance/dot-waffle.tsx
+var E = 28, D = d.swatch, O = [
+	"cross",
+	"hatch",
+	"rule",
+	"dots"
+], k = (e, t) => {
+	if (e === 0) return {
+		className: "fill-hero",
+		outlined: !1
+	};
+	let n = O.at(e - 1);
+	return n === void 0 ? {
+		className: "stroke-l5 fill-paper",
+		outlined: !0
+	} : {
+		className: "stroke-l5",
+		fill: h(t(n)),
+		outlined: !0
+	};
+}, A = (e, t) => {
+	let n = o(e), r = t ?? n.indexOf(0);
+	return n.map((e, t) => t === r ? 0 : e < n[r] ? e + 1 : e);
+}, j = (e, t) => {
+	let n = e.reduce((e, t) => e + t, 0), r = e.map((e) => n > 0 ? e / n * t : 0), i = r.map((e) => Math.floor(e)), a = t - i.reduce((e, t) => e + t, 0), o = r.map((e, t) => ({
+		i: t,
+		r: e - Math.floor(e)
+	})).toSorted((e, t) => t.r - e.r);
+	for (let e = 0; e < a; e += 1) i[o[e % o.length].i] += 1;
+	return i;
+}, M = (e) => `${e}%`, N = (e, t) => Math.max(130, D + d.gap + S(e.map((e) => e.label), "t-label") + 16 + S(e.map((e) => t(e.value)), "t-value") + 8), P = (e) => /* @__PURE__ */ w("g", { children: e.data.map((t, n) => {
+	let { x: r, y: i } = e.at(n);
+	return /* @__PURE__ */ w(c, {
+		dim: e.dim(n),
+		onPointerEnter: () => {
+			e.onEnter(n, r + e.hitWidth / 2, i - 10);
+		},
+		children: /* @__PURE__ */ T("g", {
+			className: "fade",
+			style: s(n + 6, "series"),
+			children: [
+				/* @__PURE__ */ w(l, {
+					x: r,
+					y: i - E / 2,
+					width: e.hitWidth,
+					height: E
+				}),
+				/* @__PURE__ */ w(y, {
+					fill: e.looks[n].fill,
+					tone: e.looks[n].fill === void 0 ? e.looks[n].className : void 0,
+					x: r,
+					y: i - D / 2
+				}),
+				/* @__PURE__ */ w(m, {
+					dy: "0.35em",
+					voice: "label",
+					x: r + D + d.gap,
+					y: i,
+					children: t.label
+				}),
+				/* @__PURE__ */ w(m, {
+					anchor: "end",
+					dy: "0.35em",
+					voice: "value",
+					x: r + e.hitWidth - e.inset,
+					y: i,
+					children: e.format(t.value)
+				})
+			]
+		})
+	}, t.label);
+}) }), F = ({ dim: e, dots: t, looks: n, onEnter: i, side: a }) => /* @__PURE__ */ w("g", { children: t.map((t) => {
+	let o = n[t.owner], c = o.outlined ? .5 : 0;
+	return /* @__PURE__ */ w("rect", {
+		className: `pop ${o.className} ${r(e(t.owner))}`,
+		style: s(t.order, "dense"),
+		x: Math.round(t.cx - a / 2) + c,
+		y: Math.round(t.cy - a / 2) + c,
+		width: a - c * 2,
+		height: a - c * 2,
+		rx: 2,
+		fill: o.fill,
+		strokeWidth: 1,
+		onPointerEnter: () => {
+			i(t.owner, t.cx, t.cy - a / 2 - 2);
+		}
+	}, t.id);
+}) }), I = (r) => {
+	let o = r.data ?? C, s = r.height ?? 340, c = r.format ?? M, l = e(), d = l.show, m = g("waffle"), h = A(o.map((e) => e.value), r.highlight).map((e) => k(e, m)), y = j(o.map((e) => e.value), 100).flatMap((e, t) => Array.from({ length: e }, () => t)), S = `Share of the pollen in honey, one square for each per cent: ${o.map((e) => `${e.label} ${c(e.value)}`).join(", ")}`;
+	return /* @__PURE__ */ w(t, {
+		overlay: l.at === null ? null : /* @__PURE__ */ w(n, {
+			x: l.at.x,
+			y: l.at.y,
+			children: /* @__PURE__ */ w(u, {
+				facts: [c(o[l.at.key].value)],
+				lead: o[l.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = e < 460, n = t ? 0 : N(o, c), u = t ? 0 : n + 20, g = a(i(r), e - 16, 22), C = t ? Math.ceil(o.length / 2) : 0, D = Math.min(s - 8 - g - C * E, e - u - 16, 300) / 10, O = Math.round(D * .74), k = D * 10, A = (e - k - u) / 2, j = t ? k + 20 + C * E + g : s, M = Math.min(E, (k - 8) / o.length), I = y.map((e, t) => ({
+				cx: A + (t % 10 + .5) * D,
+				cy: 4 + (Math.floor(t / 10) + .5) * D,
+				id: `dot-${t}`,
+				order: t,
+				owner: e
+			}));
+			return /* @__PURE__ */ T(p, {
+				height: j,
+				label: S,
+				leave: l.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ T("defs", { children: [
+						/* @__PURE__ */ w(_, {
+							id: m("cross"),
+							tone: "fill-l2"
+						}),
+						/* @__PURE__ */ w(v, {
+							id: m("hatch"),
+							tone: "fill-l3"
+						}),
+						/* @__PURE__ */ w(b, {
+							id: m("rule"),
+							tone: "fill-l3"
+						}),
+						/* @__PURE__ */ w(x, {
+							id: m("dots"),
+							tone: "fill-l3"
+						})
+					] }),
+					/* @__PURE__ */ w(F, {
+						dim: l.dim,
+						dots: I,
+						looks: h,
+						onEnter: d,
+						side: O
+					}),
+					/* @__PURE__ */ w(P, {
+						data: o,
+						looks: h,
+						dim: l.dim,
+						format: c,
+						at: (n) => t ? {
+							x: n % 2 * ((e + 16) / 2),
+							y: k + 26 + Math.floor(n / 2) * E
+						} : {
+							x: A + k + 28,
+							y: 4 + D * .5 + n * M
+						},
+						hitWidth: t ? (e - 16) / 2 : n,
+						inset: t ? 0 : 8,
+						onEnter: d
+					}),
+					/* @__PURE__ */ w(f, {
+						height: j,
+						text: i(r),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { I as DotWaffle };

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

@@ -0,0 +1,9 @@
+"use client";
+import e from "./draw-in.goals.json.js";
+//#region src/charts/glance/draw-in.data.ts
+var t = Date.UTC(2024, 7, 16), n = 864e5, r = 0, i = e.map((e, i) => (r += e, {
+	date: new Date(t + i * n),
+	value: r
+}));
+//#endregion
+export { i as drawInDemo };