@preschen/gen-vis 0.5.0 → 0.6.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.6.0.js"></script>
 <script>mountGenVisByClass('genVis')</script>
 ```
 
@@ -54,6 +54,23 @@ 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.
 
+### 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
@@ -154,10 +171,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 +245,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-ec3facd5]{margin:2px 16px 2px 4px;font-size:13px;display:inline-block}.formElement .title[data-v-ec3facd5]{margin-right:5px;font-weight:700;display:inline-block}.formElement .entries[data-v-ec3facd5]{display:inline-block}.formElement .entries>div[data-v-ec3facd5]{margin-right:5px;display:inline-block}.formElement .entries>div input[data-v-ec3facd5]{display:inline-block;position:relative;top:1px}.vis[data-v-b07c17d2] text,.vis[data-v-b07c17d2] span,.vis[data-v-b07c17d2] div{font-family:var(--gen-vis-font-family,Century Gothic, sans-serif)}.vis-header .title[data-v-b07c17d2]{font-size:22px;font-weight:700}.vis-header .subtitle[data-v-b07c17d2]{margin-top:3px;font-size:13px}.vis-header[data-v-b07c17d2]{margin-bottom:10px}.vis-footer span[data-v-b07c17d2]{font-size:13px}.facet-title[data-v-b07c17d2]{margin-top:8px;font-size:13px;font-weight:700}.vis-error[data-v-a9d47434]{color:#b00;font-size:13px}\n/*$vite$:1*/\n}"; document.head.appendChild(s); })();
+import { Fragment as e, createApp as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, markRaw as o, mergeProps as s, normalizeStyle as c, openBlock as l, reactive as u, renderList as d, resolveComponent as f, toDisplayString as p, toRaw as ee } from "vue";
+import * as m from "d3";
+import h from "deepmerge";
 //#region src/utils/data.js
-var _ = (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({ ...k(e) }, t, !0), T = (e, t, n = !0) => E(se(e, k), t, n), E = (e, t, n = !1) => se(e, (e) => le({ ...e }, t, n)), D = (e) => e.prop !== void 0, O = (e) => Object.values(e).flatMap((e) => typeof e != "object" || !e ? [] : D(e) ? typeof e.ref == "string" ? [e.ref.split(":")[0]] : [] : O(e)), k = (e) => {
+	if (typeof e == "object" && !Array.isArray(e) && e !== null) return D(e) ? e : C(e, k);
 	if (typeof e == "string" && e.charAt() == "@") {
 		let t = e.substring(1);
 		return {
@@ -88,7 +100,7 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		prop: "fixed",
 		value: e
 	};
-}, M = (e) => {
+}, A = (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) => {
+}, ue = (e) => (Object.values(e.mapping).forEach(A), Array.isArray(e.plot) || (e.plot = [e.plot]), e.facets && Array.isArray(e.facets.dim) && (e.facets.dim = e.facets.dim[0]), e.plot.forEach((e, t) => {
 	e.categories ??= [], e.id ??= `plot-${t}`, e.highlightProps = Object.keys(e.props).filter((e) => e.startsWith("highlight-")).map((e) => e.substring(10));
 }), e.plot.forEach((e) => {
-	e.props = 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, k), e._fill = (t) => E(e.props, t);
+}), e), j = (e) => typeof e == "string" ? [...e.matchAll(/\{(\w+)\}/g)].map((e) => e[1]) : [], de = (e, t = {}) => e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : e), M = (e, t) => {
+	let n = e.formElements ?? [], r = /* @__PURE__ */ new Set([...n.flatMap((e) => e.values.flatMap((e) => Object.keys(e.mapping ?? {}))), ...Object.keys(t.mapping ?? {}).filter((e) => j(t.mapping[e].column).length > 0)]);
 	if (r.size == 0) return !1;
-	let i = n.map((t) => t.values.find((n) => 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 = de(a.column, e.globals));
+		let o = A(a);
+		e.mapping[n] && "props" in e.mapping[n] && (o.props = e.mapping[n].props), e.mapping[n] = o;
 	}), !0;
-}, P = (e) => e.charAt(0).toUpperCase() + e.slice(1), F = {
+}, N = (e) => e.charAt(0).toUpperCase() + e.slice(1), P = {
 	de: {
 		number: {
 			decimal: ",",
@@ -250,35 +264,35 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 			year: "%Y"
 		}
 	}
-}, ce = Object.keys(F), I = {
+}, fe = Object.keys(P), F = {
 	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) => {
+}, I = (e, t, n) => {
 	let r = Object.fromEntries(Object.entries(t).map(([t, n]) => [t, e(n)])), [i, a, o, s, c, l, u] = n;
 	return (e) => (i(e) < e ? r.millisecond : a(e) < e ? r.second : o(e) < e ? r.minute : s(e) < e ? r.hour : l(e) < e ? c(e) < e ? r.day : r.week : u(e) < e ? r.month : r.year)(e);
-}, 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({
+}, pe = (e = "de") => {
+	let t = typeof e == "string" ? { base: e } : e, n = P[t.base ?? "de"];
+	if (!n) throw Error(`Unknown locale '${t.base}', expected one of ${fe.map((e) => `'${e}'`).join(", ")}`);
+	let r = m.formatLocale({
 		...n.number,
 		...t.number
-	}), i = 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" ? I(i.format, a, F.time) : t == "utc" ? I(i.utcFormat, a, F.utc) : null;
 		}
 	};
-}, R = [
+}, L = [
 	"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 = [
+], R = [
 	"numeric",
 	"date",
 	"categorical"
-], B = ["horizontal", "vertical"], V = [
+], z = ["horizontal", "vertical"], B = [
 	"top",
 	"bottom",
 	"left",
 	"right"
-], H = [
+], V = [
 	"fixed",
 	"ref",
 	"relative",
 	"steps"
-], U = (e) => e.map((e) => `'${e}'`).join(", "), W = (e, t, n) => {
+], H = (e) => e.map((e) => `'${e}'`).join(", "), U = (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)}`);
+		V.includes(e.prop) ? e.prop != "fixed" && typeof e.ref != "string" && n(t, `a '${e.prop}' prop needs a 'ref'`) : n(t, `unknown prop '${e.prop}', expected one of ${H(V)}`);
 		return;
 	}
 	let r = [
@@ -335,66 +349,67 @@ 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 ${H(r)} but no 'prop', so it is not evaluated`);
+	Object.entries(e).forEach(([e, r]) => U(r, `${t}.${e}`, n));
+}, me = (e) => {
 	let t = [], n = (e, n) => t.push(`${e}: ${n}`), r = e.mapping ?? {};
 	e.mapping || n("mapping", "missing"), Object.entries(r).forEach(([e, t]) => {
 		let r = `mapping.${e}`;
-		if (typeof t.column != "string" && n(r, "no 'column'"), t.type !== void 0 && !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 && !R.includes(t.type) && n(`${r}.type`, `unknown type '${t.type}', expected one of ${H(R)}`), t.props && !t.props.manual && n(`${r}.props`, "expected 'manual' (and optional 'common') entries"), t.scale) {
+			let e = t.scale.type ?? "linear", i = m[`scale${N(e)}`];
+			typeof i == "function" ? typeof i().ticks == "function" != ["numeric", "date"].includes(t.type) && n(`${r}.scale.type`, `a ${e} scale does not fit the type '${t.type}'`) : n(`${r}.scale.type`, `unknown d3 scale '${e}'`), t.scale.orientation !== void 0 && !z.includes(t.scale.orientation) && n(`${r}.scale.orientation`, `unknown orientation '${t.scale.orientation}', expected one of ${H(z)}`);
 		}
-		t.axis && (t.scale || n(`${r}.axis`, "an axis needs a 'scale'"), 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'"), B.includes(t.axis.position) || n(`${r}.axis.position`, `unknown position '${t.axis.position}', expected one of ${H(B)}`), U(t.axis.ticks, `${r}.axis.ticks`, n));
 	});
 	let i = [].concat(e.plot ?? []);
 	if (i.length == 0 && n("plot", "missing"), i.forEach((e, t) => {
 		let i = `plot[${t}]`;
-		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);
+		L.includes(e.type) || n(`${i}.type`, `unknown type '${e.type}', expected one of ${H(L)}`), (e.categories ?? []).filter((e) => !(e in r)).forEach((e) => n(`${i}.categories`, `unknown mapping '${e}'`)), U(e.props, `${i}.props`, n);
 	}), e.facets) {
 		let t = [].concat(e.facets.dim ?? []);
 		t.length != 1 && n("facets.dim", "expected the name of one mapping"), t.filter((e) => !(e in r)).forEach((e) => n("facets.dim", `unknown mapping '${e}'`));
 	}
-	return W(e.options?.height, "options.height", n), W(e.facets?.cols, "facets.cols", n), t;
-}, G = (e, t = document.baseURI) => new URL(e, t).href, K = async (e) => {
+	let a = (t, r) => j(t).filter((t) => !(t in (e.globals ?? {}))).forEach((e) => n(r, `unknown global '${e}' in the column template`));
+	return Object.entries(r).forEach(([e, t]) => a(t.column, `mapping.${e}.column`)), (e.formElements ?? []).forEach((e, t) => (e.values ?? []).forEach((e, n) => Object.entries(e.mapping ?? {}).forEach(([e, r]) => a(r.column, `formElements[${t}].values[${n}].mapping.${e}.column`)))), U(e.options?.height, "options.height", n), U(e.facets?.cols, "facets.cols", n), t;
+}, W = (e, t = document.baseURI) => new URL(e, t).href, G = async (e) => {
 	try {
-		return await h.text(e);
+		return await m.text(e);
 	} catch (t) {
 		throw Error(`Could not load '${e}': ${t.message}`);
 	}
-}, q = (e, t) => {
+}, K = (e, t) => {
 	try {
 		return JSON.parse(e);
 	} catch (e) {
 		throw Error(`Invalid JSON in definition ${t}: ${e.message}`);
 	}
-}, de = async (e, t, n = K) => {
+}, he = async (e, t, n = G) => {
 	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);
+		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 S(r);
-}, J = (e) => o(Array.from(m(e))), fe = async ({ def: e = null, defUrl: t = null, data: n = null }) => {
+	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 = 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) {
+	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 K(G(i.data, r));
+		n = await G(W(i.data, r));
 	}
-	let s = J(_(n));
+	let s = q(g(n));
 	return {
 		defUrl: r ?? null,
 		defOrg: i,
-		locale: o(le(i.options?.locale)),
+		locale: o(pe(i.options?.locale)),
 		rows: s,
 		def: a,
-		data: J(te(s, a))
+		data: q(ne(s, a))
 	};
-}, pe = class {
+}, _e = class {
 	defUrl = null;
 	defOrg = null;
 	locale = null;
@@ -428,31 +443,31 @@ 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 ge(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)));
+		M(this.def, this.defOrg) && (this.data = q(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) {
+}, ve = () => u(new _e()), J = (e, t) => {
+	let n = e.mapping.scale, r = m[`scale${N(n.type)}`]();
+	if (r.range(T(n.range, t)), e.extent) {
 		e.domain = [...n.domain], e.domainRel = [...n.domainRel ? n.domainRel : [0, 0]], e.domainAbs = n.domainAbs, e.domain[0] ??= e.extent[0], e.domain[1] ??= e.extent[1];
 		let t = e.domain[1] - e.domain[0];
-		e.domain[0] += t * e.domainRel[0], e.domain[1] += t * e.domainRel[1], e.domain[0] += e.domainAbs[0], e.domain[1] += e.domainAbs[1], r.invertCustom = (t) => e.values[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 +476,14 @@ var _ = (e) => typeof e == "string" ? (e = e.replace(/^/, ""), /^\s*\[/.test(
 		}
 		t.attr(e, n);
 	});
-}, he = function(e) {
-	let t = h.select(this);
+}, ye = function(e) {
+	let t = m.select(this);
 	e.group.forEach((e) => {
 		t.attr(`data-group-${e.dim}`, e.key);
 	}), e.group.forEach((e) => {
 		t.attr(`data-visible-${e.dim}`, e.visible);
 	}), t.attr("data-visible", e.group.reduce((e, t) => e && t.visible, !0));
-}, ge = (e, t, n) => {
+}, be = (e, t, n) => {
 	let r = t.categories.filter((e) => e in n).map((e) => ({
 		attr: `data-group-${e}`,
 		value: String(n[e])
@@ -476,25 +491,25 @@ var _ = (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);
 	});
-}, Z = (e, t, n = null) => {
+}, X = (e, t, n = null) => {
 	t.filter((e) => e.highlightProps.length > 0).forEach((t) => {
 		e.selectAll(`g.plotGroup.${t.id} .highlight`).classed("highlight", !1).each(function() {
-			let e = 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 && be(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}`));
 			});
 		});
 	});
-}, Q = (e, t) => {
+}, Z = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, _e = {
+}, xe = {
 	props: [
 		"title",
 		"axis",
@@ -516,14 +531,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 = {
+}, Se = { class: "title" }, Ce = {
 	class: "entries",
 	ref: "entries"
 };
-function be(e, t, n, o, s, u) {
+function we(e, t, n, o, s, u) {
 	return n.axis && n.axis.h ? (l(), i("div", {
 		key: 0,
 		class: "hover",
@@ -532,9 +547,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", Se, p(n.axis.h.name), 1), a("table", Ce, 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 Te = /*#__PURE__*/ Z(xe, [["render", we], ["__scopeId", "data-v-364032d4"]]), Ee = (...e) => e.every((e) => Number.isFinite(e)), De = {
 	props: [
 		"filter",
 		"shared",
@@ -566,12 +581,12 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 			};
 		}
 	},
-	components: { Hover: xe },
+	components: { Hover: Te },
 	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 +594,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(ye);
 		},
 		_pointwise(e, t, n, r = (e) => e) {
-			return t.classed(n, !0).selectAll("g.group").data(e).enter().append("g").attr("class", "group").each(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(ye).selectAll(n).data((e) => {
+				let t = O(e.props);
+				return e.values.filter((e) => t.every((t) => e[t] !== null)).map((t) => r(E(e.props, t)));
+			}).enter().append(n).each(Y);
 		},
 		"svg:path": function(e, t) {
-			this._groupwise(e, t).attr("d", (e) => 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) => Ee(e.x, e.y)).x((e) => e.x).y((e) => e.y)(e.values.map((t) => E(e.props.d, t, !0))));
 		},
 		"svg:circle": function(e, t) {
 			this._pointwise(e, t, "circle");
@@ -610,7 +625,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) => Ee(e.x, e.y0, e.y1)).x((e) => e.x).y1((e) => e.y1).y0((e) => e.y0)(e.values.map((t) => E(e.props.d, t, !0))));
 		},
 		bar(e, t) {
 			let n = this;
@@ -618,15 +633,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 = k(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 = k(e.cx.value - e.width.value / 2), delete e.cx, e.y = k(e.height.value), e.height = k(r - e.height.value), e;
 			});
 		},
 		stackedBar(e, t) {
 			e.forEach((e) => {
 				let t = e.props.x.ref, n = e.props.y.ref;
-				e.props.x = 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 = k(`@${t}:scaled`), e.props.y = k(`@${n}:st:e:scaled`), e.props.height = k(`@${n}:st:h:scaled`), e.props.transform = k(`translate(-${e.props.width.value / 2} 0)`);
 			}), this._pointwise(e, t, "rect", (e) => (e.height.value < 0 && (e.y.value += e.height.value, e.height.value = -e.height.value), e));
 		},
 		scales() {
@@ -636,18 +651,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), J(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${N(n.position)}`](r).tickSizeInner(9).tickSizeOuter(0).ticks(i).tickPadding(n.padding);
 				if (n.format) a.tickFormat(this.store.formatter(t.scale.type)(n.format));
 				else if (!n.values) {
 					let e = this.store.locale.tickFormat(r, t.scale.type, i);
@@ -678,18 +693,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 = () => {
-				e.hover.visible = !1, Z(e.inner, e.def.plot);
+			})), r = this.store.mappingNamesWithKey("hover").filter((e) => e != t.h && e != t.v && this.store.mapping(e).props), i = m.select(this.$refs.hoverMarker).select("line"), a = () => {
+				e.hover.visible = !1, X(e.inner, e.def.plot);
 			};
 			this.hideOnPointerOutside = (t) => {
 				e.hover.visible && !e.$refs.svg.contains(t.target) && a();
 			}, document.addEventListener("pointerdown", this.hideOnPointerOutside), this.inner.append("rect").attr("class", "events").attr("width", this.innerWidth).attr("height", this.innerHeight).attr("opacity", 0).style("touch-action", "pan-y").on("pointerdown pointermove", function(t) {
 				e.hover.visible = !0;
-				let a = 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 +714,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), X(e.inner, e.def.plot, f?.data), e.hover.data = l, e.hover.axis = {
 					h: {
 						col: n.h.name,
 						value: c,
@@ -724,12 +739,12 @@ var xe = /*#__PURE__*/ Q(_e, [["render", be], ["__scopeId", "data-v-364032d4"]])
 			}).on("pointercancel", a);
 		}
 	}
-}, we = ["width", "height"], Te = ["transform"], Ee = ["visibility"], De = {
+}, Oe = ["width", "height"], ke = ["transform"], Ae = ["visibility"], je = {
 	key: 0,
 	class: "debug"
 };
-function Oe(e, t, o, s, u, d) {
-	let m = f("hover");
+function Me(e, t, o, s, u, d) {
+	let ee = f("hover");
 	return l(), i("div", {
 		style: c(`width: ${o.width}px;`),
 		class: "vis-inner"
@@ -746,8 +761,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, Ae)], 8, ke)], 8, Oe)),
+		a("div", { style: c(`transform: translate(${o.margins.left}px, ${o.margins.top + d.innerHeight / 2}px); position: absolute; top: 0; left: 0;`) }, [e.hover.visible ? (l(), n(ee, {
 			key: 0,
 			data: e.hover.data,
 			side: e.hover.side,
@@ -757,41 +772,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", je, p(e.debug), 1)) : r("", !0)
 	], 4);
 }
-var ke = /*#__PURE__*/ Q(Ce, [["render", Oe], ["__scopeId", "data-v-1f05a06e"]]), Ae = {
+var Ne = /*#__PURE__*/ Z(De, [["render", Me], ["__scopeId", "data-v-1f05a06e"]]), Pe = {
 	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) {
+}, Fe = ["width", "height"];
+function Ie(e, t, n, r, a, o) {
 	return l(), i("svg", {
 		width: n.info.size,
 		height: n.info.size,
 		ref: "legendSymbol"
-	}, null, 8, je);
+	}, null, 8, Fe);
 }
 //#endregion
 //#region src/comp/Legend.vue
-var Ne = {
+var Le = {
 	props: ["legend"],
 	inject: ["store"],
 	data: () => ({
 		info: {},
 		entries: []
 	}),
-	components: { LegendSymbol: /* @__PURE__ */ Q(Ae, [["render", Me], ["__scopeId", "data-v-ce0e972e"]]) },
+	components: { LegendSymbol: /* @__PURE__ */ Z(Pe, [["render", Ie], ["__scopeId", "data-v-ce0e972e"]]) },
 	mounted() {
 		this.info = this.store.mapping(this.legend), this.entries = Object.keys(this.info.props).map((e) => ({
 			key: e,
 			props: this.info.props[e],
-			filled: D(this.info.legend.props, this.info.props[e])
+			filled: T(this.info.legend.props, this.info.props[e])
 		}));
 	},
 	methods: { switched(e) {
@@ -801,34 +816,34 @@ var Ne = {
 			selected: e.props.visible
 		});
 	} }
-}, Pe = ["data-dim"], Fe = { class: "title" }, Ie = { class: "entries" }, Le = [
+}, Re = ["data-dim"], ze = { class: "title" }, Be = { class: "entries" }, Ve = [
 	"data-visible",
 	"data-key",
 	"onClick",
 	"onMouseenter"
-], Re = ["innerHTML"];
-function ze(t, o, c, u, m, h) {
-	let g = f("LegendSymbol");
+], He = ["innerHTML"];
+function Ue(t, o, c, u, ee, m) {
+	let h = f("LegendSymbol");
 	return l(), i("div", {
 		class: "legend",
 		"data-dim": c.legend
-	}, [a("div", Fe, p(t.info.name), 1), a("div", Ie, [(l(!0), i(e, null, d(t.entries, (e) => (l(), i("div", s({
+	}, [a("div", ze, p(t.info.name), 1), a("div", Be, [(l(!0), i(e, null, d(t.entries, (e) => (l(), i("div", s({
 		"data-visible": e.props.visible,
 		"data-key": e.key
 	}, { ref_for: !0 }, Object.assign({ ...e.filled }, { name: null }), {
-		onClick: (t) => 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, He)], 16, Ve))), 256))])], 8, Re);
 }
-var Be = /*#__PURE__*/ Q(Ne, [["render", ze], ["__scopeId", "data-v-1bc8d55f"]]), Ve = {
+var We = /*#__PURE__*/ Z(Le, [["render", Ue], ["__scopeId", "data-v-1bc8d55f"]]), Ge = {
 	props: ["element", "globals"],
 	computed: { vg() {
 		return this.globals[this.element.ref];
@@ -838,22 +853,22 @@ 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 = {
+}, Ke = ["id"], qe = { class: "title" }, Je = {
 	key: 0,
 	class: "entries"
-}, Ge = ["id", "onClick"], Ke = [
+}, Ye = ["id", "onClick"], Xe = [
 	"name",
 	"value",
 	"checked"
-], qe = ["for"];
-function Je(t, n, o, s, c, u) {
+], Ze = ["for"];
+function Qe(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", qe, p(o.element.name) + ":", 1), o.element.type == "switch" ? (l(), i("div", Je, [(l(!0), i(e, null, d(o.element.values, (e) => (l(), i("div", {
 		id: `container-${e.id}`,
 		onClick: (t) => u.switched(e)
 	}, [a("input", {
@@ -861,11 +876,11 @@ function Je(t, n, o, s, c, u) {
 		name: 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, Xe), a("label", { for: e.id }, p(e.name), 9, Ze)], 8, Ye))), 256))])) : r("", !0)], 8, Ke);
 }
 //#endregion
 //#region src/comp/Vis.vue
-var Ye = {
+var $e = {
 	inject: ["store"],
 	data: () => ({
 		initialized: !1,
@@ -897,9 +912,9 @@ var Ye = {
 		}
 	},
 	components: {
-		Facet: ke,
-		LegendEntry: Be,
-		FormElement: /* @__PURE__ */ Q(Ve, [["render", Je], ["__scopeId", "data-v-b7f59ae7"]])
+		Facet: Ne,
+		LegendEntry: We,
+		FormElement: /* @__PURE__ */ Z(Ge, [["render", Qe], ["__scopeId", "data-v-ec3facd5"]])
 	},
 	mounted() {
 		this.baseInit(), this.dataInit(), this.scales(), this.store.def.options.width || (this.resizeObserver = new ResizeObserver(() => {
@@ -915,7 +930,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 +941,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,17 +966,17 @@ 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), J(t, {
 						width: this.facets.width - (this.facets.margins.left + this.facets.margins.right),
 						height: this.facets.height - (this.facets.margins.top + this.facets.margins.bottom)
 					}), t;
 				});
-				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;
 		},
@@ -965,49 +987,49 @@ var Ye = {
 			this.store.applyFormElements(), this.changeSelected(e);
 		},
 		highlight(e) {
-			Z(h.select(this.$refs.vis), this.store.def.plot, { [e.dim]: e.key });
+			X(m.select(this.$refs.vis), this.store.def.plot, { [e.dim]: e.key });
 		}
 	}
-}, Xe = { class: "vis-header" }, Ze = { class: "title" }, Qe = { class: "subtitle" }, $e = {
+}, et = { class: "vis-header" }, tt = { class: "title" }, nt = { class: "subtitle" }, rt = {
 	ref: "form",
 	class: "vis-form-elements"
-}, et = {
+}, it = {
 	ref: "legends",
 	class: "vis-legends"
-}, tt = {
+}, at = {
 	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");
+}, ot = { class: "vis-footer" }, st = ["innerHTML"];
+function ct(t, o, s, u, ee, m) {
+	let h = f("form-element"), g = f("legend-entry"), _ = f("facet");
 	return l(), i("div", {
 		class: "vis",
 		ref: "vis",
 		style: c({ "--gen-vis-font-family": t.options.fontFamily })
 	}, [
-		a("div", 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", et, [a("div", tt, p(t.options.title), 1), a("div", nt, p(t.options.subtitle), 1)]),
+		a("div", rt, [(l(!0), i(e, null, d(t.formElements, (e) => (l(), n(h, {
 			element: e,
 			globals: t.globals,
-			onChangeSelected: 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", it, [(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", at, [t.facets.entries.length > 0 ? (l(!0), i(e, { key: 0 }, d(t.facets.entries, (e) => (l(), i("div", { style: c(`width: ${t.facets.width}px; display: inline-block;`) }, [a("div", {
 			class: "facet-title",
 			style: c(`margin-left: ${t.facets.margins.left}px`)
-		}, p(e.filter.name), 5), (l(), n(v, {
+		}, p(e.filter.name), 5), (l(), n(_, {
 			key: e.data,
 			data: e.data,
 			shared: t.facets.shared,
@@ -1020,7 +1042,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 +1055,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", ot, [a("span", { innerHTML: t.options.footer }, null, 8, st)])
 	], 4);
 }
 //#endregion
 //#region src/comp/App.vue
-var at = {
+var lt = {
 	name: "GenVis",
 	props: {
 		debug: {
@@ -1059,13 +1081,13 @@ var at = {
 		}
 	},
 	data: () => ({
-		store: me(),
+		store: ve(),
 		error: null
 	}),
 	provide() {
 		return { store: this.store };
 	},
-	components: { VisBase: /* @__PURE__ */ Q(Ye, [["render", it], ["__scopeId", "data-v-f8fa11d2"]]) },
+	components: { VisBase: /* @__PURE__ */ Z($e, [["render", ct], ["__scopeId", "data-v-b07c17d2"]]) },
 	watch: {
 		def: "init",
 		defFile: "init",
@@ -1094,34 +1116,34 @@ var at = {
 			console.error(e), this.error = e.message;
 		}
 	}
-}, ot = { class: "vis-outer" }, st = {
+}, ut = { class: "vis-outer" }, dt = {
 	key: 0,
 	class: "vis-error"
-}, ct = { key: 2 }, lt = { style: {
+}, ft = { key: 2 }, pt = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
-} }, ut = { style: {
+} }, mt = { style: {
 	height: "500px",
 	overflow: "auto",
 	"font-size": "11px"
 } };
-function dt(e, t, o, s, c, u) {
+function ht(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, [
+	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", lt, p(JSON.stringify(e.store.def, null, 4)), 1),
+		a("pre", pt, 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)
+		a("pre", mt, p(JSON.stringify(e.store.defOrg, null, 4)), 1)
 	])) : r("", !0)]);
 }
-var $ = /*#__PURE__*/ Q(at, [["render", dt], ["__scopeId", "data-v-a9d47434"]]), ft = { install(e) {
-	e.component("GenVis", $);
-} }, pt = (e) => {
+var Q = /*#__PURE__*/ Z(lt, [["render", ht], ["__scopeId", "data-v-a9d47434"]]), gt = { install(e) {
+	e.component("GenVis", Q);
+} }, $ = (e) => {
 	let n = Object.fromEntries(e.getAttributeNames().filter((e) => e.startsWith("data-")).map((t) => [t.substring(5), e.getAttribute(t)]));
-	return t($, 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));
+	return t(Q, n).mount(e);
+}, _t = (e) => {
+	for (let t of document.getElementsByClassName(e)) t.classList.contains("gen-vis-attached") || (t.classList.add("gen-vis-attached"), $(t));
 };
 //#endregion
-export { $ as GenVis, ft as default, mt as mountGenVisByClass, pt as mountGenVisElement };
+export { Q as GenVis, gt as default, _t as mountGenVisByClass, $ as mountGenVisElement };

package/package.json

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

package/schema.json

@@ -229,7 +229,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."