@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/lupi/brand-spectrum.js

@@ -0,0 +1,233 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { clamp as n, dimClass as r, noteOf as i, noteSpace as a, sansWidth as o, stagger as s, sum as c } from "../util.js";
+import { DimGroup as l, HitCircle as u, TipText as d } from "../hover.js";
+import { crisp as f } from "../axes.js";
+import { KEY as p, TICK as m } from "../marks.js";
+import { Dot as h, Ring as g } from "../markers.js";
+import { FootNote as _ } from "../plot-note.js";
+import { HRule as v, Stem as y } from "../rules.js";
+import { ChartSvg as b } from "../svg.js";
+import { Label as x } from "../text.js";
+import { paint as S, useTextureIds as C } from "../texture-ids.js";
+import { EngravedRect as w, Hatch as T, KeySwatch as E } from "../texture.js";
+import { brandSpectrumCompetitors as D, brandSpectrumDemo as O } from "./brand-spectrum.data.js";
+import { useState as k } from "react";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+//#region src/charts/lupi/brand-spectrum.tsx
+var M = (e, t) => t >= .5 ? `${Math.round(t * 100)}% toward ${e.right}` : `${Math.round((1 - t) * 100)}% toward ${e.left}`, N = 7, P = 3, F = (e, t) => {
+	let r = e < 520, i = r ? 0 : n(e * .2, 96, 140), a = r ? e - 28 : Math.min(e - i * 2 - 60, 420), s = Math.floor(a / 6) * 6, c = Math.max(0, ...t.map((e) => o(e.left, 11))), l = Math.max(0, ...t.map((e) => o(e.right, 11))), u = Math.round((e - s + (r ? 0 : c - l)) / 2);
+	return {
+		narrow: r,
+		x0: u,
+		x1: u + s
+	};
+}, I = (e) => {
+	let t = (e.x1 - e.x0) / 6, n = Math.floor(e.y);
+	return /* @__PURE__ */ A("g", {
+		className: "fade stroke-l4",
+		children: Array.from({ length: N }, (r, i) => {
+			let a = i === 0 || i === 6 || i * 2 == 6 ? m.lg : m.md, o = Math.floor(n + .5 - a / 2), s = e.x0 + t * i;
+			return /* @__PURE__ */ A(y, {
+				x: s,
+				y0: o,
+				y1: o + a
+			}, `stop-${f(s)}`);
+		})
+	});
+}, L = (e, t, r, i) => {
+	let a = 44 + (e.narrow ? 14 : 0), o = n((t - a - i) / Math.max(1, r - 1), 56, 90);
+	return {
+		...e,
+		height: Math.round(a + (r - 1) * o + i),
+		rowY: (e) => a + e * o
+	};
+}, R = ({ fill: e, from: t, lit: n, r: i, to: a, y: o }) => {
+	let c = Math.round(Math.min(t, a)), l = Math.round(Math.max(t, a));
+	return /* @__PURE__ */ A("g", {
+		className: r(!n),
+		children: /* @__PURE__ */ A(w, {
+			className: "grow-x stroke-l5",
+			fill: S(e),
+			height: 7,
+			style: s(i, "series"),
+			width: l - c + 1,
+			x: c,
+			y: Math.floor(o) - P
+		})
+	});
+}, z = ({ gap: e, hover: t, layout: r, onHover: i, r: a, row: o }) => {
+	let { narrow: d, rowY: p, x0: m, x1: _ } = r, y = f(p(a)), b = (e) => m + (_ - m) * n(e, 0, 1), S = (e) => t === null || t.series === e, C = d ? y - 16 : y, w = [...o.others.map((e, t) => ({
+		id: `${o.left}-c${t}`,
+		series: t + 1,
+		v: e
+	})), {
+		id: `${o.left}-us`,
+		series: 0,
+		v: o.us
+	}];
+	return /* @__PURE__ */ j("g", { children: [
+		/* @__PURE__ */ A(v, {
+			className: "grow-x",
+			kind: "rule",
+			style: s(a, "series"),
+			x0: m,
+			x1: _,
+			y: p(a)
+		}),
+		/* @__PURE__ */ A(I, {
+			x0: m,
+			x1: _,
+			y
+		}),
+		/* @__PURE__ */ A(R, {
+			fill: e,
+			lit: t === null,
+			r: a,
+			to: b(c(o.others) / Math.max(1, o.others.length)),
+			from: b(o.us),
+			y
+		}),
+		/* @__PURE__ */ A(x, {
+			anchor: d ? "start" : "end",
+			middle: !0,
+			muted: !0,
+			voice: "label",
+			x: d ? m : m - 30,
+			y: C,
+			children: o.left
+		}),
+		/* @__PURE__ */ A(x, {
+			anchor: d ? "end" : "start",
+			middle: !0,
+			muted: !0,
+			voice: "label",
+			x: d ? _ : _ + 30,
+			y: C,
+			children: o.right
+		}),
+		w.map((e) => {
+			let t = e.series === 0, n = b(e.v);
+			return /* @__PURE__ */ j(l, {
+				dim: !S(e.series),
+				onPointerEnter: () => {
+					i({
+						row: a,
+						series: e.series,
+						x: n,
+						y: y - (t ? 14 : 8)
+					});
+				},
+				children: [/* @__PURE__ */ A(u, {
+					cx: n,
+					cy: y,
+					r: t ? 12 : 7
+				}), t ? /* @__PURE__ */ A(h, {
+					className: "pop fill-hero",
+					cx: n,
+					cy: y,
+					size: "md",
+					style: s(a * 4, "mark")
+				}) : /* @__PURE__ */ A(g, {
+					className: "pop stroke-l5",
+					cx: n,
+					cy: y,
+					size: "sm",
+					style: s(a * 4 + e.series, "mark")
+				})]
+			}, e.id);
+		})
+	] });
+}, B = (e) => p.swatch + p.gap + o(e, 12) + p.entryGap, V = 20, H = (e, t, n, r) => {
+	let i = [
+		{
+			name: t,
+			tone: "fill-hero"
+		},
+		{
+			name: "Others",
+			tone: "fill-paper"
+		},
+		{
+			fill: S(e),
+			name: n
+		}
+	], a = 0, o = 0;
+	return i.map((e) => {
+		let t = B(e.name);
+		a > 0 && a + t - p.entryGap > r && (a = 0, o += 1);
+		let n = {
+			...e,
+			dx: a,
+			line: o
+		};
+		return a += t, n;
+	});
+}, U = (e) => /* @__PURE__ */ A("g", {
+	className: "fade",
+	children: e.entries.map((t) => /* @__PURE__ */ j("g", { children: [/* @__PURE__ */ A(E, {
+		fill: t.fill,
+		tone: t.tone,
+		x: e.x + t.dx,
+		y: e.y - 9 + t.line * V
+	}), /* @__PURE__ */ A(x, {
+		muted: !0,
+		voice: "label",
+		x: e.x + t.dx + p.swatch + p.gap,
+		y: e.y + t.line * V,
+		children: t.name
+	})] }, t.name))
+}), W = (n) => {
+	let r = n.data ?? O, o = n.competitors ?? D, s = n.us ?? "Ben Nevis", c = n.gapLabel ?? "Gap to their mean", l = n.describe ?? M, u = n.height ?? 440, [f, p] = k(null), m = C("brand")("gap");
+	return /* @__PURE__ */ A(e, {
+		overlay: f === null ? null : /* @__PURE__ */ A(t, {
+			x: f.x,
+			y: f.y,
+			children: /* @__PURE__ */ A(d, {
+				facts: [((e) => {
+					let t = r[e.row];
+					return l(t, e.series === 0 ? t.us : t.others.at(e.series - 1) ?? .5);
+				})(f)],
+				lead: ((e) => e === 0 ? s : o.at(e - 1) ?? `Other ${e}`)(f.series)
+			})
+		}),
+		children: (e) => {
+			let t = F(e, r), o = H(m, s, c, e - t.x0 - 8), d = 64 + (o.at(-1)?.line ?? 0) * V + a(i(n), e - 16, 18), h = L(t, u, r.length, d), g = h.rowY(r.length - 1) + 54;
+			return /* @__PURE__ */ j(b, {
+				height: h.height,
+				label: `Positions between opposing poles: ${r.map((e) => `${s} ${l(e, e.us)}`).join("; ")}`,
+				leave: () => {
+					p(null);
+				},
+				title: n.title ?? "Where one hill sits between opposing poles, against others",
+				width: e,
+				children: [
+					/* @__PURE__ */ A("defs", { children: /* @__PURE__ */ A(T, {
+						id: m,
+						tone: "fill-l4"
+					}) }),
+					r.map((e, t) => /* @__PURE__ */ A(z, {
+						gap: m,
+						hover: f,
+						layout: h,
+						onHover: p,
+						r: t,
+						row: e
+					}, e.left)),
+					/* @__PURE__ */ A(U, {
+						entries: o,
+						x: t.x0,
+						y: g
+					}),
+					/* @__PURE__ */ A(_, {
+						height: h.height,
+						text: i(n),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { W as BrandSpectrum };