lintje 0.1.1 → 0.2.0

package/dist-elements/tag/chart-tile.js

@@ -1,1474 +0,0 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Lt as i, S as a, a as o, d as s, i as c, k as l, n as u, o as d, qt as f, s as p, t as m, ut as h, w as g } from "../chunks/base-rBLTcEIv.js";
-import { t as _ } from "./announcement.js";
-import "./segmented.js";
-import { a as v, c as y, d as b, i as x, n as S, o as C, s as w, t as T } from "../chunks/download-lFooAfD1.js";
-import { C as E, S as D, T as O, _ as k, a as A, b as j, c as M, d as N, f as P, g as F, h as I, i as L, l as R, m as z, n as B, o as ee, r as V, s as H, t as te, v as U, w as W, x as G, y as K } from "../chunks/stagger-9hYzxhMG.js";
-import "./data-table.js";
-//#region src/components/shared/charts/shared/plot-keys.ts
-var q = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), ne = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
-function re(e) {
-	return `${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`).join(", ")}`;
-}
-function ie(e) {
-	try {
-		return e.matches(":focus-visible");
-	} catch {
-		return !0;
-	}
-}
-function J(e, t, n) {
-	let r = (t, r) => {
-		let i = n(r), a = t.closest("[data-tooltip-anchor]"), o = t.getBoundingClientRect(), s = a?.getBoundingClientRect() ?? o;
-		e.hoverIndex = r, e.status = re(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
-	};
-	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 (ne.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 && ie(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 Y(e) {
-	return r`<p class="visually-hidden" role="status">${e.status}</p>`;
-}
-//#endregion
-//#region src/components/shared/charts/line-chart/line-chart.ts
-function ae(e, n) {
-	let { controller: i, description: a } = n, { labels: s, axisTitle: c, unit: l, asOfIndex: u, asOfLabel: d, pendingHours: h = 0, fixedMax: g, small: _ = !1 } = e, v = i.id;
-	i.measure({
-		width: !0,
-		height: n.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!n.expanded && !n.mobile
-	});
-	let y = e.series.filter((e) => !e.comparison).length > 1, b = 0, x = e.series.map((e) => ({
-		...e,
-		color: N(e.color),
-		symbol: y && !e.comparison ? I(e.color) ? e.color : z[b++ % z.length] : void 0
-	})), S = x.filter((e) => !i.hiddenSeries.includes(e.label)), C = S.flatMap((e) => e.values).filter((e) => e != null), { max: w, ticks: T } = j(g ?? Math.max(...C, 1)), E = K(T, i.width, {
-		fontFamily: i.fontFamily,
-		minimum: Math.ceil(p(s[0] ?? "", i.fontFamily) / 2)
-	}), k = U(n, { left: E.width }), A = h > 6, M = u ?? s.length - 1, L = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", B = x.map((e) => ({
-		label: e.label,
-		color: L(e),
-		shape: e.comparison ? "dashed" : "line",
-		symbol: e.symbol,
-		hidden: i.hiddenSeries.includes(e.label)
-	})), te = Math.max(1, Math.ceil(s.length / 8)), G = s.map((e, t) => ({
-		label: e,
-		x: W(t, s.length, k),
-		i: t
-	})).filter((e) => e.i % te === 0);
-	function q(e) {
-		return {
-			title: s[e],
-			rows: S.map((t) => ({
-				label: t.label,
-				value: t.values[e] == null ? "geen gegevens" : o(t.values[e]),
-				color: L(t)
-			}))
-		};
-	}
-	let ne = J(i, s.length, (e) => {
-		let t = S.map((t) => t.values[e]).filter((e) => e != null);
-		return {
-			x: W(e, s.length, k),
-			y: t.length ? O(Math.max(...t), w, k) : k.top,
-			content: q(e)
-		};
-	}), re = [
-		h > 0 ? (() => {
-			let e = W(M, s.length, k), t = A ? D(k) / (s.length - 1) : k.width - k.right - e;
-			return f`<rect x=${e} y=${k.top} width=${Math.max(0, t)}
-                           height=${k.height - k.top - k.bottom}
-                           fill="url(#hatch-${v})" />`;
-		})() : t,
-		f`<g class="lintje-chart__reveal">
-      ${S.map((e) => {
-			let n = L(e), r = e.comparison ? void 0 : P(n), i = [[]];
-			e.values.forEach((e, t) => {
-				e == null || A && t > M ? i[i.length - 1].length && i.push([]) : i[i.length - 1].push({
-					x: W(t, s.length, k),
-					y: O(e, w, k)
-				});
-			});
-			let a = i.filter((e) => e.length > 0);
-			if (a.length === 0) return t;
-			let o = a[a.length - 1], c = o[o.length - 1], l = k.height - k.bottom;
-			return f`
-          <g>
-            ${a.map((i) => {
-				let a = i.map((e) => `${e.x},${e.y}`).join(" ");
-				return f`
-                ${e.area && !e.comparison ? f`<polygon fill=${n} fill-opacity=".14"
-                                 points=${`${i[0].x},${l} ${a} ${i[i.length - 1].x},${l}`} />` : t}
-                ${r && i.length > 1 ? f`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${r} />` : t}
-                ${i.length === 1 ? f`<circle cx=${i[0].x} cy=${i[0].y} r="2.5" fill=${n} />` : f`<polyline
-                        class="lintje-chart__line"
-                        points=${a}
-                        stroke=${n}
-                        stroke-dasharray=${e.comparison ? "5 4" : t}
-                        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 ? f`<path class="lintje-chart__line-end" d=${F(e.symbol, 4.5, c.x, c.y)} fill=${n} />` : A && !e.comparison ? f`<circle cx=${c.x} cy=${c.y} r="4" fill=${n} />` : t}
-          </g>
-        `;
-		})}
-    </g>`,
-		A && d ? ee({
-			area: k,
-			index: M,
-			count: s.length,
-			label: `peilmoment ${d}`,
-			pendingHours: h,
-			lastValue: (() => {
-				let e = S.find((e) => !e.comparison)?.values[M];
-				return e == null ? void 0 : `${o(e)}${l ? ` ${l}` : ""}`;
-			})()
-		}) : t,
-		i.hoverIndex == null ? t : S.map((e) => {
-			let n = i.hoverIndex, r = e.values[n];
-			return r == null || A && n > M ? t : f`<circle class="lintje-chart__hover-point" r="4" fill=${L(e)}
-                             cx=${W(n, s.length, k)}
-                             cy=${O(r, w, k)} />`;
-		}),
-		s.map((e, t) => {
-			let n = W(t, s.length, k), r = D(k) / Math.max(1, s.length - 1);
-			return f`
-        <rect x=${n - r / 2} y=${k.top} width=${r}
-              height=${k.height - k.top - k.bottom}
-              fill="transparent"
-              @mousemove=${(e) => i.hoverAt(t, e, q(t))}
-              @mouseleave=${() => i.hoverAt(null)} />
-      `;
-		})
-	];
-	return r`
-    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
-         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e)}>
-      ${R({
-		items: B,
-		onToggle: (e) => i.toggleSeries(e)
-	})}
-      ${H({
-		fontFamily: i.fontFamily,
-		id: v,
-		ticks: T,
-		max: w,
-		area: k,
-		formatTick: E.format,
-		axisTitle: c ?? l,
-		xLabels: G,
-		description: a,
-		keys: ne
-	}, re)}
-      ${V(i)}
-      ${Y(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/shared/mark-select.ts
-var oe = {
-	clickable: !1,
-	state: "",
-	markId: t,
-	role: t,
-	tabIndex: t,
-	pressed: t,
-	label: t,
-	click: t,
-	keydown: t
-};
-function X(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 ? oe : {
-				...oe,
-				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 se = [
-	"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 ce(e, n) {
-	let { controller: i, description: a } = n, { labels: s, values: l, axisTitle: d, trend: p, dataLabels: g = !0, small: _ = !1, links: v } = e, y = N(e.color) ?? "var(--color-chart-default)", b = i.id, x = X(n, v ?? []);
-	i.measure({
-		width: !0,
-		height: n.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!n.expanded && !n.mobile
-	});
-	let S = l.filter((e) => e != null), { max: C, ticks: w } = j(Math.max(...S, 1)), T = K(w, i.width, { fontFamily: i.fontFamily }), E = U(n, { left: T.width }), D = E.height - E.bottom, { width: k, bandWidth: A } = G(0, s.length, E), M = g && l.every((e) => e == null || u(c(e, k), A - 4)), P = (e) => ({
-		title: s[e],
-		rows: [{
-			label: d ?? "Waarde",
-			value: l[e] == null ? "geen gegevens" : o(l[e]),
-			color: y
-		}]
-	}), F = J(i, s.length, (e) => ({
-		x: G(e, s.length, E).center,
-		y: l[e] == null ? E.top : O(l[e], C, E),
-		content: P(e)
-	})), I = [l.map((e, n) => {
-		let r = G(n, s.length, E);
-		if (e == null) return f`<rect class="lintje-chart__missing" x=${r.x} y=${E.top} width=${r.width}
-                         height=${Math.max(0, D - E.top)} fill="url(#hatch-${b})"
-                         @mousemove=${(e) => i.showTooltip(e, P(n))}
-                         @mouseleave=${() => i.hideTooltip()} />`;
-		let a = O(e, C, E), l = x.of(v?.[n], s[n], `${s[n]}: ${o(e)}`);
-		return f`
-        <g class="lintje-chart__bar-group ${i.hoverIndex === n ? "is-hovered" : ""}"
-           ${h(B(n, s.length))}
-           @mousemove=${(e) => i.showTooltip(e, P(n))}
-           @mouseleave=${() => i.hideTooltip()}>
-          <rect class="lintje-chart__bar lintje-chart__mark ${l.state}"
-                x=${r.x} y=${a} width=${r.width} height=${Math.max(0, D - a)} fill=${y}
-                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} />
-          ${M ? f`<text x=${r.center} y=${a - 5} text-anchor="middle" class="lintje-chart__data-label">
-                    ${c(e, r.width)}
-                  </text>` : t}
-        </g>
-      `;
-	}), p ? f`<polyline
-          fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5" stroke-dasharray="5 4"
-          points=${p.map((e, t) => e == null ? null : `${G(t, s.length, E).center},${O(e, C, E)}`).filter(Boolean).join(" ")} />` : t];
-	return r`
-    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
-         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e) || x.escape(e)}>
-      ${H({
-		fontFamily: i.fontFamily,
-		id: b,
-		ticks: w,
-		max: C,
-		area: E,
-		axisTitle: d,
-		description: a,
-		formatTick: T.format,
-		xLabels: s.map((e, t) => ({
-			label: e,
-			x: G(t, s.length, E).center
-		})),
-		interactive: x.interactive,
-		keys: F
-	}, I)}
-      ${V(i)}
-      ${Y(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/horizontal-bar-chart/horizontal-bar-chart.ts
-function Z(e) {
-	return e * 26 + 24;
-}
-function le(e, n) {
-	let { controller: i, description: a } = n, { rows: s, threshold: c, thresholdLabel: l, unit: u } = e, d = N(e.color) ?? "var(--color-chart-dark-yellow)", p = N(e.aboveThresholdColor) ?? "var(--color-chart-red)", g = i.id, _ = s.map((e) => e.href ? {
-		id: e.id ?? e.label,
-		href: e.href
-	} : null), v = X(n, _), y = Z(s.length);
-	i.measure({
-		width: !0,
-		height: y
-	});
-	let b = i.width, x = E(s.map((e) => e.label), b, { fontFamily: i.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...s.map((e) => e.value), c ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, D = (e) => `${o(e)}${u ? ` ${u}` : ""}`, O = (e) => {
-		let t = s[e], n = c != null && t.value > c;
-		return {
-			title: t.label,
-			rows: [{
-				label: "Waarde",
-				value: D(t.value),
-				color: n ? p : d
-			}, ...c == null ? [] : [{
-				label: "Norm",
-				value: D(c),
-				color: "var(--color-chart-emphasis)"
-			}]]
-		};
-	}, k = J(i, s.length, (e) => ({
-		x: C + T(s[e].value),
-		y: e * 26 + 4,
-		content: O(e)
-	}));
-	return r`
-    <figure class="lintje-chart lintje-chart--rows" ${m(i.attach)} ?data-in-view=${i.inView}
-            data-tooltip-anchor
-            @keydown=${(e) => i.dismiss(e) || v.escape(e)}>
-      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${L(v.interactive)}
-           aria-labelledby="${g}-desc" width=${b} height=${y}
-           ${h({
-		height: `${y}px`,
-		...A(g)
-	})}
-           tabindex="0" @keydown=${k.keydown} @focus=${k.focus} @blur=${k.blur}>
-        <desc id="${g}-desc">${a}</desc>
-        <defs>${M(g)}</defs>
-        ${c == null ? t : f`
-          <line x1=${C + T(c)} x2=${C + T(c)} y1=${4} y2=${s.length * 26 + 2}
-                stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${C + T(c) + 6} y=${s.length * 26 + 16} class="lintje-chart__axis-label">
-            ${l ?? `norm ${o(c)}`}
-          </text>
-        `}
-        ${s.map((e, t) => {
-		let n = t * 26 + 4, r = c != null && e.value > c, a = T(e.value), l = v.of(_[t], e.label, `${e.label}: ${o(e.value)}${u ? ` ${u}` : ""}`);
-		return f`
-            <g class="lintje-chart__bar-row ${i.hoverIndex === t ? "is-hovered" : ""}"
-               @mousemove=${(e) => i.showTooltip(e, O(t))}
-               @mouseleave=${() => i.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}"
-                    ${h(B(t, s.length))}
-                    x=${C} y=${n} width=${Math.max(0, a)} height=${16}
-                    fill=${r ? p : 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 + a + 6} y=${n + 16 - 3} font-weight="700"
-                    class="lintje-chart__data-label ${c == null ? "" : "lintje-chart__data-label--halo"}">
-                ${o(e.value)}${u ? ` ${u}` : ""}
-              </text>
-            </g>
-          `;
-	})}
-      </svg>
-      ${V(i)}
-      ${Y(i)}
-    </figure>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/target-progress-chart/target-progress-chart.ts
-function ue(e, t) {
-	let { controller: n, description: i } = t, { rows: a, target: o = 100 } = e, s = n.id, c = Z(a.length);
-	n.measure({
-		width: !0,
-		height: c
-	});
-	let l = n.width, u = E(a.map((e) => e.label), l, { fontFamily: n.fontFamily }), { labelEnd: p, barStart: g } = u, _ = (e) => Math.max(40, l - g - 70) * e / 110, v = g + _(o), y = (e) => e >= o ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
-		title: a[e].label,
-		rows: [{
-			label: "Voortgang",
-			value: d(a[e].value),
-			color: y(a[e].value)
-		}, {
-			label: "Doel",
-			value: d(o),
-			color: "var(--color-chart-emphasis)"
-		}]
-	}), x = J(n, a.length, (e) => ({
-		x: g + _(a[e].value),
-		y: e * 26 + 4,
-		content: b(e)
-	}));
-	return r`
-    <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 ${l} ${c}" class="lintje-chart__svg" role="img"
-           aria-labelledby="${s}-desc" width=${l} height=${c} ${h({ height: `${c}px` })}
-           tabindex="0" @keydown=${x.keydown} @focus=${x.focus} @blur=${x.blur}>
-        <desc id="${s}-desc">${i}</desc>
-        ${a.map((e, t) => {
-		let r = t * 26 + 4, i = _(e.value), s = y(e.value), c = g + i + 46 > l, m = e.value >= o ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-		return f`
-            <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=${l} height=${26} fill="transparent" />
-              <text x=${p} 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" ${h(B(t, a.length))}
-                    x=${g} y=${r} width=${Math.max(0, i)} height=${16} fill=${s} />
-              <text x=${c ? g + i - 6 : g + i + 6} y=${r + 16 - 3}
-                    text-anchor=${c ? "end" : "start"}
-                    class="lintje-chart__data-label ${c ? m : ""}" font-weight="700">${d(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>
-      ${V(n)}
-      ${Y(n)}
-    </figure>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/grouped-bar-chart/grouped-bar-chart.ts
-function de(e, n) {
-	let { controller: i, description: a } = n, { labels: s, axisTitle: l, small: d = !1 } = e, p = i.id;
-	i.measure({
-		width: !0,
-		height: n.height ?? (d ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!n.expanded && !n.mobile
-	});
-	let g = e.series.map((e) => ({
-		...e,
-		color: N(e.color)
-	})), _ = g.filter((e) => !i.hiddenSeries.includes(e.label)), v = X(n, _.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = j(Math.max(..._.flatMap((e) => e.values), 1)), x = K(b, i.width, { fontFamily: i.fontFamily }), S = U(n, { left: x.width }), C = S.height - S.bottom, w = G(0, s.length, S).width / Math.max(1, _.length), T = _.every((e) => e.values.every((e) => u(c(e, w), w - 2))), E = g.map((e, t) => ({
-		label: e.label,
-		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
-		shape: "square",
-		hidden: i.hiddenSeries.includes(e.label)
-	})), D = (e, t) => E[g.indexOf(e)]?.color ?? se[t], k = (e) => ({
-		title: s[e],
-		rows: _.map((t, n) => ({
-			label: t.label,
-			value: o(t.values[e]),
-			color: D(t, n)
-		}))
-	}), A = J(i, s.length, (e) => ({
-		x: G(e, s.length, S).center,
-		y: O(Math.max(0, ..._.map((t) => t.values[e])), y, S),
-		content: k(e)
-	})), M = s.map((e, n) => {
-		let r = G(n, s.length, S);
-		return f`
-      <g class="lintje-chart__bar-group ${i.hoverIndex === n ? "is-hovered" : ""}"
-         ${h(B(n, s.length))}
-         @mousemove=${(e) => i.showTooltip(e, k(n))}
-         @mouseleave=${() => i.hideTooltip()}>
-        ${_.map((i, a) => {
-			let s = i.values[n], l = O(s, y, S), u = D(i, a), d = v.of(i.links?.[n], `${e} · ${i.label}`, `${e}, ${i.label}: ${o(s)}`);
-			return f`
-            <g>
-              <rect class="lintje-chart__bar lintje-chart__mark ${d.state}"
-                    x=${r.x + a * w} y=${l} width=${w - 2}
-                    height=${Math.max(0, C - l)} fill=${u}
-                    data-mark-id=${d.markId} role=${d.role} tabindex=${d.tabIndex}
-                    aria-pressed=${d.pressed} aria-label=${d.label}
-                    @click=${d.click} @keydown=${d.keydown} />
-              ${T ? f`<text x=${r.x + a * w + (w - 2) / 2} y=${l - 4}
-                            text-anchor="middle" class="lintje-chart__data-label">${c(s, w)}</text>` : t}
-            </g>
-          `;
-		})}
-      </g>
-    `;
-	});
-	return r`
-    <div class="lintje-chart-wrap ${d ? "lintje-chart--small" : ""}"
-         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e) || v.escape(e)}>
-      ${R({
-		items: E,
-		onToggle: (e) => i.toggleSeries(e)
-	})}
-      ${H({
-		fontFamily: i.fontFamily,
-		id: p,
-		ticks: b,
-		max: y,
-		area: S,
-		axisTitle: l,
-		description: a,
-		formatTick: x.format,
-		xLabels: s.map((e, t) => ({
-			label: e,
-			x: G(t, s.length, S).center
-		})),
-		interactive: v.interactive,
-		keys: A
-	}, M)}
-      ${V(i)}
-      ${Y(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/shared/tints.ts
-var fe = [
-	[1],
-	[1, 4],
-	[
-		1,
-		2,
-		4
-	],
-	[
-		1,
-		2,
-		3,
-		4
-	],
-	[
-		1,
-		2,
-		3,
-		4,
-		5
-	]
-];
-function pe(e, t) {
-	if (e < 1) return [];
-	let n = fe[Math.min(e, fe.length) - 1];
-	return s(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 me = /* @__PURE__ */ new Set([
-	"sky-blue",
-	"red",
-	"green",
-	"violet",
-	"dark-green",
-	"purple",
-	"ruby-red",
-	"dark-brown",
-	"brown",
-	"dark-blue",
-	"moss-green"
-]);
-function he(e, n) {
-	let { controller: i, description: a } = n, { labels: s, axisTitle: l, normalized: p = !1, totalOnTop: g = !0, small: _ = !1 } = e, v = i.id;
-	i.measure({
-		width: !0,
-		height: n.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!n.expanded && !n.mobile
-	});
-	let y = e.series.map((e) => ({
-		...e,
-		color: N(e.color)
-	})), b = X(n, y.flatMap((e) => e.links ?? [])), x = s.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = p ? {
-		max: 100,
-		ticks: [
-			0,
-			25,
-			50,
-			75,
-			100
-		]
-	} : j(Math.max(...x, 1)), w = K(C, i.width, { fontFamily: i.fontFamily }), T = U(n, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: k } = G(0, s.length, T), A = g && !p && x.every((e) => u(c(e, k), k - 4)), M = pe(y.length), P = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], F = (t) => {
-		let n = e.series[t].color;
-		return (n == null ? t === 0 : me.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-	}, I = (e) => ({
-		title: s[e],
-		rows: y.map((t, n) => ({
-			label: t.label,
-			value: p ? d(t.values[e] / x[e] * 100) : o(t.values[e]),
-			color: P(t, n)
-		}))
-	}), L = J(i, s.length, (e) => ({
-		x: G(e, s.length, T).center,
-		y: O(p ? S : x[e], S, T),
-		content: I(e)
-	})), z = y.map((e, t) => ({
-		label: e.label,
-		color: P(e, t),
-		shape: "square"
-	})), ee = s.map((e, n) => {
-		let r = G(n, s.length, T), a = 0, l = y.map((e, t) => {
-			let r = e.values[n], i = p ? r / x[n] * 100 : r, o = O(a, S, T);
-			a += i;
-			let s = O(a, S, T);
-			return {
-				row: e,
-				j: t,
-				value: i,
-				y1: s,
-				height: Math.max(0, o - s)
-			};
-		});
-		return f`
-      <g class="lintje-chart__bar-group ${i.hoverIndex === n ? "is-hovered" : ""}"
-         ${h(B(n, s.length))}
-         @mousemove=${(e) => i.showTooltip(e, I(n))}
-         @mouseleave=${() => i.hideTooltip()}>
-        <!-- The hit area under the whole column, so the tooltip also follows the empty
-             space above the stack. It lies *under* the segments: on top it swallowed
-             every click on a segment that drills. -->
-        <rect x=${r.x} y=${T.top} width=${r.width} height=${E - T.top} fill="transparent" />
-        <!-- The segments in one group, so the column lifts on hover as a whole. -->
-        <g class="lintje-chart__bar">
-          ${l.map((t) => {
-			let i = b.of(t.row.links?.[n], `${e} · ${t.row.label}`, `${e}, ${t.row.label}: ${o(t.row.values[n])}`);
-			return f`
-            <rect class="lintje-chart__mark lintje-chart__segment ${i.state}"
-                  x=${r.x} y=${t.y1} width=${r.width} height=${t.height}
-                  fill=${P(t.row, t.j)}
-                  data-mark-id=${i.markId} role=${i.role} tabindex=${i.tabIndex}
-                  aria-pressed=${i.pressed} aria-label=${i.label}
-                  @click=${i.click} @keydown=${i.keydown} />
-          `;
-		})}
-        </g>
-        <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. -->
-        ${p ? l.map((e) => e.height >= 16 && u(d(e.value), D - 4) ? f`<text x=${r.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
-                        class="lintje-chart__data-label ${F(e.j)}">${d(e.value)}</text>` : t) : t}
-        ${A ? f`<text x=${r.center} y=${O(x[n], S, T) - 5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${c(x[n], r.bandWidth)}</text>` : t}
-      </g>
-    `;
-	});
-	return r`
-    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
-         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e) || b.escape(e)}>
-      ${R({ items: z })}
-      ${H({
-		fontFamily: i.fontFamily,
-		id: v,
-		ticks: C,
-		max: S,
-		area: T,
-		axisTitle: l,
-		description: a,
-		formatTick: w.format,
-		xLabels: s.map((e, t) => ({
-			label: e,
-			x: G(t, s.length, T).center
-		})),
-		interactive: b.interactive,
-		keys: L
-	}, ee)}
-      ${V(i)}
-      ${Y(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/pie-chart/pie-chart.ts
-var ge = 5, _e = (e) => {
-	let t = e.label.toLowerCase();
-	return t.startsWith("overig") || t === "rest";
-}, ve = (e) => !e.remainder && !_e(e);
-function ye(e) {
-	let t = e.filter(ve).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && _e(e)), r = e.filter((e) => e.remainder);
-	if (t.length > ge) {
-		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 be(e, n) {
-	let { controller: i, description: a } = n, { donut: s = !1, centerValue: c, centerLabel: l, legendTable: u = !0, labelHeader: p = "Categorie" } = e, g = i.id, _ = ye(e.segments).map((e) => ({
-		...e,
-		color: N(e.color)
-	})), v = _.map((e) => e.href ? {
-		id: e.id ?? e.label,
-		href: e.href
-	} : null), y = X(n, v), b = (e) => {
-		let t = y.of(v[e], _[e].label, _[e].label).state;
-		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
-	}, x = !!n.expanded;
-	i.measure(x ? {
-		width: !0,
-		height: "--chart-h-main"
-	} : {});
-	let S = x ? Math.max(240, Math.min(560, i.height - 24)) : e.size ?? 200, C = _.reduce((e, t) => e + t.value, 0), w = S / 2, T = s ? w * .62 : 0, E = pe(_.filter(ve).length, e.color), D = -1, O = _.map((e) => (ve(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : _e(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, j = _.map((e, t) => {
-		let n = e.value / C, r = k, i = k + n * 360;
-		k = i;
-		let a = +(n > .5), o = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = o(r, w), [u, d] = o(i, w);
-		return {
-			segment: e,
-			i: t,
-			d: s ? (() => {
-				let [e, t] = o(i, T), [n, s] = o(r, T);
-				return `M ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${a} 0 ${n} ${s} Z`;
-			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} Z`,
-			color: O[t]
-		};
-	}), P = i.hoverSegment, F = P == null ? void 0 : j[P], I = (e) => {
-		i.hoverSegment = e, i.requestUpdate();
-	};
-	return r`
-    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${m(i.attach)}
-         ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e) || y.escape(e)}>
-      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${L(y.interactive)}
-           class="lintje-pie-chart__svg" aria-labelledby="${g}-desc" ${h(A(g))}>
-        <desc id="${g}-desc">${a}</desc>
-        <defs>${M(g)}</defs>
-        ${j.map(({ segment: e, i: t, d: n, color: r }) => {
-		let a = y.of(v[t], e.label, `${e.label}: ${o(e.value)} · ${d(e.value / C * 100)}`);
-		return f`
-          <path d=${n} fill=${r}
-                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${P === t ? "is-hovered" : ""} ${a.state}"
-                ${h({ "transform-origin": `${w}px ${w}px` })}
-                data-mark-id=${a.markId} role=${a.role} tabindex=${a.tabIndex}
-                aria-pressed=${a.pressed} aria-label=${a.label}
-                @click=${a.click} @keydown=${a.keydown}
-                @mousemove=${(n) => {
-			I(t), i.showTooltip(n, {
-				title: e.label,
-				rows: [{
-					label: "Aantal",
-					value: `${o(e.value)} · ${d(e.value / C * 100)}`,
-					color: r
-				}]
-			});
-		}}
-                @mouseleave=${() => {
-			i.hoverSegment = null, i.hideTooltip(), i.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). -->
-        ${F ? f`<path d=${F.d} fill=${F.color} class="lintje-pie-chart__lift lintje-chart__segment"
-                      ${h({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : t}
-        ${s && c ? f`
-          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${c}</text>
-          ${l ? f`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${l}</text>` : t}
-        ` : t}
-      </svg>
-
-      ${u ? r`
-        <table class="lintje-pie-chart__table">
-          <caption class="visually-hidden">Legenda: ${a}</caption>
-          <thead>
-            <tr>
-              <th scope="col" class="lintje-pie-chart__column-label">${p}</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>
-            ${_.map((e, t) => r`
-              <tr class="lintje-pie-chart__row ${P === 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" ${h({ background: O[t] })}></span>${e.label}
-                </th>
-                <td class="lintje-pie-chart__value">${o(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">${o(C)}</td>
-              <td class="lintje-pie-chart__total"></td>
-            </tr>
-          </tfoot>
-        </table>
-      ` : t}
-      ${V(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/dual-axis-chart/dual-axis-chart.ts
-function xe(e, n) {
-	let { controller: i, description: a } = n, { labels: s, threshold: c, thresholdLabel: l, small: u = !1, pendingHours: d = 0 } = e, p = {
-		...e.left,
-		color: N(e.left.color)
-	}, g = {
-		...e.right,
-		color: N(e.right.color)
-	}, _ = i.id;
-	i.measure({
-		width: !0,
-		height: n.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!n.expanded && !n.mobile
-	});
-	let v = p.color ?? "var(--color-chart-default)", y = g.color ?? "var(--color-chart-dark-yellow)", b = j(Math.max(...p.values.filter((e) => e != null), 1)), x = j(Math.max(...g.values.filter((e) => e != null), c ?? 0, 1)), S = K(b.ticks, i.width, { fontFamily: i.fontFamily }), C = K(x.ticks, i.width, { fontFamily: i.fontFamily }), w = U(n, {
-		left: S.width,
-		right: C.width
-	}), T = w.height - w.bottom, E = [
-		{
-			label: `${p.label} (linkeras)`,
-			color: v,
-			shape: "square"
-		},
-		{
-			label: `${g.label} (rechteras)`,
-			color: y,
-			shape: "line"
-		},
-		...c == null ? [] : [{
-			label: l ?? `Norm ${c}`,
-			color: "var(--color-chart-emphasis)",
-			shape: "dashed"
-		}]
-	], D = Math.max(1, Math.ceil(s.length / 8)), k = i.hoverIndex, A = P(y), M = [[]];
-	g.values.forEach((e, t) => {
-		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${G(t, s.length, w).center},${O(e, x.max, w)}`);
-	});
-	let F = (e, t) => e == null ? "geen gegevens" : `${o(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
-		title: s[e],
-		rows: [{
-			label: p.label,
-			value: F(p.values[e], p.unit),
-			color: v
-		}, {
-			label: g.label,
-			value: F(g.values[e], g.unit),
-			color: y
-		}]
-	}), z = J(i, s.length, (e) => ({
-		x: G(e, s.length, w).center,
-		y: Math.min(p.values[e] == null ? T : O(p.values[e], b.max, w), g.values[e] == null ? T : O(g.values[e], x.max, w)),
-		content: I(e)
-	}));
-	return r`
-    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
-         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
-         @keydown=${(e) => i.dismiss(e)}>
-      ${R({ items: E })}
-      <figure class="lintje-chart">
-        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${L(!1)}
-             aria-labelledby="${_}-desc" width=${w.width} height=${w.height}
-             tabindex="0" @keydown=${z.keydown} @focus=${z.focus} @blur=${z.blur}>
-          <desc id="${_}-desc">${a}</desc>
-          <defs>
-            <pattern id="hatch-${_}" 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 = G(s.length - d, s.length, w);
-		return f`<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-${_})" />`;
-	})() : t}
-
-          ${b.ticks.map((e) => {
-		let t = O(e, b.max, w), n = e === 0;
-		return f`
-              <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) => f`
-            <text x=${w.width - w.right + 8} y=${O(e, x.max, w) + 4}
-                  class="lintje-chart__axis-label" fill=${"var(--color-chart-dark-yellow-text)"}>${C.format(e)}</text>
-          `)}
-
-          <!-- 2 px axis lines in the color of their series -->
-          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${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. -->
-          ${p.values.map((e, t) => {
-		let n = G(t, s.length, w);
-		if (e == null) return f`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
-                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${_})" />`;
-		let r = O(e, b.max, w);
-		return f`
-              <g class="lintje-chart__bar-group ${k === t ? "is-hovered" : ""}"
-                 ${h(B(t, s.length))}>
-                <rect class="lintje-chart__bar" x=${n.x} y=${r} width=${n.width}
-                      height=${Math.max(0, T - r)} fill=${v} />
-              </g>
-            `;
-	})}
-
-          ${c == null ? t : f`<line x1=${w.left} x2=${w.width - w.right}
-                        y1=${O(c, x.max, w)} y2=${O(c, 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 n = e.join(" "), [r, i] = e[0].split(",");
-		return f`
-                  ${A && e.length > 1 ? f`<polyline class="lintje-chart__line lintje-chart__line--casing"
-                                    stroke=${A} points=${n} />` : t}
-                  ${e.length === 1 ? f`<circle cx=${r} cy=${i} r="2.5" fill=${y} />` : f`<polyline class="lintje-chart__line" stroke=${y} points=${n} />`}
-                `;
-	})}
-          </g>
-
-          ${s.filter((e, t) => t % D === 0).map((e, t) => f`
-            <text x=${G(t * D, s.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. -->
-          ${k != null && g.values[k] != null ? f`<circle class="lintje-chart__hover-point" r="4" fill=${y}
-                          cx=${G(k, s.length, w).center}
-                          cy=${O(g.values[k], x.max, w)} />` : t}
-          ${s.map((e, t) => {
-		let n = G(t, s.length, w);
-		return f`
-              <rect x=${n.x} y=${w.top} width=${n.bandWidth} height=${T - w.top}
-                    fill="transparent"
-                    @mousemove=${(e) => i.hoverAt(t, e, I(t))}
-                    @mouseleave=${() => i.hoverAt(null)} />
-            `;
-	})}
-        </svg>
-      </figure>
-      ${V(i)}
-      ${Y(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/heatmap-chart/heatmap-classes.ts
-var Q = [
-	"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)"
-], Se = Q.length, Ce = [
-	1,
-	2,
-	2.5,
-	5,
-	10
-];
-function we(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 Ce) {
-		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 Te(e, t) {
-	let n = Math.max(0, Math.min(10, -Math.floor(Math.log10(t)) + 1));
-	return Number(e.toFixed(n));
-}
-function Ee(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 = we((r - n) / Se, i), o = Math.floor(n / a) * a, s = [];
-	for (let e = 1; e < Se; e += 1) {
-		let t = Te(o + e * a, a);
-		if (t > r) break;
-		s.push(t);
-	}
-	return s;
-}
-function $(e, t, n = 0) {
-	let r = o(e, n), i = t?.trim() ?? "";
-	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
-}
-function De(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 Oe(e, t = {}) {
-	let n = (t.bounds?.length ? t.bounds.slice(0, Se - 1) : null) ?? Ee(e), r = De(n), i = (e) => $(e, t.unit, r), a = (e) => o(e, r);
-	if (n.length === 0) {
-		let e = Q.length - 1;
-		return [{
-			limit: Infinity,
-			color: Q[e],
-			label: "alle waarden",
-			ramp: e
-		}];
-	}
-	return [
-		{
-			limit: n[0],
-			color: Q[0],
-			label: `< ${i(n[0])}`,
-			ramp: 0
-		},
-		...n.slice(1).map((e, t) => ({
-			limit: e,
-			color: Q[t + 1],
-			label: `${a(n[t])}–${i(e)}`,
-			ramp: t + 1
-		})),
-		{
-			limit: Infinity,
-			color: Q[n.length],
-			label: `≥ ${i(n[n.length - 1])}`,
-			ramp: n.length
-		}
-	];
-}
-function ke(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 Ae(e, t, n) {
-	return Array.from({ length: n }, (n, r) => Array.from({ length: t }, (t, n) => e?.[n]?.[r]));
-}
-function je(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: Ae(e.values, t, n),
-		links: e.links ? Ae(e.links, t, n) : void 0
-	};
-}
-function Me(e, n) {
-	let { controller: i, description: a, mobile: s = !1 } = n, c = s ? je(e) : void 0, l = c?.columnLabels ?? e.columnLabels, u = c?.rowLabels ?? e.rowLabels, d = c?.values ?? e.values, f = c ? c.links : e.links, p = c ? !0 : e.compact ?? !1, { unit: g } = e, _ = X(n, (f ?? []).flat()), v = Oe(d, {
-		bounds: e.bounds,
-		unit: g
-	}), y = (e) => ke(v, e);
-	i.measure({});
-	let b = i.selectedCell, x = i.dimmedClass;
-	return r`
-    <div class="lintje-heatmap" ${m(i.attach)} ?data-in-view=${i.inView}
-         data-tooltip-anchor @keydown=${_.escape}>
-      <table class="lintje-heatmap__grid ${p ? "is-compact" : ""}">
-        <caption class="visually-hidden">${a}</caption>
-        <thead>
-          <tr>
-            <td></td>
-            ${l.map((e) => r`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
-          </tr>
-        </thead>
-        <tbody>
-          ${u.map((e, t) => r`
-            <tr>
-              <th scope="row" class="lintje-heatmap__row-label" title=${e}>
-                <span class="lintje-heatmap__row-label-text">${e}</span>
-              </th>
-              ${l.map((n, a) => {
-		let s = d[t]?.[a];
-		if (s == null) return r`
-                    <td class="lintje-heatmap__slot">
-                      <div class="lintje-heatmap__cell is-empty"
-                           title="${e} · ${l[a]}: geen meting">
-                        <span class="visually-hidden">geen meting</span>
-                      </div>
-                    </td>
-                  `;
-		let c = y(s), m = _.of(f?.[t]?.[a], `${e} · ${l[a]}`), S = !m.clickable && b?.row === t && b?.column === a;
-		return r`
-                  <td class="lintje-heatmap__slot">
-                    <button
-                      type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[c].ramp} ${S ? "is-selected" : ""} ${x != null && x !== c ? "is-dimmed" : ""} ${m.state}"
-                      data-mark-id=${m.markId}
-                      ${h({
-			"--lintje-cell": v[c].color,
-			...te(a, t, l.length, u.length)
-		})}
-                      @click=${m.clickable ? m.click : () => {
-			i.selectedCell = S ? null : {
-				row: t,
-				column: a
-			}, i.requestUpdate();
-		}}
-                      @mousemove=${p ? void 0 : (t) => i.showTooltip(t, {
-			title: `${e} · ${l[a]}`,
-			rows: [{
-				label: `klasse ${v[c].label}`,
-				value: $(s, g),
-				color: v[c].color
-			}]
-		})}
-                      @mouseleave=${p ? void 0 : () => i.hideTooltip()}
-                      aria-pressed=${m.clickable ? m.pressed : S}
-                      aria-label="${e} ${l[a]}: ${$(s, g)}, klasse ${v[c].label}"
-                    >${o(s)}</button>
-                  </td>
-                `;
-	})}
-            </tr>
-          `)}
-        </tbody>
-      </table>
-
-      <!-- Selected cell: a 48 px line with day, block, value, class. -->
-      ${b && d[b.row]?.[b.column] != null ? r`
-        <p class="lintje-heatmap__selection">
-          <b>${u[b.row]} ${l[b.column]}</b> ·
-          ${$(d[b.row][b.column], g)} · klasse
-          ${v[y(d[b.row][b.column])].label}
-        </p>
-      ` : t}
-
-      <!-- Class legend: clickable, dims the other classes to .25. -->
-      <ul class="lintje-heatmap__legend">
-        ${v.map((e, t) => r`
-          <li>
-            <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
-                    @click=${() => {
-		i.dimmedClass = x === t ? null : t, i.requestUpdate();
-	}}
-                    aria-pressed=${x === t}>
-              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${h({ background: e.color })}></span>
-              <span>${e.label}</span>
-            </button>
-          </li>
-        `)}
-      </ul>
-      ${V(i)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/shared/render-chart.ts
-function Ne(e, t) {
-	switch (e.kind) {
-		case "line": return ae(e, t);
-		case "bar": return ce(e, t);
-		case "horizontal-bar": return le(e, t);
-		case "target-progress": return ue(e, t);
-		case "grouped-bar": return de(e, t);
-		case "stacked-bar": return he(e, t);
-		case "pie": return be(e, t);
-		case "dual-axis": return xe(e, t);
-		case "heatmap": return Me(e, t);
-	}
-}
-//#endregion
-//#region src/components/charts/chart-tile/chart-tile.css?inline
-var Pe = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart-tile__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-tile__view { --h-control: var(--h-touch); width: 100%; }\n}\n", Fe = ".lintje-chart__svg, .lintje-pie-chart__svg", Ie = [{
-	value: "chart",
-	label: "Grafiek"
-}, {
-	value: "table",
-	label: "Tabel"
-}];
-function Le(e) {
-	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
-}
-function Re(e) {
-	switch (e.kind) {
-		case "line":
-		case "dual-axis": return "line";
-		case "pie": return e.donut ? "donut" : "pie";
-		case "heatmap": return "heatmap";
-		default: return "bar";
-	}
-}
-function ze(e) {
-	switch (e.kind) {
-		case "horizontal-bar":
-		case "target-progress": return e.rows.length ? `${Z(e.rows.length)}px` : void 0;
-		case "pie":
-		case "heatmap": return;
-		default: return e.small ? "var(--chart-h-small)" : void 0;
-	}
-}
-function Be(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 "heatmap": return [["", ...e.columnLabels], ...e.rowLabels.map((t, n) => [t, ...e.values[n] ?? []])];
-	}
-}
-function Ve(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 He(e, t) {
-	let [n = [], ...r] = Be(e), i = n.map((e, t) => {
-		let n = r.map((e) => e[t] ?? null);
-		return t === 0 ? {
-			key: `c${t}`,
-			header: String(e ?? ""),
-			format: "text",
-			sortable: !1
-		} : {
-			key: `c${t}`,
-			header: String(e ?? ""),
-			format: "decimal",
-			decimals: Ve(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 Ue = class extends b {
-	constructor(...e) {
-		super(...e), this.view = "chart", this.#e = new k(() => this.requestUpdate()), this.#t = null, this.#n = new i(this);
-	}
-	static {
-		this.styles = [
-			l,
-			n(_),
-			n(g),
-			n(a),
-			...x,
-			n(Pe)
-		];
-	}
-	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 ?? Le(this.data?.title);
-	}
-	csv() {
-		let e = this.data, t = this.downloadName;
-		e && t !== null && T(t, Be(e.chart));
-	}
-	png() {
-		let e = this.data;
-		if (!e) return;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(Fe);
-		t && S(this.downloadName ?? Le(e.title), t);
-	}
-	expandChanged(e) {
-		e ? this.#t ??= new k(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
-	}
-	render() {
-		let e = this.data;
-		if (!e) return t;
-		let n = this.ready, i = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, a = this.id ? `${this.id}-tile` : void 0, o = e.tableSwitch && n ? this.viewSwitch() : t, s = this.showsTable;
-		return r`<lintje-tile
-        id=${a ?? t}
-        span=${e.span ?? t}
-        heading=${e.title ?? t}
-        icon=${e.icon ?? t}
-        subtitle=${i ?? t}
-        intro=${e.intro ?? t}
-        footnote=${e.footnote ?? t}
-        ?legend-below=${!!e.legendBelow}
-        ?expandable=${this.expandable && n}
-        ?download=${this.downloadName !== null && n}
-        @lintje-tile-expand=${(e) => {
-			e.stopPropagation(), this.expand(!0);
-		}}
-        @lintje-tile-download=${(e) => {
-			e.stopPropagation(), this.csv();
-		}}
-      >
-        ${o}
-        ${e.notice ? r`<lintje-announcement
-              slot="notice"
-              compact
-              .data=${e.notice}
-            ></lintje-announcement>` : t}
-        ${this.content()}
-      </lintje-tile>
-
-      ${this.renderExpandModal(this.expanded ? s ? this.table() : this.#t ? Ne(e.chart, {
-			...this.chartOptions(this.#t),
-			expanded: !0
-		}) : t : t, {
-			heading: e.title,
-			subtitle: i,
-			footnote: e.footnote,
-			csv: () => this.csv(),
-			png: s ? void 0 : () => this.png()
-		})}`;
-	}
-	content() {
-		let e = this.data, t = ze(e.chart);
-		switch (e.state ?? "ready") {
-			case "loading": return y({
-				kind: Re(e.chart),
-				height: t
-			});
-			case "empty": return C(e.message, t);
-			case "error": return w({
-				message: e.message,
-				lastKnown: e.lastKnown,
-				height: t,
-				announcement: v
-			});
-			default: return this.showsTable ? this.table() : Ne(e.chart, this.chartOptions(this.#e));
-		}
-	}
-	viewSwitch() {
-		let e = this.#n.matches;
-		return r`<lintje-segmented
-      class="lintje-chart-tile__view"
-      slot=${e ? "notice" : "actions"}
-      label="Weergave"
-      hide-label
-      ?stacked=${e}
-      .value=${this.view}
-      .options=${Ie}
-      @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 r`<lintje-data-table
-      class="lintje-chart-tile__table"
-      bare
-      .data=${He(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(`${Fe}, .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);
-			}
-		};
-	}
-};
-e("lintje-chart-tile", Ue);
-//#endregion
-export { Ue as LintjeChartTile };