@preschen/gen-vis 0.5.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.5.0.js"></script>
+<script src="gen-vis-0.8.0.js"></script>
 <script>mountGenVisByClass('genVis')</script>
 ```
 
@@ -49,11 +49,49 @@ 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
+of the page overrides them, regardless of its specificity and of the order of
+the styles, e.g.:
+
+```css
+.formElement { display: block; margin: 6px 4px; }
+.vis-header .subtitle { font-size: 15px; }
+```
+
+The main classes are `vis`, `vis-header` (with `title` and `subtitle`),
+`vis-form-elements` (with a `formElement` for every form element),
+`vis-legends`, `facet-title` and `vis-footer`. Styles of the page which are in
+a cascade layer themselves only override the package if their layer is
+declared after it, e.g. `@layer gen-vis, page;`.
+
 ## Definition
 
 ```json
@@ -75,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:
 
@@ -154,10 +205,13 @@ the definition refer to these names.
   `name` by default.
 - `props`: the categories and their props, e.g. colors. `common` props are
   used for all `manual` entries, `name` and `visible` are set by default. Only
-  visible categories are shown.
+  visible categories are shown. The order of the `manual` entries is the order
+  of the legend, the facets and the stacks, not the order of the rows. Keys
+  which are integers, e.g. years, are ordered ascending by JavaScript.
 - `legend`: a toggle for every category, `symbol` draws svg `elements` (with
   props) of the given `size` before the name.
-- `stacked`: stacks the values of a vertical axis, see `stackedBar`.
+- `stacked`: stacks the values of a vertical axis, see `stackedBar`, the first
+  category is at the bottom.
 
 ### `plot`
 
@@ -225,6 +279,31 @@ the column of an axis:
 }]
 ```
 
+If the column depends on several form elements, it can be a template of the
+globals, e.g. the values and their shares in the columns `twh`, `co2`,
+`twh.share` and `co2.share`:
+
+```json
+"globals": { "values": "twh", "share": "" },
+"formElements": [{
+    "id": "values", "name": "Werte", "ref": "values", "type": "switch",
+    "values": [
+        { "id": "twh", "name": "TWh", "value": "twh" },
+        { "id": "co2", "name": "CO₂", "value": "co2" }
+    ]
+}, {
+    "id": "share", "name": "Darstellung", "ref": "share", "type": "switch",
+    "values": [
+        { "id": "abs", "name": "Absolut", "value": "" },
+        { "id": "rel", "name": "Anteil", "value": ".share", "mapping": { "y": { "axis": { "format": ".0%" } } } }
+    ]
+}],
+"mapping": { "y": { "column": "{values}{share}" } }
+```
+
+`{name}` is replaced by the value of the global, unknown globals are kept and
+reported as warnings.
+
 ## Development
 
 ```sh

package/dist/gen-vis.js

@@ -1,22 +1,22 @@
-(() => { const s = document.createElement("style"); s.textContent = ".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-b7f59ae7]{margin:6px 4px;font-size:13px}.formElement .title[data-v-b7f59ae7]{margin-right:5px;font-weight:700;display:inline-block}.formElement .entries[data-v-b7f59ae7]{display:inline-block}.formElement .entries>div[data-v-b7f59ae7]{margin-right:5px;display:inline-block}.formElement .entries>div input[data-v-b7f59ae7]{display:inline-block;position:relative;top:1px}.vis[data-v-f8fa11d2] text,.vis[data-v-f8fa11d2] span,.vis[data-v-f8fa11d2] div{font-family:var(--gen-vis-font-family,Century Gothic, sans-serif)}.vis-header .title[data-v-f8fa11d2]{font-size:22px;font-weight:700}.vis-header .subtitle[data-v-f8fa11d2]{margin-top:3px;font-size:13px}.vis-header[data-v-f8fa11d2]{margin-bottom:10px}.vis-footer span[data-v-f8fa11d2]{font-size:13px}.facet-title[data-v-f8fa11d2]{margin-top:8px;font-size:13px;font-weight:700}.vis-error[data-v-a9d47434]{color:#b00;font-size:13px}\n/*$vite$:1*/"; 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 m } from "vue";
-import * as h from "d3";
-import g from "deepmerge";
+(() => { 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";
 //#region src/utils/data.js
-var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(e) ? JSON.parse(e) : h.csvParse(e)) : e, v = (e) => e == null || e === "", ee = {
+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 = v(e) ? NaN : +e;
+		let t = _(e) ? NaN : +e;
 		return isNaN(t) ? null : t;
 	},
 	date: (e) => {
-		let t = v(e) ? NaN : typeof e == "number" ? e : Date.parse(e);
+		let t = _(e) ? NaN : typeof e == "number" ? e : Date.parse(e);
 		return isNaN(t) ? null : t;
 	}
-}, te = (e, t) => {
+}, ne = (e, t) => {
 	let n = Object.keys(t.mapping).map((e) => ({
 		name: e,
 		column: t.mapping[e].column,
-		convert: ee[t.mapping[e].type] ?? ((e) => e)
+		convert: te[t.mapping[e].type] ?? ((e) => e)
 	}));
 	return e.map((e) => {
 		let t = {};
@@ -24,23 +24,35 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			t[n.name] = n.convert(e[n.column]);
 		}), t;
 	});
-}, ne = (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 ? h.extent(t.map((t) => t[`${e.dim}:st:e`])) : h.extent(e.values));
-}, re = (e, t, n = []) => {
-	b(e, [...n, t.h]).forEach((e) => {
-		let n = 0, r = 0;
-		e.entries.forEach((e) => {
-			let i = e[t.v];
-			i >= 0 ? (e[`${t.v}:st:s`] = n, n += i, e[`${t.v}:st:e`] = n) : (e[`${t.v}:st:s`] = r, r += i, e[`${t.v}:st:e`] = r);
+}, 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);
 		});
 	});
-}, y = (e, t) => {
+}, 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`]);
 		});
 	});
-}, b = (e, t) => {
+}, y = (e, t) => {
 	let n = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
 		let r = JSON.stringify(t.map((t) => e[t]));
@@ -49,14 +61,14 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			entries: []
 		}), n.get(r).entries.push(e);
 	}), [...n.values()];
-}, x = (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)), ie = (e, t, n) => t, S = (e) => g.all(e, { arrayMerge: ie }), C = (e, t) => e == t || JSON.stringify(e) == JSON.stringify(t), w = (e, t) => Object.fromEntries(Object.entries(e).map(([e, n], r) => [e, t(n, e)])), T = (e, t) => Array.isArray(e) ? e.map(t) : w(e, t), ae = (e, t, n, r) => e.map((e) => ({
+}, 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
-})), oe = (e, t, n = !0, r = !1) => {
+})), 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];
@@ -74,8 +86,8 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}
 	}
 	return n ? e.value : e;
-}, E = (e, t) => oe({ ...j(e) }, t, !0), D = (e, t, n = !0) => O(T(e, j), t, n), O = (e, t, n = !1) => T(e, (e) => oe({ ...e }, t, n)), k = (e) => e.prop !== void 0, A = (e) => Object.values(e).flatMap((e) => typeof e != "object" || !e ? [] : k(e) ? typeof e.ref == "string" ? [e.ref.split(":")[0]] : [] : A(e)), j = (e) => {
-	if (typeof e == "object" && !Array.isArray(e) && e !== null) return k(e) ? e : w(e, j);
+}, 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 {
@@ -88,7 +100,7 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		prop: "fixed",
 		value: e
 	};
-}, M = (e) => {
+}, k = (e) => {
 	if (e.props) {
 		let t = e.props;
 		e.props = Object.fromEntries(Object.keys(t.manual).map((e) => {
@@ -97,19 +109,21 @@ var _ = (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;
-}, se = (e) => (Object.values(e.mapping).forEach(M), 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 = w(e.props, j), e._fill = (t) => O(e.props, t);
-}), e), N = (e, t) => {
-	let n = e.formElements ?? [], r = new Set(n.flatMap((e) => e.values.flatMap((e) => Object.keys(e.mapping ?? {}))));
+	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) => C(n.value, e.globals?.[t.ref]))).filter((e) => e && e.mapping);
+	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 = M(S([t.mapping[n] ?? {}, ...r]));
-		e.mapping[n] && "props" in e.mapping[n] && (a.props = e.mapping[n].props), e.mapping[n] = a;
+		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 = 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;
-}, P = (e) => e.charAt(0).toUpperCase() + e.slice(1), F = {
+}, M = (e) => e.charAt(0).toUpperCase() + e.slice(1), N = {
 	de: {
 		number: {
 			decimal: ",",
@@ -250,35 +264,35 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			year: "%Y"
 		}
 	}
-}, ce = Object.keys(F), I = {
+}, pe = Object.keys(N), P = {
 	time: [
-		h.timeSecond,
-		h.timeMinute,
-		h.timeHour,
-		h.timeDay,
-		h.timeWeek,
-		h.timeMonth,
-		h.timeYear
+		m.timeSecond,
+		m.timeMinute,
+		m.timeHour,
+		m.timeDay,
+		m.timeWeek,
+		m.timeMonth,
+		m.timeYear
 	],
 	utc: [
-		h.utcSecond,
-		h.utcMinute,
-		h.utcHour,
-		h.utcDay,
-		h.utcWeek,
-		h.utcMonth,
-		h.utcYear
+		m.utcSecond,
+		m.utcMinute,
+		m.utcHour,
+		m.utcDay,
+		m.utcWeek,
+		m.utcMonth,
+		m.utcYear
 	]
-}, L = (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);
-}, le = (e = "de") => {
-	let t = typeof e == "string" ? { base: e } : e, n = F[t.base ?? "de"];
-	if (!n) throw Error(`Unknown locale '${t.base}', expected one of ${ce.map((e) => `'${e}'`).join(", ")}`);
-	let r = h.formatLocale({
+}, 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
-	}), i = h.timeFormatLocale({
+	}), i = m.timeFormatLocale({
 		...n.time,
 		...t.time
 	}), a = {
@@ -294,13 +308,13 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 				"pow",
 				"sqrt"
 			].includes(t)) {
-				let [t, i] = e.domain(), a = h.precisionFixed(h.tickStep(t, i, n));
+				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" ? L(i.format, a, I.time) : t == "utc" ? L(i.utcFormat, a, I.utc) : null;
+			return t == "time" ? F(i.format, a, P.time) : t == "utc" ? F(i.utcFormat, a, P.utc) : null;
 		}
 	};
-}, R = [
+}, I = [
 	"svg:path",
 	"svg:circle",
 	"svg:line",
@@ -309,24 +323,24 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	"base:area",
 	"bar",
 	"stackedBar"
-], z = [
+], L = [
 	"numeric",
 	"date",
 	"categorical"
-], B = ["horizontal", "vertical"], V = [
+], R = ["horizontal", "vertical"], z = [
 	"top",
 	"bottom",
 	"left",
 	"right"
-], H = [
+], B = [
 	"fixed",
 	"ref",
 	"relative",
 	"steps"
-], U = (e) => e.map((e) => `'${e}'`).join(", "), W = (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) {
-		H.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 ${U(H)}`);
+		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 = [
@@ -335,30 +349,49 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		"ref",
 		"mode"
 	].filter((t) => t in e);
-	if (r.length > 0) return n(t, `has ${U(r)} but no 'prop', so it is not evaluated`);
-	Object.entries(e).forEach(([e, r]) => W(r, `${t}.${e}`, n));
-}, ue = (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 && !z.includes(t.type) && n(`${r}.type`, `unknown type '${t.type}', expected one of ${U(z)}`), t.props && !t.props.manual && n(`${r}.props`, "expected 'manual' (and optional 'common') entries"), t.scale) {
-			let e = t.scale.type ?? "linear", i = h[`scale${P(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 && !B.includes(t.scale.orientation) && n(`${r}.scale.orientation`, `unknown orientation '${t.scale.orientation}', expected one of ${U(B)}`);
+		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'"), V.includes(t.axis.position) || n(`${r}.axis.position`, `unknown position '${t.axis.position}', expected one of ${U(V)}`), W(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}]`;
-		R.includes(e.type) || n(`${i}.type`, `unknown type '${e.type}', expected one of ${U(R)}`), (e.categories ?? []).filter((e) => !(e in r)).forEach((e) => n(`${i}.categories`, `unknown mapping '${e}'`)), W(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}'`));
 	}
-	return W(e.options?.height, "options.height", n), W(e.facets?.cols, "facets.cols", n), t;
+	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 h.text(e);
+		return await m.text(e);
 	} catch (t) {
 		throw Error(`Could not load '${e}': ${t.message}`);
 	}
@@ -368,43 +401,52 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	} catch (e) {
 		throw Error(`Invalid JSON in definition ${t}: ${e.message}`);
 	}
-}, de = async (e, t, n = K) => {
-	let r = [e], i = /* @__PURE__ */ new Set();
-	for (; e.parent;) {
-		if (t = G(e.parent, t), i.has(t)) throw Error(`Cyclic parent definition '${t}'`);
-		i.add(t), e = q(await n(t), `'${t}'`), r.unshift(e);
-	}
-	return S(r);
-}, J = (e) => o(Array.from(m(e))), fe = async ({ def: e = null, defUrl: t = null, data: n = null }) => {
-	let r;
-	e === null ? (r = G(t), e = q(await K(r), `'${r}'`)) : typeof e == "string" && (e = q(e, "attribute"));
-	let i = await de(JSON.parse(JSON.stringify(e)), r);
-	ue(i).forEach((e) => console.warn(`gen-vis ${r ?? "inline definition"}: ${e}`));
-	let a = se(JSON.parse(JSON.stringify(i)));
-	if (N(a, i), n === null) {
-		if (!i.data) throw Error("No data given, neither in the definition nor as attribute.");
-		n = await K(G(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 = J(_(n));
+	let l = J(g(n));
 	return {
-		defUrl: r ?? null,
-		defOrg: i,
-		locale: o(le(i.options?.locale)),
-		rows: s,
-		def: a,
-		data: J(te(s, a))
+		defUrl: i ?? null,
+		defOrg: a,
+		locale: o(me(a.options?.locale)),
+		rows: l,
+		def: s,
+		defaults: c,
+		data: J(ne(l, s))
 	};
-}, pe = 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) => {
@@ -428,31 +470,34 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		let t = ++this.runs;
 		this.def = this.data = null;
 		try {
-			let n = await fe(e);
+			let n = await ve(e);
 			t == this.runs && Object.assign(this, n);
 		} catch (e) {
 			if (t == this.runs) throw e;
 		}
 	}
 	applyFormElements() {
-		N(this.def, this.defOrg) && (this.data = J(te(this.rows, this.def)));
+		j(this.def, this.defOrg) && (this.data = J(ne(this.rows, this.def)));
 	}
-}, me = () => u(new pe()), Y = (e, t) => {
-	let n = e.mapping.scale, r = h[`scale${P(n.type)}`]();
-	if (r.range(D(n.range, t)), e.extent) {
+	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];
-		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[h.bisectCenter(e.values, r.invert(t))];
+		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;
-}, X = function(e) {
-	let t = h.select(this);
+}, Y = function(e) {
+	let t = m.select(this);
 	Object.entries(e).forEach(([e, n], r) => {
 		if (n instanceof Object) {
-			if (!k(n)) return;
+			if (!D(n)) return;
 			n = n.value;
 		}
 		if (e == "text") {
@@ -461,14 +506,14 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}
 		t.attr(e, n);
 	});
-}, he = function(e) {
-	let t = h.select(this);
+}, 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));
-}, ge = (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])
@@ -479,12 +524,12 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 }, 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 = h.select(this);
+			let e = m.select(this);
 			t.highlightProps.forEach((t) => e.attr(t, e.attr(`default-${t}`)));
 		});
-		let r = n && ge(e, t, n);
+		let r = n && Se(e, t, n);
 		r && r.classed("highlight", !0).raise().each(function() {
-			let e = h.select(this);
+			let e = m.select(this);
 			t.highlightProps.forEach((t) => {
 				e.attr(`default-${t}`, e.attr(t)).attr(t, e.attr(`highlight-${t}`));
 			});
@@ -494,7 +539,7 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, _e = {
+}, Ce = {
 	props: [
 		"title",
 		"axis",
@@ -516,14 +561,14 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 	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 = h.select(this.$refs.entries).selectAll("tr.entry").data(e).join("tr").attr("class", "entry").classed("nearest", (e) => e.nearest);
+		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]);
 	} }
-}, ve = { class: "title" }, ye = {
+}, we = { class: "title" }, Te = {
 	class: "entries",
 	ref: "entries"
 };
-function be(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",
@@ -532,9 +577,9 @@ function be(e, t, n, o, s, u) {
 			left: u.left,
 			transform: u.transform
 		})
-	}, [a("div", ve, p(n.axis.h.name), 1), a("table", ye, null, 512)], 4)) : r("", !0);
+	}, [a("div", we, p(n.axis.h.name), 1), a("table", Te, null, 512)], 4)) : r("", !0);
 }
-var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]]), Se = (...e) => e.every((e) => Number.isFinite(e)), Ce = {
+var De = /*#__PURE__*/ Q(Ce, [["render", Ee], ["__scopeId", "data-v-364032d4"]]), Oe = (...e) => e.every((e) => Number.isFinite(e)), ke = {
 	props: [
 		"filter",
 		"shared",
@@ -566,12 +611,12 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 			};
 		}
 	},
-	components: { Hover: xe },
+	components: { Hover: De },
 	created() {
 		this.def = this.store.def;
 	},
 	mounted() {
-		this.inner = h.select(this.$refs.inner), this.scales(), this.axis(), this.plot(), this.hoverInit();
+		this.inner = m.select(this.$refs.inner), this.scales(), this.axis(), this.plot(), this.hoverInit();
 	},
 	unmounted() {
 		document.removeEventListener("pointerdown", this.hideOnPointerOutside);
@@ -579,23 +624,23 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 	methods: {
 		plot() {
 			this.def.plot.forEach((e) => {
-				let t = ae(b(this.data, e.categories), e, this.relativeBases, this.def.mapping), n = this.inner.append("g").classed("plotGroup", !0).classed(e.id, !0);
+				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) {
-				X.call(this, e.props);
-			}).each(he);
+				Y.call(this, e.props);
+			}).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(he).selectAll(n).data((e) => {
-				let t = A(e.props);
-				return e.values.filter((e) => t.every((t) => e[t] !== null)).map((t) => r(O(e.props, t)));
-			}).enter().append(n).each(X);
+			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) => h.line().defined((e) => Se(e.x, e.y)).x((e) => e.x).y((e) => e.y)(e.values.map((t) => O(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");
@@ -610,7 +655,7 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 			this._pointwise(e, t, "text");
 		},
 		"base:area": function(e, t) {
-			this._groupwise(e, t).attr("d", (e) => h.area().defined((e) => Se(e.x, e.y0, e.y1)).x((e) => e.x).y1((e) => e.y1).y0((e) => e.y0)(e.values.map((t) => O(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;
@@ -618,15 +663,15 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__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 = j(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 = j(e.cx.value - e.width.value / 2), delete e.cx, e.y = j(e.height.value), e.height = j(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 = j(`@${t}:scaled`), e.props.y = j(`@${n}:st:e:scaled`), e.props.height = j(`@${n}:st:h:scaled`), e.props.transform = j(`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() {
@@ -636,18 +681,18 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 					dim: t,
 					mapping: this.store.mapping(t)
 				};
-				ne(n, this.data), Y(n, {
+				re(n, this.data), xe(n, {
 					width: this.innerWidth,
 					height: this.innerHeight
 				}), e[t] = n;
-			}), y(this.data, e), this.info = {
+			}), 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 = E(n.ticks, this.relativeBases), a = h[`axis${P(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);
@@ -678,18 +723,18 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 					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 = h.select(this.$refs.hoverMarker).select("line"), a = () => {
+			})), 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, Z(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 = h.pointer(t), o = e.info[n.h.name], s = o.scale.invertCustom(a[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 = x(e.data, [{
+				let l = b(e.data, [{
 					dim: n.h.name,
 					key: s
 				}]).filter((e) => e[n.v.name] !== null).map((t) => {
@@ -699,16 +744,16 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 						nearest: !1
 					};
 					return r.forEach((n) => {
-						i.entries[n] = D(e.store.mapping(n).hover.props, e.store.prop(n, t[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 ? h.least(l, (e) => {
-					let [t, n] = h.extent([e.data[`${d}:st:s`], e.data[`${d}:st:e`]]);
+				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;
-				}) : h.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 = {
+				}) : 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,
@@ -724,12 +769,12 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 			}).on("pointercancel", a);
 		}
 	}
-}, we = ["width", "height"], Te = ["transform"], Ee = ["visibility"], De = {
+}, Ae = ["width", "height"], je = ["transform"], Me = ["visibility"], Ne = {
 	key: 0,
 	class: "debug"
 };
-function Oe(e, t, o, s, u, d) {
-	let m = f("hover");
+function Pe(e, t, o, s, u, d) {
+	let ee = f("hover");
 	return l(), i("div", {
 		style: c(`width: ${o.width}px;`),
 		class: "vis-inner"
@@ -746,8 +791,8 @@ function Oe(e, t, o, s, u, d) {
 			visibility: e.hover.visible ? "visible" : "hidden",
 			class: "hoverMarker",
 			ref: "hoverMarker"
-		}, [...t[0] ||= [a("line", null, null, -1)]], 8, Ee)], 8, Te)], 8, we)),
-		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(m, {
+		}, [...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,
 			side: e.hover.side,
@@ -757,41 +802,41 @@ function Oe(e, t, o, s, u, d) {
 			"side",
 			"axis"
 		])) : r("", !0)], 4),
-		e.debug ? (l(), i("span", De, p(e.debug), 1)) : r("", !0)
+		e.debug ? (l(), i("span", Ne, p(e.debug), 1)) : r("", !0)
 	], 4);
 }
-var ke = /*#__PURE__*/ Q(Ce, [["render", Oe], ["__scopeId", "data-v-1f05a06e"]]), Ae = {
+var Fe = /*#__PURE__*/ Q(ke, [["render", Pe], ["__scopeId", "data-v-1f05a06e"]]), Ie = {
 	props: ["info", "props"],
 	mounted() {
-		let e = h.select(this.$refs.legendSymbol);
+		let e = m.select(this.$refs.legendSymbol);
 		this.info.elements.forEach((t) => {
 			let n = e.append(t.type);
-			X.call(n.node(), D(t.props, this.props));
+			Y.call(n.node(), T(t.props, this.props));
 		});
 	}
-}, je = ["width", "height"];
-function Me(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, je);
+	}, null, 8, Le);
 }
 //#endregion
 //#region src/comp/Legend.vue
-var Ne = {
+var ze = {
 	props: ["legend"],
 	inject: ["store"],
 	data: () => ({
 		info: {},
 		entries: []
 	}),
-	components: { LegendSymbol: /* @__PURE__ */ Q(Ae, [["render", Me], ["__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,
 			props: this.info.props[e],
-			filled: D(this.info.legend.props, this.info.props[e])
+			filled: T(this.info.legend.props, this.info.props[e])
 		}));
 	},
 	methods: { switched(e) {
@@ -801,35 +846,38 @@ var Ne = {
 			selected: e.props.visible
 		});
 	} }
-}, Pe = ["data-dim"], Fe = { class: "title" }, Ie = { class: "entries" }, Le = [
+}, Be = ["data-dim"], Ve = { class: "title" }, He = { class: "entries" }, Ue = [
 	"data-visible",
 	"data-key",
 	"onClick",
 	"onMouseenter"
-], Re = ["innerHTML"];
-function ze(t, o, c, u, m, h) {
-	let g = f("LegendSymbol");
+], 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", Fe, p(t.info.name), 1), a("div", Ie, [(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 }), {
-		onClick: (t) => h.switched(e),
+		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(g, {
+	}), [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, Re)], 16, Le))), 256))])], 8, Pe);
+	}, null, 8, ["info", "props"])) : r("", !0), a("span", { innerHTML: e.filled.name }, null, 8, We)], 16, Ue))), 256))])], 8, Be);
 }
-var Be = /*#__PURE__*/ Q(Ne, [["render", ze], ["__scopeId", "data-v-1bc8d55f"]]), Ve = {
+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];
 	} },
@@ -838,35 +886,36 @@ var Be = /*#__PURE__*/ Q(Ne, [["render", ze], ["__scopeId", "data-v-1bc8d55f"]])
 			this.globals[this.element.ref] = e.value, this.$emit("changeSelected", {});
 		},
 		equal(e) {
-			return C(e, this.vg);
+			return S(e, this.vg);
 		}
 	}
-}, He = ["id"], Ue = { class: "title" }, We = {
+}, Ye = ["id"], Xe = { class: "title" }, Ze = {
 	key: 0,
 	class: "entries"
-}, Ge = ["id", "onClick"], Ke = [
+}, Qe = ["id", "onClick"], $e = [
 	"name",
 	"value",
 	"checked"
-], qe = ["for"];
-function Je(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", Ue, p(o.element.name) + ":", 1), o.element.type == "switch" ? (l(), i("div", We, [(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, Ke), a("label", { for: e.id }, p(e.name), 9, qe)], 8, Ge))), 256))])) : r("", !0)], 8, He);
+	}, 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 Ye = {
+var nt = {
 	inject: ["store"],
+	emits: ["stateChanged"],
 	data: () => ({
 		initialized: !1,
 		options: {},
@@ -897,10 +946,13 @@ var Ye = {
 		}
 	},
 	components: {
-		Facet: ke,
-		LegendEntry: Be,
-		FormElement: /* @__PURE__ */ Q(Ve, [["render", Je], ["__scopeId", "data-v-b7f59ae7"]])
+		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);
@@ -915,7 +967,7 @@ var Ye = {
 		},
 		measure() {
 			let e = this.store.def.options;
-			this.options.width = e.width || this.$refs.vis.getBoundingClientRect().width, this.options.height = E(e.height, { totalWidth: this.options.width });
+			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;
@@ -926,12 +978,19 @@ var Ye = {
 			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(x(this.store.data, this.filter)), t.v && this.store.mapping(t.v).stacked && re(this.data, t, e.facets ? [e.facets.dim] : []), e.facets) {
+			})), 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 = E(e.facets.cols, { totalWidth: this.options.width });
+				let t = w(e.facets.cols, { totalWidth: this.options.width });
 				this.facets.width = this.options.width / t;
-				let n = e.facets.dim, r = b(this.data, [n]);
-				this.facets.entries = r.filter((e) => Object.keys(this.store.mapping(n).props).includes(e.group[n])).map((e) => ({
+				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,
@@ -944,70 +1003,70 @@ var Ye = {
 		scales() {
 			let e = this.store.def;
 			if (e.facets && e.facets.scales) {
-				let t = E(e.facets.scales, e.globals).map((e) => {
+				let t = w(e.facets.scales, e.globals).map((e) => {
 					let t = {
 						dim: e,
 						mapping: this.store.mapping(e)
 					};
-					return ne(t, this.data), Y(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;
 				});
-				y(this.data, t), this.facets.shared = Object.fromEntries(t.map((e) => [e.dim, e]));
+				v(this.data, t), this.facets.shared = Object.fromEntries(t.map((e) => [e.dim, 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) {
-			Z(h.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 });
 		}
 	}
-}, Xe = { class: "vis-header" }, Ze = { class: "title" }, Qe = { class: "subtitle" }, $e = {
+}, rt = { class: "vis-header" }, it = { class: "title" }, at = { class: "subtitle" }, ot = {
 	ref: "form",
 	class: "vis-form-elements"
-}, et = {
+}, st = {
 	ref: "legends",
 	class: "vis-legends"
-}, tt = {
+}, ct = {
 	key: 0,
 	class: "vis-body"
-}, nt = { class: "vis-footer" }, rt = ["innerHTML"];
-function it(t, o, s, u, m, h) {
-	let g = f("form-element"), _ = f("legend-entry"), v = f("facet");
+}, 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", Xe, [a("div", Ze, p(t.options.title), 1), a("div", Qe, p(t.options.subtitle), 1)]),
-		a("div", $e, [(l(!0), i(e, null, d(t.formElements, (e) => (l(), n(g, {
+		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: h.formChanged
+			onChangeSelected: m.formChanged
 		}, null, 8, [
 			"element",
 			"globals",
 			"onChangeSelected"
 		]))), 256))], 512),
-		a("div", et, [(l(!0), i(e, null, d(t.legends, (e) => (l(), n(_, {
+		a("div", st, [(l(!0), i(e, null, d(t.legends, (e) => (l(), n(g, {
 			legend: e,
-			onChangeSelected: h.changeSelected,
-			onHighlight: h.highlight
+			onChangeSelected: m.changeSelected,
+			onHighlight: m.highlight
 		}, null, 8, [
 			"legend",
 			"onChangeSelected",
 			"onHighlight"
 		]))), 256))], 512),
-		t.initialized ? (l(), i("div", tt, [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(v, {
+		}, p(e.filter.name), 5), (l(), n(_, {
 			key: e.data,
 			data: e.data,
 			shared: t.facets.shared,
@@ -1020,7 +1079,7 @@ function it(t, o, s, u, m, h) {
 			"height",
 			"width",
 			"margins"
-		]))], 4))), 256)) : (l(), n(v, {
+		]))], 4))), 256)) : (l(), n(_, {
 			key: t.data,
 			data: t.data,
 			shared: {},
@@ -1033,12 +1092,12 @@ function it(t, o, s, u, m, h) {
 			"width",
 			"margins"
 		]))])) : r("", !0),
-		a("div", nt, [a("span", { innerHTML: t.options.footer }, null, 8, rt)])
+		a("div", lt, [a("span", { innerHTML: t.options.footer }, null, 8, ut)])
 	], 4);
 }
 //#endregion
 //#region src/comp/App.vue
-var at = {
+var ft = {
 	name: "GenVis",
 	props: {
 		debug: {
@@ -1056,20 +1115,29 @@ var at = {
 		data: {
 			type: [Array, String],
 			default: null
+		},
+		state: {
+			type: Object,
+			default: null
 		}
 	},
+	emits: ["update:state"],
 	data: () => ({
-		store: me(),
+		store: be(),
 		error: null
 	}),
 	provide() {
 		return { store: this.store };
 	},
-	components: { VisBase: /* @__PURE__ */ Q(Ye, [["render", it], ["__scopeId", "data-v-f8fa11d2"]]) },
+	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();
@@ -1084,44 +1152,51 @@ var at = {
 				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;
 		}
 	}
-}, ot = { class: "vis-outer" }, st = {
+}, pt = { class: "vis-outer" }, mt = {
 	key: 0,
 	class: "vis-error"
-}, ct = { key: 2 }, lt = { style: {
+}, ht = { key: 2 }, gt = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
-} }, ut = { style: {
+} }, _t = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
 } };
-function dt(e, t, o, s, c, u) {
+function vt(e, t, o, s, c, u) {
 	let d = f("vis-base");
-	return l(), i("div", ot, [e.error ? (l(), i("div", st, p(e.error), 1)) : e.store.loaded ? (l(), n(d, { key: 1 })) : r("", !0), o.debug && e.store.def ? (l(), i("div", ct, [
-		t[0] ||= a("h3", null, "prepared:", -1),
-		a("pre", lt, p(JSON.stringify(e.store.def, null, 4)), 1),
-		t[1] ||= a("h3", null, "org:", -1),
-		a("pre", ut, 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 $ = /*#__PURE__*/ Q(at, [["render", dt], ["__scopeId", "data-v-a9d47434"]]), ft = { install(e) {
+var $ = /*#__PURE__*/ Q(ft, [["render", vt], ["__scopeId", "data-v-7b1c318b"]]), yt = { install(e) {
 	e.component("GenVis", $);
-} }, pt = (e) => {
+} }, bt = (e) => {
 	let n = Object.fromEntries(e.getAttributeNames().filter((e) => e.startsWith("data-")).map((t) => [t.substring(5), e.getAttribute(t)]));
 	return t($, n).mount(e);
-}, mt = (e) => {
-	for (let t of document.getElementsByClassName(e)) t.classList.contains("gen-vis-attached") || (t.classList.add("gen-vis-attached"), pt(t));
+}, 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 { $ as GenVis, ft as default, mt as mountGenVisByClass, pt 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.5.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",
@@ -229,7 +232,10 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
-                "column": { "type": "string" },
+                "column": {
+                    "type": "string",
+                    "description": "The column of the data, can be a template of globals, e.g. \"{values}{share}\", see formElements."
+                },
                 "type": {
                     "enum": ["numeric", "date", "categorical"],
                     "description": "Missing and invalid numeric and date values are null, dates are parsed with Date.parse or are timestamps."