lintje 0.3.0 → 0.4.0

package/dist-elements/tag/chart.js

@@ -1,8 +1,8 @@
-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, c, d as l, en as u, f as d, h as f, nn as p, o as m, p as h, r as g, rn as _, u as v, v as y, y as b } from "../chunks/base-DRGvkF-r.js";
 import { t as x } from "./announcement.js";
 import "./segmented.js";
-import { a as 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 { a as S, c as C, i as w, n as T, t as E } from "../chunks/download-C68kcwPj.js";
+import { C as D, E as O, S as k, T as A, _ as j, a as M, b as N, c as P, f as F, g as I, h as L, i as R, l as z, n as B, o as V, p as H, r as U, s as ee, t as te, u as W, v as G, w as K, x as q, y as ne } from "../chunks/stagger-BB_gcxBI.js";
 import "./data-table.js";
 //#region src/components/shared/charts/shared/plot-keys.ts
 var J = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), Y = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
@@ -55,26 +55,26 @@ function oe(e) {
 	});
 }
 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) => ({
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, asOfIndex: c, asOfLabel: d, pendingHours: f = 0, fixedMax: g, small: v = !1 } = e, y = (e.events ?? []).filter((e) => Number.isInteger(e.index) && e.index >= 0 && e.index < i.length).sort((e, t) => e.index - t.index).map((e, t) => ({
 		...e,
 		number: t + 1
 	})), b = n.id;
 	n.measure({
 		width: !0,
-		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (v ? "--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, {
+	})), w = C.filter((e) => !n.hiddenSeries.includes(e.label)), T = w.flatMap((e) => e.values).filter((e) => e != null), { max: E, ticks: k } = q(g ?? Math.max(...T, 1)), M = N(k, n.width, {
 		fontFamily: n.fontFamily,
-		minimum: Math.ceil(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, {
+		minimum: Math.ceil(h(i[0] ?? "", n.fontFamily) / 2)
+	}), P = ne(t, { left: M.width }), R = y.map((e) => Math.min(P.width - $ / 2, Math.max($ / 2, A(e.index, i.length, P)))), B = oe(R), te = B.length ? Math.max(...B) + 1 : 0, W = ne(t, {
 		left: M.width,
-		...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) => ({
+		...te ? { top: te * 22 + ae } : {}
+	}), G = (e) => ie + B[e] * 22, K = f > 6, J = c ?? i.length - 1, Y = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", re = C.map((e) => ({
 		label: e.label,
 		color: Y(e),
 		shape: e.comparison ? "dashed" : "line",
@@ -82,7 +82,7 @@ function se(e, t) {
 		hidden: n.hiddenSeries.includes(e.label)
 	})), X = Math.max(1, Math.ceil(i.length / 8)), se = i.map((e, t) => ({
 		label: e,
-		x: A(t, i.length, U),
+		x: A(t, i.length, W),
 		i: t
 	})).filter((e) => e.i % X === 0);
 	function ce(e) {
@@ -91,7 +91,7 @@ function se(e, t) {
 			title: i[e],
 			rows: w.map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? "geen gegevens" : v(t.values[e]),
+				value: t.values[e] == null ? "geen gegevens" : l(t.values[e]),
 				color: Y(t)
 			})),
 			...t.length ? { events: t } : {}
@@ -100,86 +100,86 @@ function se(e, t) {
 	let le = Z(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,
+			x: A(e, i.length, W),
+			y: t.length ? O(Math.max(...t), E, W) : W.top,
 			content: ce(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 = A(J, i.length, W), t = K ? D(W) / (i.length - 1) : W.width - W.right - e;
+			return _`<rect x=${e} y=${W.top} width=${Math.max(0, t)}
+                           height=${W.height - W.top - W.bottom}
                            fill="url(#hatch-${b})" />`;
-		})() : l,
+		})() : u,
 		y.length ? _`<g>
           ${y.map((e, t) => {
-			let n = A(e.index, i.length, U);
+			let n = A(e.index, i.length, W);
 			return _`<line class="lintje-chart__event-line" x1=${n} x2=${n}
-                             y1=${W(t) + $} y2=${U.height - U.bottom} />`;
+                             y1=${G(t) + $} y2=${W.height - W.bottom} />`;
 		})}
           ${y.map((e, t) => _`
-              <rect class="lintje-chart__event-chip" x=${R[t] - $ / 2} y=${W(t)}
+              <rect class="lintje-chart__event-chip" x=${R[t] - $ / 2} y=${G(t)}
                     width=${$} height=${$} />
-              <text class="lintje-chart__event-number" x=${R[t]} y=${W(t) + $ / 2}
+              <text class="lintje-chart__event-number" x=${R[t]} y=${G(t) + $ / 2}
                     text-anchor="middle" dominant-baseline="central">${e.number}</text>
             `)}
-        </g>` : l,
+        </g>` : u,
 		_`<g class="lintje-chart__reveal">
       ${w.map((e) => {
-			let t = Y(e), n = e.comparison ? void 0 : V(t), r = [[]];
+			let t = Y(e), n = e.comparison ? void 0 : H(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 || K && t > J ? r[r.length - 1].length && r.push([]) : r[r.length - 1].push({
+					x: A(t, i.length, W),
+					y: O(e, E, W)
 				});
 			});
 			let 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;
+			if (a.length === 0) return u;
+			let o = a[a.length - 1], s = o[o.length - 1], c = W.height - W.bottom;
 			return _`
           <g>
             ${a.map((r) => {
 				let i = r.map((e) => `${e.x},${e.y}`).join(" ");
 				return _`
                 ${e.area && !e.comparison ? _`<polygon fill=${t} fill-opacity=".14"
-                                 points=${`${r[0].x},${c} ${i} ${r[r.length - 1].x},${c}`} />` : l}
-                ${n && r.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : l}
+                                 points=${`${r[0].x},${c} ${i} ${r[r.length - 1].x},${c}`} />` : u}
+                ${n && r.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : u}
                 ${r.length === 1 ? _`<circle cx=${r[0].x} cy=${r[0].y} r="2.5" fill=${t} />` : _`<polyline
                         class="lintje-chart__line"
                         points=${i}
                         stroke=${t}
-                        stroke-dasharray=${e.comparison ? "5 4" : l}
+                        stroke-dasharray=${e.comparison ? "5 4" : u}
                         opacity=${e.comparison ? .9 : 1} />`}
               `;
 			})}
             <!-- The line's own shape at its end; a 4 px point there at an early as-of time. -->
-            ${e.symbol ? _`<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 ? _`<path class="lintje-chart__line-end" d=${j(e.symbol, 4.5, s.x, s.y)} fill=${t} />` : K && !e.comparison ? _`<circle cx=${s.x} cy=${s.y} r="4" fill=${t} />` : u}
           </g>
         `;
 		})}
     </g>`,
-		G && u ? B({
-			area: U,
+		K && d ? V({
+			area: W,
 			index: J,
 			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}` : ""}`;
+				return e == null ? void 0 : `${l(e)}${o ? ` ${o}` : ""}`;
 			})()
-		}) : l,
-		n.hoverIndex == null ? l : w.map((e) => {
+		}) : u,
+		n.hoverIndex == null ? u : 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 || K && t > J ? u : _`<circle class="lintje-chart__hover-point" r="4" fill=${Y(e)}
+                             cx=${A(t, i.length, W)}
+                             cy=${O(r, E, W)} />`;
 		}),
 		i.map((e, t) => {
-			let r = A(t, i.length, U), a = D(U) / Math.max(1, i.length - 1);
+			let r = A(t, i.length, W), a = D(W) / Math.max(1, i.length - 1);
 			return _`
-        <rect x=${r - a / 2} y=${U.top} width=${a}
-              height=${U.height - U.top - U.bottom}
+        <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))}
               @mouseleave=${() => n.hoverAt(null)} />
@@ -187,20 +187,20 @@ function se(e, t) {
 		})
 	];
 	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
          ${s({ "--lintje-event-size": `${$}px` })}
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({
+      ${z({
 		items: re,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: b,
 		ticks: k,
 		max: E,
-		area: U,
+		area: W,
 		formatTick: M.format,
 		axisTitle: a ?? o,
 		xLabels: se,
@@ -213,8 +213,8 @@ function se(e, t) {
                   <span><span class="lintje-chart-events__category">${i[e.index]}</span> ·
                     ${e.label}</span>
                 </li>`)}
-            </ol>` : l}
-      ${H(n)}
+            </ol>` : u}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -224,13 +224,13 @@ function se(e, t) {
 var ce = {
 	clickable: !1,
 	state: "",
-	markId: l,
-	role: l,
-	tabIndex: l,
-	pressed: l,
-	label: l,
-	click: l,
-	keydown: l
+	markId: u,
+	role: u,
+	tabIndex: u,
+	pressed: u,
+	label: u,
+	click: u,
+	keydown: u
 };
 function le(e, t) {
 	let n = /* @__PURE__ */ new Set();
@@ -283,17 +283,17 @@ var ue = [
 	"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 ?? []);
+	let { controller: n, description: r } = t, { labels: i, values: a, axisTitle: o, trend: d, dataLabels: f = !0, small: h = !1, links: g } = e, y = F(e.color) ?? "var(--color-chart-default)", b = n.id, x = le(t, g ?? []);
 	n.measure({
 		width: !0,
-		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (h ? "--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 } = q(Math.max(...S, 1)), T = N(w, n.width, { fontFamily: n.fontFamily }), E = ne(t, { left: T.width }), D = E.height - E.bottom, { width: A, bandWidth: j } = k(0, i.length, E), M = f && a.every((e) => e == null || c(v(e, A), j - 4)), P = (e) => ({
 		title: i[e],
 		rows: [{
 			label: o ?? "Waarde",
-			value: a[e] == null ? "geen gegevens" : v(a[e]),
+			value: a[e] == null ? "geen gegevens" : l(a[e]),
 			color: y
 		}]
 	}), I = Z(n, i.length, (e) => ({
@@ -306,10 +306,10 @@ function de(e, t) {
                          height=${Math.max(0, D - E.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)}`);
+		let a = O(e, C, E), o = x.of(g?.[t], i[t], `${i[t]}: ${l(e)}`);
 		return _`
         <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
-           ${s(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}"
@@ -318,18 +318,18 @@ function de(e, t) {
                 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)}
-                  </text>` : l}
+                    ${v(e, r.width)}
+                  </text>` : u}
         </g>
       `;
-	}), c ? _`<polyline
+	}), d ? _`<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];
+          points=${d.map((e, t) => e == null ? null : `${k(t, i.length, E).center},${O(e, C, E)}`).filter(Boolean).join(" ")} />` : u];
 	return p`
-    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
+         ${m(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,
@@ -345,7 +345,7 @@ function de(e, t) {
 		interactive: x.interactive,
 		keys: I
 	}, L)}
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -356,22 +356,22 @@ function fe(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 ? {
+	let { controller: n, description: r } = t, { rows: i, threshold: a, thresholdLabel: o, unit: c } = e, d = F(e.color) ?? "var(--color-chart-dark-yellow)", f = F(e.aboveThresholdColor) ?? "var(--color-chart-red)", h = n.id, g = i.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), g = le(t, m), y = fe(i.length);
+	} : null), v = le(t, g), y = fe(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 = K(i.map((e) => e.label), b, { fontFamily: n.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...i.map((e) => e.value), a ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${l(e)}${c ? ` ${c}` : ""}`, D = (e) => {
 		let t = i[e], n = a != null && t.value > a;
 		return {
 			title: t.label,
 			rows: [{
 				label: "Waarde",
 				value: E(t.value),
-				color: n ? d : u
+				color: n ? f : d
 			}, ...a == null ? [] : [{
 				label: "Norm",
 				value: E(a),
@@ -384,27 +384,27 @@ function pe(e, t) {
 		content: D(e)
 	}));
 	return p`
-    <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
+    <figure class="lintje-chart lintje-chart--rows" ${m(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) || v.escape(e)}>
+      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${R(v.interactive)}
+           aria-labelledby="${h}-desc" width=${b} height=${y}
            ${s({
 		height: `${y}px`,
-		...M(f)
+		...M(h)
 	})}
            tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
-        <desc id="${f}-desc">${r}</desc>
-        <defs>${P(f)}</defs>
-        ${a == null ? l : _`
+        <desc id="${h}-desc">${r}</desc>
+        <defs>${P(h)}</defs>
+        ${a == null ? u : _`
           <line x1=${C + T(a)} x2=${C + T(a)} y1=${4} y2=${i.length * 26 + 2}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
           <text x=${C + T(a) + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">
-            ${o ?? `norm ${v(a)}`}
+            ${o ?? `norm ${l(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}` : ""}`);
+		let r = t * 26 + 4, o = a != null && e.value > a, u = T(e.value), p = v.of(g[t], e.label, `${e.label}: ${l(e.value)}${c ? ` ${c}` : ""}`);
 		return _`
             <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
                @mousemove=${(e) => n.showTooltip(e, D(t))}
@@ -412,22 +412,22 @@ function pe(e, t) {
               <!-- 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))}
-                    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} />
-              <text x=${C + l + 6} y=${r + 16 - 3} font-weight="700"
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${p.state}"
+                    ${s(B(t, i.length))}
+                    x=${C} y=${r} width=${Math.max(0, u)} height=${16}
+                    fill=${o ? f : d}
+                    data-mark-id=${p.markId} role=${p.role} tabindex=${p.tabIndex}
+                    aria-pressed=${p.pressed} aria-label=${p.label}
+                    @click=${p.click} @keydown=${p.keydown} />
+              <text x=${C + u + 6} y=${r + 16 - 3} font-weight="700"
                     class="lintje-chart__data-label ${a == null ? "" : "lintje-chart__data-label--halo"}">
-                ${v(e.value)}${c ? ` ${c}` : ""}
+                ${l(e.value)}${c ? ` ${c}` : ""}
               </text>
             </g>
           `;
 	})}
       </svg>
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </figure>
   `;
@@ -435,47 +435,47 @@ function pe(e, t) {
 //#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);
+	let { controller: n, description: r } = t, { rows: i, target: a = 100 } = e, o = n.id, c = fe(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 = K(i.map((e) => e.label), l, { fontFamily: n.fontFamily }), { labelEnd: f, barStart: h } = u, g = (e) => Math.max(40, l - h - 70) * e / 110, v = h + g(a), y = (e) => e >= a ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
 		title: i[e].label,
 		rows: [{
 			label: "Voortgang",
-			value: c(i[e].value),
+			value: d(i[e].value),
 			color: y(i[e].value)
 		}, {
 			label: "Doel",
-			value: c(a),
+			value: d(a),
 			color: "var(--color-chart-emphasis)"
 		}]
 	}), x = Z(n, i.length, (e) => ({
-		x: m + g(i[e].value),
+		x: h + g(i[e].value),
 		y: e * 26 + 4,
 		content: b(e)
 	}));
 	return p`
-    <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
+    <figure class="lintje-chart lintje-chart--rows" ${m(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor @keydown=${(e) => n.dismiss(e)}>
-      <svg viewBox="0 0 ${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";
+		let r = t * 26 + 4, o = g(e.value), c = y(e.value), p = h + o + 46 > l, m = e.value >= a ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
 		return _`
             <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
                @mousemove=${(e) => n.showTooltip(e, b(t))}
                @mouseleave=${() => n.hideTooltip()}>
-              <rect x=${0} y=${r - 5} width=${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}
+              <rect x=${0} y=${r - 5} width=${l} height=${26} fill="transparent" />
+              <text x=${f} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${u.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${s(B(t, i.length))}
+                    x=${h} y=${r} width=${Math.max(0, o)} height=${16} fill=${c} />
+              <text x=${p ? h + o - 6 : h + o + 6} y=${r + 16 - 3}
                     text-anchor=${p ? "end" : "start"}
-                    class="lintje-chart__data-label ${p ? h : ""}" font-weight="700">${c(e.value)}</text>
+                    class="lintje-chart__data-label ${p ? m : ""}" font-weight="700">${d(e.value)}</text>
             </g>
           `;
 	})}
@@ -483,7 +483,7 @@ function me(e, t) {
               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>
       </svg>
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </figure>
   `;
@@ -491,40 +491,40 @@ function me(e, t) {
 //#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;
+	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 f = e.series.map((e) => ({
 		...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) => ({
+	})), h = f.filter((e) => !n.hiddenSeries.includes(e.label)), g = le(t, h.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = q(Math.max(...h.flatMap((e) => e.values), 1)), x = N(b, n.width, { fontFamily: n.fontFamily }), S = ne(t, { left: x.width }), C = S.height - S.bottom, w = k(0, i.length, S).width / Math.max(1, h.length), T = h.every((e) => e.values.every((e) => c(v(e, w), w - 2))), E = f.map((e, t) => ({
 		label: e.label,
 		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
 		shape: "square",
 		hidden: n.hiddenSeries.includes(e.label)
-	})), D = (e, t) => E[u.indexOf(e)]?.color ?? ue[t], A = (e) => ({
+	})), D = (e, t) => E[f.indexOf(e)]?.color ?? ue[t], A = (e) => ({
 		title: i[e],
-		rows: f.map((t, n) => ({
+		rows: h.map((t, n) => ({
 			label: t.label,
-			value: v(t.values[e]),
+			value: l(t.values[e]),
 			color: D(t, n)
 		}))
 	}), 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),
+		y: O(Math.max(0, ...h.map((t) => t.values[e])), y, S),
 		content: A(e)
 	})), M = i.map((e, t) => {
 		let r = k(t, i.length, S);
 		return _`
       <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
-         ${s(z(t, i.length))}
+         ${s(B(t, i.length))}
          @mousemove=${(e) => n.showTooltip(e, A(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)}`);
+        ${h.map((n, i) => {
+			let a = n.values[t], o = O(a, y, S), s = D(n, i), c = g.of(n.links?.[t], `${e} · ${n.label}`, `${e}, ${n.label}: ${l(a)}`);
 			return _`
             <g>
               <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
@@ -534,7 +534,7 @@ function he(e, t) {
                     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}
+                            text-anchor="middle" class="lintje-chart__data-label">${v(a, w)}</text>` : u}
             </g>
           `;
 		})}
@@ -543,15 +543,15 @@ function he(e, t) {
 	});
 	return p`
     <div class="lintje-chart-wrap ${o ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
-      ${ee({
+      ${z({
 		items: E,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
-		id: c,
+		id: d,
 		ticks: b,
 		max: y,
 		area: S,
@@ -565,7 +565,7 @@ function he(e, t) {
 		interactive: g.interactive,
 		keys: j
 	}, M)}
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -615,10 +615,10 @@ var ve = /* @__PURE__ */ new Set([
 	"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;
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, normalized: o = !1, totalOnTop: f = !0, small: h = !1 } = e, g = n.id;
 	n.measure({
 		width: !0,
-		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
 	let y = e.series.map((e) => ({
@@ -633,26 +633,26 @@ 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) => {
+	} : q(Math.max(...x, 1)), w = N(C, n.width, { fontFamily: n.fontFamily }), T = ne(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: A } = k(0, i.length, T), j = f && !o && x.every((e) => c(v(e, A), A - 4)), M = _e(y.length), P = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], I = (t) => {
 		let n = e.series[t].color;
 		return (n == null ? t === 0 : ve.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
 	}, L = (e) => ({
 		title: i[e],
 		rows: y.map((t, n) => ({
 			label: t.label,
-			value: o ? c(t.values[e] / x[e] * 100) : v(t.values[e]),
+			value: o ? d(t.values[e] / x[e] * 100) : l(t.values[e]),
 			color: P(t, n)
 		}))
 	}), 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) => ({
+	})), V = y.map((e, t) => ({
 		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) => {
+	})), H = i.map((e, t) => {
+		let r = k(t, i.length, T), a = 0, f = y.map((e, n) => {
 			let r = e.values[t], i = o ? r / x[t] * 100 : r, s = O(a, S, T);
 			a += i;
 			let c = O(a, S, T);
@@ -666,7 +666,7 @@ function ye(e, t) {
 		});
 		return _`
       <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, L(t))}
          @mouseleave=${() => n.hideTooltip()}>
         <!-- The hit area under the whole column, so the tooltip also follows the empty
@@ -675,8 +675,8 @@ function ye(e, t) {
         <rect x=${r.x} y=${T.top} width=${r.width} height=${E - T.top} fill="transparent" />
         <!-- The segments in one group, so the column lifts on hover as a whole. -->
         <g class="lintje-chart__bar">
-          ${u.map((n) => {
-			let i = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${v(n.row.values[t])}`);
+          ${f.map((n) => {
+			let i = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${l(n.row.values[t])}`);
 			return _`
             <rect class="lintje-chart__mark lintje-chart__segment ${i.state}"
                   x=${r.x} y=${n.y1} width=${r.width} height=${n.height}
@@ -688,19 +688,19 @@ function ye(e, t) {
 		})}
         </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}
+        ${o ? f.map((e) => e.height >= 16 && c(d(e.value), D - 4) ? _`<text x=${r.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
+                        class="lintje-chart__data-label ${I(e.j)}">${d(e.value)}</text>` : u) : u}
         ${j ? _`<text x=${r.center} y=${O(x[t], S, T) - 5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${m(x[t], r.bandWidth)}</text>` : l}
+                      class="lintje-chart__data-label" font-weight="700">${v(x[t], r.bandWidth)}</text>` : u}
       </g>
     `;
 	});
 	return p`
-    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e) || b.escape(e)}>
-      ${ee({ items: B })}
-      ${te({
+      ${z({ items: V })}
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: g,
 		ticks: C,
@@ -715,8 +715,8 @@ function ye(e, t) {
 		})),
 		interactive: b.interactive,
 		keys: R
-	}, V)}
-      ${H(n)}
+	}, H)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -764,38 +764,38 @@ function we(e, t, 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;
+	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 = _e(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);
+	})), v = g.filter((e) => !e.hidden), y = we(n, g.map((e) => e.label).join("\0"), g.map((e) => +!e.hidden)), b = y.some((e, t) => e !== +!g[t].hidden), x = xe.get(n), S = g.map(() => i.map(() => !1)), C = g.map(() => i.map(() => 0)), w = g.map(() => i.map(() => 0)), T = i.map(() => !1);
 	i.forEach((e, t) => {
 		let n = 0;
-		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);
 		});
 	});
-	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 E = y.some((e) => e > 0), k = i.map((e, t) => g.map((e) => e.values[t]).filter((e) => e != null)).filter((e) => e.length > 0).map((e) => e.reduce((e, t) => e + t, 0)), { max: j, ticks: M } = q(Math.max(...k, 1)), P = N(M, n.width, {
 		fontFamily: n.fontFamily,
-		minimum: Math.ceil(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(h(i[0] ?? "", n.fontFamily) / 2)
+	}), F = ne(t, { left: P.width }), I = F.height - F.bottom, L = (e) => A(e, d, F), R = (e) => O(e, j, F), B = (e) => {
 		let t = [];
 		return i.forEach((n, r) => {
 			if (!e(r)) return;
 			let i = t[t.length - 1];
 			i && i[i.length - 1] === r - 1 ? i.push(r) : t.push([r]);
 		}), t;
-	}, B = i.map((e, t) => {
+	}, V = i.map((e, t) => {
 		let n = 0;
-		for (let e of g) {
+		for (let e of v) {
 			let r = e.values[t];
 			if (r == null) return {
 				level: n,
@@ -805,43 +805,43 @@ function Te(e, t) {
 		}
 		return {
 			level: n,
-			complete: g.length > 0
+			complete: v.length > 0
 		};
-	}), V = m.map((e) => ({
+	}), H = 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) => ({
+	})), te = Math.max(1, Math.ceil(d / 8)), W = i.map((e, t) => ({
 		label: e,
 		x: L(t),
 		i: t
-	})).filter((e) => e.i % ne === 0), W = g.length < m.length ? "Totaal getoond" : "Totaal";
-	function G(e) {
+	})).filter((e) => e.i % te === 0), G = v.length < g.length ? "Totaal getoond" : "Totaal";
+	function K(e) {
 		return {
 			title: i[e],
-			rows: [...[...g].reverse().map((t) => ({
+			rows: [...[...v].reverse().map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? be : v(t.values[e]),
+				value: t.values[e] == null ? be : l(t.values[e]),
 				color: t.color
-			})), ...g.length > 0 ? [{
-				label: W,
-				value: B[e].complete ? v(B[e].level) : be,
+			})), ...v.length > 0 ? [{
+				label: G,
+				value: V[e].complete ? l(V[e].level) : be,
 				divider: !0
 			}] : []]
 		};
 	}
-	let J = Z(n, u, (e) => ({
+	let J = Z(n, d, (e) => ({
 		x: L(e),
-		y: B[e].level > 0 ? R(B[e].level) : F.top,
-		content: G(e)
+		y: V[e].level > 0 ? R(V[e].level) : F.top,
+		content: K(e)
 	})), Y = (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) => {
+	}, re = (E ? B((e) => T[e]) : []).map((e) => {
+		let t = Math.max(0, e[0] - 1), r = Math.min(d - 1, e[e.length - 1] + 1), i = Array.from({ length: r - t }, (e, n) => t + n).map((e) => {
 			let [t, n] = Y(e);
 			return {
 				k: e,
@@ -854,7 +854,7 @@ function Te(e, t) {
 			from: a,
 			width: o,
 			ceiling: s,
-			fits: f(be, n.fontFamily) + 8 <= o && s - F.top >= 20
+			fits: h(be, n.fontFamily) + 8 <= o && s - F.top >= 20
 		};
 	}), X = (e, t) => t.map((t) => `${L(t)},${R(e[t])}`), $ = [
 		re.map((e) => _`
@@ -862,41 +862,41 @@ function Te(e, t) {
             points=${`${L(e.k)},${F.top} ${L(e.k + 1)},${F.top} ${L(e.k + 1)},${e.right} ${L(e.k)},${e.left}`} />`)}
         ${e.fits ? _`<text x=${e.from + e.width / 2} y=${(F.top + e.ceiling) / 2 + 4}
                       text-anchor="middle"
-                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${be}</text>` : l}
+                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${be}</text>` : u}
       `),
-		_`<g class="lintje-chart__reveal" ${h(x.attach)}>
-      ${m.map((e, t) => {
-			let n = z((e) => S[t][e]);
+		_`<g class="lintje-chart__reveal" ${m(x.attach)}>
+      ${g.map((e, t) => {
+			let n = B((e) => S[t][e]);
 			return _`<g>
           ${n.map((n) => n.length === 1 ? _`<circle cx=${L(n[0])} cy=${R(w[t][n[0]])} r="2.5" fill=${e.color} />` : _`<polygon fill=${e.color}
                       points=${[...X(w[t], n), ...X(C[t], n).reverse()].join(" ")} />`)}
         </g>`;
 		})}
       <!-- Between two parts a 1 px line in the surface: along each part's lower edge, not the floor. -->
-      ${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) => B((e) => S[t][e] && C[t][e] > 0).filter((e) => e.length > 1).map((e) => _`<polyline class="lintje-chart__segment" fill="none" points=${X(C[t], e).join(" ")} />`))}
     </g>`,
-		n.hoverIndex != null && !b ? 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] ? _`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
+                          cx=${L(n.hoverIndex)} cy=${R(w[t][n.hoverIndex])} />` : u) : u,
 		i.map((e, t) => {
-			let r = D(F) / Math.max(1, u - 1);
+			let r = D(F) / Math.max(1, d - 1);
 			return _`
         <rect x=${L(t) - r / 2} y=${F.top} width=${r}
               height=${I - F.top}
               fill="transparent"
-              @mousemove=${(e) => n.hoverAt(t, e, G(t))}
+              @mousemove=${(e) => n.hoverAt(t, e, K(t))}
               @mouseleave=${() => n.hoverAt(null)} />
       `;
 		})
 	];
 	return p`
     <div class="lintje-chart-wrap ${s ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({
-		items: V,
+      ${z({
+		items: H,
 		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: c,
 		ticks: M,
@@ -904,11 +904,11 @@ function Te(e, t) {
 		area: F,
 		formatTick: P.format,
 		axisTitle: a ?? o,
-		xLabels: U,
+		xLabels: W,
 		description: r,
 		keys: J
 	}, $)}
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -942,21 +942,21 @@ function ke(e) {
 	];
 }
 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) => ({
+	let { controller: n, description: r } = t, { donut: i = !1, centerValue: a, centerLabel: o, legendTable: c = !0, labelHeader: f = "Categorie" } = e, h = n.id, g = ke(e.segments).map((e) => ({
 		...e,
 		color: F(e.color)
-	})), g = m.map((e) => e.href ? {
+	})), v = g.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 = le(t, v), b = (e) => {
+		let t = y.of(v[e], g[e].label, g[e].label).state;
 		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
 	}, x = !!t.expanded;
 	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 = g.reduce((e, t) => e + t.value, 0), w = S / 2, T = i ? w * .62 : 0, E = _e(g.filter(Oe).length, e.color), D = -1, O = g.map((e) => (Oe(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : De(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = g.map((e, t) => {
 		let n = e.value / C, r = k, a = k + n * 360;
 		k = a;
 		let o = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(a, w);
@@ -973,15 +973,15 @@ function Ae(e, t) {
 		n.hoverSegment = e, n.requestUpdate();
 	};
 	return p`
-    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${h(n.attach)}
+    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${m(n.attach)}
          ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e) || y.escape(e)}>
       <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${R(y.interactive)}
-           class="lintje-pie-chart__svg" aria-labelledby="${f}-desc" ${s(M(f))}>
-        <desc id="${f}-desc">${r}</desc>
-        <defs>${P(f)}</defs>
+           class="lintje-pie-chart__svg" aria-labelledby="${h}-desc" ${s(M(h))}>
+        <desc id="${h}-desc">${r}</desc>
+        <defs>${P(h)}</defs>
         ${A.map(({ segment: e, i: t, d: r, color: i }) => {
-		let a = y.of(g[t], e.label, `${e.label}: ${v(e.value)} · ${c(e.value / C * 100)}`);
+		let a = y.of(v[t], e.label, `${e.label}: ${l(e.value)} · ${d(e.value / C * 100)}`);
 		return _`
           <path d=${r} fill=${i}
                 class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${a.state}"
@@ -994,7 +994,7 @@ function Ae(e, t) {
 				title: e.label,
 				rows: [{
 					label: "Aantal",
-					value: `${v(e.value)} · ${c(e.value / C * 100)}`,
+					value: `${l(e.value)} · ${d(e.value / C * 100)}`,
 					color: i
 				}]
 			});
@@ -1007,74 +1007,74 @@ 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"
-                      ${s({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : l}
+                      ${s({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : u}
         ${i && a ? _`
           <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${a}</text>
-          ${o ? _`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${o}</text>` : l}
-        ` : l}
+          ${o ? _`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${o}</text>` : u}
+        ` : u}
       </svg>
 
-      ${u ? p`
+      ${c ? p`
         <table class="lintje-pie-chart__table">
           <caption class="visually-hidden">Legenda: ${r}</caption>
           <thead>
             <tr>
-              <th scope="col" class="lintje-pie-chart__column-label">${d}</th>
+              <th scope="col" class="lintje-pie-chart__column-label">${f}</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">aantal</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">%</th>
             </tr>
           </thead>
           <tbody>
-            ${m.map((e, t) => p`
+            ${g.map((e, t) => p`
               <tr class="lintje-pie-chart__row ${j === t ? "is-hovered" : ""} ${b(t)}"
                   @mouseenter=${() => I(t)} @mouseleave=${() => I(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">${l(e.value)}</td>
+                <td class="lintje-pie-chart__value">${d(e.value / C * 100)}</td>
               </tr>
             `)}
           </tbody>
           <tfoot>
             <tr>
               <th scope="row" class="lintje-pie-chart__total-label">Totaal</th>
-              <td class="lintje-pie-chart__total">${v(C)}</td>
+              <td class="lintje-pie-chart__total">${l(C)}</td>
               <td class="lintje-pie-chart__total"></td>
             </tr>
           </tfoot>
         </table>
-      ` : l}
-      ${H(n)}
+      ` : u}
+      ${U(n)}
     </div>
   `;
 }
 //#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 = {
+	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 = {
+	}, h = {
 		...e.right,
 		color: F(e.right.color)
-	}, m = n.id;
+	}, 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 v = f.color ?? "var(--color-chart-default)", y = h.color ?? "var(--color-chart-dark-yellow)", b = q(Math.max(...f.values.filter((e) => e != null), 1)), x = q(Math.max(...h.values.filter((e) => e != null), a ?? 0, 1)), S = N(b.ticks, n.width, { fontFamily: n.fontFamily }), C = N(x.ticks, n.width, { fontFamily: n.fontFamily }), w = ne(t, {
 		left: S.width,
 		right: C.width
 	}), T = w.height - w.bottom, E = [
 		{
-			label: `${d.label} (linkeras)`,
-			color: g,
+			label: `${f.label} (linkeras)`,
+			color: v,
 			shape: "square"
 		},
 		{
-			label: `${f.label} (rechteras)`,
+			label: `${h.label} (rechteras)`,
 			color: y,
 			shape: "line"
 		},
@@ -1083,48 +1083,48 @@ function je(e, t) {
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}]
-	], D = Math.max(1, Math.ceil(i.length / 8)), A = n.hoverIndex, j = V(y), M = [[]];
-	f.values.forEach((e, t) => {
+	], D = Math.max(1, Math.ceil(i.length / 8)), A = n.hoverIndex, j = H(y), M = [[]];
+	h.values.forEach((e, t) => {
 		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${k(t, i.length, w).center},${O(e, x.max, w)}`);
 	});
-	let P = (e, t) => e == null ? "geen gegevens" : `${v(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
+	let P = (e, t) => e == null ? "geen gegevens" : `${l(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
 		title: i[e],
 		rows: [{
-			label: d.label,
-			value: P(d.values[e], d.unit),
-			color: g
-		}, {
 			label: f.label,
 			value: P(f.values[e], f.unit),
+			color: v
+		}, {
+			label: h.label,
+			value: P(h.values[e], h.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)),
+		y: Math.min(f.values[e] == null ? T : O(f.values[e], b.max, w), h.values[e] == null ? T : O(h.values[e], x.max, w)),
 		content: I(e)
 	}));
 	return p`
     <div class="lintje-chart-wrap ${c ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({ items: E })}
+      ${z({ items: 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}
+             aria-labelledby="${g}-desc" width=${w.width} height=${w.height}
              tabindex="0" @keydown=${L.keydown} @focus=${L.focus} @blur=${L.blur}>
-          <desc id="${m}-desc">${r}</desc>
+          <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);
+          ${d > 0 ? (() => {
+		let e = k(i.length - d, i.length, w);
 		return _`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
                              width=${w.width - w.right - e.x + (e.bandWidth - e.width) / 2}
-                             height=${T - w.top} fill="url(#hatch-${m})" />`;
-	})() : l}
+                             height=${T - w.top} fill="url(#hatch-${g})" />`;
+	})() : u}
 
           ${b.ticks.map((e) => {
 		let t = O(e, b.max, w), n = e === 0;
@@ -1133,7 +1133,7 @@ function je(e, t) {
                 <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=${v}>
                   ${S.format(e)}
                 </text>
               </g>
@@ -1145,27 +1145,27 @@ function je(e, t) {
           `)}
 
           <!-- 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.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${v} stroke-width="2" />
           <line x1=${w.width - w.right} x2=${w.width - w.right} y1=${w.top} y2=${T}
                 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) => {
+          ${f.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})" />`;
+                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${g})" />`;
 		let r = O(e, b.max, w);
 		return _`
               <g class="lintje-chart__bar-group ${A === t ? "is-hovered" : ""}"
-                 ${s(z(t, i.length))}>
+                 ${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, T - r)} fill=${v} />
               </g>
             `;
 	})}
 
-          ${a == null ? l : _`<line x1=${w.left} x2=${w.width - w.right}
+          ${a == null ? u : _`<line x1=${w.left} x2=${w.width - w.right}
                         y1=${O(a, x.max, w)} y2=${O(a, x.max, w)}
                         stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="4 3" />`}
 
@@ -1174,7 +1174,7 @@ function je(e, t) {
 		let t = e.join(" "), [n, r] = e[0].split(",");
 		return _`
                   ${j && e.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing"
-                                    stroke=${j} points=${t} />` : l}
+                                    stroke=${j} points=${t} />` : u}
                   ${e.length === 1 ? _`<circle cx=${n} cy=${r} r="2.5" fill=${y} />` : _`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
                 `;
 	})}
@@ -1186,9 +1186,9 @@ function je(e, t) {
           `)}
 
           <!-- 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}
+          ${A != null && h.values[A] != null ? _`<circle class="lintje-chart__hover-point" r="4" fill=${y}
                           cx=${k(A, i.length, w).center}
-                          cy=${O(f.values[A], x.max, w)} />` : l}
+                          cy=${O(h.values[A], x.max, w)} />` : u}
           ${i.map((e, t) => {
 		let r = k(t, i.length, w);
 		return _`
@@ -1200,7 +1200,7 @@ function je(e, t) {
 	})}
         </svg>
       </figure>
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
@@ -1212,7 +1212,7 @@ function Le(e, t, n, r) {
 	let i = 5.5, a = [];
 	for (let [o, s] of e.entries()) {
 		if (!t.includes(s.label)) continue;
-		let c = f(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, p = [{
+		let c = h(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, f = [{
 			anchor: "end",
 			x: s.x - Fe,
 			left: s.x - Fe - c
@@ -1231,9 +1231,9 @@ function Le(e, t, n, r) {
 			top: e.y - i,
 			bottom: e.y + i
 		})));
-		if (!p) return [];
+		if (!f) return [];
 		a.push({
-			...p,
+			...f,
 			label: s.label,
 			y: l
 		});
@@ -1245,7 +1245,7 @@ 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}` : ""}`;
+var Re = (e) => e.charAt(0).toUpperCase() + e.slice(1), ze = (e, t) => `${l(e)}${t ? ` ${t}` : ""}`;
 function Be(e) {
 	let t = new Set(e.series.map((e) => e.color).filter(I)), n = L.filter((e) => !t.has(e)), r = 0;
 	return e.series.map((e) => {
@@ -1257,10 +1257,10 @@ function Be(e) {
 	});
 }
 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;
+	let { controller: r, description: i } = n, { axisTitle: a, unit: o, xTitle: c, xUnit: d, threshold: h, thresholdLabel: g, small: v = !1 } = e, y = r.id;
 	r.measure({
 		width: !0,
-		height: n.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: n.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!n.expanded && !n.mobile
 	});
 	let b = Be(e), x = e.series.map((e, t) => ({
@@ -1270,11 +1270,11 @@ function Ve(e, n) {
 		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, {
+	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = q(Math.max(...w.map(({ point: e }) => e.x), 1), n.mobile ? 3 : 6), k = q(Math.max(...w.map(({ point: e }) => e.y), h ?? 0, 1)), A = N(k.ticks, r.width, { fontFamily: r.fontFamily }), M = ne(n, {
 		left: A.width,
 		bottom: Pe
 	}), P = (e) => M.left + D(M) * e / E.max, F = E.ticks.map((e, t) => ({
-		label: v(e),
+		label: l(e),
 		x: P(e),
 		anchor: t === E.ticks.length - 1 ? "end" : "middle"
 	})), I = [...x.map((e) => ({
@@ -1283,8 +1283,8 @@ function Ve(e, n) {
 		shape: "point",
 		symbol: e.symbol,
 		hidden: S(e)
-	})), ...f == null ? [] : [{
-		label: m ?? "Norm",
+	})), ...h == null ? [] : [{
+		label: g ?? "Norm",
 		color: "var(--color-chart-emphasis)",
 		shape: "dashed",
 		fixed: !0
@@ -1314,54 +1314,54 @@ function Ve(e, n) {
 	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),
+	}), V = (e) => R(w[e].point), te = Z(r, w.length, (e) => ({
+		...V(e),
 		content: L(e)
-	})), U = w.map(({ point: e, row: t }) => e.href ? {
+	})), W = w.map(({ point: e, row: t }) => e.href ? {
 		id: e.id ?? `${t.label} · ${e.label}`,
 		href: e.href
-	} : null), 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), G = le(n, W), K = w.map(({ point: e }, t) => G.of(W[t], e.label, re(L(t)))), J = Le(w.map((e, t) => ({
 		label: e.point.label,
-		...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) => {
+		...V(t)
+	})), e.dataLabels ?? [], M, r.fontFamily), Y = h == null ? 0 : O(h, k.max, M), X = r.hoverIndex == null ? void 0 : w[r.hoverIndex], $ = (e) => {
 		let n = e.target.closest?.("[data-point]");
 		if (n) return Number(n.getAttribute("data-point"));
 		let r = e.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? M.width / i.width : 1, o = (e.clientX - (i?.left ?? 0)) * a, s = (e.clientY - (i?.top ?? 0)) * a, c = t(r, "--h-target", 48) / 2, l = null, u = c;
 		return w.forEach((e, t) => {
-			let { x: n, y: r } = B(t), i = Math.hypot(n - o, r - s);
+			let { x: n, y: r } = V(t), i = Math.hypot(n - o, r - s);
 			i <= u && (l = t, u = i);
 		}), l;
 	}, 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];
-		n?.clickable && n.click !== l && n.click();
-	}, oe = X != null && G[r.hoverIndex]?.clickable, se = [f == null ? l : _`
+		let t = $(e), n = t == null ? null : K[t];
+		n?.clickable && n.click !== u && n.click();
+	}, oe = X != null && K[r.hoverIndex]?.clickable, se = [h == null ? u : _`
         <g class="lintje-chart__reference">
           <line x1=${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)}`}
+            ${g ?? `norm ${ze(h, o)}`}
           </text>
         </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} />
       <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];
+        ${f(C, (e) => e.key, ({ point: e, row: t, key: n }, r) => {
+		let { x: i, y: a } = R(e), o = H(t.color), c = T.get(n), l = c == null ? void 0 : K[c];
 		return _`
-              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
-                    ${s(z(r, C.length))}
+              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${l?.state ?? "is-hidden"}"
+                    ${s(B(r, C.length))}
                     d=${j(t.symbol, Me, i, a)} fill=${t.color}
-                    stroke=${o ?? l} stroke-width=${o ? 1 : l}
-                    data-point=${c ?? l}
-                    data-mark-id=${u?.markId ?? l} role=${u?.role ?? l}
-                    tabindex=${u?.tabIndex ?? l}
-                    aria-pressed=${u?.pressed ?? l} aria-label=${u?.label ?? l}
-                    @keydown=${u?.keydown ?? l} />
+                    stroke=${o ?? u} stroke-width=${o ? 1 : u}
+                    data-point=${c ?? u}
+                    data-mark-id=${l?.markId ?? u} role=${l?.role ?? u}
+                    tabindex=${l?.tabIndex ?? u}
+                    aria-pressed=${l?.pressed ?? u} aria-label=${l?.label ?? u}
+                    @keydown=${l?.keydown ?? u} />
             `;
 	})}
       </g>
@@ -1373,22 +1373,22 @@ function Ve(e, n) {
 
       <!-- 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);
+		let { x: e, y: t } = V(r.hoverIndex), n = H(X.row.color), i = j(X.row.symbol, Ne, e, t);
 		return _`
             <path class="lintje-chart__hover-point" d=${i} fill=${X.row.color} />
-            ${n ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${n} />` : l}
+            ${n ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${n} />` : u}
           `;
-	})() : l}
+	})() : u}
     </g>`];
 	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
-         ${h(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || W.escape(e)}>
-      ${ee({
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || G.escape(e)}>
+      ${z({
 		items: I,
 		onToggle: (e) => r.toggleSeries(e)
 	})}
-      ${te({
+      ${ee({
 		fontFamily: r.fontFamily,
 		id: y,
 		ticks: k.ticks,
@@ -1399,10 +1399,10 @@ function Ve(e, n) {
 		xLabels: F,
 		xTitle: c,
 		description: i,
-		interactive: W.interactive,
-		keys: ne
+		interactive: G.interactive,
+		keys: te
 	}, se)}
-      ${H(r)}
+      ${U(r)}
       ${Q(r)}
     </div>
   `;
@@ -1452,7 +1452,7 @@ function qe(e) {
 	return s;
 }
 function Je(e, t, n = 0) {
-	let r = v(e, n), i = t?.trim() ?? "";
+	let r = l(e, n), i = t?.trim() ?? "";
 	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
 }
 function Ye(e) {
@@ -1464,7 +1464,7 @@ 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);
+	let n = (t.bounds?.length ? t.bounds.slice(0, Ue - 1) : null) ?? qe(e), r = Ye(n), i = (e) => Je(e, t.unit, r), a = (e) => l(e, r);
 	if (n.length === 0) {
 		let e = He.length - 1;
 		return [{
@@ -1515,16 +1515,16 @@ function $e(e) {
 	};
 }
 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, {
+	let { controller: n, description: r, mobile: i = !1 } = t, a = i ? $e(e) : void 0, o = a?.columnLabels ?? e.columnLabels, c = a?.rowLabels ?? e.rowLabels, d = a?.values ?? e.values, f = a ? a.links : e.links, h = a ? !0 : e.compact ?? !1, { unit: g } = e, _ = le(t, (f ?? []).flat()), v = Xe(d, {
 		bounds: e.bounds,
-		unit: m
-	}), y = (e) => Ze(_, e);
+		unit: g
+	}), y = (e) => Ze(v, e);
 	n.measure({});
 	let b = n.selectedCell, x = n.dimmedClass;
 	return p`
-    <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" : ""}">
+    <div class="lintje-heatmap" ${m(n.attach)} ?data-in-view=${n.inView}
+         data-tooltip-anchor @keydown=${_.escape}>
+      <table class="lintje-heatmap__grid ${h ? "is-compact" : ""}">
         <caption class="visually-hidden">${r}</caption>
         <thead>
           <tr>
@@ -1539,7 +1539,7 @@ function et(e, t) {
                 <span class="lintje-heatmap__row-label-text">${e}</span>
               </th>
               ${o.map((r, i) => {
-		let a = u[t]?.[i];
+		let a = d[t]?.[i];
 		if (a == null) return p`
                     <td class="lintje-heatmap__slot">
                       <div class="lintje-heatmap__cell is-empty"
@@ -1548,35 +1548,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;
+		let u = y(a), m = _.of(f?.[t]?.[i], `${e} · ${o[i]}`), S = !m.clickable && b?.row === t && b?.column === i;
 		return p`
                   <td class="lintje-heatmap__slot">
                     <button
                       type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${_[l].ramp} ${S ? "is-selected" : ""} ${x != null && x !== l ? "is-dimmed" : ""} ${h.state}"
-                      data-mark-id=${h.markId}
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[u].ramp} ${S ? "is-selected" : ""} ${x != null && x !== u ? "is-dimmed" : ""} ${m.state}"
+                      data-mark-id=${m.markId}
                       ${s({
-			"--lintje-cell": _[l].color,
-			...ne(i, t, o.length, c.length)
+			"--lintje-cell": v[u].color,
+			...te(i, t, o.length, c.length)
 		})}
-                      @click=${h.clickable ? h.click : () => {
+                      @click=${m.clickable ? m.click : () => {
 			n.selectedCell = S ? null : {
 				row: t,
 				column: i
 			}, n.requestUpdate();
 		}}
-                      @mousemove=${f ? void 0 : (t) => n.showTooltip(t, {
+                      @mousemove=${h ? 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[u].label}`,
+				value: Je(a, g),
+				color: v[u].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=${h ? void 0 : () => n.hideTooltip()}
+                      aria-pressed=${m.clickable ? m.pressed : S}
+                      aria-label="${e} ${o[i]}: ${Je(a, g)}, klasse ${v[u].label}"
+                    >${l(a)}</button>
                   </td>
                 `;
 	})}
@@ -1586,17 +1586,17 @@ 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 ? p`
         <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}
+          ${Je(d[b.row][b.column], g)} · klasse
+          ${v[y(d[b.row][b.column])].label}
         </p>
-      ` : l}
+      ` : u}
 
       <!-- Class legend: clickable, dims the other classes to .25. -->
       <ul class="lintje-heatmap__legend">
-        ${_.map((e, t) => p`
+        ${v.map((e, t) => p`
           <li>
             <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
                     @click=${() => {
@@ -1609,7 +1609,7 @@ function et(e, t) {
           </li>
         `)}
       </ul>
-      ${H(n)}
+      ${U(n)}
     </div>
   `;
 }
@@ -1617,7 +1617,7 @@ function et(e, t) {
 //#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));
+	return l(e, +!Number.isInteger(e));
 }
 function ot(e, t) {
 	let n = t ? ` ${t}` : "";
@@ -1625,7 +1625,7 @@ function ot(e, t) {
 }
 function st(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 = h(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
 		return {
 			x: i ? e.x + 6 : e.x - 6,
 			anchor: i ? "start" : "end",
@@ -1640,56 +1640,56 @@ function st(e, t, n = "") {
 	}));
 }
 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;
+	let { controller: n, description: r } = t, { bins: i, axisTitle: a, xTitle: o, unit: c, median: f, threshold: g, small: v = !1 } = e, y = e.label ?? "Aantal", b = F(e.color) ?? "var(--color-chart-default)", x = n.id, S = (e) => c ? `${e} ${c}` : e;
 	n.measure({
 		width: !0,
-		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (v ? "--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, {
+	let C = i.map((e) => e.count).filter((e) => e != null), w = C.length === i.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = q(Math.max(...C, 1)), D = N(E, n.width, { fontFamily: n.fontFamily }), k = ne(t), A = ne(t, {
 		left: D.width,
 		bottom: 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;
+	}), j = A.height - A.bottom, M = A.width - A.right, P = i[0]?.from ?? 0, I = i[i.length - 1], L = i.length > 1 ? i[i.length - 1].from - i[i.length - 2].from : 1, R = I ? I.to ?? I.from + L : 1, V = (e) => A.left + (e - P) / Math.max(R - P, 2 ** -52) * (M - A.left), H = i.map((e) => {
+		let t = V(e.from), n = V(e.to ?? R) - t;
 		return {
 			x: t,
 			width: n,
 			center: t + n / 2
 		};
-	}), ne = (e) => {
+	}), te = (e) => {
 		let t = i[e].count;
 		return {
-			title: ot(i[e], u),
+			title: ot(i[e], c),
 			rows: [{
 				label: y,
-				value: t == null ? "geen gegevens" : v(t),
+				value: t == null ? "geen gegevens" : l(t),
 				color: b
 			}, ...t != null && w != null && w > 0 ? [{
 				label: "Aandeel",
-				value: c(t / w * 100, 1),
+				value: d(t / w * 100, 1),
 				color: b
 			}] : []]
 		};
-	}, W = Z(n, i.length, (e) => ({
-		x: V[e].center,
+	}, G = Z(n, i.length, (e) => ({
+		x: H[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) => ({
+		content: te(e)
+	})), K = I?.to == null && i.length > 0, J = [...i.slice(0, K ? -1 : void 0).map((e) => e.from), ...K ? [] : I ? [I.to] : []].map((e) => ({
 		label: at(e),
-		x: B(e)
-	})), Y = G ? {
+		x: V(e)
+	})), Y = K ? {
 		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)}`),
+		x: H[H.length - 1].center
+	} : null, re = J.length > 1 ? (J[J.length - 1].x - J[0].x) / (J.length - 1) : 1, X = Math.max(1, Math.ceil(nt / re)), $ = W(J.filter((e, t) => t % X === 0), n.fontFamily), ie = (e, t) => Math.abs(t.x - e.x) < (h(e.label, n.fontFamily) + h(t.label, n.fontFamily)) / 2 + rt, ae = K ? Y : J[J.length - 1];
+	ae && !$.includes(ae) && ($.length && ie($[$.length - 1], ae) && ($ = $.slice(0, -1)), K || ($ = [...$, ae]));
+	let oe = K ? I.from : R, se = (e) => e != null && e >= P && e <= oe, ce = [...se(f) ? [{
+		x: V(f),
+		text: e.medianLabel ?? S(`mediaan ${at(f)}`),
 		bold: !0,
 		dashed: !1
-	}] : [], ...se(m) ? [{
-		x: B(m),
-		text: e.thresholdLabel ?? S(`norm ${at(m)}`),
+	}] : [], ...se(g) ? [{
+		x: V(g),
+		text: e.thresholdLabel ?? S(`norm ${at(g)}`),
 		bold: !1,
 		dashed: !0
 	}] : []], le = st(ce, A, n.fontFamily), ue = (e) => e.charAt(0).toUpperCase() + e.slice(1), de = [
@@ -1698,23 +1698,23 @@ function ct(e, t) {
 			color: b,
 			shape: "square"
 		},
-		...se(d) ? [{
+		...se(f) ? [{
 			label: ue(e.medianLabel ?? "Mediaan"),
 			color: "var(--color-chart-emphasis)",
 			shape: "line"
 		}] : [],
-		...se(m) ? [{
+		...se(g) ? [{
 			label: ue(e.thresholdLabel ?? "Norm"),
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}] : []
 	], fe = (e) => {
-		let t = V[e], n = i[e].count;
+		let t = H[e], n = i[e].count;
 		if (n == null) return _`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
                        height=${Math.max(0, j - A.top)} fill="url(#hatch-${x})" />`;
 		let r = O(n, T, A);
 		return _`
-      <g class="lintje-chart__bar-group" ${s(z(e, i.length))}>
+      <g class="lintje-chart__bar-group" ${s(B(e, i.length))}>
         <rect class="lintje-chart__bar lintje-chart__segment" x=${t.x} y=${r} width=${t.width}
               height=${Math.max(0, j - r)} fill=${b} />
       </g>
@@ -1722,39 +1722,39 @@ function ct(e, t) {
 	}, 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,
+                  x=${H[pe].x} y=${O(me, T, A)} width=${H[pe].width}
+                  height=${Math.max(0, j - O(me, T, A))} fill=${b} />` : u,
 		$.map((e) => _`
         <line x1=${e.x} x2=${e.x} y1=${j} y2=${j + 4}
               stroke="var(--color-chart-zero)" stroke-width="1" />
         <text x=${e.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
       `),
-		Y ? _`<text x=${Y.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${Y.label}</text>` : l,
+		Y ? _`<text x=${Y.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${Y.label}</text>` : u,
 		ce.map((e, t) => {
 			let n = le[t];
 			return _`
         <g class="lintje-chart__reference">
           <line x1=${e.x} x2=${e.x} y1=${A.top} y2=${j}
                 stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed ? 1 : 1.5}
-                stroke-dasharray=${e.dashed ? "3 3" : l} />
+                stroke-dasharray=${e.dashed ? "3 3" : u} />
           <text x=${n.x} y=${n.y} text-anchor=${n.anchor}
                 class=${e.bold ? "lintje-chart__data-label lintje-chart__data-label--halo" : "lintje-chart__axis-label lintje-chart__axis-label--halo"}>${e.text}</text>
         </g>
       `;
 		}),
-		V.map((e, t) => _`
+		H.map((e, t) => _`
         <rect x=${e.x} y=${A.top} width=${e.width} height=${Math.max(0, j - A.top)}
               fill="transparent"
-              @mousemove=${(e) => n.hoverAt(t, e, ne(t))}
+              @mousemove=${(e) => n.hoverAt(t, e, te(t))}
               @mouseleave=${() => n.hoverAt(null)} />
       `)
 	];
 	return p`
-    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
-         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${(e) => n.dismiss(e)}>
-      ${ee({ items: de })}
-      ${te({
+      ${z({ items: de })}
+      ${ee({
 		fontFamily: n.fontFamily,
 		id: x,
 		ticks: E,
@@ -1764,16 +1764,317 @@ function ct(e, t) {
 		xTitle: o,
 		description: r,
 		formatTick: D.format,
-		keys: W
+		keys: G
 	}, he)}
-      ${H(n)}
+      ${U(n)}
       ${Q(n)}
     </div>
   `;
 }
 //#endregion
+//#region src/components/shared/charts/radar-chart/radar-chart.ts
+var lt = 16, ut = 6, dt = 18, ft = 16, pt = 3, mt = 4, ht = 8, gt = 40, _t = .7, vt = 420, yt = 12, bt = 2;
+function xt(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(I)), n = L.filter((e) => !t.has(e)), r = 0;
+	return e.series.map((t) => {
+		let i = e.axes.map((e, n) => t.values[n] ?? null);
+		if (t.comparison) return {
+			label: t.label,
+			values: i,
+			comparison: !0,
+			color: "var(--color-chart-secondary)"
+		};
+		let a = I(t.color) ? t.color : n[r++ % n.length];
+		return {
+			label: t.label,
+			values: i,
+			comparison: !1,
+			color: F(t.color ?? a),
+			symbol: a
+		};
+	});
+}
+function St(e) {
+	let t = e.length, n = e.findIndex((e) => e == null);
+	if (n === -1) return {
+		closed: !0,
+		runs: [e.map((e, t) => t)]
+	};
+	let r = [], i = [];
+	for (let a = 1; a <= t; a++) {
+		let o = (n + a) % t;
+		e[o] == null ? (i.length && r.push(i), i = []) : i.push(o);
+	}
+	return i.length && r.push(i), {
+		closed: !1,
+		runs: r
+	};
+}
+function Ct(e, t = e / 5) {
+	let n = [];
+	for (let r = 1; r * t < e - t * 1e-6; r++) n.push(Math.round(r * t * 1e6) / 1e6);
+	return [...n, e];
+}
+var wt = (e) => Number.isInteger(e) ? 0 : String(e).split(".")[1]?.length ?? 0;
+function Tt(e, t, n) {
+	let r = e.area ?? "emphasis", i = t.filter((e) => !e.comparison);
+	return new Set(i.filter((e) => e.complete && r !== "never" && (r === "always" || i.length === 1 || e.label === n)).map((e) => e.label));
+}
+function Et(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, { axes: a, unit: o, threshold: c, small: u = !1 } = e, d = a.length, f = xt(e), h = (e) => n.hiddenSeries.includes(e.label), g = f.filter((e) => !h(e)), _ = f.filter((e) => !e.comparison), v = g.filter((e) => !e.comparison), y = Math.min(2, Math.max(0, ...f.flatMap((e) => e.values.filter((e) => e != null)).map(wt), ...c == null ? [] : [wt(c)])), b = (e) => l(e, y), x = (e) => `${b(e)}${o ? ` ${o}` : ""}`, S = (e) => {
+		let t = Math.round(e * 10 ** y) / 10 ** y;
+		return t === 0 ? b(0) : `${t > 0 ? "+" : "−"}${b(Math.abs(t))}`;
+	}, C = v.length > 1 && v.some((e) => e.label === n.emphasis) ? n.emphasis : null, w = Tt(e, g.map((e) => ({
+		...e,
+		complete: e.values.every((e) => e != null)
+	})), C), T = a.map((e, t) => f.some((e) => e.values[t] == null)), E = e.dataLabels !== !1 && _.length === 1, D = E && !h(_[0]), O = [
+		...f.map((e) => e.comparison ? {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			hidden: h(e)
+		} : {
+			label: e.label,
+			color: e.color,
+			shape: "line",
+			symbol: e.symbol,
+			hidden: h(e)
+		}),
+		...c == null ? [] : [{
+			label: e.thresholdLabel ?? `Norm ${x(c)}`,
+			color: "var(--color-chart-emphasis)",
+			shape: "dashed",
+			fixed: !0
+		}],
+		...T.some(Boolean) ? [{
+			label: "Geen gegevens",
+			shape: "hatch",
+			fixed: !0
+		}] : []
+	];
+	function k(t) {
+		let n = g.map((e) => {
+			let n = e.values[t];
+			return {
+				label: e.label,
+				value: n == null ? "geen gegevens" : x(n),
+				color: e.color,
+				symbol: e.symbol,
+				marker: e.comparison ? "line" : void 0
+			};
+		});
+		c != null && n.push({
+			label: e.thresholdLabel ?? "Norm",
+			value: x(c),
+			color: "var(--color-chart-emphasis)",
+			marker: "dashed"
+		});
+		let [r] = v, i = v.length === 1 ? r.values[t] : null;
+		if (i != null) {
+			let e = g.find((e) => e.comparison), r = e?.values[t];
+			e && r != null && n.push({
+				label: `t.o.v. ${e.label}`,
+				value: S(i - r),
+				divider: !0
+			}), c != null && n.push({
+				label: "t.o.v. norm",
+				value: S(i - c),
+				divider: !(e && r != null)
+			});
+		}
+		return {
+			title: a[t],
+			rows: n
+		};
+	}
+	let { width: A, height: j, body: M, at: N } = (i ? Ot : Dt)({
+		spec: e,
+		controller: n,
+		options: t,
+		layers: f,
+		shown: g,
+		fills: w,
+		emphasis: C,
+		missing: T,
+		reserve: E,
+		labelled: D,
+		hidden: h,
+		format: b,
+		contentAt: k
+	}), P = Z(n, d, (e) => ({
+		...N(e),
+		content: k(e)
+	}));
+	return p`
+    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${z({
+		items: O,
+		onToggle: (e) => n.toggleSeries(e),
+		onEmphasis: _.length > 1 ? (e) => n.emphasise(e) : void 0
+	})}
+      <figure class="lintje-chart">
+        <svg viewBox="0 0 ${A} ${j}" width=${A} height=${j}
+             class="lintje-chart__svg lintje-radar ${i ? "lintje-radar--rows" : ""}"
+             ${s({ height: `${j}px` })}
+             role=${R(!1)} aria-labelledby="${n.id}-desc" tabindex="0"
+             @keydown=${P.keydown} @focus=${P.focus} @blur=${P.blur}>
+          <desc id="${n.id}-desc">${r}</desc>
+          <defs>
+            <pattern id="hatch-${n.id}" width="6" height="6" patternUnits="userSpaceOnUse"
+                     patternTransform="rotate(45)">
+              <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
+            </pattern>
+          </defs>
+          ${M}
+        </svg>
+      </figure>
+      ${U(n)}
+      ${Q(n)}
+    </div>
+  `;
+}
+function Dt({ spec: e, controller: t, options: n, layers: r, shown: i, fills: a, emphasis: o, missing: c, reserve: d, labelled: f, hidden: p, format: m, contentAt: g }) {
+	let { axes: v, max: y, threshold: b, small: x = !1 } = e, S = v.length, C = x ? "--chart-h-small" : "--chart-h-main";
+	t.measure({
+		width: !0,
+		height: n.height ?? C,
+		fit: !!n.expanded
+	});
+	let w = t.width, T = n.height ?? (n.expanded || x ? t.height : Math.max(t.height, Math.min(vt, Math.round(w * _t)))), E = (e) => -Math.PI / 2 + 2 * Math.PI * e / S, D = t.fontFamily, O = (e) => h(e, D) * 14 / 12, k = Math.max(0, ...v.map((e, t) => Math.abs(Math.cos(E(t))) < .1 ? 0 : O(e) + ut + 2)), A = 24 + (d ? ft : 0), M = Math.max(gt, Math.min(w / 2 - k - lt, T / 2 - A - lt)), N = w / 2, P = T / 2, F = (e, t) => ({
+		x: N + t * Math.cos(E(e)),
+		y: P + t * Math.sin(E(e))
+	}), I = (e) => Math.max(0, Math.min(e, y)) / y * M, L = (e) => e.map((e) => `${e.x},${e.y}`).join(" "), R = (e) => L(v.map((t, n) => F(n, I(e)))), z = Ct(y, e.step), B = Math.max(0, ...z.map(wt)), V = t.hoverIndex, U = (e) => {
+		let t = i.map((t) => t.values[e]).filter((e) => e != null);
+		return F(e, t.length ? I(Math.max(...t)) : M / 2);
+	}, ee = [...r.filter((e) => e.comparison), ...r.filter((e) => !e.comparison)], te = (e) => o != null && e.label !== o, W = s({ "transform-origin": `${N}px ${P}px` }), G = v.map((e, t) => {
+		let n = Math.cos(E(t)), i = Math.sin(E(t)), a = F(t, M + lt + ut), o = Math.abs(n) < .1, s = o ? "middle" : n > 0 ? "start" : "end", c;
+		c = o && i < 0 ? a.y - 4 - (d ? ft : 0) : o ? a.y + 12 : d ? a.y - 2 : a.y + 5;
+		let l = d ? r.find((e) => !e.comparison)?.values[t] : void 0;
+		return _`
+      <text x=${a.x} y=${c} text-anchor=${s} class="lintje-radar__name">${e}</text>
+      ${d ? _`<text x=${a.x} y=${c + ft} text-anchor=${s}
+                     class="lintje-chart__data-label lintje-radar__value ${l == null ? "lintje-radar__no-value" : ""} ${f ? "" : "is-hidden"}">
+                 ${l == null ? "geen gegevens" : m(l)}</text>` : u}
+    `;
+	}), K = (e, t) => {
+		let n = p(e) ? "is-hidden" : "", r = e.values.map((e, t) => e == null ? null : F(t, I(e)));
+		if (t === "area") return e.comparison || r.some((e) => e == null) ? u : _`<g class="lintje-radar__layer ${n}" ${W}>
+        <polygon class="lintje-radar__area ${a.has(e.label) ? "is-filled" : ""}"
+                 points=${L(r)} fill=${e.color} />
+      </g>`;
+		let { closed: i, runs: o } = St(e.values), s = e.comparison ? void 0 : H(e.color), c = o.map((t) => {
+			let n = t.map((e) => r[e]), a = L(i ? [...n, n[0]] : n);
+			return n.length === 1 ? e.comparison ? _`<circle cx=${n[0].x} cy=${n[0].y} r="2.5" fill=${e.color} />` : u : _`
+        ${s ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${s} />` : u}
+        <polyline class="lintje-chart__line" points=${a} stroke=${e.color} />
+      `;
+		}), l = e.symbol ? r.map((t) => t ? _`<path d=${j(e.symbol, pt, t.x, t.y)} fill=${e.color}
+                        stroke=${s ?? u} stroke-width=${s ? 1 : u} />` : u) : u;
+		return t === "lift" ? _`<g class="lintje-radar__lift" aria-hidden="true">${c}${l}</g>` : _`<g class="lintje-radar__layer ${n} ${te(e) ? "is-muted" : ""}" ${W}>
+      ${c}${l}
+    </g>`;
+	}, q = (e) => {
+		let t = M + lt, n = Math.PI / S, r = (e) => `${N + t * Math.cos(e)},${P + t * Math.sin(e)}`;
+		return `${N},${P} ${r(E(e) - n)} ${r(E(e))} ${r(E(e) + n)}`;
+	};
+	return {
+		width: w,
+		height: T,
+		body: [
+			z.map((e) => _`<polygon class="lintje-radar__ring" points=${R(e)} />`),
+			c.map((e, n) => {
+				if (!e) return u;
+				let r = E(n), i = -Math.sin(r) * 5, a = Math.cos(r) * 5, o = F(n, M);
+				return _`<polygon class="lintje-radar__gap" fill="url(#hatch-${t.id})"
+                          points=${`${N + i},${P + a} ${o.x + i},${o.y + a} ${o.x - i},${o.y - a} ${N - i},${P - a}`} />`;
+			}),
+			v.map((e, t) => {
+				let n = F(t, M + lt);
+				return _`<line class="lintje-radar__spoke ${V === t ? "is-active" : ""}"
+                       x1=${N} y1=${P} x2=${n.x} y2=${n.y} />`;
+			}),
+			z.map((e) => {
+				let t = F(0, I(e));
+				return _`<text x=${t.x + ht / 2} y=${t.y + 4}
+                       class="lintje-chart__axis-label lintje-chart__axis-label--halo">${l(e, B)}</text>`;
+			}),
+			b == null ? u : _`<polygon class="lintje-chart__reference lintje-radar__norm" points=${R(b)} />`,
+			ee.map((e) => K(e, "area")),
+			ee.map((e) => K(e, "line")),
+			o == null ? u : K(r.find((e) => e.label === o), "lift"),
+			G,
+			V == null ? u : i.map((e) => {
+				let t = e.values[V];
+				if (t == null) return u;
+				let n = F(V, I(t)), r = e.comparison ? void 0 : H(e.color), i = j(e.symbol, mt, n.x, n.y);
+				return _`
+            <path class="lintje-chart__hover-point" d=${i} fill=${e.color} />
+            ${r ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />` : u}
+          `;
+			}),
+			_`<g @mouseleave=${() => t.hoverAt(null)}>
+      ${v.map((e, n) => _`<polygon class="lintje-chart__hit" points=${q(n)}
+                               @mousemove=${(e) => t.hoverAt(n, e, g(n))} />`)}
+    </g>`
+		],
+		at: U
+	};
+}
+function Ot({ spec: e, controller: t, layers: n, shown: r, reserve: i, labelled: a, hidden: o, format: c, contentAt: d }) {
+	let { axes: f, max: p, threshold: m } = e;
+	t.measure({ width: !0 });
+	let g = t.width, v = g - 1, y = n.filter((e) => !e.comparison), b = [...y.map((e) => ({
+		layer: e,
+		size: y.length === 1 ? 8 : 6
+	})), ...n.filter((e) => e.comparison).map((e) => ({
+		layer: e,
+		size: 4
+	}))], x = b.reduce((e, t) => e + t.size, 0) + bt * Math.max(0, b.length - 1), S = 22 + x + yt, C = f.length * S, w = C + 16, T = (e) => .5 + Math.max(0, Math.min(e, p)) / p * v, E = t.fontFamily, D = n.find((e) => !e.comparison), O = r.find((e) => !e.comparison), k = t.hoverIndex, A = (e) => {
+		let t = O?.values[e];
+		return {
+			x: t == null ? g / 2 : T(t),
+			y: e * S + dt + 4
+		};
+	}, j = f.map((e, n) => {
+		let r = n * S, l = r + dt + 4, p = i ? D?.values[n] : void 0, y = i ? p == null ? "geen gegevens" : c(p) : "", C = i && p != null && m != null && p < m, w = a ? "" : "is-hidden", O = l;
+		return _`
+      <g class="lintje-radar__row ${k === n ? "is-active" : ""}">
+        <text x="0" y=${r + 14} class="lintje-radar__name">${e}</text>
+        ${i ? _`<text x=${g} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__data-label lintje-radar__value ${p == null ? "lintje-radar__no-value" : ""} ${w}">${y}</text>` : u}
+        ${C ? _`<text x=${g - h(y, E, 700) - 6} y=${r + 14} text-anchor="end"
+                       class="lintje-chart__axis-label lintje-radar__value ${w}">onder norm</text>` : u}
+        ${b.map(({ layer: e, size: r }) => {
+			let i = O;
+			O += r + bt;
+			let a = e.values[n], c = o(e) ? "is-hidden" : "";
+			return a == null ? _`<rect class="lintje-radar__bar ${c}" x="0.5" y=${i} width=${v} height=${r}
+                       fill="url(#hatch-${t.id})" />` : _`<rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-radar__bar ${c}" x="0.5" y=${i}
+                       width=${Math.max(0, T(a) - .5)} height=${r} fill=${e.color}
+                       ${s(B(n, f.length))} />`;
+		})}
+        <line class="lintje-radar__zero" x1="0.5" x2="0.5" y1=${l - 2} y2=${l + x + 2} />
+        ${m == null ? u : _`<line class="lintje-chart__reference lintje-radar__norm" x1=${T(m)} x2=${T(m)}
+                       y1=${l - 3} y2=${l + x + 3} />`}
+        <rect class="lintje-chart__hit" x="0" y=${r} width=${g} height=${S}
+              @mousemove=${(e) => t.hoverAt(n, e, d(n))} />
+      </g>
+    `;
+	}), M = [0, ...Ct(p, e.step)], N = Math.max(0, ...M.map(wt)), P = M.map((e, t) => _`<text x=${T(e)} y=${C + 12}
+                           text-anchor=${t === 0 ? "start" : t === M.length - 1 ? "end" : "middle"}
+                           class="lintje-chart__axis-label">${l(e, N)}</text>`);
+	return {
+		width: g,
+		height: w,
+		body: _`<g @mouseleave=${() => t.hoverAt(null)}>${j}</g>${P}`,
+		at: A
+	};
+}
+//#endregion
 //#region src/components/shared/charts/shared/render-chart.ts
-function lt(e, t) {
+function kt(e, t) {
 	switch (e.kind) {
 		case "line": return se(e, t);
 		case "bar": return de(e, t);
@@ -1787,32 +2088,34 @@ function lt(e, t) {
 		case "scatter": return Ve(e, t);
 		case "heatmap": return et(e, t);
 		case "histogram": return ct(e, t);
+		case "radar": return Et(e, t);
 	}
 }
 //#endregion
 //#region src/components/charts/chart/chart.css?inline
-var 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 At = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media screen and (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", jt = ".lintje-chart__svg, .lintje-pie-chart__svg", Mt = [{
 	value: "chart",
 	label: "Grafiek"
 }, {
 	value: "table",
 	label: "Tabel"
 }];
-function pt(e) {
+function Nt(e) {
 	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
 }
-function mt(e) {
+function Pt(e) {
 	switch (e.kind) {
 		case "line":
 		case "stacked-area":
 		case "dual-axis":
 		case "scatter": return "line";
 		case "pie": return e.donut ? "donut" : "pie";
+		case "radar": return "pie";
 		case "heatmap": return "heatmap";
 		default: return "bar";
 	}
 }
-function ht(e) {
+function Ft(e) {
 	switch (e.kind) {
 		case "horizontal-bar":
 		case "target-progress": return e.rows.length ? `${fe(e.rows.length)}px` : void 0;
@@ -1821,7 +2124,7 @@ function ht(e) {
 		default: return e.small ? "var(--chart-h-small)" : void 0;
 	}
 }
-function gt(e) {
+function It(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 +2164,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(Lt(r)));
 			return [
 				t,
 				...r,
@@ -1899,6 +2202,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 [[
@@ -1915,15 +2230,15 @@ function gt(e) {
 		}
 	}
 }
-function _t(e) {
+function Lt(e) {
 	return e.reduce((e, t) => {
 		if (typeof t != "number" || Number.isInteger(t)) return e;
 		let n = String(t).split(".")[1] ?? "";
 		return Math.max(e, n.length);
 	}, 0);
 }
-function vt(e, t) {
-	let [n = [], ...r] = gt(e), i = n.map((e, t) => {
+function Rt(e, t) {
+	let [n = [], ...r] = It(e), i = n.map((e, t) => {
 		let n = r.map((e) => e[t] ?? null);
 		return t === 0 || n.some((e) => typeof e == "string" && e !== "") ? {
 			key: `c${t}`,
@@ -1934,7 +2249,7 @@ function vt(e, t) {
 			key: `c${t}`,
 			header: String(e ?? ""),
 			format: "decimal",
-			decimals: _t(n),
+			decimals: Lt(n),
 			align: "right",
 			sortable: !1
 		};
@@ -1954,9 +2269,9 @@ function vt(e, t) {
 		pageSize: Math.max(r.length, 1)
 	};
 }
-var yt = class extends C {
+var zt = class extends C {
 	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 G(() => this.requestUpdate()), this.#t = null, this.#n = new n(this);
 	}
 	static {
 		this.styles = [
@@ -1964,7 +2279,7 @@ var yt = class extends C {
 			a(x),
 			a(r),
 			...w,
-			a(ut)
+			a(At)
 		];
 	}
 	static {
@@ -1993,40 +2308,40 @@ 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 ?? Nt(this.data?.title);
 	}
 	csv() {
 		let e = this.data, t = this.downloadName;
-		e && t !== null && E(t, gt(e.chart));
+		e && t !== null && E(t, It(e.chart));
 	}
 	png() {
 		let e = this.data;
 		if (!e) return;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(dt);
-		t && T(this.downloadName ?? pt(e.title), t);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(jt);
+		t && T(this.downloadName ?? Nt(e.title), t);
 	}
 	expandChanged(e) {
-		e ? this.#t ??= new W(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+		e ? this.#t ??= new G(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
 	}
 	render() {
 		let e = this.data;
-		if (!e) return 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;
+		if (!e) return u;
+		let t = this.ready, n = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, r = this.id ? `${this.id}-tile` : void 0, i = e.tableSwitch && t ? this.viewSwitch() : u, a = this.showsTable;
 		return p`<lintje-tile
-        id=${r ?? l}
-        span=${e.span ?? l}
-        heading=${e.title ?? l}
-        icon=${e.icon ?? l}
-        subtitle=${n ?? l}
-        intro=${e.intro ?? l}
-        footnote=${e.footnote ?? l}
+        id=${r ?? u}
+        span=${e.span ?? u}
+        heading=${e.title ?? u}
+        icon=${e.icon ?? u}
+        subtitle=${n ?? u}
+        intro=${e.intro ?? u}
+        footnote=${e.footnote ?? u}
         ?legend-below=${!!e.legendBelow}
         ?expandable=${this.expandable && t}
         ?download=${this.downloadName !== null && t}
         state=${e.state ?? "ready"}
-        message=${e.message ?? l}
-        last-known=${e.lastKnown ?? l}
-        content-height=${ht(e.chart) ?? l}
+        message=${e.message ?? u}
+        last-known=${e.lastKnown ?? u}
+        content-height=${Ft(e.chart) ?? u}
         @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -2039,14 +2354,14 @@ var yt = class extends C {
               slot="notice"
               compact
               .data=${e.notice}
-            ></lintje-announcement>` : l}
+            ></lintje-announcement>` : u}
         ${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 ? kt(e.chart, {
 			...this.chartOptions(this.#t),
 			expanded: !0
-		}) : l : l, {
+		}) : u : u, {
 			heading: e.title,
 			subtitle: n,
 			footnote: e.footnote,
@@ -2059,14 +2374,14 @@ var yt = class extends C {
 		switch (e.state ?? "ready") {
 			case "loading": return p`<div slot="loading">
           ${S({
-				kind: mt(e.chart),
-				height: ht(e.chart),
+				kind: Pt(e.chart),
+				height: Ft(e.chart),
 				status: !1
 			})}
         </div>`;
 			case "empty":
-			case "error": return l;
-			default: return this.showsTable ? this.table() : lt(e.chart, this.chartOptions(this.#e));
+			case "error": return u;
+			default: return this.showsTable ? this.table() : kt(e.chart, this.chartOptions(this.#e));
 		}
 	}
 	viewSwitch() {
@@ -2078,7 +2393,7 @@ var yt = class extends C {
       hide-label
       ?stacked=${e}
       .value=${this.view}
-      .options=${ft}
+      .options=${Mt}
       @lintje-change=${(e) => {
 			e.stopPropagation(), this.view = e.detail === "table" ? "table" : "chart";
 		}}
@@ -2089,12 +2404,12 @@ var yt = class extends C {
 		return p`<lintje-data-table
       class="lintje-chart__table"
       bare
-      .data=${vt(e.chart, t)}
+      .data=${Rt(e.chart, t)}
     ></lintje-data-table>`;
 	}
 	async focusMark(e) {
 		await this.updateComplete;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${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(`${jt}, .lintje-heatmap`);
 		n && !n.hasAttribute("tabindex") && n.setAttribute("tabindex", "-1"), n?.focus();
 	}
 	chartOptions(e) {
@@ -2118,6 +2433,6 @@ var yt = class extends C {
 		};
 	}
 };
-i("lintje-chart", yt);
+i("lintje-chart", zt);
 //#endregion
-export { yt as LintjeChart };
+export { zt as LintjeChart };