@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/forms/brushed-overview.data.js

@@ -0,0 +1,374 @@
+"use client";
+//#region src/charts/forms/brushed-overview.data.ts
+var e = Date.UTC(2022, 0, 1), t = [
+	14.5,
+	11.3,
+	10.1,
+	4.5,
+	5.8,
+	6.4,
+	6.7,
+	9.3,
+	7.8,
+	9.2,
+	9.5,
+	8,
+	7.7,
+	5,
+	5.6,
+	8.7,
+	8.6,
+	7.1,
+	9,
+	5.3,
+	5.5,
+	6.9,
+	5.3,
+	4.4,
+	5.1,
+	9.3,
+	11.6,
+	11,
+	12.9,
+	8.4,
+	9.5,
+	12.8,
+	11.4,
+	10.6,
+	7.4,
+	9.3,
+	9.3,
+	10.8,
+	11.8,
+	10.7,
+	7.6,
+	8.1,
+	9.2,
+	9.7,
+	8.3,
+	12.1,
+	15,
+	10.4,
+	8.2,
+	10.7,
+	12.2,
+	10.8,
+	11.9,
+	10.1,
+	6.6,
+	10.5,
+	10.4,
+	10.9,
+	10.9,
+	8.4,
+	7.3,
+	9.8,
+	8.6,
+	8,
+	8.1,
+	7.5,
+	11.2,
+	12.6,
+	14.5,
+	12.2,
+	12.4,
+	12.3,
+	12.8,
+	14,
+	10.7,
+	13,
+	15.3,
+	14.5,
+	11,
+	14.1,
+	18.1,
+	18.6,
+	18.2,
+	17.7,
+	18.1,
+	14.7,
+	15.4,
+	10.1,
+	8,
+	6.9,
+	8.3,
+	9.5,
+	10,
+	13.2,
+	12.6,
+	12.2,
+	10.7,
+	10.8,
+	11,
+	12.4,
+	15.7,
+	15,
+	16.3,
+	16.8,
+	20,
+	19.5,
+	18.9,
+	15,
+	14.3,
+	17,
+	17.4,
+	16,
+	15.9,
+	16.3,
+	13.9,
+	14.5,
+	11,
+	11.4,
+	12.8,
+	16.2,
+	12.8,
+	15.2,
+	14.7,
+	15.6,
+	18.2,
+	17.9,
+	17.9,
+	18,
+	19.4,
+	18.2,
+	15.5,
+	16.3,
+	17.9,
+	20.7,
+	19.2,
+	20.4,
+	22.7,
+	20.4,
+	18.8,
+	17.3,
+	18.2,
+	20.6,
+	16.6,
+	16,
+	17.4,
+	17.8,
+	16.9,
+	17,
+	14.4,
+	13.8,
+	14.6,
+	16.9,
+	19.4,
+	20,
+	16.5,
+	12.8,
+	16.3,
+	20.5,
+	19.2,
+	18.3,
+	21,
+	19.9,
+	18.3,
+	18.2,
+	21,
+	23.6,
+	25.7,
+	28.2,
+	16.6,
+	17.6,
+	19.7,
+	23.2,
+	24.1,
+	24.2,
+	20.4,
+	19.8,
+	19.5,
+	17.7,
+	18.6,
+	19.4,
+	19,
+	19.1,
+	19,
+	19.3,
+	19.2,
+	20,
+	21.5,
+	21.4,
+	23.8,
+	23.2,
+	26.4,
+	29,
+	26.4,
+	23.1,
+	21.2,
+	22.4,
+	25,
+	30,
+	34.8,
+	37.3,
+	22.4,
+	20.9,
+	20.9,
+	22.9,
+	25.4,
+	20.7,
+	19.9,
+	21.9,
+	20.5,
+	23.9,
+	21.5,
+	23.7,
+	24.4,
+	24.4,
+	24.1,
+	20.8,
+	20.3,
+	21.5,
+	23.7,
+	25.7,
+	27.4,
+	28.9,
+	30.9,
+	31.4,
+	31.4,
+	31.7,
+	25.9,
+	22.8,
+	20.9,
+	22.9,
+	21.8,
+	23.1,
+	22.2,
+	21.7,
+	23.8,
+	23.2,
+	19.3,
+	21.9,
+	23.5,
+	23,
+	20.6,
+	21.4,
+	22.4,
+	22.7,
+	21.9,
+	22.1,
+	23.3,
+	23,
+	21,
+	21.5,
+	19,
+	20.1,
+	20.1,
+	21.8,
+	22.1,
+	18.7,
+	19,
+	17,
+	15.7,
+	16.2,
+	17.3,
+	17,
+	18.4,
+	18.9,
+	18.5,
+	18,
+	17.5,
+	15.1,
+	14.5,
+	14.4,
+	14.2,
+	16.7,
+	14.8,
+	17.8,
+	16.9,
+	17,
+	17.5,
+	16.6,
+	17.7,
+	16.8,
+	15.6,
+	16.9,
+	14.6,
+	14.8,
+	14.9,
+	16.2,
+	14.9,
+	15.1,
+	15.6,
+	17.2,
+	16.6,
+	15.3,
+	15.1,
+	17,
+	16.8,
+	17.2,
+	15.7,
+	16.7,
+	17.7,
+	18.4,
+	17,
+	19.6,
+	16.3,
+	15.8,
+	14.3,
+	13.5,
+	12.2,
+	12,
+	12.7,
+	12.2,
+	14.2,
+	13.9,
+	13.7,
+	15,
+	15.8,
+	15.1,
+	14.5,
+	13.3,
+	12.2,
+	11.1,
+	10.4,
+	11,
+	10.6,
+	10.8,
+	8.2,
+	9.6,
+	11.1,
+	11.3,
+	11.5,
+	12.1,
+	11.3,
+	10.6,
+	5,
+	6.8,
+	5.9,
+	5.9,
+	7.3,
+	5.8,
+	7.2,
+	6,
+	4.5,
+	3,
+	3.5,
+	3.2,
+	.7,
+	.1,
+	-.4,
+	.4,
+	.5,
+	2.8,
+	4,
+	13,
+	13.5,
+	9.8,
+	9.4,
+	9,
+	10.2,
+	9.9,
+	10.6,
+	7.4,
+	9.9,
+	11.1,
+	8.8,
+	11.8,
+	11.3
+].map((t, n) => ({
+	date: new Date(e + n * 864e5),
+	value: t
+}));
+//#endregion
+export { t as activeDaysDemo };

package/lib/charts/forms/brushed-overview.js

@@ -0,0 +1,162 @@
+"use client";
+import { dayTickLabels as e, fmtDegC as t, monthTickLabels as n } from "../../lib/format.js";
+import { useHover as r } from "../hooks.js";
+import { Plot as i, Tooltip as a } from "../core.js";
+import { clamp as o, weeklyMean as s } from "../util.js";
+import { TipText as c } from "../hover.js";
+import { crisp as l } from "../axes.js";
+import { Dot as u } from "../markers.js";
+import { HRule as d, Stem as f } from "../rules.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 { ValueGrid as _ } from "../value-grid.js";
+import { BrushStrip as v } from "./brush-strip.js";
+import { activeDaysDemo as y } from "./brushed-overview.data.js";
+import { useState as b } from "react";
+import { scaleLinear as x, scaleUtc as S } from "d3-scale";
+import { utcFormat as C } from "d3-time-format";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { curveMonotoneX as E, line as D } from "d3-shape";
+//#region src/charts/forms/brushed-overview.tsx
+var O = C("%a %-d %b"), k = (e) => {
+	let t = Math.abs(e).toFixed(1);
+	return `${e < 0 && t !== "0.0" ? "−" : "+"}${t} °C`;
+}, A = (e) => t(e).replace(".0 °C", " °C"), j = 31, M = 0, N = 40, P = 360, F = (t) => t.every((e) => e.getUTCDate() === 1) ? n(t) : e(t), I = (e) => {
+	let t = S().domain([e.data[e.span.a].date, e.data[e.span.b].date]).range([e.x0, e.x1]), n = t.ticks(Math.max(2, Math.floor((e.x1 - e.x0) / 90))).filter((n) => t(n) > e.x0 + 18 && t(n) < e.x1 - 18), r = F(n);
+	return /* @__PURE__ */ w("g", { children: n.map((n, i) => /* @__PURE__ */ w(m, {
+		anchor: "middle",
+		voice: "axis",
+		x: t(n),
+		y: e.floor + 22,
+		children: r[i]
+	}, n.toISOString())) });
+}, L = (e, t) => e ? "stroke-ink" : t ? "stroke-l1" : "stroke-l4", R = (e) => /* @__PURE__ */ w("g", {
+	className: "fade",
+	children: e.data.slice(e.span.a, e.span.b + 1).map((t, n) => {
+		let r = e.span.a + n, i = r === e.peak;
+		return /* @__PURE__ */ w(f, {
+			className: `transition-tone ${L(i, e.hover === r)}`,
+			hero: i,
+			x: e.x(r),
+			y0: e.y(e.mean[r]),
+			y1: e.y(t.value)
+		}, t.date.toISOString());
+	})
+}), z = (e) => {
+	let n = g("detail"), { a: r, b: i } = e.span, a = e.data.slice(r, i + 1).map((e) => e.value), s = e.mean.slice(r, i + 1), c = r + a.indexOf(Math.max(...a)), f = e.width - N, v = x().domain([r, i]).range([M, f]), y = x().domain([Math.min(...a, ...s), Math.max(...a, ...s)]).nice(4).range([318, 28]), b = D().x((e, t) => v(r + t)).y((e) => y(e)).curve(E)(s) ?? "", S = (t) => {
+		let n = t.clientX - t.currentTarget.getBoundingClientRect().left, a = o(Math.round(v.invert(n)), r, i), s = Math.min(y(e.data[a].value), y(e.mean[a]));
+		e.hover.show(a, v(a), s - 6);
+	}, C = `Daily maximum temperature, ${O(e.data[r].date)} to ${O(e.data[i].date)}, with the 7-day average: hottest ${t(e.data[c].value)} on ${O(e.data[c].date)}`;
+	return /* @__PURE__ */ T(p, {
+		className: "touch-pan-y",
+		height: P,
+		label: C,
+		leave: e.hover.clear,
+		onPointerMove: S,
+		width: e.width,
+		children: [
+			/* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w("clipPath", {
+				id: n("plot"),
+				children: /* @__PURE__ */ w("rect", {
+					height: P,
+					width: f - M + 8,
+					x: -4,
+					y: 0
+				})
+			}) }),
+			/* @__PURE__ */ w(_, {
+				floor: 326,
+				ticks: y.ticks(4),
+				format: A,
+				side: "right",
+				x0: M,
+				x1: e.width,
+				y
+			}),
+			/* @__PURE__ */ w(d, {
+				x0: M,
+				x1: e.width,
+				y: 326
+			}),
+			/* @__PURE__ */ w(I, {
+				data: e.data,
+				floor: 326,
+				span: e.span,
+				x0: M,
+				x1: f
+			}),
+			/* @__PURE__ */ w(R, {
+				data: e.data,
+				hover: e.hover.key,
+				mean: e.mean,
+				peak: c,
+				span: e.span,
+				x: v,
+				y
+			}),
+			/* @__PURE__ */ w("path", {
+				className: "draw stroke-l2 stroke-medium cap-round fill-none",
+				clipPath: h(n("plot")),
+				d: b,
+				pathLength: 1
+			}),
+			e.hover.key === null || e.hover.key === c ? null : /* @__PURE__ */ w(u, {
+				className: "fill-l2",
+				cx: l(v(e.hover.key)),
+				cy: y(e.data[e.hover.key].value),
+				size: "sm"
+			}),
+			/* @__PURE__ */ w(u, {
+				className: "pop fill-hero",
+				cx: Math.round(v(c)),
+				cy: y(e.data[c].value),
+				size: "md"
+			}),
+			/* @__PURE__ */ w(m, {
+				anchor: "middle",
+				className: "fade",
+				halo: !0,
+				voice: "value",
+				x: o(v(c), 16, f - 16),
+				y: y(e.data[c].value) - 10,
+				children: t(e.data[c].value)
+			})
+		]
+	});
+}, B = (e) => {
+	let n = e.data ?? y, l = s(n.map((e) => e.value), "trailing"), u = n.length - 1, d = Math.max(...n.map((e) => e.value)), f = n.findIndex((e) => e.value === d), [p, m] = b({
+		a: o(f - j, 0, u),
+		b: o(f + j, 0, u)
+	}), h = r();
+	return /* @__PURE__ */ w(i, {
+		overlay: h.at === null ? null : /* @__PURE__ */ w(a, {
+			x: h.at.x,
+			y: h.at.y,
+			children: /* @__PURE__ */ w(c, {
+				facts: [t(n[h.at.key].value), `${k(n[h.at.key].value - l[h.at.key])} vs 7-day average`],
+				lead: O(n[h.at.key].date)
+			})
+		}),
+		children: (e) => /* @__PURE__ */ T("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ w(z, {
+				data: n,
+				hover: h,
+				mean: l,
+				span: p,
+				width: e
+			}), /* @__PURE__ */ w(v, {
+				data: n,
+				mean: l,
+				onChange: m,
+				span: p,
+				width: e,
+				x0: M,
+				x1: e - N
+			})]
+		})
+	});
+};
+//#endregion
+export { B as BrushedOverview };

package/lib/charts/forms/chord-ring.data.js

@@ -0,0 +1,140 @@
+"use client";
+//#region src/charts/forms/chord-ring.data.ts
+var e = {
+	matrix: [
+		[
+			0,
+			0,
+			0,
+			0,
+			0,
+			27540,
+			13915,
+			7521,
+			5129,
+			1211
+		],
+		[
+			0,
+			0,
+			0,
+			0,
+			0,
+			17780,
+			4623,
+			3799,
+			3763,
+			1497
+		],
+		[
+			0,
+			0,
+			0,
+			0,
+			0,
+			7331,
+			3923,
+			2776,
+			1676,
+			9212
+		],
+		[
+			0,
+			0,
+			0,
+			0,
+			0,
+			5817,
+			4568,
+			2940,
+			2929,
+			3675
+		],
+		[
+			0,
+			0,
+			0,
+			0,
+			0,
+			10206,
+			4361,
+			3215,
+			1783,
+			1122
+		],
+		[
+			27540,
+			17780,
+			7331,
+			5817,
+			10206,
+			0,
+			0,
+			0,
+			0,
+			0
+		],
+		[
+			13915,
+			4623,
+			3923,
+			4568,
+			4361,
+			0,
+			0,
+			0,
+			0,
+			0
+		],
+		[
+			7521,
+			3799,
+			2776,
+			2940,
+			3215,
+			0,
+			0,
+			0,
+			0,
+			0
+		],
+		[
+			5129,
+			3763,
+			1676,
+			2929,
+			1783,
+			0,
+			0,
+			0,
+			0,
+			0
+		],
+		[
+			1211,
+			1497,
+			9212,
+			3675,
+			1122,
+			0,
+			0,
+			0,
+			0,
+			0
+		]
+	],
+	teams: [
+		"United States",
+		"Germany",
+		"Netherlands",
+		"Ireland",
+		"France",
+		"Machinery",
+		"Chemicals",
+		"Manufactures",
+		"Materials",
+		"Fuels"
+	]
+};
+//#endregion
+export { e as sharedWorkDemo };