@preschen/gen-vis 0.6.0 → 0.8.0

package/README.md

@@ -15,7 +15,7 @@ the styles, and provides two global functions:
 ```html
 <div class="genVis" data-def-file="/data/bev/def.json"></div>
 
-<script src="gen-vis-0.6.0.js"></script>
+<script src="gen-vis-0.8.0.js"></script>
 <script>mountGenVisByClass('genVis')</script>
 ```
 
@@ -49,11 +49,32 @@ well.
 | `def`      | `data-def`      | the definition, an object or a JSON string |
 | `data`     | `data-data`     | the data as rows or a CSV/JSON string, if not given it is loaded from the `data` url of the definition |
 | `debug`    | `data-debug`    | shows the prepared definition |
+| `state`    |                 | the changes of the user, see [state](#state) |
 
 Every visualisation has its own state, several of them can be used on a page.
 If the props change, the visualisation is loaded again. Errors are shown in
 place of the visualisation.
 
+### State
+
+The state holds what the user changed compared to the definition: the
+globals of the form elements and the entries of the legends shown or hidden.
+
+```json
+{ "globals": { "column": "share" }, "visible": { "year": { "2019": true, "2022": false } } }
+```
+
+The component emits `update:state` on every change of the user, so with
+`v-model:state` the page can keep it, e.g. in the local storage. A given state
+is applied when the visualisation is loaded, a new one (`null` for the
+definition) is applied without loading it again. Globals, values and entries
+the definition does not have (anymore) are ignored, new entries of the
+definition keep their defaults.
+
+```html
+<GenVis def-file="/data/bev/def.json" v-model:state="state"/>
+```
+
 ### Styles
 
 The styles of the package are in the cascade layer `gen-vis`, so every style
@@ -92,6 +113,19 @@ its `parent` (and its parent into its own parent), arrays are replaced, not
 merged. The merged definition is checked for common mistakes, e.g. unknown
 plot types, the findings are logged as warnings in the console.
 
+`parent` can also be a list of definitions (mixins), merged in their order,
+later ones override earlier ones, e.g. a chart type and a form element:
+
+```json
+{
+    "parent": ["../shared/years.json", "../shared/scale-switch.json"],
+    "data": "data.csv"
+}
+```
+
+A parent shared by several mixins is merged once, before the first mixin
+using it, so it does not override the mixins in between.
+
 The package contains a JSON Schema of the definitions, `schema.json`. With
 `"$schema"` in a definition, editors like VS Code complete and check it:
 

package/dist/gen-vis.js

@@ -1,4 +1,4 @@
-(() => { 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); })();
+(() => { 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-acf88417]{margin:2px 16px 2px 4px;font-size:13px;display:inline-block}.formElement .title[data-v-acf88417]{margin-right:5px;font-weight:700;display:inline-block}.formElement .entries[data-v-acf88417]{display:inline-block}.formElement .entries>div[data-v-acf88417]{margin-right:5px;display:inline-block}.formElement .entries>div input[data-v-acf88417]{display:inline-block;position:relative;top:1px}.vis[data-v-d870f406] text,.vis[data-v-d870f406] span,.vis[data-v-d870f406] div{font-family:var(--gen-vis-font-family,Century Gothic, sans-serif)}.vis-header .title[data-v-d870f406]{font-size:22px;font-weight:700}.vis-header .subtitle[data-v-d870f406]{margin-top:3px;font-size:13px}.vis-header[data-v-d870f406]{margin-bottom:10px}.vis-footer span[data-v-d870f406]{font-size:13px}.facet-title[data-v-d870f406]{margin-top:8px;font-size:13px;font-weight:700}.vis-error[data-v-7b1c318b]{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";
@@ -86,8 +86,8 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}
 	}
 	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);
+}, w = (e, t) => le({ ...O(e) }, t, !0), T = (e, t, n = !0) => E(se(e, O), t, n), E = (e, t, n = !1) => se(e, (e) => le({ ...e }, t, n)), D = (e) => e.prop !== void 0, ue = (e) => Object.values(e).flatMap((e) => typeof e != "object" || !e ? [] : D(e) ? typeof e.ref == "string" ? [e.ref.split(":")[0]] : [] : ue(e)), O = (e) => {
+	if (typeof e == "object" && !Array.isArray(e) && e !== null) return D(e) ? e : C(e, O);
 	if (typeof e == "string" && e.charAt() == "@") {
 		let t = e.substring(1);
 		return {
@@ -100,7 +100,7 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		prop: "fixed",
 		value: e
 	};
-}, A = (e) => {
+}, k = (e) => {
 	if (e.props) {
 		let t = e.props;
 		e.props = Object.fromEntries(Object.keys(t.manual).map((e) => {
@@ -109,21 +109,21 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}));
 	}
 	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) => {
+}, de = (e) => (Object.values(e.mapping).forEach(k), 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)]);
+	e.props = C(e.props, O), e._fill = (t) => E(e.props, t);
+}), e), A = (e) => typeof e == "string" ? [...e.matchAll(/\{(\w+)\}/g)].map((e) => e[1]) : [], fe = (e, t = {}) => e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : e), j = (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) => A(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);
+		typeof a.column == "string" && (a.column = fe(a.column, e.globals));
+		let o = k(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 = {
+}, M = (e) => e.charAt(0).toUpperCase() + e.slice(1), N = {
 	de: {
 		number: {
 			decimal: ",",
@@ -264,7 +264,7 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			year: "%Y"
 		}
 	}
-}, fe = Object.keys(P), F = {
+}, pe = Object.keys(N), P = {
 	time: [
 		m.timeSecond,
 		m.timeMinute,
@@ -283,12 +283,12 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		m.utcMonth,
 		m.utcYear
 	]
-}, I = (e, t, n) => {
+}, F = (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(", ")}`);
+}, me = (e = "de") => {
+	let t = typeof e == "string" ? { base: e } : e, n = N[t.base ?? "de"];
+	if (!n) throw Error(`Unknown locale '${t.base}', expected one of ${pe.map((e) => `'${e}'`).join(", ")}`);
 	let r = m.formatLocale({
 		...n.number,
 		...t.number
@@ -311,10 +311,10 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 				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;
+			return t == "time" ? F(i.format, a, P.time) : t == "utc" ? F(i.utcFormat, a, P.utc) : null;
 		}
 	};
-}, L = [
+}, I = [
 	"svg:path",
 	"svg:circle",
 	"svg:line",
@@ -323,24 +323,24 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	"base:area",
 	"bar",
 	"stackedBar"
-], R = [
+], L = [
 	"numeric",
 	"date",
 	"categorical"
-], z = ["horizontal", "vertical"], B = [
+], R = ["horizontal", "vertical"], z = [
 	"top",
 	"bottom",
 	"left",
 	"right"
-], V = [
+], B = [
 	"fixed",
 	"ref",
 	"relative",
 	"steps"
-], H = (e) => e.map((e) => `'${e}'`).join(", "), U = (e, t, n) => {
+], V = (e) => e.map((e) => `'${e}'`).join(", "), H = (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)}`);
+		B.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 ${V(B)}`);
 		return;
 	}
 	let r = [
@@ -349,77 +349,104 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		"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) => {
+	if (r.length > 0) return n(t, `has ${V(r)} but no 'prop', so it is not evaluated`);
+	Object.entries(e).forEach(([e, r]) => H(r, `${t}.${e}`, n));
+}, he = (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)}`);
+		if (typeof t.column != "string" && n(r, "no 'column'"), t.type !== void 0 && !L.includes(t.type) && n(`${r}.type`, `unknown type '${t.type}', expected one of ${V(L)}`), 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${M(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 && !R.includes(t.scale.orientation) && n(`${r}.scale.orientation`, `unknown orientation '${t.scale.orientation}', expected one of ${V(R)}`);
 		}
-		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));
+		t.axis && (t.scale || n(`${r}.axis`, "an axis needs a 'scale'"), z.includes(t.axis.position) || n(`${r}.axis.position`, `unknown position '${t.axis.position}', expected one of ${V(z)}`), H(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);
+		I.includes(e.type) || n(`${i}.type`, `unknown type '${e.type}', expected one of ${V(I)}`), (e.categories ?? []).filter((e) => !(e in r)).forEach((e) => n(`${i}.categories`, `unknown mapping '${e}'`)), H(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) => {
+	let a = (t, r) => A(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`)))), H(e.options?.height, "options.height", n), H(e.facets?.cols, "facets.cols", n), t;
+}, U = (e) => ({
+	globals: Object.fromEntries((e.formElements ?? []).map((t) => [t.ref, e.globals?.[t.ref]])),
+	visible: Object.fromEntries(Object.entries(e.mapping).filter(([e, t]) => t.legend && t.props).map(([e, t]) => [e, Object.fromEntries(Object.entries(t.props).map(([e, t]) => [e, t.visible]))]))
+}), ge = (e, t) => {
+	let n = {}, r = Object.fromEntries(Object.entries(e.globals).filter(([e, n]) => !S(n, t.globals[e])));
+	Object.keys(r).length > 0 && (n.globals = r);
+	let i = Object.fromEntries(Object.entries(e.visible).map(([e, n]) => [e, Object.fromEntries(Object.entries(n).filter(([n, r]) => r != t.visible[e]?.[n]))]).filter(([e, t]) => Object.keys(t).length > 0));
+	return Object.keys(i).length > 0 && (n.visible = i), n;
+}, W = (e, t) => {
+	Object.entries(t?.globals ?? {}).forEach(([t, n]) => {
+		let r = (e.formElements ?? []).filter((e) => e.ref == t).flatMap((e) => e.values).find((e) => S(e.value, n));
+		r && e.globals && (e.globals[t] = r.value);
+	}), Object.entries(t?.visible ?? {}).forEach(([t, n]) => {
+		let r = e.mapping[t];
+		r?.legend && r.props && Object.entries(n).forEach(([e, t]) => {
+			e in r.props && (r.props[e].visible = !!t);
+		});
+	});
+}, G = (e, t = document.baseURI) => new URL(e, t).href, K = async (e) => {
 	try {
 		return await m.text(e);
 	} catch (t) {
 		throw Error(`Could not load '${e}': ${t.message}`);
 	}
-}, K = (e, t) => {
+}, q = (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));
+}, _e = async (e, t, n = K) => {
+	let r = [], i = /* @__PURE__ */ new Set(), a = async (e, t, o) => {
+		for (let r of [e.parent ?? []].flat()) {
+			let e = G(r, t);
+			if (o.includes(e)) throw Error(`Cyclic parent definition '${e}'`);
+			i.has(e) || (i.add(e), await a(q(await n(e), `'${e}'`), e, [...o, e]));
+		}
+		r.push(e);
+	};
+	return await a(e, t, []), x(r);
+}, J = (e) => o(Array.from(ee(e))), ve = async ({ def: e = null, defUrl: t = null, data: n = null, state: r = null }) => {
+	let i;
+	e === null ? (i = G(t), e = q(await K(i), `'${i}'`)) : typeof e == "string" && (e = q(e, "attribute"));
+	let a = await _e(JSON.parse(JSON.stringify(e)), i);
+	he(a).forEach((e) => console.warn(`gen-vis ${i ?? "inline definition"}: ${e}`));
+	let s = de(JSON.parse(JSON.stringify(a))), c = U(s);
+	if (W(s, r), j(s, a), n === null) {
+		if (!a.data) throw Error("No data given, neither in the definition nor as attribute.");
+		n = await K(G(a.data, i));
 	}
-	let s = q(g(n));
+	let l = J(g(n));
 	return {
-		defUrl: r ?? null,
-		defOrg: i,
-		locale: o(pe(i.options?.locale)),
-		rows: s,
-		def: a,
-		data: q(ne(s, a))
+		defUrl: i ?? null,
+		defOrg: a,
+		locale: o(me(a.options?.locale)),
+		rows: l,
+		def: s,
+		defaults: c,
+		data: J(ne(l, s))
 	};
-}, _e = class {
+}, ye = class {
 	defUrl = null;
 	defOrg = null;
 	locale = null;
 	def = null;
 	rows = null;
 	data = null;
+	defaults = null;
 	runs = 0;
+	stateSets = 0;
 	get loaded() {
 		return this.def !== null && this.data !== null;
 	}
+	get state() {
+		return this.loaded ? ge(U(this.def), this.defaults) : null;
+	}
 	get axis() {
 		let e = {};
 		return this.mappingNamesWithKey("scale").forEach((t) => {
@@ -443,17 +470,20 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		let t = ++this.runs;
 		this.def = this.data = null;
 		try {
-			let n = await ge(e);
+			let n = await ve(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)));
+		j(this.def, this.defOrg) && (this.data = J(ne(this.rows, this.def)));
 	}
-}, ve = () => u(new _e()), J = (e, t) => {
-	let n = e.mapping.scale, r = m[`scale${N(n.type)}`]();
+	setState(e) {
+		W(this.def, this.defaults), W(this.def, e), this.applyFormElements(), this.stateSets++;
+	}
+}, be = () => u(new ye()), xe = (e, t) => {
+	let n = e.mapping.scale, r = m[`scale${M(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];
@@ -476,14 +506,14 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}
 		t.attr(e, n);
 	});
-}, ye = function(e) {
+}, X = 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) => {
+}, Se = (e, t, n) => {
 	let r = t.categories.filter((e) => e in n).map((e) => ({
 		attr: `data-group-${e}`,
 		value: String(n[e])
@@ -491,13 +521,13 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	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) => {
+}, Z = (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);
+		let r = n && Se(e, t, n);
 		r && r.classed("highlight", !0).raise().each(function() {
 			let e = m.select(this);
 			t.highlightProps.forEach((t) => {
@@ -505,11 +535,11 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			});
 		});
 	});
-}, Z = (e, t) => {
+}, Q = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, xe = {
+}, Ce = {
 	props: [
 		"title",
 		"axis",
@@ -534,11 +564,11 @@ var g = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		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 = {
+}, we = { class: "title" }, Te = {
 	class: "entries",
 	ref: "entries"
 };
-function we(e, t, n, o, s, u) {
+function Ee(e, t, n, o, s, u) {
 	return n.axis && n.axis.h ? (l(), i("div", {
 		key: 0,
 		class: "hover",
@@ -547,9 +577,9 @@ function we(e, t, n, o, s, u) {
 			left: u.left,
 			transform: u.transform
 		})
-	}, [a("div", Se, p(n.axis.h.name), 1), a("table", Ce, null, 512)], 4)) : r("", !0);
+	}, [a("div", we, p(n.axis.h.name), 1), a("table", Te, 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 = {
+var De = /*#__PURE__*/ Q(Ce, [["render", Ee], ["__scopeId", "data-v-364032d4"]]), Oe = (...e) => e.every((e) => Number.isFinite(e)), ke = {
 	props: [
 		"filter",
 		"shared",
@@ -581,7 +611,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 			};
 		}
 	},
-	components: { Hover: Te },
+	components: { Hover: De },
 	created() {
 		this.def = this.store.def;
 	},
@@ -601,16 +631,16 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 		_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);
+			}).each(X);
 		},
 		_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 t.classed(n, !0).selectAll("g.group").data(e).enter().append("g").attr("class", "group").each(X).selectAll(n).data((e) => {
+				let t = ue(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))));
+			this._groupwise(e, t).attr("d", (e) => m.line().defined((e) => Oe(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");
@@ -625,7 +655,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 			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))));
+			this._groupwise(e, t).attr("d", (e) => m.area().defined((e) => Oe(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;
@@ -633,15 +663,15 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 				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()));
+					e.width = O(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;
+				return e.x = O(e.cx.value - e.width.value / 2), delete e.cx, e.y = O(e.height.value), e.height = O(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)`);
+				e.props.x = O(`@${t}:scaled`), e.props.y = O(`@${n}:st:e:scaled`), e.props.height = O(`@${n}:st:h:scaled`), e.props.transform = O(`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() {
@@ -651,7 +681,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 					dim: t,
 					mapping: this.store.mapping(t)
 				};
-				re(n, this.data), J(n, {
+				re(n, this.data), xe(n, {
 					width: this.innerWidth,
 					height: this.innerHeight
 				}), e[t] = n;
@@ -662,7 +692,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 		},
 		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);
+				let t = this.store.mapping(e), n = t.axis, r = this.info[e].scale, i = w(n.ticks, this.relativeBases), a = m[`axis${M(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);
@@ -694,7 +724,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 					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);
+				e.hover.visible = !1, Z(e.inner, e.def.plot);
 			};
 			this.hideOnPointerOutside = (t) => {
 				e.hover.visible && !e.$refs.svg.contains(t.target) && a();
@@ -723,7 +753,7 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 				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 = {
+				}) : m.least(l, (e) => Math.abs(e.data[d] - u)), f && (f.nearest = !0), Z(e.inner, e.def.plot, f?.data), e.hover.data = l, e.hover.axis = {
 					h: {
 						col: n.h.name,
 						value: c,
@@ -739,11 +769,11 @@ var Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]])
 			}).on("pointercancel", a);
 		}
 	}
-}, Oe = ["width", "height"], ke = ["transform"], Ae = ["visibility"], je = {
+}, Ae = ["width", "height"], je = ["transform"], Me = ["visibility"], Ne = {
 	key: 0,
 	class: "debug"
 };
-function Me(e, t, o, s, u, d) {
+function Pe(e, t, o, s, u, d) {
 	let ee = f("hover");
 	return l(), i("div", {
 		style: c(`width: ${o.width}px;`),
@@ -761,7 +791,7 @@ function Me(e, t, o, s, u, d) {
 			visibility: e.hover.visible ? "visible" : "hidden",
 			class: "hoverMarker",
 			ref: "hoverMarker"
-		}, [...t[0] ||= [a("line", null, null, -1)]], 8, Ae)], 8, ke)], 8, Oe)),
+		}, [...t[0] ||= [a("line", null, null, -1)]], 8, Me)], 8, je)], 8, Ae)),
 		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,
@@ -772,10 +802,10 @@ function Me(e, t, o, s, u, d) {
 			"side",
 			"axis"
 		])) : r("", !0)], 4),
-		e.debug ? (l(), i("span", je, p(e.debug), 1)) : r("", !0)
+		e.debug ? (l(), i("span", Ne, p(e.debug), 1)) : r("", !0)
 	], 4);
 }
-var Ne = /*#__PURE__*/ Z(De, [["render", Me], ["__scopeId", "data-v-1f05a06e"]]), Pe = {
+var Fe = /*#__PURE__*/ Q(ke, [["render", Pe], ["__scopeId", "data-v-1f05a06e"]]), Ie = {
 	props: ["info", "props"],
 	mounted() {
 		let e = m.select(this.$refs.legendSymbol);
@@ -784,24 +814,24 @@ var Ne = /*#__PURE__*/ Z(De, [["render", Me], ["__scopeId", "data-v-1f05a06e"]])
 			Y.call(n.node(), T(t.props, this.props));
 		});
 	}
-}, Fe = ["width", "height"];
-function Ie(e, t, n, r, a, o) {
+}, Le = ["width", "height"];
+function Re(e, t, n, r, a, o) {
 	return l(), i("svg", {
 		width: n.info.size,
 		height: n.info.size,
 		ref: "legendSymbol"
-	}, null, 8, Fe);
+	}, null, 8, Le);
 }
 //#endregion
 //#region src/comp/Legend.vue
-var Le = {
+var ze = {
 	props: ["legend"],
 	inject: ["store"],
 	data: () => ({
 		info: {},
 		entries: []
 	}),
-	components: { LegendSymbol: /* @__PURE__ */ Z(Pe, [["render", Ie], ["__scopeId", "data-v-ce0e972e"]]) },
+	components: { LegendSymbol: /* @__PURE__ */ Q(Ie, [["render", Re], ["__scopeId", "data-v-ce0e972e"]]) },
 	mounted() {
 		this.info = this.store.mapping(this.legend), this.entries = Object.keys(this.info.props).map((e) => ({
 			key: e,
@@ -816,18 +846,18 @@ var Le = {
 			selected: e.props.visible
 		});
 	} }
-}, Re = ["data-dim"], ze = { class: "title" }, Be = { class: "entries" }, Ve = [
+}, Be = ["data-dim"], Ve = { class: "title" }, He = { class: "entries" }, Ue = [
 	"data-visible",
 	"data-key",
 	"onClick",
 	"onMouseenter"
-], He = ["innerHTML"];
-function Ue(t, o, c, u, ee, m) {
+], We = ["innerHTML"];
+function Ge(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({
+	}, [a("div", Ve, p(t.info.name), 1), a("div", He, [(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 }), {
@@ -841,10 +871,13 @@ function Ue(t, o, c, u, ee, m) {
 		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);
+	}, null, 8, ["info", "props"])) : r("", !0), a("span", { innerHTML: e.filled.name }, null, 8, We)], 16, Ue))), 256))])], 8, Be);
 }
-var We = /*#__PURE__*/ Z(Le, [["render", Ue], ["__scopeId", "data-v-1bc8d55f"]]), Ge = {
+var Ke = /*#__PURE__*/ Q(ze, [["render", Ge], ["__scopeId", "data-v-1bc8d55f"]]), qe = 0, Je = {
 	props: ["element", "globals"],
+	created() {
+		this.uid = `gen-vis-form-${qe++}`;
+	},
 	computed: { vg() {
 		return this.globals[this.element.ref];
 	} },
@@ -856,32 +889,33 @@ var We = /*#__PURE__*/ Z(Le, [["render", Ue], ["__scopeId", "data-v-1bc8d55f"]])
 			return S(e, this.vg);
 		}
 	}
-}, Ke = ["id"], qe = { class: "title" }, Je = {
+}, Ye = ["id"], Xe = { class: "title" }, Ze = {
 	key: 0,
 	class: "entries"
-}, Ye = ["id", "onClick"], Xe = [
+}, Qe = ["id", "onClick"], $e = [
 	"name",
 	"value",
 	"checked"
-], Ze = ["for"];
-function Qe(t, n, o, s, c, u) {
+], et = ["for"];
+function tt(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", {
+	}, [a("div", Xe, p(o.element.name) + ":", 1), o.element.type == "switch" ? (l(), i("div", Ze, [(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,
+		name: `${t.uid}-${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);
+	}, null, 8, $e), a("label", { for: e.id }, p(e.name), 9, et)], 8, Qe))), 256))])) : r("", !0)], 8, Ye);
 }
 //#endregion
 //#region src/comp/Vis.vue
-var $e = {
+var nt = {
 	inject: ["store"],
+	emits: ["stateChanged"],
 	data: () => ({
 		initialized: !1,
 		options: {},
@@ -912,10 +946,13 @@ var $e = {
 		}
 	},
 	components: {
-		Facet: Ne,
-		LegendEntry: We,
-		FormElement: /* @__PURE__ */ Z(Ge, [["render", Qe], ["__scopeId", "data-v-ec3facd5"]])
+		Facet: Fe,
+		LegendEntry: Ke,
+		FormElement: /* @__PURE__ */ Q(Je, [["render", tt], ["__scopeId", "data-v-acf88417"]])
 	},
+	watch: { "store.stateSets"() {
+		this.dataInit(), this.scales();
+	} },
 	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);
@@ -971,7 +1008,7 @@ var $e = {
 						dim: e,
 						mapping: this.store.mapping(e)
 					};
-					return re(t, this.data), J(t, {
+					return re(t, this.data), xe(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;
@@ -981,34 +1018,34 @@ var $e = {
 			this.initialized = !0;
 		},
 		changeSelected(e) {
-			this.dataInit(), this.scales();
+			this.dataInit(), this.scales(), this.$emit("stateChanged");
 		},
 		formChanged(e) {
 			this.store.applyFormElements(), this.changeSelected(e);
 		},
 		highlight(e) {
-			X(m.select(this.$refs.vis), this.store.def.plot, { [e.dim]: e.key });
+			Z(m.select(this.$refs.vis), this.store.def.plot, { [e.dim]: e.key });
 		}
 	}
-}, et = { class: "vis-header" }, tt = { class: "title" }, nt = { class: "subtitle" }, rt = {
+}, rt = { class: "vis-header" }, it = { class: "title" }, at = { class: "subtitle" }, ot = {
 	ref: "form",
 	class: "vis-form-elements"
-}, it = {
+}, st = {
 	ref: "legends",
 	class: "vis-legends"
-}, at = {
+}, ct = {
 	key: 0,
 	class: "vis-body"
-}, ot = { class: "vis-footer" }, st = ["innerHTML"];
-function ct(t, o, s, u, ee, m) {
+}, lt = { class: "vis-footer" }, ut = ["innerHTML"];
+function dt(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, {
+		a("div", rt, [a("div", it, p(t.options.title), 1), a("div", at, p(t.options.subtitle), 1)]),
+		a("div", ot, [(l(!0), i(e, null, d(t.formElements, (e) => (l(), n(h, {
 			element: e,
 			globals: t.globals,
 			onChangeSelected: m.formChanged
@@ -1017,7 +1054,7 @@ function ct(t, o, s, u, ee, m) {
 			"globals",
 			"onChangeSelected"
 		]))), 256))], 512),
-		a("div", it, [(l(!0), i(e, null, d(t.legends, (e) => (l(), n(g, {
+		a("div", st, [(l(!0), i(e, null, d(t.legends, (e) => (l(), n(g, {
 			legend: e,
 			onChangeSelected: m.changeSelected,
 			onHighlight: m.highlight
@@ -1026,7 +1063,7 @@ function ct(t, o, s, u, ee, m) {
 			"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", {
+		t.initialized ? (l(), i("div", ct, [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(_, {
@@ -1055,12 +1092,12 @@ function ct(t, o, s, u, ee, m) {
 			"width",
 			"margins"
 		]))])) : r("", !0),
-		a("div", ot, [a("span", { innerHTML: t.options.footer }, null, 8, st)])
+		a("div", lt, [a("span", { innerHTML: t.options.footer }, null, 8, ut)])
 	], 4);
 }
 //#endregion
 //#region src/comp/App.vue
-var lt = {
+var ft = {
 	name: "GenVis",
 	props: {
 		debug: {
@@ -1078,20 +1115,29 @@ var lt = {
 		data: {
 			type: [Array, String],
 			default: null
+		},
+		state: {
+			type: Object,
+			default: null
 		}
 	},
+	emits: ["update:state"],
 	data: () => ({
-		store: ve(),
+		store: be(),
 		error: null
 	}),
 	provide() {
 		return { store: this.store };
 	},
-	components: { VisBase: /* @__PURE__ */ Z($e, [["render", ct], ["__scopeId", "data-v-b07c17d2"]]) },
+	components: { VisBase: /* @__PURE__ */ Q(nt, [["render", dt], ["__scopeId", "data-v-d870f406"]]) },
 	watch: {
 		def: "init",
 		defFile: "init",
-		data: "init"
+		data: "init",
+		state: {
+			handler: "syncState",
+			deep: !0
+		}
 	},
 	mounted() {
 		this.init();
@@ -1106,44 +1152,51 @@ var lt = {
 				await this.store.init({
 					def: this.def,
 					defUrl: this.defFile,
-					data: this.data
-				});
+					data: this.data,
+					state: this.state
+				}), this.syncState();
 			} catch (e) {
 				this.showError(e);
 			}
 		},
+		syncState() {
+			this.store.loaded && !S(this.state ?? {}, this.store.state) && this.store.setState(this.state);
+		},
 		showError(e) {
 			console.error(e), this.error = e.message;
 		}
 	}
-}, ut = { class: "vis-outer" }, dt = {
+}, pt = { class: "vis-outer" }, mt = {
 	key: 0,
 	class: "vis-error"
-}, ft = { key: 2 }, pt = { style: {
+}, ht = { key: 2 }, gt = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
-} }, mt = { style: {
+} }, _t = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
 } };
-function ht(e, t, o, s, c, u) {
+function vt(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)
+	return l(), i("div", pt, [e.error ? (l(), i("div", mt, p(e.error), 1)) : e.store.loaded ? (l(), n(d, {
+		key: 1,
+		onStateChanged: t[0] ||= (t) => e.$emit("update:state", e.store.state)
+	})) : r("", !0), o.debug && e.store.def ? (l(), i("div", ht, [
+		t[1] ||= a("h3", null, "prepared:", -1),
+		a("pre", gt, p(JSON.stringify(e.store.def, null, 4)), 1),
+		t[2] ||= a("h3", null, "org:", -1),
+		a("pre", _t, 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) => {
+var $ = /*#__PURE__*/ Q(ft, [["render", vt], ["__scopeId", "data-v-7b1c318b"]]), yt = { install(e) {
+	e.component("GenVis", $);
+} }, bt = (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));
+	return t($, n).mount(e);
+}, xt = (e) => {
+	for (let t of document.getElementsByClassName(e)) t.classList.contains("gen-vis-attached") || (t.classList.add("gen-vis-attached"), bt(t));
 };
 //#endregion
-export { Q as GenVis, gt as default, _t as mountGenVisByClass, $ as mountGenVisElement };
+export { $ as GenVis, yt as default, xt as mountGenVisByClass, bt as mountGenVisElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preschen/gen-vis",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "A declarative d3 visualisation library",
   "type": "module",
   "main": "dist/gen-vis.js",

package/schema.json

@@ -8,8 +8,11 @@
     "properties": {
         "$schema": { "type": "string" },
         "parent": {
-            "type": "string",
-            "description": "Url of the definition this one is deep merged into, relative to this definition. Arrays are replaced, not merged."
+            "oneOf": [
+                { "type": "string" },
+                { "type": "array", "items": { "type": "string" } }
+            ],
+            "description": "Url of the definition this one is deep merged into, relative to this definition, or a list of them (mixins) merged in their order, later ones override earlier ones. Arrays are replaced, not merged."
         },
         "data": {
             "type": "string",