lintje 0.1.1 → 0.2.0

package/dist-elements/tag/chart.js

@@ -0,0 +1,1868 @@
+import { A as e, Bt as t, Gt as n, Ht as r, Jt as i, Lt as a, S as o, c as s, d as c, i as l, k as u, l as d, o as f, p, qt as m, r as h, s as g, ut as _, w as v } from "../chunks/base-Bg-IFOPG.js";
+import { t as y } from "./announcement.js";
+import "./segmented.js";
+import { a as b, c as x, d as S, i as C, n as w, o as T, s as E, t as D } from "../chunks/download-y528pIHP.js";
+import { C as O, E as k, S as A, T as j, _ as M, a as N, b as P, c as F, f as I, g as L, h as R, i as z, l as ee, n as B, o as V, p as te, r as H, s as ne, t as re, u as ie, v as U, w as W, x as G, y as K } from "../chunks/stagger-qGD3wmhg.js";
+import "./data-table.js";
+//#region src/components/shared/charts/shared/plot-keys.ts
+var q = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), ae = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+function oe(e) {
+	return `${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`.trim()).join(", ")}`;
+}
+function J(e) {
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+function Y(e, t, n) {
+	let r = (t, r) => {
+		let i = n(r), a = t.closest("[data-tooltip-anchor]"), o = t.getBoundingClientRect(), s = a?.getBoundingClientRect() ?? o;
+		e.hoverIndex = r, e.status = oe(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
+	};
+	return {
+		keydown(n) {
+			if (n.target !== n.currentTarget || t === 0) return;
+			let i = e.hoverIndex ?? -1, a;
+			if (q.has(n.key)) a = Math.min(t - 1, i + 1);
+			else if (ae.has(n.key)) a = Math.max(0, i - 1);
+			else if (n.key === "Home") a = 0;
+			else if (n.key === "End") a = t - 1;
+			else return;
+			n.preventDefault(), r(n.currentTarget, a);
+		},
+		focus(n) {
+			let i = n.currentTarget;
+			n.target === i && t !== 0 && J(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
+		},
+		blur() {
+			(e.hoverIndex != null || e.status) && (e.hoverIndex = null, e.status = "", e.hideTooltip(), e.requestUpdate());
+		}
+	};
+}
+function X(e) {
+	return m`<p class="visually-hidden" role="status">${e.status}</p>`;
+}
+//#endregion
+//#region src/components/shared/charts/line-chart/line-chart.ts
+function se(e, t) {
+	let { controller: r, description: a } = t, { labels: o, axisTitle: s, unit: l, asOfIndex: u, asOfLabel: f, pendingHours: p = 0, fixedMax: h, small: _ = !1 } = e, v = r.id;
+	r.measure({
+		width: !0,
+		height: t.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let y = e.series.filter((e) => !e.comparison).length > 1, b = 0, x = e.series.map((e) => ({
+		...e,
+		color: I(e.color),
+		symbol: y && !e.comparison ? L(e.color) ? e.color : R[b++ % R.length] : void 0
+	})), S = x.filter((e) => !r.hiddenSeries.includes(e.label)), C = S.flatMap((e) => e.values).filter((e) => e != null), { max: w, ticks: T } = G(h ?? Math.max(...C, 1)), E = P(T, r.width, {
+		fontFamily: r.fontFamily,
+		minimum: Math.ceil(d(o[0] ?? "", r.fontFamily) / 2)
+	}), D = K(t, { left: E.width }), A = p > 6, N = u ?? o.length - 1, F = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", z = x.map((e) => ({
+		label: e.label,
+		color: F(e),
+		shape: e.comparison ? "dashed" : "line",
+		symbol: e.symbol,
+		hidden: r.hiddenSeries.includes(e.label)
+	})), B = Math.max(1, Math.ceil(o.length / 8)), re = o.map((e, t) => ({
+		label: e,
+		x: j(t, o.length, D),
+		i: t
+	})).filter((e) => e.i % B === 0);
+	function ie(e) {
+		return {
+			title: o[e],
+			rows: S.map((t) => ({
+				label: t.label,
+				value: t.values[e] == null ? "geen gegevens" : g(t.values[e]),
+				color: F(t)
+			}))
+		};
+	}
+	let U = Y(r, o.length, (e) => {
+		let t = S.map((t) => t.values[e]).filter((e) => e != null);
+		return {
+			x: j(e, o.length, D),
+			y: t.length ? k(Math.max(...t), w, D) : D.top,
+			content: ie(e)
+		};
+	}), W = [
+		p > 0 ? (() => {
+			let e = j(N, o.length, D), t = A ? O(D) / (o.length - 1) : D.width - D.right - e;
+			return i`<rect x=${e} y=${D.top} width=${Math.max(0, t)}
+                           height=${D.height - D.top - D.bottom}
+                           fill="url(#hatch-${v})" />`;
+		})() : n,
+		i`<g class="lintje-chart__reveal">
+      ${S.map((e) => {
+			let t = F(e), r = e.comparison ? void 0 : te(t), a = [[]];
+			e.values.forEach((e, t) => {
+				e == null || A && t > N ? a[a.length - 1].length && a.push([]) : a[a.length - 1].push({
+					x: j(t, o.length, D),
+					y: k(e, w, D)
+				});
+			});
+			let s = a.filter((e) => e.length > 0);
+			if (s.length === 0) return n;
+			let c = s[s.length - 1], l = c[c.length - 1], u = D.height - D.bottom;
+			return i`
+          <g>
+            ${s.map((a) => {
+				let o = a.map((e) => `${e.x},${e.y}`).join(" ");
+				return i`
+                ${e.area && !e.comparison ? i`<polygon fill=${t} fill-opacity=".14"
+                                 points=${`${a[0].x},${u} ${o} ${a[a.length - 1].x},${u}`} />` : n}
+                ${r && a.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${o} stroke=${r} />` : n}
+                ${a.length === 1 ? i`<circle cx=${a[0].x} cy=${a[0].y} r="2.5" fill=${t} />` : i`<polyline
+                        class="lintje-chart__line"
+                        points=${o}
+                        stroke=${t}
+                        stroke-dasharray=${e.comparison ? "5 4" : n}
+                        opacity=${e.comparison ? .9 : 1} />`}
+              `;
+			})}
+            <!-- The line's own shape at its end; a 4 px point there at an early as-of time. -->
+            ${e.symbol ? i`<path class="lintje-chart__line-end" d=${M(e.symbol, 4.5, l.x, l.y)} fill=${t} />` : A && !e.comparison ? i`<circle cx=${l.x} cy=${l.y} r="4" fill=${t} />` : n}
+          </g>
+        `;
+		})}
+    </g>`,
+		A && f ? V({
+			area: D,
+			index: N,
+			count: o.length,
+			label: `peilmoment ${f}`,
+			pendingHours: p,
+			lastValue: (() => {
+				let e = S.find((e) => !e.comparison)?.values[N];
+				return e == null ? void 0 : `${g(e)}${l ? ` ${l}` : ""}`;
+			})()
+		}) : n,
+		r.hoverIndex == null ? n : S.map((e) => {
+			let t = r.hoverIndex, a = e.values[t];
+			return a == null || A && t > N ? n : i`<circle class="lintje-chart__hover-point" r="4" fill=${F(e)}
+                             cx=${j(t, o.length, D)}
+                             cy=${k(a, w, D)} />`;
+		}),
+		o.map((e, t) => {
+			let n = j(t, o.length, D), a = O(D) / Math.max(1, o.length - 1);
+			return i`
+        <rect x=${n - a / 2} y=${D.top} width=${a}
+              height=${D.height - D.top - D.bottom}
+              fill="transparent"
+              @mousemove=${(e) => r.hoverAt(t, e, ie(t))}
+              @mouseleave=${() => r.hoverAt(null)} />
+      `;
+		})
+	];
+	return m`
+    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e)}>
+      ${ee({
+		items: z,
+		onToggle: (e) => r.toggleSeries(e)
+	})}
+      ${ne({
+		fontFamily: r.fontFamily,
+		id: v,
+		ticks: T,
+		max: w,
+		area: D,
+		formatTick: E.format,
+		axisTitle: s ?? l,
+		xLabels: re,
+		description: a,
+		keys: U
+	}, W)}
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/shared/mark-select.ts
+var Z = {
+	clickable: !1,
+	state: "",
+	markId: n,
+	role: n,
+	tabIndex: n,
+	pressed: n,
+	label: n,
+	click: n,
+	keydown: n
+};
+function Q(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	for (let e of t) e?.href && n.add(e.id);
+	let r = e.selectedId != null && n.has(e.selectedId) ? e.selectedId : null, i = () => {
+		r != null && e.onClear?.(r);
+	}, a = (t, n) => {
+		if (t.id === r) return i();
+		e.onSelect?.({
+			id: t.id,
+			label: n,
+			href: t.href
+		});
+	};
+	return {
+		active: r,
+		interactive: !!e.onSelect && n.size > 0,
+		of(t, n, i) {
+			if (!t?.href || !e.onSelect) return r == null ? Z : {
+				...Z,
+				state: "is-muted"
+			};
+			let o = t.id === r;
+			return {
+				clickable: !0,
+				state: `is-clickable ${o ? "is-selected" : r == null ? "" : "is-muted"}`,
+				markId: t.id,
+				role: "button",
+				tabIndex: 0,
+				pressed: o ? "true" : "false",
+				label: i ?? n,
+				click: () => a(t, n),
+				keydown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a(t, n));
+				}
+			};
+		},
+		escape(e) {
+			e.key === "Escape" && r != null && (e.stopPropagation(), i());
+		}
+	};
+}
+//#endregion
+//#region src/components/shared/charts/bar-chart/bar-chart.ts
+var ce = [
+	"var(--color-chart-tint-1)",
+	"var(--color-chart-tint-2)",
+	"var(--color-chart-tint-3)",
+	"var(--color-chart-tint-4)",
+	"var(--color-chart-tint-5)"
+];
+function le(e, t) {
+	let { controller: r, description: a } = t, { labels: o, values: s, axisTitle: u, trend: d, dataLabels: p = !0, small: h = !1, links: v } = e, y = I(e.color) ?? "var(--color-chart-default)", b = r.id, x = Q(t, v ?? []);
+	r.measure({
+		width: !0,
+		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let S = s.filter((e) => e != null), { max: C, ticks: w } = G(Math.max(...S, 1)), T = P(w, r.width, { fontFamily: r.fontFamily }), E = K(t, { left: T.width }), D = E.height - E.bottom, { width: O, bandWidth: j } = A(0, o.length, E), M = p && s.every((e) => e == null || l(f(e, O), j - 4)), N = (e) => ({
+		title: o[e],
+		rows: [{
+			label: u ?? "Waarde",
+			value: s[e] == null ? "geen gegevens" : g(s[e]),
+			color: y
+		}]
+	}), F = Y(r, o.length, (e) => ({
+		x: A(e, o.length, E).center,
+		y: s[e] == null ? E.top : k(s[e], C, E),
+		content: N(e)
+	})), L = [s.map((e, t) => {
+		let a = A(t, o.length, E);
+		if (e == null) return i`<rect class="lintje-chart__missing" x=${a.x} y=${E.top} width=${a.width}
+                         height=${Math.max(0, D - E.top)} fill="url(#hatch-${b})"
+                         @mousemove=${(e) => r.showTooltip(e, N(t))}
+                         @mouseleave=${() => r.hideTooltip()} />`;
+		let s = k(e, C, E), c = x.of(v?.[t], o[t], `${o[t]}: ${g(e)}`);
+		return i`
+        <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
+           ${_(B(t, o.length))}
+           @mousemove=${(e) => r.showTooltip(e, N(t))}
+           @mouseleave=${() => r.hideTooltip()}>
+          <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
+                x=${a.x} y=${s} width=${a.width} height=${Math.max(0, D - s)} fill=${y}
+                data-mark-id=${c.markId} role=${c.role} tabindex=${c.tabIndex}
+                aria-pressed=${c.pressed} aria-label=${c.label}
+                @click=${c.click} @keydown=${c.keydown} />
+          ${M ? i`<text x=${a.center} y=${s - 5} text-anchor="middle" class="lintje-chart__data-label">
+                    ${f(e, a.width)}
+                  </text>` : n}
+        </g>
+      `;
+	}), d ? i`<polyline
+          fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5" stroke-dasharray="5 4"
+          points=${d.map((e, t) => e == null ? null : `${A(t, o.length, E).center},${k(e, C, E)}`).filter(Boolean).join(" ")} />` : n];
+	return m`
+    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || x.escape(e)}>
+      ${ne({
+		fontFamily: r.fontFamily,
+		id: b,
+		ticks: w,
+		max: C,
+		area: E,
+		axisTitle: u,
+		description: a,
+		formatTick: T.format,
+		xLabels: o.map((e, t) => ({
+			label: e,
+			x: A(t, o.length, E).center
+		})),
+		interactive: x.interactive,
+		keys: F
+	}, L)}
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/horizontal-bar-chart/horizontal-bar-chart.ts
+function ue(e) {
+	return e * 26 + 24;
+}
+function de(e, t) {
+	let { controller: r, description: a } = t, { rows: o, threshold: s, thresholdLabel: l, unit: u } = e, d = I(e.color) ?? "var(--color-chart-dark-yellow)", f = I(e.aboveThresholdColor) ?? "var(--color-chart-red)", p = r.id, h = o.map((e) => e.href ? {
+		id: e.id ?? e.label,
+		href: e.href
+	} : null), v = Q(t, h), y = ue(o.length);
+	r.measure({
+		width: !0,
+		height: y
+	});
+	let b = r.width, x = W(o.map((e) => e.label), b, { fontFamily: r.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...o.map((e) => e.value), s ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${g(e)}${u ? ` ${u}` : ""}`, D = (e) => {
+		let t = o[e], n = s != null && t.value > s;
+		return {
+			title: t.label,
+			rows: [{
+				label: "Waarde",
+				value: E(t.value),
+				color: n ? f : d
+			}, ...s == null ? [] : [{
+				label: "Norm",
+				value: E(s),
+				color: "var(--color-chart-emphasis)"
+			}]]
+		};
+	}, O = Y(r, o.length, (e) => ({
+		x: C + T(o[e].value),
+		y: e * 26 + 4,
+		content: D(e)
+	}));
+	return m`
+    <figure class="lintje-chart lintje-chart--rows" ${c(r.attach)} ?data-in-view=${r.inView}
+            data-tooltip-anchor
+            @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
+      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${z(v.interactive)}
+           aria-labelledby="${p}-desc" width=${b} height=${y}
+           ${_({
+		height: `${y}px`,
+		...N(p)
+	})}
+           tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
+        <desc id="${p}-desc">${a}</desc>
+        <defs>${F(p)}</defs>
+        ${s == null ? n : i`
+          <line x1=${C + T(s)} x2=${C + T(s)} y1=${4} y2=${o.length * 26 + 2}
+                stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
+          <text x=${C + T(s) + 6} y=${o.length * 26 + 16} class="lintje-chart__axis-label">
+            ${l ?? `norm ${g(s)}`}
+          </text>
+        `}
+        ${o.map((e, t) => {
+		let n = t * 26 + 4, a = s != null && e.value > s, c = T(e.value), l = v.of(h[t], e.label, `${e.label}: ${g(e.value)}${u ? ` ${u}` : ""}`);
+		return i`
+            <g class="lintje-chart__bar-row ${r.hoverIndex === t ? "is-hovered" : ""}"
+               @mousemove=${(e) => r.showTooltip(e, D(t))}
+               @mouseleave=${() => r.hideTooltip()}>
+              <!-- Hit area across the whole row, so the tooltip doesn't flicker between bars. -->
+              <rect x=${0} y=${n - 5} width=${b} height=${26} fill="transparent" />
+              <text x=${S} y=${n + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${l.state}"
+                    ${_(B(t, o.length))}
+                    x=${C} y=${n} width=${Math.max(0, c)} height=${16}
+                    fill=${a ? f : d}
+                    data-mark-id=${l.markId} role=${l.role} tabindex=${l.tabIndex}
+                    aria-pressed=${l.pressed} aria-label=${l.label}
+                    @click=${l.click} @keydown=${l.keydown} />
+              <text x=${C + c + 6} y=${n + 16 - 3} font-weight="700"
+                    class="lintje-chart__data-label ${s == null ? "" : "lintje-chart__data-label--halo"}">
+                ${g(e.value)}${u ? ` ${u}` : ""}
+              </text>
+            </g>
+          `;
+	})}
+      </svg>
+      ${H(r)}
+      ${X(r)}
+    </figure>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/target-progress-chart/target-progress-chart.ts
+function fe(e, t) {
+	let { controller: n, description: r } = t, { rows: a, target: o = 100 } = e, l = n.id, u = ue(a.length);
+	n.measure({
+		width: !0,
+		height: u
+	});
+	let d = n.width, f = W(a.map((e) => e.label), d, { fontFamily: n.fontFamily }), { labelEnd: p, barStart: h } = f, g = (e) => Math.max(40, d - h - 70) * e / 110, v = h + g(o), y = (e) => e >= o ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
+		title: a[e].label,
+		rows: [{
+			label: "Voortgang",
+			value: s(a[e].value),
+			color: y(a[e].value)
+		}, {
+			label: "Doel",
+			value: s(o),
+			color: "var(--color-chart-emphasis)"
+		}]
+	}), x = Y(n, a.length, (e) => ({
+		x: h + g(a[e].value),
+		y: e * 26 + 4,
+		content: b(e)
+	}));
+	return m`
+    <figure class="lintje-chart lintje-chart--rows" ${c(n.attach)} ?data-in-view=${n.inView}
+            data-tooltip-anchor @keydown=${(e) => n.dismiss(e)}>
+      <svg viewBox="0 0 ${d} ${u}" class="lintje-chart__svg" role="img"
+           aria-labelledby="${l}-desc" width=${d} height=${u} ${_({ height: `${u}px` })}
+           tabindex="0" @keydown=${x.keydown} @focus=${x.focus} @blur=${x.blur}>
+        <desc id="${l}-desc">${r}</desc>
+        ${a.map((e, t) => {
+		let r = t * 26 + 4, c = g(e.value), l = y(e.value), u = h + c + 46 > d, m = e.value >= o ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return i`
+            <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
+               @mousemove=${(e) => n.showTooltip(e, b(t))}
+               @mouseleave=${() => n.hideTooltip()}>
+              <rect x=${0} y=${r - 5} width=${d} height=${26} fill="transparent" />
+              <text x=${p} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${f.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${_(B(t, a.length))}
+                    x=${h} y=${r} width=${Math.max(0, c)} height=${16} fill=${l} />
+              <text x=${u ? h + c - 6 : h + c + 6} y=${r + 16 - 3}
+                    text-anchor=${u ? "end" : "start"}
+                    class="lintje-chart__data-label ${u ? m : ""}" font-weight="700">${s(e.value)}</text>
+            </g>
+          `;
+	})}
+        <line x1=${v} x2=${v} y1=${0} y2=${a.length * 26 + 2}
+              stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
+        <text x=${v + 6} y=${a.length * 26 + 16} class="lintje-chart__axis-label">norm ${o}</text>
+      </svg>
+      ${H(n)}
+      ${X(n)}
+    </figure>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/grouped-bar-chart/grouped-bar-chart.ts
+function pe(e, t) {
+	let { controller: r, description: a } = t, { labels: o, axisTitle: s, small: u = !1 } = e, d = r.id;
+	r.measure({
+		width: !0,
+		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let p = e.series.map((e) => ({
+		...e,
+		color: I(e.color)
+	})), h = p.filter((e) => !r.hiddenSeries.includes(e.label)), v = Q(t, h.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = G(Math.max(...h.flatMap((e) => e.values), 1)), x = P(b, r.width, { fontFamily: r.fontFamily }), S = K(t, { left: x.width }), C = S.height - S.bottom, w = A(0, o.length, S).width / Math.max(1, h.length), T = h.every((e) => e.values.every((e) => l(f(e, w), w - 2))), E = p.map((e, t) => ({
+		label: e.label,
+		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
+		shape: "square",
+		hidden: r.hiddenSeries.includes(e.label)
+	})), D = (e, t) => E[p.indexOf(e)]?.color ?? ce[t], O = (e) => ({
+		title: o[e],
+		rows: h.map((t, n) => ({
+			label: t.label,
+			value: g(t.values[e]),
+			color: D(t, n)
+		}))
+	}), j = Y(r, o.length, (e) => ({
+		x: A(e, o.length, S).center,
+		y: k(Math.max(0, ...h.map((t) => t.values[e])), y, S),
+		content: O(e)
+	})), M = o.map((e, t) => {
+		let a = A(t, o.length, S);
+		return i`
+      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
+         ${_(B(t, o.length))}
+         @mousemove=${(e) => r.showTooltip(e, O(t))}
+         @mouseleave=${() => r.hideTooltip()}>
+        ${h.map((r, o) => {
+			let s = r.values[t], c = k(s, y, S), l = D(r, o), u = v.of(r.links?.[t], `${e} · ${r.label}`, `${e}, ${r.label}: ${g(s)}`);
+			return i`
+            <g>
+              <rect class="lintje-chart__bar lintje-chart__mark ${u.state}"
+                    x=${a.x + o * w} y=${c} width=${w - 2}
+                    height=${Math.max(0, C - c)} fill=${l}
+                    data-mark-id=${u.markId} role=${u.role} tabindex=${u.tabIndex}
+                    aria-pressed=${u.pressed} aria-label=${u.label}
+                    @click=${u.click} @keydown=${u.keydown} />
+              ${T ? i`<text x=${a.x + o * w + (w - 2) / 2} y=${c - 4}
+                            text-anchor="middle" class="lintje-chart__data-label">${f(s, w)}</text>` : n}
+            </g>
+          `;
+		})}
+      </g>
+    `;
+	});
+	return m`
+    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
+      ${ee({
+		items: E,
+		onToggle: (e) => r.toggleSeries(e)
+	})}
+      ${ne({
+		fontFamily: r.fontFamily,
+		id: d,
+		ticks: b,
+		max: y,
+		area: S,
+		axisTitle: s,
+		description: a,
+		formatTick: x.format,
+		xLabels: o.map((e, t) => ({
+			label: e,
+			x: A(t, o.length, S).center
+		})),
+		interactive: v.interactive,
+		keys: j
+	}, M)}
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/shared/tints.ts
+var $ = [
+	[1],
+	[1, 4],
+	[
+		1,
+		2,
+		4
+	],
+	[
+		1,
+		2,
+		3,
+		4
+	],
+	[
+		1,
+		2,
+		3,
+		4,
+		5
+	]
+];
+function me(e, t) {
+	if (e < 1) return [];
+	let n = $[Math.min(e, $.length) - 1];
+	return h(t) ? n.map((e) => e === 1 ? `var(--color-chart-${t})` : `var(--color-chart-${t}-tint-${e})`) : n.map((e) => `var(--color-chart-tint-${e})`);
+}
+//#endregion
+//#region src/components/shared/charts/stacked-bar-chart/stacked-bar-chart.ts
+var he = /* @__PURE__ */ new Set([
+	"sky-blue",
+	"red",
+	"green",
+	"violet",
+	"dark-green",
+	"purple",
+	"ruby-red",
+	"dark-brown",
+	"brown",
+	"dark-blue",
+	"moss-green"
+]);
+function ge(e, t) {
+	let { controller: r, description: a } = t, { labels: o, axisTitle: u, normalized: d = !1, totalOnTop: p = !0, small: h = !1 } = e, v = r.id;
+	r.measure({
+		width: !0,
+		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let y = e.series.map((e) => ({
+		...e,
+		color: I(e.color)
+	})), b = Q(t, y.flatMap((e) => e.links ?? [])), x = o.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = d ? {
+		max: 100,
+		ticks: [
+			0,
+			25,
+			50,
+			75,
+			100
+		]
+	} : G(Math.max(...x, 1)), w = P(C, r.width, { fontFamily: r.fontFamily }), T = K(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: O } = A(0, o.length, T), j = p && !d && x.every((e) => l(f(e, O), O - 4)), M = me(y.length), N = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], F = (t) => {
+		let n = e.series[t].color;
+		return (n == null ? t === 0 : he.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+	}, L = (e) => ({
+		title: o[e],
+		rows: y.map((t, n) => ({
+			label: t.label,
+			value: d ? s(t.values[e] / x[e] * 100) : g(t.values[e]),
+			color: N(t, n)
+		}))
+	}), R = Y(r, o.length, (e) => ({
+		x: A(e, o.length, T).center,
+		y: k(d ? S : x[e], S, T),
+		content: L(e)
+	})), z = y.map((e, t) => ({
+		label: e.label,
+		color: N(e, t),
+		shape: "square"
+	})), V = o.map((e, t) => {
+		let a = A(t, o.length, T), c = 0, u = y.map((e, n) => {
+			let r = e.values[t], i = d ? r / x[t] * 100 : r, a = k(c, S, T);
+			c += i;
+			let o = k(c, S, T);
+			return {
+				row: e,
+				j: n,
+				value: i,
+				y1: o,
+				height: Math.max(0, a - o)
+			};
+		});
+		return i`
+      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
+         ${_(B(t, o.length))}
+         @mousemove=${(e) => r.showTooltip(e, L(t))}
+         @mouseleave=${() => r.hideTooltip()}>
+        <!-- The hit area under the whole column, so the tooltip also follows the empty
+             space above the stack. It lies *under* the segments: on top it swallowed
+             every click on a segment that drills. -->
+        <rect x=${a.x} y=${T.top} width=${a.width} height=${E - T.top} fill="transparent" />
+        <!-- The segments in one group, so the column lifts on hover as a whole. -->
+        <g class="lintje-chart__bar">
+          ${u.map((n) => {
+			let r = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${g(n.row.values[t])}`);
+			return i`
+            <rect class="lintje-chart__mark lintje-chart__segment ${r.state}"
+                  x=${a.x} y=${n.y1} width=${a.width} height=${n.height}
+                  fill=${N(n.row, n.j)}
+                  data-mark-id=${r.markId} role=${r.role} tabindex=${r.tabIndex}
+                  aria-pressed=${r.pressed} aria-label=${r.label}
+                  @click=${r.click} @keydown=${r.keydown} />
+          `;
+		})}
+        </g>
+        <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. -->
+        ${d ? u.map((e) => e.height >= 16 && l(s(e.value), D - 4) ? i`<text x=${a.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
+                        class="lintje-chart__data-label ${F(e.j)}">${s(e.value)}</text>` : n) : n}
+        ${j ? i`<text x=${a.center} y=${k(x[t], S, T) - 5} text-anchor="middle"
+                      class="lintje-chart__data-label" font-weight="700">${f(x[t], a.bandWidth)}</text>` : n}
+      </g>
+    `;
+	});
+	return m`
+    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || b.escape(e)}>
+      ${ee({ items: z })}
+      ${ne({
+		fontFamily: r.fontFamily,
+		id: v,
+		ticks: C,
+		max: S,
+		area: T,
+		axisTitle: u,
+		description: a,
+		formatTick: w.format,
+		xLabels: o.map((e, t) => ({
+			label: e,
+			x: A(t, o.length, T).center
+		})),
+		interactive: b.interactive,
+		keys: R
+	}, V)}
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/pie-chart/pie-chart.ts
+var _e = 5, ve = (e) => {
+	let t = e.label.toLowerCase();
+	return t.startsWith("overig") || t === "rest";
+}, ye = (e) => !e.remainder && !ve(e);
+function be(e) {
+	let t = e.filter(ye).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && ve(e)), r = e.filter((e) => e.remainder);
+	if (t.length > _e) {
+		let e = t.splice(4).reduce((e, t) => e + t.value, 0);
+		if (n.length > 0) {
+			let [t] = n;
+			n[0] = {
+				label: t.label,
+				value: t.value + e,
+				color: t.color
+			};
+		} else n.push({
+			label: "Overig",
+			value: e
+		});
+	}
+	return [
+		...t,
+		...n,
+		...r
+	];
+}
+function xe(e, t) {
+	let { controller: r, description: a } = t, { donut: o = !1, centerValue: l, centerLabel: u, legendTable: d = !0, labelHeader: f = "Categorie" } = e, p = r.id, h = be(e.segments).map((e) => ({
+		...e,
+		color: I(e.color)
+	})), v = h.map((e) => e.href ? {
+		id: e.id ?? e.label,
+		href: e.href
+	} : null), y = Q(t, v), b = (e) => {
+		let t = y.of(v[e], h[e].label, h[e].label).state;
+		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
+	}, x = !!t.expanded;
+	r.measure(x ? {
+		width: !0,
+		height: "--chart-h-main"
+	} : {});
+	let S = x ? Math.max(240, Math.min(560, r.height - 24)) : e.size ?? 200, C = h.reduce((e, t) => e + t.value, 0), w = S / 2, T = o ? w * .62 : 0, E = me(h.filter(ye).length, e.color), D = -1, O = h.map((e) => (ye(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : ve(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = h.map((e, t) => {
+		let n = e.value / C, r = k, i = k + n * 360;
+		k = i;
+		let a = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(i, w);
+		return {
+			segment: e,
+			i: t,
+			d: o ? (() => {
+				let [e, t] = s(i, T), [n, o] = s(r, T);
+				return `M ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${a} 0 ${n} ${o} Z`;
+			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} Z`,
+			color: O[t]
+		};
+	}), j = r.hoverSegment, M = j == null ? void 0 : A[j], P = (e) => {
+		r.hoverSegment = e, r.requestUpdate();
+	};
+	return m`
+    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${c(r.attach)}
+         ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || y.escape(e)}>
+      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${z(y.interactive)}
+           class="lintje-pie-chart__svg" aria-labelledby="${p}-desc" ${_(N(p))}>
+        <desc id="${p}-desc">${a}</desc>
+        <defs>${F(p)}</defs>
+        ${A.map(({ segment: e, i: t, d: n, color: a }) => {
+		let o = y.of(v[t], e.label, `${e.label}: ${g(e.value)} · ${s(e.value / C * 100)}`);
+		return i`
+          <path d=${n} fill=${a}
+                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${o.state}"
+                ${_({ "transform-origin": `${w}px ${w}px` })}
+                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
+                aria-pressed=${o.pressed} aria-label=${o.label}
+                @click=${o.click} @keydown=${o.keydown}
+                @mousemove=${(n) => {
+			P(t), r.showTooltip(n, {
+				title: e.label,
+				rows: [{
+					label: "Aantal",
+					value: `${g(e.value)} · ${s(e.value / C * 100)}`,
+					color: a
+				}]
+			});
+		}}
+                @mouseleave=${() => {
+			r.hoverSegment = null, r.hideTooltip(), r.requestUpdate();
+		}} />
+        `;
+	})}
+        <!-- The hovered segment once more on top, lifted with a light shadow: in place, the
+             next segment would cover that shadow on one side (user test 13 Sep). -->
+        ${M ? i`<path d=${M.d} fill=${M.color} class="lintje-pie-chart__lift lintje-chart__segment"
+                      ${_({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : n}
+        ${o && l ? i`
+          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${l}</text>
+          ${u ? i`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${u}</text>` : n}
+        ` : n}
+      </svg>
+
+      ${d ? m`
+        <table class="lintje-pie-chart__table">
+          <caption class="visually-hidden">Legenda: ${a}</caption>
+          <thead>
+            <tr>
+              <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>
+            ${h.map((e, t) => m`
+              <tr class="lintje-pie-chart__row ${j === t ? "is-hovered" : ""} ${b(t)}"
+                  @mouseenter=${() => P(t)} @mouseleave=${() => P(null)}>
+                <th scope="row" class="lintje-pie-chart__label">
+                  <span class="lintje-pie-chart__marker" ${_({ background: O[t] })}></span>${e.label}
+                </th>
+                <td class="lintje-pie-chart__value">${g(e.value)}</td>
+                <td class="lintje-pie-chart__value">${s(e.value / C * 100)}</td>
+              </tr>
+            `)}
+          </tbody>
+          <tfoot>
+            <tr>
+              <th scope="row" class="lintje-pie-chart__total-label">Totaal</th>
+              <td class="lintje-pie-chart__total">${g(C)}</td>
+              <td class="lintje-pie-chart__total"></td>
+            </tr>
+          </tfoot>
+        </table>
+      ` : n}
+      ${H(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/dual-axis-chart/dual-axis-chart.ts
+function Se(e, t) {
+	let { controller: r, description: a } = t, { labels: o, threshold: s, thresholdLabel: l, small: u = !1, pendingHours: d = 0 } = e, f = {
+		...e.left,
+		color: I(e.left.color)
+	}, p = {
+		...e.right,
+		color: I(e.right.color)
+	}, h = r.id;
+	r.measure({
+		width: !0,
+		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let v = f.color ?? "var(--color-chart-default)", y = p.color ?? "var(--color-chart-dark-yellow)", b = G(Math.max(...f.values.filter((e) => e != null), 1)), x = G(Math.max(...p.values.filter((e) => e != null), s ?? 0, 1)), S = P(b.ticks, r.width, { fontFamily: r.fontFamily }), C = P(x.ticks, r.width, { fontFamily: r.fontFamily }), w = K(t, {
+		left: S.width,
+		right: C.width
+	}), T = w.height - w.bottom, E = [
+		{
+			label: `${f.label} (linkeras)`,
+			color: v,
+			shape: "square"
+		},
+		{
+			label: `${p.label} (rechteras)`,
+			color: y,
+			shape: "line"
+		},
+		...s == null ? [] : [{
+			label: l ?? `Norm ${s}`,
+			color: "var(--color-chart-emphasis)",
+			shape: "dashed"
+		}]
+	], D = Math.max(1, Math.ceil(o.length / 8)), O = r.hoverIndex, j = te(y), M = [[]];
+	p.values.forEach((e, t) => {
+		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${A(t, o.length, w).center},${k(e, x.max, w)}`);
+	});
+	let N = (e, t) => e == null ? "geen gegevens" : `${g(e)}${t ? ` ${t}` : ""}`, F = (e) => ({
+		title: o[e],
+		rows: [{
+			label: f.label,
+			value: N(f.values[e], f.unit),
+			color: v
+		}, {
+			label: p.label,
+			value: N(p.values[e], p.unit),
+			color: y
+		}]
+	}), L = Y(r, o.length, (e) => ({
+		x: A(e, o.length, w).center,
+		y: Math.min(f.values[e] == null ? T : k(f.values[e], b.max, w), p.values[e] == null ? T : k(p.values[e], x.max, w)),
+		content: F(e)
+	}));
+	return m`
+    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e)}>
+      ${ee({ items: E })}
+      <figure class="lintje-chart">
+        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${z(!1)}
+             aria-labelledby="${h}-desc" width=${w.width} height=${w.height}
+             tabindex="0" @keydown=${L.keydown} @focus=${L.focus} @blur=${L.blur}>
+          <desc id="${h}-desc">${a}</desc>
+          <defs>
+            <pattern id="hatch-${h}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+              <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
+            </pattern>
+          </defs>
+          <!-- Incomplete hours at the end: hatched, never drawn as zero. -->
+          ${d > 0 ? (() => {
+		let e = A(o.length - d, o.length, w);
+		return i`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
+                             width=${w.width - w.right - e.x + (e.bandWidth - e.width) / 2}
+                             height=${T - w.top} fill="url(#hatch-${h})" />`;
+	})() : n}
+
+          ${b.ticks.map((e) => {
+		let t = k(e, b.max, w), n = e === 0;
+		return i`
+              <g>
+                <line x1=${w.left} x2=${w.width - w.right} y1=${t} y2=${t}
+                      stroke=${n ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
+                      stroke-width=${n ? 1.5 : 1} />
+                <text x=${w.left - 8} y=${t + 4} text-anchor="end" class="lintje-chart__axis-label" fill=${v}>
+                  ${S.format(e)}
+                </text>
+              </g>
+            `;
+	})}
+          ${x.ticks.map((e) => i`
+            <text x=${w.width - w.right + 8} y=${k(e, x.max, w) + 4}
+                  class="lintje-chart__axis-label" fill=${"var(--color-chart-dark-yellow-text)"}>${C.format(e)}</text>
+          `)}
+
+          <!-- 2 px axis lines in the color of their series -->
+          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${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. -->
+          ${f.values.map((e, t) => {
+		let n = A(t, o.length, w);
+		if (e == null) return i`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
+                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${h})" />`;
+		let r = k(e, b.max, w);
+		return i`
+              <g class="lintje-chart__bar-group ${O === t ? "is-hovered" : ""}"
+                 ${_(B(t, o.length))}>
+                <rect class="lintje-chart__bar" x=${n.x} y=${r} width=${n.width}
+                      height=${Math.max(0, T - r)} fill=${v} />
+              </g>
+            `;
+	})}
+
+          ${s == null ? n : i`<line x1=${w.left} x2=${w.width - w.right}
+                        y1=${k(s, x.max, w)} y2=${k(s, x.max, w)}
+                        stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="4 3" />`}
+
+          <g class="lintje-chart__reveal">
+            ${M.filter((e) => e.length > 0).map((e) => {
+		let t = e.join(" "), [r, a] = e[0].split(",");
+		return i`
+                  ${j && e.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing"
+                                    stroke=${j} points=${t} />` : n}
+                  ${e.length === 1 ? i`<circle cx=${r} cy=${a} r="2.5" fill=${y} />` : i`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
+                `;
+	})}
+          </g>
+
+          ${o.filter((e, t) => t % D === 0).map((e, t) => i`
+            <text x=${A(t * D, o.length, w).center} y=${w.height - 8}
+                  text-anchor="middle" class="lintje-chart__axis-label">${e}</text>
+          `)}
+
+          <!-- Hover point on the right-axis line; no point for a missing value. -->
+          ${O != null && p.values[O] != null ? i`<circle class="lintje-chart__hover-point" r="4" fill=${y}
+                          cx=${A(O, o.length, w).center}
+                          cy=${k(p.values[O], x.max, w)} />` : n}
+          ${o.map((e, t) => {
+		let n = A(t, o.length, w);
+		return i`
+              <rect x=${n.x} y=${w.top} width=${n.bandWidth} height=${T - w.top}
+                    fill="transparent"
+                    @mousemove=${(e) => r.hoverAt(t, e, F(t))}
+                    @mouseleave=${() => r.hoverAt(null)} />
+            `;
+	})}
+        </svg>
+      </figure>
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/scatter-chart/scatter-chart.ts
+var Ce = 4.5, we = 5.5, Te = 44, Ee = 8, De = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
+function Oe(e, t, n, r) {
+	let i = 5.5, a = [];
+	for (let [o, s] of e.entries()) {
+		if (!t.includes(s.label)) continue;
+		let c = d(s.label, r, 700), l = s.y - 9, u = l - 12, f = l + 3, p = [{
+			anchor: "end",
+			x: s.x - Ee,
+			left: s.x - Ee - c
+		}, {
+			anchor: "start",
+			x: s.x + Ee,
+			left: s.x + Ee
+		}].map((e) => ({
+			...e,
+			right: e.left + c,
+			top: u,
+			bottom: f
+		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !De(t, e)) && e.every((e, n) => n === o || !De(t, {
+			left: e.x - i,
+			right: e.x + i,
+			top: e.y - i,
+			bottom: e.y + i
+		})));
+		if (!p) return [];
+		a.push({
+			...p,
+			label: s.label,
+			y: l
+		});
+	}
+	return a.map(({ label: e, x: t, y: n, anchor: r }) => ({
+		label: e,
+		x: t,
+		y: n,
+		anchor: r
+	}));
+}
+var ke = (e) => e.charAt(0).toUpperCase() + e.slice(1), Ae = (e, t) => `${g(e)}${t ? ` ${t}` : ""}`;
+function je(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(L)), n = R.filter((e) => !t.has(e)), r = 0;
+	return e.series.map((e) => {
+		let t = L(e.color) ? e.color : n[r++ % n.length];
+		return {
+			color: I(e.color ?? t),
+			symbol: t
+		};
+	});
+}
+function Me(t, r) {
+	let { controller: a, description: o } = r, { axisTitle: s, unit: l, xTitle: u, xUnit: d, threshold: f, thresholdLabel: h, small: v = !1 } = t, y = a.id;
+	a.measure({
+		width: !0,
+		height: r.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!r.expanded && !r.mobile
+	});
+	let b = je(t), x = t.series.map((e, t) => ({
+		...e,
+		...b[t]
+	})), S = (e) => a.hiddenSeries.includes(e.label), C = x.flatMap((e, t) => e.points.map((n, r) => ({
+		point: n,
+		row: e,
+		key: `${t}:${r}`
+	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = G(Math.max(...w.map(({ point: e }) => e.x), 1), r.mobile ? 3 : 6), D = G(Math.max(...w.map(({ point: e }) => e.y), f ?? 0, 1)), A = P(D.ticks, a.width, { fontFamily: a.fontFamily }), j = K(r, {
+		left: A.width,
+		bottom: Te
+	}), N = (e) => j.left + O(j) * e / E.max, F = E.ticks.map((e, t) => ({
+		label: g(e),
+		x: N(e),
+		anchor: t === E.ticks.length - 1 ? "end" : "middle"
+	})), I = [...x.map((e) => ({
+		label: e.label,
+		color: e.color,
+		shape: "point",
+		symbol: e.symbol,
+		hidden: S(e)
+	})), ...f == null ? [] : [{
+		label: h ?? "Norm",
+		color: "var(--color-chart-emphasis)",
+		shape: "dashed",
+		fixed: !0
+	}]];
+	function L(e) {
+		let { point: t, row: n } = w[e];
+		return {
+			title: t.label,
+			rows: [
+				{
+					label: n.label,
+					value: "",
+					color: n.color,
+					symbol: n.symbol
+				},
+				{
+					label: ke(u),
+					value: Ae(t.x, d)
+				},
+				{
+					label: ke(s),
+					value: Ae(t.y, l)
+				}
+			]
+		};
+	}
+	let R = (e) => ({
+		x: N(e.x),
+		y: k(e.y, D.max, j)
+	}), z = (e) => R(w[e].point), V = Y(a, w.length, (e) => ({
+		...z(e),
+		content: L(e)
+	})), re = w.map(({ point: e, row: t }) => e.href ? {
+		id: e.id ?? `${t.label} · ${e.label}`,
+		href: e.href
+	} : null), ie = Q(r, re), U = w.map(({ point: e }, t) => ie.of(re[t], e.label, oe(L(t)))), W = Oe(w.map((e, t) => ({
+		label: e.point.label,
+		...z(t)
+	})), t.dataLabels ?? [], j, a.fontFamily), q = f == null ? 0 : k(f, D.max, j), ae = a.hoverIndex == null ? void 0 : w[a.hoverIndex], J = (t) => {
+		let n = t.target.closest?.("[data-point]");
+		if (n) return Number(n.getAttribute("data-point"));
+		let r = t.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? j.width / i.width : 1, o = (t.clientX - (i?.left ?? 0)) * a, s = (t.clientY - (i?.top ?? 0)) * a, c = e(r, "--h-target", 48) / 2, l = null, u = c;
+		return w.forEach((e, t) => {
+			let { x: n, y: r } = z(t), i = Math.hypot(n - o, r - s);
+			i <= u && (l = t, u = i);
+		}), l;
+	}, se = (e) => {
+		let t = J(e);
+		t == null ? (a.hoverIndex != null || a.tooltip) && a.hoverAt(null) : a.hoverAt(t, e, L(t));
+	}, Z = (e) => {
+		let t = J(e), r = t == null ? null : U[t];
+		r?.clickable && r.click !== n && r.click();
+	}, ce = ae != null && U[a.hoverIndex]?.clickable, le = [f == null ? n : i`
+        <g class="lintje-chart__reference">
+          <line x1=${j.left} x2=${j.width - j.right} y1=${q} y2=${q}
+                stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
+          <text x=${j.left + 6} y=${q - 6}
+                class="lintje-chart__axis-label lintje-chart__axis-label--halo">
+            ${h ?? `norm ${Ae(f, l)}`}
+          </text>
+        </g>
+      `, i`<g @mousemove=${se} @mouseleave=${() => a.hoverAt(null)} @click=${Z}>
+      <rect class="lintje-chart__hit ${ce ? "is-clickable" : ""}"
+            x="0" y="0" width=${j.width} height=${j.height} />
+      <g>
+        ${p(C, (e) => e.key, ({ point: e, row: t, key: r }, a) => {
+		let { x: o, y: s } = R(e), c = te(t.color), l = T.get(r), u = l == null ? void 0 : U[l];
+		return i`
+              <path class="lintje-chart__point lintje-chart__mark ${c ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
+                    ${_(B(a, C.length))}
+                    d=${M(t.symbol, Ce, o, s)} fill=${t.color}
+                    stroke=${c ?? n} stroke-width=${c ? 1 : n}
+                    data-point=${l ?? n}
+                    data-mark-id=${u?.markId ?? n} role=${u?.role ?? n}
+                    tabindex=${u?.tabIndex ?? n}
+                    aria-pressed=${u?.pressed ?? n} aria-label=${u?.label ?? n}
+                    @keydown=${u?.keydown ?? n} />
+            `;
+	})}
+      </g>
+
+      ${W.map((e) => i`
+          <text x=${e.x} y=${e.y} text-anchor=${e.anchor}
+                class="lintje-chart__data-label lintje-chart__data-label--halo">${e.label}</text>
+        `)}
+
+      <!-- The point under the pointer or the keyboard, raised with a ring in the surface. -->
+      ${ae ? (() => {
+		let { x: e, y: t } = z(a.hoverIndex), r = te(ae.row.color), o = M(ae.row.symbol, we, e, t);
+		return i`
+            <path class="lintje-chart__hover-point" d=${o} fill=${ae.row.color} />
+            ${r ? i`<path class="lintje-chart__hover-casing" d=${o} stroke=${r} />` : n}
+          `;
+	})() : n}
+    </g>`];
+	return m`
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
+         ${c(a.attach)} ?data-in-view=${a.inView} data-tooltip-anchor
+         @keydown=${(e) => a.dismiss(e) || ie.escape(e)}>
+      ${ee({
+		items: I,
+		onToggle: (e) => a.toggleSeries(e)
+	})}
+      ${ne({
+		fontFamily: a.fontFamily,
+		id: y,
+		ticks: D.ticks,
+		max: D.max,
+		area: j,
+		formatTick: A.format,
+		axisTitle: s,
+		xLabels: F,
+		xTitle: u,
+		description: o,
+		interactive: ie.interactive,
+		keys: V
+	}, le)}
+      ${H(a)}
+      ${X(a)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/heatmap-chart/heatmap-classes.ts
+var Ne = [
+	"var(--color-chart-seq-1)",
+	"var(--color-chart-seq-2)",
+	"var(--color-chart-seq-3)",
+	"var(--color-chart-seq-4)",
+	"var(--color-chart-seq-5)"
+], Pe = Ne.length, Fe = [
+	1,
+	2,
+	2.5,
+	5,
+	10
+];
+function Ie(e, t) {
+	if (!(e > 0) || !Number.isFinite(e)) return 1;
+	let n = 10 ** Math.floor(Math.log10(e)), r = 0, i = Infinity;
+	for (let a of Fe) {
+		let o = a * n;
+		if (t && !Number.isInteger(o)) continue;
+		let s = Math.abs(Math.log(o / e));
+		s < i && (i = s, r = o);
+	}
+	return r || (t ? 1 : n);
+}
+function Le(e, t) {
+	let n = Math.max(0, Math.min(10, -Math.floor(Math.log10(t)) + 1));
+	return Number(e.toFixed(n));
+}
+function Re(e) {
+	let t = [];
+	for (let n of e) for (let e of n ?? []) e != null && Number.isFinite(e) && t.push(e);
+	if (t.length === 0) return [];
+	let n = Math.min(...t), r = Math.max(...t);
+	if (n === r) return [];
+	let i = t.every(Number.isInteger), a = Ie((r - n) / Pe, i), o = Math.floor(n / a) * a, s = [];
+	for (let e = 1; e < Pe; e += 1) {
+		let t = Le(o + e * a, a);
+		if (t > r) break;
+		s.push(t);
+	}
+	return s;
+}
+function ze(e, t, n = 0) {
+	let r = g(e, n), i = t?.trim() ?? "";
+	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
+}
+function Be(e) {
+	let t = 0;
+	for (let n of e) {
+		let e = String(n), r = e.indexOf(".");
+		r >= 0 && (t = Math.max(t, e.length - r - 1));
+	}
+	return Math.min(t, 4);
+}
+function Ve(e, t = {}) {
+	let n = (t.bounds?.length ? t.bounds.slice(0, Pe - 1) : null) ?? Re(e), r = Be(n), i = (e) => ze(e, t.unit, r), a = (e) => g(e, r);
+	if (n.length === 0) {
+		let e = Ne.length - 1;
+		return [{
+			limit: Infinity,
+			color: Ne[e],
+			label: "alle waarden",
+			ramp: e
+		}];
+	}
+	return [
+		{
+			limit: n[0],
+			color: Ne[0],
+			label: `< ${i(n[0])}`,
+			ramp: 0
+		},
+		...n.slice(1).map((e, t) => ({
+			limit: e,
+			color: Ne[t + 1],
+			label: `${a(n[t])}–${i(e)}`,
+			ramp: t + 1
+		})),
+		{
+			limit: Infinity,
+			color: Ne[n.length],
+			label: `≥ ${i(n[n.length - 1])}`,
+			ramp: n.length
+		}
+	];
+}
+function He(e, t) {
+	let n = e.findIndex((e) => t < e.limit);
+	return n === -1 ? e.length - 1 : n;
+}
+//#endregion
+//#region src/components/shared/charts/heatmap-chart/heatmap-chart.ts
+function Ue(e, t, n) {
+	return Array.from({ length: n }, (n, r) => Array.from({ length: t }, (t, n) => e?.[n]?.[r]));
+}
+function We(e) {
+	if (e.mobile) return e.mobile;
+	let t = e.rowLabels.length, n = e.columnLabels.length;
+	if (!(n <= t)) return {
+		columnLabels: e.rowLabels,
+		rowLabels: e.columnLabels,
+		values: Ue(e.values, t, n),
+		links: e.links ? Ue(e.links, t, n) : void 0
+	};
+}
+function Ge(e, t) {
+	let { controller: r, description: i, mobile: a = !1 } = t, o = a ? We(e) : void 0, s = o?.columnLabels ?? e.columnLabels, l = o?.rowLabels ?? e.rowLabels, u = o?.values ?? e.values, d = o ? o.links : e.links, f = o ? !0 : e.compact ?? !1, { unit: p } = e, h = Q(t, (d ?? []).flat()), v = Ve(u, {
+		bounds: e.bounds,
+		unit: p
+	}), y = (e) => He(v, e);
+	r.measure({});
+	let b = r.selectedCell, x = r.dimmedClass;
+	return m`
+    <div class="lintje-heatmap" ${c(r.attach)} ?data-in-view=${r.inView}
+         data-tooltip-anchor @keydown=${h.escape}>
+      <table class="lintje-heatmap__grid ${f ? "is-compact" : ""}">
+        <caption class="visually-hidden">${i}</caption>
+        <thead>
+          <tr>
+            <td></td>
+            ${s.map((e) => m`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${l.map((e, t) => m`
+            <tr>
+              <th scope="row" class="lintje-heatmap__row-label" title=${e}>
+                <span class="lintje-heatmap__row-label-text">${e}</span>
+              </th>
+              ${s.map((n, i) => {
+		let a = u[t]?.[i];
+		if (a == null) return m`
+                    <td class="lintje-heatmap__slot">
+                      <div class="lintje-heatmap__cell is-empty"
+                           title="${e} · ${s[i]}: geen meting">
+                        <span class="visually-hidden">geen meting</span>
+                      </div>
+                    </td>
+                  `;
+		let o = y(a), c = h.of(d?.[t]?.[i], `${e} · ${s[i]}`), S = !c.clickable && b?.row === t && b?.column === i;
+		return m`
+                  <td class="lintje-heatmap__slot">
+                    <button
+                      type="button"
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[o].ramp} ${S ? "is-selected" : ""} ${x != null && x !== o ? "is-dimmed" : ""} ${c.state}"
+                      data-mark-id=${c.markId}
+                      ${_({
+			"--lintje-cell": v[o].color,
+			...re(i, t, s.length, l.length)
+		})}
+                      @click=${c.clickable ? c.click : () => {
+			r.selectedCell = S ? null : {
+				row: t,
+				column: i
+			}, r.requestUpdate();
+		}}
+                      @mousemove=${f ? void 0 : (t) => r.showTooltip(t, {
+			title: `${e} · ${s[i]}`,
+			rows: [{
+				label: `klasse ${v[o].label}`,
+				value: ze(a, p),
+				color: v[o].color
+			}]
+		})}
+                      @mouseleave=${f ? void 0 : () => r.hideTooltip()}
+                      aria-pressed=${c.clickable ? c.pressed : S}
+                      aria-label="${e} ${s[i]}: ${ze(a, p)}, klasse ${v[o].label}"
+                    >${g(a)}</button>
+                  </td>
+                `;
+	})}
+            </tr>
+          `)}
+        </tbody>
+      </table>
+
+      <!-- Selected cell: a 48 px line with day, block, value, class. -->
+      ${b && u[b.row]?.[b.column] != null ? m`
+        <p class="lintje-heatmap__selection">
+          <b>${l[b.row]} ${s[b.column]}</b> ·
+          ${ze(u[b.row][b.column], p)} · klasse
+          ${v[y(u[b.row][b.column])].label}
+        </p>
+      ` : n}
+
+      <!-- Class legend: clickable, dims the other classes to .25. -->
+      <ul class="lintje-heatmap__legend">
+        ${v.map((e, t) => m`
+          <li>
+            <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
+                    @click=${() => {
+		r.dimmedClass = x === t ? null : t, r.requestUpdate();
+	}}
+                    aria-pressed=${x === t}>
+              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${_({ background: e.color })}></span>
+              <span>${e.label}</span>
+            </button>
+          </li>
+        `)}
+      </ul>
+      ${H(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/histogram-chart/histogram-chart.ts
+var Ke = 16, qe = 56, Je = 8, Ye = 18;
+function Xe(e) {
+	return g(e, +!Number.isInteger(e));
+}
+function Ze(e, t) {
+	let n = t ? ` ${t}` : "";
+	return e.to == null ? `${Xe(e.from)}${n} of meer` : `${Xe(e.from)} tot ${Xe(e.to)}${n}`;
+}
+function Qe(e, t, n = "") {
+	let r = t.width, i = e.map((e) => {
+		let t = d(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
+		return {
+			x: i ? e.x + 6 : e.x - 6,
+			anchor: i ? "start" : "end",
+			left: i ? e.x + 6 : e.x - 6 - t,
+			right: i ? e.x + 6 + t : e.x - 6
+		};
+	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + Je && i[1].left < i[0].right + Je;
+	return i.map((e, n) => ({
+		x: e.x,
+		y: t.top + 12 + (o && n === a ? Ye : 0),
+		anchor: e.anchor
+	}));
+}
+function $e(e, t) {
+	let { controller: r, description: a } = t, { bins: o, axisTitle: l, xTitle: u, unit: f, median: p, threshold: h, small: v = !1 } = e, y = e.label ?? "Aantal", b = I(e.color) ?? "var(--color-chart-default)", x = r.id, S = (e) => f ? `${e} ${f}` : e;
+	r.measure({
+		width: !0,
+		height: t.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let C = o.map((e) => e.count).filter((e) => e != null), w = C.length === o.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = G(Math.max(...C, 1)), D = P(E, r.width, { fontFamily: r.fontFamily }), O = K(t), A = K(t, {
+		left: D.width,
+		bottom: O.bottom + (u ? Ke : 0)
+	}), j = A.height - A.bottom, M = A.width - A.right, N = o[0]?.from ?? 0, F = o[o.length - 1], L = o.length > 1 ? o[o.length - 1].from - o[o.length - 2].from : 1, R = F ? F.to ?? F.from + L : 1, z = (e) => A.left + (e - N) / Math.max(R - N, 2 ** -52) * (M - A.left), V = o.map((e) => {
+		let t = z(e.from), n = z(e.to ?? R) - t;
+		return {
+			x: t,
+			width: n,
+			center: t + n / 2
+		};
+	}), te = (e) => {
+		let t = o[e].count;
+		return {
+			title: Ze(o[e], f),
+			rows: [{
+				label: y,
+				value: t == null ? "geen gegevens" : g(t),
+				color: b
+			}, ...t != null && w != null && w > 0 ? [{
+				label: "Aandeel",
+				value: s(t / w * 100, 1),
+				color: b
+			}] : []]
+		};
+	}, re = Y(r, o.length, (e) => ({
+		x: V[e].center,
+		y: o[e].count == null ? A.top : k(o[e].count, T, A),
+		content: te(e)
+	})), U = F?.to == null && o.length > 0, W = [...o.slice(0, U ? -1 : void 0).map((e) => e.from), ...U ? [] : F ? [F.to] : []].map((e) => ({
+		label: Xe(e),
+		x: z(e)
+	})), q = U ? {
+		label: `${Xe(F.from)}+`,
+		x: V[V.length - 1].center
+	} : null, ae = W.length > 1 ? (W[W.length - 1].x - W[0].x) / (W.length - 1) : 1, oe = Math.max(1, Math.ceil(qe / ae)), J = ie(W.filter((e, t) => t % oe === 0), r.fontFamily), se = (e, t) => Math.abs(t.x - e.x) < (d(e.label, r.fontFamily) + d(t.label, r.fontFamily)) / 2 + Je, Z = U ? q : W[W.length - 1];
+	Z && !J.includes(Z) && (J.length && se(J[J.length - 1], Z) && (J = J.slice(0, -1)), U || (J = [...J, Z]));
+	let Q = U ? F.from : R, ce = (e) => e != null && e >= N && e <= Q, le = [...ce(p) ? [{
+		x: z(p),
+		text: e.medianLabel ?? S(`mediaan ${Xe(p)}`),
+		bold: !0,
+		dashed: !1
+	}] : [], ...ce(h) ? [{
+		x: z(h),
+		text: e.thresholdLabel ?? S(`norm ${Xe(h)}`),
+		bold: !1,
+		dashed: !0
+	}] : []], ue = Qe(le, A, r.fontFamily), de = (e) => e.charAt(0).toUpperCase() + e.slice(1), fe = [
+		{
+			label: y,
+			color: b,
+			shape: "square"
+		},
+		...ce(p) ? [{
+			label: de(e.medianLabel ?? "Mediaan"),
+			color: "var(--color-chart-emphasis)",
+			shape: "line"
+		}] : [],
+		...ce(h) ? [{
+			label: de(e.thresholdLabel ?? "Norm"),
+			color: "var(--color-chart-emphasis)",
+			shape: "dashed"
+		}] : []
+	], pe = (e) => {
+		let t = V[e], n = o[e].count;
+		if (n == null) return i`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
+                       height=${Math.max(0, j - A.top)} fill="url(#hatch-${x})" />`;
+		let r = k(n, T, A);
+		return i`
+      <g class="lintje-chart__bar-group" ${_(B(e, o.length))}>
+        <rect class="lintje-chart__bar lintje-chart__segment" x=${t.x} y=${r} width=${t.width}
+              height=${Math.max(0, j - r)} fill=${b} />
+      </g>
+    `;
+	}, $ = r.hoverIndex, me = $ == null ? null : o[$]?.count, he = [
+		o.map((e, t) => pe(t)),
+		$ != null && me != null ? i`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
+                  x=${V[$].x} y=${k(me, T, A)} width=${V[$].width}
+                  height=${Math.max(0, j - k(me, T, A))} fill=${b} />` : n,
+		J.map((e) => i`
+        <line x1=${e.x} x2=${e.x} y1=${j} y2=${j + 4}
+              stroke="var(--color-chart-zero)" stroke-width="1" />
+        <text x=${e.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
+      `),
+		q ? i`<text x=${q.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${q.label}</text>` : n,
+		le.map((e, t) => {
+			let r = ue[t];
+			return i`
+        <g class="lintje-chart__reference">
+          <line x1=${e.x} x2=${e.x} y1=${A.top} y2=${j}
+                stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed ? 1 : 1.5}
+                stroke-dasharray=${e.dashed ? "3 3" : n} />
+          <text x=${r.x} y=${r.y} text-anchor=${r.anchor}
+                class=${e.bold ? "lintje-chart__data-label lintje-chart__data-label--halo" : "lintje-chart__axis-label lintje-chart__axis-label--halo"}>${e.text}</text>
+        </g>
+      `;
+		}),
+		V.map((e, t) => i`
+        <rect x=${e.x} y=${A.top} width=${e.width} height=${Math.max(0, j - A.top)}
+              fill="transparent"
+              @mousemove=${(e) => r.hoverAt(t, e, te(t))}
+              @mouseleave=${() => r.hoverAt(null)} />
+      `)
+	];
+	return m`
+    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
+         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e)}>
+      ${ee({ items: fe })}
+      ${ne({
+		fontFamily: r.fontFamily,
+		id: x,
+		ticks: E,
+		max: T,
+		area: A,
+		axisTitle: l,
+		xTitle: u,
+		description: a,
+		formatTick: D.format,
+		keys: re
+	}, he)}
+      ${H(r)}
+      ${X(r)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/shared/render-chart.ts
+function et(e, t) {
+	switch (e.kind) {
+		case "line": return se(e, t);
+		case "bar": return le(e, t);
+		case "horizontal-bar": return de(e, t);
+		case "target-progress": return fe(e, t);
+		case "grouped-bar": return pe(e, t);
+		case "stacked-bar": return ge(e, t);
+		case "pie": return xe(e, t);
+		case "dual-axis": return Se(e, t);
+		case "scatter": return Me(e, t);
+		case "heatmap": return Ge(e, t);
+		case "histogram": return $e(e, t);
+	}
+}
+//#endregion
+//#region src/components/charts/chart/chart.css?inline
+var tt = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", nt = ".lintje-chart__svg, .lintje-pie-chart__svg", rt = [{
+	value: "chart",
+	label: "Grafiek"
+}, {
+	value: "table",
+	label: "Tabel"
+}];
+function it(e) {
+	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
+}
+function at(e) {
+	switch (e.kind) {
+		case "line":
+		case "dual-axis":
+		case "scatter": return "line";
+		case "pie": return e.donut ? "donut" : "pie";
+		case "heatmap": return "heatmap";
+		default: return "bar";
+	}
+}
+function ot(e) {
+	switch (e.kind) {
+		case "horizontal-bar":
+		case "target-progress": return e.rows.length ? `${ue(e.rows.length)}px` : void 0;
+		case "pie":
+		case "heatmap": return;
+		default: return e.small ? "var(--chart-h-small)" : void 0;
+	}
+}
+function st(e) {
+	switch (e.kind) {
+		case "line": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "bar": return [[
+			"",
+			e.axisTitle ?? "Waarde",
+			...e.trend ? ["Trend"] : []
+		], ...e.labels.map((t, n) => [
+			t,
+			e.values[n],
+			...e.trend ? [e.trend[n]] : []
+		])];
+		case "horizontal-bar": return [["", e.unit ? `Waarde (${e.unit})` : "Waarde"], ...e.rows.map((e) => [e.label, e.value])];
+		case "target-progress": return [[
+			"",
+			"Voortgang (%)",
+			"Doel (%)"
+		], ...e.rows.map((t) => [
+			t.label,
+			t.value,
+			e.target ?? 100
+		])];
+		case "grouped-bar":
+		case "stacked-bar": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "pie": return [["", "Aantal"], ...e.segments.map((e) => [e.label, e.value])];
+		case "dual-axis": {
+			let t = (e) => e.unit ? `${e.label} (${e.unit})` : e.label;
+			return [[
+				"",
+				t(e.left),
+				t(e.right)
+			], ...e.labels.map((t, n) => [
+				t,
+				e.left.values[n],
+				e.right.values[n]
+			])];
+		}
+		case "scatter": {
+			let t = (e, t) => {
+				let n = e.charAt(0).toUpperCase() + e.slice(1);
+				return t ? `${n} (${t})` : n;
+			};
+			return [[
+				"Reeks",
+				"Naam",
+				t(e.xTitle, e.xUnit),
+				t(e.axisTitle, e.unit)
+			], ...e.series.flatMap((e) => e.points.map((t) => [
+				e.label,
+				t.label,
+				t.x,
+				t.y
+			]))];
+		}
+		case "heatmap": return [["", ...e.columnLabels], ...e.rowLabels.map((t, n) => [t, ...e.values[n] ?? []])];
+		case "histogram": {
+			let t = (t) => e.unit ? `${t} (${e.unit})` : t;
+			return [[
+				"Klasse",
+				t("Van"),
+				t("Tot"),
+				"Aantal"
+			], ...e.bins.map((t) => [
+				Ze(t, e.unit),
+				t.from,
+				t.to ?? "",
+				t.count
+			])];
+		}
+	}
+}
+function ct(e) {
+	return e.reduce((e, t) => {
+		if (typeof t != "number" || Number.isInteger(t)) return e;
+		let n = String(t).split(".")[1] ?? "";
+		return Math.max(e, n.length);
+	}, 0);
+}
+function lt(e, t) {
+	let [n = [], ...r] = st(e), i = n.map((e, t) => {
+		let n = r.map((e) => e[t] ?? null);
+		return t === 0 || n.some((e) => typeof e == "string" && e !== "") ? {
+			key: `c${t}`,
+			header: String(e ?? ""),
+			format: "text",
+			sortable: !1
+		} : {
+			key: `c${t}`,
+			header: String(e ?? ""),
+			format: "decimal",
+			decimals: ct(n),
+			align: "right",
+			sortable: !1
+		};
+	});
+	return {
+		caption: t,
+		columns: i,
+		rows: r.map((e, t) => ({
+			row: String(t),
+			...Object.fromEntries(i.map((t, n) => [t.key, e[n] ?? null]))
+		})),
+		rowKey: "row",
+		defaultSort: {
+			key: "row",
+			direction: "asc"
+		},
+		pageSize: Math.max(r.length, 1)
+	};
+}
+var ut = class extends S {
+	constructor(...e) {
+		super(...e), this.view = "chart", this.#e = new U(() => this.requestUpdate()), this.#t = null, this.#n = new a(this);
+	}
+	static {
+		this.styles = [
+			u,
+			r(y),
+			r(v),
+			r(o),
+			...C,
+			r(tt)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			view: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	disconnectedCallback() {
+		this.#e.detach(), this.#t?.detach(), this.#t = null, super.disconnectedCallback();
+	}
+	get ready() {
+		return (this.data?.state ?? "ready") === "ready";
+	}
+	get showsTable() {
+		return !!this.data?.tableSwitch && this.ready && this.view === "table";
+	}
+	get expandable() {
+		return this.data?.expandable !== !1;
+	}
+	get downloadName() {
+		let e = this.data?.download;
+		return e === !1 ? null : e?.filename ?? it(this.data?.title);
+	}
+	csv() {
+		let e = this.data, t = this.downloadName;
+		e && t !== null && D(t, st(e.chart));
+	}
+	png() {
+		let e = this.data;
+		if (!e) return;
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(nt);
+		t && w(this.downloadName ?? it(e.title), t);
+	}
+	expandChanged(e) {
+		e ? this.#t ??= new U(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+	}
+	render() {
+		let e = this.data;
+		if (!e) return n;
+		let t = this.ready, r = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, i = this.id ? `${this.id}-tile` : void 0, a = e.tableSwitch && t ? this.viewSwitch() : n, o = this.showsTable;
+		return m`<lintje-tile
+        id=${i ?? n}
+        span=${e.span ?? n}
+        heading=${e.title ?? n}
+        icon=${e.icon ?? n}
+        subtitle=${r ?? n}
+        intro=${e.intro ?? n}
+        footnote=${e.footnote ?? n}
+        ?legend-below=${!!e.legendBelow}
+        ?expandable=${this.expandable && t}
+        ?download=${this.downloadName !== null && t}
+        @lintje-tile-expand=${(e) => {
+			e.stopPropagation(), this.expand(!0);
+		}}
+        @lintje-tile-download=${(e) => {
+			e.stopPropagation(), this.csv();
+		}}
+      >
+        ${a}
+        ${e.notice ? m`<lintje-announcement
+              slot="notice"
+              compact
+              .data=${e.notice}
+            ></lintje-announcement>` : n}
+        ${this.content()}
+      </lintje-tile>
+
+      ${this.renderExpandModal(this.expanded ? o ? this.table() : this.#t ? et(e.chart, {
+			...this.chartOptions(this.#t),
+			expanded: !0
+		}) : n : n, {
+			heading: e.title,
+			subtitle: r,
+			footnote: e.footnote,
+			csv: () => this.csv(),
+			png: o ? void 0 : () => this.png()
+		})}`;
+	}
+	content() {
+		let e = this.data, t = ot(e.chart);
+		switch (e.state ?? "ready") {
+			case "loading": return x({
+				kind: at(e.chart),
+				height: t
+			});
+			case "empty": return T(e.message, t);
+			case "error": return E({
+				message: e.message,
+				lastKnown: e.lastKnown,
+				height: t,
+				announcement: b
+			});
+			default: return this.showsTable ? this.table() : et(e.chart, this.chartOptions(this.#e));
+		}
+	}
+	viewSwitch() {
+		let e = this.#n.matches;
+		return m`<lintje-segmented
+      class="lintje-chart__view"
+      slot=${e ? "notice" : "actions"}
+      label="Weergave"
+      hide-label
+      ?stacked=${e}
+      .value=${this.view}
+      .options=${rt}
+      @lintje-change=${(e) => {
+			e.stopPropagation(), this.view = e.detail === "table" ? "table" : "chart";
+		}}
+    ></lintje-segmented>`;
+	}
+	table() {
+		let e = this.data, t = e.title ? `${e.title}, als tabel` : "Grafiek als tabel";
+		return m`<lintje-data-table
+      class="lintje-chart__table"
+      bare
+      .data=${lt(e.chart, t)}
+    ></lintje-data-table>`;
+	}
+	async focusMark(e) {
+		await this.updateComplete;
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${nt}, .lintje-heatmap`);
+		n && !n.hasAttribute("tabindex") && n.setAttribute("tabindex", "-1"), n?.focus();
+	}
+	chartOptions(e) {
+		return {
+			controller: e,
+			description: this.data?.description ?? "",
+			mobile: this.#n.matches,
+			selectedId: this.data?.selectedId ?? null,
+			onSelect: ({ id: e, label: t, href: n }) => this.emit("lintje-mark-select", {
+				id: e,
+				label: t,
+				href: n
+			}),
+			onClear: (e) => {
+				this.emit("lintje-mark-select", {
+					id: null,
+					label: null,
+					href: this.data?.clearHref
+				}), this.focusMark(e);
+			}
+		};
+	}
+};
+t("lintje-chart", ut);
+//#endregion
+export { ut as LintjeChart };