lintje 0.2.0 → 0.4.0

package/dist-elements/tag/chart.js

@@ -1,32 +1,32 @@
-import { A as e, Bt as t, Gt as n, Ht as r, Jt as i, Lt as a, S as o, c as s, d as c, i as l, k as u, l as d, o as f, p, qt as m, r as h, s as g, ut as _, w as v } from "../chunks/base-Bg-IFOPG.js";
-import { t as y } from "./announcement.js";
+import { F as e, I as t, Kt as n, O as r, Yt as i, Zt as a, _ as o, bt as s, c, d as l, en as u, f as d, h as f, nn as p, o as m, p as h, r as g, rn as _, u as v, v as y, y as b } from "../chunks/base-DRGvkF-r.js";
+import { t as x } from "./announcement.js";
 import "./segmented.js";
-import { a as b, c as x, d as S, i as C, n as w, o as T, s as E, t as D } from "../chunks/download-y528pIHP.js";
-import { C as O, E as k, S as A, T as j, _ as M, a as N, b as P, c as F, f as I, g as L, h as R, i as z, l as ee, n as B, o as V, p as te, r as H, s as ne, t as re, u as ie, v as U, w as W, x as G, y as K } from "../chunks/stagger-qGD3wmhg.js";
+import { a as S, c as C, i as w, n as T, t as E } from "../chunks/download-C68kcwPj.js";
+import { C as D, E as O, S as k, T as A, _ as j, a as M, b as N, c as P, f as F, g as I, h as L, i as R, l as z, n as B, o as V, p as H, r as U, s as ee, t as te, u as W, v as G, w as K, x as q, y as ne } from "../chunks/stagger-BB_gcxBI.js";
 import "./data-table.js";
 //#region src/components/shared/charts/shared/plot-keys.ts
-var q = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), ae = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
-function oe(e) {
-	return `${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`.trim()).join(", ")}`;
+var J = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), Y = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+function re(e) {
+	return [`${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`.trim()).join(", ")}`, ...(e.events ?? []).map((e) => `Gebeurtenis ${e.number}: ${e.label}`)].join(". ");
 }
-function J(e) {
+function X(e) {
 	try {
 		return e.matches(":focus-visible");
 	} catch {
 		return !0;
 	}
 }
-function Y(e, t, n) {
+function Z(e, t, n) {
 	let r = (t, r) => {
 		let i = n(r), a = t.closest("[data-tooltip-anchor]"), o = t.getBoundingClientRect(), s = a?.getBoundingClientRect() ?? o;
-		e.hoverIndex = r, e.status = oe(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
+		e.hoverIndex = r, e.status = re(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
 	};
 	return {
 		keydown(n) {
 			if (n.target !== n.currentTarget || t === 0) return;
 			let i = e.hoverIndex ?? -1, a;
-			if (q.has(n.key)) a = Math.min(t - 1, i + 1);
-			else if (ae.has(n.key)) a = Math.max(0, i - 1);
+			if (J.has(n.key)) a = Math.min(t - 1, i + 1);
+			else if (Y.has(n.key)) a = Math.max(0, i - 1);
 			else if (n.key === "Home") a = 0;
 			else if (n.key === "End") a = t - 1;
 			else return;
@@ -34,168 +34,205 @@ function Y(e, t, n) {
 		},
 		focus(n) {
 			let i = n.currentTarget;
-			n.target === i && t !== 0 && J(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
+			n.target === i && t !== 0 && X(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
 		},
 		blur() {
 			(e.hoverIndex != null || e.status) && (e.hoverIndex = null, e.status = "", e.hideTooltip(), e.requestUpdate());
 		}
 	};
 }
-function X(e) {
-	return m`<p class="visually-hidden" role="status">${e.status}</p>`;
+function Q(e) {
+	return p`<p class="visually-hidden" role="status">${e.status}</p>`;
 }
 //#endregion
 //#region src/components/shared/charts/line-chart/line-chart.ts
+var $ = 18, ie = 4, ae = 8;
+function oe(e) {
+	let t = [];
+	return e.map((e) => {
+		let n = t.findIndex((t) => t.every((t) => Math.abs(t - e) >= 22));
+		return n === -1 && (n = t.push([]) - 1), t[n].push(e), n;
+	});
+}
 function se(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: s, unit: l, asOfIndex: u, asOfLabel: f, pendingHours: p = 0, fixedMax: h, small: _ = !1 } = e, v = r.id;
-	r.measure({
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, asOfIndex: c, asOfLabel: d, pendingHours: f = 0, fixedMax: g, small: v = !1 } = e, y = (e.events ?? []).filter((e) => Number.isInteger(e.index) && e.index >= 0 && e.index < i.length).sort((e, t) => e.index - t.index).map((e, t) => ({
+		...e,
+		number: t + 1
+	})), b = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let y = e.series.filter((e) => !e.comparison).length > 1, b = 0, x = e.series.map((e) => ({
+	let x = e.series.filter((e) => !e.comparison).length > 1, S = 0, C = e.series.map((e) => ({
 		...e,
-		color: I(e.color),
-		symbol: y && !e.comparison ? L(e.color) ? e.color : R[b++ % R.length] : void 0
-	})), S = x.filter((e) => !r.hiddenSeries.includes(e.label)), C = S.flatMap((e) => e.values).filter((e) => e != null), { max: w, ticks: T } = G(h ?? Math.max(...C, 1)), E = P(T, r.width, {
-		fontFamily: r.fontFamily,
-		minimum: Math.ceil(d(o[0] ?? "", r.fontFamily) / 2)
-	}), D = K(t, { left: E.width }), A = p > 6, N = u ?? o.length - 1, F = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", z = x.map((e) => ({
+		color: F(e.color),
+		symbol: x && !e.comparison ? I(e.color) ? e.color : L[S++ % L.length] : void 0
+	})), w = C.filter((e) => !n.hiddenSeries.includes(e.label)), T = w.flatMap((e) => e.values).filter((e) => e != null), { max: E, ticks: k } = q(g ?? Math.max(...T, 1)), M = N(k, n.width, {
+		fontFamily: n.fontFamily,
+		minimum: Math.ceil(h(i[0] ?? "", n.fontFamily) / 2)
+	}), P = ne(t, { left: M.width }), R = y.map((e) => Math.min(P.width - $ / 2, Math.max($ / 2, A(e.index, i.length, P)))), B = oe(R), te = B.length ? Math.max(...B) + 1 : 0, W = ne(t, {
+		left: M.width,
+		...te ? { top: te * 22 + ae } : {}
+	}), G = (e) => ie + B[e] * 22, K = f > 6, J = c ?? i.length - 1, Y = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", re = C.map((e) => ({
 		label: e.label,
-		color: F(e),
+		color: Y(e),
 		shape: e.comparison ? "dashed" : "line",
 		symbol: e.symbol,
-		hidden: r.hiddenSeries.includes(e.label)
-	})), B = Math.max(1, Math.ceil(o.length / 8)), re = o.map((e, t) => ({
+		hidden: n.hiddenSeries.includes(e.label)
+	})), X = Math.max(1, Math.ceil(i.length / 8)), se = i.map((e, t) => ({
 		label: e,
-		x: j(t, o.length, D),
+		x: A(t, i.length, W),
 		i: t
-	})).filter((e) => e.i % B === 0);
-	function ie(e) {
+	})).filter((e) => e.i % X === 0);
+	function ce(e) {
+		let t = y.filter((t) => t.index === e);
 		return {
-			title: o[e],
-			rows: S.map((t) => ({
+			title: i[e],
+			rows: w.map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? "geen gegevens" : g(t.values[e]),
-				color: F(t)
-			}))
+				value: t.values[e] == null ? "geen gegevens" : l(t.values[e]),
+				color: Y(t)
+			})),
+			...t.length ? { events: t } : {}
 		};
 	}
-	let U = Y(r, o.length, (e) => {
-		let t = S.map((t) => t.values[e]).filter((e) => e != null);
+	let le = Z(n, i.length, (e) => {
+		let t = w.map((t) => t.values[e]).filter((e) => e != null);
 		return {
-			x: j(e, o.length, D),
-			y: t.length ? k(Math.max(...t), w, D) : D.top,
-			content: ie(e)
+			x: A(e, i.length, W),
+			y: t.length ? O(Math.max(...t), E, W) : W.top,
+			content: ce(e)
 		};
-	}), W = [
-		p > 0 ? (() => {
-			let e = j(N, o.length, D), t = A ? O(D) / (o.length - 1) : D.width - D.right - e;
-			return i`<rect x=${e} y=${D.top} width=${Math.max(0, t)}
-                           height=${D.height - D.top - D.bottom}
-                           fill="url(#hatch-${v})" />`;
-		})() : n,
-		i`<g class="lintje-chart__reveal">
-      ${S.map((e) => {
-			let t = F(e), r = e.comparison ? void 0 : te(t), a = [[]];
+	}), ue = [
+		f > 0 ? (() => {
+			let e = A(J, i.length, W), t = K ? D(W) / (i.length - 1) : W.width - W.right - e;
+			return _`<rect x=${e} y=${W.top} width=${Math.max(0, t)}
+                           height=${W.height - W.top - W.bottom}
+                           fill="url(#hatch-${b})" />`;
+		})() : u,
+		y.length ? _`<g>
+          ${y.map((e, t) => {
+			let n = A(e.index, i.length, W);
+			return _`<line class="lintje-chart__event-line" x1=${n} x2=${n}
+                             y1=${G(t) + $} y2=${W.height - W.bottom} />`;
+		})}
+          ${y.map((e, t) => _`
+              <rect class="lintje-chart__event-chip" x=${R[t] - $ / 2} y=${G(t)}
+                    width=${$} height=${$} />
+              <text class="lintje-chart__event-number" x=${R[t]} y=${G(t) + $ / 2}
+                    text-anchor="middle" dominant-baseline="central">${e.number}</text>
+            `)}
+        </g>` : u,
+		_`<g class="lintje-chart__reveal">
+      ${w.map((e) => {
+			let t = Y(e), n = e.comparison ? void 0 : H(t), r = [[]];
 			e.values.forEach((e, t) => {
-				e == null || A && t > N ? a[a.length - 1].length && a.push([]) : a[a.length - 1].push({
-					x: j(t, o.length, D),
-					y: k(e, w, D)
+				e == null || K && t > J ? r[r.length - 1].length && r.push([]) : r[r.length - 1].push({
+					x: A(t, i.length, W),
+					y: O(e, E, W)
 				});
 			});
-			let s = a.filter((e) => e.length > 0);
-			if (s.length === 0) return n;
-			let c = s[s.length - 1], l = c[c.length - 1], u = D.height - D.bottom;
-			return i`
+			let a = r.filter((e) => e.length > 0);
+			if (a.length === 0) return u;
+			let o = a[a.length - 1], s = o[o.length - 1], c = W.height - W.bottom;
+			return _`
           <g>
-            ${s.map((a) => {
-				let o = a.map((e) => `${e.x},${e.y}`).join(" ");
-				return i`
-                ${e.area && !e.comparison ? i`<polygon fill=${t} fill-opacity=".14"
-                                 points=${`${a[0].x},${u} ${o} ${a[a.length - 1].x},${u}`} />` : n}
-                ${r && a.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${o} stroke=${r} />` : n}
-                ${a.length === 1 ? i`<circle cx=${a[0].x} cy=${a[0].y} r="2.5" fill=${t} />` : i`<polyline
+            ${a.map((r) => {
+				let i = r.map((e) => `${e.x},${e.y}`).join(" ");
+				return _`
+                ${e.area && !e.comparison ? _`<polygon fill=${t} fill-opacity=".14"
+                                 points=${`${r[0].x},${c} ${i} ${r[r.length - 1].x},${c}`} />` : u}
+                ${n && r.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : u}
+                ${r.length === 1 ? _`<circle cx=${r[0].x} cy=${r[0].y} r="2.5" fill=${t} />` : _`<polyline
                         class="lintje-chart__line"
-                        points=${o}
+                        points=${i}
                         stroke=${t}
-                        stroke-dasharray=${e.comparison ? "5 4" : n}
+                        stroke-dasharray=${e.comparison ? "5 4" : u}
                         opacity=${e.comparison ? .9 : 1} />`}
               `;
 			})}
             <!-- The line's own shape at its end; a 4 px point there at an early as-of time. -->
-            ${e.symbol ? i`<path class="lintje-chart__line-end" d=${M(e.symbol, 4.5, l.x, l.y)} fill=${t} />` : A && !e.comparison ? i`<circle cx=${l.x} cy=${l.y} r="4" fill=${t} />` : n}
+            ${e.symbol ? _`<path class="lintje-chart__line-end" d=${j(e.symbol, 4.5, s.x, s.y)} fill=${t} />` : K && !e.comparison ? _`<circle cx=${s.x} cy=${s.y} r="4" fill=${t} />` : u}
           </g>
         `;
 		})}
     </g>`,
-		A && f ? V({
-			area: D,
-			index: N,
-			count: o.length,
-			label: `peilmoment ${f}`,
-			pendingHours: p,
+		K && d ? V({
+			area: W,
+			index: J,
+			count: i.length,
+			label: `peilmoment ${d}`,
+			pendingHours: f,
 			lastValue: (() => {
-				let e = S.find((e) => !e.comparison)?.values[N];
-				return e == null ? void 0 : `${g(e)}${l ? ` ${l}` : ""}`;
+				let e = w.find((e) => !e.comparison)?.values[J];
+				return e == null ? void 0 : `${l(e)}${o ? ` ${o}` : ""}`;
 			})()
-		}) : n,
-		r.hoverIndex == null ? n : S.map((e) => {
-			let t = r.hoverIndex, a = e.values[t];
-			return a == null || A && t > N ? n : i`<circle class="lintje-chart__hover-point" r="4" fill=${F(e)}
-                             cx=${j(t, o.length, D)}
-                             cy=${k(a, w, D)} />`;
+		}) : u,
+		n.hoverIndex == null ? u : w.map((e) => {
+			let t = n.hoverIndex, r = e.values[t];
+			return r == null || K && t > J ? u : _`<circle class="lintje-chart__hover-point" r="4" fill=${Y(e)}
+                             cx=${A(t, i.length, W)}
+                             cy=${O(r, E, W)} />`;
 		}),
-		o.map((e, t) => {
-			let n = j(t, o.length, D), a = O(D) / Math.max(1, o.length - 1);
-			return i`
-        <rect x=${n - a / 2} y=${D.top} width=${a}
-              height=${D.height - D.top - D.bottom}
+		i.map((e, t) => {
+			let r = A(t, i.length, W), a = D(W) / Math.max(1, i.length - 1);
+			return _`
+        <rect x=${r - a / 2} y=${W.top} width=${a}
+              height=${W.height - W.top - W.bottom}
               fill="transparent"
-              @mousemove=${(e) => r.hoverAt(t, e, ie(t))}
-              @mouseleave=${() => r.hoverAt(null)} />
+              @mousemove=${(e) => n.hoverAt(t, e, ce(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
       `;
 		})
 	];
-	return m`
-    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
-      ${ee({
-		items: z,
-		onToggle: (e) => r.toggleSeries(e)
+	return p`
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
+         ${s({ "--lintje-event-size": `${$}px` })}
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({
+		items: re,
+		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: r.fontFamily,
-		id: v,
-		ticks: T,
-		max: w,
-		area: D,
-		formatTick: E.format,
-		axisTitle: s ?? l,
-		xLabels: re,
-		description: a,
-		keys: U
-	}, W)}
-      ${H(r)}
-      ${X(r)}
+      ${ee({
+		fontFamily: n.fontFamily,
+		id: b,
+		ticks: k,
+		max: E,
+		area: W,
+		formatTick: M.format,
+		axisTitle: a ?? o,
+		xLabels: se,
+		description: y.length ? `${r} ${y.map((e) => `Gebeurtenis ${e.number}, ${i[e.index]}: ${e.label}.`).join(" ")}` : r,
+		keys: le
+	}, ue)}
+      ${y.length ? p`<ol class="lintje-chart-events" aria-label="Gebeurtenissen">
+              ${y.map((e) => p`<li class="lintje-chart-events__item">
+                  <span class="lintje-event-chip"><span class="lintje-event-chip__number">${e.number}</span></span>
+                  <span><span class="lintje-chart-events__category">${i[e.index]}</span> ·
+                    ${e.label}</span>
+                </li>`)}
+            </ol>` : u}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/mark-select.ts
-var Z = {
+var ce = {
 	clickable: !1,
 	state: "",
-	markId: n,
-	role: n,
-	tabIndex: n,
-	pressed: n,
-	label: n,
-	click: n,
-	keydown: n
+	markId: u,
+	role: u,
+	tabIndex: u,
+	pressed: u,
+	label: u,
+	click: u,
+	keydown: u
 };
-function Q(e, t) {
+function le(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	for (let e of t) e?.href && n.add(e.id);
 	let r = e.selectedId != null && n.has(e.selectedId) ? e.selectedId : null, i = () => {
@@ -212,8 +249,8 @@ function Q(e, t) {
 		active: r,
 		interactive: !!e.onSelect && n.size > 0,
 		of(t, n, i) {
-			if (!t?.href || !e.onSelect) return r == null ? Z : {
-				...Z,
+			if (!t?.href || !e.onSelect) return r == null ? ce : {
+				...ce,
 				state: "is-muted"
 			};
 			let o = t.id === r;
@@ -238,304 +275,304 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/components/shared/charts/bar-chart/bar-chart.ts
-var ce = [
+var ue = [
 	"var(--color-chart-tint-1)",
 	"var(--color-chart-tint-2)",
 	"var(--color-chart-tint-3)",
 	"var(--color-chart-tint-4)",
 	"var(--color-chart-tint-5)"
 ];
-function le(e, t) {
-	let { controller: r, description: a } = t, { labels: o, values: s, axisTitle: u, trend: d, dataLabels: p = !0, small: h = !1, links: v } = e, y = I(e.color) ?? "var(--color-chart-default)", b = r.id, x = Q(t, v ?? []);
-	r.measure({
+function de(e, t) {
+	let { controller: n, description: r } = t, { labels: i, values: a, axisTitle: o, trend: d, dataLabels: f = !0, small: h = !1, links: g } = e, y = F(e.color) ?? "var(--color-chart-default)", b = n.id, x = le(t, g ?? []);
+	n.measure({
 		width: !0,
 		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let S = s.filter((e) => e != null), { max: C, ticks: w } = G(Math.max(...S, 1)), T = P(w, r.width, { fontFamily: r.fontFamily }), E = K(t, { left: T.width }), D = E.height - E.bottom, { width: O, bandWidth: j } = A(0, o.length, E), M = p && s.every((e) => e == null || l(f(e, O), j - 4)), N = (e) => ({
-		title: o[e],
+	let S = a.filter((e) => e != null), { max: C, ticks: w } = q(Math.max(...S, 1)), T = N(w, n.width, { fontFamily: n.fontFamily }), E = ne(t, { left: T.width }), D = E.height - E.bottom, { width: A, bandWidth: j } = k(0, i.length, E), M = f && a.every((e) => e == null || c(v(e, A), j - 4)), P = (e) => ({
+		title: i[e],
 		rows: [{
-			label: u ?? "Waarde",
-			value: s[e] == null ? "geen gegevens" : g(s[e]),
+			label: o ?? "Waarde",
+			value: a[e] == null ? "geen gegevens" : l(a[e]),
 			color: y
 		}]
-	}), F = Y(r, o.length, (e) => ({
-		x: A(e, o.length, E).center,
-		y: s[e] == null ? E.top : k(s[e], C, E),
-		content: N(e)
-	})), L = [s.map((e, t) => {
-		let a = A(t, o.length, E);
-		if (e == null) return i`<rect class="lintje-chart__missing" x=${a.x} y=${E.top} width=${a.width}
+	}), I = Z(n, i.length, (e) => ({
+		x: k(e, i.length, E).center,
+		y: a[e] == null ? E.top : O(a[e], C, E),
+		content: P(e)
+	})), L = [a.map((e, t) => {
+		let r = k(t, i.length, E);
+		if (e == null) return _`<rect class="lintje-chart__missing" x=${r.x} y=${E.top} width=${r.width}
                          height=${Math.max(0, D - E.top)} fill="url(#hatch-${b})"
-                         @mousemove=${(e) => r.showTooltip(e, N(t))}
-                         @mouseleave=${() => r.hideTooltip()} />`;
-		let s = k(e, C, E), c = x.of(v?.[t], o[t], `${o[t]}: ${g(e)}`);
-		return i`
-        <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-           ${_(B(t, o.length))}
-           @mousemove=${(e) => r.showTooltip(e, N(t))}
-           @mouseleave=${() => r.hideTooltip()}>
-          <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
-                x=${a.x} y=${s} width=${a.width} height=${Math.max(0, D - s)} fill=${y}
-                data-mark-id=${c.markId} role=${c.role} tabindex=${c.tabIndex}
-                aria-pressed=${c.pressed} aria-label=${c.label}
-                @click=${c.click} @keydown=${c.keydown} />
-          ${M ? i`<text x=${a.center} y=${s - 5} text-anchor="middle" class="lintje-chart__data-label">
-                    ${f(e, a.width)}
-                  </text>` : n}
+                         @mousemove=${(e) => n.showTooltip(e, P(t))}
+                         @mouseleave=${() => n.hideTooltip()} />`;
+		let a = O(e, C, E), o = x.of(g?.[t], i[t], `${i[t]}: ${l(e)}`);
+		return _`
+        <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+           ${s(B(t, i.length))}
+           @mousemove=${(e) => n.showTooltip(e, P(t))}
+           @mouseleave=${() => n.hideTooltip()}>
+          <rect class="lintje-chart__bar lintje-chart__mark ${o.state}"
+                x=${r.x} y=${a} width=${r.width} height=${Math.max(0, D - a)} fill=${y}
+                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
+                aria-pressed=${o.pressed} aria-label=${o.label}
+                @click=${o.click} @keydown=${o.keydown} />
+          ${M ? _`<text x=${r.center} y=${a - 5} text-anchor="middle" class="lintje-chart__data-label">
+                    ${v(e, r.width)}
+                  </text>` : u}
         </g>
       `;
-	}), d ? i`<polyline
+	}), d ? _`<polyline
           fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5" stroke-dasharray="5 4"
-          points=${d.map((e, t) => e == null ? null : `${A(t, o.length, E).center},${k(e, C, E)}`).filter(Boolean).join(" ")} />` : n];
-	return m`
+          points=${d.map((e, t) => e == null ? null : `${k(t, i.length, E).center},${O(e, C, E)}`).filter(Boolean).join(" ")} />` : u];
+	return p`
     <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || x.escape(e)}>
-      ${ne({
-		fontFamily: r.fontFamily,
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || x.escape(e)}>
+      ${ee({
+		fontFamily: n.fontFamily,
 		id: b,
 		ticks: w,
 		max: C,
 		area: E,
-		axisTitle: u,
-		description: a,
+		axisTitle: o,
+		description: r,
 		formatTick: T.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, E).center
+			x: k(t, i.length, E).center
 		})),
 		interactive: x.interactive,
-		keys: F
+		keys: I
 	}, L)}
-      ${H(r)}
-      ${X(r)}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/horizontal-bar-chart/horizontal-bar-chart.ts
-function ue(e) {
+function fe(e) {
 	return e * 26 + 24;
 }
-function de(e, t) {
-	let { controller: r, description: a } = t, { rows: o, threshold: s, thresholdLabel: l, unit: u } = e, d = I(e.color) ?? "var(--color-chart-dark-yellow)", f = I(e.aboveThresholdColor) ?? "var(--color-chart-red)", p = r.id, h = o.map((e) => e.href ? {
+function pe(e, t) {
+	let { controller: n, description: r } = t, { rows: i, threshold: a, thresholdLabel: o, unit: c } = e, d = F(e.color) ?? "var(--color-chart-dark-yellow)", f = F(e.aboveThresholdColor) ?? "var(--color-chart-red)", h = n.id, g = i.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), v = Q(t, h), y = ue(o.length);
-	r.measure({
+	} : null), v = le(t, g), y = fe(i.length);
+	n.measure({
 		width: !0,
 		height: y
 	});
-	let b = r.width, x = W(o.map((e) => e.label), b, { fontFamily: r.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...o.map((e) => e.value), s ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${g(e)}${u ? ` ${u}` : ""}`, D = (e) => {
-		let t = o[e], n = s != null && t.value > s;
+	let b = n.width, x = K(i.map((e) => e.label), b, { fontFamily: n.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...i.map((e) => e.value), a ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${l(e)}${c ? ` ${c}` : ""}`, D = (e) => {
+		let t = i[e], n = a != null && t.value > a;
 		return {
 			title: t.label,
 			rows: [{
 				label: "Waarde",
 				value: E(t.value),
 				color: n ? f : d
-			}, ...s == null ? [] : [{
+			}, ...a == null ? [] : [{
 				label: "Norm",
-				value: E(s),
+				value: E(a),
 				color: "var(--color-chart-emphasis)"
 			}]]
 		};
-	}, O = Y(r, o.length, (e) => ({
-		x: C + T(o[e].value),
+	}, O = Z(n, i.length, (e) => ({
+		x: C + T(i[e].value),
 		y: e * 26 + 4,
 		content: D(e)
 	}));
-	return m`
-    <figure class="lintje-chart lintje-chart--rows" ${c(r.attach)} ?data-in-view=${r.inView}
+	return p`
+    <figure class="lintje-chart lintje-chart--rows" ${m(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor
-            @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
-      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${z(v.interactive)}
-           aria-labelledby="${p}-desc" width=${b} height=${y}
-           ${_({
+            @keydown=${(e) => n.dismiss(e) || v.escape(e)}>
+      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${R(v.interactive)}
+           aria-labelledby="${h}-desc" width=${b} height=${y}
+           ${s({
 		height: `${y}px`,
-		...N(p)
+		...M(h)
 	})}
            tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
-        <desc id="${p}-desc">${a}</desc>
-        <defs>${F(p)}</defs>
-        ${s == null ? n : i`
-          <line x1=${C + T(s)} x2=${C + T(s)} y1=${4} y2=${o.length * 26 + 2}
+        <desc id="${h}-desc">${r}</desc>
+        <defs>${P(h)}</defs>
+        ${a == null ? u : _`
+          <line x1=${C + T(a)} x2=${C + T(a)} y1=${4} y2=${i.length * 26 + 2}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${C + T(s) + 6} y=${o.length * 26 + 16} class="lintje-chart__axis-label">
-            ${l ?? `norm ${g(s)}`}
+          <text x=${C + T(a) + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">
+            ${o ?? `norm ${l(a)}`}
           </text>
         `}
-        ${o.map((e, t) => {
-		let n = t * 26 + 4, a = s != null && e.value > s, c = T(e.value), l = v.of(h[t], e.label, `${e.label}: ${g(e.value)}${u ? ` ${u}` : ""}`);
-		return i`
-            <g class="lintje-chart__bar-row ${r.hoverIndex === t ? "is-hovered" : ""}"
-               @mousemove=${(e) => r.showTooltip(e, D(t))}
-               @mouseleave=${() => r.hideTooltip()}>
+        ${i.map((e, t) => {
+		let r = t * 26 + 4, o = a != null && e.value > a, u = T(e.value), p = v.of(g[t], e.label, `${e.label}: ${l(e.value)}${c ? ` ${c}` : ""}`);
+		return _`
+            <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
+               @mousemove=${(e) => n.showTooltip(e, D(t))}
+               @mouseleave=${() => n.hideTooltip()}>
               <!-- Hit area across the whole row, so the tooltip doesn't flicker between bars. -->
-              <rect x=${0} y=${n - 5} width=${b} height=${26} fill="transparent" />
-              <text x=${S} y=${n + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${l.state}"
-                    ${_(B(t, o.length))}
-                    x=${C} y=${n} width=${Math.max(0, c)} height=${16}
-                    fill=${a ? f : d}
-                    data-mark-id=${l.markId} role=${l.role} tabindex=${l.tabIndex}
-                    aria-pressed=${l.pressed} aria-label=${l.label}
-                    @click=${l.click} @keydown=${l.keydown} />
-              <text x=${C + c + 6} y=${n + 16 - 3} font-weight="700"
-                    class="lintje-chart__data-label ${s == null ? "" : "lintje-chart__data-label--halo"}">
-                ${g(e.value)}${u ? ` ${u}` : ""}
+              <rect x=${0} y=${r - 5} width=${b} height=${26} fill="transparent" />
+              <text x=${S} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${p.state}"
+                    ${s(B(t, i.length))}
+                    x=${C} y=${r} width=${Math.max(0, u)} height=${16}
+                    fill=${o ? f : d}
+                    data-mark-id=${p.markId} role=${p.role} tabindex=${p.tabIndex}
+                    aria-pressed=${p.pressed} aria-label=${p.label}
+                    @click=${p.click} @keydown=${p.keydown} />
+              <text x=${C + u + 6} y=${r + 16 - 3} font-weight="700"
+                    class="lintje-chart__data-label ${a == null ? "" : "lintje-chart__data-label--halo"}">
+                ${l(e.value)}${c ? ` ${c}` : ""}
               </text>
             </g>
           `;
 	})}
       </svg>
-      ${H(r)}
-      ${X(r)}
+      ${U(n)}
+      ${Q(n)}
     </figure>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/target-progress-chart/target-progress-chart.ts
-function fe(e, t) {
-	let { controller: n, description: r } = t, { rows: a, target: o = 100 } = e, l = n.id, u = ue(a.length);
+function me(e, t) {
+	let { controller: n, description: r } = t, { rows: i, target: a = 100 } = e, o = n.id, c = fe(i.length);
 	n.measure({
 		width: !0,
-		height: u
+		height: c
 	});
-	let d = n.width, f = W(a.map((e) => e.label), d, { fontFamily: n.fontFamily }), { labelEnd: p, barStart: h } = f, g = (e) => Math.max(40, d - h - 70) * e / 110, v = h + g(o), y = (e) => e >= o ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
-		title: a[e].label,
+	let l = n.width, u = K(i.map((e) => e.label), l, { fontFamily: n.fontFamily }), { labelEnd: f, barStart: h } = u, g = (e) => Math.max(40, l - h - 70) * e / 110, v = h + g(a), y = (e) => e >= a ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
+		title: i[e].label,
 		rows: [{
 			label: "Voortgang",
-			value: s(a[e].value),
-			color: y(a[e].value)
+			value: d(i[e].value),
+			color: y(i[e].value)
 		}, {
 			label: "Doel",
-			value: s(o),
+			value: d(a),
 			color: "var(--color-chart-emphasis)"
 		}]
-	}), x = Y(n, a.length, (e) => ({
-		x: h + g(a[e].value),
+	}), x = Z(n, i.length, (e) => ({
+		x: h + g(i[e].value),
 		y: e * 26 + 4,
 		content: b(e)
 	}));
-	return m`
-    <figure class="lintje-chart lintje-chart--rows" ${c(n.attach)} ?data-in-view=${n.inView}
+	return p`
+    <figure class="lintje-chart lintje-chart--rows" ${m(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor @keydown=${(e) => n.dismiss(e)}>
-      <svg viewBox="0 0 ${d} ${u}" class="lintje-chart__svg" role="img"
-           aria-labelledby="${l}-desc" width=${d} height=${u} ${_({ height: `${u}px` })}
+      <svg viewBox="0 0 ${l} ${c}" class="lintje-chart__svg" role="img"
+           aria-labelledby="${o}-desc" width=${l} height=${c} ${s({ height: `${c}px` })}
            tabindex="0" @keydown=${x.keydown} @focus=${x.focus} @blur=${x.blur}>
-        <desc id="${l}-desc">${r}</desc>
-        ${a.map((e, t) => {
-		let r = t * 26 + 4, c = g(e.value), l = y(e.value), u = h + c + 46 > d, m = e.value >= o ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-		return i`
+        <desc id="${o}-desc">${r}</desc>
+        ${i.map((e, t) => {
+		let r = t * 26 + 4, o = g(e.value), c = y(e.value), p = h + o + 46 > l, m = e.value >= a ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return _`
             <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
                @mousemove=${(e) => n.showTooltip(e, b(t))}
                @mouseleave=${() => n.hideTooltip()}>
-              <rect x=${0} y=${r - 5} width=${d} height=${26} fill="transparent" />
-              <text x=${p} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${f.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${_(B(t, a.length))}
-                    x=${h} y=${r} width=${Math.max(0, c)} height=${16} fill=${l} />
-              <text x=${u ? h + c - 6 : h + c + 6} y=${r + 16 - 3}
-                    text-anchor=${u ? "end" : "start"}
-                    class="lintje-chart__data-label ${u ? m : ""}" font-weight="700">${s(e.value)}</text>
+              <rect x=${0} y=${r - 5} width=${l} height=${26} fill="transparent" />
+              <text x=${f} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${u.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${s(B(t, i.length))}
+                    x=${h} y=${r} width=${Math.max(0, o)} height=${16} fill=${c} />
+              <text x=${p ? h + o - 6 : h + o + 6} y=${r + 16 - 3}
+                    text-anchor=${p ? "end" : "start"}
+                    class="lintje-chart__data-label ${p ? m : ""}" font-weight="700">${d(e.value)}</text>
             </g>
           `;
 	})}
-        <line x1=${v} x2=${v} y1=${0} y2=${a.length * 26 + 2}
+        <line x1=${v} x2=${v} y1=${0} y2=${i.length * 26 + 2}
               stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-        <text x=${v + 6} y=${a.length * 26 + 16} class="lintje-chart__axis-label">norm ${o}</text>
+        <text x=${v + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">norm ${a}</text>
       </svg>
-      ${H(n)}
-      ${X(n)}
+      ${U(n)}
+      ${Q(n)}
     </figure>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/grouped-bar-chart/grouped-bar-chart.ts
-function pe(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: s, small: u = !1 } = e, d = r.id;
-	r.measure({
+function he(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, small: o = !1 } = e, d = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (o ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let p = e.series.map((e) => ({
+	let f = e.series.map((e) => ({
 		...e,
-		color: I(e.color)
-	})), h = p.filter((e) => !r.hiddenSeries.includes(e.label)), v = Q(t, h.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = G(Math.max(...h.flatMap((e) => e.values), 1)), x = P(b, r.width, { fontFamily: r.fontFamily }), S = K(t, { left: x.width }), C = S.height - S.bottom, w = A(0, o.length, S).width / Math.max(1, h.length), T = h.every((e) => e.values.every((e) => l(f(e, w), w - 2))), E = p.map((e, t) => ({
+		color: F(e.color)
+	})), h = f.filter((e) => !n.hiddenSeries.includes(e.label)), g = le(t, h.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = q(Math.max(...h.flatMap((e) => e.values), 1)), x = N(b, n.width, { fontFamily: n.fontFamily }), S = ne(t, { left: x.width }), C = S.height - S.bottom, w = k(0, i.length, S).width / Math.max(1, h.length), T = h.every((e) => e.values.every((e) => c(v(e, w), w - 2))), E = f.map((e, t) => ({
 		label: e.label,
 		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
 		shape: "square",
-		hidden: r.hiddenSeries.includes(e.label)
-	})), D = (e, t) => E[p.indexOf(e)]?.color ?? ce[t], O = (e) => ({
-		title: o[e],
+		hidden: n.hiddenSeries.includes(e.label)
+	})), D = (e, t) => E[f.indexOf(e)]?.color ?? ue[t], A = (e) => ({
+		title: i[e],
 		rows: h.map((t, n) => ({
 			label: t.label,
-			value: g(t.values[e]),
+			value: l(t.values[e]),
 			color: D(t, n)
 		}))
-	}), j = Y(r, o.length, (e) => ({
-		x: A(e, o.length, S).center,
-		y: k(Math.max(0, ...h.map((t) => t.values[e])), y, S),
-		content: O(e)
-	})), M = o.map((e, t) => {
-		let a = A(t, o.length, S);
-		return i`
-      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-         ${_(B(t, o.length))}
-         @mousemove=${(e) => r.showTooltip(e, O(t))}
-         @mouseleave=${() => r.hideTooltip()}>
-        ${h.map((r, o) => {
-			let s = r.values[t], c = k(s, y, S), l = D(r, o), u = v.of(r.links?.[t], `${e} · ${r.label}`, `${e}, ${r.label}: ${g(s)}`);
-			return i`
+	}), j = Z(n, i.length, (e) => ({
+		x: k(e, i.length, S).center,
+		y: O(Math.max(0, ...h.map((t) => t.values[e])), y, S),
+		content: A(e)
+	})), M = i.map((e, t) => {
+		let r = k(t, i.length, S);
+		return _`
+      <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+         ${s(B(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, A(t))}
+         @mouseleave=${() => n.hideTooltip()}>
+        ${h.map((n, i) => {
+			let a = n.values[t], o = O(a, y, S), s = D(n, i), c = g.of(n.links?.[t], `${e} · ${n.label}`, `${e}, ${n.label}: ${l(a)}`);
+			return _`
             <g>
-              <rect class="lintje-chart__bar lintje-chart__mark ${u.state}"
-                    x=${a.x + o * w} y=${c} width=${w - 2}
-                    height=${Math.max(0, C - c)} fill=${l}
-                    data-mark-id=${u.markId} role=${u.role} tabindex=${u.tabIndex}
-                    aria-pressed=${u.pressed} aria-label=${u.label}
-                    @click=${u.click} @keydown=${u.keydown} />
-              ${T ? i`<text x=${a.x + o * w + (w - 2) / 2} y=${c - 4}
-                            text-anchor="middle" class="lintje-chart__data-label">${f(s, w)}</text>` : n}
+              <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
+                    x=${r.x + i * w} y=${o} width=${w - 2}
+                    height=${Math.max(0, C - o)} fill=${s}
+                    data-mark-id=${c.markId} role=${c.role} tabindex=${c.tabIndex}
+                    aria-pressed=${c.pressed} aria-label=${c.label}
+                    @click=${c.click} @keydown=${c.keydown} />
+              ${T ? _`<text x=${r.x + i * w + (w - 2) / 2} y=${o - 4}
+                            text-anchor="middle" class="lintje-chart__data-label">${v(a, w)}</text>` : u}
             </g>
           `;
 		})}
       </g>
     `;
 	});
-	return m`
-    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
-      ${ee({
+	return p`
+    <div class="lintje-chart-wrap ${o ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
+      ${z({
 		items: E,
-		onToggle: (e) => r.toggleSeries(e)
+		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: r.fontFamily,
+      ${ee({
+		fontFamily: n.fontFamily,
 		id: d,
 		ticks: b,
 		max: y,
 		area: S,
-		axisTitle: s,
-		description: a,
+		axisTitle: a,
+		description: r,
 		formatTick: x.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, S).center
+			x: k(t, i.length, S).center
 		})),
-		interactive: v.interactive,
+		interactive: g.interactive,
 		keys: j
 	}, M)}
-      ${H(r)}
-      ${X(r)}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/tints.ts
-var $ = [
+var ge = [
 	[1],
 	[1, 4],
 	[
@@ -557,14 +594,14 @@ var $ = [
 		5
 	]
 ];
-function me(e, t) {
+function _e(e, t) {
 	if (e < 1) return [];
-	let n = $[Math.min(e, $.length) - 1];
-	return h(t) ? n.map((e) => e === 1 ? `var(--color-chart-${t})` : `var(--color-chart-${t}-tint-${e})`) : n.map((e) => `var(--color-chart-tint-${e})`);
+	let n = ge[Math.min(e, ge.length) - 1];
+	return g(t) ? n.map((e) => e === 1 ? `var(--color-chart-${t})` : `var(--color-chart-${t}-tint-${e})`) : n.map((e) => `var(--color-chart-tint-${e})`);
 }
 //#endregion
 //#region src/components/shared/charts/stacked-bar-chart/stacked-bar-chart.ts
-var he = /* @__PURE__ */ new Set([
+var ve = /* @__PURE__ */ new Set([
 	"sky-blue",
 	"red",
 	"green",
@@ -577,17 +614,17 @@ var he = /* @__PURE__ */ new Set([
 	"dark-blue",
 	"moss-green"
 ]);
-function ge(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: u, normalized: d = !1, totalOnTop: p = !0, small: h = !1 } = e, v = r.id;
-	r.measure({
+function ye(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, normalized: o = !1, totalOnTop: f = !0, small: h = !1 } = e, g = n.id;
+	n.measure({
 		width: !0,
 		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
 	let y = e.series.map((e) => ({
 		...e,
-		color: I(e.color)
-	})), b = Q(t, y.flatMap((e) => e.links ?? [])), x = o.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = d ? {
+		color: F(e.color)
+	})), b = le(t, y.flatMap((e) => e.links ?? [])), x = i.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = o ? {
 		max: 100,
 		ticks: [
 			0,
@@ -596,103 +633,295 @@ function ge(e, t) {
 			75,
 			100
 		]
-	} : G(Math.max(...x, 1)), w = P(C, r.width, { fontFamily: r.fontFamily }), T = K(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: O } = A(0, o.length, T), j = p && !d && x.every((e) => l(f(e, O), O - 4)), M = me(y.length), N = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], F = (t) => {
+	} : q(Math.max(...x, 1)), w = N(C, n.width, { fontFamily: n.fontFamily }), T = ne(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: A } = k(0, i.length, T), j = f && !o && x.every((e) => c(v(e, A), A - 4)), M = _e(y.length), P = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], I = (t) => {
 		let n = e.series[t].color;
-		return (n == null ? t === 0 : he.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return (n == null ? t === 0 : ve.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
 	}, L = (e) => ({
-		title: o[e],
+		title: i[e],
 		rows: y.map((t, n) => ({
 			label: t.label,
-			value: d ? s(t.values[e] / x[e] * 100) : g(t.values[e]),
-			color: N(t, n)
+			value: o ? d(t.values[e] / x[e] * 100) : l(t.values[e]),
+			color: P(t, n)
 		}))
-	}), R = Y(r, o.length, (e) => ({
-		x: A(e, o.length, T).center,
-		y: k(d ? S : x[e], S, T),
+	}), R = Z(n, i.length, (e) => ({
+		x: k(e, i.length, T).center,
+		y: O(o ? S : x[e], S, T),
 		content: L(e)
-	})), z = y.map((e, t) => ({
+	})), V = y.map((e, t) => ({
 		label: e.label,
-		color: N(e, t),
+		color: P(e, t),
 		shape: "square"
-	})), V = o.map((e, t) => {
-		let a = A(t, o.length, T), c = 0, u = y.map((e, n) => {
-			let r = e.values[t], i = d ? r / x[t] * 100 : r, a = k(c, S, T);
-			c += i;
-			let o = k(c, S, T);
+	})), H = i.map((e, t) => {
+		let r = k(t, i.length, T), a = 0, f = y.map((e, n) => {
+			let r = e.values[t], i = o ? r / x[t] * 100 : r, s = O(a, S, T);
+			a += i;
+			let c = O(a, S, T);
 			return {
 				row: e,
 				j: n,
 				value: i,
-				y1: o,
-				height: Math.max(0, a - o)
+				y1: c,
+				height: Math.max(0, s - c)
 			};
 		});
-		return i`
-      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-         ${_(B(t, o.length))}
-         @mousemove=${(e) => r.showTooltip(e, L(t))}
-         @mouseleave=${() => r.hideTooltip()}>
+		return _`
+      <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+         ${s(B(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, L(t))}
+         @mouseleave=${() => n.hideTooltip()}>
         <!-- The hit area under the whole column, so the tooltip also follows the empty
              space above the stack. It lies *under* the segments: on top it swallowed
              every click on a segment that drills. -->
-        <rect x=${a.x} y=${T.top} width=${a.width} height=${E - T.top} fill="transparent" />
+        <rect x=${r.x} y=${T.top} width=${r.width} height=${E - T.top} fill="transparent" />
         <!-- The segments in one group, so the column lifts on hover as a whole. -->
         <g class="lintje-chart__bar">
-          ${u.map((n) => {
-			let r = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${g(n.row.values[t])}`);
-			return i`
-            <rect class="lintje-chart__mark lintje-chart__segment ${r.state}"
-                  x=${a.x} y=${n.y1} width=${a.width} height=${n.height}
-                  fill=${N(n.row, n.j)}
-                  data-mark-id=${r.markId} role=${r.role} tabindex=${r.tabIndex}
-                  aria-pressed=${r.pressed} aria-label=${r.label}
-                  @click=${r.click} @keydown=${r.keydown} />
+          ${f.map((n) => {
+			let i = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${l(n.row.values[t])}`);
+			return _`
+            <rect class="lintje-chart__mark lintje-chart__segment ${i.state}"
+                  x=${r.x} y=${n.y1} width=${r.width} height=${n.height}
+                  fill=${P(n.row, n.j)}
+                  data-mark-id=${i.markId} role=${i.role} tabindex=${i.tabIndex}
+                  aria-pressed=${i.pressed} aria-label=${i.label}
+                  @click=${i.click} @keydown=${i.keydown} />
           `;
 		})}
         </g>
         <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. -->
-        ${d ? u.map((e) => e.height >= 16 && l(s(e.value), D - 4) ? i`<text x=${a.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
-                        class="lintje-chart__data-label ${F(e.j)}">${s(e.value)}</text>` : n) : n}
-        ${j ? i`<text x=${a.center} y=${k(x[t], S, T) - 5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${f(x[t], a.bandWidth)}</text>` : n}
+        ${o ? f.map((e) => e.height >= 16 && c(d(e.value), D - 4) ? _`<text x=${r.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
+                        class="lintje-chart__data-label ${I(e.j)}">${d(e.value)}</text>` : u) : u}
+        ${j ? _`<text x=${r.center} y=${O(x[t], S, T) - 5} text-anchor="middle"
+                      class="lintje-chart__data-label" font-weight="700">${v(x[t], r.bandWidth)}</text>` : u}
       </g>
     `;
 	});
-	return m`
+	return p`
     <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || b.escape(e)}>
-      ${ee({ items: z })}
-      ${ne({
-		fontFamily: r.fontFamily,
-		id: v,
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || b.escape(e)}>
+      ${z({ items: V })}
+      ${ee({
+		fontFamily: n.fontFamily,
+		id: g,
 		ticks: C,
 		max: S,
 		area: T,
-		axisTitle: u,
-		description: a,
+		axisTitle: a,
+		description: r,
 		formatTick: w.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, T).center
+			x: k(t, i.length, T).center
 		})),
 		interactive: b.interactive,
 		keys: R
-	}, V)}
-      ${H(r)}
-      ${X(r)}
+	}, H)}
+      ${U(n)}
+      ${Q(n)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/stacked-area-chart/stacked-area-chart.ts
+var be = "geen gegevens", xe = /* @__PURE__ */ new WeakMap();
+function Se(e, t) {
+	return e.duration > 0 ? Math.min(1, (t - e.start) / e.duration) : 1;
+}
+function Ce(e, t) {
+	let n = Se(e, t);
+	if (n >= 1) return e.to;
+	let r = e.ease(n);
+	return e.to.map((t, n) => e.from[n] + (t - e.from[n]) * r);
+}
+function we(e, t, n) {
+	let r = performance.now(), i = xe.get(e);
+	if (!i || i.key !== t) {
+		let a = {
+			key: t,
+			from: n,
+			to: n,
+			start: r,
+			duration: 0,
+			ease: (e) => e,
+			element: i?.element,
+			attach: (e) => {
+				a.element = e;
+			}
+		};
+		return xe.set(e, a), n;
+	}
+	if (i.to.some((e, t) => e !== n[t])) {
+		let t = i.element, a = !t || b();
+		if (i.from = a ? n : Ce(i, r), i.to = n, i.start = r, i.duration = a ? 0 : o(t, "--dur-layer"), i.ease = t ? y(t, "--ease-in-motion") : (e) => e, i.frame == null && i.duration > 0) {
+			let t = i, n = () => {
+				t.frame = void 0;
+				let r = Se(t, performance.now()) >= 1;
+				e.requestUpdate(), r || (t.frame = requestAnimationFrame(n));
+			};
+			t.frame = requestAnimationFrame(n);
+		}
+	}
+	return Ce(i, r);
+}
+function Te(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, small: s = !1 } = e, c = n.id, d = i.length;
+	n.measure({
+		width: !0,
+		height: t.height ?? (s ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let f = _e(e.series.length, e.color), g = e.series.map((e, t) => ({
+		...e,
+		color: f[Math.min(t, f.length - 1)],
+		hidden: n.hiddenSeries.includes(e.label)
+	})), v = g.filter((e) => !e.hidden), y = we(n, g.map((e) => e.label).join("\0"), g.map((e) => +!e.hidden)), b = y.some((e, t) => e !== +!g[t].hidden), x = xe.get(n), S = g.map(() => i.map(() => !1)), C = g.map(() => i.map(() => 0)), w = g.map(() => i.map(() => 0)), T = i.map(() => !1);
+	i.forEach((e, t) => {
+		let n = 0;
+		g.forEach((e, r) => {
+			if (y[r] === 0) return;
+			let i = e.values[t];
+			T[t] || i == null ? T[t] = !0 : (S[r][t] = !0, C[r][t] = n, n += i * y[r], w[r][t] = n);
+		});
+	});
+	let E = y.some((e) => e > 0), k = i.map((e, t) => g.map((e) => e.values[t]).filter((e) => e != null)).filter((e) => e.length > 0).map((e) => e.reduce((e, t) => e + t, 0)), { max: j, ticks: M } = q(Math.max(...k, 1)), P = N(M, n.width, {
+		fontFamily: n.fontFamily,
+		minimum: Math.ceil(h(i[0] ?? "", n.fontFamily) / 2)
+	}), F = ne(t, { left: P.width }), I = F.height - F.bottom, L = (e) => A(e, d, F), R = (e) => O(e, j, F), B = (e) => {
+		let t = [];
+		return i.forEach((n, r) => {
+			if (!e(r)) return;
+			let i = t[t.length - 1];
+			i && i[i.length - 1] === r - 1 ? i.push(r) : t.push([r]);
+		}), t;
+	}, V = i.map((e, t) => {
+		let n = 0;
+		for (let e of v) {
+			let r = e.values[t];
+			if (r == null) return {
+				level: n,
+				complete: !1
+			};
+			n += r;
+		}
+		return {
+			level: n,
+			complete: v.length > 0
+		};
+	}), H = g.map((e) => ({
+		label: e.label,
+		color: e.color,
+		shape: "square",
+		hidden: e.hidden
+	})), te = Math.max(1, Math.ceil(d / 8)), W = i.map((e, t) => ({
+		label: e,
+		x: L(t),
+		i: t
+	})).filter((e) => e.i % te === 0), G = v.length < g.length ? "Totaal getoond" : "Totaal";
+	function K(e) {
+		return {
+			title: i[e],
+			rows: [...[...v].reverse().map((t) => ({
+				label: t.label,
+				value: t.values[e] == null ? be : l(t.values[e]),
+				color: t.color
+			})), ...v.length > 0 ? [{
+				label: G,
+				value: V[e].complete ? l(V[e].level) : be,
+				divider: !0
+			}] : []]
+		};
+	}
+	let J = Z(n, d, (e) => ({
+		x: L(e),
+		y: V[e].level > 0 ? R(V[e].level) : F.top,
+		content: K(e)
+	})), Y = (e) => {
+		let t = [0, 0];
+		return g.forEach((n, r) => {
+			S[r][e] && S[r][e + 1] && (t = [w[r][e], w[r][e + 1]]);
+		}), t;
+	}, re = (E ? B((e) => T[e]) : []).map((e) => {
+		let t = Math.max(0, e[0] - 1), r = Math.min(d - 1, e[e.length - 1] + 1), i = Array.from({ length: r - t }, (e, n) => t + n).map((e) => {
+			let [t, n] = Y(e);
+			return {
+				k: e,
+				left: R(t),
+				right: R(n)
+			};
+		}), a = L(t), o = L(r) - a, s = Math.min(I, ...i.flatMap((e) => [e.left, e.right]));
+		return {
+			segments: i,
+			from: a,
+			width: o,
+			ceiling: s,
+			fits: h(be, n.fontFamily) + 8 <= o && s - F.top >= 20
+		};
+	}), X = (e, t) => t.map((t) => `${L(t)},${R(e[t])}`), $ = [
+		re.map((e) => _`
+        ${e.segments.map((e) => _`<polygon fill="url(#hatch-${c})"
+            points=${`${L(e.k)},${F.top} ${L(e.k + 1)},${F.top} ${L(e.k + 1)},${e.right} ${L(e.k)},${e.left}`} />`)}
+        ${e.fits ? _`<text x=${e.from + e.width / 2} y=${(F.top + e.ceiling) / 2 + 4}
+                      text-anchor="middle"
+                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${be}</text>` : u}
+      `),
+		_`<g class="lintje-chart__reveal" ${m(x.attach)}>
+      ${g.map((e, t) => {
+			let n = B((e) => S[t][e]);
+			return _`<g>
+          ${n.map((n) => n.length === 1 ? _`<circle cx=${L(n[0])} cy=${R(w[t][n[0]])} r="2.5" fill=${e.color} />` : _`<polygon fill=${e.color}
+                      points=${[...X(w[t], n), ...X(C[t], n).reverse()].join(" ")} />`)}
+        </g>`;
+		})}
+      <!-- Between two parts a 1 px line in the surface: along each part's lower edge, not the floor. -->
+      ${g.map((e, t) => B((e) => S[t][e] && C[t][e] > 0).filter((e) => e.length > 1).map((e) => _`<polyline class="lintje-chart__segment" fill="none" points=${X(C[t], e).join(" ")} />`))}
+    </g>`,
+		n.hoverIndex != null && !b ? g.map((e, t) => S[t][n.hoverIndex] ? _`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
+                          cx=${L(n.hoverIndex)} cy=${R(w[t][n.hoverIndex])} />` : u) : u,
+		i.map((e, t) => {
+			let r = D(F) / Math.max(1, d - 1);
+			return _`
+        <rect x=${L(t) - r / 2} y=${F.top} width=${r}
+              height=${I - F.top}
+              fill="transparent"
+              @mousemove=${(e) => n.hoverAt(t, e, K(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
+      `;
+		})
+	];
+	return p`
+    <div class="lintje-chart-wrap ${s ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({
+		items: H,
+		onToggle: (e) => n.toggleSeries(e)
+	})}
+      ${ee({
+		fontFamily: n.fontFamily,
+		id: c,
+		ticks: M,
+		max: j,
+		area: F,
+		formatTick: P.format,
+		axisTitle: a ?? o,
+		xLabels: W,
+		description: r,
+		keys: J
+	}, $)}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/pie-chart/pie-chart.ts
-var _e = 5, ve = (e) => {
+var Ee = 5, De = (e) => {
 	let t = e.label.toLowerCase();
 	return t.startsWith("overig") || t === "rest";
-}, ye = (e) => !e.remainder && !ve(e);
-function be(e) {
-	let t = e.filter(ye).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && ve(e)), r = e.filter((e) => e.remainder);
-	if (t.length > _e) {
+}, Oe = (e) => !e.remainder && !De(e);
+function ke(e) {
+	let t = e.filter(Oe).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && De(e)), r = e.filter((e) => e.remainder);
+	if (t.length > Ee) {
 		let e = t.splice(4).reduce((e, t) => e + t.value, 0);
 		if (n.length > 0) {
 			let [t] = n;
@@ -712,82 +941,82 @@ function be(e) {
 		...r
 	];
 }
-function xe(e, t) {
-	let { controller: r, description: a } = t, { donut: o = !1, centerValue: l, centerLabel: u, legendTable: d = !0, labelHeader: f = "Categorie" } = e, p = r.id, h = be(e.segments).map((e) => ({
+function Ae(e, t) {
+	let { controller: n, description: r } = t, { donut: i = !1, centerValue: a, centerLabel: o, legendTable: c = !0, labelHeader: f = "Categorie" } = e, h = n.id, g = ke(e.segments).map((e) => ({
 		...e,
-		color: I(e.color)
-	})), v = h.map((e) => e.href ? {
+		color: F(e.color)
+	})), v = g.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), y = Q(t, v), b = (e) => {
-		let t = y.of(v[e], h[e].label, h[e].label).state;
+	} : null), y = le(t, v), b = (e) => {
+		let t = y.of(v[e], g[e].label, g[e].label).state;
 		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
 	}, x = !!t.expanded;
-	r.measure(x ? {
+	n.measure(x ? {
 		width: !0,
 		height: "--chart-h-main"
 	} : {});
-	let S = x ? Math.max(240, Math.min(560, r.height - 24)) : e.size ?? 200, C = h.reduce((e, t) => e + t.value, 0), w = S / 2, T = o ? w * .62 : 0, E = me(h.filter(ye).length, e.color), D = -1, O = h.map((e) => (ye(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : ve(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = h.map((e, t) => {
-		let n = e.value / C, r = k, i = k + n * 360;
-		k = i;
-		let a = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(i, w);
+	let S = x ? Math.max(240, Math.min(560, n.height - 24)) : e.size ?? 200, C = g.reduce((e, t) => e + t.value, 0), w = S / 2, T = i ? w * .62 : 0, E = _e(g.filter(Oe).length, e.color), D = -1, O = g.map((e) => (Oe(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : De(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = g.map((e, t) => {
+		let n = e.value / C, r = k, a = k + n * 360;
+		k = a;
+		let o = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(a, w);
 		return {
 			segment: e,
 			i: t,
-			d: o ? (() => {
-				let [e, t] = s(i, T), [n, o] = s(r, T);
-				return `M ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${a} 0 ${n} ${o} Z`;
-			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} Z`,
+			d: i ? (() => {
+				let [e, t] = s(a, T), [n, i] = s(r, T);
+				return `M ${c} ${l} A ${w} ${w} 0 ${o} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${o} 0 ${n} ${i} Z`;
+			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${o} 1 ${u} ${d} Z`,
 			color: O[t]
 		};
-	}), j = r.hoverSegment, M = j == null ? void 0 : A[j], P = (e) => {
-		r.hoverSegment = e, r.requestUpdate();
+	}), j = n.hoverSegment, N = j == null ? void 0 : A[j], I = (e) => {
+		n.hoverSegment = e, n.requestUpdate();
 	};
-	return m`
-    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${c(r.attach)}
-         ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || y.escape(e)}>
-      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${z(y.interactive)}
-           class="lintje-pie-chart__svg" aria-labelledby="${p}-desc" ${_(N(p))}>
-        <desc id="${p}-desc">${a}</desc>
-        <defs>${F(p)}</defs>
-        ${A.map(({ segment: e, i: t, d: n, color: a }) => {
-		let o = y.of(v[t], e.label, `${e.label}: ${g(e.value)} · ${s(e.value / C * 100)}`);
-		return i`
-          <path d=${n} fill=${a}
-                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${o.state}"
-                ${_({ "transform-origin": `${w}px ${w}px` })}
-                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
-                aria-pressed=${o.pressed} aria-label=${o.label}
-                @click=${o.click} @keydown=${o.keydown}
-                @mousemove=${(n) => {
-			P(t), r.showTooltip(n, {
+	return p`
+    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${m(n.attach)}
+         ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || y.escape(e)}>
+      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${R(y.interactive)}
+           class="lintje-pie-chart__svg" aria-labelledby="${h}-desc" ${s(M(h))}>
+        <desc id="${h}-desc">${r}</desc>
+        <defs>${P(h)}</defs>
+        ${A.map(({ segment: e, i: t, d: r, color: i }) => {
+		let a = y.of(v[t], e.label, `${e.label}: ${l(e.value)} · ${d(e.value / C * 100)}`);
+		return _`
+          <path d=${r} fill=${i}
+                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${a.state}"
+                ${s({ "transform-origin": `${w}px ${w}px` })}
+                data-mark-id=${a.markId} role=${a.role} tabindex=${a.tabIndex}
+                aria-pressed=${a.pressed} aria-label=${a.label}
+                @click=${a.click} @keydown=${a.keydown}
+                @mousemove=${(r) => {
+			I(t), n.showTooltip(r, {
 				title: e.label,
 				rows: [{
 					label: "Aantal",
-					value: `${g(e.value)} · ${s(e.value / C * 100)}`,
-					color: a
+					value: `${l(e.value)} · ${d(e.value / C * 100)}`,
+					color: i
 				}]
 			});
 		}}
                 @mouseleave=${() => {
-			r.hoverSegment = null, r.hideTooltip(), r.requestUpdate();
+			n.hoverSegment = null, n.hideTooltip(), n.requestUpdate();
 		}} />
         `;
 	})}
         <!-- The hovered segment once more on top, lifted with a light shadow: in place, the
              next segment would cover that shadow on one side (user test 13 Sep). -->
-        ${M ? i`<path d=${M.d} fill=${M.color} class="lintje-pie-chart__lift lintje-chart__segment"
-                      ${_({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : n}
-        ${o && l ? i`
-          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${l}</text>
-          ${u ? i`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${u}</text>` : n}
-        ` : n}
+        ${N ? _`<path d=${N.d} fill=${N.color} class="lintje-pie-chart__lift lintje-chart__segment"
+                      ${s({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : u}
+        ${i && a ? _`
+          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${a}</text>
+          ${o ? _`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${o}</text>` : u}
+        ` : u}
       </svg>
 
-      ${d ? m`
+      ${c ? p`
         <table class="lintje-pie-chart__table">
-          <caption class="visually-hidden">Legenda: ${a}</caption>
+          <caption class="visually-hidden">Legenda: ${r}</caption>
           <thead>
             <tr>
               <th scope="col" class="lintje-pie-chart__column-label">${f}</th>
@@ -796,46 +1025,46 @@ function xe(e, t) {
             </tr>
           </thead>
           <tbody>
-            ${h.map((e, t) => m`
+            ${g.map((e, t) => p`
               <tr class="lintje-pie-chart__row ${j === t ? "is-hovered" : ""} ${b(t)}"
-                  @mouseenter=${() => P(t)} @mouseleave=${() => P(null)}>
+                  @mouseenter=${() => I(t)} @mouseleave=${() => I(null)}>
                 <th scope="row" class="lintje-pie-chart__label">
-                  <span class="lintje-pie-chart__marker" ${_({ background: O[t] })}></span>${e.label}
+                  <span class="lintje-pie-chart__marker" ${s({ background: O[t] })}></span>${e.label}
                 </th>
-                <td class="lintje-pie-chart__value">${g(e.value)}</td>
-                <td class="lintje-pie-chart__value">${s(e.value / C * 100)}</td>
+                <td class="lintje-pie-chart__value">${l(e.value)}</td>
+                <td class="lintje-pie-chart__value">${d(e.value / C * 100)}</td>
               </tr>
             `)}
           </tbody>
           <tfoot>
             <tr>
               <th scope="row" class="lintje-pie-chart__total-label">Totaal</th>
-              <td class="lintje-pie-chart__total">${g(C)}</td>
+              <td class="lintje-pie-chart__total">${l(C)}</td>
               <td class="lintje-pie-chart__total"></td>
             </tr>
           </tfoot>
         </table>
-      ` : n}
-      ${H(r)}
+      ` : u}
+      ${U(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/dual-axis-chart/dual-axis-chart.ts
-function Se(e, t) {
-	let { controller: r, description: a } = t, { labels: o, threshold: s, thresholdLabel: l, small: u = !1, pendingHours: d = 0 } = e, f = {
+function je(e, t) {
+	let { controller: n, description: r } = t, { labels: i, threshold: a, thresholdLabel: o, small: c = !1, pendingHours: d = 0 } = e, f = {
 		...e.left,
-		color: I(e.left.color)
-	}, p = {
+		color: F(e.left.color)
+	}, h = {
 		...e.right,
-		color: I(e.right.color)
-	}, h = r.id;
-	r.measure({
+		color: F(e.right.color)
+	}, g = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (c ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let v = f.color ?? "var(--color-chart-default)", y = p.color ?? "var(--color-chart-dark-yellow)", b = G(Math.max(...f.values.filter((e) => e != null), 1)), x = G(Math.max(...p.values.filter((e) => e != null), s ?? 0, 1)), S = P(b.ticks, r.width, { fontFamily: r.fontFamily }), C = P(x.ticks, r.width, { fontFamily: r.fontFamily }), w = K(t, {
+	let v = f.color ?? "var(--color-chart-default)", y = h.color ?? "var(--color-chart-dark-yellow)", b = q(Math.max(...f.values.filter((e) => e != null), 1)), x = q(Math.max(...h.values.filter((e) => e != null), a ?? 0, 1)), S = N(b.ticks, n.width, { fontFamily: n.fontFamily }), C = N(x.ticks, n.width, { fontFamily: n.fontFamily }), w = ne(t, {
 		left: S.width,
 		right: C.width
 	}), T = w.height - w.bottom, E = [
@@ -845,61 +1074,61 @@ function Se(e, t) {
 			shape: "square"
 		},
 		{
-			label: `${p.label} (rechteras)`,
+			label: `${h.label} (rechteras)`,
 			color: y,
 			shape: "line"
 		},
-		...s == null ? [] : [{
-			label: l ?? `Norm ${s}`,
+		...a == null ? [] : [{
+			label: o ?? `Norm ${a}`,
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}]
-	], D = Math.max(1, Math.ceil(o.length / 8)), O = r.hoverIndex, j = te(y), M = [[]];
-	p.values.forEach((e, t) => {
-		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${A(t, o.length, w).center},${k(e, x.max, w)}`);
+	], D = Math.max(1, Math.ceil(i.length / 8)), A = n.hoverIndex, j = H(y), M = [[]];
+	h.values.forEach((e, t) => {
+		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${k(t, i.length, w).center},${O(e, x.max, w)}`);
 	});
-	let N = (e, t) => e == null ? "geen gegevens" : `${g(e)}${t ? ` ${t}` : ""}`, F = (e) => ({
-		title: o[e],
+	let P = (e, t) => e == null ? "geen gegevens" : `${l(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
+		title: i[e],
 		rows: [{
 			label: f.label,
-			value: N(f.values[e], f.unit),
+			value: P(f.values[e], f.unit),
 			color: v
 		}, {
-			label: p.label,
-			value: N(p.values[e], p.unit),
+			label: h.label,
+			value: P(h.values[e], h.unit),
 			color: y
 		}]
-	}), L = Y(r, o.length, (e) => ({
-		x: A(e, o.length, w).center,
-		y: Math.min(f.values[e] == null ? T : k(f.values[e], b.max, w), p.values[e] == null ? T : k(p.values[e], x.max, w)),
-		content: F(e)
+	}), L = Z(n, i.length, (e) => ({
+		x: k(e, i.length, w).center,
+		y: Math.min(f.values[e] == null ? T : O(f.values[e], b.max, w), h.values[e] == null ? T : O(h.values[e], x.max, w)),
+		content: I(e)
 	}));
-	return m`
-    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
-      ${ee({ items: E })}
+	return p`
+    <div class="lintje-chart-wrap ${c ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({ items: E })}
       <figure class="lintje-chart">
-        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${z(!1)}
-             aria-labelledby="${h}-desc" width=${w.width} height=${w.height}
+        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${R(!1)}
+             aria-labelledby="${g}-desc" width=${w.width} height=${w.height}
              tabindex="0" @keydown=${L.keydown} @focus=${L.focus} @blur=${L.blur}>
-          <desc id="${h}-desc">${a}</desc>
+          <desc id="${g}-desc">${r}</desc>
           <defs>
-            <pattern id="hatch-${h}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+            <pattern id="hatch-${g}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
               <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
             </pattern>
           </defs>
           <!-- Incomplete hours at the end: hatched, never drawn as zero. -->
           ${d > 0 ? (() => {
-		let e = A(o.length - d, o.length, w);
-		return i`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
+		let e = k(i.length - d, i.length, w);
+		return _`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
                              width=${w.width - w.right - e.x + (e.bandWidth - e.width) / 2}
-                             height=${T - w.top} fill="url(#hatch-${h})" />`;
-	})() : n}
+                             height=${T - w.top} fill="url(#hatch-${g})" />`;
+	})() : u}
 
           ${b.ticks.map((e) => {
-		let t = k(e, b.max, w), n = e === 0;
-		return i`
+		let t = O(e, b.max, w), n = e === 0;
+		return _`
               <g>
                 <line x1=${w.left} x2=${w.width - w.right} y1=${t} y2=${t}
                       stroke=${n ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
@@ -910,8 +1139,8 @@ function Se(e, t) {
               </g>
             `;
 	})}
-          ${x.ticks.map((e) => i`
-            <text x=${w.width - w.right + 8} y=${k(e, x.max, w) + 4}
+          ${x.ticks.map((e) => _`
+            <text x=${w.width - w.right + 8} y=${O(e, x.max, w) + 4}
                   class="lintje-chart__axis-label" fill=${"var(--color-chart-dark-yellow-text)"}>${C.format(e)}</text>
           `)}
 
@@ -923,88 +1152,88 @@ function Se(e, t) {
           <!-- Bars grow in one after another; the hit areas below sit on top, so hover comes
                from hoverIndex rather than :hover. -->
           ${f.values.map((e, t) => {
-		let n = A(t, o.length, w);
-		if (e == null) return i`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
-                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${h})" />`;
-		let r = k(e, b.max, w);
-		return i`
-              <g class="lintje-chart__bar-group ${O === t ? "is-hovered" : ""}"
-                 ${_(B(t, o.length))}>
+		let n = k(t, i.length, w);
+		if (e == null) return _`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
+                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${g})" />`;
+		let r = O(e, b.max, w);
+		return _`
+              <g class="lintje-chart__bar-group ${A === t ? "is-hovered" : ""}"
+                 ${s(B(t, i.length))}>
                 <rect class="lintje-chart__bar" x=${n.x} y=${r} width=${n.width}
                       height=${Math.max(0, T - r)} fill=${v} />
               </g>
             `;
 	})}
 
-          ${s == null ? n : i`<line x1=${w.left} x2=${w.width - w.right}
-                        y1=${k(s, x.max, w)} y2=${k(s, x.max, w)}
+          ${a == null ? u : _`<line x1=${w.left} x2=${w.width - w.right}
+                        y1=${O(a, x.max, w)} y2=${O(a, x.max, w)}
                         stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="4 3" />`}
 
           <g class="lintje-chart__reveal">
             ${M.filter((e) => e.length > 0).map((e) => {
-		let t = e.join(" "), [r, a] = e[0].split(",");
-		return i`
-                  ${j && e.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing"
-                                    stroke=${j} points=${t} />` : n}
-                  ${e.length === 1 ? i`<circle cx=${r} cy=${a} r="2.5" fill=${y} />` : i`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
+		let t = e.join(" "), [n, r] = e[0].split(",");
+		return _`
+                  ${j && e.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing"
+                                    stroke=${j} points=${t} />` : u}
+                  ${e.length === 1 ? _`<circle cx=${n} cy=${r} r="2.5" fill=${y} />` : _`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
                 `;
 	})}
           </g>
 
-          ${o.filter((e, t) => t % D === 0).map((e, t) => i`
-            <text x=${A(t * D, o.length, w).center} y=${w.height - 8}
+          ${i.filter((e, t) => t % D === 0).map((e, t) => _`
+            <text x=${k(t * D, i.length, w).center} y=${w.height - 8}
                   text-anchor="middle" class="lintje-chart__axis-label">${e}</text>
           `)}
 
           <!-- Hover point on the right-axis line; no point for a missing value. -->
-          ${O != null && p.values[O] != null ? i`<circle class="lintje-chart__hover-point" r="4" fill=${y}
-                          cx=${A(O, o.length, w).center}
-                          cy=${k(p.values[O], x.max, w)} />` : n}
-          ${o.map((e, t) => {
-		let n = A(t, o.length, w);
-		return i`
-              <rect x=${n.x} y=${w.top} width=${n.bandWidth} height=${T - w.top}
+          ${A != null && h.values[A] != null ? _`<circle class="lintje-chart__hover-point" r="4" fill=${y}
+                          cx=${k(A, i.length, w).center}
+                          cy=${O(h.values[A], x.max, w)} />` : u}
+          ${i.map((e, t) => {
+		let r = k(t, i.length, w);
+		return _`
+              <rect x=${r.x} y=${w.top} width=${r.bandWidth} height=${T - w.top}
                     fill="transparent"
-                    @mousemove=${(e) => r.hoverAt(t, e, F(t))}
-                    @mouseleave=${() => r.hoverAt(null)} />
+                    @mousemove=${(e) => n.hoverAt(t, e, I(t))}
+                    @mouseleave=${() => n.hoverAt(null)} />
             `;
 	})}
         </svg>
       </figure>
-      ${H(r)}
-      ${X(r)}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/scatter-chart/scatter-chart.ts
-var Ce = 4.5, we = 5.5, Te = 44, Ee = 8, De = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
-function Oe(e, t, n, r) {
+var Me = 4.5, Ne = 5.5, Pe = 44, Fe = 8, Ie = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
+function Le(e, t, n, r) {
 	let i = 5.5, a = [];
 	for (let [o, s] of e.entries()) {
 		if (!t.includes(s.label)) continue;
-		let c = d(s.label, r, 700), l = s.y - 9, u = l - 12, f = l + 3, p = [{
+		let c = h(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, f = [{
 			anchor: "end",
-			x: s.x - Ee,
-			left: s.x - Ee - c
+			x: s.x - Fe,
+			left: s.x - Fe - c
 		}, {
 			anchor: "start",
-			x: s.x + Ee,
-			left: s.x + Ee
+			x: s.x + Fe,
+			left: s.x + Fe
 		}].map((e) => ({
 			...e,
 			right: e.left + c,
 			top: u,
-			bottom: f
-		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !De(t, e)) && e.every((e, n) => n === o || !De(t, {
+			bottom: d
+		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !Ie(t, e)) && e.every((e, n) => n === o || !Ie(t, {
 			left: e.x - i,
 			right: e.x + i,
 			top: e.y - i,
 			bottom: e.y + i
 		})));
-		if (!p) return [];
+		if (!f) return [];
 		a.push({
-			...p,
+			...f,
 			label: s.label,
 			y: l
 		});
@@ -1016,37 +1245,37 @@ function Oe(e, t, n, r) {
 		anchor: r
 	}));
 }
-var ke = (e) => e.charAt(0).toUpperCase() + e.slice(1), Ae = (e, t) => `${g(e)}${t ? ` ${t}` : ""}`;
-function je(e) {
-	let t = new Set(e.series.map((e) => e.color).filter(L)), n = R.filter((e) => !t.has(e)), r = 0;
+var Re = (e) => e.charAt(0).toUpperCase() + e.slice(1), ze = (e, t) => `${l(e)}${t ? ` ${t}` : ""}`;
+function Be(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(I)), n = L.filter((e) => !t.has(e)), r = 0;
 	return e.series.map((e) => {
-		let t = L(e.color) ? e.color : n[r++ % n.length];
+		let t = I(e.color) ? e.color : n[r++ % n.length];
 		return {
-			color: I(e.color ?? t),
+			color: F(e.color ?? t),
 			symbol: t
 		};
 	});
 }
-function Me(t, r) {
-	let { controller: a, description: o } = r, { axisTitle: s, unit: l, xTitle: u, xUnit: d, threshold: f, thresholdLabel: h, small: v = !1 } = t, y = a.id;
-	a.measure({
+function Ve(e, n) {
+	let { controller: r, description: i } = n, { axisTitle: a, unit: o, xTitle: c, xUnit: d, threshold: h, thresholdLabel: g, small: v = !1 } = e, y = r.id;
+	r.measure({
 		width: !0,
-		height: r.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!r.expanded && !r.mobile
+		height: n.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!n.expanded && !n.mobile
 	});
-	let b = je(t), x = t.series.map((e, t) => ({
+	let b = Be(e), x = e.series.map((e, t) => ({
 		...e,
 		...b[t]
-	})), S = (e) => a.hiddenSeries.includes(e.label), C = x.flatMap((e, t) => e.points.map((n, r) => ({
+	})), S = (e) => r.hiddenSeries.includes(e.label), C = x.flatMap((e, t) => e.points.map((n, r) => ({
 		point: n,
 		row: e,
 		key: `${t}:${r}`
-	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = G(Math.max(...w.map(({ point: e }) => e.x), 1), r.mobile ? 3 : 6), D = G(Math.max(...w.map(({ point: e }) => e.y), f ?? 0, 1)), A = P(D.ticks, a.width, { fontFamily: a.fontFamily }), j = K(r, {
+	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = q(Math.max(...w.map(({ point: e }) => e.x), 1), n.mobile ? 3 : 6), k = q(Math.max(...w.map(({ point: e }) => e.y), h ?? 0, 1)), A = N(k.ticks, r.width, { fontFamily: r.fontFamily }), M = ne(n, {
 		left: A.width,
-		bottom: Te
-	}), N = (e) => j.left + O(j) * e / E.max, F = E.ticks.map((e, t) => ({
-		label: g(e),
-		x: N(e),
+		bottom: Pe
+	}), P = (e) => M.left + D(M) * e / E.max, F = E.ticks.map((e, t) => ({
+		label: l(e),
+		x: P(e),
 		anchor: t === E.ticks.length - 1 ? "end" : "middle"
 	})), I = [...x.map((e) => ({
 		label: e.label,
@@ -1054,8 +1283,8 @@ function Me(t, r) {
 		shape: "point",
 		symbol: e.symbol,
 		hidden: S(e)
-	})), ...f == null ? [] : [{
-		label: h ?? "Norm",
+	})), ...h == null ? [] : [{
+		label: g ?? "Norm",
 		color: "var(--color-chart-emphasis)",
 		shape: "dashed",
 		fixed: !0
@@ -1072,131 +1301,131 @@ function Me(t, r) {
 					symbol: n.symbol
 				},
 				{
-					label: ke(u),
-					value: Ae(t.x, d)
+					label: Re(c),
+					value: ze(t.x, d)
 				},
 				{
-					label: ke(s),
-					value: Ae(t.y, l)
+					label: Re(a),
+					value: ze(t.y, o)
 				}
 			]
 		};
 	}
 	let R = (e) => ({
-		x: N(e.x),
-		y: k(e.y, D.max, j)
-	}), z = (e) => R(w[e].point), V = Y(a, w.length, (e) => ({
-		...z(e),
+		x: P(e.x),
+		y: O(e.y, k.max, M)
+	}), V = (e) => R(w[e].point), te = Z(r, w.length, (e) => ({
+		...V(e),
 		content: L(e)
-	})), re = w.map(({ point: e, row: t }) => e.href ? {
+	})), W = w.map(({ point: e, row: t }) => e.href ? {
 		id: e.id ?? `${t.label} · ${e.label}`,
 		href: e.href
-	} : null), ie = Q(r, re), U = w.map(({ point: e }, t) => ie.of(re[t], e.label, oe(L(t)))), W = Oe(w.map((e, t) => ({
+	} : null), G = le(n, W), K = w.map(({ point: e }, t) => G.of(W[t], e.label, re(L(t)))), J = Le(w.map((e, t) => ({
 		label: e.point.label,
-		...z(t)
-	})), t.dataLabels ?? [], j, a.fontFamily), q = f == null ? 0 : k(f, D.max, j), ae = a.hoverIndex == null ? void 0 : w[a.hoverIndex], J = (t) => {
-		let n = t.target.closest?.("[data-point]");
+		...V(t)
+	})), e.dataLabels ?? [], M, r.fontFamily), Y = h == null ? 0 : O(h, k.max, M), X = r.hoverIndex == null ? void 0 : w[r.hoverIndex], $ = (e) => {
+		let n = e.target.closest?.("[data-point]");
 		if (n) return Number(n.getAttribute("data-point"));
-		let r = t.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? j.width / i.width : 1, o = (t.clientX - (i?.left ?? 0)) * a, s = (t.clientY - (i?.top ?? 0)) * a, c = e(r, "--h-target", 48) / 2, l = null, u = c;
+		let r = e.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? M.width / i.width : 1, o = (e.clientX - (i?.left ?? 0)) * a, s = (e.clientY - (i?.top ?? 0)) * a, c = t(r, "--h-target", 48) / 2, l = null, u = c;
 		return w.forEach((e, t) => {
-			let { x: n, y: r } = z(t), i = Math.hypot(n - o, r - s);
+			let { x: n, y: r } = V(t), i = Math.hypot(n - o, r - s);
 			i <= u && (l = t, u = i);
 		}), l;
-	}, se = (e) => {
-		let t = J(e);
-		t == null ? (a.hoverIndex != null || a.tooltip) && a.hoverAt(null) : a.hoverAt(t, e, L(t));
-	}, Z = (e) => {
-		let t = J(e), r = t == null ? null : U[t];
-		r?.clickable && r.click !== n && r.click();
-	}, ce = ae != null && U[a.hoverIndex]?.clickable, le = [f == null ? n : i`
+	}, ie = (e) => {
+		let t = $(e);
+		t == null ? (r.hoverIndex != null || r.tooltip) && r.hoverAt(null) : r.hoverAt(t, e, L(t));
+	}, ae = (e) => {
+		let t = $(e), n = t == null ? null : K[t];
+		n?.clickable && n.click !== u && n.click();
+	}, oe = X != null && K[r.hoverIndex]?.clickable, se = [h == null ? u : _`
         <g class="lintje-chart__reference">
-          <line x1=${j.left} x2=${j.width - j.right} y1=${q} y2=${q}
+          <line x1=${M.left} x2=${M.width - M.right} y1=${Y} y2=${Y}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${j.left + 6} y=${q - 6}
+          <text x=${M.left + 6} y=${Y - 6}
                 class="lintje-chart__axis-label lintje-chart__axis-label--halo">
-            ${h ?? `norm ${Ae(f, l)}`}
+            ${g ?? `norm ${ze(h, o)}`}
           </text>
         </g>
-      `, i`<g @mousemove=${se} @mouseleave=${() => a.hoverAt(null)} @click=${Z}>
-      <rect class="lintje-chart__hit ${ce ? "is-clickable" : ""}"
-            x="0" y="0" width=${j.width} height=${j.height} />
+      `, _`<g @mousemove=${ie} @mouseleave=${() => r.hoverAt(null)} @click=${ae}>
+      <rect class="lintje-chart__hit ${oe ? "is-clickable" : ""}"
+            x="0" y="0" width=${M.width} height=${M.height} />
       <g>
-        ${p(C, (e) => e.key, ({ point: e, row: t, key: r }, a) => {
-		let { x: o, y: s } = R(e), c = te(t.color), l = T.get(r), u = l == null ? void 0 : U[l];
-		return i`
-              <path class="lintje-chart__point lintje-chart__mark ${c ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
-                    ${_(B(a, C.length))}
-                    d=${M(t.symbol, Ce, o, s)} fill=${t.color}
-                    stroke=${c ?? n} stroke-width=${c ? 1 : n}
-                    data-point=${l ?? n}
-                    data-mark-id=${u?.markId ?? n} role=${u?.role ?? n}
-                    tabindex=${u?.tabIndex ?? n}
-                    aria-pressed=${u?.pressed ?? n} aria-label=${u?.label ?? n}
-                    @keydown=${u?.keydown ?? n} />
+        ${f(C, (e) => e.key, ({ point: e, row: t, key: n }, r) => {
+		let { x: i, y: a } = R(e), o = H(t.color), c = T.get(n), l = c == null ? void 0 : K[c];
+		return _`
+              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${l?.state ?? "is-hidden"}"
+                    ${s(B(r, C.length))}
+                    d=${j(t.symbol, Me, i, a)} fill=${t.color}
+                    stroke=${o ?? u} stroke-width=${o ? 1 : u}
+                    data-point=${c ?? u}
+                    data-mark-id=${l?.markId ?? u} role=${l?.role ?? u}
+                    tabindex=${l?.tabIndex ?? u}
+                    aria-pressed=${l?.pressed ?? u} aria-label=${l?.label ?? u}
+                    @keydown=${l?.keydown ?? u} />
             `;
 	})}
       </g>
 
-      ${W.map((e) => i`
+      ${J.map((e) => _`
           <text x=${e.x} y=${e.y} text-anchor=${e.anchor}
                 class="lintje-chart__data-label lintje-chart__data-label--halo">${e.label}</text>
         `)}
 
       <!-- The point under the pointer or the keyboard, raised with a ring in the surface. -->
-      ${ae ? (() => {
-		let { x: e, y: t } = z(a.hoverIndex), r = te(ae.row.color), o = M(ae.row.symbol, we, e, t);
-		return i`
-            <path class="lintje-chart__hover-point" d=${o} fill=${ae.row.color} />
-            ${r ? i`<path class="lintje-chart__hover-casing" d=${o} stroke=${r} />` : n}
+      ${X ? (() => {
+		let { x: e, y: t } = V(r.hoverIndex), n = H(X.row.color), i = j(X.row.symbol, Ne, e, t);
+		return _`
+            <path class="lintje-chart__hover-point" d=${i} fill=${X.row.color} />
+            ${n ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${n} />` : u}
           `;
-	})() : n}
+	})() : u}
     </g>`];
-	return m`
+	return p`
     <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
-         ${c(a.attach)} ?data-in-view=${a.inView} data-tooltip-anchor
-         @keydown=${(e) => a.dismiss(e) || ie.escape(e)}>
-      ${ee({
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || G.escape(e)}>
+      ${z({
 		items: I,
-		onToggle: (e) => a.toggleSeries(e)
+		onToggle: (e) => r.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: a.fontFamily,
+      ${ee({
+		fontFamily: r.fontFamily,
 		id: y,
-		ticks: D.ticks,
-		max: D.max,
-		area: j,
+		ticks: k.ticks,
+		max: k.max,
+		area: M,
 		formatTick: A.format,
-		axisTitle: s,
+		axisTitle: a,
 		xLabels: F,
-		xTitle: u,
-		description: o,
-		interactive: ie.interactive,
-		keys: V
-	}, le)}
-      ${H(a)}
-      ${X(a)}
+		xTitle: c,
+		description: i,
+		interactive: G.interactive,
+		keys: te
+	}, se)}
+      ${U(r)}
+      ${Q(r)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/heatmap-chart/heatmap-classes.ts
-var Ne = [
+var He = [
 	"var(--color-chart-seq-1)",
 	"var(--color-chart-seq-2)",
 	"var(--color-chart-seq-3)",
 	"var(--color-chart-seq-4)",
 	"var(--color-chart-seq-5)"
-], Pe = Ne.length, Fe = [
+], Ue = He.length, We = [
 	1,
 	2,
 	2.5,
 	5,
 	10
 ];
-function Ie(e, t) {
+function Ge(e, t) {
 	if (!(e > 0) || !Number.isFinite(e)) return 1;
 	let n = 10 ** Math.floor(Math.log10(e)), r = 0, i = Infinity;
-	for (let a of Fe) {
+	for (let a of We) {
 		let o = a * n;
 		if (t && !Number.isInteger(o)) continue;
 		let s = Math.abs(Math.log(o / e));
@@ -1204,29 +1433,29 @@ function Ie(e, t) {
 	}
 	return r || (t ? 1 : n);
 }
-function Le(e, t) {
+function Ke(e, t) {
 	let n = Math.max(0, Math.min(10, -Math.floor(Math.log10(t)) + 1));
 	return Number(e.toFixed(n));
 }
-function Re(e) {
+function qe(e) {
 	let t = [];
 	for (let n of e) for (let e of n ?? []) e != null && Number.isFinite(e) && t.push(e);
 	if (t.length === 0) return [];
 	let n = Math.min(...t), r = Math.max(...t);
 	if (n === r) return [];
-	let i = t.every(Number.isInteger), a = Ie((r - n) / Pe, i), o = Math.floor(n / a) * a, s = [];
-	for (let e = 1; e < Pe; e += 1) {
-		let t = Le(o + e * a, a);
+	let i = t.every(Number.isInteger), a = Ge((r - n) / Ue, i), o = Math.floor(n / a) * a, s = [];
+	for (let e = 1; e < Ue; e += 1) {
+		let t = Ke(o + e * a, a);
 		if (t > r) break;
 		s.push(t);
 	}
 	return s;
 }
-function ze(e, t, n = 0) {
-	let r = g(e, n), i = t?.trim() ?? "";
+function Je(e, t, n = 0) {
+	let r = l(e, n), i = t?.trim() ?? "";
 	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
 }
-function Be(e) {
+function Ye(e) {
 	let t = 0;
 	for (let n of e) {
 		let e = String(n), r = e.indexOf(".");
@@ -1234,13 +1463,13 @@ function Be(e) {
 	}
 	return Math.min(t, 4);
 }
-function Ve(e, t = {}) {
-	let n = (t.bounds?.length ? t.bounds.slice(0, Pe - 1) : null) ?? Re(e), r = Be(n), i = (e) => ze(e, t.unit, r), a = (e) => g(e, r);
+function Xe(e, t = {}) {
+	let n = (t.bounds?.length ? t.bounds.slice(0, Ue - 1) : null) ?? qe(e), r = Ye(n), i = (e) => Je(e, t.unit, r), a = (e) => l(e, r);
 	if (n.length === 0) {
-		let e = Ne.length - 1;
+		let e = He.length - 1;
 		return [{
 			limit: Infinity,
-			color: Ne[e],
+			color: He[e],
 			label: "alle waarden",
 			ramp: e
 		}];
@@ -1248,106 +1477,106 @@ function Ve(e, t = {}) {
 	return [
 		{
 			limit: n[0],
-			color: Ne[0],
+			color: He[0],
 			label: `< ${i(n[0])}`,
 			ramp: 0
 		},
 		...n.slice(1).map((e, t) => ({
 			limit: e,
-			color: Ne[t + 1],
+			color: He[t + 1],
 			label: `${a(n[t])}–${i(e)}`,
 			ramp: t + 1
 		})),
 		{
 			limit: Infinity,
-			color: Ne[n.length],
+			color: He[n.length],
 			label: `≥ ${i(n[n.length - 1])}`,
 			ramp: n.length
 		}
 	];
 }
-function He(e, t) {
+function Ze(e, t) {
 	let n = e.findIndex((e) => t < e.limit);
 	return n === -1 ? e.length - 1 : n;
 }
 //#endregion
 //#region src/components/shared/charts/heatmap-chart/heatmap-chart.ts
-function Ue(e, t, n) {
+function Qe(e, t, n) {
 	return Array.from({ length: n }, (n, r) => Array.from({ length: t }, (t, n) => e?.[n]?.[r]));
 }
-function We(e) {
+function $e(e) {
 	if (e.mobile) return e.mobile;
 	let t = e.rowLabels.length, n = e.columnLabels.length;
 	if (!(n <= t)) return {
 		columnLabels: e.rowLabels,
 		rowLabels: e.columnLabels,
-		values: Ue(e.values, t, n),
-		links: e.links ? Ue(e.links, t, n) : void 0
+		values: Qe(e.values, t, n),
+		links: e.links ? Qe(e.links, t, n) : void 0
 	};
 }
-function Ge(e, t) {
-	let { controller: r, description: i, mobile: a = !1 } = t, o = a ? We(e) : void 0, s = o?.columnLabels ?? e.columnLabels, l = o?.rowLabels ?? e.rowLabels, u = o?.values ?? e.values, d = o ? o.links : e.links, f = o ? !0 : e.compact ?? !1, { unit: p } = e, h = Q(t, (d ?? []).flat()), v = Ve(u, {
+function et(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, a = i ? $e(e) : void 0, o = a?.columnLabels ?? e.columnLabels, c = a?.rowLabels ?? e.rowLabels, d = a?.values ?? e.values, f = a ? a.links : e.links, h = a ? !0 : e.compact ?? !1, { unit: g } = e, _ = le(t, (f ?? []).flat()), v = Xe(d, {
 		bounds: e.bounds,
-		unit: p
-	}), y = (e) => He(v, e);
-	r.measure({});
-	let b = r.selectedCell, x = r.dimmedClass;
-	return m`
-    <div class="lintje-heatmap" ${c(r.attach)} ?data-in-view=${r.inView}
-         data-tooltip-anchor @keydown=${h.escape}>
-      <table class="lintje-heatmap__grid ${f ? "is-compact" : ""}">
-        <caption class="visually-hidden">${i}</caption>
+		unit: g
+	}), y = (e) => Ze(v, e);
+	n.measure({});
+	let b = n.selectedCell, x = n.dimmedClass;
+	return p`
+    <div class="lintje-heatmap" ${m(n.attach)} ?data-in-view=${n.inView}
+         data-tooltip-anchor @keydown=${_.escape}>
+      <table class="lintje-heatmap__grid ${h ? "is-compact" : ""}">
+        <caption class="visually-hidden">${r}</caption>
         <thead>
           <tr>
             <td></td>
-            ${s.map((e) => m`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
+            ${o.map((e) => p`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${l.map((e, t) => m`
+          ${c.map((e, t) => p`
             <tr>
               <th scope="row" class="lintje-heatmap__row-label" title=${e}>
                 <span class="lintje-heatmap__row-label-text">${e}</span>
               </th>
-              ${s.map((n, i) => {
-		let a = u[t]?.[i];
-		if (a == null) return m`
+              ${o.map((r, i) => {
+		let a = d[t]?.[i];
+		if (a == null) return p`
                     <td class="lintje-heatmap__slot">
                       <div class="lintje-heatmap__cell is-empty"
-                           title="${e} · ${s[i]}: geen meting">
+                           title="${e} · ${o[i]}: geen meting">
                         <span class="visually-hidden">geen meting</span>
                       </div>
                     </td>
                   `;
-		let o = y(a), c = h.of(d?.[t]?.[i], `${e} · ${s[i]}`), S = !c.clickable && b?.row === t && b?.column === i;
-		return m`
+		let u = y(a), m = _.of(f?.[t]?.[i], `${e} · ${o[i]}`), S = !m.clickable && b?.row === t && b?.column === i;
+		return p`
                   <td class="lintje-heatmap__slot">
                     <button
                       type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[o].ramp} ${S ? "is-selected" : ""} ${x != null && x !== o ? "is-dimmed" : ""} ${c.state}"
-                      data-mark-id=${c.markId}
-                      ${_({
-			"--lintje-cell": v[o].color,
-			...re(i, t, s.length, l.length)
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[u].ramp} ${S ? "is-selected" : ""} ${x != null && x !== u ? "is-dimmed" : ""} ${m.state}"
+                      data-mark-id=${m.markId}
+                      ${s({
+			"--lintje-cell": v[u].color,
+			...te(i, t, o.length, c.length)
 		})}
-                      @click=${c.clickable ? c.click : () => {
-			r.selectedCell = S ? null : {
+                      @click=${m.clickable ? m.click : () => {
+			n.selectedCell = S ? null : {
 				row: t,
 				column: i
-			}, r.requestUpdate();
+			}, n.requestUpdate();
 		}}
-                      @mousemove=${f ? void 0 : (t) => r.showTooltip(t, {
-			title: `${e} · ${s[i]}`,
+                      @mousemove=${h ? void 0 : (t) => n.showTooltip(t, {
+			title: `${e} · ${o[i]}`,
 			rows: [{
-				label: `klasse ${v[o].label}`,
-				value: ze(a, p),
-				color: v[o].color
+				label: `klasse ${v[u].label}`,
+				value: Je(a, g),
+				color: v[u].color
 			}]
 		})}
-                      @mouseleave=${f ? void 0 : () => r.hideTooltip()}
-                      aria-pressed=${c.clickable ? c.pressed : S}
-                      aria-label="${e} ${s[i]}: ${ze(a, p)}, klasse ${v[o].label}"
-                    >${g(a)}</button>
+                      @mouseleave=${h ? void 0 : () => n.hideTooltip()}
+                      aria-pressed=${m.clickable ? m.pressed : S}
+                      aria-label="${e} ${o[i]}: ${Je(a, g)}, klasse ${v[u].label}"
+                    >${l(a)}</button>
                   </td>
                 `;
 	})}
@@ -1357,242 +1586,558 @@ function Ge(e, t) {
       </table>
 
       <!-- Selected cell: a 48 px line with day, block, value, class. -->
-      ${b && u[b.row]?.[b.column] != null ? m`
+      ${b && d[b.row]?.[b.column] != null ? p`
         <p class="lintje-heatmap__selection">
-          <b>${l[b.row]} ${s[b.column]}</b> ·
-          ${ze(u[b.row][b.column], p)} · klasse
-          ${v[y(u[b.row][b.column])].label}
+          <b>${c[b.row]} ${o[b.column]}</b> ·
+          ${Je(d[b.row][b.column], g)} · klasse
+          ${v[y(d[b.row][b.column])].label}
         </p>
-      ` : n}
+      ` : u}
 
       <!-- Class legend: clickable, dims the other classes to .25. -->
       <ul class="lintje-heatmap__legend">
-        ${v.map((e, t) => m`
+        ${v.map((e, t) => p`
           <li>
             <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
                     @click=${() => {
-		r.dimmedClass = x === t ? null : t, r.requestUpdate();
+		n.dimmedClass = x === t ? null : t, n.requestUpdate();
 	}}
                     aria-pressed=${x === t}>
-              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${_({ background: e.color })}></span>
+              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${s({ background: e.color })}></span>
               <span>${e.label}</span>
             </button>
           </li>
         `)}
       </ul>
-      ${H(r)}
+      ${U(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/histogram-chart/histogram-chart.ts
-var Ke = 16, qe = 56, Je = 8, Ye = 18;
-function Xe(e) {
-	return g(e, +!Number.isInteger(e));
+var tt = 16, nt = 56, rt = 8, it = 18;
+function at(e) {
+	return l(e, +!Number.isInteger(e));
 }
-function Ze(e, t) {
+function ot(e, t) {
 	let n = t ? ` ${t}` : "";
-	return e.to == null ? `${Xe(e.from)}${n} of meer` : `${Xe(e.from)} tot ${Xe(e.to)}${n}`;
+	return e.to == null ? `${at(e.from)}${n} of meer` : `${at(e.from)} tot ${at(e.to)}${n}`;
 }
-function Qe(e, t, n = "") {
+function st(e, t, n = "") {
 	let r = t.width, i = e.map((e) => {
-		let t = d(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
+		let t = h(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
 		return {
 			x: i ? e.x + 6 : e.x - 6,
 			anchor: i ? "start" : "end",
 			left: i ? e.x + 6 : e.x - 6 - t,
 			right: i ? e.x + 6 + t : e.x - 6
 		};
-	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + Je && i[1].left < i[0].right + Je;
+	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + rt && i[1].left < i[0].right + rt;
 	return i.map((e, n) => ({
 		x: e.x,
-		y: t.top + 12 + (o && n === a ? Ye : 0),
+		y: t.top + 12 + (o && n === a ? it : 0),
 		anchor: e.anchor
 	}));
 }
-function $e(e, t) {
-	let { controller: r, description: a } = t, { bins: o, axisTitle: l, xTitle: u, unit: f, median: p, threshold: h, small: v = !1 } = e, y = e.label ?? "Aantal", b = I(e.color) ?? "var(--color-chart-default)", x = r.id, S = (e) => f ? `${e} ${f}` : e;
-	r.measure({
+function ct(e, t) {
+	let { controller: n, description: r } = t, { bins: i, axisTitle: a, xTitle: o, unit: c, median: f, threshold: g, small: v = !1 } = e, y = e.label ?? "Aantal", b = F(e.color) ?? "var(--color-chart-default)", x = n.id, S = (e) => c ? `${e} ${c}` : e;
+	n.measure({
 		width: !0,
 		height: t.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let C = o.map((e) => e.count).filter((e) => e != null), w = C.length === o.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = G(Math.max(...C, 1)), D = P(E, r.width, { fontFamily: r.fontFamily }), O = K(t), A = K(t, {
+	let C = i.map((e) => e.count).filter((e) => e != null), w = C.length === i.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = q(Math.max(...C, 1)), D = N(E, n.width, { fontFamily: n.fontFamily }), k = ne(t), A = ne(t, {
 		left: D.width,
-		bottom: O.bottom + (u ? Ke : 0)
-	}), j = A.height - A.bottom, M = A.width - A.right, N = o[0]?.from ?? 0, F = o[o.length - 1], L = o.length > 1 ? o[o.length - 1].from - o[o.length - 2].from : 1, R = F ? F.to ?? F.from + L : 1, z = (e) => A.left + (e - N) / Math.max(R - N, 2 ** -52) * (M - A.left), V = o.map((e) => {
-		let t = z(e.from), n = z(e.to ?? R) - t;
+		bottom: k.bottom + (o ? tt : 0)
+	}), j = A.height - A.bottom, M = A.width - A.right, P = i[0]?.from ?? 0, I = i[i.length - 1], L = i.length > 1 ? i[i.length - 1].from - i[i.length - 2].from : 1, R = I ? I.to ?? I.from + L : 1, V = (e) => A.left + (e - P) / Math.max(R - P, 2 ** -52) * (M - A.left), H = i.map((e) => {
+		let t = V(e.from), n = V(e.to ?? R) - t;
 		return {
 			x: t,
 			width: n,
 			center: t + n / 2
 		};
 	}), te = (e) => {
-		let t = o[e].count;
+		let t = i[e].count;
 		return {
-			title: Ze(o[e], f),
+			title: ot(i[e], c),
 			rows: [{
 				label: y,
-				value: t == null ? "geen gegevens" : g(t),
+				value: t == null ? "geen gegevens" : l(t),
 				color: b
 			}, ...t != null && w != null && w > 0 ? [{
 				label: "Aandeel",
-				value: s(t / w * 100, 1),
+				value: d(t / w * 100, 1),
 				color: b
 			}] : []]
 		};
-	}, re = Y(r, o.length, (e) => ({
-		x: V[e].center,
-		y: o[e].count == null ? A.top : k(o[e].count, T, A),
+	}, G = Z(n, i.length, (e) => ({
+		x: H[e].center,
+		y: i[e].count == null ? A.top : O(i[e].count, T, A),
 		content: te(e)
-	})), U = F?.to == null && o.length > 0, W = [...o.slice(0, U ? -1 : void 0).map((e) => e.from), ...U ? [] : F ? [F.to] : []].map((e) => ({
-		label: Xe(e),
-		x: z(e)
-	})), q = U ? {
-		label: `${Xe(F.from)}+`,
-		x: V[V.length - 1].center
-	} : null, ae = W.length > 1 ? (W[W.length - 1].x - W[0].x) / (W.length - 1) : 1, oe = Math.max(1, Math.ceil(qe / ae)), J = ie(W.filter((e, t) => t % oe === 0), r.fontFamily), se = (e, t) => Math.abs(t.x - e.x) < (d(e.label, r.fontFamily) + d(t.label, r.fontFamily)) / 2 + Je, Z = U ? q : W[W.length - 1];
-	Z && !J.includes(Z) && (J.length && se(J[J.length - 1], Z) && (J = J.slice(0, -1)), U || (J = [...J, Z]));
-	let Q = U ? F.from : R, ce = (e) => e != null && e >= N && e <= Q, le = [...ce(p) ? [{
-		x: z(p),
-		text: e.medianLabel ?? S(`mediaan ${Xe(p)}`),
+	})), K = I?.to == null && i.length > 0, J = [...i.slice(0, K ? -1 : void 0).map((e) => e.from), ...K ? [] : I ? [I.to] : []].map((e) => ({
+		label: at(e),
+		x: V(e)
+	})), Y = K ? {
+		label: `${at(I.from)}+`,
+		x: H[H.length - 1].center
+	} : null, re = J.length > 1 ? (J[J.length - 1].x - J[0].x) / (J.length - 1) : 1, X = Math.max(1, Math.ceil(nt / re)), $ = W(J.filter((e, t) => t % X === 0), n.fontFamily), ie = (e, t) => Math.abs(t.x - e.x) < (h(e.label, n.fontFamily) + h(t.label, n.fontFamily)) / 2 + rt, ae = K ? Y : J[J.length - 1];
+	ae && !$.includes(ae) && ($.length && ie($[$.length - 1], ae) && ($ = $.slice(0, -1)), K || ($ = [...$, ae]));
+	let oe = K ? I.from : R, se = (e) => e != null && e >= P && e <= oe, ce = [...se(f) ? [{
+		x: V(f),
+		text: e.medianLabel ?? S(`mediaan ${at(f)}`),
 		bold: !0,
 		dashed: !1
-	}] : [], ...ce(h) ? [{
-		x: z(h),
-		text: e.thresholdLabel ?? S(`norm ${Xe(h)}`),
+	}] : [], ...se(g) ? [{
+		x: V(g),
+		text: e.thresholdLabel ?? S(`norm ${at(g)}`),
 		bold: !1,
 		dashed: !0
-	}] : []], ue = Qe(le, A, r.fontFamily), de = (e) => e.charAt(0).toUpperCase() + e.slice(1), fe = [
+	}] : []], le = st(ce, A, n.fontFamily), ue = (e) => e.charAt(0).toUpperCase() + e.slice(1), de = [
 		{
 			label: y,
 			color: b,
 			shape: "square"
 		},
-		...ce(p) ? [{
-			label: de(e.medianLabel ?? "Mediaan"),
+		...se(f) ? [{
+			label: ue(e.medianLabel ?? "Mediaan"),
 			color: "var(--color-chart-emphasis)",
 			shape: "line"
 		}] : [],
-		...ce(h) ? [{
-			label: de(e.thresholdLabel ?? "Norm"),
+		...se(g) ? [{
+			label: ue(e.thresholdLabel ?? "Norm"),
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}] : []
-	], pe = (e) => {
-		let t = V[e], n = o[e].count;
-		if (n == null) return i`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
+	], fe = (e) => {
+		let t = H[e], n = i[e].count;
+		if (n == null) return _`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
                        height=${Math.max(0, j - A.top)} fill="url(#hatch-${x})" />`;
-		let r = k(n, T, A);
-		return i`
-      <g class="lintje-chart__bar-group" ${_(B(e, o.length))}>
+		let r = O(n, T, A);
+		return _`
+      <g class="lintje-chart__bar-group" ${s(B(e, i.length))}>
         <rect class="lintje-chart__bar lintje-chart__segment" x=${t.x} y=${r} width=${t.width}
               height=${Math.max(0, j - r)} fill=${b} />
       </g>
     `;
-	}, $ = r.hoverIndex, me = $ == null ? null : o[$]?.count, he = [
-		o.map((e, t) => pe(t)),
-		$ != null && me != null ? i`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
-                  x=${V[$].x} y=${k(me, T, A)} width=${V[$].width}
-                  height=${Math.max(0, j - k(me, T, A))} fill=${b} />` : n,
-		J.map((e) => i`
+	}, pe = n.hoverIndex, me = pe == null ? null : i[pe]?.count, he = [
+		i.map((e, t) => fe(t)),
+		pe != null && me != null ? _`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
+                  x=${H[pe].x} y=${O(me, T, A)} width=${H[pe].width}
+                  height=${Math.max(0, j - O(me, T, A))} fill=${b} />` : u,
+		$.map((e) => _`
         <line x1=${e.x} x2=${e.x} y1=${j} y2=${j + 4}
               stroke="var(--color-chart-zero)" stroke-width="1" />
         <text x=${e.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
       `),
-		q ? i`<text x=${q.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${q.label}</text>` : n,
-		le.map((e, t) => {
-			let r = ue[t];
-			return i`
+		Y ? _`<text x=${Y.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${Y.label}</text>` : u,
+		ce.map((e, t) => {
+			let n = le[t];
+			return _`
         <g class="lintje-chart__reference">
           <line x1=${e.x} x2=${e.x} y1=${A.top} y2=${j}
                 stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed ? 1 : 1.5}
-                stroke-dasharray=${e.dashed ? "3 3" : n} />
-          <text x=${r.x} y=${r.y} text-anchor=${r.anchor}
+                stroke-dasharray=${e.dashed ? "3 3" : u} />
+          <text x=${n.x} y=${n.y} text-anchor=${n.anchor}
                 class=${e.bold ? "lintje-chart__data-label lintje-chart__data-label--halo" : "lintje-chart__axis-label lintje-chart__axis-label--halo"}>${e.text}</text>
         </g>
       `;
 		}),
-		V.map((e, t) => i`
+		H.map((e, t) => _`
         <rect x=${e.x} y=${A.top} width=${e.width} height=${Math.max(0, j - A.top)}
               fill="transparent"
-              @mousemove=${(e) => r.hoverAt(t, e, te(t))}
-              @mouseleave=${() => r.hoverAt(null)} />
+              @mousemove=${(e) => n.hoverAt(t, e, te(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
       `)
 	];
-	return m`
+	return p`
     <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
-      ${ee({ items: fe })}
-      ${ne({
-		fontFamily: r.fontFamily,
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({ items: de })}
+      ${ee({
+		fontFamily: n.fontFamily,
 		id: x,
 		ticks: E,
 		max: T,
 		area: A,
-		axisTitle: l,
-		xTitle: u,
-		description: a,
+		axisTitle: a,
+		xTitle: o,
+		description: r,
 		formatTick: D.format,
-		keys: re
+		keys: G
 	}, he)}
-      ${H(r)}
-      ${X(r)}
+      ${U(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
+//#region src/components/shared/charts/radar-chart/radar-chart.ts
+var lt = 16, ut = 6, dt = 18, ft = 16, pt = 3, mt = 4, ht = 8, gt = 40, _t = .7, vt = 420, yt = 12, bt = 2;
+function xt(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(I)), n = L.filter((e) => !t.has(e)), r = 0;
+	return e.series.map((t) => {
+		let i = e.axes.map((e, n) => t.values[n] ?? null);
+		if (t.comparison) return {
+			label: t.label,
+			values: i,
+			comparison: !0,
+			color: "var(--color-chart-secondary)"
+		};
+		let a = I(t.color) ? t.color : n[r++ % n.length];
+		return {
+			label: t.label,
+			values: i,
+			comparison: !1,
+			color: F(t.color ?? a),
+			symbol: a
+		};
+	});
+}
+function St(e) {
+	let t = e.length, n = e.findIndex((e) => e == null);
+	if (n === -1) return {
+		closed: !0,
+		runs: [e.map((e, t) => t)]
+	};
+	let r = [], i = [];
+	for (let a = 1; a <= t; a++) {
+		let o = (n + a) % t;
+		e[o] == null ? (i.length && r.push(i), i = []) : i.push(o);
+	}
+	return i.length && r.push(i), {
+		closed: !1,
+		runs: r
+	};
+}
+function Ct(e, t = e / 5) {
+	let n = [];
+	for (let r = 1; r * t < e - t * 1e-6; r++) n.push(Math.round(r * t * 1e6) / 1e6);
+	return [...n, e];
+}
+var wt = (e) => Number.isInteger(e) ? 0 : String(e).split(".")[1]?.length ?? 0;
+function Tt(e, t, n) {
+	let r = e.area ?? "emphasis", i = t.filter((e) => !e.comparison);
+	return new Set(i.filter((e) => e.complete && r !== "never" && (r === "always" || i.length === 1 || e.label === n)).map((e) => e.label));
+}
+function Et(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, { axes: a, unit: o, threshold: c, small: u = !1 } = e, d = a.length, f = xt(e), h = (e) => n.hiddenSeries.includes(e.label), g = f.filter((e) => !h(e)), _ = f.filter((e) => !e.comparison), v = g.filter((e) => !e.comparison), y = Math.min(2, Math.max(0, ...f.flatMap((e) => e.values.filter((e) => e != null)).map(wt), ...c == null ? [] : [wt(c)])), b = (e) => l(e, y), x = (e) => `${b(e)}${o ? ` ${o}` : ""}`, S = (e) => {
+		let t = Math.round(e * 10 ** y) / 10 ** y;
+		return t === 0 ? b(0) : `${t > 0 ? "+" : "−"}${b(Math.abs(t))}`;
+	}, C = v.length > 1 && v.some((e) => e.label === n.emphasis) ? n.emphasis : null, w = Tt(e, g.map((e) => ({
+		...e,
+		complete: e.values.every((e) => e != null)
+	})), C), T = a.map((e, t) => f.some((e) => e.values[t] == null)), E = e.dataLabels !== !1 && _.length === 1, D = E && !h(_[0]), O = [
+		...f.map((e) => e.comparison ? {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			hidden: h(e)
+		} : {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			symbol: e.symbol,
+			hidden: h(e)
+		}),
+		...c == null ? [] : [{
+			label: e.thresholdLabel ?? `Norm ${x(c)}`,
+			color: "var(--color-chart-emphasis)",
+			shape: "dashed",
+			fixed: !0
+		}],
+		...T.some(Boolean) ? [{
+			label: "Geen gegevens",
+			shape: "hatch",
+			fixed: !0
+		}] : []
+	];
+	function k(t) {
+		let n = g.map((e) => {
+			let n = e.values[t];
+			return {
+				label: e.label,
+				value: n == null ? "geen gegevens" : x(n),
+				color: e.color,
+				symbol: e.symbol,
+				marker: e.comparison ? "line" : void 0
+			};
+		});
+		c != null && n.push({
+			label: e.thresholdLabel ?? "Norm",
+			value: x(c),
+			color: "var(--color-chart-emphasis)",
+			marker: "dashed"
+		});
+		let [r] = v, i = v.length === 1 ? r.values[t] : null;
+		if (i != null) {
+			let e = g.find((e) => e.comparison), r = e?.values[t];
+			e && r != null && n.push({
+				label: `t.o.v. ${e.label}`,
+				value: S(i - r),
+				divider: !0
+			}), c != null && n.push({
+				label: "t.o.v. norm",
+				value: S(i - c),
+				divider: !(e && r != null)
+			});
+		}
+		return {
+			title: a[t],
+			rows: n
+		};
+	}
+	let { width: A, height: j, body: M, at: N } = (i ? Ot : Dt)({
+		spec: e,
+		controller: n,
+		options: t,
+		layers: f,
+		shown: g,
+		fills: w,
+		emphasis: C,
+		missing: T,
+		reserve: E,
+		labelled: D,
+		hidden: h,
+		format: b,
+		contentAt: k
+	}), P = Z(n, d, (e) => ({
+		...N(e),
+		content: k(e)
+	}));
+	return p`
+    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({
+		items: O,
+		onToggle: (e) => n.toggleSeries(e),
+		onEmphasis: _.length > 1 ? (e) => n.emphasise(e) : void 0
+	})}
+      <figure class="lintje-chart">
+        <svg viewBox="0 0 ${A} ${j}" width=${A} height=${j}
+             class="lintje-chart__svg lintje-radar ${i ? "lintje-radar--rows" : ""}"
+             ${s({ height: `${j}px` })}
+             role=${R(!1)} aria-labelledby="${n.id}-desc" tabindex="0"
+             @keydown=${P.keydown} @focus=${P.focus} @blur=${P.blur}>
+          <desc id="${n.id}-desc">${r}</desc>
+          <defs>
+            <pattern id="hatch-${n.id}" width="6" height="6" patternUnits="userSpaceOnUse"
+                     patternTransform="rotate(45)">
+              <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
+            </pattern>
+          </defs>
+          ${M}
+        </svg>
+      </figure>
+      ${U(n)}
+      ${Q(n)}
+    </div>
+  `;
+}
+function Dt({ spec: e, controller: t, options: n, layers: r, shown: i, fills: a, emphasis: o, missing: c, reserve: d, labelled: f, hidden: p, format: m, contentAt: g }) {
+	let { axes: v, max: y, threshold: b, small: x = !1 } = e, S = v.length, C = x ? "--chart-h-small" : "--chart-h-main";
+	t.measure({
+		width: !0,
+		height: n.height ?? C,
+		fit: !!n.expanded
+	});
+	let w = t.width, T = n.height ?? (n.expanded || x ? t.height : Math.max(t.height, Math.min(vt, Math.round(w * _t)))), E = (e) => -Math.PI / 2 + 2 * Math.PI * e / S, D = t.fontFamily, O = (e) => h(e, D) * 14 / 12, k = Math.max(0, ...v.map((e, t) => Math.abs(Math.cos(E(t))) < .1 ? 0 : O(e) + ut + 2)), A = 24 + (d ? ft : 0), M = Math.max(gt, Math.min(w / 2 - k - lt, T / 2 - A - lt)), N = w / 2, P = T / 2, F = (e, t) => ({
+		x: N + t * Math.cos(E(e)),
+		y: P + t * Math.sin(E(e))
+	}), I = (e) => Math.max(0, Math.min(e, y)) / y * M, L = (e) => e.map((e) => `${e.x},${e.y}`).join(" "), R = (e) => L(v.map((t, n) => F(n, I(e)))), z = Ct(y, e.step), B = Math.max(0, ...z.map(wt)), V = t.hoverIndex, U = (e) => {
+		let t = i.map((t) => t.values[e]).filter((e) => e != null);
+		return F(e, t.length ? I(Math.max(...t)) : M / 2);
+	}, ee = [...r.filter((e) => e.comparison), ...r.filter((e) => !e.comparison)], te = (e) => o != null && e.label !== o, W = s({ "transform-origin": `${N}px ${P}px` }), G = v.map((e, t) => {
+		let n = Math.cos(E(t)), i = Math.sin(E(t)), a = F(t, M + lt + ut), o = Math.abs(n) < .1, s = o ? "middle" : n > 0 ? "start" : "end", c;
+		c = o && i < 0 ? a.y - 4 - (d ? ft : 0) : o ? a.y + 12 : d ? a.y - 2 : a.y + 5;
+		let l = d ? r.find((e) => !e.comparison)?.values[t] : void 0;
+		return _`
+      <text x=${a.x} y=${c} text-anchor=${s} class="lintje-radar__name">${e}</text>
+      ${d ? _`<text x=${a.x} y=${c + ft} text-anchor=${s}
+                     class="lintje-chart__data-label lintje-radar__value ${l == null ? "lintje-radar__no-value" : ""} ${f ? "" : "is-hidden"}">
+                 ${l == null ? "geen gegevens" : m(l)}</text>` : u}
+    `;
+	}), K = (e, t) => {
+		let n = p(e) ? "is-hidden" : "", r = e.values.map((e, t) => e == null ? null : F(t, I(e)));
+		if (t === "area") return e.comparison || r.some((e) => e == null) ? u : _`<g class="lintje-radar__layer ${n}" ${W}>
+        <polygon class="lintje-radar__area ${a.has(e.label) ? "is-filled" : ""}"
+                 points=${L(r)} fill=${e.color} />
+      </g>`;
+		let { closed: i, runs: o } = St(e.values), s = e.comparison ? void 0 : H(e.color), c = o.map((t) => {
+			let n = t.map((e) => r[e]), a = L(i ? [...n, n[0]] : n);
+			return n.length === 1 ? e.comparison ? _`<circle cx=${n[0].x} cy=${n[0].y} r="2.5" fill=${e.color} />` : u : _`
+        ${s ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${s} />` : u}
+        <polyline class="lintje-chart__line" points=${a} stroke=${e.color} />
+      `;
+		}), l = e.symbol ? r.map((t) => t ? _`<path d=${j(e.symbol, pt, t.x, t.y)} fill=${e.color}
+                        stroke=${s ?? u} stroke-width=${s ? 1 : u} />` : u) : u;
+		return t === "lift" ? _`<g class="lintje-radar__lift" aria-hidden="true">${c}${l}</g>` : _`<g class="lintje-radar__layer ${n} ${te(e) ? "is-muted" : ""}" ${W}>
+      ${c}${l}
+    </g>`;
+	}, q = (e) => {
+		let t = M + lt, n = Math.PI / S, r = (e) => `${N + t * Math.cos(e)},${P + t * Math.sin(e)}`;
+		return `${N},${P} ${r(E(e) - n)} ${r(E(e))} ${r(E(e) + n)}`;
+	};
+	return {
+		width: w,
+		height: T,
+		body: [
+			z.map((e) => _`<polygon class="lintje-radar__ring" points=${R(e)} />`),
+			c.map((e, n) => {
+				if (!e) return u;
+				let r = E(n), i = -Math.sin(r) * 5, a = Math.cos(r) * 5, o = F(n, M);
+				return _`<polygon class="lintje-radar__gap" fill="url(#hatch-${t.id})"
+                          points=${`${N + i},${P + a} ${o.x + i},${o.y + a} ${o.x - i},${o.y - a} ${N - i},${P - a}`} />`;
+			}),
+			v.map((e, t) => {
+				let n = F(t, M + lt);
+				return _`<line class="lintje-radar__spoke ${V === t ? "is-active" : ""}"
+                       x1=${N} y1=${P} x2=${n.x} y2=${n.y} />`;
+			}),
+			z.map((e) => {
+				let t = F(0, I(e));
+				return _`<text x=${t.x + ht / 2} y=${t.y + 4}
+                       class="lintje-chart__axis-label lintje-chart__axis-label--halo">${l(e, B)}</text>`;
+			}),
+			b == null ? u : _`<polygon class="lintje-chart__reference lintje-radar__norm" points=${R(b)} />`,
+			ee.map((e) => K(e, "area")),
+			ee.map((e) => K(e, "line")),
+			o == null ? u : K(r.find((e) => e.label === o), "lift"),
+			G,
+			V == null ? u : i.map((e) => {
+				let t = e.values[V];
+				if (t == null) return u;
+				let n = F(V, I(t)), r = e.comparison ? void 0 : H(e.color), i = j(e.symbol, mt, n.x, n.y);
+				return _`
+            <path class="lintje-chart__hover-point" d=${i} fill=${e.color} />
+            ${r ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />` : u}
+          `;
+			}),
+			_`<g @mouseleave=${() => t.hoverAt(null)}>
+      ${v.map((e, n) => _`<polygon class="lintje-chart__hit" points=${q(n)}
+                               @mousemove=${(e) => t.hoverAt(n, e, g(n))} />`)}
+    </g>`
+		],
+		at: U
+	};
+}
+function Ot({ spec: e, controller: t, layers: n, shown: r, reserve: i, labelled: a, hidden: o, format: c, contentAt: d }) {
+	let { axes: f, max: p, threshold: m } = e;
+	t.measure({ width: !0 });
+	let g = t.width, v = g - 1, y = n.filter((e) => !e.comparison), b = [...y.map((e) => ({
+		layer: e,
+		size: y.length === 1 ? 8 : 6
+	})), ...n.filter((e) => e.comparison).map((e) => ({
+		layer: e,
+		size: 4
+	}))], x = b.reduce((e, t) => e + t.size, 0) + bt * Math.max(0, b.length - 1), S = 22 + x + yt, C = f.length * S, w = C + 16, T = (e) => .5 + Math.max(0, Math.min(e, p)) / p * v, E = t.fontFamily, D = n.find((e) => !e.comparison), O = r.find((e) => !e.comparison), k = t.hoverIndex, A = (e) => {
+		let t = O?.values[e];
+		return {
+			x: t == null ? g / 2 : T(t),
+			y: e * S + dt + 4
+		};
+	}, j = f.map((e, n) => {
+		let r = n * S, l = r + dt + 4, p = i ? D?.values[n] : void 0, y = i ? p == null ? "geen gegevens" : c(p) : "", C = i && p != null && m != null && p < m, w = a ? "" : "is-hidden", O = l;
+		return _`
+      <g class="lintje-radar__row ${k === n ? "is-active" : ""}">
+        <text x="0" y=${r + 14} class="lintje-radar__name">${e}</text>
+        ${i ? _`<text x=${g} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__data-label lintje-radar__value ${p == null ? "lintje-radar__no-value" : ""} ${w}">${y}</text>` : u}
+        ${C ? _`<text x=${g - h(y, E, 700) - 6} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__axis-label lintje-radar__value ${w}">onder norm</text>` : u}
+        ${b.map(({ layer: e, size: r }) => {
+			let i = O;
+			O += r + bt;
+			let a = e.values[n], c = o(e) ? "is-hidden" : "";
+			return a == null ? _`<rect class="lintje-radar__bar ${c}" x="0.5" y=${i} width=${v} height=${r}
+                       fill="url(#hatch-${t.id})" />` : _`<rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-radar__bar ${c}" x="0.5" y=${i}
+                       width=${Math.max(0, T(a) - .5)} height=${r} fill=${e.color}
+                       ${s(B(n, f.length))} />`;
+		})}
+        <line class="lintje-radar__zero" x1="0.5" x2="0.5" y1=${l - 2} y2=${l + x + 2} />
+        ${m == null ? u : _`<line class="lintje-chart__reference lintje-radar__norm" x1=${T(m)} x2=${T(m)}
+                       y1=${l - 3} y2=${l + x + 3} />`}
+        <rect class="lintje-chart__hit" x="0" y=${r} width=${g} height=${S}
+              @mousemove=${(e) => t.hoverAt(n, e, d(n))} />
+      </g>
+    `;
+	}), M = [0, ...Ct(p, e.step)], N = Math.max(0, ...M.map(wt)), P = M.map((e, t) => _`<text x=${T(e)} y=${C + 12}
+                           text-anchor=${t === 0 ? "start" : t === M.length - 1 ? "end" : "middle"}
+                           class="lintje-chart__axis-label">${l(e, N)}</text>`);
+	return {
+		width: g,
+		height: w,
+		body: _`<g @mouseleave=${() => t.hoverAt(null)}>${j}</g>${P}`,
+		at: A
+	};
+}
+//#endregion
 //#region src/components/shared/charts/shared/render-chart.ts
-function et(e, t) {
+function kt(e, t) {
 	switch (e.kind) {
 		case "line": return se(e, t);
-		case "bar": return le(e, t);
-		case "horizontal-bar": return de(e, t);
-		case "target-progress": return fe(e, t);
-		case "grouped-bar": return pe(e, t);
-		case "stacked-bar": return ge(e, t);
-		case "pie": return xe(e, t);
-		case "dual-axis": return Se(e, t);
-		case "scatter": return Me(e, t);
-		case "heatmap": return Ge(e, t);
-		case "histogram": return $e(e, t);
+		case "bar": return de(e, t);
+		case "horizontal-bar": return pe(e, t);
+		case "target-progress": return me(e, t);
+		case "grouped-bar": return he(e, t);
+		case "stacked-bar": return ye(e, t);
+		case "stacked-area": return Te(e, t);
+		case "pie": return Ae(e, t);
+		case "dual-axis": return je(e, t);
+		case "scatter": return Ve(e, t);
+		case "heatmap": return et(e, t);
+		case "histogram": return ct(e, t);
+		case "radar": return Et(e, t);
 	}
 }
 //#endregion
 //#region src/components/charts/chart/chart.css?inline
-var tt = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", nt = ".lintje-chart__svg, .lintje-pie-chart__svg", rt = [{
+var At = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media screen and (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", jt = ".lintje-chart__svg, .lintje-pie-chart__svg", Mt = [{
 	value: "chart",
 	label: "Grafiek"
 }, {
 	value: "table",
 	label: "Tabel"
 }];
-function it(e) {
+function Nt(e) {
 	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
 }
-function at(e) {
+function Pt(e) {
 	switch (e.kind) {
 		case "line":
+		case "stacked-area":
 		case "dual-axis":
 		case "scatter": return "line";
 		case "pie": return e.donut ? "donut" : "pie";
+		case "radar": return "pie";
 		case "heatmap": return "heatmap";
 		default: return "bar";
 	}
 }
-function ot(e) {
+function Ft(e) {
 	switch (e.kind) {
 		case "horizontal-bar":
-		case "target-progress": return e.rows.length ? `${ue(e.rows.length)}px` : void 0;
+		case "target-progress": return e.rows.length ? `${fe(e.rows.length)}px` : void 0;
 		case "pie":
 		case "heatmap": return;
 		default: return e.small ? "var(--chart-h-small)" : void 0;
 	}
 }
-function st(e) {
+function It(e) {
 	switch (e.kind) {
-		case "line": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "line": {
+			let t = e.events ?? [], n = (e) => t.filter((t) => t.index === e).map((e) => e.label).join("; ");
+			return [[
+				"",
+				...e.series.map((e) => e.label),
+				...t.length ? ["Gebeurtenis"] : []
+			], ...e.labels.map((r, i) => [
+				r,
+				...e.series.map((e) => e.values[i]),
+				...t.length ? [n(i)] : []
+			])];
+		}
 		case "bar": return [[
 			"",
 			e.axisTitle ?? "Waarde",
@@ -1614,6 +2159,18 @@ function st(e) {
 		])];
 		case "grouped-bar":
 		case "stacked-bar": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "stacked-area": return [[
+			"",
+			...e.series.map((e) => e.label),
+			"Totaal"
+		], ...e.labels.map((t, n) => {
+			let r = e.series.map((e) => e.values[n]), i = r.some((e) => e == null) ? null : Number(r.reduce((e, t) => e + t, 0).toFixed(Lt(r)));
+			return [
+				t,
+				...r,
+				i
+			];
+		})];
 		case "pie": return [["", "Aantal"], ...e.segments.map((e) => [e.label, e.value])];
 		case "dual-axis": {
 			let t = (e) => e.unit ? `${e.label} (${e.unit})` : e.label;
@@ -1645,6 +2202,18 @@ function st(e) {
 			]))];
 		}
 		case "heatmap": return [["", ...e.columnLabels], ...e.rowLabels.map((t, n) => [t, ...e.values[n] ?? []])];
+		case "radar": {
+			let t = e.threshold == null ? [] : [e.thresholdLabel ?? "Norm"];
+			return [[
+				"",
+				...e.series.map((e) => e.label),
+				...t
+			], ...e.axes.map((t, n) => [
+				t,
+				...e.series.map((e) => e.values[n] ?? null),
+				...e.threshold == null ? [] : [e.threshold]
+			])];
+		}
 		case "histogram": {
 			let t = (t) => e.unit ? `${t} (${e.unit})` : t;
 			return [[
@@ -1653,7 +2222,7 @@ function st(e) {
 				t("Tot"),
 				"Aantal"
 			], ...e.bins.map((t) => [
-				Ze(t, e.unit),
+				ot(t, e.unit),
 				t.from,
 				t.to ?? "",
 				t.count
@@ -1661,15 +2230,15 @@ function st(e) {
 		}
 	}
 }
-function ct(e) {
+function Lt(e) {
 	return e.reduce((e, t) => {
 		if (typeof t != "number" || Number.isInteger(t)) return e;
 		let n = String(t).split(".")[1] ?? "";
 		return Math.max(e, n.length);
 	}, 0);
 }
-function lt(e, t) {
-	let [n = [], ...r] = st(e), i = n.map((e, t) => {
+function Rt(e, t) {
+	let [n = [], ...r] = It(e), i = n.map((e, t) => {
 		let n = r.map((e) => e[t] ?? null);
 		return t === 0 || n.some((e) => typeof e == "string" && e !== "") ? {
 			key: `c${t}`,
@@ -1680,7 +2249,7 @@ function lt(e, t) {
 			key: `c${t}`,
 			header: String(e ?? ""),
 			format: "decimal",
-			decimals: ct(n),
+			decimals: Lt(n),
 			align: "right",
 			sortable: !1
 		};
@@ -1700,18 +2269,17 @@ function lt(e, t) {
 		pageSize: Math.max(r.length, 1)
 	};
 }
-var ut = class extends S {
+var zt = class extends C {
 	constructor(...e) {
-		super(...e), this.view = "chart", this.#e = new U(() => this.requestUpdate()), this.#t = null, this.#n = new a(this);
+		super(...e), this.view = "chart", this.#e = new G(() => this.requestUpdate()), this.#t = null, this.#n = new n(this);
 	}
 	static {
 		this.styles = [
-			u,
-			r(y),
-			r(v),
-			r(o),
-			...C,
-			r(tt)
+			e,
+			a(x),
+			a(r),
+			...w,
+			a(At)
 		];
 	}
 	static {
@@ -1740,36 +2308,40 @@ var ut = class extends S {
 	}
 	get downloadName() {
 		let e = this.data?.download;
-		return e === !1 ? null : e?.filename ?? it(this.data?.title);
+		return e === !1 ? null : e?.filename ?? Nt(this.data?.title);
 	}
 	csv() {
 		let e = this.data, t = this.downloadName;
-		e && t !== null && D(t, st(e.chart));
+		e && t !== null && E(t, It(e.chart));
 	}
 	png() {
 		let e = this.data;
 		if (!e) return;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(nt);
-		t && w(this.downloadName ?? it(e.title), t);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(jt);
+		t && T(this.downloadName ?? Nt(e.title), t);
 	}
 	expandChanged(e) {
-		e ? this.#t ??= new U(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+		e ? this.#t ??= new G(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
 	}
 	render() {
 		let e = this.data;
-		if (!e) return n;
-		let t = this.ready, r = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, i = this.id ? `${this.id}-tile` : void 0, a = e.tableSwitch && t ? this.viewSwitch() : n, o = this.showsTable;
-		return m`<lintje-tile
-        id=${i ?? n}
-        span=${e.span ?? n}
-        heading=${e.title ?? n}
-        icon=${e.icon ?? n}
-        subtitle=${r ?? n}
-        intro=${e.intro ?? n}
-        footnote=${e.footnote ?? n}
+		if (!e) return u;
+		let t = this.ready, n = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, r = this.id ? `${this.id}-tile` : void 0, i = e.tableSwitch && t ? this.viewSwitch() : u, a = this.showsTable;
+		return p`<lintje-tile
+        id=${r ?? u}
+        span=${e.span ?? u}
+        heading=${e.title ?? u}
+        icon=${e.icon ?? u}
+        subtitle=${n ?? u}
+        intro=${e.intro ?? u}
+        footnote=${e.footnote ?? u}
         ?legend-below=${!!e.legendBelow}
         ?expandable=${this.expandable && t}
         ?download=${this.downloadName !== null && t}
+        state=${e.state ?? "ready"}
+        message=${e.message ?? u}
+        last-known=${e.lastKnown ?? u}
+        content-height=${Ft(e.chart) ?? u}
         @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -1777,53 +2349,51 @@ var ut = class extends S {
 			e.stopPropagation(), this.csv();
 		}}
       >
-        ${a}
-        ${e.notice ? m`<lintje-announcement
+        ${i}
+        ${e.notice ? p`<lintje-announcement
               slot="notice"
               compact
               .data=${e.notice}
-            ></lintje-announcement>` : n}
+            ></lintje-announcement>` : u}
         ${this.content()}
       </lintje-tile>
 
-      ${this.renderExpandModal(this.expanded ? o ? this.table() : this.#t ? et(e.chart, {
+      ${this.renderExpandModal(this.expanded ? a ? this.table() : this.#t ? kt(e.chart, {
 			...this.chartOptions(this.#t),
 			expanded: !0
-		}) : n : n, {
+		}) : u : u, {
 			heading: e.title,
-			subtitle: r,
+			subtitle: n,
 			footnote: e.footnote,
 			csv: () => this.csv(),
-			png: o ? void 0 : () => this.png()
+			png: a ? void 0 : () => this.png()
 		})}`;
 	}
 	content() {
-		let e = this.data, t = ot(e.chart);
+		let e = this.data;
 		switch (e.state ?? "ready") {
-			case "loading": return x({
-				kind: at(e.chart),
-				height: t
-			});
-			case "empty": return T(e.message, t);
-			case "error": return E({
-				message: e.message,
-				lastKnown: e.lastKnown,
-				height: t,
-				announcement: b
-			});
-			default: return this.showsTable ? this.table() : et(e.chart, this.chartOptions(this.#e));
+			case "loading": return p`<div slot="loading">
+          ${S({
+				kind: Pt(e.chart),
+				height: Ft(e.chart),
+				status: !1
+			})}
+        </div>`;
+			case "empty":
+			case "error": return u;
+			default: return this.showsTable ? this.table() : kt(e.chart, this.chartOptions(this.#e));
 		}
 	}
 	viewSwitch() {
 		let e = this.#n.matches;
-		return m`<lintje-segmented
+		return p`<lintje-segmented
       class="lintje-chart__view"
       slot=${e ? "notice" : "actions"}
       label="Weergave"
       hide-label
       ?stacked=${e}
       .value=${this.view}
-      .options=${rt}
+      .options=${Mt}
       @lintje-change=${(e) => {
 			e.stopPropagation(), this.view = e.detail === "table" ? "table" : "chart";
 		}}
@@ -1831,15 +2401,15 @@ var ut = class extends S {
 	}
 	table() {
 		let e = this.data, t = e.title ? `${e.title}, als tabel` : "Grafiek als tabel";
-		return m`<lintje-data-table
+		return p`<lintje-data-table
       class="lintje-chart__table"
       bare
-      .data=${lt(e.chart, t)}
+      .data=${Rt(e.chart, t)}
     ></lintje-data-table>`;
 	}
 	async focusMark(e) {
 		await this.updateComplete;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${nt}, .lintje-heatmap`);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${jt}, .lintje-heatmap`);
 		n && !n.hasAttribute("tabindex") && n.setAttribute("tabindex", "-1"), n?.focus();
 	}
 	chartOptions(e) {
@@ -1863,6 +2433,6 @@ var ut = class extends S {
 		};
 	}
 };
-t("lintje-chart", ut);
+i("lintje-chart", zt);
 //#endregion
-export { ut as LintjeChart };
+export { zt as LintjeChart };