lintje 0.3.0 → 0.5.0

package/dist-elements/tag/chart.js

@@ -1,32 +1,33 @@
-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, en as l, h as u, i as d, l as f, nn as p, o as m, p as h, r as g, rn as _, s as v, v as y, y as b } from "../chunks/base-CbmWxUig.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, d as c, en as l, f as u, g as d, l as f, m as p, nn as m, o as h, p as g, r as _, rn as v, v as y, y as b } from "../chunks/base-CVKIPSLx.js";
 import { t as x } from "./announcement.js";
 import "./segmented.js";
-import { a as S, c as C, i as w, n as T, t as E } from "../chunks/download-Ct9q2anY.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 ee, n as z, o as B, p as V, r as H, s as te, t as ne, u as U, v as W, w as G, x as K, y as q } from "../chunks/stagger-BHoOgy0g.js";
+import { i as S, n as C, t as w } from "../chunks/download-D7ZarlMZ.js";
+import { C as T, D as E, E as D, O, S as k, T as A, _ as j, a as M, b as N, c as P, d as F, f as I, h as L, i as R, l as ee, m as z, n as B, o as V, r as H, s as U, t as W, u as G, v as K, w as q, x as te, y as J } from "../chunks/stagger-Dvkth9_C.js";
+import { n as Y, r as X } from "../chunks/chart-styles-JK4clSyA.js";
 import "./data-table.js";
 //#region src/components/shared/charts/shared/plot-keys.ts
-var J = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), Y = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
-function re(e) {
+var ne = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), Z = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+function Q(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 X(e) {
+function $(e) {
 	try {
 		return e.matches(":focus-visible");
 	} catch {
 		return !0;
 	}
 }
-function Z(e, t, n) {
+function re(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 = re(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
+		e.hoverIndex = r, e.status = Q(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 (J.has(n.key)) a = Math.min(t - 1, i + 1);
-			else if (Y.has(n.key)) a = Math.max(0, i - 1);
+			if (ne.has(n.key)) a = Math.min(t - 1, i + 1);
+			else if (Z.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,117 +35,118 @@ function Z(e, t, n) {
 		},
 		focus(n) {
 			let i = n.currentTarget;
-			n.target === i && t !== 0 && X(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
+			n.target === i && t !== 0 && $(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 Q(e) {
-	return p`<p class="visually-hidden" role="status">${e.status}</p>`;
+function ie(e) {
+	return m`<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) {
+var ae = 18, oe = 4, se = 8;
+function ce(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: n, description: r } = t, { labels: i, axisTitle: a, unit: o, asOfIndex: c, asOfLabel: u, pendingHours: d = 0, fixedMax: m, small: g = !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) => ({
+function le(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, asOfIndex: c, asOfLabel: d, pendingHours: f = 0, fixedMax: g, small: _ = !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 ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
 	let x = e.series.filter((e) => !e.comparison).length > 1, S = 0, C = e.series.map((e) => ({
 		...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 } = K(m ?? Math.max(...T, 1)), M = N(k, n.width, {
+		color: z(e.color),
+		symbol: x && !e.comparison ? K(e.color) ? e.color : j[S++ % j.length] : void 0
+	})), w = C.filter((e) => !n.hiddenSeries.includes(e.label)), D = C.flatMap((e) => e.values).filter((e) => e != null), { max: M, ticks: N } = T(g ?? Math.max(...D, 1)), I = k(N, n.width, {
 		fontFamily: n.fontFamily,
-		minimum: Math.ceil(f(i[0] ?? "", n.fontFamily) / 2)
-	}), P = q(t, { left: M.width }), R = y.map((e) => Math.min(P.width - $ / 2, Math.max($ / 2, A(e.index, i.length, P)))), z = oe(R), ne = z.length ? Math.max(...z) + 1 : 0, U = q(t, {
-		left: M.width,
-		...ne ? { top: ne * 22 + ae } : {}
-	}), W = (e) => ie + z[e] * 22, G = d > 6, J = c ?? i.length - 1, Y = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", re = C.map((e) => ({
+		minimum: Math.ceil(p(i[0] ?? "", n.fontFamily) / 2)
+	}), R = te(t, { left: I.width }), B = y.map((e) => Math.min(R.width - ae / 2, Math.max(ae / 2, E(e.index, i.length, R)))), V = ce(B), U = V.length ? Math.max(...V) + 1 : 0, W = te(t, {
+		left: I.width,
+		...U ? { top: U * 22 + se } : {}
+	}), G = (e) => oe + V[e] * 22, q = f > 6, Y = c ?? i.length - 1, X = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", ne = C.map((e) => ({
 		label: e.label,
-		color: Y(e),
+		color: X(e),
 		shape: e.comparison ? "dashed" : "line",
 		symbol: e.symbol,
-		hidden: n.hiddenSeries.includes(e.label)
-	})), X = Math.max(1, Math.ceil(i.length / 8)), se = i.map((e, t) => ({
+		hidden: n.hiddenSeries.includes(e.label),
+		fixed: C.length < 2
+	})), Z = Math.max(1, Math.ceil(i.length / 8)), Q = i.map((e, t) => ({
 		label: e,
-		x: A(t, i.length, U),
+		x: E(t, i.length, W),
 		i: t
-	})).filter((e) => e.i % X === 0);
-	function ce(e) {
+	})).filter((e) => e.i % Z === 0);
+	function $(e) {
 		let t = y.filter((t) => t.index === e);
 		return {
 			title: i[e],
 			rows: w.map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? "geen gegevens" : v(t.values[e]),
-				color: Y(t)
+				value: t.values[e] == null ? "geen gegevens" : u(t.values[e]),
+				color: X(t)
 			})),
 			...t.length ? { events: t } : {}
 		};
 	}
-	let le = Z(n, i.length, (e) => {
+	let le = re(n, i.length, (e) => {
 		let t = w.map((t) => t.values[e]).filter((e) => e != null);
 		return {
-			x: A(e, i.length, U),
-			y: t.length ? O(Math.max(...t), E, U) : U.top,
-			content: ce(e)
+			x: E(e, i.length, W),
+			y: t.length ? O(Math.max(...t), M, W) : W.top,
+			content: $(e)
 		};
 	}), ue = [
-		d > 0 ? (() => {
-			let e = A(J, i.length, U), t = G ? D(U) / (i.length - 1) : U.width - U.right - e;
-			return _`<rect x=${e} y=${U.top} width=${Math.max(0, t)}
-                           height=${U.height - U.top - U.bottom}
+		f > 0 ? (() => {
+			let e = E(Y, i.length, W), t = q ? A(W) / (i.length - 1) : W.width - W.right - e;
+			return v`<rect x=${e} y=${W.top} width=${Math.max(0, t)}
+                           height=${W.height - W.top - W.bottom}
                            fill="url(#hatch-${b})" />`;
 		})() : l,
-		y.length ? _`<g>
+		y.length ? v`<g>
           ${y.map((e, t) => {
-			let n = A(e.index, i.length, U);
-			return _`<line class="lintje-chart__event-line" x1=${n} x2=${n}
-                             y1=${W(t) + $} y2=${U.height - U.bottom} />`;
+			let n = E(e.index, i.length, W);
+			return v`<line class="lintje-chart__event-line" x1=${n} x2=${n}
+                             y1=${G(t) + ae} y2=${W.height - W.bottom} />`;
 		})}
-          ${y.map((e, t) => _`
-              <rect class="lintje-chart__event-chip" x=${R[t] - $ / 2} y=${W(t)}
-                    width=${$} height=${$} />
-              <text class="lintje-chart__event-number" x=${R[t]} y=${W(t) + $ / 2}
+          ${y.map((e, t) => v`
+              <rect class="lintje-chart__event-chip" x=${B[t] - ae / 2} y=${G(t)}
+                    width=${ae} height=${ae} />
+              <text class="lintje-chart__event-number" x=${B[t]} y=${G(t) + ae / 2}
                     text-anchor="middle" dominant-baseline="central">${e.number}</text>
             `)}
         </g>` : l,
-		_`<g class="lintje-chart__reveal">
-      ${w.map((e) => {
-			let t = Y(e), n = e.comparison ? void 0 : V(t), r = [[]];
+		v`<g class="lintje-chart__reveal">
+      ${C.map((e) => {
+			let t = X(e), n = e.comparison ? void 0 : L(t), r = [[]];
 			e.values.forEach((e, t) => {
-				e == null || G && t > J ? r[r.length - 1].length && r.push([]) : r[r.length - 1].push({
-					x: A(t, i.length, U),
-					y: O(e, E, U)
+				e == null || q && t > Y ? r[r.length - 1].length && r.push([]) : r[r.length - 1].push({
+					x: E(t, i.length, W),
+					y: O(e, M, W)
 				});
 			});
 			let a = r.filter((e) => e.length > 0);
 			if (a.length === 0) return l;
-			let o = a[a.length - 1], s = o[o.length - 1], c = U.height - U.bottom;
-			return _`
-          <g>
+			let o = a[a.length - 1], s = o[o.length - 1], c = W.height - W.bottom, u = !w.includes(e);
+			return v`
+          <g class="lintje-chart__series ${u ? "is-off" : ""}">
             ${a.map((r) => {
 				let i = r.map((e) => `${e.x},${e.y}`).join(" ");
-				return _`
-                ${e.area && !e.comparison ? _`<polygon fill=${t} fill-opacity=".14"
+				return v`
+                ${e.area && !e.comparison ? v`<polygon fill=${t} fill-opacity=".14"
                                  points=${`${r[0].x},${c} ${i} ${r[r.length - 1].x},${c}`} />` : l}
-                ${n && r.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : l}
-                ${r.length === 1 ? _`<circle cx=${r[0].x} cy=${r[0].y} r="2.5" fill=${t} />` : _`<polyline
+                ${n && r.length > 1 ? v`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : l}
+                ${r.length === 1 ? v`<circle cx=${r[0].x} cy=${r[0].y} r="2.5" fill=${t} />` : v`<polyline
                         class="lintje-chart__line"
                         points=${i}
                         stroke=${t}
@@ -153,75 +155,75 @@ function se(e, t) {
               `;
 			})}
             <!-- The line's own shape at its end; a 4 px point there at an early as-of time. -->
-            ${e.symbol ? _`<path class="lintje-chart__line-end" d=${j(e.symbol, 4.5, s.x, s.y)} fill=${t} />` : G && !e.comparison ? _`<circle cx=${s.x} cy=${s.y} r="4" fill=${t} />` : l}
+            ${e.symbol ? v`<path class="lintje-chart__line-end" d=${J(e.symbol, 4.5, s.x, s.y)} fill=${t} />` : q && !e.comparison ? v`<circle cx=${s.x} cy=${s.y} r="4" fill=${t} />` : l}
           </g>
         `;
 		})}
     </g>`,
-		G && u ? B({
-			area: U,
-			index: J,
+		q && d ? P({
+			area: W,
+			index: Y,
 			count: i.length,
-			label: `peilmoment ${u}`,
-			pendingHours: d,
+			label: `peilmoment ${d}`,
+			pendingHours: f,
 			lastValue: (() => {
-				let e = w.find((e) => !e.comparison)?.values[J];
-				return e == null ? void 0 : `${v(e)}${o ? ` ${o}` : ""}`;
+				let e = w.find((e) => !e.comparison)?.values[Y];
+				return e == null ? void 0 : `${u(e)}${o ? ` ${o}` : ""}`;
 			})()
 		}) : l,
 		n.hoverIndex == null ? l : w.map((e) => {
 			let t = n.hoverIndex, r = e.values[t];
-			return r == null || G && t > J ? l : _`<circle class="lintje-chart__hover-point" r="4" fill=${Y(e)}
-                             cx=${A(t, i.length, U)}
-                             cy=${O(r, E, U)} />`;
+			return r == null || q && t > Y ? l : v`<circle class="lintje-chart__hover-point" r="4" fill=${X(e)}
+                             cx=${E(t, i.length, W)}
+                             cy=${O(r, M, W)} />`;
 		}),
 		i.map((e, t) => {
-			let r = A(t, i.length, U), a = D(U) / Math.max(1, i.length - 1);
-			return _`
-        <rect x=${r - a / 2} y=${U.top} width=${a}
-              height=${U.height - U.top - U.bottom}
+			let r = E(t, i.length, W), a = A(W) / Math.max(1, i.length - 1);
+			return v`
+        <rect x=${r - a / 2} y=${W.top} width=${a}
+              height=${W.height - W.top - W.bottom}
               fill="transparent"
-              @mousemove=${(e) => n.hoverAt(t, e, ce(t))}
+              @mousemove=${(e) => n.hoverAt(t, e, $(t))}
               @mouseleave=${() => n.hoverAt(null)} />
       `;
 		})
 	];
-	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
-         ${s({ "--lintje-event-size": `${$}px` })}
+	return m`
+    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
+         ${s({ "--lintje-event-size": `${ae}px` })}
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({
-		items: re,
+      ${F({
+		items: ne,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: b,
-		ticks: k,
-		max: E,
-		area: U,
-		formatTick: M.format,
+		ticks: N,
+		max: M,
+		area: W,
+		formatTick: I.format,
 		axisTitle: a ?? o,
-		xLabels: se,
+		xLabels: Q,
 		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">
+      ${y.length ? m`<ol class="lintje-chart-events" aria-label="Gebeurtenissen">
+              ${y.map((e) => m`<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>` : l}
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/mark-select.ts
-var ce = {
+var ue = {
 	clickable: !1,
 	state: "",
 	markId: l,
@@ -232,7 +234,7 @@ var ce = {
 	click: l,
 	keydown: l
 };
-function le(e, t) {
+function de(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 = () => {
@@ -249,8 +251,8 @@ function le(e, t) {
 		active: r,
 		interactive: !!e.onSelect && n.size > 0,
 		of(t, n, i) {
-			if (!t?.href || !e.onSelect) return r == null ? ce : {
-				...ce,
+			if (!t?.href || !e.onSelect) return r == null ? ue : {
+				...ue,
 				state: "is-muted"
 			};
 			let o = t.id === r;
@@ -275,283 +277,328 @@ function le(e, t) {
 }
 //#endregion
 //#region src/components/shared/charts/bar-chart/bar-chart.ts
-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 de(e, t) {
-	let { controller: n, description: r } = t, { labels: i, values: a, axisTitle: o, trend: c, dataLabels: u = !0, small: f = !1, links: g } = e, y = F(e.color) ?? "var(--color-chart-default)", b = n.id, x = le(t, g ?? []);
+function fe(e, t) {
+	let { controller: n, description: r } = t, { labels: i, values: a, axisTitle: o, trend: d, dataLabels: p = !0, small: g = !1, links: _ } = e, y = z(e.color) ?? "var(--color-chart-default)", b = n.id, x = de(t, _ ?? []);
 	n.measure({
 		width: !0,
-		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let S = a.filter((e) => e != null), { max: C, ticks: w } = K(Math.max(...S, 1)), T = N(w, n.width, { fontFamily: n.fontFamily }), E = q(t, { left: T.width }), D = E.height - E.bottom, { width: A, bandWidth: j } = k(0, i.length, E), M = u && a.every((e) => e == null || d(m(e, A), j - 4)), P = (e) => ({
+	let S = a.filter((e) => e != null), { max: C, ticks: w } = T(Math.max(...S, 1)), E = k(w, n.width, { fontFamily: n.fontFamily }), D = te(t, { left: E.width }), A = D.height - D.bottom, { width: j, bandWidth: M } = q(0, i.length, D), N = p && a.every((e) => e == null || f(c(e, j), M - 4)), P = (e) => ({
 		title: i[e],
 		rows: [{
 			label: o ?? "Waarde",
-			value: a[e] == null ? "geen gegevens" : v(a[e]),
+			value: a[e] == null ? "geen gegevens" : u(a[e]),
 			color: y
 		}]
-	}), I = Z(n, i.length, (e) => ({
-		x: k(e, i.length, E).center,
-		y: a[e] == null ? E.top : O(a[e], C, E),
+	}), F = re(n, i.length, (e) => ({
+		x: q(e, i.length, D).center,
+		y: a[e] == null ? D.top : O(a[e], C, D),
 		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})"
+	})), I = [a.map((e, t) => {
+		let r = q(t, i.length, D);
+		if (e == null) return v`<rect class="lintje-chart__missing" x=${r.x} y=${D.top} width=${r.width}
+                         height=${Math.max(0, A - D.top)} fill="url(#hatch-${b})"
                          @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]}: ${v(e)}`);
-		return _`
+		let a = O(e, C, D), o = x.of(_?.[t], i[t], `${i[t]}: ${u(e)}`);
+		return v`
         <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
-           ${s(z(t, i.length))}
+           ${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}
+                x=${r.x} y=${a} width=${r.width} height=${Math.max(0, A - 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">
-                    ${m(e, r.width)}
+          ${N ? v`<text x=${r.center} y=${a - 5} text-anchor="middle" class="lintje-chart__data-label">
+                    ${c(e, r.width)}
                   </text>` : l}
         </g>
       `;
-	}), c ? _`<polyline
+	}), d ? v`<polyline
           fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5" stroke-dasharray="5 4"
-          points=${c.map((e, t) => e == null ? null : `${k(t, i.length, E).center},${O(e, C, E)}`).filter(Boolean).join(" ")} />` : l];
-	return p`
-    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
+          points=${d.map((e, t) => e == null ? null : `${q(t, i.length, D).center},${O(e, C, D)}`).filter(Boolean).join(" ")} />` : l];
+	return m`
+    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e) || x.escape(e)}>
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: b,
 		ticks: w,
 		max: C,
-		area: E,
+		area: D,
 		axisTitle: o,
 		description: r,
-		formatTick: T.format,
+		formatTick: E.format,
 		xLabels: i.map((e, t) => ({
 			label: e,
-			x: k(t, i.length, E).center
+			x: q(t, i.length, D).center
 		})),
 		interactive: x.interactive,
-		keys: I
-	}, L)}
+		keys: F
+	}, I)}
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/horizontal-bar-chart/horizontal-bar-chart.ts
-function fe(e) {
+function pe(e) {
 	return e * 26 + 24;
 }
-function pe(e, t) {
-	let { controller: n, description: r } = t, { rows: i, threshold: a, thresholdLabel: o, unit: c } = e, u = F(e.color) ?? "var(--color-chart-dark-yellow)", d = F(e.aboveThresholdColor) ?? "var(--color-chart-red)", f = n.id, m = i.map((e) => e.href ? {
+function me(e, t) {
+	let { controller: n, description: r } = t, { rows: i, threshold: a, thresholdLabel: o, unit: c } = e, d = z(e.color) ?? "var(--color-chart-dark-yellow)", f = z(e.aboveThresholdColor) ?? "var(--color-chart-red)", p = n.id, g = i.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), g = le(t, m), y = fe(i.length);
+	} : null), _ = de(t, g), y = pe(i.length);
 	n.measure({
 		width: !0,
 		height: y
 	});
-	let b = n.width, x = G(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) => `${v(e)}${c ? ` ${c}` : ""}`, D = (e) => {
+	let b = n.width, x = D(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) => `${u(e)}${c ? ` ${c}` : ""}`, O = (e) => {
 		let t = i[e], n = a != null && t.value > a;
 		return {
 			title: t.label,
 			rows: [{
 				label: "Waarde",
 				value: E(t.value),
-				color: n ? d : u
+				color: n ? f : d
 			}, ...a == null ? [] : [{
 				label: "Norm",
 				value: E(a),
 				color: "var(--color-chart-emphasis)"
 			}]]
 		};
-	}, O = Z(n, i.length, (e) => ({
+	}, k = re(n, i.length, (e) => ({
 		x: C + T(i[e].value),
 		y: e * 26 + 4,
-		content: D(e)
+		content: O(e)
 	}));
-	return p`
+	return m`
     <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor
-            @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
-      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${R(g.interactive)}
-           aria-labelledby="${f}-desc" width=${b} height=${y}
+            @keydown=${(e) => n.dismiss(e) || _.escape(e)}>
+      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${V(_.interactive)}
+           aria-labelledby="${p}-desc" width=${b} height=${y}
            ${s({
 		height: `${y}px`,
-		...M(f)
+		...U(p)
 	})}
-           tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
-        <desc id="${f}-desc">${r}</desc>
-        <defs>${P(f)}</defs>
-        ${a == null ? l : _`
+           tabindex="0" @keydown=${k.keydown} @focus=${k.focus} @blur=${k.blur}>
+        <desc id="${p}-desc">${r}</desc>
+        <defs>${G(p)}</defs>
+        ${a == null ? l : v`
           <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(a) + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">
-            ${o ?? `norm ${v(a)}`}
+            ${o ?? `norm ${u(a)}`}
           </text>
         `}
         ${i.map((e, t) => {
-		let r = t * 26 + 4, o = a != null && e.value > a, l = T(e.value), f = g.of(m[t], e.label, `${e.label}: ${v(e.value)}${c ? ` ${c}` : ""}`);
-		return _`
+		let r = t * 26 + 4, o = a != null && e.value > a, l = T(e.value), p = _.of(g[t], e.label, `${e.label}: ${u(e.value)}${c ? ` ${c}` : ""}`);
+		return v`
             <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
-               @mousemove=${(e) => n.showTooltip(e, D(t))}
+               @mousemove=${(e) => n.showTooltip(e, O(t))}
                @mouseleave=${() => n.hideTooltip()}>
               <!-- Hit area across the whole row, so the tooltip doesn't flicker between bars. -->
               <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 ${f.state}"
-                    ${s(z(t, i.length))}
+              <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, l)} height=${16}
-                    fill=${o ? d : u}
-                    data-mark-id=${f.markId} role=${f.role} tabindex=${f.tabIndex}
-                    aria-pressed=${f.pressed} aria-label=${f.label}
-                    @click=${f.click} @keydown=${f.keydown} />
+                    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 + l + 6} y=${r + 16 - 3} font-weight="700"
                     class="lintje-chart__data-label ${a == null ? "" : "lintje-chart__data-label--halo"}">
-                ${v(e.value)}${c ? ` ${c}` : ""}
+                ${u(e.value)}${c ? ` ${c}` : ""}
               </text>
             </g>
           `;
 	})}
       </svg>
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </figure>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/target-progress-chart/target-progress-chart.ts
-function me(e, t) {
-	let { controller: n, description: r } = t, { rows: i, target: a = 100 } = e, o = n.id, l = fe(i.length);
+function he(e, t) {
+	let { controller: n, description: r } = t, { rows: i, target: a = 100 } = e, o = n.id, c = pe(i.length);
 	n.measure({
 		width: !0,
-		height: l
+		height: c
 	});
-	let u = n.width, d = G(i.map((e) => e.label), u, { fontFamily: n.fontFamily }), { labelEnd: f, barStart: m } = d, g = (e) => Math.max(40, u - m - 70) * e / 110, v = m + g(a), y = (e) => e >= a ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
+	let l = n.width, u = D(i.map((e) => e.label), l, { fontFamily: n.fontFamily }), { labelEnd: d, barStart: f } = u, p = (e) => Math.max(40, l - f - 70) * e / 110, _ = f + p(a), y = (e) => e >= a ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
 		title: i[e].label,
 		rows: [{
 			label: "Voortgang",
-			value: c(i[e].value),
+			value: g(i[e].value),
 			color: y(i[e].value)
 		}, {
 			label: "Doel",
-			value: c(a),
+			value: g(a),
 			color: "var(--color-chart-emphasis)"
 		}]
-	}), x = Z(n, i.length, (e) => ({
-		x: m + g(i[e].value),
+	}), x = re(n, i.length, (e) => ({
+		x: f + p(i[e].value),
 		y: e * 26 + 4,
 		content: b(e)
 	}));
-	return p`
+	return m`
     <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor @keydown=${(e) => n.dismiss(e)}>
-      <svg viewBox="0 0 ${u} ${l}" class="lintje-chart__svg" role="img"
-           aria-labelledby="${o}-desc" width=${u} height=${l} ${s({ height: `${l}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="${o}-desc">${r}</desc>
         ${i.map((e, t) => {
-		let r = t * 26 + 4, o = g(e.value), l = y(e.value), p = m + o + 46 > u, h = e.value >= a ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-		return _`
+		let r = t * 26 + 4, o = p(e.value), c = y(e.value), m = f + o + 46 > l, h = e.value >= a ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return v`
             <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=${u} height=${26} fill="transparent" />
-              <text x=${f} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${d.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${s(z(t, i.length))}
-                    x=${m} y=${r} width=${Math.max(0, o)} height=${16} fill=${l} />
-              <text x=${p ? m + o - 6 : m + o + 6} y=${r + 16 - 3}
-                    text-anchor=${p ? "end" : "start"}
-                    class="lintje-chart__data-label ${p ? h : ""}" font-weight="700">${c(e.value)}</text>
+              <rect x=${0} y=${r - 5} width=${l} height=${26} fill="transparent" />
+              <text x=${d} 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=${f} y=${r} width=${Math.max(0, o)} height=${16} fill=${c} />
+              <text x=${m ? f + o - 6 : f + o + 6} y=${r + 16 - 3}
+                    text-anchor=${m ? "end" : "start"}
+                    class="lintje-chart__data-label ${m ? h : ""}" font-weight="700">${g(e.value)}</text>
             </g>
           `;
 	})}
-        <line x1=${v} x2=${v} y1=${0} y2=${i.length * 26 + 2}
+        <line x1=${_} x2=${_} y1=${0} y2=${i.length * 26 + 2}
               stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-        <text x=${v + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">norm ${a}</text>
+        <text x=${_ + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">norm ${a}</text>
       </svg>
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </figure>
   `;
 }
 //#endregion
+//#region src/components/shared/charts/shared/layer-motion.ts
+var ge = /* @__PURE__ */ new WeakMap();
+function _e(e, t) {
+	return e.duration > 0 ? Math.min(1, (t - e.start) / e.duration) : 1;
+}
+function ve(e, t) {
+	let n = _e(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 ye(e, t, n) {
+	let r = performance.now(), i = ge.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 ge.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 : ve(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 = _e(t, performance.now()) >= 1;
+				e.requestUpdate(), r || (t.frame = requestAnimationFrame(n));
+			};
+			t.frame = requestAnimationFrame(n);
+		}
+	}
+	return ve(i, r);
+}
+function be(e) {
+	return ge.get(e);
+}
+//#endregion
 //#region src/components/shared/charts/grouped-bar-chart/grouped-bar-chart.ts
-function he(e, t) {
-	let { controller: n, description: r } = t, { labels: i, axisTitle: a, small: o = !1 } = e, c = n.id;
+function xe(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 ?? (o ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let u = e.series.map((e) => ({
+	let p = e.series.map((e, t) => ({
 		...e,
-		color: F(e.color)
-	})), f = u.filter((e) => !n.hiddenSeries.includes(e.label)), g = le(t, f.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = K(Math.max(...f.flatMap((e) => e.values), 1)), x = N(b, n.width, { fontFamily: n.fontFamily }), S = q(t, { left: x.width }), C = S.height - S.bottom, w = k(0, i.length, S).width / Math.max(1, f.length), T = f.every((e) => e.values.every((e) => d(m(e, w), w - 2))), E = u.map((e, t) => ({
+		color: z(e.color) ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
+		hidden: n.hiddenSeries.includes(e.label)
+	})), g = p.filter((e) => !e.hidden), _ = de(t, g.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = T(Math.max(...p.flatMap((e) => e.values), 1)), x = k(b, n.width, { fontFamily: n.fontFamily }), S = te(t, { left: x.width }), C = S.height - S.bottom, w = q(0, i.length, S).width / Math.max(1, g.length), E = ye(n, p.map((e) => e.label).join("\0"), p.map((e) => +!e.hidden)), D = be(n), A = q(0, i.length, S).width / Math.max(1, E.reduce((e, t) => e + t, 0)), j = E.map((e, t) => E.slice(0, t).reduce((e, t) => e + t, 0) * A), M = g.every((e) => e.values.every((e) => f(c(e, w), w - 2))), N = p.map((e) => ({
 		label: e.label,
-		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
+		color: e.color,
 		shape: "square",
-		hidden: n.hiddenSeries.includes(e.label)
-	})), D = (e, t) => E[u.indexOf(e)]?.color ?? ue[t], A = (e) => ({
+		hidden: e.hidden,
+		fixed: p.length < 2
+	})), P = (e) => ({
 		title: i[e],
-		rows: f.map((t, n) => ({
+		rows: g.map((t) => ({
 			label: t.label,
-			value: v(t.values[e]),
-			color: D(t, n)
+			value: u(t.values[e]),
+			color: t.color
 		}))
-	}), j = Z(n, i.length, (e) => ({
-		x: k(e, i.length, S).center,
-		y: O(Math.max(0, ...f.map((t) => t.values[e])), y, S),
-		content: A(e)
-	})), M = i.map((e, t) => {
-		let r = k(t, i.length, S);
-		return _`
+	}), I = re(n, i.length, (e) => ({
+		x: q(e, i.length, S).center,
+		y: O(Math.max(0, ...g.map((t) => t.values[e])), y, S),
+		content: P(e)
+	})), L = i.map((e, t) => {
+		let r = q(t, i.length, S);
+		return v`
       <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
-         ${s(z(t, i.length))}
-         @mousemove=${(e) => n.showTooltip(e, A(t))}
+         ${s(B(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, P(t))}
          @mouseleave=${() => n.hideTooltip()}>
-        ${f.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}: ${v(a)}`);
-			return _`
+        ${p.map((n, i) => {
+			let a = n.values[t], o = O(a, y, S), s = r.x + j[i], d = Math.max(0, E[i] * A - 2), f = n.hidden ? void 0 : _.of(n.links?.[t], `${e} · ${n.label}`, `${e}, ${n.label}: ${u(a)}`);
+			return v`
             <g>
-              <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">${m(a, w)}</text>` : l}
+              <rect class="lintje-chart__bar lintje-chart__mark ${f?.state ?? ""}"
+                    x=${s} y=${o} width=${d}
+                    height=${Math.max(0, C - o)} fill=${n.color}
+                    data-mark-id=${f?.markId ?? l} role=${f?.role ?? l}
+                    tabindex=${f?.tabIndex ?? l} aria-pressed=${f?.pressed ?? l}
+                    aria-label=${f?.label ?? l} aria-hidden=${f ? l : "true"}
+                    @click=${f?.click ?? l} @keydown=${f?.keydown ?? l} />
+              <!-- Every label keeps its node and fades, so one that fits after a switch does not
+                   draw in again. -->
+              <g class="lintje-chart__series ${!n.hidden && M ? "" : "is-off"}">
+                <text x=${s + d / 2} y=${o - 4} text-anchor="middle"
+                      class="lintje-chart__data-label">${c(a, w)}</text>
+              </g>
             </g>
           `;
 		})}
       </g>
     `;
 	});
-	return p`
+	return m`
     <div class="lintje-chart-wrap ${o ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
-      ${ee({
-		items: E,
+         @keydown=${(e) => n.dismiss(e) || _.escape(e)}>
+      ${F({
+		items: N,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
-		id: c,
+		id: d,
 		ticks: b,
 		max: y,
 		area: S,
@@ -560,19 +607,19 @@ function he(e, t) {
 		formatTick: x.format,
 		xLabels: i.map((e, t) => ({
 			label: e,
-			x: k(t, i.length, S).center
+			x: q(t, i.length, S).center
 		})),
-		interactive: g.interactive,
-		keys: j
-	}, M)}
+		interactive: _.interactive,
+		keys: I
+	}, v`<g ${h(D.attach)}>${L}</g>`)}
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/tints.ts
-var ge = [
+var Se = [
 	[1],
 	[1, 4],
 	[
@@ -594,14 +641,14 @@ var ge = [
 		5
 	]
 ];
-function _e(e, t) {
+function Ce(e, t) {
 	if (e < 1) return [];
-	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})`);
+	let n = Se[Math.min(e, Se.length) - 1];
+	return _(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 ve = /* @__PURE__ */ new Set([
+var we = /* @__PURE__ */ new Set([
 	"sky-blue",
 	"red",
 	"green",
@@ -614,17 +661,19 @@ var ve = /* @__PURE__ */ new Set([
 	"dark-blue",
 	"moss-green"
 ]);
-function ye(e, t) {
-	let { controller: n, description: r } = t, { labels: i, axisTitle: a, normalized: o = !1, totalOnTop: u = !0, small: f = !1 } = e, g = n.id;
+function Te(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, normalized: o = !1, totalOnTop: d = !0, small: p = !1 } = e, _ = n.id;
 	n.measure({
 		width: !0,
-		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (p ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let y = e.series.map((e) => ({
+	let y = e.series.map((e, t) => ({
 		...e,
-		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 ? {
+		j: t,
+		color: z(e.color),
+		hidden: n.hiddenSeries.includes(e.label)
+	})), b = y.filter((e) => !e.hidden), x = de(t, b.flatMap((e) => e.links ?? [])), S = i.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), C = i.map((e, t) => b.reduce((e, n) => e + n.values[t], 0)), w = (e, t) => e / (S[t] || 1) * 100, E = ye(n, y.map((e) => e.label).join("\0"), y.map((e) => +!e.hidden)), D = be(n), { max: A, ticks: j } = o ? {
 		max: 100,
 		ticks: [
 			0,
@@ -633,29 +682,31 @@ function ye(e, t) {
 			75,
 			100
 		]
-	} : K(Math.max(...x, 1)), w = N(C, n.width, { fontFamily: n.fontFamily }), T = q(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: A } = k(0, i.length, T), j = u && !o && x.every((e) => d(m(e, A), A - 4)), M = _e(y.length), P = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], I = (t) => {
+	} : T(Math.max(...S, 1)), M = k(j, n.width, { fontFamily: n.fontFamily }), N = te(t, { left: M.width }), P = N.height - N.bottom, { width: I, bandWidth: L } = q(0, i.length, N), R = d && !o, V = R && C.every((e) => f(c(e, L), L - 4)), U = Ce(y.length), W = (e, t) => e.color ?? U[Math.min(t, U.length - 1)], G = (t) => {
 		let n = e.series[t].color;
-		return (n == null ? t === 0 : ve.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-	}, L = (e) => ({
+		return (n == null ? t === 0 : we.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+	}, K = (e) => ({
 		title: i[e],
-		rows: y.map((t, n) => ({
+		rows: b.map((t) => ({
 			label: t.label,
-			value: o ? c(t.values[e] / x[e] * 100) : v(t.values[e]),
-			color: P(t, n)
+			value: o ? g(w(t.values[e], e)) : u(t.values[e]),
+			color: W(t, t.j)
 		}))
-	}), R = Z(n, i.length, (e) => ({
-		x: k(e, i.length, T).center,
-		y: O(o ? S : x[e], S, T),
-		content: L(e)
-	})), B = y.map((e, t) => ({
+	}), J = re(n, i.length, (e) => ({
+		x: q(e, i.length, N).center,
+		y: O(o ? w(C[e], e) : C[e], A, N),
+		content: K(e)
+	})), Y = y.map((e) => ({
 		label: e.label,
-		color: P(e, t),
-		shape: "square"
-	})), V = i.map((e, t) => {
-		let r = k(t, i.length, T), a = 0, u = 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);
+		color: W(e, e.j),
+		shape: "square",
+		hidden: e.hidden,
+		fixed: y.length < 2
+	})), X = i.map((e, t) => {
+		let r = q(t, i.length, N), a = 0, d = y.map((e) => {
+			let { j: n } = e, r = e.values[t], i = o ? w(r, t) : r, s = O(a, A, N);
+			a += i * E[n];
+			let c = O(a, A, N);
 			return {
 				row: e,
 				j: n,
@@ -663,139 +714,110 @@ function ye(e, t) {
 				y1: c,
 				height: Math.max(0, s - c)
 			};
-		});
-		return _`
+		}), p = O(a, A, N);
+		return v`
       <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
-         ${s(z(t, i.length))}
-         @mousemove=${(e) => n.showTooltip(e, L(t))}
+         ${s(B(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, K(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=${r.x} y=${T.top} width=${r.width} height=${E - T.top} fill="transparent" />
+        <rect x=${r.x} y=${N.top} width=${r.width} height=${P - N.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 i = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${v(n.row.values[t])}`);
-			return _`
-            <rect class="lintje-chart__mark lintje-chart__segment ${i.state}"
+          ${d.map((n) => {
+			let i = n.row.hidden ? void 0 : x.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${u(n.row.values[t])}`);
+			return v`
+            <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} />
+                  fill=${W(n.row, n.j)}
+                  data-mark-id=${i?.markId ?? l} role=${i?.role ?? l}
+                  tabindex=${i?.tabIndex ?? l} aria-pressed=${i?.pressed ?? l}
+                  aria-label=${i?.label ?? l} aria-hidden=${i ? l : "true"}
+                  @click=${i?.click ?? l} @keydown=${i?.keydown ?? l} />
           `;
 		})}
         </g>
-        <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. -->
-        ${o ? u.map((e) => e.height >= 16 && d(c(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)}">${c(e.value)}</text>` : l) : l}
-        ${j ? _`<text x=${r.center} y=${O(x[t], S, T) - 5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${m(x[t], r.bandWidth)}</text>` : l}
+        <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. Each
+             keeps its node and fades, so a switch does not draw it in again. -->
+        ${o ? d.map((e) => v`
+                <g class="lintje-chart__series ${!e.row.hidden && e.height >= 16 && f(g(e.value), I - 4) ? "" : "is-off"}">
+                  <text x=${r.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
+                        class="lintje-chart__data-label ${G(e.j)}">${g(e.value)}</text>
+                </g>`) : l}
+        ${R ? v`<g class="lintje-chart__series ${V ? "" : "is-off"}">
+                <text x=${r.center} y=${p - 5} text-anchor="middle"
+                      class="lintje-chart__data-label" font-weight="700">${c(C[t], r.bandWidth)}</text>
+              </g>` : l}
       </g>
     `;
 	});
-	return p`
-    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
+	return m`
+    <div class="lintje-chart-wrap ${p ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${(e) => n.dismiss(e) || b.escape(e)}>
-      ${ee({ items: B })}
-      ${te({
+         @keydown=${(e) => n.dismiss(e) || x.escape(e)}>
+      ${F({
+		items: Y,
+		onToggle: (e) => n.toggleSeries(e)
+	})}
+      ${ee({
 		fontFamily: n.fontFamily,
-		id: g,
-		ticks: C,
-		max: S,
-		area: T,
+		id: _,
+		ticks: j,
+		max: A,
+		area: N,
 		axisTitle: a,
 		description: r,
-		formatTick: w.format,
+		formatTick: M.format,
 		xLabels: i.map((e, t) => ({
 			label: e,
-			x: k(t, i.length, T).center
+			x: q(t, i.length, N).center
 		})),
-		interactive: b.interactive,
-		keys: R
-	}, V)}
+		interactive: x.interactive,
+		keys: J
+	}, v`<g ${h(D.attach)}>${X}</g>`)}
       ${H(n)}
-      ${Q(n)}
+      ${ie(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, u = i.length;
+var Ee = "geen gegevens";
+function De(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 d = _e(e.series.length, e.color), m = e.series.map((e, t) => ({
+	let f = Ce(e.series.length, e.color), g = e.series.map((e, t) => ({
 		...e,
-		color: d[Math.min(t, d.length - 1)],
+		color: f[Math.min(t, f.length - 1)],
 		hidden: n.hiddenSeries.includes(e.label)
-	})), g = m.filter((e) => !e.hidden), y = we(n, m.map((e) => e.label).join("\0"), m.map((e) => +!e.hidden)), b = y.some((e, t) => e !== +!m[t].hidden), x = xe.get(n), S = m.map(() => i.map(() => !1)), C = m.map(() => i.map(() => 0)), w = m.map(() => i.map(() => 0)), T = i.map(() => !1);
+	})), _ = g.filter((e) => !e.hidden), y = ye(n, g.map((e) => e.label).join("\0"), g.map((e) => +!e.hidden)), b = y.some((e, t) => e !== +!g[t].hidden), x = be(n), S = g.map(() => i.map(() => !1)), C = g.map(() => i.map(() => 0)), w = g.map(() => i.map(() => 0)), D = i.map(() => !1);
 	i.forEach((e, t) => {
 		let n = 0;
-		m.forEach((e, r) => {
+		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);
+			D[t] || i == null ? D[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) => m.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 } = K(Math.max(...k, 1)), P = N(M, n.width, {
+	let j = y.some((e) => e > 0), M = 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: N, ticks: P } = T(Math.max(...M, 1)), I = k(P, n.width, {
 		fontFamily: n.fontFamily,
-		minimum: Math.ceil(f(i[0] ?? "", n.fontFamily) / 2)
-	}), F = q(t, { left: P.width }), I = F.height - F.bottom, L = (e) => A(e, u, F), R = (e) => O(e, j, F), z = (e) => {
+		minimum: Math.ceil(p(i[0] ?? "", n.fontFamily) / 2)
+	}), L = te(t, { left: I.width }), R = L.height - L.bottom, z = (e) => E(e, d, L), B = (e) => O(e, N, L), V = (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;
-	}, B = i.map((e, t) => {
+	}, U = i.map((e, t) => {
 		let n = 0;
-		for (let e of g) {
+		for (let e of _) {
 			let r = e.values[t];
 			if (r == null) return {
 				level: n,
@@ -805,123 +827,124 @@ function Te(e, t) {
 		}
 		return {
 			level: n,
-			complete: g.length > 0
+			complete: _.length > 0
 		};
-	}), V = m.map((e) => ({
+	}), W = g.map((e) => ({
 		label: e.label,
 		color: e.color,
 		shape: "square",
-		hidden: e.hidden
-	})), ne = Math.max(1, Math.ceil(u / 8)), U = i.map((e, t) => ({
+		hidden: e.hidden,
+		fixed: g.length < 2
+	})), G = Math.max(1, Math.ceil(d / 8)), K = i.map((e, t) => ({
 		label: e,
-		x: L(t),
+		x: z(t),
 		i: t
-	})).filter((e) => e.i % ne === 0), W = g.length < m.length ? "Totaal getoond" : "Totaal";
-	function G(e) {
+	})).filter((e) => e.i % G === 0), q = _.length < g.length ? "Totaal getoond" : "Totaal";
+	function J(e) {
 		return {
 			title: i[e],
-			rows: [...[...g].reverse().map((t) => ({
+			rows: [...[..._].reverse().map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? be : v(t.values[e]),
+				value: t.values[e] == null ? Ee : u(t.values[e]),
 				color: t.color
-			})), ...g.length > 0 ? [{
-				label: W,
-				value: B[e].complete ? v(B[e].level) : be,
+			})), ..._.length > 0 ? [{
+				label: q,
+				value: U[e].complete ? u(U[e].level) : Ee,
 				divider: !0
 			}] : []]
 		};
 	}
-	let J = Z(n, u, (e) => ({
-		x: L(e),
-		y: B[e].level > 0 ? R(B[e].level) : F.top,
-		content: G(e)
-	})), Y = (e) => {
+	let Y = re(n, d, (e) => ({
+		x: z(e),
+		y: U[e].level > 0 ? B(U[e].level) : L.top,
+		content: J(e)
+	})), X = (e) => {
 		let t = [0, 0];
-		return m.forEach((n, r) => {
+		return g.forEach((n, r) => {
 			S[r][e] && S[r][e + 1] && (t = [w[r][e], w[r][e + 1]]);
 		}), t;
-	}, re = (E ? z((e) => T[e]) : []).map((e) => {
-		let t = Math.max(0, e[0] - 1), r = Math.min(u - 1, e[e.length - 1] + 1), i = Array.from({ length: r - t }, (e, n) => t + n).map((e) => {
-			let [t, n] = Y(e);
+	}, ne = (j ? V((e) => D[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] = X(e);
 			return {
 				k: e,
-				left: R(t),
-				right: R(n)
+				left: B(t),
+				right: B(n)
 			};
-		}), a = L(t), o = L(r) - a, s = Math.min(I, ...i.flatMap((e) => [e.left, e.right]));
+		}), a = z(t), o = z(r) - a, s = Math.min(R, ...i.flatMap((e) => [e.left, e.right]));
 		return {
 			segments: i,
 			from: a,
 			width: o,
 			ceiling: s,
-			fits: f(be, n.fontFamily) + 8 <= o && s - F.top >= 20
+			fits: p(Ee, n.fontFamily) + 8 <= o && s - L.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}
+	}), Z = (e, t) => t.map((t) => `${z(t)},${B(e[t])}`), Q = [
+		ne.map((e) => v`
+        ${e.segments.map((e) => v`<polygon fill="url(#hatch-${c})"
+            points=${`${z(e.k)},${L.top} ${z(e.k + 1)},${L.top} ${z(e.k + 1)},${e.right} ${z(e.k)},${e.left}`} />`)}
+        ${e.fits ? v`<text x=${e.from + e.width / 2} y=${(L.top + e.ceiling) / 2 + 4}
                       text-anchor="middle"
-                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${be}</text>` : l}
+                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${Ee}</text>` : l}
       `),
-		_`<g class="lintje-chart__reveal" ${h(x.attach)}>
-      ${m.map((e, t) => {
-			let n = z((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(" ")} />`)}
+		v`<g class="lintje-chart__reveal" ${h(x.attach)}>
+      ${g.map((e, t) => {
+			let n = V((e) => S[t][e]);
+			return v`<g>
+          ${n.map((n) => n.length === 1 ? v`<circle cx=${z(n[0])} cy=${B(w[t][n[0]])} r="2.5" fill=${e.color} />` : v`<polygon fill=${e.color}
+                      points=${[...Z(w[t], n), ...Z(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. -->
-      ${m.map((e, t) => z((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.map((e, t) => V((e) => S[t][e] && C[t][e] > 0).filter((e) => e.length > 1).map((e) => v`<polyline class="lintje-chart__segment" fill="none" points=${Z(C[t], e).join(" ")} />`))}
     </g>`,
-		n.hoverIndex != null && !b ? m.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])} />` : l) : l,
+		n.hoverIndex != null && !b ? g.map((e, t) => S[t][n.hoverIndex] ? v`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
+                          cx=${z(n.hoverIndex)} cy=${B(w[t][n.hoverIndex])} />` : l) : l,
 		i.map((e, t) => {
-			let r = D(F) / Math.max(1, u - 1);
-			return _`
-        <rect x=${L(t) - r / 2} y=${F.top} width=${r}
-              height=${I - F.top}
+			let r = A(L) / Math.max(1, d - 1);
+			return v`
+        <rect x=${z(t) - r / 2} y=${L.top} width=${r}
+              height=${R - L.top}
               fill="transparent"
-              @mousemove=${(e) => n.hoverAt(t, e, G(t))}
+              @mousemove=${(e) => n.hoverAt(t, e, J(t))}
               @mouseleave=${() => n.hoverAt(null)} />
       `;
 		})
 	];
-	return p`
+	return m`
     <div class="lintje-chart-wrap ${s ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({
-		items: V,
+      ${F({
+		items: W,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: c,
-		ticks: M,
-		max: j,
-		area: F,
-		formatTick: P.format,
+		ticks: P,
+		max: N,
+		area: L,
+		formatTick: I.format,
 		axisTitle: a ?? o,
-		xLabels: U,
+		xLabels: K,
 		description: r,
-		keys: J
-	}, $)}
+		keys: Y
+	}, Q)}
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/pie-chart/pie-chart.ts
-var Ee = 5, De = (e) => {
+var Oe = 5, ke = (e) => {
 	let t = e.label.toLowerCase();
 	return t.startsWith("overig") || t === "rest";
-}, 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) {
+}, Ae = (e) => !e.remainder && !ke(e);
+function je(e) {
+	let t = e.filter(Ae).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && ke(e)), r = e.filter((e) => e.remainder);
+	if (t.length > Oe) {
 		let e = t.splice(4).reduce((e, t) => e + t.value, 0);
 		if (n.length > 0) {
 			let [t] = n;
@@ -941,22 +964,22 @@ function ke(e) {
 		...r
 	];
 }
-function Ae(e, t) {
-	let { controller: n, description: r } = t, { donut: i = !1, centerValue: a, centerLabel: o, legendTable: u = !0, labelHeader: d = "Categorie" } = e, f = n.id, m = ke(e.segments).map((e) => ({
+function Me(e, t) {
+	let { controller: n, description: r } = t, { donut: i = !1, centerValue: a, centerLabel: o, legendTable: c = !0, labelHeader: d = "Categorie" } = e, f = n.id, p = je(e.segments).map((e) => ({
 		...e,
-		color: F(e.color)
-	})), g = m.map((e) => e.href ? {
+		color: z(e.color)
+	})), _ = p.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), y = le(t, g), b = (e) => {
-		let t = y.of(g[e], m[e].label, m[e].label).state;
+	} : null), y = de(t, _), b = (e) => {
+		let t = y.of(_[e], p[e].label, p[e].label).state;
 		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
 	}, x = !!t.expanded;
 	n.measure(x ? {
 		width: !0,
 		height: "--chart-h-main"
 	} : {});
-	let S = x ? Math.max(240, Math.min(560, n.height - 24)) : e.size ?? 200, C = m.reduce((e, t) => e + t.value, 0), w = S / 2, T = i ? w * .62 : 0, E = _e(m.filter(Oe).length, e.color), D = -1, O = m.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 = m.map((e, t) => {
+	let S = x ? Math.max(240, Math.min(560, n.height - 24)) : e.size ?? 200, C = p.reduce((e, t) => e + t.value, 0), w = S / 2, T = i ? w * .62 : 0, E = Ce(p.filter(Ae).length, e.color), D = -1, O = p.map((e) => (Ae(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : ke(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = p.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);
@@ -969,20 +992,20 @@ function Ae(e, t) {
 			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${o} 1 ${u} ${d} Z`,
 			color: O[t]
 		};
-	}), j = n.hoverSegment, N = j == null ? void 0 : A[j], I = (e) => {
+	}), j = n.hoverSegment, M = j == null ? void 0 : A[j], N = (e) => {
 		n.hoverSegment = e, n.requestUpdate();
 	};
-	return p`
+	return m`
     <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${h(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="${f}-desc" ${s(M(f))}>
+      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${V(y.interactive)}
+           class="lintje-pie-chart__svg" aria-labelledby="${f}-desc" ${s(U(f))}>
         <desc id="${f}-desc">${r}</desc>
-        <defs>${P(f)}</defs>
+        <defs>${G(f)}</defs>
         ${A.map(({ segment: e, i: t, d: r, color: i }) => {
-		let a = y.of(g[t], e.label, `${e.label}: ${v(e.value)} · ${c(e.value / C * 100)}`);
-		return _`
+		let a = y.of(_[t], e.label, `${e.label}: ${u(e.value)} · ${g(e.value / C * 100)}`);
+		return v`
           <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` })}
@@ -990,11 +1013,11 @@ function Ae(e, t) {
                 aria-pressed=${a.pressed} aria-label=${a.label}
                 @click=${a.click} @keydown=${a.keydown}
                 @mousemove=${(r) => {
-			I(t), n.showTooltip(r, {
+			N(t), n.showTooltip(r, {
 				title: e.label,
 				rows: [{
 					label: "Aantal",
-					value: `${v(e.value)} · ${c(e.value / C * 100)}`,
+					value: `${u(e.value)} · ${g(e.value / C * 100)}`,
 					color: i
 				}]
 			});
@@ -1006,15 +1029,15 @@ function Ae(e, t) {
 	})}
         <!-- 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). -->
-        ${N ? _`<path d=${N.d} fill=${N.color} class="lintje-pie-chart__lift lintje-chart__segment"
+        ${M ? v`<path d=${M.d} fill=${M.color} class="lintje-pie-chart__lift lintje-chart__segment"
                       ${s({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : l}
-        ${i && a ? _`
+        ${i && a ? v`
           <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>` : l}
+          ${o ? v`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${o}</text>` : l}
         ` : l}
       </svg>
 
-      ${u ? p`
+      ${c ? m`
         <table class="lintje-pie-chart__table">
           <caption class="visually-hidden">Legenda: ${r}</caption>
           <thead>
@@ -1025,21 +1048,21 @@ function Ae(e, t) {
             </tr>
           </thead>
           <tbody>
-            ${m.map((e, t) => p`
+            ${p.map((e, t) => m`
               <tr class="lintje-pie-chart__row ${j === t ? "is-hovered" : ""} ${b(t)}"
-                  @mouseenter=${() => I(t)} @mouseleave=${() => I(null)}>
+                  @mouseenter=${() => N(t)} @mouseleave=${() => N(null)}>
                 <th scope="row" class="lintje-pie-chart__label">
                   <span class="lintje-pie-chart__marker" ${s({ background: O[t] })}></span>${e.label}
                 </th>
-                <td class="lintje-pie-chart__value">${v(e.value)}</td>
-                <td class="lintje-pie-chart__value">${c(e.value / C * 100)}</td>
+                <td class="lintje-pie-chart__value">${u(e.value)}</td>
+                <td class="lintje-pie-chart__value">${g(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">${v(C)}</td>
+              <td class="lintje-pie-chart__total">${u(C)}</td>
               <td class="lintje-pie-chart__total"></td>
             </tr>
           </tfoot>
@@ -1051,189 +1074,202 @@ function Ae(e, t) {
 }
 //#endregion
 //#region src/components/shared/charts/dual-axis-chart/dual-axis-chart.ts
-function je(e, t) {
-	let { controller: n, description: r } = t, { labels: i, threshold: a, thresholdLabel: o, small: c = !1, pendingHours: u = 0 } = e, d = {
+function Ne(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: F(e.left.color)
-	}, f = {
+		color: z(e.left.color)
+	}, p = {
 		...e.right,
-		color: F(e.right.color)
-	}, m = n.id;
+		color: z(e.right.color)
+	}, g = n.id;
 	n.measure({
 		width: !0,
 		height: t.height ?? (c ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let g = d.color ?? "var(--color-chart-default)", y = f.color ?? "var(--color-chart-dark-yellow)", b = K(Math.max(...d.values.filter((e) => e != null), 1)), x = K(Math.max(...f.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 = q(t, {
+	let _ = f.color ?? "var(--color-chart-default)", y = p.color ?? "var(--color-chart-dark-yellow)", b = T(Math.max(...f.values.filter((e) => e != null), 1)), x = T(Math.max(...p.values.filter((e) => e != null), a ?? 0, 1)), S = k(b.ticks, n.width, { fontFamily: n.fontFamily }), C = k(x.ticks, n.width, { fontFamily: n.fontFamily }), w = te(t, {
 		left: S.width,
 		right: C.width
-	}), T = w.height - w.bottom, E = [
+	}), E = w.height - w.bottom, D = n.hiddenSeries.includes("left"), A = n.hiddenSeries.includes("right"), j = n.hiddenSeries.includes(M), N = (e) => `lintje-chart__series ${e ? "is-off" : ""}`, P = [
 		{
-			label: `${d.label} (linkeras)`,
-			color: g,
-			shape: "square"
+			key: "left",
+			label: `${f.label} (linkeras)`,
+			color: _,
+			shape: "square",
+			hidden: D
 		},
 		{
-			label: `${f.label} (rechteras)`,
+			key: "right",
+			label: `${p.label} (rechteras)`,
 			color: y,
-			shape: "line"
+			shape: "line",
+			hidden: A
 		},
 		...a == null ? [] : [{
+			key: M,
 			label: o ?? `Norm ${a}`,
 			color: "var(--color-chart-emphasis)",
-			shape: "dashed"
+			shape: "dashed",
+			hidden: j
 		}]
-	], D = Math.max(1, Math.ceil(i.length / 8)), A = n.hoverIndex, j = V(y), M = [[]];
-	f.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)}`);
+	], I = Math.max(1, Math.ceil(i.length / 8)), R = n.hoverIndex, ee = L(y), U = [[]];
+	p.values.forEach((e, t) => {
+		e == null ? U[U.length - 1].length && U.push([]) : U[U.length - 1].push(`${q(t, i.length, w).center},${O(e, x.max, w)}`);
 	});
-	let P = (e, t) => e == null ? "geen gegevens" : `${v(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
+	let W = (e, t) => e == null ? "geen gegevens" : `${u(e)}${t ? ` ${t}` : ""}`, G = (e) => ({
 		title: i[e],
-		rows: [{
-			label: d.label,
-			value: P(d.values[e], d.unit),
-			color: g
-		}, {
+		rows: [...D ? [] : [{
 			label: f.label,
-			value: P(f.values[e], f.unit),
+			value: W(f.values[e], f.unit),
+			color: _
+		}], ...A ? [] : [{
+			label: p.label,
+			value: W(p.values[e], p.unit),
 			color: y
-		}]
-	}), L = Z(n, i.length, (e) => ({
-		x: k(e, i.length, w).center,
-		y: Math.min(d.values[e] == null ? T : O(d.values[e], b.max, w), f.values[e] == null ? T : O(f.values[e], x.max, w)),
-		content: I(e)
+		}]]
+	}), K = re(n, i.length, (e) => ({
+		x: q(e, i.length, w).center,
+		y: Math.min(D || f.values[e] == null ? E : O(f.values[e], b.max, w), A || p.values[e] == null ? E : O(p.values[e], x.max, w)),
+		content: G(e)
 	}));
-	return p`
+	return m`
     <div class="lintje-chart-wrap ${c ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({ items: E })}
+      ${F({
+		items: P,
+		onToggle: (e) => n.toggleSeries(e)
+	})}
       <figure class="lintje-chart">
-        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${R(!1)}
-             aria-labelledby="${m}-desc" width=${w.width} height=${w.height}
-             tabindex="0" @keydown=${L.keydown} @focus=${L.focus} @blur=${L.blur}>
-          <desc id="${m}-desc">${r}</desc>
+        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${V(!1)}
+             aria-labelledby="${g}-desc" width=${w.width} height=${w.height}
+             tabindex="0" @keydown=${K.keydown} @focus=${K.focus} @blur=${K.blur}>
+          <desc id="${g}-desc">${r}</desc>
           <defs>
-            <pattern id="hatch-${m}" 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. -->
-          ${u > 0 ? (() => {
-		let e = k(i.length - u, i.length, w);
-		return _`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
+          ${d > 0 ? (() => {
+		let e = q(i.length - d, i.length, w);
+		return v`<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-${m})" />`;
+                             height=${E - w.top} fill="url(#hatch-${g})" />`;
 	})() : l}
 
           ${b.ticks.map((e) => {
 		let t = O(e, b.max, w), n = e === 0;
-		return _`
+		return v`
               <g>
                 <line x1=${w.left} x2=${w.width - w.right} y1=${t} y2=${t}
                       stroke=${n ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
                       stroke-width=${n ? 1.5 : 1} />
-                <text x=${w.left - 8} y=${t + 4} text-anchor="end" class="lintje-chart__axis-label" fill=${g}>
+                <text x=${w.left - 8} y=${t + 4} text-anchor="end" class="lintje-chart__axis-label" fill=${_}>
                   ${S.format(e)}
                 </text>
               </g>
             `;
 	})}
-          ${x.ticks.map((e) => _`
+          ${x.ticks.map((e) => v`
             <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>
           `)}
 
           <!-- 2 px axis lines in the color of their series -->
-          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${g} stroke-width="2" />
-          <line x1=${w.width - w.right} x2=${w.width - w.right} y1=${w.top} y2=${T}
+          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${E} stroke=${_} stroke-width="2" />
+          <line x1=${w.width - w.right} x2=${w.width - w.right} y1=${w.top} y2=${E}
                 stroke=${y} stroke-width="2" />
 
           <!-- Bars grow in one after another; the hit areas below sit on top, so hover comes
                from hoverIndex rather than :hover. -->
-          ${d.values.map((e, t) => {
-		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-${m})" />`;
+          <g class=${N(D)}>
+          ${f.values.map((e, t) => {
+		let n = q(t, i.length, w);
+		if (e == null) return v`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
+                               height=${Math.max(0, E - 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(z(t, i.length))}>
+		return v`
+              <g class="lintje-chart__bar-group ${R === 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=${g} />
+                      height=${Math.max(0, E - r)} fill=${_} />
               </g>
             `;
 	})}
+          </g>
 
-          ${a == null ? l : _`<line x1=${w.left} x2=${w.width - w.right}
+          ${a == null ? l : v`<line class=${N(j)} 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=${N(A)}>
           <g class="lintje-chart__reveal">
-            ${M.filter((e) => e.length > 0).map((e) => {
+            ${U.filter((e) => e.length > 0).map((e) => {
 		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} />` : l}
-                  ${e.length === 1 ? _`<circle cx=${n} cy=${r} r="2.5" fill=${y} />` : _`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
+		return v`
+                  ${ee && e.length > 1 ? v`<polyline class="lintje-chart__line lintje-chart__line--casing"
+                                    stroke=${ee} points=${t} />` : l}
+                  ${e.length === 1 ? v`<circle cx=${n} cy=${r} r="2.5" fill=${y} />` : v`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
                 `;
 	})}
           </g>
+          </g>
 
-          ${i.filter((e, t) => t % D === 0).map((e, t) => _`
-            <text x=${k(t * D, i.length, w).center} y=${w.height - 8}
+          ${i.filter((e, t) => t % I === 0).map((e, t) => v`
+            <text x=${q(t * I, 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. -->
-          ${A != null && f.values[A] != null ? _`<circle class="lintje-chart__hover-point" r="4" fill=${y}
-                          cx=${k(A, i.length, w).center}
-                          cy=${O(f.values[A], x.max, w)} />` : l}
+          ${R != null && !A && p.values[R] != null ? v`<circle class="lintje-chart__hover-point" r="4" fill=${y}
+                          cx=${q(R, i.length, w).center}
+                          cy=${O(p.values[R], x.max, w)} />` : l}
           ${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}
+		let r = q(t, i.length, w);
+		return v`
+              <rect x=${r.x} y=${w.top} width=${r.bandWidth} height=${E - w.top}
                     fill="transparent"
-                    @mousemove=${(e) => n.hoverAt(t, e, I(t))}
+                    @mousemove=${(e) => n.hoverAt(t, e, G(t))}
                     @mouseleave=${() => n.hoverAt(null)} />
             `;
 	})}
         </svg>
       </figure>
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/scatter-chart/scatter-chart.ts
-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) {
+var Pe = 4.5, Fe = 5.5, Ie = 44, Le = 8, Re = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
+function ze(e, t, n, r) {
 	let i = 5.5, a = [];
 	for (let [o, s] of e.entries()) {
 		if (!t.includes(s.label)) continue;
-		let c = f(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, p = [{
+		let c = p(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, f = [{
 			anchor: "end",
-			x: s.x - Fe,
-			left: s.x - Fe - c
+			x: s.x - Le,
+			left: s.x - Le - c
 		}, {
 			anchor: "start",
-			x: s.x + Fe,
-			left: s.x + Fe
+			x: s.x + Le,
+			left: s.x + Le
 		}].map((e) => ({
 			...e,
 			right: e.left + c,
 			top: u,
 			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, {
+		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !Re(t, e)) && e.every((e, n) => n === o || !Re(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
 		});
@@ -1245,51 +1281,53 @@ function Le(e, t, n, r) {
 		anchor: r
 	}));
 }
-var Re = (e) => e.charAt(0).toUpperCase() + e.slice(1), ze = (e, t) => `${v(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;
+var Be = (e) => e.charAt(0).toUpperCase() + e.slice(1), Ve = (e, t) => `${u(e)}${t ? ` ${t}` : ""}`;
+function He(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(K)), n = j.filter((e) => !t.has(e)), r = 0;
 	return e.series.map((e) => {
-		let t = I(e.color) ? e.color : n[r++ % n.length];
+		let t = K(e.color) ? e.color : n[r++ % n.length];
 		return {
-			color: F(e.color ?? t),
+			color: z(e.color ?? t),
 			symbol: t
 		};
 	});
 }
-function Ve(e, n) {
-	let { controller: r, description: i } = n, { axisTitle: a, unit: o, xTitle: c, xUnit: d, threshold: f, thresholdLabel: m, small: g = !1 } = e, y = r.id;
+function Ue(e, n) {
+	let { controller: r, description: i } = n, { axisTitle: a, unit: o, xTitle: c, xUnit: f, threshold: p, thresholdLabel: g, small: _ = !1 } = e, y = r.id;
 	r.measure({
 		width: !0,
-		height: n.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: n.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!n.expanded && !n.mobile
 	});
-	let b = Be(e), x = e.series.map((e, t) => ({
+	let b = He(e), x = e.series.map((e, t) => ({
 		...e,
 		...b[t]
 	})), 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 = K(Math.max(...w.map(({ point: e }) => e.x), 1), n.mobile ? 3 : 6), k = K(Math.max(...w.map(({ point: e }) => e.y), f ?? 0, 1)), A = N(k.ticks, r.width, { fontFamily: r.fontFamily }), M = q(n, {
-		left: A.width,
-		bottom: Pe
-	}), P = (e) => M.left + D(M) * e / E.max, F = E.ticks.map((e, t) => ({
-		label: v(e),
-		x: P(e),
-		anchor: t === E.ticks.length - 1 ? "end" : "middle"
-	})), I = [...x.map((e) => ({
+	})).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)), E = new Map(w.map((e, t) => [e.key, t])), D = r.hiddenSeries.includes(M), j = T(Math.max(...C.map(({ point: e }) => e.x), 1), n.mobile ? 3 : 6), N = T(Math.max(...C.map(({ point: e }) => e.y), p ?? 0, 1)), P = k(N.ticks, r.width, { fontFamily: r.fontFamily }), I = te(n, {
+		left: P.width,
+		bottom: Ie
+	}), R = (e) => I.left + A(I) * e / j.max, z = j.ticks.map((e, t) => ({
+		label: u(e),
+		x: R(e),
+		anchor: t === j.ticks.length - 1 ? "end" : "middle"
+	})), V = [...x.map((e) => ({
 		label: e.label,
 		color: e.color,
 		shape: "point",
 		symbol: e.symbol,
-		hidden: S(e)
-	})), ...f == null ? [] : [{
-		label: m ?? "Norm",
+		hidden: S(e),
+		fixed: x.length < 2 && p == null
+	})), ...p == null ? [] : [{
+		key: M,
+		label: g ?? "Norm",
 		color: "var(--color-chart-emphasis)",
 		shape: "dashed",
-		fixed: !0
+		hidden: D
 	}]];
-	function L(e) {
+	function U(e) {
 		let { point: t, row: n } = w[e];
 		return {
 			title: t.label,
@@ -1301,61 +1339,63 @@ function Ve(e, n) {
 					symbol: n.symbol
 				},
 				{
-					label: Re(c),
-					value: ze(t.x, d)
+					label: Be(c),
+					value: Ve(t.x, f)
 				},
 				{
-					label: Re(a),
-					value: ze(t.y, o)
+					label: Be(a),
+					value: Ve(t.y, o)
 				}
 			]
 		};
 	}
-	let R = (e) => ({
-		x: P(e.x),
-		y: O(e.y, k.max, M)
-	}), B = (e) => R(w[e].point), ne = Z(r, w.length, (e) => ({
-		...B(e),
-		content: L(e)
-	})), U = w.map(({ point: e, row: t }) => e.href ? {
+	let W = (e) => ({
+		x: R(e.x),
+		y: O(e.y, N.max, I)
+	}), G = (e) => W(w[e].point), K = re(r, w.length, (e) => ({
+		...G(e),
+		content: U(e)
+	})), q = w.map(({ point: e, row: t }) => e.href ? {
 		id: e.id ?? `${t.label} · ${e.label}`,
 		href: e.href
-	} : null), W = le(n, U), G = w.map(({ point: e }, t) => W.of(U[t], e.label, re(L(t)))), J = Le(w.map((e, t) => ({
+	} : null), Y = de(n, q), X = w.map(({ point: e }, t) => Y.of(q[t], e.label, Q(U(t)))), ne = ze(w.map((e, t) => ({
 		label: e.point.label,
-		...B(t)
-	})), e.dataLabels ?? [], M, r.fontFamily), Y = f == null ? 0 : O(f, k.max, M), X = r.hoverIndex == null ? void 0 : w[r.hoverIndex], $ = (e) => {
+		...G(t)
+	})), e.dataLabels ?? [], I, r.fontFamily), Z = p == null ? 0 : O(p, N.max, I), $ = r.hoverIndex == null ? void 0 : w[r.hoverIndex], ae = (e) => {
 		let n = e.target.closest?.("[data-point]");
 		if (n) return Number(n.getAttribute("data-point"));
-		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;
+		let r = e.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? I.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 } = B(t), i = Math.hypot(n - o, r - s);
+			let { x: n, y: r } = G(t), i = Math.hypot(n - o, r - s);
 			i <= u && (l = t, u = i);
 		}), l;
-	}, 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 : G[t];
+	}, oe = (e) => {
+		let t = ae(e);
+		t == null ? (r.hoverIndex != null || r.tooltip) && r.hoverAt(null) : r.hoverAt(t, e, U(t));
+	}, se = (e) => {
+		let t = ae(e), n = t == null ? null : X[t];
 		n?.clickable && n.click !== l && n.click();
-	}, oe = X != null && G[r.hoverIndex]?.clickable, se = [f == null ? l : _`
-        <g class="lintje-chart__reference">
-          <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=${M.left + 6} y=${Y - 6}
-                class="lintje-chart__axis-label lintje-chart__axis-label--halo">
-            ${m ?? `norm ${ze(f, o)}`}
-          </text>
+	}, ce = $ != null && X[r.hoverIndex]?.clickable, le = [p == null ? l : v`
+        <g class="lintje-chart__series ${D ? "is-off" : ""}">
+          <g class="lintje-chart__reference">
+            <line x1=${I.left} x2=${I.width - I.right} y1=${Z} y2=${Z}
+                  stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
+            <text x=${I.left + 6} y=${Z - 6}
+                  class="lintje-chart__axis-label lintje-chart__axis-label--halo">
+              ${g ?? `norm ${Ve(p, o)}`}
+            </text>
+          </g>
         </g>
-      `, _`<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} />
+      `, v`<g @mousemove=${oe} @mouseleave=${() => r.hoverAt(null)} @click=${se}>
+      <rect class="lintje-chart__hit ${ce ? "is-clickable" : ""}"
+            x="0" y="0" width=${I.width} height=${I.height} />
       <g>
-        ${u(C, (e) => e.key, ({ point: e, row: t, key: n }, r) => {
-		let { x: i, y: a } = R(e), o = V(t.color), c = T.get(n), u = c == null ? void 0 : G[c];
-		return _`
-              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
-                    ${s(z(r, C.length))}
-                    d=${j(t.symbol, Me, i, a)} fill=${t.color}
+        ${d(C, (e) => e.key, ({ point: e, row: t, key: n }, r) => {
+		let { x: i, y: a } = W(e), o = L(t.color), c = E.get(n), u = c == null ? void 0 : X[c];
+		return v`
+              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${u?.state ?? "is-off"}"
+                    ${s(B(r, C.length))}
+                    d=${J(t.symbol, Pe, i, a)} fill=${t.color}
                     stroke=${o ?? l} stroke-width=${o ? 1 : l}
                     data-point=${c ?? l}
                     data-mark-id=${u?.markId ?? l} role=${u?.role ?? l}
@@ -1366,66 +1406,66 @@ function Ve(e, n) {
 	})}
       </g>
 
-      ${J.map((e) => _`
+      ${ne.map((e) => v`
           <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. -->
-      ${X ? (() => {
-		let { x: e, y: t } = B(r.hoverIndex), n = V(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} />` : l}
+      ${$ ? (() => {
+		let { x: e, y: t } = G(r.hoverIndex), n = L($.row.color), i = J($.row.symbol, Fe, e, t);
+		return v`
+            <path class="lintje-chart__hover-point" d=${i} fill=${$.row.color} />
+            ${n ? v`<path class="lintje-chart__hover-casing" d=${i} stroke=${n} />` : l}
           `;
 	})() : l}
     </g>`];
-	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+	return m`
+    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
          ${h(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || W.escape(e)}>
-      ${ee({
-		items: I,
+         @keydown=${(e) => r.dismiss(e) || Y.escape(e)}>
+      ${F({
+		items: V,
 		onToggle: (e) => r.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: r.fontFamily,
 		id: y,
-		ticks: k.ticks,
-		max: k.max,
-		area: M,
-		formatTick: A.format,
+		ticks: N.ticks,
+		max: N.max,
+		area: I,
+		formatTick: P.format,
 		axisTitle: a,
-		xLabels: F,
+		xLabels: z,
 		xTitle: c,
 		description: i,
-		interactive: W.interactive,
-		keys: ne
-	}, se)}
+		interactive: Y.interactive,
+		keys: K
+	}, le)}
       ${H(r)}
-      ${Q(r)}
+      ${ie(r)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/heatmap-chart/heatmap-classes.ts
-var He = [
+var We = [
 	"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)"
-], Ue = He.length, We = [
+], Ge = We.length, Ke = [
 	1,
 	2,
 	2.5,
 	5,
 	10
 ];
-function Ge(e, t) {
+function qe(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 We) {
+	for (let a of Ke) {
 		let o = a * n;
 		if (t && !Number.isInteger(o)) continue;
 		let s = Math.abs(Math.log(o / e));
@@ -1433,29 +1473,29 @@ function Ge(e, t) {
 	}
 	return r || (t ? 1 : n);
 }
-function Ke(e, t) {
+function Je(e, t) {
 	let n = Math.max(0, Math.min(10, -Math.floor(Math.log10(t)) + 1));
 	return Number(e.toFixed(n));
 }
-function qe(e) {
+function Ye(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 = 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);
+	let i = t.every(Number.isInteger), a = qe((r - n) / Ge, i), o = Math.floor(n / a) * a, s = [];
+	for (let e = 1; e < Ge; e += 1) {
+		let t = Je(o + e * a, a);
 		if (t > r) break;
 		s.push(t);
 	}
 	return s;
 }
-function Je(e, t, n = 0) {
-	let r = v(e, n), i = t?.trim() ?? "";
+function Xe(e, t, n = 0) {
+	let r = u(e, n), i = t?.trim() ?? "";
 	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
 }
-function Ye(e) {
+function Ze(e) {
 	let t = 0;
 	for (let n of e) {
 		let e = String(n), r = e.indexOf(".");
@@ -1463,13 +1503,13 @@ function Ye(e) {
 	}
 	return Math.min(t, 4);
 }
-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) => v(e, r);
+function Qe(e, t = {}) {
+	let n = (t.bounds?.length ? t.bounds.slice(0, Ge - 1) : null) ?? Ye(e), r = Ze(n), i = (e) => Xe(e, t.unit, r), a = (e) => u(e, r);
 	if (n.length === 0) {
-		let e = He.length - 1;
+		let e = We.length - 1;
 		return [{
 			limit: Infinity,
-			color: He[e],
+			color: We[e],
 			label: "alle waarden",
 			ramp: e
 		}];
@@ -1477,70 +1517,81 @@ function Xe(e, t = {}) {
 	return [
 		{
 			limit: n[0],
-			color: He[0],
+			color: We[0],
 			label: `< ${i(n[0])}`,
 			ramp: 0
 		},
 		...n.slice(1).map((e, t) => ({
 			limit: e,
-			color: He[t + 1],
+			color: We[t + 1],
 			label: `${a(n[t])}–${i(e)}`,
 			ramp: t + 1
 		})),
 		{
 			limit: Infinity,
-			color: He[n.length],
+			color: We[n.length],
 			label: `≥ ${i(n[n.length - 1])}`,
 			ramp: n.length
 		}
 	];
 }
-function Ze(e, t) {
+function $e(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 Qe(e, t, n) {
+function et(e, t, n) {
 	return Array.from({ length: n }, (n, r) => Array.from({ length: t }, (t, n) => e?.[n]?.[r]));
 }
-function $e(e) {
+function tt(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: Qe(e.values, t, n),
-		links: e.links ? Qe(e.links, t, n) : void 0
+		values: et(e.values, t, n),
+		links: e.links ? et(e.links, t, n) : void 0
 	};
 }
-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, u = a?.values ?? e.values, d = a ? a.links : e.links, f = a ? !0 : e.compact ?? !1, { unit: m } = e, g = le(t, (d ?? []).flat()), _ = Xe(u, {
+function nt(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, a = i ? tt(e) : void 0, o = a?.columnLabels ?? e.columnLabels, c = a?.rowLabels ?? e.rowLabels, d = a?.values ?? e.values, f = a ? a.links : e.links, p = a ? !0 : e.compact ?? !1, { unit: g } = e, _ = de(t, (f ?? []).flat()), v = Qe(d, {
 		bounds: e.bounds,
-		unit: m
-	}), y = (e) => Ze(_, e);
+		unit: g
+	}), y = (e) => $e(v, e);
 	n.measure({});
-	let b = n.selectedCell, x = n.dimmedClass;
-	return p`
+	let b = n.selectedCell, x = (e) => `class-${e}`, S = (e) => n.hiddenSeries.includes(x(v[e].ramp));
+	return m`
     <div class="lintje-heatmap" ${h(n.attach)} ?data-in-view=${n.inView}
-         data-tooltip-anchor @keydown=${g.escape}>
-      <table class="lintje-heatmap__grid ${f ? "is-compact" : ""}">
+         data-tooltip-anchor @keydown=${_.escape}>
+      ${F({
+		items: v.map((e) => ({
+			key: x(e.ramp),
+			label: e.label,
+			color: e.color,
+			shape: "square",
+			hidden: n.hiddenSeries.includes(x(e.ramp)),
+			fixed: v.length < 2
+		})),
+		onToggle: (e) => n.toggleSeries(e)
+	})}
+      <table class="lintje-heatmap__grid ${p ? "is-compact" : ""}">
         <caption class="visually-hidden">${r}</caption>
         <thead>
           <tr>
             <td></td>
-            ${o.map((e) => p`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
+            ${o.map((e) => m`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${c.map((e, t) => p`
+          ${c.map((e, t) => m`
             <tr>
               <th scope="row" class="lintje-heatmap__row-label" title=${e}>
                 <span class="lintje-heatmap__row-label-text">${e}</span>
               </th>
               ${o.map((r, i) => {
-		let a = u[t]?.[i];
-		if (a == null) return p`
+		let a = d[t]?.[i];
+		if (a == null) return m`
                     <td class="lintje-heatmap__slot">
                       <div class="lintje-heatmap__cell is-empty"
                            title="${e} · ${o[i]}: geen meting">
@@ -1548,35 +1599,35 @@ function et(e, t) {
                       </div>
                     </td>
                   `;
-		let l = y(a), h = g.of(d?.[t]?.[i], `${e} · ${o[i]}`), S = !h.clickable && b?.row === t && b?.column === i;
-		return p`
+		let l = y(a), h = _.of(f?.[t]?.[i], `${e} · ${o[i]}`), x = !h.clickable && b?.row === t && b?.column === i;
+		return m`
                   <td class="lintje-heatmap__slot">
                     <button
                       type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${_[l].ramp} ${S ? "is-selected" : ""} ${x != null && x !== l ? "is-dimmed" : ""} ${h.state}"
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[l].ramp} ${x ? "is-selected" : ""} ${S(l) ? "is-dimmed" : ""} ${h.state}"
                       data-mark-id=${h.markId}
                       ${s({
-			"--lintje-cell": _[l].color,
-			...ne(i, t, o.length, c.length)
+			"--lintje-cell": v[l].color,
+			...W(i, t, o.length, c.length)
 		})}
                       @click=${h.clickable ? h.click : () => {
-			n.selectedCell = S ? null : {
+			n.selectedCell = x ? null : {
 				row: t,
 				column: i
 			}, n.requestUpdate();
 		}}
-                      @mousemove=${f ? void 0 : (t) => n.showTooltip(t, {
+                      @mousemove=${p ? void 0 : (t) => n.showTooltip(t, {
 			title: `${e} · ${o[i]}`,
 			rows: [{
-				label: `klasse ${_[l].label}`,
-				value: Je(a, m),
-				color: _[l].color
+				label: `klasse ${v[l].label}`,
+				value: Xe(a, g),
+				color: v[l].color
 			}]
 		})}
-                      @mouseleave=${f ? void 0 : () => n.hideTooltip()}
-                      aria-pressed=${h.clickable ? h.pressed : S}
-                      aria-label="${e} ${o[i]}: ${Je(a, m)}, klasse ${_[l].label}"
-                    >${v(a)}</button>
+                      @mouseleave=${p ? void 0 : () => n.hideTooltip()}
+                      aria-pressed=${h.clickable ? h.pressed : x}
+                      aria-label="${e} ${o[i]}: ${Xe(a, g)}, klasse ${v[l].label}"
+                    >${u(a)}</button>
                   </td>
                 `;
 	})}
@@ -1586,242 +1637,553 @@ function et(e, t) {
       </table>
 
       <!-- Selected cell: a 48 px line with day, block, value, class. -->
-      ${b && u[b.row]?.[b.column] != null ? p`
+      ${b && d[b.row]?.[b.column] != null ? m`
         <p class="lintje-heatmap__selection">
           <b>${c[b.row]} ${o[b.column]}</b> ·
-          ${Je(u[b.row][b.column], m)} · klasse
-          ${_[y(u[b.row][b.column])].label}
+          ${Xe(d[b.row][b.column], g)} · klasse
+          ${v[y(d[b.row][b.column])].label}
         </p>
       ` : l}
 
-      <!-- Class legend: clickable, dims the other classes to .25. -->
-      <ul class="lintje-heatmap__legend">
-        ${_.map((e, t) => p`
-          <li>
-            <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
-                    @click=${() => {
-		n.dimmedClass = x === t ? null : t, n.requestUpdate();
-	}}
-                    aria-pressed=${x === t}>
-              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${s({ background: e.color })}></span>
-              <span>${e.label}</span>
-            </button>
-          </li>
-        `)}
-      </ul>
       ${H(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/histogram-chart/histogram-chart.ts
-var tt = 16, nt = 56, rt = 8, it = 18;
-function at(e) {
-	return v(e, +!Number.isInteger(e));
+var rt = 16, it = 56, at = 8, ot = 18;
+function st(e) {
+	return u(e, +!Number.isInteger(e));
 }
-function ot(e, t) {
+function ct(e, t) {
 	let n = t ? ` ${t}` : "";
-	return e.to == null ? `${at(e.from)}${n} of meer` : `${at(e.from)} tot ${at(e.to)}${n}`;
+	return e.to == null ? `${st(e.from)}${n} of meer` : `${st(e.from)} tot ${st(e.to)}${n}`;
 }
-function st(e, t, n = "") {
+function lt(e, t, n = "") {
 	let r = t.width, i = e.map((e) => {
-		let t = f(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
+		let t = p(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 + rt && i[1].left < i[0].right + rt;
+	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + at && i[1].left < i[0].right + at;
 	return i.map((e, n) => ({
 		x: e.x,
-		y: t.top + 12 + (o && n === a ? it : 0),
+		y: t.top + 12 + (o && n === a ? ot : 0),
 		anchor: e.anchor
 	}));
 }
-function ct(e, t) {
-	let { controller: n, description: r } = t, { bins: i, axisTitle: a, xTitle: o, unit: u, median: d, threshold: m, small: g = !1 } = e, y = e.label ?? "Aantal", b = F(e.color) ?? "var(--color-chart-default)", x = n.id, S = (e) => u ? `${e} ${u}` : e;
+function ut(e, t) {
+	let { controller: n, description: r } = t, { bins: i, axisTitle: a, xTitle: o, unit: c, median: d, threshold: f, small: _ = !1 } = e, y = e.label ?? "Aantal", b = z(e.color) ?? "var(--color-chart-default)", x = n.id, S = (e) => c ? `${e} ${c}` : e;
 	n.measure({
 		width: !0,
-		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	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 } = K(Math.max(...C, 1)), D = N(E, n.width, { fontFamily: n.fontFamily }), k = q(t), A = q(t, {
-		left: D.width,
-		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, B = (e) => A.left + (e - P) / Math.max(R - P, 2 ** -52) * (M - A.left), V = i.map((e) => {
-		let t = B(e.from), n = B(e.to ?? R) - 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: E, ticks: D } = T(Math.max(...C, 1)), A = k(D, n.width, { fontFamily: n.fontFamily }), j = te(t), N = te(t, {
+		left: A.width,
+		bottom: j.bottom + (o ? rt : 0)
+	}), P = N.height - N.bottom, L = N.width - N.right, V = i[0]?.from ?? 0, U = i[i.length - 1], W = i.length > 1 ? i[i.length - 1].from - i[i.length - 2].from : 1, G = U ? U.to ?? U.from + W : 1, K = (e) => N.left + (e - V) / Math.max(G - V, 2 ** -52) * (L - N.left), q = i.map((e) => {
+		let t = K(e.from), n = K(e.to ?? G) - t;
 		return {
 			x: t,
 			width: n,
 			center: t + n / 2
 		};
-	}), ne = (e) => {
+	}), J = (e) => n.hiddenSeries.includes(e), Y = J(y), X = (e) => {
 		let t = i[e].count;
 		return {
-			title: ot(i[e], u),
-			rows: [{
+			title: ct(i[e], c),
+			rows: Y ? [] : [{
 				label: y,
-				value: t == null ? "geen gegevens" : v(t),
+				value: t == null ? "geen gegevens" : u(t),
 				color: b
 			}, ...t != null && w != null && w > 0 ? [{
 				label: "Aandeel",
-				value: c(t / w * 100, 1),
+				value: g(t / w * 100, 1),
 				color: b
 			}] : []]
 		};
-	}, W = Z(n, i.length, (e) => ({
-		x: V[e].center,
-		y: i[e].count == null ? A.top : O(i[e].count, T, A),
-		content: ne(e)
-	})), G = I?.to == null && i.length > 0, J = [...i.slice(0, G ? -1 : void 0).map((e) => e.from), ...G ? [] : I ? [I.to] : []].map((e) => ({
-		label: at(e),
-		x: B(e)
-	})), Y = G ? {
-		label: `${at(I.from)}+`,
-		x: V[V.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)), $ = U(J.filter((e, t) => t % X === 0), n.fontFamily), ie = (e, t) => Math.abs(t.x - e.x) < (f(e.label, n.fontFamily) + f(t.label, n.fontFamily)) / 2 + rt, ae = G ? Y : J[J.length - 1];
-	ae && !$.includes(ae) && ($.length && ie($[$.length - 1], ae) && ($ = $.slice(0, -1)), G || ($ = [...$, ae]));
-	let oe = G ? I.from : R, se = (e) => e != null && e >= P && e <= oe, ce = [...se(d) ? [{
-		x: B(d),
-		text: e.medianLabel ?? S(`mediaan ${at(d)}`),
+	}, ne = re(n, i.length, (e) => ({
+		x: q[e].center,
+		y: i[e].count == null ? N.top : O(i[e].count, E, N),
+		content: X(e)
+	})), Z = U?.to == null && i.length > 0, Q = [...i.slice(0, Z ? -1 : void 0).map((e) => e.from), ...Z ? [] : U ? [U.to] : []].map((e) => ({
+		label: st(e),
+		x: K(e)
+	})), $ = Z ? {
+		label: `${st(U.from)}+`,
+		x: q[q.length - 1].center
+	} : null, ae = Q.length > 1 ? (Q[Q.length - 1].x - Q[0].x) / (Q.length - 1) : 1, oe = Math.max(1, Math.ceil(it / ae)), se = I(Q.filter((e, t) => t % oe === 0), n.fontFamily), ce = (e, t) => Math.abs(t.x - e.x) < (p(e.label, n.fontFamily) + p(t.label, n.fontFamily)) / 2 + at, le = Z ? $ : Q[Q.length - 1];
+	le && !se.includes(le) && (se.length && ce(se[se.length - 1], le) && (se = se.slice(0, -1)), Z || (se = [...se, le]));
+	let ue = Z ? U.from : G, de = (e) => e != null && e >= V && e <= ue, fe = [...de(d) ? [{
+		key: R,
+		x: K(d),
+		text: e.medianLabel ?? S(`mediaan ${st(d)}`),
 		bold: !0,
 		dashed: !1
-	}] : [], ...se(m) ? [{
-		x: B(m),
-		text: e.thresholdLabel ?? S(`norm ${at(m)}`),
+	}] : [], ...de(f) ? [{
+		key: M,
+		x: K(f),
+		text: e.thresholdLabel ?? S(`norm ${st(f)}`),
 		bold: !1,
 		dashed: !0
-	}] : []], le = st(ce, A, n.fontFamily), ue = (e) => e.charAt(0).toUpperCase() + e.slice(1), de = [
+	}] : []], pe = lt(fe, N, n.fontFamily), me = (e) => e.charAt(0).toUpperCase() + e.slice(1), he = [
 		{
 			label: y,
 			color: b,
-			shape: "square"
+			shape: "square",
+			fixed: fe.length === 0,
+			hidden: Y
 		},
-		...se(d) ? [{
-			label: ue(e.medianLabel ?? "Mediaan"),
+		...de(d) ? [{
+			label: me(e.medianLabel ?? "Mediaan"),
 			color: "var(--color-chart-emphasis)",
-			shape: "line"
+			shape: "line",
+			key: R,
+			hidden: J(R)
 		}] : [],
-		...se(m) ? [{
-			label: ue(e.thresholdLabel ?? "Norm"),
+		...de(f) ? [{
+			label: me(e.thresholdLabel ?? "Norm"),
 			color: "var(--color-chart-emphasis)",
-			shape: "dashed"
+			shape: "dashed",
+			key: M,
+			hidden: J(M)
 		}] : []
-	], fe = (e) => {
-		let t = V[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 = O(n, T, A);
-		return _`
-      <g class="lintje-chart__bar-group" ${s(z(e, i.length))}>
+	], ge = (e) => {
+		let t = q[e], n = i[e].count;
+		if (n == null) return v`<rect class="lintje-chart__missing" x=${t.x} y=${N.top} width=${t.width}
+                       height=${Math.max(0, P - N.top)} fill="url(#hatch-${x})" />`;
+		let r = O(n, E, N);
+		return v`
+      <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} />
+              height=${Math.max(0, P - r)} fill=${b} />
       </g>
     `;
-	}, 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=${V[pe].x} y=${O(me, T, A)} width=${V[pe].width}
-                  height=${Math.max(0, j - O(me, T, A))} fill=${b} />` : l,
-		$.map((e) => _`
-        <line x1=${e.x} x2=${e.x} y1=${j} y2=${j + 4}
+	}, _e = n.hoverIndex, ve = _e == null ? null : i[_e]?.count, ye = [
+		v`<g class="lintje-chart__series ${Y ? "is-off" : ""}">${i.map((e, t) => ge(t))}</g>`,
+		_e != null && ve != null && !Y ? v`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
+                  x=${q[_e].x} y=${O(ve, E, N)} width=${q[_e].width}
+                  height=${Math.max(0, P - O(ve, E, N))} fill=${b} />` : l,
+		se.map((e) => v`
+        <line x1=${e.x} x2=${e.x} y1=${P} y2=${P + 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>
+        <text x=${e.x} y=${P + 20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
       `),
-		Y ? _`<text x=${Y.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${Y.label}</text>` : l,
-		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" : l} />
-          <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>
+		$ ? v`<text x=${$.x} y=${P + 20} text-anchor="middle" class="lintje-chart__axis-label">${$.label}</text>` : l,
+		fe.map((e, t) => {
+			let n = pe[t];
+			return v`
+        <g class="lintje-chart__series ${J(e.key) ? "is-off" : ""}">
+          <g class="lintje-chart__reference">
+            <line x1=${e.x} x2=${e.x} y1=${N.top} y2=${P}
+                  stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed ? 1 : 1.5}
+                  stroke-dasharray=${e.dashed ? "3 3" : l} />
+            <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>
         </g>
       `;
 		}),
-		V.map((e, t) => _`
-        <rect x=${e.x} y=${A.top} width=${e.width} height=${Math.max(0, j - A.top)}
+		q.map((e, t) => v`
+        <rect x=${e.x} y=${N.top} width=${e.width} height=${Math.max(0, P - N.top)}
               fill="transparent"
-              @mousemove=${(e) => n.hoverAt(t, e, ne(t))}
+              @mousemove=${(e) => n.hoverAt(t, e, X(t))}
               @mouseleave=${() => n.hoverAt(null)} />
       `)
 	];
-	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+	return m`
+    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
          ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({ items: de })}
-      ${te({
+      ${F({
+		items: he,
+		onToggle: (e) => n.toggleSeries(e)
+	})}
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: x,
-		ticks: E,
-		max: T,
-		area: A,
+		ticks: D,
+		max: E,
+		area: N,
 		axisTitle: a,
 		xTitle: o,
 		description: r,
-		formatTick: D.format,
-		keys: W
-	}, he)}
+		formatTick: A.format,
+		keys: ne
+	}, ye)}
       ${H(n)}
-      ${Q(n)}
+      ${ie(n)}
     </div>
   `;
 }
 //#endregion
+//#region src/components/shared/charts/radar-chart/radar-chart.ts
+var dt = 16, ft = 6, pt = 18, mt = 16, ht = 3, gt = 4, _t = 8, vt = 40, yt = .7, bt = 420, xt = 12, St = 2;
+function Ct(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(K)), n = j.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 = K(t.color) ? t.color : n[r++ % n.length];
+		return {
+			label: t.label,
+			values: i,
+			comparison: !1,
+			color: z(t.color ?? a),
+			symbol: a
+		};
+	});
+}
+function wt(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 Tt(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 Et = (e) => Number.isInteger(e) ? 0 : String(e).split(".")[1]?.length ?? 0;
+function Dt(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 Ot(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, { axes: a, unit: o, threshold: c, small: l = !1 } = e, d = a.length, f = Ct(e), p = (e) => n.hiddenSeries.includes(e.label), g = n.hiddenSeries.includes(M), _ = f.length < 2 && c == null, v = f.filter((e) => !p(e)), y = f.filter((e) => !e.comparison), b = v.filter((e) => !e.comparison), x = Math.min(2, Math.max(0, ...f.flatMap((e) => e.values.filter((e) => e != null)).map(Et), ...c == null ? [] : [Et(c)])), S = (e) => u(e, x), C = (e) => `${S(e)}${o ? ` ${o}` : ""}`, w = (e) => {
+		let t = Math.round(e * 10 ** x) / 10 ** x;
+		return t === 0 ? S(0) : `${t > 0 ? "+" : "−"}${S(Math.abs(t))}`;
+	}, T = b.length > 1 && b.some((e) => e.label === n.emphasis) ? n.emphasis : null, E = Dt(e, v.map((e) => ({
+		...e,
+		complete: e.values.every((e) => e != null)
+	})), T), D = a.map((e, t) => f.some((e) => e.values[t] == null)), O = e.dataLabels !== !1 && y.length === 1, k = O && !p(y[0]), A = [
+		...f.map((e) => e.comparison ? {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			hidden: p(e),
+			fixed: _
+		} : {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			symbol: e.symbol,
+			hidden: p(e),
+			fixed: _
+		}),
+		...c == null ? [] : [{
+			key: M,
+			label: e.thresholdLabel ?? `Norm ${C(c)}`,
+			color: "var(--color-chart-emphasis)",
+			shape: "dashed",
+			hidden: g
+		}],
+		...D.some(Boolean) ? [{
+			label: "Geen gegevens",
+			shape: "hatch",
+			fixed: !0
+		}] : []
+	];
+	function j(t) {
+		let n = v.map((e) => {
+			let n = e.values[t];
+			return {
+				label: e.label,
+				value: n == null ? "geen gegevens" : C(n),
+				color: e.color,
+				symbol: e.symbol,
+				marker: e.comparison ? "line" : void 0
+			};
+		});
+		c != null && !g && n.push({
+			label: e.thresholdLabel ?? "Norm",
+			value: C(c),
+			color: "var(--color-chart-emphasis)",
+			marker: "dashed"
+		});
+		let [r] = b, i = b.length === 1 ? r.values[t] : null;
+		if (i != null) {
+			let e = v.find((e) => e.comparison), r = e?.values[t];
+			e && r != null && n.push({
+				label: `t.o.v. ${e.label}`,
+				value: w(i - r),
+				divider: !0
+			}), c != null && !g && n.push({
+				label: "t.o.v. norm",
+				value: w(i - c),
+				divider: !(e && r != null)
+			});
+		}
+		return {
+			title: a[t],
+			rows: n
+		};
+	}
+	let { width: N, height: P, body: I, at: L } = (i ? At : kt)({
+		spec: e,
+		controller: n,
+		options: t,
+		layers: f,
+		shown: v,
+		fills: E,
+		emphasis: T,
+		missing: D,
+		reserve: O,
+		labelled: k,
+		hidden: p,
+		normOff: g,
+		format: S,
+		contentAt: j
+	}), R = re(n, d, (e) => ({
+		...L(e),
+		content: j(e)
+	}));
+	return m`
+    <div class="lintje-chart-wrap ${l ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${F({
+		items: A,
+		onToggle: (e) => n.toggleSeries(e),
+		onEmphasis: y.length > 1 ? (e) => n.emphasise(e) : void 0
+	})}
+      <figure class="lintje-chart">
+        <svg viewBox="0 0 ${N} ${P}" width=${N} height=${P}
+             class="lintje-chart__svg lintje-radar ${i ? "lintje-radar--rows" : ""}"
+             ${s({ height: `${P}px` })}
+             role=${V(!1)} aria-labelledby="${n.id}-desc" tabindex="0"
+             @keydown=${R.keydown} @focus=${R.focus} @blur=${R.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>
+          ${I}
+        </svg>
+      </figure>
+      ${H(n)}
+      ${ie(n)}
+    </div>
+  `;
+}
+function kt({ spec: e, controller: t, options: n, layers: r, shown: i, fills: a, emphasis: o, missing: c, reserve: d, labelled: f, hidden: m, normOff: h, format: g, contentAt: _ }) {
+	let { axes: y, max: b, threshold: x, small: S = !1 } = e, C = y.length, w = S ? "--chart-h-small" : "--chart-h-main";
+	t.measure({
+		width: !0,
+		height: n.height ?? w,
+		fit: !!n.expanded
+	});
+	let T = t.width, E = n.height ?? (n.expanded || S ? t.height : Math.max(t.height, Math.min(bt, Math.round(T * yt)))), D = (e) => -Math.PI / 2 + 2 * Math.PI * e / C, O = t.fontFamily, k = (e) => p(e, O) * 14 / 12, A = Math.max(0, ...y.map((e, t) => Math.abs(Math.cos(D(t))) < .1 ? 0 : k(e) + ft + 2)), j = 24 + (d ? mt : 0), M = Math.max(vt, Math.min(T / 2 - A - dt, E / 2 - j - dt)), N = T / 2, P = E / 2, F = (e, t) => ({
+		x: N + t * Math.cos(D(e)),
+		y: P + t * Math.sin(D(e))
+	}), I = (e) => Math.max(0, Math.min(e, b)) / b * M, R = (e) => e.map((e) => `${e.x},${e.y}`).join(" "), ee = (e) => R(y.map((t, n) => F(n, I(e)))), z = Tt(b, e.step), B = Math.max(0, ...z.map(Et)), V = t.hoverIndex, H = (e) => {
+		let t = i.map((t) => t.values[e]).filter((e) => e != null);
+		return F(e, t.length ? I(Math.max(...t)) : M / 2);
+	}, U = [...r.filter((e) => e.comparison), ...r.filter((e) => !e.comparison)], W = (e) => o != null && e.label !== o, G = s({ "transform-origin": `${N}px ${P}px` }), K = y.map((e, t) => {
+		let n = Math.cos(D(t)), i = Math.sin(D(t)), a = F(t, M + dt + ft), o = Math.abs(n) < .1, s = o ? "middle" : n > 0 ? "start" : "end", c;
+		c = o && i < 0 ? a.y - 4 - (d ? mt : 0) : o ? a.y + 12 : d ? a.y - 2 : a.y + 5;
+		let u = d ? r.find((e) => !e.comparison)?.values[t] : void 0;
+		return v`
+      <text x=${a.x} y=${c} text-anchor=${s} class="lintje-radar__name">${e}</text>
+      ${d ? v`<g class="lintje-chart__series ${f ? "" : "is-off"}">
+              <text x=${a.x} y=${c + mt} text-anchor=${s}
+                    class="lintje-chart__data-label lintje-radar__value ${u == null ? "lintje-radar__no-value" : ""}">
+                ${u == null ? "geen gegevens" : g(u)}</text>
+            </g>` : l}
+    `;
+	}), q = (e, t) => {
+		let n = `lintje-chart__series ${m(e) ? "is-off" : ""}`, r = e.values.map((e, t) => e == null ? null : F(t, I(e)));
+		if (t === "area") return e.comparison || r.some((e) => e == null) ? l : v`<g class=${n}><g class="lintje-radar__layer" ${G}>
+        <polygon class="lintje-radar__area ${a.has(e.label) ? "is-filled" : ""}"
+                 points=${R(r)} fill=${e.color} />
+      </g></g>`;
+		let { closed: i, runs: o } = wt(e.values), s = e.comparison ? void 0 : L(e.color), c = o.map((t) => {
+			let n = t.map((e) => r[e]), a = R(i ? [...n, n[0]] : n);
+			return n.length === 1 ? e.comparison ? v`<circle cx=${n[0].x} cy=${n[0].y} r="2.5" fill=${e.color} />` : l : v`
+        ${s ? v`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${s} />` : l}
+        <polyline class="lintje-chart__line" points=${a} stroke=${e.color} />
+      `;
+		}), u = e.symbol ? r.map((t) => t ? v`<path d=${J(e.symbol, ht, t.x, t.y)} fill=${e.color}
+                        stroke=${s ?? l} stroke-width=${s ? 1 : l} />` : l) : l;
+		return t === "lift" ? v`<g class="lintje-radar__lift" aria-hidden="true">${c}${u}</g>` : v`<g class=${n}><g class="lintje-radar__layer ${W(e) ? "is-muted" : ""}" ${G}>
+      ${c}${u}
+    </g></g>`;
+	}, te = (e) => {
+		let t = M + dt, n = Math.PI / C, r = (e) => `${N + t * Math.cos(e)},${P + t * Math.sin(e)}`;
+		return `${N},${P} ${r(D(e) - n)} ${r(D(e))} ${r(D(e) + n)}`;
+	};
+	return {
+		width: T,
+		height: E,
+		body: [
+			z.map((e) => v`<polygon class="lintje-radar__ring" points=${ee(e)} />`),
+			c.map((e, n) => {
+				if (!e) return l;
+				let r = D(n), i = -Math.sin(r) * 5, a = Math.cos(r) * 5, o = F(n, M);
+				return v`<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}`} />`;
+			}),
+			y.map((e, t) => {
+				let n = F(t, M + dt);
+				return v`<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 v`<text x=${t.x + _t / 2} y=${t.y + 4}
+                       class="lintje-chart__axis-label lintje-chart__axis-label--halo">${u(e, B)}</text>`;
+			}),
+			x == null ? l : v`<g class="lintje-chart__series ${h ? "is-off" : ""}">
+          <polygon class="lintje-chart__reference lintje-radar__norm" points=${ee(x)} />
+        </g>`,
+			U.map((e) => q(e, "area")),
+			U.map((e) => q(e, "line")),
+			o == null ? l : q(r.find((e) => e.label === o), "lift"),
+			K,
+			V == null ? l : i.map((e) => {
+				let t = e.values[V];
+				if (t == null) return l;
+				let n = F(V, I(t)), r = e.comparison ? void 0 : L(e.color), i = J(e.symbol, gt, n.x, n.y);
+				return v`
+            <path class="lintje-chart__hover-point" d=${i} fill=${e.color} />
+            ${r ? v`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />` : l}
+          `;
+			}),
+			v`<g @mouseleave=${() => t.hoverAt(null)}>
+      ${y.map((e, n) => v`<polygon class="lintje-chart__hit" points=${te(n)}
+                               @mousemove=${(e) => t.hoverAt(n, e, _(n))} />`)}
+    </g>`
+		],
+		at: H
+	};
+}
+function At({ spec: e, controller: t, layers: n, shown: r, reserve: i, labelled: a, hidden: o, normOff: c, format: d, contentAt: f }) {
+	let { axes: m, max: h, threshold: g } = e;
+	t.measure({ width: !0 });
+	let _ = t.width, y = _ - 1, b = n.filter((e) => !e.comparison), x = [...b.map((e) => ({
+		layer: e,
+		size: b.length === 1 ? 8 : 6
+	})), ...n.filter((e) => e.comparison).map((e) => ({
+		layer: e,
+		size: 4
+	}))], S = x.reduce((e, t) => e + t.size, 0) + St * Math.max(0, x.length - 1), C = 22 + S + xt, w = m.length * C, T = w + 16, E = (e) => .5 + Math.max(0, Math.min(e, h)) / h * y, D = t.fontFamily, O = n.find((e) => !e.comparison), k = r.find((e) => !e.comparison), A = t.hoverIndex, j = (e) => {
+		let t = k?.values[e];
+		return {
+			x: t == null ? _ / 2 : E(t),
+			y: e * C + pt + 4
+		};
+	}, M = m.map((e, n) => {
+		let r = n * C, u = r + pt + 4, h = i ? O?.values[n] : void 0, b = i ? h == null ? "geen gegevens" : d(h) : "", w = i && h != null && g != null && h < g, T = `lintje-chart__series ${a ? "" : "is-off"}`, k = u;
+		return v`
+      <g class="lintje-radar__row ${A === n ? "is-active" : ""}">
+        <text x="0" y=${r + 14} class="lintje-radar__name">${e}</text>
+        ${i ? v`<g class=${T}><text x=${_} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__data-label lintje-radar__value ${h == null ? "lintje-radar__no-value" : ""}">${b}</text></g>` : l}
+        ${w ? v`<g class=${T}><text x=${_ - p(b, D, 700) - 6} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__axis-label lintje-radar__value">onder norm</text></g>` : l}
+        ${x.map(({ layer: e, size: r }) => {
+			let i = k;
+			k += r + St;
+			let a = e.values[n], c = o(e) ? "is-off" : "";
+			return a == null ? v`<rect class="lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${i} width=${y} height=${r}
+                       fill="url(#hatch-${t.id})" />` : v`<rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${i}
+                       width=${Math.max(0, E(a) - .5)} height=${r} fill=${e.color}
+                       ${s(B(n, m.length))} />`;
+		})}
+        <line class="lintje-radar__zero" x1="0.5" x2="0.5" y1=${u - 2} y2=${u + S + 2} />
+        ${g == null ? l : v`<g class="lintje-chart__series ${c ? "is-off" : ""}">
+                <line class="lintje-chart__reference lintje-radar__norm" x1=${E(g)} x2=${E(g)}
+                      y1=${u - 3} y2=${u + S + 3} />
+              </g>`}
+        <rect class="lintje-chart__hit" x="0" y=${r} width=${_} height=${C}
+              @mousemove=${(e) => t.hoverAt(n, e, f(n))} />
+      </g>
+    `;
+	}), N = [0, ...Tt(h, e.step)], P = Math.max(0, ...N.map(Et)), F = N.map((e, t) => v`<text x=${E(e)} y=${w + 12}
+                           text-anchor=${t === 0 ? "start" : t === N.length - 1 ? "end" : "middle"}
+                           class="lintje-chart__axis-label">${u(e, P)}</text>`);
+	return {
+		width: _,
+		height: T,
+		body: v`<g @mouseleave=${() => t.hoverAt(null)}>${M}</g>${F}`,
+		at: j
+	};
+}
+//#endregion
 //#region src/components/shared/charts/shared/render-chart.ts
-function lt(e, t) {
+function jt(e, t) {
 	switch (e.kind) {
-		case "line": return se(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 "line": return le(e, t);
+		case "bar": return fe(e, t);
+		case "horizontal-bar": return me(e, t);
+		case "target-progress": return he(e, t);
+		case "grouped-bar": return xe(e, t);
+		case "stacked-bar": return Te(e, t);
+		case "stacked-area": return De(e, t);
+		case "pie": return Me(e, t);
+		case "dual-axis": return Ne(e, t);
+		case "scatter": return Ue(e, t);
+		case "heatmap": return nt(e, t);
+		case "histogram": return ut(e, t);
+		case "radar": return Ot(e, t);
 	}
 }
 //#endregion
 //#region src/components/charts/chart/chart.css?inline
-var ut = "/* ------------------------------------------------------------------------ */\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", dt = ".lintje-chart__svg, .lintje-pie-chart__svg", ft = [{
+var Mt = "/* ------------------------------------------------------------------------ */\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", Nt = ".lintje-chart__svg, .lintje-pie-chart__svg", Pt = [{
 	value: "chart",
 	label: "Grafiek"
 }, {
 	value: "table",
 	label: "Tabel"
 }];
-function pt(e) {
+function Ft(e) {
 	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
 }
-function mt(e) {
+function It(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 ht(e) {
+function Lt(e) {
 	switch (e.kind) {
 		case "horizontal-bar":
-		case "target-progress": return e.rows.length ? `${fe(e.rows.length)}px` : void 0;
+		case "target-progress": return e.rows.length ? `${pe(e.rows.length)}px` : void 0;
 		case "pie":
 		case "heatmap": return;
 		default: return e.small ? "var(--chart-h-small)" : void 0;
 	}
 }
-function gt(e) {
+function Rt(e) {
 	switch (e.kind) {
 		case "line": {
 			let t = e.events ?? [], n = (e) => t.filter((t) => t.index === e).map((e) => e.label).join("; ");
@@ -1861,7 +2223,7 @@ function gt(e) {
 			...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(_t(r)));
+			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(zt(r)));
 			return [
 				t,
 				...r,
@@ -1899,6 +2261,18 @@ function gt(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 [[
@@ -1907,7 +2281,7 @@ function gt(e) {
 				t("Tot"),
 				"Aantal"
 			], ...e.bins.map((t) => [
-				ot(t, e.unit),
+				ct(t, e.unit),
 				t.from,
 				t.to ?? "",
 				t.count
@@ -1915,15 +2289,15 @@ function gt(e) {
 		}
 	}
 }
-function _t(e) {
+function zt(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 vt(e, t) {
-	let [n = [], ...r] = gt(e), i = n.map((e, t) => {
+function Bt(e, t) {
+	let [n = [], ...r] = Rt(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}`,
@@ -1934,7 +2308,7 @@ function vt(e, t) {
 			key: `c${t}`,
 			header: String(e ?? ""),
 			format: "decimal",
-			decimals: _t(n),
+			decimals: zt(n),
 			align: "right",
 			sortable: !1
 		};
@@ -1954,17 +2328,17 @@ function vt(e, t) {
 		pageSize: Math.max(r.length, 1)
 	};
 }
-var yt = class extends C {
+var Vt = class extends S {
 	constructor(...e) {
-		super(...e), this.view = "chart", this.#e = new W(() => this.requestUpdate()), this.#t = null, this.#n = new n(this);
+		super(...e), this.view = "chart", this.#e = new N(() => this.requestUpdate()), this.#t = null, this.#n = new n(this);
 	}
 	static {
 		this.styles = [
 			e,
 			a(x),
 			a(r),
-			...w,
-			a(ut)
+			...Y,
+			a(Mt)
 		];
 	}
 	static {
@@ -1993,26 +2367,26 @@ var yt = class extends C {
 	}
 	get downloadName() {
 		let e = this.data?.download;
-		return e === !1 ? null : e?.filename ?? pt(this.data?.title);
+		return e === !1 ? null : e?.filename ?? Ft(this.data?.title);
 	}
 	csv() {
 		let e = this.data, t = this.downloadName;
-		e && t !== null && E(t, gt(e.chart));
+		e && t !== null && w(t, Rt(e.chart));
 	}
 	png() {
 		let e = this.data;
 		if (!e) return;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(dt);
-		t && T(this.downloadName ?? pt(e.title), t);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(Nt);
+		t && C(this.downloadName ?? Ft(e.title), t);
 	}
 	expandChanged(e) {
-		e ? this.#t ??= new W(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+		e ? this.#t ??= new N(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
 	}
 	render() {
 		let e = this.data;
 		if (!e) return l;
 		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() : l, a = this.showsTable;
-		return p`<lintje-tile
+		return m`<lintje-tile
         id=${r ?? l}
         span=${e.span ?? l}
         heading=${e.title ?? l}
@@ -2026,7 +2400,7 @@ var yt = class extends C {
         state=${e.state ?? "ready"}
         message=${e.message ?? l}
         last-known=${e.lastKnown ?? l}
-        content-height=${ht(e.chart) ?? l}
+        content-height=${Lt(e.chart) ?? l}
         @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -2035,7 +2409,7 @@ var yt = class extends C {
 		}}
       >
         ${i}
-        ${e.notice ? p`<lintje-announcement
+        ${e.notice ? m`<lintje-announcement
               slot="notice"
               compact
               .data=${e.notice}
@@ -2043,7 +2417,7 @@ var yt = class extends C {
         ${this.content()}
       </lintje-tile>
 
-      ${this.renderExpandModal(this.expanded ? a ? this.table() : this.#t ? lt(e.chart, {
+      ${this.renderExpandModal(this.expanded ? a ? this.table() : this.#t ? jt(e.chart, {
 			...this.chartOptions(this.#t),
 			expanded: !0
 		}) : l : l, {
@@ -2057,28 +2431,28 @@ var yt = class extends C {
 	content() {
 		let e = this.data;
 		switch (e.state ?? "ready") {
-			case "loading": return p`<div slot="loading">
-          ${S({
-				kind: mt(e.chart),
-				height: ht(e.chart),
+			case "loading": return m`<div slot="loading">
+          ${X({
+				kind: It(e.chart),
+				height: Lt(e.chart),
 				status: !1
 			})}
         </div>`;
 			case "empty":
 			case "error": return l;
-			default: return this.showsTable ? this.table() : lt(e.chart, this.chartOptions(this.#e));
+			default: return this.showsTable ? this.table() : jt(e.chart, this.chartOptions(this.#e));
 		}
 	}
 	viewSwitch() {
 		let e = this.#n.matches;
-		return p`<lintje-segmented
+		return m`<lintje-segmented
       class="lintje-chart__view"
       slot=${e ? "notice" : "actions"}
       label="Weergave"
       hide-label
       ?stacked=${e}
       .value=${this.view}
-      .options=${ft}
+      .options=${Pt}
       @lintje-change=${(e) => {
 			e.stopPropagation(), this.view = e.detail === "table" ? "table" : "chart";
 		}}
@@ -2086,15 +2460,15 @@ var yt = class extends C {
 	}
 	table() {
 		let e = this.data, t = e.title ? `${e.title}, als tabel` : "Grafiek als tabel";
-		return p`<lintje-data-table
+		return m`<lintje-data-table
       class="lintje-chart__table"
       bare
-      .data=${vt(e.chart, t)}
+      .data=${Bt(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(`${dt}, .lintje-heatmap`);
+		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`);
 		n && !n.hasAttribute("tabindex") && n.setAttribute("tabindex", "-1"), n?.focus();
 	}
 	chartOptions(e) {
@@ -2118,6 +2492,6 @@ var yt = class extends C {
 		};
 	}
 };
-i("lintje-chart", yt);
+i("lintje-chart", Vt);
 //#endregion
-export { yt as LintjeChart };
+export { Vt as LintjeChart };