@lilt-ui/charts 0.2.0 → 0.4.0

package/dist/watch.js

@@ -0,0 +1,628 @@
+"use client";
+import { S as e, a as t, i as n, l as r, n as i, o as a, r as o, s, t as c, y as l } from "./report-context-Cz0AYdV2.js";
+import { Children as u, createContext as d, isValidElement as f, useCallback as p, useContext as m, useEffect as h, useMemo as g, useReducer as ee, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { AnimatePresence as S, motion as te } from "motion/react";
+import { createPortal as C } from "react-dom";
+//#region src/watch/engine/rules.ts
+function w({ points: e = 6, severity: t = "warning", message: n = "Value has not changed" } = {}) {
+	return {
+		severity: t,
+		message: n,
+		test: (t, { index: n, values: r }) => {
+			if (n + 1 < e) return !1;
+			let i = r[n];
+			if (i == null) return !1;
+			for (let t = 1; t < e; t += 1) if (r[n - t] !== i) return !1;
+			return !0;
+		}
+	};
+}
+function T({ by: e, direction: t = "both", severity: n = "warning", message: r }) {
+	return {
+		severity: n,
+		message: r ?? (t === "down" ? "Sudden drop" : t === "up" ? "Sudden rise" : "Sudden change"),
+		test: (n, { index: r, values: i }) => {
+			let a = i[r];
+			if (a == null) return !1;
+			let o = null;
+			for (let e = r - 1; e >= 0; --e) {
+				let t = i[e];
+				if (t != null) {
+					o = t;
+					break;
+				}
+			}
+			if (o === null || o === 0) return !1;
+			let s = (a - o) / Math.abs(o);
+			return t === "up" ? s >= e : t === "down" ? s <= -e : Math.abs(s) >= e;
+		}
+	};
+}
+//#endregion
+//#region src/watch/board/board-state.ts
+var E = (e, t) => ({
+	id: e,
+	order: t,
+	alarm: "normal",
+	pinned: !1,
+	severity: null,
+	reason: null,
+	why: null,
+	since: null,
+	sinceAt: null,
+	score: 0,
+	raisedAt: null,
+	acknowledgedAt: null,
+	clearedAt: null
+});
+function D(e, t) {
+	if (t.type === "register") {
+		let n = e[t.id];
+		return n?.order === t.order ? e : {
+			...e,
+			[t.id]: {
+				...n ?? E(t.id, t.order),
+				order: t.order
+			}
+		};
+	}
+	if (t.type === "unregister") {
+		if (!e[t.id]) return e;
+		let n = { ...e };
+		return delete n[t.id], n;
+	}
+	let n = e[t.id];
+	if (!n) return e;
+	let r = O(n, t);
+	return r === n ? e : {
+		...e,
+		[t.id]: r
+	};
+}
+function O(e, t) {
+	switch (t.type) {
+		case "report": {
+			let { report: n, now: r } = t;
+			if (n?.active) {
+				let t = {
+					reason: n.reason,
+					why: n.why,
+					since: n.since,
+					sinceAt: n.sinceAt,
+					score: n.score
+				};
+				if (e.alarm === "normal" || e.alarm === "cleared") return {
+					...e,
+					...t,
+					alarm: "active",
+					severity: n.severity,
+					raisedAt: r,
+					acknowledgedAt: null,
+					clearedAt: null
+				};
+				let i = e.severity === "warning" && n.severity === "critical";
+				return {
+					...e,
+					...t,
+					severity: i ? "critical" : e.severity,
+					alarm: i ? "active" : e.alarm,
+					acknowledgedAt: i ? null : e.acknowledgedAt
+				};
+			}
+			return e.alarm === "active" || e.alarm === "acknowledged" ? {
+				...e,
+				alarm: "cleared",
+				clearedAt: r
+			} : e;
+		}
+		case "acknowledge": return e.alarm === "active" ? {
+			...e,
+			alarm: "acknowledged",
+			acknowledgedAt: t.now
+		} : e;
+		case "pin": return e.pinned === t.pinned ? e : {
+			...e,
+			pinned: t.pinned
+		};
+		case "settle": return e.alarm === "cleared" ? {
+			...E(e.id, e.order),
+			pinned: e.pinned
+		} : e;
+		default: return e;
+	}
+}
+var k = {
+	active: 1,
+	acknowledged: 2,
+	cleared: 3,
+	normal: 4
+}, A = (e) => e === "critical" ? 0 : 1;
+function j(e) {
+	return Object.values(e).sort((e, t) => {
+		let n = e.pinned ? 0 : k[e.alarm], r = t.pinned ? 0 : k[t.alarm];
+		if (n !== r) return n - r;
+		if (n === 1 || n === 2) {
+			let n = A(e.severity) - A(t.severity);
+			if (n !== 0) return n;
+			let r = M(e) - M(t);
+			if (r !== 0) return r;
+			if (e.score !== t.score) return t.score - e.score;
+		}
+		return e.order - t.order;
+	}).map((e) => e.id);
+}
+var M = (e) => e.sinceAt ?? e.raisedAt ?? Infinity, N = 8e3;
+function ne({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
+	let [i, a] = v(null);
+	h(() => a(document.body), []);
+	let [o, s] = v(!1), c = e.some((e) => e.severity === "critical"), l = e.map((e) => `${e.id}:${e.severity}`).join(), u = _(r);
+	if (u.current = r, h(() => {
+		if (!e.length || c || o) return;
+		let t = setTimeout(() => u.current(), N);
+		return () => clearTimeout(t);
+	}, [
+		l,
+		c,
+		o
+	]), !i) return null;
+	let d = e[0], f = t ? { opacity: 0 } : {
+		opacity: 0,
+		y: 16,
+		filter: "blur(6px)"
+	};
+	return C(/* @__PURE__ */ b("div", {
+		"data-lilt-chart": "",
+		className: "lilt-toast-region",
+		children: /* @__PURE__ */ b(S, { children: d ? /* @__PURE__ */ x(te.div, {
+			role: "group",
+			"aria-label": "Chart alert",
+			className: "lilt-toast",
+			"data-severity": c ? "critical" : "warning",
+			initial: f,
+			animate: {
+				opacity: 1,
+				y: 0,
+				filter: "blur(0px)"
+			},
+			exit: f,
+			transition: t ? { duration: 0 } : {
+				type: "spring",
+				stiffness: 420,
+				damping: 34
+			},
+			onPointerEnter: () => s(!0),
+			onPointerLeave: () => s(!1),
+			onFocus: () => s(!0),
+			onBlur: (e) => {
+				e.currentTarget.contains(e.relatedTarget) || s(!1);
+			},
+			children: [
+				/* @__PURE__ */ b("span", {
+					className: "lilt-toast__text",
+					children: e.length === 1 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("strong", { children: d.title }), d.reason ? /* @__PURE__ */ b("span", {
+						className: "lilt-toast__reason",
+						children: d.reason
+					}) : null] }) : /* @__PURE__ */ x("strong", { children: [e.length, " charts need attention"] })
+				}),
+				/* @__PURE__ */ b("button", {
+					type: "button",
+					className: "lilt-toast__view",
+					onClick: n,
+					children: "View"
+				}),
+				/* @__PURE__ */ b("button", {
+					type: "button",
+					className: "lilt-card-badge__clear",
+					"aria-label": "Dismiss",
+					onClick: r,
+					children: /* @__PURE__ */ b("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 16 16",
+						fill: "none",
+						children: /* @__PURE__ */ b("path", {
+							d: "m4 4 8 8M12 4l-8 8",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round"
+						})
+					})
+				})
+			]
+		}, "toast") : null })
+	}), i);
+}
+//#endregion
+//#region src/watch/board/chart-board.tsx
+function re({ children: e }) {
+	return /* @__PURE__ */ b(y, { children: e });
+}
+var P = d(null), ie = d(null);
+function F() {
+	let e = m(P);
+	if (!e) throw Error("Lilt Charts: useBoard must be used inside a ChartBoard.");
+	let t = Object.values(e.state);
+	return {
+		items: t,
+		attention: t.filter((e) => e.alarm === "active"),
+		fresh: t.filter((t) => e.fresh.has(t.id)),
+		pending: e.pending,
+		apply: e.apply,
+		acknowledge: e.acknowledge,
+		pin: e.pin
+	};
+}
+function I() {
+	let e = m(P), t = m(ie);
+	if (!e || !t) throw Error("Lilt Charts: useBoardItem must be used inside a BoardItem.");
+	return {
+		item: e.state[t],
+		title: e.titles.get(t) ?? t,
+		fresh: e.fresh.has(t),
+		acknowledge: () => e.acknowledge(t),
+		pin: (n) => e.pin(t, n)
+	};
+}
+var ae = 500;
+function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, storage: a, onEvent: o, toast: s = !1, toolbar: c = !0, status: l = !0, motion: d = "auto", className: m, style: y }) {
+	let S = g(() => u.toArray(t).flatMap((e) => f(e) && e.type === re ? [e.props] : []), [t]), C = g(() => new Map(S.map((e) => [e.id, e.title])), [S]), [w, T] = ee(D, S, (e) => e.reduce((e, t, n) => D(e, {
+		type: "register",
+		id: t.id,
+		order: n
+	}), {})), E = S.map((e) => e.id).join("\0");
+	h(() => {
+		let e = new Set(S.map((e) => e.id));
+		S.forEach((e, t) => T({
+			type: "register",
+			id: e.id,
+			order: t
+		}));
+		for (let t of Object.keys(w)) e.has(t) || T({
+			type: "unregister",
+			id: t
+		});
+	}, [E]);
+	let O = j(w), k = O.join("\0"), [A, M] = v(O), [N, F] = v(!1), I = _(void 0), L = () => {
+		clearTimeout(I.current), F(!0);
+	}, R = () => {
+		clearTimeout(I.current), I.current = setTimeout(() => F(!1), ae);
+	};
+	h(() => () => clearTimeout(I.current), []), h(() => {
+		N || M(O);
+	}, [N, k]);
+	let z = [...A.filter((e) => w[e]), ...O.filter((e) => !A.includes(e))], B = z.join("\0") !== k, fe = p(() => M(j(w)), [w]);
+	h(() => {
+		let e = Object.values(w).filter((e) => e.alarm === "cleared" && e.clearedAt !== null).map((e) => setTimeout(() => T({
+			type: "settle",
+			id: e.id
+		}), Math.max(0, e.clearedAt + r - Date.now())));
+		return () => e.forEach(clearTimeout);
+	}, [w, r]);
+	let V = e(d), H = _(/* @__PURE__ */ new Map()), pe = _(/* @__PURE__ */ new Map());
+	h(() => {
+		if (typeof IntersectionObserver > "u") return;
+		let e = new IntersectionObserver((e) => {
+			for (let t of e) {
+				let e = t.target.dataset.boardItem;
+				e && pe.current.set(e, t.intersectionRatio >= .5);
+			}
+		}, { threshold: [
+			0,
+			.5,
+			1
+		] });
+		return H.current.forEach((t) => e.observe(t)), () => e.disconnect();
+	}, [E]);
+	let [U, me] = v(null), he = _(V);
+	he.current = V;
+	let W = p((e) => {
+		let t = H.current.get(e);
+		t && (t.scrollIntoView?.({
+			behavior: he.current ? "auto" : "smooth",
+			block: "center"
+		}), t.focus({ preventScroll: !0 }), me(e));
+	}, []);
+	h(() => {
+		if (!U) return;
+		let e = setTimeout(() => me(null), 1600);
+		return () => clearTimeout(e);
+	}, [U]);
+	let [ge, G] = v([]), K = _(null), q = _(0);
+	h(() => {
+		let e = () => {
+			K.current !== null && (document.title = K.current), K.current = null, q.current = 0;
+		}, t = () => {
+			document.visibilityState === "visible" && e();
+		};
+		return document.addEventListener("visibilitychange", t), () => {
+			document.removeEventListener("visibilitychange", t), e();
+		};
+	}, []);
+	let [_e, ve] = v({
+		polite: "",
+		assertive: ""
+	}), ye = _(w), J = _({
+		onEvent: o,
+		titles: C,
+		toast: s
+	});
+	J.current = {
+		onEvent: o,
+		titles: C,
+		toast: s
+	}, h(() => {
+		let e = ye.current;
+		ye.current = w;
+		let t = [], n = [], r = [], i = /* @__PURE__ */ new Set();
+		for (let a of Object.values(w)) {
+			let o = e[a.id];
+			if (!o) continue;
+			let s = ce(o, a);
+			if (!s) continue;
+			let c = J.current.titles.get(a.id) ?? a.id;
+			J.current.onEvent?.({
+				type: s,
+				id: a.id,
+				title: c,
+				item: a,
+				show: () => W(a.id)
+			}), s === "raised" || s === "escalated" ? pe.current.get(a.id) || r.push({
+				id: a.id,
+				title: c,
+				reason: a.why ?? a.reason,
+				severity: a.severity ?? "warning"
+			}) : i.add(a.id);
+			let l = a.reason ? `: ${a.reason}${a.since ? ` since ${a.since}` : ""}` : "";
+			s === "raised" || s === "escalated" ? (a.severity === "critical" ? n : t).push(`${c} needs attention${l}.${a.why ? ` ${a.why}.` : ""}`) : s === "cleared" && t.push(`${c} is back to normal.`);
+		}
+		if ((t.length || n.length) && ve({
+			polite: t.join(" "),
+			assertive: n.join(" ")
+		}), J.current.toast) {
+			if (r.length || i.size) {
+				let e = new Set(r.map((e) => e.id));
+				G((t) => [...t.filter((t) => !e.has(t.id) && !i.has(t.id)), ...r].sort((e, t) => se(e.severity) - se(t.severity)));
+			}
+			r.length && document.visibilityState === "hidden" && (K.current ??= document.title, q.current += r.length, document.title = `(${q.current}) ${K.current}`);
+		}
+	}, [w, W]);
+	let Y = i ? `lilt-board:${i}` : null, X = _(null), [be, xe] = v(() => /* @__PURE__ */ new Set()), Z = g(() => a ?? le(), [a]);
+	h(() => {
+		if (!Y || !Z) return;
+		let e = Z.get(Y);
+		try {
+			X.current = e === null ? null : new Set(JSON.parse(e));
+		} catch {
+			X.current = null;
+		}
+	}, [Y, Z]);
+	let Q = (e) => `${e.id}@${e.sinceAt ?? e.since ?? ""}`, Se = Object.values(w).filter((e) => e.alarm !== "normal" && e.alarm !== "cleared").map(Q).sort().join("\0");
+	h(() => {
+		if (!Y || !Z) return;
+		let e = X.current, t = Object.values(w).filter((e) => e.alarm === "active" || e.alarm === "acknowledged");
+		e && xe(new Set(t.filter((t) => t.alarm === "active" && !e.has(Q(t))).map((e) => e.id)));
+		let n = () => Z.set(Y, JSON.stringify(t.map(Q))), r = () => {
+			document.visibilityState === "hidden" && n();
+		};
+		return window.addEventListener("pagehide", n), document.addEventListener("visibilitychange", r), () => {
+			window.removeEventListener("pagehide", n), document.removeEventListener("visibilitychange", r), n();
+		};
+	}, [
+		Se,
+		Y,
+		Z
+	]);
+	let Ce = p((e) => T({
+		type: "acknowledge",
+		id: e,
+		now: Date.now()
+	}), []), we = p((e, t) => T({
+		type: "pin",
+		id: e,
+		pinned: t
+	}), []), Te = g(() => ({
+		state: w,
+		titles: C,
+		fresh: be,
+		acknowledge: Ce,
+		pin: we,
+		pending: B,
+		apply: fe
+	}), [
+		w,
+		C,
+		be,
+		Ce,
+		we,
+		B,
+		fe
+	]), Ee = new Map(S.map((e) => [e.id, e])), $ = ge.filter((e) => w[e.id]);
+	return /* @__PURE__ */ x(P.Provider, {
+		value: Te,
+		children: [/* @__PURE__ */ x("section", {
+			"data-lilt-chart": "",
+			className: ["lilt-board", m].filter(Boolean).join(" "),
+			style: y,
+			"aria-label": n,
+			onPointerEnter: L,
+			onPointerLeave: R,
+			onFocus: L,
+			onBlur: (e) => {
+				e.currentTarget.contains(e.relatedTarget) || R();
+			},
+			children: [
+				c ? /* @__PURE__ */ b(de, {}) : null,
+				/* @__PURE__ */ b("div", {
+					className: "lilt-board__grid",
+					children: z.map((e) => {
+						let t = Ee.get(e), n = w[e];
+						return !t || !n ? null : /* @__PURE__ */ b(te.div, {
+							ref: (t) => {
+								t ? H.current.set(e, t) : H.current.delete(e);
+							},
+							role: "group",
+							"aria-label": t.title,
+							tabIndex: -1,
+							"data-board-item": e,
+							"data-flash": U === e || void 0,
+							layout: !V && "position",
+							transition: {
+								type: "spring",
+								stiffness: 420,
+								damping: 40,
+								mass: .9
+							},
+							className: "lilt-board__item",
+							"data-alarm": n.alarm,
+							"data-severity": n.severity ?? void 0,
+							"data-pinned": n.pinned || void 0,
+							style: t.span === 2 ? { gridColumn: "span 2" } : void 0,
+							children: /* @__PURE__ */ b(ie.Provider, {
+								value: e,
+								children: /* @__PURE__ */ b(ue, {
+									item: n,
+									status: l,
+									children: /* @__PURE__ */ b(oe, {
+										id: e,
+										dispatch: T,
+										children: t.children
+									})
+								})
+							})
+						}, e);
+					})
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "lilt-chart__sr-only",
+					"aria-live": "polite",
+					children: _e.polite
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "lilt-chart__sr-only",
+					"aria-live": "assertive",
+					children: _e.assertive
+				})
+			]
+		}), s ? /* @__PURE__ */ b(ne, {
+			alerts: $,
+			reducedMotion: V,
+			onView: () => {
+				$[0] && W($[0].id), G([]);
+			},
+			onDismiss: () => G([])
+		}) : null]
+	});
+}
+function oe({ id: e, dispatch: t, children: n }) {
+	let r = p((n) => t({
+		type: "report",
+		id: e,
+		report: n,
+		now: Date.now()
+	}), [t, e]);
+	return /* @__PURE__ */ b(c.Provider, {
+		value: r,
+		children: n
+	});
+}
+var se = (e) => e === "critical" ? 0 : 1;
+function ce(e, t) {
+	return e.alarm === t.alarm ? t.alarm === "active" && e.severity === "warning" && t.severity === "critical" ? "escalated" : null : {
+		active: e.alarm === "acknowledged" ? "escalated" : "raised",
+		acknowledged: "acknowledged",
+		cleared: "cleared"
+	}[t.alarm] ?? null;
+}
+function le() {
+	return typeof window > "u" ? null : {
+		get: (e) => {
+			try {
+				return window.localStorage.getItem(e);
+			} catch {
+				return null;
+			}
+		},
+		set: (e, t) => {
+			try {
+				window.localStorage.setItem(e, t);
+			} catch {}
+		}
+	};
+}
+function ue({ item: e, status: t, children: n }) {
+	let i = t && (e.alarm !== "normal" || e.pinned), a = g(() => ({
+		badge: i ? /* @__PURE__ */ b(z, {}) : void 0,
+		tone: e.alarm === "active" ? e.severity : null,
+		handle: t && !i ? /* @__PURE__ */ b(B, {}) : void 0
+	}), [
+		i,
+		t,
+		e.alarm,
+		e.severity
+	]);
+	return /* @__PURE__ */ b(r.Provider, {
+		value: a,
+		children: n
+	});
+}
+var R = new Intl.DateTimeFormat(void 0, {
+	hour: "numeric",
+	minute: "2-digit"
+});
+function z() {
+	let { item: e, title: t, fresh: n, acknowledge: r, pin: i } = I(), a = e.alarm === "active" ? "Needs attention" : e.alarm === "acknowledged" ? `Seen ${R.format(e.acknowledgedAt)}` : e.alarm === "cleared" ? "Back to normal" : "Pinned";
+	return /* @__PURE__ */ x("span", {
+		className: "lilt-board-tab",
+		"data-alarm": e.alarm,
+		"data-severity": e.severity ?? void 0,
+		children: [/* @__PURE__ */ x("span", {
+			className: "lilt-board-tab__state",
+			children: [a, n ? /* @__PURE__ */ b("span", {
+				className: "lilt-board-tab__new",
+				children: "· New"
+			}) : null]
+		}), /* @__PURE__ */ x("span", {
+			className: "lilt-board-tab__actions",
+			children: [e.alarm === "active" ? /* @__PURE__ */ b("button", {
+				type: "button",
+				className: "lilt-board-tab__action",
+				onClick: r,
+				children: "Acknowledge"
+			}) : null, /* @__PURE__ */ b("button", {
+				type: "button",
+				className: "lilt-card-badge__clear lilt-board-tab__pin",
+				"aria-pressed": e.pinned,
+				"aria-label": e.pinned ? `Unpin ${t}` : `Pin ${t}`,
+				title: e.pinned ? "Unpin" : "Keep at the top",
+				onClick: () => i(!e.pinned),
+				children: /* @__PURE__ */ b(l, { release: e.pinned })
+			})]
+		})]
+	});
+}
+function B() {
+	let { title: e, pin: t } = I();
+	return /* @__PURE__ */ b("button", {
+		type: "button",
+		className: "lilt-board-handle",
+		"aria-pressed": !1,
+		"aria-label": `Pin ${e}`,
+		title: "Keep at the top",
+		onClick: () => t(!0),
+		children: /* @__PURE__ */ b(l, {})
+	});
+}
+function de() {
+	let { pending: e, apply: t } = F();
+	return e ? /* @__PURE__ */ b("div", {
+		className: "lilt-board__toolbar",
+		children: /* @__PURE__ */ b("button", {
+			type: "button",
+			className: "lilt-board__apply",
+			onClick: t,
+			children: "Order changed · Show"
+		})
+	}) : null;
+}
+//#endregion
+export { re as BoardItem, z as BoardItemTab, de as BoardToolbar, L as ChartBoard, D as boardReducer, i as describeExplanation, t as describeFlag, s as evaluateNormal, o as explainDeviation, n as explainReadings, w as flatline, T as jump, j as rankBoard, a as trackNormalStatus, F as useBoard, I as useBoardItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilt-ui/charts",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Beautiful, key-typed React chart cards with linked hover, targets, forecasts, finance charts, and calm motion.",
   "keywords": [
     "react",
@@ -40,6 +40,11 @@
       "import": "./dist/finance.js",
       "default": "./dist/finance.js"
     },
+    "./watch": {
+      "types": "./dist/watch/index.d.ts",
+      "import": "./dist/watch.js",
+      "default": "./dist/watch.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },