lintje 0.1.1

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

@@ -0,0 +1,1474 @@
+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 };