@preschen/gen-vis 0.4.0 → 0.6.0

package/dist/gen-vis.js

@@ -0,0 +1,1149 @@
+(() => { const s = document.createElement("style"); s.textContent = "@layer gen-vis {\n.hover[data-v-364032d4]{font-size:13px;position:absolute;top:0}.hover .title[data-v-364032d4]{text-align:center;border-bottom:2px solid #000;padding:1px 3px;font-weight:700}.hover[data-v-364032d4]{background-color:#fffc;top:40%}.hover[data-v-364032d4] table{border-collapse:collapse}.hover[data-v-364032d4] table tr.nearest{font-weight:700}.hover[data-v-364032d4] table tr td{text-align:left;padding:1px 5px}.hover[data-v-364032d4] table tr td.value,.hover[data-v-364032d4] table tr td.y{text-align:right}.hover[data-v-364032d4] table tr td:first-child{border-left:0}.hover[data-v-364032d4] table{margin-left:auto;margin-right:auto}.hover[data-v-364032d4]{pointer-events:none}.vis-inner[data-v-1f05a06e]{display:inline-block;position:relative}.vis-inner .debug[data-v-1f05a06e]{font-size:12px}.vis-inner[data-v-1f05a06e] svg g.axis-position-top g.tick line{transform:translateY(5px)}.vis-inner[data-v-1f05a06e] svg g.axis-position-right g.tick line{transform:translate(-4px)}.vis-inner[data-v-1f05a06e] svg g.axis-position-bottom g.tick line{transform:translateY(-4px)}.vis-inner[data-v-1f05a06e] svg g.axis-position-left g.tick line{transform:translate(5px)}.vis-inner[data-v-1f05a06e] svg g.tick text,.vis-inner[data-v-1f05a06e] svg .axis-title{font-size:13px}.vis-inner[data-v-1f05a06e] svg g.group[data-visible=false],.vis-inner[data-v-1f05a06e] svg path[data-visible=false]{opacity:.01}.vis-inner[data-v-1f05a06e] svg g.grid{stroke:#ccc;stroke-width:.75px}.vis-inner[data-v-1f05a06e] svg g.hoverMarker line{stroke-width:.75px;stroke:#aaa}svg[data-v-ce0e972e]{margin-right:5px;display:inline-block}.legend .title[data-v-1bc8d55f]{margin:3px;font-size:13px;font-weight:700;position:relative}.legend .entries>div[data-v-1bc8d55f]{cursor:pointer;margin:0 5px;display:inline-block}.legend .entries>div[data-visible=false][data-v-1bc8d55f]{opacity:.3}.legend .entries>div span[data-v-1bc8d55f]{font-size:13px;display:inline-block;position:relative;top:-4px}.legend .entries>div.bold[data-v-1bc8d55f]{font-weight:700}.formElement[data-v-ec3facd5]{margin:2px 16px 2px 4px;font-size:13px;display:inline-block}.formElement .title[data-v-ec3facd5]{margin-right:5px;font-weight:700;display:inline-block}.formElement .entries[data-v-ec3facd5]{display:inline-block}.formElement .entries>div[data-v-ec3facd5]{margin-right:5px;display:inline-block}.formElement .entries>div input[data-v-ec3facd5]{display:inline-block;position:relative;top:1px}.vis[data-v-b07c17d2] text,.vis[data-v-b07c17d2] span,.vis[data-v-b07c17d2] div{font-family:var(--gen-vis-font-family,Century Gothic, sans-serif)}.vis-header .title[data-v-b07c17d2]{font-size:22px;font-weight:700}.vis-header .subtitle[data-v-b07c17d2]{margin-top:3px;font-size:13px}.vis-header[data-v-b07c17d2]{margin-bottom:10px}.vis-footer span[data-v-b07c17d2]{font-size:13px}.facet-title[data-v-b07c17d2]{margin-top:8px;font-size:13px;font-weight:700}.vis-error[data-v-a9d47434]{color:#b00;font-size:13px}\n/*$vite$:1*/\n}"; document.head.appendChild(s); })();
+import { Fragment as e, createApp as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, markRaw as o, mergeProps as s, normalizeStyle as c, openBlock as l, reactive as u, renderList as d, resolveComponent as f, toDisplayString as p, toRaw as ee } from "vue";
+import * as m from "d3";
+import h from "deepmerge";
+//#region src/utils/data.js
+var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(e) ? JSON.parse(e) : m.csvParse(e)) : e, _ = (e) => e == null || e === "", te = {
+	numeric: (e) => {
+		let t = _(e) ? NaN : +e;
+		return isNaN(t) ? null : t;
+	},
+	date: (e) => {
+		let t = _(e) ? NaN : typeof e == "number" ? e : Date.parse(e);
+		return isNaN(t) ? null : t;
+	}
+}, ne = (e, t) => {
+	let n = Object.keys(t.mapping).map((e) => ({
+		name: e,
+		column: t.mapping[e].column,
+		convert: te[t.mapping[e].type] ?? ((e) => e)
+	}));
+	return e.map((e) => {
+		let t = {};
+		return n.forEach((n) => {
+			t[n.name] = n.convert(e[n.column]);
+		}), t;
+	});
+}, re = (e, t) => {
+	e.values = [...new Set(t.map((t) => t[e.dim]))], (e.mapping.type == "numeric" || e.mapping.type == "date") && (e.values = e.values.filter((e) => e !== null).sort((e, t) => e - t), e.extent = e.mapping.stacked ? m.extent(t.map((t) => t[`${e.dim}:st:e`])) : m.extent(e.values));
+}, ie = (e) => {
+	let t = e.map(({ dim: e, keys: t }) => ({
+		dim: e,
+		rank: new Map(t.map((e, t) => [e, t]))
+	}));
+	return (e, n) => {
+		for (let { dim: r, rank: i } of t) {
+			let t = (i.get(e[r]) ?? Infinity) - (i.get(n[r]) ?? Infinity);
+			if (t) return t;
+		}
+		return 0;
+	};
+}, ae = (e, t, n = [], r = null) => {
+	y(e, [...n, t.h]).forEach((e) => {
+		let n = 0, i = 0;
+		(r ? [...e.entries].sort(r) : e.entries).forEach((e) => {
+			let r = e[t.v];
+			r >= 0 ? (e[`${t.v}:st:s`] = n, n += r, e[`${t.v}:st:e`] = n) : (e[`${t.v}:st:s`] = i, i += r, e[`${t.v}:st:e`] = i);
+		});
+	});
+}, v = (e, t) => {
+	e.forEach((e) => {
+		Object.values(t).forEach((t) => {
+			e[`${t.dim}:scaled`] = t.scale(e[t.dim]), e[`${t.dim}:scaled:min`] = t.scale(t.domain[0]), e[`${t.dim}:scaled:0`] = t.scale(0), e[`${t.dim}:scaled:max`] = t.scale(t.domain[1]), t.mapping.stacked && (e[`${t.dim}:st:e:scaled`] = t.scale(e[`${t.dim}:st:e`]), e[`${t.dim}:st:s:scaled`] = t.scale(e[`${t.dim}:st:s`]), e[`${t.dim}:st:h:scaled`] = e[`${t.dim}:st:s:scaled`] - e[`${t.dim}:st:e:scaled`]);
+		});
+	});
+}, y = (e, t) => {
+	let n = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		let r = JSON.stringify(t.map((t) => e[t]));
+		n.has(r) || n.set(r, {
+			group: Object.fromEntries(t.map((t) => [t, e[t]])),
+			entries: []
+		}), n.get(r).entries.push(e);
+	}), [...n.values()];
+}, b = (e, t) => t.length == 0 ? [...e] : e.filter((e) => t.reduce((t, n) => Array.isArray(n.key) ? t && n.key.includes(e[n.dim]) : typeof n.key == "function" ? t && n.key(e[n.dim]) : t && e[n.dim] == n.key, !0)), oe = (e, t, n) => t, x = (e) => h.all(e, { arrayMerge: oe }), S = (e, t) => e == t || JSON.stringify(e) == JSON.stringify(t), C = (e, t) => Object.fromEntries(Object.entries(e).map(([e, n], r) => [e, t(n, e)])), se = (e, t) => Array.isArray(e) ? e.map(t) : C(e, t), ce = (e, t, n, r) => e.map((e) => ({
+	group: Object.keys(e.group).map((t) => ({
+		dim: t,
+		key: e.group[t]
+	})),
+	props: t._fill(Object.assign({}, n, ...Object.keys(e.group).map((t) => r[t].props[e.group[t]]))),
+	values: e.entries
+})), le = (e, t, n = !0, r = !1) => {
+	if (e.value === void 0 || e.value === null || r) {
+		if (e.prop == "ref") {
+			let n = t[e.ref];
+			n !== void 0 && (e.value = n);
+		}
+		if (e.prop == "relative") {
+			let n = t[e.ref];
+			n !== void 0 && (e.value = e.ratio * n);
+		}
+		if (e.prop == "steps") {
+			let n = t[e.ref];
+			n !== void 0 && e.steps.forEach((t) => {
+				n > t.cut && (e.value = t.value);
+			});
+		}
+	}
+	return n ? e.value : e;
+}, w = (e, t) => le({ ...k(e) }, t, !0), T = (e, t, n = !0) => E(se(e, k), t, n), E = (e, t, n = !1) => se(e, (e) => le({ ...e }, t, n)), D = (e) => e.prop !== void 0, O = (e) => Object.values(e).flatMap((e) => typeof e != "object" || !e ? [] : D(e) ? typeof e.ref == "string" ? [e.ref.split(":")[0]] : [] : O(e)), k = (e) => {
+	if (typeof e == "object" && !Array.isArray(e) && e !== null) return D(e) ? e : C(e, k);
+	if (typeof e == "string" && e.charAt() == "@") {
+		let t = e.substring(1);
+		return {
+			prop: "ref",
+			ref: t,
+			parts: t.split(":")
+		};
+	}
+	return {
+		prop: "fixed",
+		value: e
+	};
+}, A = (e) => {
+	if (e.props) {
+		let t = e.props;
+		e.props = Object.fromEntries(Object.keys(t.manual).map((e) => {
+			let n = Object.assign({}, t.common, t.manual[e]);
+			return n.name ??= e, n.visible ??= !0, [e, n];
+		}));
+	}
+	return e.scale && (e.scale.type ??= "linear", e.scale.domain ??= [null, null], e.scale.domainAbs || (e.scale.domainRel ??= e.scale.domain.map((e, t) => e === null ? (t == 0 ? -1 : 1) * .02 : 0)), e.scale.domainAbs ??= [0, 0], Array.isArray(e.scale.range) || (e.scale.orientation == "horizontal" ? e.scale.range = [0, "@width"] : e.scale.orientation == "vertical" && (e.scale.range = ["@height", 0]))), e.axis && (e.axis.padding ??= 3), e.hover !== void 0 && e.axis !== void 0 && (e.hover.format ??= e.axis.format), e.legend && (e.legend.props === void 0 && (e.legend.props = {}), "name" in e.legend.props || (e.legend.props.name = "@name")), e.hover && (e.hover.props === void 0 && (e.hover.props = {}), "name" in e.hover.props || (e.hover.props.name = "@name")), e;
+}, ue = (e) => (Object.values(e.mapping).forEach(A), Array.isArray(e.plot) || (e.plot = [e.plot]), e.facets && Array.isArray(e.facets.dim) && (e.facets.dim = e.facets.dim[0]), e.plot.forEach((e, t) => {
+	e.categories ??= [], e.id ??= `plot-${t}`, e.highlightProps = Object.keys(e.props).filter((e) => e.startsWith("highlight-")).map((e) => e.substring(10));
+}), e.plot.forEach((e) => {
+	e.props = C(e.props, k), e._fill = (t) => E(e.props, t);
+}), e), j = (e) => typeof e == "string" ? [...e.matchAll(/\{(\w+)\}/g)].map((e) => e[1]) : [], de = (e, t = {}) => e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : e), M = (e, t) => {
+	let n = e.formElements ?? [], r = /* @__PURE__ */ new Set([...n.flatMap((e) => e.values.flatMap((e) => Object.keys(e.mapping ?? {}))), ...Object.keys(t.mapping ?? {}).filter((e) => j(t.mapping[e].column).length > 0)]);
+	if (r.size == 0) return !1;
+	let i = n.map((t) => t.values.find((n) => S(n.value, e.globals?.[t.ref]))).filter((e) => e && e.mapping);
+	return r.forEach((n) => {
+		let r = i.filter((e) => e.mapping[n]).map((e) => e.mapping[n]), a = x([t.mapping[n] ?? {}, ...r]);
+		typeof a.column == "string" && (a.column = de(a.column, e.globals));
+		let o = A(a);
+		e.mapping[n] && "props" in e.mapping[n] && (o.props = e.mapping[n].props), e.mapping[n] = o;
+	}), !0;
+}, N = (e) => e.charAt(0).toUpperCase() + e.slice(1), P = {
+	de: {
+		number: {
+			decimal: ",",
+			thousands: ".",
+			grouping: [3],
+			currency: ["", " €"]
+		},
+		time: {
+			dateTime: "%A, der %e. %B %Y, %X",
+			date: "%d.%m.%Y",
+			time: "%H:%M:%S",
+			periods: ["AM", "PM"],
+			days: [
+				"Sonntag",
+				"Montag",
+				"Dienstag",
+				"Mittwoch",
+				"Donnerstag",
+				"Freitag",
+				"Samstag"
+			],
+			shortDays: [
+				"So",
+				"Mo",
+				"Di",
+				"Mi",
+				"Do",
+				"Fr",
+				"Sa"
+			],
+			months: [
+				"Januar",
+				"Februar",
+				"März",
+				"April",
+				"Mai",
+				"Juni",
+				"Juli",
+				"August",
+				"September",
+				"Oktober",
+				"November",
+				"Dezember"
+			],
+			shortMonths: [
+				"Jan",
+				"Feb",
+				"Mrz",
+				"Apr",
+				"Mai",
+				"Jun",
+				"Jul",
+				"Aug",
+				"Sep",
+				"Okt",
+				"Nov",
+				"Dez"
+			]
+		},
+		timeTicks: {
+			millisecond: ".%L",
+			second: ":%S",
+			minute: "%H:%M",
+			hour: "%H:%M",
+			day: "%a %d",
+			week: "%d. %b",
+			month: "%B",
+			year: "%Y"
+		}
+	},
+	en: {
+		number: {
+			decimal: ".",
+			thousands: ",",
+			grouping: [3],
+			currency: ["$", ""]
+		},
+		time: {
+			dateTime: "%x, %X",
+			date: "%-m/%-d/%Y",
+			time: "%-I:%M:%S %p",
+			periods: ["AM", "PM"],
+			days: [
+				"Sunday",
+				"Monday",
+				"Tuesday",
+				"Wednesday",
+				"Thursday",
+				"Friday",
+				"Saturday"
+			],
+			shortDays: [
+				"Sun",
+				"Mon",
+				"Tue",
+				"Wed",
+				"Thu",
+				"Fri",
+				"Sat"
+			],
+			months: [
+				"January",
+				"February",
+				"March",
+				"April",
+				"May",
+				"June",
+				"July",
+				"August",
+				"September",
+				"October",
+				"November",
+				"December"
+			],
+			shortMonths: [
+				"Jan",
+				"Feb",
+				"Mar",
+				"Apr",
+				"May",
+				"Jun",
+				"Jul",
+				"Aug",
+				"Sep",
+				"Oct",
+				"Nov",
+				"Dec"
+			]
+		},
+		timeTicks: {
+			millisecond: ".%L",
+			second: ":%S",
+			minute: "%I:%M",
+			hour: "%I %p",
+			day: "%a %d",
+			week: "%b %d",
+			month: "%B",
+			year: "%Y"
+		}
+	}
+}, fe = Object.keys(P), F = {
+	time: [
+		m.timeSecond,
+		m.timeMinute,
+		m.timeHour,
+		m.timeDay,
+		m.timeWeek,
+		m.timeMonth,
+		m.timeYear
+	],
+	utc: [
+		m.utcSecond,
+		m.utcMinute,
+		m.utcHour,
+		m.utcDay,
+		m.utcWeek,
+		m.utcMonth,
+		m.utcYear
+	]
+}, I = (e, t, n) => {
+	let r = Object.fromEntries(Object.entries(t).map(([t, n]) => [t, e(n)])), [i, a, o, s, c, l, u] = n;
+	return (e) => (i(e) < e ? r.millisecond : a(e) < e ? r.second : o(e) < e ? r.minute : s(e) < e ? r.hour : l(e) < e ? c(e) < e ? r.day : r.week : u(e) < e ? r.month : r.year)(e);
+}, pe = (e = "de") => {
+	let t = typeof e == "string" ? { base: e } : e, n = P[t.base ?? "de"];
+	if (!n) throw Error(`Unknown locale '${t.base}', expected one of ${fe.map((e) => `'${e}'`).join(", ")}`);
+	let r = m.formatLocale({
+		...n.number,
+		...t.number
+	}), i = m.timeFormatLocale({
+		...n.time,
+		...t.time
+	}), a = {
+		...n.timeTicks,
+		...t.timeTicks
+	};
+	return {
+		number: r,
+		time: i,
+		tickFormat(e, t, n = 10) {
+			if ([
+				"linear",
+				"pow",
+				"sqrt"
+			].includes(t)) {
+				let [t, i] = e.domain(), a = m.precisionFixed(m.tickStep(t, i, n));
+				return r.format(`,.${Number.isFinite(a) ? a : 0}f`);
+			}
+			return t == "time" ? I(i.format, a, F.time) : t == "utc" ? I(i.utcFormat, a, F.utc) : null;
+		}
+	};
+}, L = [
+	"svg:path",
+	"svg:circle",
+	"svg:line",
+	"svg:rect",
+	"svg:text",
+	"base:area",
+	"bar",
+	"stackedBar"
+], R = [
+	"numeric",
+	"date",
+	"categorical"
+], z = ["horizontal", "vertical"], B = [
+	"top",
+	"bottom",
+	"left",
+	"right"
+], V = [
+	"fixed",
+	"ref",
+	"relative",
+	"steps"
+], H = (e) => e.map((e) => `'${e}'`).join(", "), U = (e, t, n) => {
+	if (typeof e != "object" || !e || Array.isArray(e)) return;
+	if ("prop" in e) {
+		V.includes(e.prop) ? e.prop != "fixed" && typeof e.ref != "string" && n(t, `a '${e.prop}' prop needs a 'ref'`) : n(t, `unknown prop '${e.prop}', expected one of ${H(V)}`);
+		return;
+	}
+	let r = [
+		"ratio",
+		"steps",
+		"ref",
+		"mode"
+	].filter((t) => t in e);
+	if (r.length > 0) return n(t, `has ${H(r)} but no 'prop', so it is not evaluated`);
+	Object.entries(e).forEach(([e, r]) => U(r, `${t}.${e}`, n));
+}, me = (e) => {
+	let t = [], n = (e, n) => t.push(`${e}: ${n}`), r = e.mapping ?? {};
+	e.mapping || n("mapping", "missing"), Object.entries(r).forEach(([e, t]) => {
+		let r = `mapping.${e}`;
+		if (typeof t.column != "string" && n(r, "no 'column'"), t.type !== void 0 && !R.includes(t.type) && n(`${r}.type`, `unknown type '${t.type}', expected one of ${H(R)}`), t.props && !t.props.manual && n(`${r}.props`, "expected 'manual' (and optional 'common') entries"), t.scale) {
+			let e = t.scale.type ?? "linear", i = m[`scale${N(e)}`];
+			typeof i == "function" ? typeof i().ticks == "function" != ["numeric", "date"].includes(t.type) && n(`${r}.scale.type`, `a ${e} scale does not fit the type '${t.type}'`) : n(`${r}.scale.type`, `unknown d3 scale '${e}'`), t.scale.orientation !== void 0 && !z.includes(t.scale.orientation) && n(`${r}.scale.orientation`, `unknown orientation '${t.scale.orientation}', expected one of ${H(z)}`);
+		}
+		t.axis && (t.scale || n(`${r}.axis`, "an axis needs a 'scale'"), B.includes(t.axis.position) || n(`${r}.axis.position`, `unknown position '${t.axis.position}', expected one of ${H(B)}`), U(t.axis.ticks, `${r}.axis.ticks`, n));
+	});
+	let i = [].concat(e.plot ?? []);
+	if (i.length == 0 && n("plot", "missing"), i.forEach((e, t) => {
+		let i = `plot[${t}]`;
+		L.includes(e.type) || n(`${i}.type`, `unknown type '${e.type}', expected one of ${H(L)}`), (e.categories ?? []).filter((e) => !(e in r)).forEach((e) => n(`${i}.categories`, `unknown mapping '${e}'`)), U(e.props, `${i}.props`, n);
+	}), e.facets) {
+		let t = [].concat(e.facets.dim ?? []);
+		t.length != 1 && n("facets.dim", "expected the name of one mapping"), t.filter((e) => !(e in r)).forEach((e) => n("facets.dim", `unknown mapping '${e}'`));
+	}
+	let a = (t, r) => j(t).filter((t) => !(t in (e.globals ?? {}))).forEach((e) => n(r, `unknown global '${e}' in the column template`));
+	return Object.entries(r).forEach(([e, t]) => a(t.column, `mapping.${e}.column`)), (e.formElements ?? []).forEach((e, t) => (e.values ?? []).forEach((e, n) => Object.entries(e.mapping ?? {}).forEach(([e, r]) => a(r.column, `formElements[${t}].values[${n}].mapping.${e}.column`)))), U(e.options?.height, "options.height", n), U(e.facets?.cols, "facets.cols", n), t;
+}, W = (e, t = document.baseURI) => new URL(e, t).href, G = async (e) => {
+	try {
+		return await m.text(e);
+	} catch (t) {
+		throw Error(`Could not load '${e}': ${t.message}`);
+	}
+}, K = (e, t) => {
+	try {
+		return JSON.parse(e);
+	} catch (e) {
+		throw Error(`Invalid JSON in definition ${t}: ${e.message}`);
+	}
+}, he = async (e, t, n = G) => {
+	let r = [e], i = /* @__PURE__ */ new Set();
+	for (; e.parent;) {
+		if (t = W(e.parent, t), i.has(t)) throw Error(`Cyclic parent definition '${t}'`);
+		i.add(t), e = K(await n(t), `'${t}'`), r.unshift(e);
+	}
+	return x(r);
+}, q = (e) => o(Array.from(ee(e))), ge = async ({ def: e = null, defUrl: t = null, data: n = null }) => {
+	let r;
+	e === null ? (r = W(t), e = K(await G(r), `'${r}'`)) : typeof e == "string" && (e = K(e, "attribute"));
+	let i = await he(JSON.parse(JSON.stringify(e)), r);
+	me(i).forEach((e) => console.warn(`gen-vis ${r ?? "inline definition"}: ${e}`));
+	let a = ue(JSON.parse(JSON.stringify(i)));
+	if (M(a, i), n === null) {
+		if (!i.data) throw Error("No data given, neither in the definition nor as attribute.");
+		n = await G(W(i.data, r));
+	}
+	let s = q(g(n));
+	return {
+		defUrl: r ?? null,
+		defOrg: i,
+		locale: o(pe(i.options?.locale)),
+		rows: s,
+		def: a,
+		data: q(ne(s, a))
+	};
+}, _e = class {
+	defUrl = null;
+	defOrg = null;
+	locale = null;
+	def = null;
+	rows = null;
+	data = null;
+	runs = 0;
+	get loaded() {
+		return this.def !== null && this.data !== null;
+	}
+	get axis() {
+		let e = {};
+		return this.mappingNamesWithKey("scale").forEach((t) => {
+			let n = this.mapping(t).scale.orientation;
+			n == "horizontal" && (e.h = t), n == "vertical" && (e.v = t);
+		}), e;
+	}
+	formatter(e) {
+		return e == "time" ? this.locale.time.format : e == "utc" ? this.locale.time.utcFormat : this.locale.number.format;
+	}
+	mapping(e) {
+		return this.def.mapping[e];
+	}
+	prop(e, t) {
+		return this.def.mapping[e].props[t];
+	}
+	mappingNamesWithKey(e) {
+		return Object.keys(this.def.mapping).filter((t) => e in this.def.mapping[t]);
+	}
+	async init(e) {
+		let t = ++this.runs;
+		this.def = this.data = null;
+		try {
+			let n = await ge(e);
+			t == this.runs && Object.assign(this, n);
+		} catch (e) {
+			if (t == this.runs) throw e;
+		}
+	}
+	applyFormElements() {
+		M(this.def, this.defOrg) && (this.data = q(ne(this.rows, this.def)));
+	}
+}, ve = () => u(new _e()), J = (e, t) => {
+	let n = e.mapping.scale, r = m[`scale${N(n.type)}`]();
+	if (r.range(T(n.range, t)), e.extent) {
+		e.domain = [...n.domain], e.domainRel = [...n.domainRel ? n.domainRel : [0, 0]], e.domainAbs = n.domainAbs, e.domain[0] ??= e.extent[0], e.domain[1] ??= e.extent[1];
+		let t = e.domain[1] - e.domain[0];
+		e.domain[0] += t * e.domainRel[0], e.domain[1] += t * e.domainRel[1], e.domain[0] += e.domainAbs[0], e.domain[1] += e.domainAbs[1], r.invertCustom = (t) => e.values[m.bisectCenter(e.values, r.invert(t))];
+	} else e.domain = e.values, n.padding ??= .4, r.padding(n.padding), r.invertCustom = (e) => {
+		let t = Math.floor(e / r.step());
+		return r.domain()[Math.max(0, Math.min(t, r.domain().length - 1))];
+	};
+	r.domain(e.domain), e.scale = r;
+}, Y = function(e) {
+	let t = m.select(this);
+	Object.entries(e).forEach(([e, n], r) => {
+		if (n instanceof Object) {
+			if (!D(n)) return;
+			n = n.value;
+		}
+		if (e == "text") {
+			t.text(n);
+			return;
+		}
+		t.attr(e, n);
+	});
+}, ye = function(e) {
+	let t = m.select(this);
+	e.group.forEach((e) => {
+		t.attr(`data-group-${e.dim}`, e.key);
+	}), e.group.forEach((e) => {
+		t.attr(`data-visible-${e.dim}`, e.visible);
+	}), t.attr("data-visible", e.group.reduce((e, t) => e && t.visible, !0));
+}, be = (e, t, n) => {
+	let r = t.categories.filter((e) => e in n).map((e) => ({
+		attr: `data-group-${e}`,
+		value: String(n[e])
+	}));
+	return r.length == 0 ? null : e.selectAll(`g.plotGroup.${t.id} [${r[0].attr}]`).filter(function() {
+		return r.every((e) => this.getAttribute(e.attr) === e.value);
+	});
+}, X = (e, t, n = null) => {
+	t.filter((e) => e.highlightProps.length > 0).forEach((t) => {
+		e.selectAll(`g.plotGroup.${t.id} .highlight`).classed("highlight", !1).each(function() {
+			let e = m.select(this);
+			t.highlightProps.forEach((t) => e.attr(t, e.attr(`default-${t}`)));
+		});
+		let r = n && be(e, t, n);
+		r && r.classed("highlight", !0).raise().each(function() {
+			let e = m.select(this);
+			t.highlightProps.forEach((t) => {
+				e.attr(`default-${t}`, e.attr(t)).attr(t, e.attr(`highlight-${t}`));
+			});
+		});
+	});
+}, Z = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, xe = {
+	props: [
+		"title",
+		"axis",
+		"side",
+		"data"
+	],
+	data: () => ({ space: 20 }),
+	computed: {
+		left() {
+			return this.side == "left" ? `${this.axis.h.value - this.space}px` : `${this.axis.h.value + this.space}px`;
+		},
+		transform() {
+			return this.side == "left" ? "translate(-100%, -50%)" : "translate(0, -50%)";
+		}
+	},
+	mounted() {
+		this.render();
+	},
+	watch: { data: "render" },
+	methods: { render() {
+		if (!this.$refs.entries || !this.data) return;
+		let e = [...this.data].sort((e, t) => t.entries[this.axis.v.col].value - e.entries[this.axis.v.col].value), t = m.select(this.$refs.entries).selectAll("tr.entry").data(e).join("tr").attr("class", "entry").classed("nearest", (e) => e.nearest);
+		t.selectAll("td").remove(), t.selectAll("td").data((e) => Object.entries(e.entries)).join("td").attr("class", (e) => e[0]).html((e) => typeof e[1] == "object" ? e[1].name : e[1]);
+	} }
+}, Se = { class: "title" }, Ce = {
+	class: "entries",
+	ref: "entries"
+};
+function we(e, t, n, o, s, u) {
+	return n.axis && n.axis.h ? (l(), i("div", {
+		key: 0,
+		class: "hover",
+		ref: "hover",
+		style: c({
+			left: u.left,
+			transform: u.transform
+		})
+	}, [a("div", Se, p(n.axis.h.name), 1), a("table", Ce, null, 512)], 4)) : r("", !0);
+}
+var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]]), Ee = (...e) => e.every((e) => Number.isFinite(e)), De = {
+	props: [
+		"filter",
+		"shared",
+		"height",
+		"width",
+		"margins",
+		"data"
+	],
+	inject: ["store"],
+	data: () => ({
+		info: {},
+		debug: null,
+		def: null,
+		hover: { visible: !1 }
+	}),
+	computed: {
+		innerWidth() {
+			return this.width - (this.margins.left + this.margins.right);
+		},
+		innerHeight() {
+			return this.height - (this.margins.top + this.margins.bottom);
+		},
+		relativeBases() {
+			return {
+				width: this.width,
+				innerWidth: this.innerWidth,
+				height: this.height,
+				innerHeight: this.innerHeight
+			};
+		}
+	},
+	components: { Hover: Te },
+	created() {
+		this.def = this.store.def;
+	},
+	mounted() {
+		this.inner = m.select(this.$refs.inner), this.scales(), this.axis(), this.plot(), this.hoverInit();
+	},
+	unmounted() {
+		document.removeEventListener("pointerdown", this.hideOnPointerOutside);
+	},
+	methods: {
+		plot() {
+			this.def.plot.forEach((e) => {
+				let t = ce(y(this.data, e.categories), e, this.relativeBases, this.def.mapping), n = this.inner.append("g").classed("plotGroup", !0).classed(e.id, !0);
+				this[e.type](t, n);
+			});
+		},
+		_groupwise: function(e, t) {
+			return t.classed("paths", !0).selectAll("path").data(e).enter().append("path").each(function(e) {
+				Y.call(this, e.props);
+			}).each(ye);
+		},
+		_pointwise(e, t, n, r = (e) => e) {
+			return t.classed(n, !0).selectAll("g.group").data(e).enter().append("g").attr("class", "group").each(ye).selectAll(n).data((e) => {
+				let t = O(e.props);
+				return e.values.filter((e) => t.every((t) => e[t] !== null)).map((t) => r(E(e.props, t)));
+			}).enter().append(n).each(Y);
+		},
+		"svg:path": function(e, t) {
+			this._groupwise(e, t).attr("d", (e) => m.line().defined((e) => Ee(e.x, e.y)).x((e) => e.x).y((e) => e.y)(e.values.map((t) => E(e.props.d, t, !0))));
+		},
+		"svg:circle": function(e, t) {
+			this._pointwise(e, t, "circle");
+		},
+		"svg:line": function(e, t) {
+			this._pointwise(e, t, "line");
+		},
+		"svg:rect": function(e, t) {
+			this._pointwise(e, t, "rect");
+		},
+		"svg:text": function(e, t) {
+			this._pointwise(e, t, "text");
+		},
+		"base:area": function(e, t) {
+			this._groupwise(e, t).attr("d", (e) => m.area().defined((e) => Ee(e.x, e.y0, e.y1)).x((e) => e.x).y1((e) => e.y1).y0((e) => e.y0)(e.values.map((t) => E(e.props.d, t, !0))));
+		},
+		bar(e, t) {
+			let n = this;
+			this._pointwise(e, t, "rect", (e) => {
+				let t = e.height.parts[0], r = n.info[t].scale(0);
+				if (e.width === void 0) {
+					let t = e.cx.parts[0];
+					e.width = k(n.info[t].scale.step() * (1 - n.info[t].scale.padding()));
+				}
+				return e.x = k(e.cx.value - e.width.value / 2), delete e.cx, e.y = k(e.height.value), e.height = k(r - e.height.value), e;
+			});
+		},
+		stackedBar(e, t) {
+			e.forEach((e) => {
+				let t = e.props.x.ref, n = e.props.y.ref;
+				e.props.x = k(`@${t}:scaled`), e.props.y = k(`@${n}:st:e:scaled`), e.props.height = k(`@${n}:st:h:scaled`), e.props.transform = k(`translate(-${e.props.width.value / 2} 0)`);
+			}), this._pointwise(e, t, "rect", (e) => (e.height.value < 0 && (e.y.value += e.height.value, e.height.value = -e.height.value), e));
+		},
+		scales() {
+			let e = {};
+			this.store.mappingNamesWithKey("scale").filter((e) => !Object.keys(this.shared).includes(e)).forEach((t) => {
+				let n = {
+					dim: t,
+					mapping: this.store.mapping(t)
+				};
+				re(n, this.data), J(n, {
+					width: this.innerWidth,
+					height: this.innerHeight
+				}), e[t] = n;
+			}), v(this.data, e), this.info = {
+				...this.shared,
+				...e
+			};
+		},
+		axis() {
+			this.store.mappingNamesWithKey("axis").forEach((e) => {
+				let t = this.store.mapping(e), n = t.axis, r = this.info[e].scale, i = w(n.ticks, this.relativeBases), a = m[`axis${N(n.position)}`](r).tickSizeInner(9).tickSizeOuter(0).ticks(i).tickPadding(n.padding);
+				if (n.format) a.tickFormat(this.store.formatter(t.scale.type)(n.format));
+				else if (!n.values) {
+					let e = this.store.locale.tickFormat(r, t.scale.type, i);
+					e && a.tickFormat(e);
+				}
+				if (n.values && a.tickValues(n.values), n.grid) {
+					let e = n.values ?? (r.ticks ? r.ticks(i) : r.domain());
+					this.grid(r, e, ["left", "right"].includes(n.position));
+				}
+				let o = this.inner.append("g").attr("class", `axis-name-${e} axis-position-${n.position}`).call(a);
+				if (n.position == "bottom" && o.attr("transform", `translate(0, ${this.innerHeight})`), n.position == "right" && o.attr("transform", `translate(${this.innerWidth}, 0)`), n.rotate && o.selectAll("text").attr("text-anchor", n.rotate > 0 ? "end" : "start").attr("transform", `rotate(${-n.rotate})`), n.title) {
+					let e = this.inner.append("text").attr("class", "axis-title").attr("y", 0).attr("x", 0).attr("text-anchor", "middle").attr("dominant-baseline", "middle").text(n.title.name);
+					n.position == "left" && e.attr("transform", `rotate(-90) translate(-${this.innerHeight / 2} -${n.title.offset})`), n.position == "right" && e.attr("transform", `rotate(90) translate(${this.innerHeight / 2} -${this.innerWidth + n.title.offset})`), n.position == "top" && e.attr("transform", `translate(${this.innerWidth / 2} -${n.title.offset})`), n.position == "bottom" && e.attr("transform", `translate(${this.innerWidth / 2} ${this.innerHeight + n.title.offset})`);
+				}
+			});
+		},
+		grid(e, t, n) {
+			let r = e.bandwidth ? e.bandwidth() / 2 : 0, i = this.inner.append("g").attr("class", "grid").selectAll("line").data(t).enter().append("line");
+			n ? i.attr("x1", 0).attr("x2", this.innerWidth).attr("y1", (t) => e(t) + r).attr("y2", (t) => e(t) + r) : i.attr("y1", 0).attr("y2", this.innerHeight).attr("x1", (t) => e(t) + r).attr("x2", (t) => e(t) + r);
+		},
+		hoverInit() {
+			let e = this, t = this.store.axis;
+			if (!t.h || !t.v) return;
+			let n = Object.fromEntries(Object.entries(t).map(([e, t]) => {
+				let n = this.def.mapping[t], r = n.hover?.format ?? n.axis?.format ?? (["time", "utc"].includes(n.scale.type) ? "%x" : "c");
+				return [e, {
+					axis: e,
+					name: t,
+					formatter: this.store.formatter(n.scale.type)(r)
+				}];
+			})), r = this.store.mappingNamesWithKey("hover").filter((e) => e != t.h && e != t.v && this.store.mapping(e).props), i = m.select(this.$refs.hoverMarker).select("line"), a = () => {
+				e.hover.visible = !1, X(e.inner, e.def.plot);
+			};
+			this.hideOnPointerOutside = (t) => {
+				e.hover.visible && !e.$refs.svg.contains(t.target) && a();
+			}, document.addEventListener("pointerdown", this.hideOnPointerOutside), this.inner.append("rect").attr("class", "events").attr("width", this.innerWidth).attr("height", this.innerHeight).attr("opacity", 0).style("touch-action", "pan-y").on("pointerdown pointermove", function(t) {
+				e.hover.visible = !0;
+				let a = m.pointer(t), o = e.info[n.h.name], s = o.scale.invertCustom(a[0]);
+				if (s === void 0) return;
+				let c = o.scale(s);
+				i.attr("x1", c).attr("x2", c).attr("y1", 0).attr("y2", e.innerHeight);
+				let l = b(e.data, [{
+					dim: n.h.name,
+					key: s
+				}]).filter((e) => e[n.v.name] !== null).map((t) => {
+					let i = {
+						entries: {},
+						data: t,
+						nearest: !1
+					};
+					return r.forEach((n) => {
+						i.entries[n] = T(e.store.mapping(n).hover.props, e.store.prop(n, t[n]));
+					}), i.entries[n.v.name] = {
+						value: t[n.v.name],
+						name: n.v.formatter(t[n.v.name])
+					}, i;
+				}), u = e.info[n.v.name].scale.invert(a[1]), d = n.v.name, f;
+				f = e.store.mapping(d).stacked ? m.least(l, (e) => {
+					let [t, n] = m.extent([e.data[`${d}:st:s`], e.data[`${d}:st:e`]]);
+					return u < t ? t - u : u > n ? u - n : 0;
+				}) : m.least(l, (e) => Math.abs(e.data[d] - u)), f && (f.nearest = !0), X(e.inner, e.def.plot, f?.data), e.hover.data = l, e.hover.axis = {
+					h: {
+						col: n.h.name,
+						value: c,
+						name: n.h.formatter(s)
+					},
+					v: {
+						col: n.v.name,
+						value: u
+					}
+				}, e.hover.side = c > e.innerWidth / 2 ? "left" : "right";
+			}).on("pointerleave", (e) => {
+				e.pointerType != "touch" && a();
+			}).on("pointercancel", a);
+		}
+	}
+}, Oe = ["width", "height"], ke = ["transform"], Ae = ["visibility"], je = {
+	key: 0,
+	class: "debug"
+};
+function Me(e, t, o, s, u, d) {
+	let ee = f("hover");
+	return l(), i("div", {
+		style: c(`width: ${o.width}px;`),
+		class: "vis-inner"
+	}, [
+		(l(), i("svg", {
+			ref: "svg",
+			width: o.width,
+			height: o.height,
+			class: "facet"
+		}, [a("g", {
+			ref: "inner",
+			transform: `translate(${o.margins.left} ${o.margins.top})`
+		}, [a("g", {
+			visibility: e.hover.visible ? "visible" : "hidden",
+			class: "hoverMarker",
+			ref: "hoverMarker"
+		}, [...t[0] ||= [a("line", null, null, -1)]], 8, Ae)], 8, ke)], 8, Oe)),
+		a("div", { style: c(`transform: translate(${o.margins.left}px, ${o.margins.top + d.innerHeight / 2}px); position: absolute; top: 0; left: 0;`) }, [e.hover.visible ? (l(), n(ee, {
+			key: 0,
+			data: e.hover.data,
+			side: e.hover.side,
+			axis: e.hover.axis
+		}, null, 8, [
+			"data",
+			"side",
+			"axis"
+		])) : r("", !0)], 4),
+		e.debug ? (l(), i("span", je, p(e.debug), 1)) : r("", !0)
+	], 4);
+}
+var Ne = /*#__PURE__*/ Z(De, [["render", Me], ["__scopeId", "data-v-1f05a06e"]]), Pe = {
+	props: ["info", "props"],
+	mounted() {
+		let e = m.select(this.$refs.legendSymbol);
+		this.info.elements.forEach((t) => {
+			let n = e.append(t.type);
+			Y.call(n.node(), T(t.props, this.props));
+		});
+	}
+}, Fe = ["width", "height"];
+function Ie(e, t, n, r, a, o) {
+	return l(), i("svg", {
+		width: n.info.size,
+		height: n.info.size,
+		ref: "legendSymbol"
+	}, null, 8, Fe);
+}
+//#endregion
+//#region src/comp/Legend.vue
+var Le = {
+	props: ["legend"],
+	inject: ["store"],
+	data: () => ({
+		info: {},
+		entries: []
+	}),
+	components: { LegendSymbol: /* @__PURE__ */ Z(Pe, [["render", Ie], ["__scopeId", "data-v-ce0e972e"]]) },
+	mounted() {
+		this.info = this.store.mapping(this.legend), this.entries = Object.keys(this.info.props).map((e) => ({
+			key: e,
+			props: this.info.props[e],
+			filled: T(this.info.legend.props, this.info.props[e])
+		}));
+	},
+	methods: { switched(e) {
+		e.props.visible = !e.props.visible, this.$emit("changeSelected", {
+			dim: this.legend,
+			key: e.key,
+			selected: e.props.visible
+		});
+	} }
+}, Re = ["data-dim"], ze = { class: "title" }, Be = { class: "entries" }, Ve = [
+	"data-visible",
+	"data-key",
+	"onClick",
+	"onMouseenter"
+], He = ["innerHTML"];
+function Ue(t, o, c, u, ee, m) {
+	let h = f("LegendSymbol");
+	return l(), i("div", {
+		class: "legend",
+		"data-dim": c.legend
+	}, [a("div", ze, p(t.info.name), 1), a("div", Be, [(l(!0), i(e, null, d(t.entries, (e) => (l(), i("div", s({
+		"data-visible": e.props.visible,
+		"data-key": e.key
+	}, { ref_for: !0 }, Object.assign({ ...e.filled }, { name: null }), {
+		onClick: (t) => m.switched(e),
+		onMouseenter: (n) => t.$emit("highlight", {
+			dim: this.legend,
+			key: e.key
+		}),
+		onMouseleave: o[0] ||= (e) => t.$emit("highlight", {})
+	}), [t.info.legend.symbol ? (l(), n(h, {
+		key: 0,
+		info: t.info.legend.symbol,
+		props: e.props
+	}, null, 8, ["info", "props"])) : r("", !0), a("span", { innerHTML: e.filled.name }, null, 8, He)], 16, Ve))), 256))])], 8, Re);
+}
+var We = /*#__PURE__*/ Z(Le, [["render", Ue], ["__scopeId", "data-v-1bc8d55f"]]), Ge = {
+	props: ["element", "globals"],
+	computed: { vg() {
+		return this.globals[this.element.ref];
+	} },
+	methods: {
+		switched(e) {
+			this.globals[this.element.ref] = e.value, this.$emit("changeSelected", {});
+		},
+		equal(e) {
+			return S(e, this.vg);
+		}
+	}
+}, Ke = ["id"], qe = { class: "title" }, Je = {
+	key: 0,
+	class: "entries"
+}, Ye = ["id", "onClick"], Xe = [
+	"name",
+	"value",
+	"checked"
+], Ze = ["for"];
+function Qe(t, n, o, s, c, u) {
+	return l(), i("div", {
+		class: "formElement",
+		id: `container-${o.element.id}`
+	}, [a("div", qe, p(o.element.name) + ":", 1), o.element.type == "switch" ? (l(), i("div", Je, [(l(!0), i(e, null, d(o.element.values, (e) => (l(), i("div", {
+		id: `container-${e.id}`,
+		onClick: (t) => u.switched(e)
+	}, [a("input", {
+		type: "radio",
+		name: o.element.id,
+		value: e.id,
+		checked: u.equal(e.value)
+	}, null, 8, Xe), a("label", { for: e.id }, p(e.name), 9, Ze)], 8, Ye))), 256))])) : r("", !0)], 8, Ke);
+}
+//#endregion
+//#region src/comp/Vis.vue
+var $e = {
+	inject: ["store"],
+	data: () => ({
+		initialized: !1,
+		options: {},
+		globals: {},
+		legends: [],
+		formElements: [],
+		filter: [],
+		data: [],
+		facets: {
+			shared: {},
+			entries: [],
+			height: 0,
+			width: 0,
+			margins: {
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0
+			}
+		}
+	}),
+	computed: {
+		innerWidth() {
+			return this.options.width - (this.options.margins.left + this.options.margins.right);
+		},
+		innerHeight() {
+			return this.options.height - (this.options.margins.top + this.options.margins.bottom);
+		}
+	},
+	components: {
+		Facet: Ne,
+		LegendEntry: We,
+		FormElement: /* @__PURE__ */ Z(Ge, [["render", Qe], ["__scopeId", "data-v-ec3facd5"]])
+	},
+	mounted() {
+		this.baseInit(), this.dataInit(), this.scales(), this.store.def.options.width || (this.resizeObserver = new ResizeObserver(() => {
+			clearTimeout(this.resizeTimeout), this.resizeTimeout = setTimeout(this.resized, 100);
+		}), this.resizeObserver.observe(this.$refs.vis));
+	},
+	unmounted() {
+		this.resizeObserver?.disconnect(), clearTimeout(this.resizeTimeout);
+	},
+	methods: {
+		baseInit() {
+			this.legends = this.store.mappingNamesWithKey("legend"), this.formElements = this.store.def.formElements, this.globals = this.store.def.globals, this.options = Object.assign({}, this.store.def.options), this.measure();
+		},
+		measure() {
+			let e = this.store.def.options;
+			this.options.width = e.width || this.$refs.vis.getBoundingClientRect().width, this.options.height = w(e.height, { totalWidth: this.options.width });
+		},
+		resized() {
+			let e = this.$refs.vis?.getBoundingClientRect().width;
+			e && e != this.options.width && (this.measure(), this.dataInit(), this.scales());
+		},
+		dataInit() {
+			let e = this.store.def, t = this.store.axis;
+			if (this.filter = this.store.mappingNamesWithKey("props").map((e) => ({
+				dim: e,
+				key: Object.keys(this.store.mapping(e).props).filter((t) => this.store.mapping(e).props[t].visible)
+			})), this.data = o(b(this.store.data, this.filter)), t.v && this.store.mapping(t.v).stacked) {
+				let n = ie(this.filter.map((e) => ({
+					dim: e.dim,
+					keys: e.key
+				})));
+				ae(this.data, t, e.facets ? [e.facets.dim] : [], n);
+			}
+			if (e.facets) {
+				this.facets.margins = this.options.margins, this.facets.height = this.options.height;
+				let t = w(e.facets.cols, { totalWidth: this.options.width });
+				this.facets.width = this.options.width / t;
+				let n = e.facets.dim, r = Object.keys(this.store.mapping(n).props), i = y(this.data, [n]);
+				this.facets.entries = i.filter((e) => r.includes(e.group[n])).sort((e, t) => r.indexOf(e.group[n]) - r.indexOf(t.group[n])).map((e) => ({
+					filter: {
+						dim: e.group[n],
+						key: n,
+						name: this.store.mapping(n).props[e.group[n]].name
+					},
+					data: o(e.entries)
+				}));
+			}
+		},
+		scales() {
+			let e = this.store.def;
+			if (e.facets && e.facets.scales) {
+				let t = w(e.facets.scales, e.globals).map((e) => {
+					let t = {
+						dim: e,
+						mapping: this.store.mapping(e)
+					};
+					return re(t, this.data), J(t, {
+						width: this.facets.width - (this.facets.margins.left + this.facets.margins.right),
+						height: this.facets.height - (this.facets.margins.top + this.facets.margins.bottom)
+					}), t;
+				});
+				v(this.data, t), this.facets.shared = Object.fromEntries(t.map((e) => [e.dim, e]));
+			}
+			this.initialized = !0;
+		},
+		changeSelected(e) {
+			this.dataInit(), this.scales();
+		},
+		formChanged(e) {
+			this.store.applyFormElements(), this.changeSelected(e);
+		},
+		highlight(e) {
+			X(m.select(this.$refs.vis), this.store.def.plot, { [e.dim]: e.key });
+		}
+	}
+}, et = { class: "vis-header" }, tt = { class: "title" }, nt = { class: "subtitle" }, rt = {
+	ref: "form",
+	class: "vis-form-elements"
+}, it = {
+	ref: "legends",
+	class: "vis-legends"
+}, at = {
+	key: 0,
+	class: "vis-body"
+}, ot = { class: "vis-footer" }, st = ["innerHTML"];
+function ct(t, o, s, u, ee, m) {
+	let h = f("form-element"), g = f("legend-entry"), _ = f("facet");
+	return l(), i("div", {
+		class: "vis",
+		ref: "vis",
+		style: c({ "--gen-vis-font-family": t.options.fontFamily })
+	}, [
+		a("div", et, [a("div", tt, p(t.options.title), 1), a("div", nt, p(t.options.subtitle), 1)]),
+		a("div", rt, [(l(!0), i(e, null, d(t.formElements, (e) => (l(), n(h, {
+			element: e,
+			globals: t.globals,
+			onChangeSelected: m.formChanged
+		}, null, 8, [
+			"element",
+			"globals",
+			"onChangeSelected"
+		]))), 256))], 512),
+		a("div", it, [(l(!0), i(e, null, d(t.legends, (e) => (l(), n(g, {
+			legend: e,
+			onChangeSelected: m.changeSelected,
+			onHighlight: m.highlight
+		}, null, 8, [
+			"legend",
+			"onChangeSelected",
+			"onHighlight"
+		]))), 256))], 512),
+		t.initialized ? (l(), i("div", at, [t.facets.entries.length > 0 ? (l(!0), i(e, { key: 0 }, d(t.facets.entries, (e) => (l(), i("div", { style: c(`width: ${t.facets.width}px; display: inline-block;`) }, [a("div", {
+			class: "facet-title",
+			style: c(`margin-left: ${t.facets.margins.left}px`)
+		}, p(e.filter.name), 5), (l(), n(_, {
+			key: e.data,
+			data: e.data,
+			shared: t.facets.shared,
+			height: t.facets.height,
+			width: t.facets.width,
+			margins: t.facets.margins
+		}, null, 8, [
+			"data",
+			"shared",
+			"height",
+			"width",
+			"margins"
+		]))], 4))), 256)) : (l(), n(_, {
+			key: t.data,
+			data: t.data,
+			shared: {},
+			height: t.options.height,
+			width: t.options.width,
+			margins: t.options.margins
+		}, null, 8, [
+			"data",
+			"height",
+			"width",
+			"margins"
+		]))])) : r("", !0),
+		a("div", ot, [a("span", { innerHTML: t.options.footer }, null, 8, st)])
+	], 4);
+}
+//#endregion
+//#region src/comp/App.vue
+var lt = {
+	name: "GenVis",
+	props: {
+		debug: {
+			type: Boolean,
+			default: !1
+		},
+		defFile: {
+			type: String,
+			default: null
+		},
+		def: {
+			type: [Object, String],
+			default: null
+		},
+		data: {
+			type: [Array, String],
+			default: null
+		}
+	},
+	data: () => ({
+		store: ve(),
+		error: null
+	}),
+	provide() {
+		return { store: this.store };
+	},
+	components: { VisBase: /* @__PURE__ */ Z($e, [["render", ct], ["__scopeId", "data-v-b07c17d2"]]) },
+	watch: {
+		def: "init",
+		defFile: "init",
+		data: "init"
+	},
+	mounted() {
+		this.init();
+	},
+	errorCaptured(e) {
+		return this.showError(e), !1;
+	},
+	methods: {
+		async init() {
+			if (this.error = null, this.def === null && this.defFile === null) return this.showError(/* @__PURE__ */ Error("No definition given."));
+			try {
+				await this.store.init({
+					def: this.def,
+					defUrl: this.defFile,
+					data: this.data
+				});
+			} catch (e) {
+				this.showError(e);
+			}
+		},
+		showError(e) {
+			console.error(e), this.error = e.message;
+		}
+	}
+}, ut = { class: "vis-outer" }, dt = {
+	key: 0,
+	class: "vis-error"
+}, ft = { key: 2 }, pt = { style: {
+	height: "500px",
+	overflow: "auto",
+	"font-size": "11px"
+} }, mt = { style: {
+	height: "500px",
+	overflow: "auto",
+	"font-size": "11px"
+} };
+function ht(e, t, o, s, c, u) {
+	let d = f("vis-base");
+	return l(), i("div", ut, [e.error ? (l(), i("div", dt, p(e.error), 1)) : e.store.loaded ? (l(), n(d, { key: 1 })) : r("", !0), o.debug && e.store.def ? (l(), i("div", ft, [
+		t[0] ||= a("h3", null, "prepared:", -1),
+		a("pre", pt, p(JSON.stringify(e.store.def, null, 4)), 1),
+		t[1] ||= a("h3", null, "org:", -1),
+		a("pre", mt, p(JSON.stringify(e.store.defOrg, null, 4)), 1)
+	])) : r("", !0)]);
+}
+var Q = /*#__PURE__*/ Z(lt, [["render", ht], ["__scopeId", "data-v-a9d47434"]]), gt = { install(e) {
+	e.component("GenVis", Q);
+} }, $ = (e) => {
+	let n = Object.fromEntries(e.getAttributeNames().filter((e) => e.startsWith("data-")).map((t) => [t.substring(5), e.getAttribute(t)]));
+	return t(Q, n).mount(e);
+}, _t = (e) => {
+	for (let t of document.getElementsByClassName(e)) t.classList.contains("gen-vis-attached") || (t.classList.add("gen-vis-attached"), $(t));
+};
+//#endregion
+export { Q as GenVis, gt as default, _t as mountGenVisByClass, $ as mountGenVisElement };