@mechane-ai/elements 0.0.0-stage → 0.4.0

package/dist/charts/graph.js

@@ -0,0 +1,231 @@
+import { o as e, r as t, t as n } from "../chart-frame-bX0VLC_W.js";
+import { n as r, t as i } from "../chart-input-qnM44oen.js";
+import * as a from "@stylexjs/stylex";
+import { useId as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+// packages/charts/src/graph/relation-graph.tsx
+var u = {
+	kVAEAm: "x1n2onr6",
+	$$css: !0
+}, d = {
+	canvas: (e, t) => [
+		u,
+		{
+			kzqmXN: e == null ? e : "x5lhr3w",
+			kZKoxP: t == null ? t : "x16ye13r",
+			$$css: !0
+		},
+		{
+			"--x-width": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+			"--x-height": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+		}
+	],
+	node: {
+		kVAEAm: "x10l6tqk",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kjj79g: "xl56j7k",
+		kB7OPa: "x9f619",
+		kg3NbH: "x1doqdfy",
+		k8WAf4: "xn9t2bk",
+		kOIVth: "xfko13i",
+		kMzoRj: "xmkeg23",
+		ksu8eU: "x1y0btm7",
+		kVAM5u: "x1ey3b81",
+		kZ1KPB: "x1vo0akb",
+		kMwMTN: "xbixft",
+		kWkggS: "xpvm0e4",
+		k9WMMc: "x1yc453h",
+		kMv6JI: "x1hz01jw",
+		kAzted: "xaeotn9 xwu7q15",
+		$$css: !0
+	},
+	position: (e, t) => [{
+		kbCHJM: e == null ? e : "xgq9j65",
+		k87sOh: t == null ? t : "xjbys53",
+		$$css: !0
+	}, {
+		"--x-left": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+		"--x-top": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+	}],
+	size: (e, t) => [{
+		kzqmXN: e == null ? e : "x5lhr3w",
+		kZKoxP: t == null ? t : "x16ye13r",
+		$$css: !0
+	}, {
+		"--x-width": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+		"--x-height": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+	}],
+	tone: (e) => [{
+		kaZRDh: e == null ? e : "xsb5j7k",
+		$$css: !0
+	}, { "--x-borderLeftColor": e ?? void 0 }],
+	action: {
+		kkrTdU: "x1ypdohk",
+		kGzVvX: "xzro8vx",
+		kPJHz1: "x13qnu6",
+		kZs9gx: "x19rmrnh",
+		k7shQP: "x9v5kkp",
+		kiEn40: "x7s97pk",
+		$$css: !0
+	},
+	selected: {
+		kMeerF: "x12ei19c",
+		kjBf7l: "xx9gdjd",
+		k3XXqK: "xaatb59",
+		kInvED: "x1y3gkto",
+		$$css: !0
+	}
+}, f = 256, p = 1024, m = 256, h = 8192;
+function g({ title: r, description: u, nodes: f, edges: p, groups: m = [], width: h, height: g, selection: y, emptyLabel: b }) {
+	let x = o(), S = _({
+		nodes: f,
+		edges: p,
+		groups: m,
+		width: h,
+		height: g
+	});
+	if (S !== null) return /* @__PURE__ */ c(i, {
+		title: r,
+		description: u,
+		message: S
+	});
+	let C = new Map(f.map((e) => [e.id, e])), w = v(p, C);
+	return w === null ? /* @__PURE__ */ c(i, {
+		title: r,
+		description: u,
+		message: "Every relationship must refer to two supplied nodes."
+	}) : /* @__PURE__ */ l(t, {
+		title: r,
+		description: u,
+		children: [f.length === 0 ? /* @__PURE__ */ c("p", {
+			className: "x1ghz6dp x153jb6y",
+			children: b
+		}) : /* @__PURE__ */ c("div", {
+			role: "region",
+			"aria-label": `${r} graph`,
+			tabIndex: 0,
+			className: "xysyzu8 xzuc9lq xmkeg23 x1y0btm7 x1ey3b81 x13qnu6 x19rmrnh x9v5kkp x1bqaal",
+			children: /* @__PURE__ */ l("div", {
+				...a.props(d.canvas(h, g)),
+				children: [/* @__PURE__ */ l("svg", {
+					width: h,
+					height: g,
+					"aria-hidden": !0,
+					className: "x10l6tqk x10a8y8t x1lliihq",
+					children: [
+						/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ c("marker", {
+							id: x,
+							markerWidth: 8,
+							markerHeight: 8,
+							refX: 7,
+							refY: 4,
+							orient: "auto",
+							markerUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ c("path", {
+								d: "M0,0 L8,4 L0,8 Z",
+								className: "x8futc7"
+							})
+						}) }),
+						m.map((e) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("rect", {
+							x: e.x,
+							y: e.y,
+							width: e.width,
+							height: e.height,
+							className: "x2wnxhi x13hfdr1 xnpr05h"
+						}), /* @__PURE__ */ c("text", {
+							x: e.x + 12,
+							y: e.y + 20,
+							className: "x1q7gtio x1hz01jw xy8obcc",
+							children: e.label
+						})] }, e.id)),
+						w.map(({ edge: e, source: t, target: n }) => {
+							let r = t.x < n.x, i = t.x + (r ? t.width : 0), a = n.x + (r ? 0 : n.width), o = t.y + t.height / 2, s = n.y + n.height / 2, l = (i + a) / 2, u = t.x + t.width / 2, d = t.id === n.id ? `M${u - 12},${t.y} C${u - 48},${t.y - 36} ${u + 48},${t.y - 36} ${u + 12},${t.y}` : `M${i},${o} C${l},${o} ${l},${s} ${a},${s}`;
+							return /* @__PURE__ */ c("path", {
+								d,
+								markerEnd: e.direction === "directed" ? `url(#${x})` : void 0,
+								className: "xbh8q5q x1crw9hw xhr4kjn",
+								children: /* @__PURE__ */ c("title", { children: e.label })
+							}, e.id);
+						})
+					]
+				}), f.map((t) => {
+					let n = [
+						...m.filter((e) => e.nodeIds.includes(t.id)).map((e) => e.label),
+						t.label,
+						t.description
+					].filter((e) => e !== void 0).join(", "), r = a.props(d.node, d.position(t.x, t.y), d.size(t.width, t.height), d.tone(e[t.tone]), y !== void 0 && d.action, y?.selectedId === t.id && d.selected), i = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+						className: "xtqrqnz x1778rvt xk50ysn xj0a0fe",
+						children: t.label
+					}), t.description !== void 0 && /* @__PURE__ */ c("span", {
+						className: "xy8obcc xas2l8k x153jb6y xj0a0fe",
+						children: t.description
+					})] });
+					return y === void 0 ? /* @__PURE__ */ c("div", {
+						role: "group",
+						"aria-label": n,
+						...r,
+						children: i
+					}, t.id) : /* @__PURE__ */ c("button", {
+						type: "button",
+						"aria-label": n,
+						"aria-pressed": y.selectedId === t.id,
+						onClick: () => y.onSelect(t.id),
+						...r,
+						children: i
+					}, t.id);
+				})]
+			})
+		}), p.length > 0 && /* @__PURE__ */ l(n, {
+			label: "Relationships",
+			children: [m.length > 0 && /* @__PURE__ */ c("ul", {
+				className: "xo02m6d xv06hpe x153jb6y",
+				children: m.map((e) => /* @__PURE__ */ l("li", { children: [
+					e.label,
+					": ",
+					e.nodeIds.map((e) => C.get(e)?.label).join(", ")
+				] }, e.id))
+			}), /* @__PURE__ */ c("ul", {
+				className: "xo02m6d xv06hpe x153jb6y",
+				children: w.map(({ edge: e, source: t, target: n }) => /* @__PURE__ */ l("li", { children: [
+					t.label,
+					" ",
+					e.direction === "directed" ? "→" : "↔",
+					" ",
+					n.label,
+					": ",
+					e.label
+				] }, e.id))
+			})]
+		})]
+	});
+}
+function _({ nodes: e, edges: t, groups: n, width: i, height: a }) {
+	if (!Number.isFinite(i) || i <= 0 || i > 8192 || !Number.isFinite(a) || a <= 0 || a > 8192) return `Graph dimensions must be finite, positive, and at most ${h} pixels.`;
+	if (e.length > 256 || t.length > 1024 || n.length > 256) return `This graph exceeds the render limit of 256 nodes, ${p} relationships, or 256 groups. Supply a smaller, labelled neighborhood.`;
+	let o = new Set(e.map((e) => e.id));
+	return !r(e) || !r(t) || !r(n) ? "Graph nodes, relationships, and groups must have unique identifiers." : [...e, ...n].some((e) => {
+		if (!Number.isFinite(e.width) || !Number.isFinite(e.height) || e.width <= 0 || e.height <= 0) return !0;
+		let t = !Number.isFinite(e.x) || e.x < 0 || e.x + e.width > i, n = !Number.isFinite(e.y) || e.y < 0 || e.y + e.height > a;
+		return t || n;
+	}) ? "Graph boxes must have finite, positive dimensions and fit inside the supplied canvas." : e.some((e) => e.width < 44 || e.height < 44) ? "Graph node boxes must be at least 44 by 44 pixels." : t.some((t) => t.sourceId === t.targetId && e.some((e) => e.id === t.sourceId && e.y < 36)) ? "A self-relationship needs at least 36 pixels of space above its node." : n.some((e) => new Set(e.nodeIds).size !== e.nodeIds.length || e.nodeIds.some((e) => !o.has(e))) ? "Each group must contain unique references to supplied nodes." : n.some((t) => t.nodeIds.some((n) => {
+		let r = e.find((e) => e.id === n);
+		if (r === void 0) return !1;
+		let i = r.x < t.x || r.x + r.width > t.x + t.width, a = r.y < t.y || r.y + r.height > t.y + t.height;
+		return i || a;
+	})) ? "A group box must contain the node boxes assigned to it." : null;
+}
+function v(e, t) {
+	let n = [];
+	for (let r of e) {
+		let e = t.get(r.sourceId), i = t.get(r.targetId);
+		if (e === void 0 || i === void 0) return null;
+		n.push({
+			edge: r,
+			source: e,
+			target: i
+		});
+	}
+	return n;
+}
+export { h as MAX_RELATION_DIMENSION, p as MAX_RELATION_EDGES, m as MAX_RELATION_GROUPS, f as MAX_RELATION_NODES, g as RelationGraph };

package/dist/charts/hierarchy.js

@@ -0,0 +1,109 @@
+import { i as e, r as t, t as n } from "../categorical-values-cMX7Mykq.js";
+import { a as r, o as i, r as a } from "../chart-frame-bX0VLC_W.js";
+import { t as o } from "../chart-input-qnM44oen.js";
+import { t as s } from "../plot-width--OgdohB5.js";
+import * as c from "@stylexjs/stylex";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Treemap as d, hierarchy as f } from "@visx/hierarchy";
+// packages/charts/src/hierarchy/treemap.tsx
+var p = { treeRect: {
+	kjVXCG: "xaep1og",
+	kfJifR: "xnpr05h",
+	$$css: !0
+} };
+function m({ title: m, description: h, items: g, formatValue: _, selection: v, height: y = 180 }) {
+	let b = e(g), x = g.reduce((e, t) => e + (t.value ?? 0), 0), { ref: S, width: C } = s();
+	if (b !== void 0 || !Number.isFinite(y) || y < 48) return /* @__PURE__ */ l(o, {
+		title: m,
+		description: h,
+		message: b ?? "Chart height must be at least 48 pixels."
+	});
+	let w = g.flatMap((e, n) => e.value === null || e.value === 0 ? [] : [{
+		id: e.id,
+		label: e.label,
+		value: e.value,
+		tone: t(e.tone, n)
+	}]), T = f({
+		id: "root",
+		label: m,
+		value: 0,
+		tone: "neutral",
+		children: w
+	}, (e) => e.children === void 0 ? void 0 : [...e.children]).sum((e) => e.value);
+	return /* @__PURE__ */ u(a, {
+		title: m,
+		description: h,
+		children: [
+			/* @__PURE__ */ l("div", {
+				ref: S,
+				...c.props(r.plot),
+				children: x === 0 ? /* @__PURE__ */ l("p", {
+					className: "x153jb6y x1ghz6dp xy8obcc",
+					children: "No positive values to size the areas"
+				}) : /* @__PURE__ */ l("svg", {
+					role: "img",
+					"aria-label": `${m}. Areas compare recorded values.`,
+					viewBox: `0 0 ${C} ${y}`,
+					height: y,
+					...c.props(r.svg),
+					children: /* @__PURE__ */ l(d, {
+						root: T,
+						size: [C, y],
+						paddingInner: 2,
+						children: (e) => e.leaves().map((e) => {
+							let t = e.x1 - e.x0 > 96 && e.y1 - e.y0 > 40;
+							return /* @__PURE__ */ u("g", { children: [
+								/* @__PURE__ */ l("rect", {
+									x: e.x0,
+									y: e.y0,
+									width: e.x1 - e.x0,
+									height: e.y1 - e.y0,
+									fill: i[e.data.tone],
+									fillOpacity: .18,
+									...c.props(p.treeRect, v?.selectedId === e.data.id && r.selected)
+								}),
+								/* @__PURE__ */ u("title", { children: [
+									e.data.label,
+									": ",
+									_(e.data.value)
+								] }),
+								t && /* @__PURE__ */ u("svg", {
+									x: e.x0,
+									y: e.y0,
+									width: e.x1 - e.x0,
+									height: e.y1 - e.y0,
+									overflow: "hidden",
+									children: [/* @__PURE__ */ l("text", {
+										x: 8,
+										y: 18,
+										className: "xlrhuyr x1hz01jw xy8obcc",
+										children: e.data.label.slice(0, Math.floor((e.x1 - e.x0 - 16) / 7))
+									}), _(e.data.value).length * 12 < e.x1 - e.x0 - 16 && /* @__PURE__ */ l("text", {
+										x: 8,
+										y: 34,
+										className: "xlrhuyr x1hz01jw xy8obcc",
+										children: _(e.data.value)
+									})]
+								})
+							] }, e.data.id);
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ l(n, {
+				items: g.map((e, n) => ({
+					id: e.id,
+					label: e.label,
+					valueLabel: e.value === null ? "Unavailable" : _(e.value),
+					tone: t(e.tone, n)
+				})),
+				selection: v
+			}),
+			g.some((e) => e.value === null) && /* @__PURE__ */ l("p", {
+				className: "x153jb6y x1ghz6dp xy8obcc",
+				children: "Unavailable values have no area."
+			})
+		]
+	});
+}
+export { m as Treemap };