lintje 0.6.0 → 0.7.0

package/dist-elements/tag/chart.js

@@ -1,345 +1,345 @@
-import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as l,d as u,f as d,g as f,in as p,l as m,m as h,nn as g,o as _,p as v,r as y,v as b,y as x}from"../chunks/base-DuuwEY22.js";import{t as S}from"./announcement.js";import"./segmented.js";import{i as C,n as w,t as T}from"../chunks/download-D1wbtARJ.js";import{A as E,C as D,D as O,E as k,O as A,S as j,T as M,_ as N,a as P,c as F,d as I,f as L,h as R,i as z,k as B,l as V,m as H,n as U,o as W,r as G,s as K,t as q,u as J,v as Y,w as ee,y as te}from"../chunks/stagger-nGiD5JgJ.js";import{n as X,r as ne}from"../chunks/chart-styles-zJy-DGvZ.js";import"./data-table.js";var Z=/* @__PURE__ */ new Set([`ArrowRight`,`ArrowDown`]),Q=/* @__PURE__ */ new Set([`ArrowLeft`,`ArrowUp`]);function re(e){return[`${e.title}: ${e.rows.map(e=>`${e.label} ${e.value}`.trim()).join(`, `)}`,...(e.events??[]).map(e=>`Gebeurtenis ${e.number}: ${e.label}`)].join(`. `)}function ie(e){try{return e.matches(`:focus-visible`)}catch{return!0}}function ae(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.keyFrom=null,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??e.keyFrom,a=i==null?-1:Math.min(i,t-1),o;if(Z.has(n.key))o=Math.min(t-1,a+1);else if(Q.has(n.key))o=Math.max(0,a-1);else if(n.key===`Home`)o=0;else if(n.key===`End`)o=t-1;else return;n.preventDefault(),r(n.currentTarget,o)},focus(n){let i=n.currentTarget;n.target===i&&t!==0&&ie(i)&&r(i,Math.min(e.hoverIndex??0,t-1))},blur(){e.keyFrom=null,(e.hoverIndex!=null||e.status)&&(e.hoverIndex=null,e.status=``,e.hideTooltip(),e.requestUpdate())}}}function oe(e){return p`<p class="visually-hidden" role="status">${e.status}</p>`}var se=2.5;function $(e,t){let n=[],r=[];return e.forEach((e,i)=>{e==null?(r.length&&n.push(r),r=[]):r.push(t(e,i))}),r.length&&n.push(r),n}var ce=18,le=4,ue=8;function de(e){let t=[];return e.map(e=>{let n=t.findIndex(t=>t.every(t=>Math.abs(t-e)>=22));return n===-1&&(n=t.push([])-1),t[n].push(e),n})}function fe(e,t){let{controller:n,description:r}=t,{labels:i,axisTitle:a,unit:s,asOfIndex:c,asOfLabel:u,pendingHours:f=0,fixedMax:m,small:v=!1}=e,y=(e.events??[]).filter(e=>Number.isInteger(e.index)&&e.index>=0&&e.index<i.length).sort((e,t)=>e.index-t.index).map((e,t)=>({...e,number:t+1})),b=n.id;n.measure({width:!0,height:t.height??(v?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let x=e.series.filter(e=>!e.comparison).length>1,S=0,C=e.series.map(e=>({...e,color:H(e.color),symbol:x&&!e.comparison?Y(e.color)?e.color:N[S++%N.length]:void 0})),w=C.filter(e=>!n.hiddenSeries.includes(e.label)),T=C.flatMap(e=>e.values).filter(e=>e!=null),{max:k,ticks:A}=M(m??Math.max(...T,1)),j=ee(A,n.width,{fontFamily:n.fontFamily,minimum:Math.ceil(h(i[0]??``,n.fontFamily)/2)}),P=D(t,{left:j.width}),L=y.map(e=>Math.min(P.width-ce/2,Math.max(ce/2,B(e.index,i.length,P)))),z=de(L),U=z.length?Math.max(...z)+1:0,W=D(t,{left:j.width,...U?{top:U*22+ue}:{}}),K=e=>le+z[e]*22,q=f>6,J=c??i.length-1,X=e=>e.comparison?`var(--color-chart-secondary)`:e.color??`var(--color-chart-default)`,ne=C.map(e=>({label:e.label,color:X(e),shape:e.comparison?`dashed`:`line`,symbol:e.symbol,hidden:n.hiddenSeries.includes(e.label),fixed:C.length<2})),Z=Math.max(1,Math.ceil(i.length/8)),Q=i.map((e,t)=>({label:e,x:B(t,i.length,W),i:t})).filter(e=>e.i%Z===0);function re(e){let t=y.filter(t=>t.index===e);return{title:i[e],rows:w.map(t=>({label:t.label,value:t.values[e]==null?`geen gegevens`:d(t.values[e]),color:X(t)})),...t.length?{events:t}:{}}}let ie=ae(n,i.length,e=>{let t=w.map(t=>t.values[e]).filter(e=>e!=null);return{x:B(e,i.length,W),y:t.length?E(Math.max(...t),k,W):W.top,content:re(e)}}),fe=[f>0?(()=>{let e=B(J,i.length,W),t=q?O(W)/(i.length-1):W.width-W.right-e;return l`<rect x=${e} y=${W.top} width=${Math.max(0,t)}
+import{Et as e,F as t,H as n,I as r,O as i,Qt as a,_ as o,cn as s,d as c,f as l,g as u,l as d,ln as f,m as p,o as m,on as h,p as g,r as _,rn as v,tn as y,v as b,y as x}from"../chunks/base-BsZyWDre.js";import{t as S}from"./announcement.js";import"./segmented.js";import{i as C,n as w,t as T}from"../chunks/download-CxEzwMxI.js";import{A as E,C as D,D as O,E as k,O as A,S as j,T as M,_ as N,a as P,c as F,d as I,f as L,h as R,i as z,k as B,l as V,m as H,n as U,o as W,r as G,s as K,t as q,u as J,v as Y,w as ee,y as te}from"../chunks/stagger-CwsMNTLl.js";import{n as X,r as ne}from"../chunks/chart-styles-C5IzbVUF.js";import"./data-table.js";var Z=/* @__PURE__ */ new Set([`ArrowRight`,`ArrowDown`]),Q=/* @__PURE__ */ new Set([`ArrowLeft`,`ArrowUp`]);function re(e){return[`${e.title}: ${e.rows.map(e=>`${e.label} ${e.value}`.trim()).join(`, `)}`,...(e.events??[]).map(e=>`Gebeurtenis ${e.number}: ${e.label}`)].join(`. `)}function ie(e){try{return e.matches(`:focus-visible`)}catch{return!0}}function ae(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.keyFrom=null,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??e.keyFrom,a=i==null?-1:Math.min(i,t-1),o;if(Z.has(n.key))o=Math.min(t-1,a+1);else if(Q.has(n.key))o=Math.max(0,a-1);else if(n.key===`Home`)o=0;else if(n.key===`End`)o=t-1;else return;n.preventDefault(),r(n.currentTarget,o)},focus(n){let i=n.currentTarget;n.target===i&&t!==0&&ie(i)&&r(i,Math.min(e.hoverIndex??0,t-1))},blur(){e.keyFrom=null,(e.hoverIndex!=null||e.status)&&(e.hoverIndex=null,e.status=``,e.hideTooltip(),e.requestUpdate())}}}function oe(e){return s`<p class="visually-hidden" role="status">${e.status}</p>`}var se=2.5;function $(e,t){let n=[],r=[];return e.forEach((e,i)=>{e==null?(r.length&&n.push(r),r=[]):r.push(t(e,i))}),r.length&&n.push(r),n}var ce=18,le=4,ue=8;function de(e){let t=[];return e.map(e=>{let n=t.findIndex(t=>t.every(t=>Math.abs(t-e)>=22));return n===-1&&(n=t.push([])-1),t[n].push(e),n})}function fe(t,n){let{controller:r,description:i}=n,{labels:a,axisTitle:o,unit:c,asOfIndex:u,asOfLabel:d,pendingHours:g=0,fixedMax:_,small:v=!1}=t,y=(t.events??[]).filter(e=>Number.isInteger(e.index)&&e.index>=0&&e.index<a.length).sort((e,t)=>e.index-t.index).map((e,t)=>({...e,number:t+1})),b=r.id;r.measure({width:!0,height:n.height??(v?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let x=t.series.filter(e=>!e.comparison).length>1,S=0,C=t.series.map(e=>({...e,color:H(e.color),symbol:x&&!e.comparison?Y(e.color)?e.color:N[S++%N.length]:void 0})),w=C.filter(e=>!r.hiddenSeries.includes(e.label)),T=C.flatMap(e=>e.values).filter(e=>e!=null),{max:k,ticks:A}=M(_??Math.max(...T,1)),j=ee(A,r.width,{fontFamily:r.fontFamily,minimum:Math.ceil(p(a[0]??``,r.fontFamily)/2)}),P=D(n,{left:j.width}),L=y.map(e=>Math.min(P.width-ce/2,Math.max(ce/2,B(e.index,a.length,P)))),z=de(L),U=z.length?Math.max(...z)+1:0,W=D(n,{left:j.width,...U?{top:U*22+ue}:{}}),K=e=>le+z[e]*22,q=g>6,J=u??a.length-1,X=e=>e.comparison?`var(--color-chart-secondary)`:e.color??`var(--color-chart-default)`,ne=C.map(e=>({label:e.label,color:X(e),shape:e.comparison?`dashed`:`line`,symbol:e.symbol,hidden:r.hiddenSeries.includes(e.label),fixed:C.length<2})),Z=Math.max(1,Math.ceil(a.length/8)),Q=a.map((e,t)=>({label:e,x:B(t,a.length,W),i:t})).filter(e=>e.i%Z===0);function re(e){let t=y.filter(t=>t.index===e);return{title:a[e],rows:w.map(t=>({label:t.label,value:t.values[e]==null?`geen gegevens`:l(t.values[e]),color:X(t)})),...t.length?{events:t}:{}}}let ie=ae(r,a.length,e=>{let t=w.map(t=>t.values[e]).filter(e=>e!=null);return{x:B(e,a.length,W),y:t.length?E(Math.max(...t),k,W):W.top,content:re(e)}}),fe=[g>0?(()=>{let e=B(J,a.length,W),t=q?O(W)/(a.length-1):W.width-W.right-e;return f`<rect x=${e} y=${W.top} width=${Math.max(0,t)}
                            height=${W.height-W.top-W.bottom}
-                           fill="url(#hatch-${b})" />`})():g,y.length?l`<g>
-          ${y.map((e,t)=>{let n=B(e.index,i.length,W);return l`<line class="lintje-chart__event-line" x1=${n} x2=${n}
+                           fill="url(#hatch-${b})" />`})():h,y.length?f`<g>
+          ${y.map((e,t)=>{let n=B(e.index,a.length,W);return f`<line class="lintje-chart__event-line" x1=${n} x2=${n}
                              y1=${K(t)+ce} y2=${W.height-W.bottom} />`})}
-          ${y.map((e,t)=>l`
+          ${y.map((e,t)=>f`
               <rect class="lintje-chart__event-chip" x=${L[t]-ce/2} y=${K(t)}
                     width=${ce} height=${ce} />
               <text class="lintje-chart__event-number" x=${L[t]} y=${K(t)+ce/2}
                     text-anchor="middle" dominant-baseline="central">${e.number}</text>
             `)}
-        </g>`:g,l`<g class="lintje-chart__reveal">
-      ${C.map(e=>{let t=X(e),n=e.comparison?void 0:R(t),r=$(q?e.values.slice(0,J+1):e.values,(e,t)=>({x:B(t,i.length,W),y:E(e,k,W)}));if(r.length===0)return g;let a=r[r.length-1],o=a[a.length-1],s=W.height-W.bottom,c=!w.includes(e);return l`
+        </g>`:h,f`<g class="lintje-chart__reveal">
+      ${C.map(e=>{let t=X(e),n=e.comparison?void 0:R(t),r=$(q?e.values.slice(0,J+1):e.values,(e,t)=>({x:B(t,a.length,W),y:E(e,k,W)}));if(r.length===0)return h;let i=r[r.length-1],o=i[i.length-1],s=W.height-W.bottom,c=!w.includes(e);return f`
           <g class="lintje-chart__series ${c?`is-off`:``}">
-            ${r.map(r=>{let i=r.map(e=>`${e.x},${e.y}`).join(` `);return l`
-                ${e.area&&!e.comparison?l`<polygon fill=${t} fill-opacity=".14"
-                                 points=${`${r[0].x},${s} ${i} ${r[r.length-1].x},${s}`} />`:g}
-                ${n&&r.length>1?l`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />`:g}
-                ${r.length===1?l`<circle cx=${r[0].x} cy=${r[0].y} r=${se} fill=${t} />`:l`<polyline
+            ${r.map(r=>{let i=r.map(e=>`${e.x},${e.y}`).join(` `);return f`
+                ${e.area&&!e.comparison?f`<polygon fill=${t} fill-opacity=".14"
+                                 points=${`${r[0].x},${s} ${i} ${r[r.length-1].x},${s}`} />`:h}
+                ${n&&r.length>1?f`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />`:h}
+                ${r.length===1?f`<circle cx=${r[0].x} cy=${r[0].y} r=${se} fill=${t} />`:f`<polyline
                         class="lintje-chart__line"
                         points=${i}
                         stroke=${t}
-                        stroke-dasharray=${e.comparison?`5 4`:g}
+                        stroke-dasharray=${e.comparison?`5 4`:h}
                         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?l`<path class="lintje-chart__line-end" d=${te(e.symbol,4.5,o.x,o.y)} fill=${t} />`:q&&!e.comparison?l`<circle cx=${o.x} cy=${o.y} r="4" fill=${t} />`:g}
+            ${e.symbol?f`<path class="lintje-chart__line-end" d=${te(e.symbol,4.5,o.x,o.y)} fill=${t} />`:q&&!e.comparison?f`<circle cx=${o.x} cy=${o.y} r="4" fill=${t} />`:h}
           </g>
         `})}
-    </g>`,q&&u?F({area:W,index:J,count:i.length,label:`peilmoment ${u}`,pendingHours:f,lastValue:(()=>{let e=w.find(e=>!e.comparison)?.values[J];return e==null?void 0:`${d(e)}${s?` ${s}`:``}`})()}):g,n.hoverIndex==null?g:w.map(e=>{let t=n.hoverIndex,r=e.values[t];return r==null||q&&t>J?g:l`<circle class="lintje-chart__hover-point" r="4" fill=${X(e)}
-                             cx=${B(t,i.length,W)}
-                             cy=${E(r,k,W)} />`}),i.map((e,t)=>{let r=B(t,i.length,W),a=O(W)/Math.max(1,i.length-1);return l`
-        <rect x=${r-a/2} y=${W.top} width=${a}
+    </g>`,q&&d?F({area:W,index:J,count:a.length,label:`peilmoment ${d}`,pendingHours:g,lastValue:(()=>{let e=w.find(e=>!e.comparison)?.values[J];return e==null?void 0:`${l(e)}${c?` ${c}`:``}`})()}):h,r.hoverIndex==null?h:w.map(e=>{let t=r.hoverIndex,n=e.values[t];return n==null||q&&t>J?h:f`<circle class="lintje-chart__hover-point" r="4" fill=${X(e)}
+                             cx=${B(t,a.length,W)}
+                             cy=${E(n,k,W)} />`}),a.map((e,t)=>{let n=B(t,a.length,W),i=O(W)/Math.max(1,a.length-1);return f`
+        <rect x=${n-i/2} y=${W.top} width=${i}
               height=${W.height-W.top-W.bottom}
               fill="transparent"
-              @mousemove=${e=>n.hoverAt(t,e,re(t))}
-              @mouseleave=${()=>n.hoverAt(null)} />
-      `})];return p`
+              @mousemove=${e=>r.hoverAt(t,e,re(t))}
+              @mouseleave=${()=>r.hoverAt(null)} />
+      `})];return s`
     <div class="lintje-chart-wrap ${v?`lintje-chart--small`:``}"
-         ${o({"--lintje-event-size":`${ce}px`})}
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)}>
-      ${I({items:ne,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:b,ticks:A,max:k,area:W,formatTick:j.format,axisTitle:a??s,xLabels:Q,description:y.length?`${r} ${y.map(e=>`Gebeurtenis ${e.number}, ${i[e.index]}: ${e.label}.`).join(` `)}`:r,keys:ie},fe)}
-      ${y.length?p`<ol class="lintje-chart-events" aria-label="Gebeurtenissen">
-              ${y.map(e=>p`<li class="lintje-chart-events__item">
+         ${e({"--lintje-event-size":`${ce}px`})}
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)}>
+      ${I({items:ne,onToggle:e=>r.toggleSeries(e)})}
+      ${V({fontFamily:r.fontFamily,id:b,ticks:A,max:k,area:W,formatTick:j.format,axisTitle:o??c,xLabels:Q,description:y.length?`${i} ${y.map(e=>`Gebeurtenis ${e.number}, ${a[e.index]}: ${e.label}.`).join(` `)}`:i,keys:ie},fe)}
+      ${y.length?s`<ol class="lintje-chart-events" aria-label="Gebeurtenissen">
+              ${y.map(e=>s`<li class="lintje-chart-events__item">
                   <span class="lintje-event-chip"><span class="lintje-event-chip__number">${e.number}</span></span>
-                  <span><span class="lintje-chart-events__category">${i[e.index]}</span> ·
+                  <span><span class="lintje-chart-events__category">${a[e.index]}</span> ·
                     ${e.label}</span>
                 </li>`)}
-            </ol>`:g}
-      ${G(n)}
-      ${oe(n)}
+            </ol>`:h}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}var pe={clickable:!1,state:``,markId:g,role:g,tabIndex:g,pressed:g,label:g,click:g,keydown:g};function me(e,t){let r=/* @__PURE__ */ new Set;for(let e of t)e?.href&&r.add(e.id);let i=e.selectedId!=null&&r.has(e.selectedId)?e.selectedId:null,a=()=>{i!=null&&e.onClear?.(i)},o=(t,n)=>{if(t.id===i)return a();e.onSelect?.({id:t.id,label:n,href:t.href})};return{active:i,interactive:!!e.onSelect&&r.size>0,of(t,r,a){if(!t?.href||!e.onSelect)return i==null?pe:{...pe,state:`is-muted`};let s=t.id===i;return{clickable:!0,state:`is-clickable ${s?`is-selected`:i==null?``:`is-muted`}`,markId:t.id,role:`button`,tabIndex:0,pressed:s?`true`:`false`,label:a??r,click:i=>{n(i)?(i.preventDefault(),e.onSelect?.({id:t.id,label:r,href:t.href},!0)):i.type===`click`&&o(t,r)},keydown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),o(t,r))}}},escape(e){e.key===`Escape`&&i!=null&&(e.stopPropagation(),a())}}}function he(e,t){let{controller:n,description:r}=t,{labels:i,values:a,axisTitle:s,trend:c,dataLabels:f=!0,small:h=!1,links:v}=e,y=H(e.color)??`var(--color-chart-default)`,b=n.id,x=me(t,v??[]);n.measure({width:!0,height:t.height??(h?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let S=a.filter(e=>e!=null),{max:C,ticks:w}=M(Math.max(...S,1)),T=ee(w,n.width,{fontFamily:n.fontFamily}),O=D(t,{left:T.width}),A=O.height-O.bottom,{width:j,bandWidth:N}=k(0,i.length,O),P=f&&a.every(e=>e==null||m(u(e,j),N-4)),F=e=>({title:i[e],rows:[{label:s??`Waarde`,value:a[e]==null?`geen gegevens`:d(a[e]),color:y}]}),I=ae(n,i.length,e=>({x:k(e,i.length,O).center,y:a[e]==null?O.top:E(a[e],C,O),content:F(e)})),L=$(c??[],(e,t)=>({x:k(t,i.length,O).center,y:E(e,C,O)})),R=[a.map((e,t)=>{let r=k(t,i.length,O);if(e==null)return l`<rect class="lintje-chart__missing" x=${r.x} y=${O.top} width=${r.width}
+  `}var pe={clickable:!1,state:``,markId:h,role:h,tabIndex:h,pressed:h,label:h,click:h,keydown:h};function me(e,t){let r=/* @__PURE__ */ new Set;for(let e of t)e?.href&&r.add(e.id);let i=e.selectedId!=null&&r.has(e.selectedId)?e.selectedId:null,a=()=>{i!=null&&e.onClear?.(i)},o=(t,n)=>{if(t.id===i)return a();e.onSelect?.({id:t.id,label:n,href:t.href})};return{active:i,interactive:!!e.onSelect&&r.size>0,of(t,r,a){if(!t?.href||!e.onSelect)return i==null?pe:{...pe,state:`is-muted`};let s=t.id===i;return{clickable:!0,state:`is-clickable ${s?`is-selected`:i==null?``:`is-muted`}`,markId:t.id,role:`button`,tabIndex:0,pressed:s?`true`:`false`,label:a??r,click:i=>{n(i)?(i.preventDefault(),e.onSelect?.({id:t.id,label:r,href:t.href},!0)):i.type===`click`&&o(t,r)},keydown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),o(t,r))}}},escape(e){e.key===`Escape`&&i!=null&&(e.stopPropagation(),a())}}}function he(t,n){let{controller:r,description:i}=n,{labels:a,values:o,axisTitle:u,trend:p,dataLabels:g=!0,small:_=!1,links:v}=t,y=H(t.color)??`var(--color-chart-default)`,b=r.id,x=me(n,v??[]);r.measure({width:!0,height:n.height??(_?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let S=o.filter(e=>e!=null),{max:C,ticks:w}=M(Math.max(...S,1)),T=ee(w,r.width,{fontFamily:r.fontFamily}),O=D(n,{left:T.width}),A=O.height-O.bottom,{width:j,bandWidth:N}=k(0,a.length,O),P=g&&o.every(e=>e==null||d(c(e,j),N-4)),F=e=>({title:a[e],rows:[{label:u??`Waarde`,value:o[e]==null?`geen gegevens`:l(o[e]),color:y}]}),I=ae(r,a.length,e=>({x:k(e,a.length,O).center,y:o[e]==null?O.top:E(o[e],C,O),content:F(e)})),L=$(p??[],(e,t)=>({x:k(t,a.length,O).center,y:E(e,C,O)})),R=[o.map((t,n)=>{let i=k(n,a.length,O);if(t==null)return f`<rect class="lintje-chart__missing" x=${i.x} y=${O.top} width=${i.width}
                          height=${Math.max(0,A-O.top)} fill="url(#hatch-${b})"
-                         @mousemove=${e=>n.showTooltip(e,F(t))}
-                         @mouseleave=${()=>n.hideTooltip()} />`;let a=E(e,C,O),s=x.of(v?.[t],i[t],`${i[t]}: ${d(e)}`);return l`
-        <g class="lintje-chart__bar-group ${n.hoverIndex===t?`is-hovered`:``}"
-           ${o(U(t,i.length))}
-           @mousemove=${e=>n.showTooltip(e,F(t))}
-           @mouseleave=${()=>n.hideTooltip()}>
+                         @mousemove=${e=>r.showTooltip(e,F(n))}
+                         @mouseleave=${()=>r.hideTooltip()} />`;let o=E(t,C,O),s=x.of(v?.[n],a[n],`${a[n]}: ${l(t)}`);return f`
+        <g class="lintje-chart__bar-group ${r.hoverIndex===n?`is-hovered`:``}"
+           ${e(U(n,a.length))}
+           @mousemove=${e=>r.showTooltip(e,F(n))}
+           @mouseleave=${()=>r.hideTooltip()}>
           <rect class="lintje-chart__bar lintje-chart__mark ${s.state}"
-                x=${r.x} y=${a} width=${r.width} height=${Math.max(0,A-a)} fill=${y}
+                x=${i.x} y=${o} width=${i.width} height=${Math.max(0,A-o)} fill=${y}
                 data-mark-id=${s.markId} role=${s.role} tabindex=${s.tabIndex}
                 aria-pressed=${s.pressed} aria-label=${s.label}
                 @click=${s.click} @auxclick=${s.click} @keydown=${s.keydown} />
-          ${P?l`<text x=${r.center} y=${a-5} text-anchor="middle" class="lintje-chart__data-label">
-                    ${u(e,r.width)}
-                  </text>`:g}
+          ${P?f`<text x=${i.center} y=${o-5} text-anchor="middle" class="lintje-chart__data-label">
+                    ${c(t,i.width)}
+                  </text>`:h}
         </g>
-      `}),L.length?l`<g class="lintje-chart__trend">
-          ${L.map(e=>e.length===1?l`<circle cx=${e[0].x} cy=${e[0].y} r=${se}
-                            fill="var(--color-chart-emphasis)" />`:l`<polyline fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5"
+      `}),L.length?f`<g class="lintje-chart__trend">
+          ${L.map(e=>e.length===1?f`<circle cx=${e[0].x} cy=${e[0].y} r=${se}
+                            fill="var(--color-chart-emphasis)" />`:f`<polyline fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5"
                               stroke-dasharray="5 4"
                               points=${e.map(e=>`${e.x},${e.y}`).join(` `)} />`)}
-        </g>`:g];return p`
-    <div class="lintje-chart-wrap ${h?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)||x.escape(e)}>
-      ${V({fontFamily:n.fontFamily,id:b,ticks:w,max:C,area:O,axisTitle:s,description:r,formatTick:T.format,xLabels:i.map((e,t)=>({label:e,x:k(t,i.length,O).center})),interactive:x.interactive,keys:I},R)}
-      ${G(n)}
-      ${oe(n)}
+        </g>`:h];return s`
+    <div class="lintje-chart-wrap ${_?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)||x.escape(e)}>
+      ${V({fontFamily:r.fontFamily,id:b,ticks:w,max:C,area:O,axisTitle:u,description:i,formatTick:T.format,xLabels:a.map((e,t)=>({label:e,x:k(t,a.length,O).center})),interactive:x.interactive,keys:I},R)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}function ge(e){return e*26+24}function _e(e,t){let{controller:n,description:r}=t,{rows:i,threshold:a,thresholdLabel:s,unit:c}=e,u=H(e.color)??`var(--color-chart-dark-yellow)`,f=H(e.aboveThresholdColor)??`var(--color-chart-red)`,m=n.id,h=i.map(e=>e.href?{id:e.id??e.label,href:e.href}:null),v=me(t,h),y=ge(i.length);n.measure({width:!0,height:y});let b=n.width,x=A(i.map(e=>e.label),b,{fontFamily:n.fontFamily}),{labelEnd:S,barStart:C}=x,w=Math.max(...i.map(e=>e.value),a??0)*1.15,T=e=>Math.max(40,b-C-60)*e/w,E=e=>`${d(e)}${c?` ${c}`:``}`,D=e=>{let t=i[e],n=a!=null&&t.value>a;return{title:t.label,rows:[{label:`Waarde`,value:E(t.value),color:n?f:u},...a==null?[]:[{label:`Norm`,value:E(a),color:`var(--color-chart-emphasis)`}]]}},O=ae(n,i.length,e=>({x:C+T(i[e].value),y:e*26+4,content:D(e)}));return p`
-    <figure class="lintje-chart lintje-chart--rows" ${_(n.attach)} ?data-in-view=${n.inView}
+  `}function ge(e){return e*26+24}function _e(t,n){let{controller:r,description:i}=n,{rows:a,threshold:o,thresholdLabel:c,unit:u}=t,d=H(t.color)??`var(--color-chart-dark-yellow)`,p=H(t.aboveThresholdColor)??`var(--color-chart-red)`,g=r.id,_=a.map(e=>e.href?{id:e.id??e.label,href:e.href}:null),v=me(n,_),y=ge(a.length);r.measure({width:!0,height:y});let b=r.width,x=A(a.map(e=>e.label),b,{fontFamily:r.fontFamily}),{labelEnd:S,barStart:C}=x,w=Math.max(...a.map(e=>e.value),o??0)*1.15,T=e=>Math.max(40,b-C-60)*e/w,E=e=>`${l(e)}${u?` ${u}`:``}`,D=e=>{let t=a[e],n=o!=null&&t.value>o;return{title:t.label,rows:[{label:`Waarde`,value:E(t.value),color:n?p:d},...o==null?[]:[{label:`Norm`,value:E(o),color:`var(--color-chart-emphasis)`}]]}},O=ae(r,a.length,e=>({x:C+T(a[e].value),y:e*26+4,content:D(e)}));return s`
+    <figure class="lintje-chart lintje-chart--rows" ${m(r.attach)} ?data-in-view=${r.inView}
             data-tooltip-anchor
-            @keydown=${e=>n.dismiss(e)||v.escape(e)}>
+            @keydown=${e=>r.dismiss(e)||v.escape(e)}>
       <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${W(v.interactive)}
-           aria-labelledby="${m}-desc" width=${b} height=${y}
-           ${o({height:`${y}px`,...K(m)})}
+           aria-labelledby="${g}-desc" width=${b} height=${y}
+           ${e({height:`${y}px`,...K(g)})}
            tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
-        <desc id="${m}-desc">${r}</desc>
-        <defs>${J(m)}</defs>
-        ${a==null?g:l`
-          <line x1=${C+T(a)} x2=${C+T(a)} y1=${4} y2=${i.length*26+2}
+        <desc id="${g}-desc">${i}</desc>
+        <defs>${J(g)}</defs>
+        ${o==null?h:f`
+          <line x1=${C+T(o)} x2=${C+T(o)} y1=${4} y2=${a.length*26+2}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${C+T(a)+6} y=${i.length*26+16} class="lintje-chart__axis-label">
-            ${s??`norm ${d(a)}`}
+          <text x=${C+T(o)+6} y=${a.length*26+16} class="lintje-chart__axis-label">
+            ${c??`norm ${l(o)}`}
           </text>
         `}
-        ${i.map((e,t)=>{let r=t*26+4,s=a!=null&&e.value>a,p=T(e.value),m=v.of(h[t],e.label,`${e.label}: ${d(e.value)}${c?` ${c}`:``}`);return l`
-            <g class="lintje-chart__bar-row ${n.hoverIndex===t?`is-hovered`:``}"
-               @mousemove=${e=>n.showTooltip(e,D(t))}
-               @mouseleave=${()=>n.hideTooltip()}>
+        ${a.map((t,n)=>{let i=n*26+4,s=o!=null&&t.value>o,c=T(t.value),m=v.of(_[n],t.label,`${t.label}: ${l(t.value)}${u?` ${u}`:``}`);return f`
+            <g class="lintje-chart__bar-row ${r.hoverIndex===n?`is-hovered`:``}"
+               @mousemove=${e=>r.showTooltip(e,D(n))}
+               @mouseleave=${()=>r.hideTooltip()}>
               <!-- Hit area across the whole row, so the tooltip doesn't flicker between bars. -->
-              <rect x=${0} y=${r-5} width=${b} height=${26} fill="transparent" />
-              <text x=${S} y=${r+16-3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
+              <rect x=${0} y=${i-5} width=${b} height=${26} fill="transparent" />
+              <text x=${S} y=${i+16-3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(t.label)}</text>
               <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${m.state}"
-                    ${o(U(t,i.length))}
-                    x=${C} y=${r} width=${Math.max(0,p)} height=${16}
-                    fill=${s?f:u}
+                    ${e(U(n,a.length))}
+                    x=${C} y=${i} width=${Math.max(0,c)} height=${16}
+                    fill=${s?p:d}
                     data-mark-id=${m.markId} role=${m.role} tabindex=${m.tabIndex}
                     aria-pressed=${m.pressed} aria-label=${m.label}
                     @click=${m.click} @auxclick=${m.click} @keydown=${m.keydown} />
-              <text x=${C+p+6} y=${r+16-3} font-weight="700"
-                    class="lintje-chart__data-label ${a==null?``:`lintje-chart__data-label--halo`}">
-                ${d(e.value)}${c?` ${c}`:``}
+              <text x=${C+c+6} y=${i+16-3} font-weight="700"
+                    class="lintje-chart__data-label ${o==null?``:`lintje-chart__data-label--halo`}">
+                ${l(t.value)}${u?` ${u}`:``}
               </text>
             </g>
           `})}
       </svg>
-      ${G(n)}
-      ${oe(n)}
+      ${G(r)}
+      ${oe(r)}
     </figure>
-  `}function ve(e,t){let{controller:n,description:r}=t,{rows:i,target:a=100}=e,s=n.id,c=ge(i.length);n.measure({width:!0,height:c});let u=n.width,d=A(i.map(e=>e.label),u,{fontFamily:n.fontFamily}),{labelEnd:f,barStart:m}=d,h=e=>Math.max(40,u-m-70)*e/110,g=m+h(a),y=e=>e>=a?`var(--color-chart-green)`:`var(--color-attention)`,b=e=>({title:i[e].label,rows:[{label:`Voortgang`,value:v(i[e].value),color:y(i[e].value)},{label:`Doel`,value:v(a),color:`var(--color-chart-emphasis)`}]}),x=ae(n,i.length,e=>({x:m+h(i[e].value),y:e*26+4,content:b(e)}));return p`
-    <figure class="lintje-chart lintje-chart--rows" ${_(n.attach)} ?data-in-view=${n.inView}
-            data-tooltip-anchor @keydown=${e=>n.dismiss(e)}>
-      <svg viewBox="0 0 ${u} ${c}" class="lintje-chart__svg" role="img"
-           aria-labelledby="${s}-desc" width=${u} height=${c} ${o({height:`${c}px`})}
+  `}function ve(t,n){let{controller:r,description:i}=n,{rows:a,target:o=100}=t,c=r.id,l=ge(a.length);r.measure({width:!0,height:l});let u=r.width,d=A(a.map(e=>e.label),u,{fontFamily:r.fontFamily}),{labelEnd:p,barStart:h}=d,_=e=>Math.max(40,u-h-70)*e/110,v=h+_(o),y=e=>e>=o?`var(--color-chart-green)`:`var(--color-attention)`,b=e=>({title:a[e].label,rows:[{label:`Voortgang`,value:g(a[e].value),color:y(a[e].value)},{label:`Doel`,value:g(o),color:`var(--color-chart-emphasis)`}]}),x=ae(r,a.length,e=>({x:h+_(a[e].value),y:e*26+4,content:b(e)}));return s`
+    <figure class="lintje-chart lintje-chart--rows" ${m(r.attach)} ?data-in-view=${r.inView}
+            data-tooltip-anchor @keydown=${e=>r.dismiss(e)}>
+      <svg viewBox="0 0 ${u} ${l}" class="lintje-chart__svg" role="img"
+           aria-labelledby="${c}-desc" width=${u} height=${l} ${e({height:`${l}px`})}
            tabindex="0" @keydown=${x.keydown} @focus=${x.focus} @blur=${x.blur}>
-        <desc id="${s}-desc">${r}</desc>
-        ${i.map((e,t)=>{let r=t*26+4,s=h(e.value),c=y(e.value),p=m+s+46>u,g=e.value>=a?`lintje-chart__data-label--inside`:`lintje-chart__data-label--inside-light`;return l`
-            <g class="lintje-chart__bar-row ${n.hoverIndex===t?`is-hovered`:``}"
-               @mousemove=${e=>n.showTooltip(e,b(t))}
-               @mouseleave=${()=>n.hideTooltip()}>
-              <rect x=${0} y=${r-5} width=${u} height=${26} fill="transparent" />
-              <text x=${f} y=${r+16-3} text-anchor="end" class="lintje-chart__axis-label">${d.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${o(U(t,i.length))}
-                    x=${m} y=${r} width=${Math.max(0,s)} height=${16} fill=${c} />
-              <text x=${p?m+s-6:m+s+6} y=${r+16-3}
-                    text-anchor=${p?`end`:`start`}
-                    class="lintje-chart__data-label ${p?g:``}" font-weight="700">${v(e.value)}</text>
+        <desc id="${c}-desc">${i}</desc>
+        ${a.map((t,n)=>{let i=n*26+4,s=_(t.value),c=y(t.value),l=h+s+46>u,m=t.value>=o?`lintje-chart__data-label--inside`:`lintje-chart__data-label--inside-light`;return f`
+            <g class="lintje-chart__bar-row ${r.hoverIndex===n?`is-hovered`:``}"
+               @mousemove=${e=>r.showTooltip(e,b(n))}
+               @mouseleave=${()=>r.hideTooltip()}>
+              <rect x=${0} y=${i-5} width=${u} height=${26} fill="transparent" />
+              <text x=${p} y=${i+16-3} text-anchor="end" class="lintje-chart__axis-label">${d.fit(t.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${e(U(n,a.length))}
+                    x=${h} y=${i} width=${Math.max(0,s)} height=${16} fill=${c} />
+              <text x=${l?h+s-6:h+s+6} y=${i+16-3}
+                    text-anchor=${l?`end`:`start`}
+                    class="lintje-chart__data-label ${l?m:``}" font-weight="700">${g(t.value)}</text>
             </g>
           `})}
-        <line x1=${g} x2=${g} y1=${0} y2=${i.length*26+2}
+        <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=${g+6} y=${i.length*26+16} class="lintje-chart__axis-label">norm ${a}</text>
+        <text x=${v+6} y=${a.length*26+16} class="lintje-chart__axis-label">norm ${o}</text>
       </svg>
-      ${G(n)}
-      ${oe(n)}
+      ${G(r)}
+      ${oe(r)}
     </figure>
-  `}var ye=/* @__PURE__ */ new WeakMap;function be(e,t){return e.duration>0?Math.min(1,(t-e.start)/e.duration):1}function xe(e,t){let n=be(e,t);if(n>=1)return e.to;let r=e.ease(n);return e.to.map((t,n)=>e.from[n]+(t-e.from[n])*r)}function Se(e,t,n){let r=performance.now(),i=ye.get(e);if(!i||i.key!==t){let a={key:t,from:n,to:n,start:r,duration:0,ease:e=>e,element:i?.element,attach:e=>{a.element=e}};return ye.set(e,a),n}if(i.to.some((e,t)=>e!==n[t])){let t=i.element,a=!t||x();if(i.from=a?n:xe(i,r),i.to=n,i.start=r,i.duration=a?0:c(t,`--dur-layer`),i.ease=t?b(t,`--ease-in-motion`):e=>e,i.frame==null&&i.duration>0){let t=i,n=()=>{t.frame=void 0;let r=be(t,performance.now())>=1;e.requestUpdate(),r||(t.frame=requestAnimationFrame(n))};t.frame=requestAnimationFrame(n)}}return xe(i,r)}function Ce(e){return ye.get(e)}function we(e,t){let{controller:n,description:r}=t,{labels:i,axisTitle:a,small:s=!1}=e,c=n.id;n.measure({width:!0,height:t.height??(s?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let f=e.series.map((e,t)=>({...e,color:H(e.color)??(t===0?`var(--color-chart-default)`:`var(--color-chart-secondary)`),hidden:n.hiddenSeries.includes(e.label)})),h=f.filter(e=>!e.hidden),v=me(t,h.flatMap(e=>e.links??[])),{max:y,ticks:b}=M(Math.max(...f.flatMap(e=>e.values),1)),x=ee(b,n.width,{fontFamily:n.fontFamily}),S=D(t,{left:x.width}),C=S.height-S.bottom,w=k(0,i.length,S).width/Math.max(1,h.length),T=Se(n,f.map(e=>e.label).join(`\0`),f.map(e=>+!e.hidden)),O=Ce(n),A=k(0,i.length,S).width/Math.max(1,T.reduce((e,t)=>e+t,0)),j=T.map((e,t)=>T.slice(0,t).reduce((e,t)=>e+t,0)*A),N=h.every(e=>e.values.every(e=>m(u(e,w),w-2))),P=f.map(e=>({label:e.label,color:e.color,shape:`square`,hidden:e.hidden,fixed:f.length<2})),F=e=>({title:i[e],rows:h.map(t=>({label:t.label,value:d(t.values[e]),color:t.color}))}),L=ae(n,i.length,e=>({x:k(e,i.length,S).center,y:E(Math.max(0,...h.map(t=>t.values[e])),y,S),content:F(e)})),R=i.map((e,t)=>{let r=k(t,i.length,S);return l`
-      <g class="lintje-chart__bar-group ${n.hoverIndex===t?`is-hovered`:``}"
-         ${o(U(t,i.length))}
-         @mousemove=${e=>n.showTooltip(e,F(t))}
-         @mouseleave=${()=>n.hideTooltip()}>
-        ${f.map((n,i)=>{let a=n.values[t],o=E(a,y,S),s=r.x+j[i],c=Math.max(0,T[i]*A-2),f=n.hidden?void 0:v.of(n.links?.[t],`${e} · ${n.label}`,`${e}, ${n.label}: ${d(a)}`);return l`
+  `}var ye=/* @__PURE__ */ new WeakMap;function be(e,t){return e.duration>0?Math.min(1,(t-e.start)/e.duration):1}function xe(e,t){let n=be(e,t);if(n>=1)return e.to;let r=e.ease(n);return e.to.map((t,n)=>e.from[n]+(t-e.from[n])*r)}function Se(e,t,n){let r=performance.now(),i=ye.get(e);if(!i||i.key!==t){let a={key:t,from:n,to:n,start:r,duration:0,ease:e=>e,element:i?.element,attach:e=>{a.element=e}};return ye.set(e,a),n}if(i.to.some((e,t)=>e!==n[t])){let t=i.element,a=!t||x();if(i.from=a?n:xe(i,r),i.to=n,i.start=r,i.duration=a?0:o(t,`--dur-layer`),i.ease=t?b(t,`--ease-in-motion`):e=>e,i.frame==null&&i.duration>0){let t=i,n=()=>{t.frame=void 0;let r=be(t,performance.now())>=1;e.requestUpdate(),r||(t.frame=requestAnimationFrame(n))};t.frame=requestAnimationFrame(n)}}return xe(i,r)}function Ce(e){return ye.get(e)}function we(t,n){let{controller:r,description:i}=n,{labels:a,axisTitle:o,small:u=!1}=t,p=r.id;r.measure({width:!0,height:n.height??(u?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let g=t.series.map((e,t)=>({...e,color:H(e.color)??(t===0?`var(--color-chart-default)`:`var(--color-chart-secondary)`),hidden:r.hiddenSeries.includes(e.label)})),_=g.filter(e=>!e.hidden),v=me(n,_.flatMap(e=>e.links??[])),{max:y,ticks:b}=M(Math.max(...g.flatMap(e=>e.values),1)),x=ee(b,r.width,{fontFamily:r.fontFamily}),S=D(n,{left:x.width}),C=S.height-S.bottom,w=k(0,a.length,S).width/Math.max(1,_.length),T=Se(r,g.map(e=>e.label).join(`\0`),g.map(e=>+!e.hidden)),O=Ce(r),A=k(0,a.length,S).width/Math.max(1,T.reduce((e,t)=>e+t,0)),j=T.map((e,t)=>T.slice(0,t).reduce((e,t)=>e+t,0)*A),N=_.every(e=>e.values.every(e=>d(c(e,w),w-2))),P=g.map(e=>({label:e.label,color:e.color,shape:`square`,hidden:e.hidden,fixed:g.length<2})),F=e=>({title:a[e],rows:_.map(t=>({label:t.label,value:l(t.values[e]),color:t.color}))}),L=ae(r,a.length,e=>({x:k(e,a.length,S).center,y:E(Math.max(0,..._.map(t=>t.values[e])),y,S),content:F(e)})),R=a.map((t,n)=>{let i=k(n,a.length,S);return f`
+      <g class="lintje-chart__bar-group ${r.hoverIndex===n?`is-hovered`:``}"
+         ${e(U(n,a.length))}
+         @mousemove=${e=>r.showTooltip(e,F(n))}
+         @mouseleave=${()=>r.hideTooltip()}>
+        ${g.map((e,r)=>{let a=e.values[n],o=E(a,y,S),s=i.x+j[r],u=Math.max(0,T[r]*A-2),d=e.hidden?void 0:v.of(e.links?.[n],`${t} · ${e.label}`,`${t}, ${e.label}: ${l(a)}`);return f`
             <g>
-              <rect class="lintje-chart__bar lintje-chart__mark ${f?.state??``}"
-                    x=${s} y=${o} width=${c}
-                    height=${Math.max(0,C-o)} fill=${n.color}
-                    data-mark-id=${f?.markId??g} role=${f?.role??g}
-                    tabindex=${f?.tabIndex??g} aria-pressed=${f?.pressed??g}
-                    aria-label=${f?.label??g} aria-hidden=${f?g:`true`}
-                    @click=${f?.click??g} @auxclick=${f?.click??g} @keydown=${f?.keydown??g} />
+              <rect class="lintje-chart__bar lintje-chart__mark ${d?.state??``}"
+                    x=${s} y=${o} width=${u}
+                    height=${Math.max(0,C-o)} fill=${e.color}
+                    data-mark-id=${d?.markId??h} role=${d?.role??h}
+                    tabindex=${d?.tabIndex??h} aria-pressed=${d?.pressed??h}
+                    aria-label=${d?.label??h} aria-hidden=${d?h:`true`}
+                    @click=${d?.click??h} @auxclick=${d?.click??h} @keydown=${d?.keydown??h} />
               <!-- Every label keeps its node and fades, so one that fits after a switch does not
                    draw in again. -->
-              <g class="lintje-chart__series ${!n.hidden&&N?``:`is-off`}">
-                <text x=${s+c/2} y=${o-4} text-anchor="middle"
-                      class="lintje-chart__data-label">${u(a,w)}</text>
+              <g class="lintje-chart__series ${!e.hidden&&N?``:`is-off`}">
+                <text x=${s+u/2} y=${o-4} text-anchor="middle"
+                      class="lintje-chart__data-label">${c(a,w)}</text>
               </g>
             </g>
           `})}
       </g>
-    `});return p`
-    <div class="lintje-chart-wrap ${s?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)||v.escape(e)}>
-      ${I({items:P,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:c,ticks:b,max:y,area:S,axisTitle:a,description:r,formatTick:x.format,xLabels:i.map((e,t)=>({label:e,x:k(t,i.length,S).center})),interactive:v.interactive,keys:L},l`<g ${_(O.attach)}>${R}</g>`)}
-      ${G(n)}
-      ${oe(n)}
+    `});return s`
+    <div class="lintje-chart-wrap ${u?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)||v.escape(e)}>
+      ${I({items:P,onToggle:e=>r.toggleSeries(e)})}
+      ${V({fontFamily:r.fontFamily,id:p,ticks:b,max:y,area:S,axisTitle:o,description:i,formatTick:x.format,xLabels:a.map((e,t)=>({label:e,x:k(t,a.length,S).center})),interactive:v.interactive,keys:L},f`<g ${m(O.attach)}>${R}</g>`)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}var Te=[[1],[1,4],[1,2,4],[1,2,3,4],[1,2,3,4,5]];function Ee(e,t){if(e<1)return[];let n=Te[Math.min(e,Te.length)-1];return y(t)?n.map(e=>e===1?`var(--color-chart-${t})`:`var(--color-chart-${t}-tint-${e})`):n.map(e=>`var(--color-chart-tint-${e})`)}var De=/* @__PURE__ */ new Set([`sky-blue`,`red`,`green`,`violet`,`dark-green`,`purple`,`ruby-red`,`dark-brown`,`brown`,`dark-blue`,`moss-green`]);function Oe(e,t){let{controller:n,description:r}=t,{labels:i,axisTitle:a,normalized:s=!1,totalOnTop:c=!0,small:f=!1}=e,h=n.id;n.measure({width:!0,height:t.height??(f?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let y=e.series.map((e,t)=>({...e,j:t,color:H(e.color),hidden:n.hiddenSeries.includes(e.label)})),b=y.filter(e=>!e.hidden),x=me(t,b.flatMap(e=>e.links??[])),S=i.map((e,t)=>y.reduce((e,n)=>e+n.values[t],0)),C=i.map((e,t)=>b.reduce((e,n)=>e+n.values[t],0)),w=(e,t)=>e/(S[t]||1)*100,T=Se(n,y.map(e=>e.label).join(`\0`),y.map(e=>+!e.hidden)),O=Ce(n),{max:A,ticks:j}=s?{max:100,ticks:[0,25,50,75,100]}:M(Math.max(...S,1)),N=ee(j,n.width,{fontFamily:n.fontFamily}),P=D(t,{left:N.width}),F=P.height-P.bottom,{width:L,bandWidth:R}=k(0,i.length,P),z=c&&!s,B=z&&C.every(e=>m(u(e,R),R-4)),W=Ee(y.length),K=(e,t)=>e.color??W[Math.min(t,W.length-1)],q=t=>{let n=e.series[t].color;return n===`remainder`?`lintje-chart__data-label--inside-text`:(n==null?t===0:De.has(n))?`lintje-chart__data-label--inside`:`lintje-chart__data-label--inside-light`},J=e=>({title:i[e],rows:b.map(t=>({label:t.label,value:s?v(w(t.values[e],e)):d(t.values[e]),color:K(t,t.j)}))}),Y=ae(n,i.length,e=>({x:k(e,i.length,P).center,y:E(s?w(C[e],e):C[e],A,P),content:J(e)})),te=y.map(e=>({label:e.label,color:K(e,e.j),shape:`square`,hidden:e.hidden,fixed:y.length<2})),X=i.map((e,t)=>{let r=k(t,i.length,P),a=0,c=y.map(e=>{let{j:n}=e,r=e.values[t],i=s?w(r,t):r,o=E(a,A,P);a+=i*T[n];let c=E(a,A,P);return{row:e,j:n,value:i,y1:c,height:Math.max(0,o-c)}}),f=E(a,A,P);return l`
-      <g class="lintje-chart__bar-group ${n.hoverIndex===t?`is-hovered`:``}"
-         ${o(U(t,i.length))}
-         @mousemove=${e=>n.showTooltip(e,J(t))}
-         @mouseleave=${()=>n.hideTooltip()}>
+  `}var Te=[[1],[1,4],[1,2,4],[1,2,3,4],[1,2,3,4,5]];function Ee(e,t){if(e<1)return[];let n=Te[Math.min(e,Te.length)-1];return _(t)?n.map(e=>e===1?`var(--color-chart-${t})`:`var(--color-chart-${t}-tint-${e})`):n.map(e=>`var(--color-chart-tint-${e})`)}var De=/* @__PURE__ */ new Set([`sky-blue`,`red`,`green`,`violet`,`dark-green`,`purple`,`ruby-red`,`dark-brown`,`brown`,`dark-blue`,`moss-green`]);function Oe(t,n){let{controller:r,description:i}=n,{labels:a,axisTitle:o,normalized:u=!1,totalOnTop:p=!0,small:_=!1}=t,v=r.id;r.measure({width:!0,height:n.height??(_?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let y=t.series.map((e,t)=>({...e,j:t,color:H(e.color),hidden:r.hiddenSeries.includes(e.label)})),b=y.filter(e=>!e.hidden),x=me(n,b.flatMap(e=>e.links??[])),S=a.map((e,t)=>y.reduce((e,n)=>e+n.values[t],0)),C=a.map((e,t)=>b.reduce((e,n)=>e+n.values[t],0)),w=(e,t)=>e/(S[t]||1)*100,T=Se(r,y.map(e=>e.label).join(`\0`),y.map(e=>+!e.hidden)),O=Ce(r),{max:A,ticks:j}=u?{max:100,ticks:[0,25,50,75,100]}:M(Math.max(...S,1)),N=ee(j,r.width,{fontFamily:r.fontFamily}),P=D(n,{left:N.width}),F=P.height-P.bottom,{width:L,bandWidth:R}=k(0,a.length,P),z=p&&!u,B=z&&C.every(e=>d(c(e,R),R-4)),W=Ee(y.length),K=(e,t)=>e.color??W[Math.min(t,W.length-1)],q=e=>{let n=t.series[e].color;return n===`remainder`?`lintje-chart__data-label--inside-text`:(n==null?e===0:De.has(n))?`lintje-chart__data-label--inside`:`lintje-chart__data-label--inside-light`},J=e=>({title:a[e],rows:b.map(t=>({label:t.label,value:u?g(w(t.values[e],e)):l(t.values[e]),color:K(t,t.j)}))}),Y=ae(r,a.length,e=>({x:k(e,a.length,P).center,y:E(u?w(C[e],e):C[e],A,P),content:J(e)})),te=y.map(e=>({label:e.label,color:K(e,e.j),shape:`square`,hidden:e.hidden,fixed:y.length<2})),X=a.map((t,n)=>{let i=k(n,a.length,P),o=0,s=y.map(e=>{let{j:t}=e,r=e.values[n],i=u?w(r,n):r,a=E(o,A,P);o+=i*T[t];let s=E(o,A,P);return{row:e,j:t,value:i,y1:s,height:Math.max(0,a-s)}}),p=E(o,A,P);return f`
+      <g class="lintje-chart__bar-group ${r.hoverIndex===n?`is-hovered`:``}"
+         ${e(U(n,a.length))}
+         @mousemove=${e=>r.showTooltip(e,J(n))}
+         @mouseleave=${()=>r.hideTooltip()}>
         <!-- The hit area under the whole column, so the tooltip also follows the empty
              space above the stack. It lies *under* the segments: on top it swallowed
              every click on a segment that drills. -->
-        <rect x=${r.x} y=${P.top} width=${r.width} height=${F-P.top} fill="transparent" />
+        <rect x=${i.x} y=${P.top} width=${i.width} height=${F-P.top} fill="transparent" />
         <!-- The segments in one group, so the column lifts on hover as a whole. -->
         <g class="lintje-chart__bar">
-          ${c.map(n=>{let i=n.row.hidden?void 0:x.of(n.row.links?.[t],`${e} · ${n.row.label}`,`${e}, ${n.row.label}: ${d(n.row.values[t])}`);return l`
-            <rect class="lintje-chart__mark lintje-chart__segment ${i?.state??``}"
-                  x=${r.x} y=${n.y1} width=${r.width} height=${n.height}
-                  fill=${K(n.row,n.j)}
-                  data-mark-id=${i?.markId??g} role=${i?.role??g}
-                  tabindex=${i?.tabIndex??g} aria-pressed=${i?.pressed??g}
-                  aria-label=${i?.label??g} aria-hidden=${i?g:`true`}
-                  @click=${i?.click??g} @auxclick=${i?.click??g} @keydown=${i?.keydown??g} />
+          ${s.map(e=>{let r=e.row.hidden?void 0:x.of(e.row.links?.[n],`${t} · ${e.row.label}`,`${t}, ${e.row.label}: ${l(e.row.values[n])}`);return f`
+            <rect class="lintje-chart__mark lintje-chart__segment ${r?.state??``}"
+                  x=${i.x} y=${e.y1} width=${i.width} height=${e.height}
+                  fill=${K(e.row,e.j)}
+                  data-mark-id=${r?.markId??h} role=${r?.role??h}
+                  tabindex=${r?.tabIndex??h} aria-pressed=${r?.pressed??h}
+                  aria-label=${r?.label??h} aria-hidden=${r?h:`true`}
+                  @click=${r?.click??h} @auxclick=${r?.click??h} @keydown=${r?.keydown??h} />
           `})}
         </g>
         <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. Each
              keeps its node and fades, so a switch does not draw it in again. -->
-        ${s?c.map(e=>l`
-                <g class="lintje-chart__series ${!e.row.hidden&&e.height>=16&&m(v(e.value),L-4)?``:`is-off`}">
-                  <text x=${r.center} y=${e.y1+e.height/2+4} text-anchor="middle"
-                        class="lintje-chart__data-label ${q(e.j)}">${v(e.value)}</text>
-                </g>`):g}
-        ${z?l`<g class="lintje-chart__series ${B?``:`is-off`}">
-                <text x=${r.center} y=${f-5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${u(C[t],r.bandWidth)}</text>
-              </g>`:g}
+        ${u?s.map(e=>f`
+                <g class="lintje-chart__series ${!e.row.hidden&&e.height>=16&&d(g(e.value),L-4)?``:`is-off`}">
+                  <text x=${i.center} y=${e.y1+e.height/2+4} text-anchor="middle"
+                        class="lintje-chart__data-label ${q(e.j)}">${g(e.value)}</text>
+                </g>`):h}
+        ${z?f`<g class="lintje-chart__series ${B?``:`is-off`}">
+                <text x=${i.center} y=${p-5} text-anchor="middle"
+                      class="lintje-chart__data-label" font-weight="700">${c(C[n],i.bandWidth)}</text>
+              </g>`:h}
       </g>
-    `});return p`
-    <div class="lintje-chart-wrap ${f?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)||x.escape(e)}>
-      ${I({items:te,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:h,ticks:j,max:A,area:P,axisTitle:a,description:r,formatTick:N.format,xLabels:i.map((e,t)=>({label:e,x:k(t,i.length,P).center})),interactive:x.interactive,keys:Y},l`<g ${_(O.attach)}>${X}</g>`)}
-      ${G(n)}
-      ${oe(n)}
+    `});return s`
+    <div class="lintje-chart-wrap ${_?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)||x.escape(e)}>
+      ${I({items:te,onToggle:e=>r.toggleSeries(e)})}
+      ${V({fontFamily:r.fontFamily,id:v,ticks:j,max:A,area:P,axisTitle:o,description:i,formatTick:N.format,xLabels:a.map((e,t)=>({label:e,x:k(t,a.length,P).center})),interactive:x.interactive,keys:Y},f`<g ${m(O.attach)}>${X}</g>`)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}var ke=`geen gegevens`;function Ae(e,t){let{controller:n,description:r}=t,{labels:i,axisTitle:a,unit:o,small:s=!1}=e,c=n.id,u=i.length;n.measure({width:!0,height:t.height??(s?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let f=Ee(e.series.length,e.color),m=e.series.map((e,t)=>({...e,color:f[Math.min(t,f.length-1)],hidden:n.hiddenSeries.includes(e.label)})),v=m.filter(e=>!e.hidden),y=Se(n,m.map(e=>e.label).join(`\0`),m.map(e=>+!e.hidden)),b=y.some((e,t)=>e!==+!m[t].hidden),x=Ce(n),S=m.map(()=>i.map(()=>!1)),C=m.map(()=>i.map(()=>0)),w=m.map(()=>i.map(()=>0)),T=i.map(()=>!1);i.forEach((e,t)=>{let n=0;m.forEach((e,r)=>{if(y[r]===0)return;let i=e.values[t];T[t]||i==null?T[t]=!0:(S[r][t]=!0,C[r][t]=n,n+=i*y[r],w[r][t]=n)})});let k=y.some(e=>e>0),A=i.map((e,t)=>m.map(e=>e.values[t]).filter(e=>e!=null)).filter(e=>e.length>0).map(e=>e.reduce((e,t)=>e+t,0)),{max:j,ticks:N}=M(Math.max(...A,1)),P=ee(N,n.width,{fontFamily:n.fontFamily,minimum:Math.ceil(h(i[0]??``,n.fontFamily)/2)}),F=D(t,{left:P.width}),L=F.height-F.bottom,R=e=>B(e,u,F),z=e=>E(e,j,F),H=e=>{let t=[];return i.forEach((n,r)=>{if(!e(r))return;let i=t[t.length-1];i&&i[i.length-1]===r-1?i.push(r):t.push([r])}),t},U=i.map((e,t)=>{let n=0;for(let e of v){let r=e.values[t];if(r==null)return{level:n,complete:!1};n+=r}return{level:n,complete:v.length>0}}),W=m.map(e=>({label:e.label,color:e.color,shape:`square`,hidden:e.hidden,fixed:m.length<2})),K=Math.max(1,Math.ceil(u/8)),q=i.map((e,t)=>({label:e,x:R(t),i:t})).filter(e=>e.i%K===0),J=v.length<m.length?`Totaal getoond`:`Totaal`;function Y(e){return{title:i[e],rows:[...[...v].reverse().map(t=>({label:t.label,value:t.values[e]==null?ke:d(t.values[e]),color:t.color})),...v.length>0?[{label:J,value:U[e].complete?d(U[e].level):ke,divider:!0}]:[]]}}let te=ae(n,u,e=>({x:R(e),y:U[e].level>0?z(U[e].level):F.top,content:Y(e)})),X=e=>{let t=[0,0];return m.forEach((n,r)=>{S[r][e]&&S[r][e+1]&&(t=[w[r][e],w[r][e+1]])}),t},ne=(k?H(e=>T[e]):[]).map(e=>{let t=Math.max(0,e[0]-1),r=Math.min(u-1,e[e.length-1]+1),i=Array.from({length:r-t},(e,n)=>t+n).map(e=>{let[t,n]=X(e);return{k:e,left:z(t),right:z(n)}}),a=R(t),o=R(r)-a,s=Math.min(L,...i.flatMap(e=>[e.left,e.right]));return{segments:i,from:a,width:o,ceiling:s,fits:h(ke,n.fontFamily)+8<=o&&s-F.top>=20}}),Z=(e,t)=>t.map(t=>`${R(t)},${z(e[t])}`),Q=[ne.map(e=>l`
-        ${e.segments.map(e=>l`<polygon fill="url(#hatch-${c})"
+  `}var ke=`geen gegevens`;function Ae(e,t){let{controller:n,description:r}=t,{labels:i,axisTitle:a,unit:o,small:c=!1}=e,u=n.id,d=i.length;n.measure({width:!0,height:t.height??(c?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let g=Ee(e.series.length,e.color),_=e.series.map((e,t)=>({...e,color:g[Math.min(t,g.length-1)],hidden:n.hiddenSeries.includes(e.label)})),v=_.filter(e=>!e.hidden),y=Se(n,_.map(e=>e.label).join(`\0`),_.map(e=>+!e.hidden)),b=y.some((e,t)=>e!==+!_[t].hidden),x=Ce(n),S=_.map(()=>i.map(()=>!1)),C=_.map(()=>i.map(()=>0)),w=_.map(()=>i.map(()=>0)),T=i.map(()=>!1);i.forEach((e,t)=>{let n=0;_.forEach((e,r)=>{if(y[r]===0)return;let i=e.values[t];T[t]||i==null?T[t]=!0:(S[r][t]=!0,C[r][t]=n,n+=i*y[r],w[r][t]=n)})});let k=y.some(e=>e>0),A=i.map((e,t)=>_.map(e=>e.values[t]).filter(e=>e!=null)).filter(e=>e.length>0).map(e=>e.reduce((e,t)=>e+t,0)),{max:j,ticks:N}=M(Math.max(...A,1)),P=ee(N,n.width,{fontFamily:n.fontFamily,minimum:Math.ceil(p(i[0]??``,n.fontFamily)/2)}),F=D(t,{left:P.width}),L=F.height-F.bottom,R=e=>B(e,d,F),z=e=>E(e,j,F),H=e=>{let t=[];return i.forEach((n,r)=>{if(!e(r))return;let i=t[t.length-1];i&&i[i.length-1]===r-1?i.push(r):t.push([r])}),t},U=i.map((e,t)=>{let n=0;for(let e of v){let r=e.values[t];if(r==null)return{level:n,complete:!1};n+=r}return{level:n,complete:v.length>0}}),W=_.map(e=>({label:e.label,color:e.color,shape:`square`,hidden:e.hidden,fixed:_.length<2})),K=Math.max(1,Math.ceil(d/8)),q=i.map((e,t)=>({label:e,x:R(t),i:t})).filter(e=>e.i%K===0),J=v.length<_.length?`Totaal getoond`:`Totaal`;function Y(e){return{title:i[e],rows:[...[...v].reverse().map(t=>({label:t.label,value:t.values[e]==null?ke:l(t.values[e]),color:t.color})),...v.length>0?[{label:J,value:U[e].complete?l(U[e].level):ke,divider:!0}]:[]]}}let te=ae(n,d,e=>({x:R(e),y:U[e].level>0?z(U[e].level):F.top,content:Y(e)})),X=e=>{let t=[0,0];return _.forEach((n,r)=>{S[r][e]&&S[r][e+1]&&(t=[w[r][e],w[r][e+1]])}),t},ne=(k?H(e=>T[e]):[]).map(e=>{let t=Math.max(0,e[0]-1),r=Math.min(d-1,e[e.length-1]+1),i=Array.from({length:r-t},(e,n)=>t+n).map(e=>{let[t,n]=X(e);return{k:e,left:z(t),right:z(n)}}),a=R(t),o=R(r)-a,s=Math.min(L,...i.flatMap(e=>[e.left,e.right]));return{segments:i,from:a,width:o,ceiling:s,fits:p(ke,n.fontFamily)+8<=o&&s-F.top>=20}}),Z=(e,t)=>t.map(t=>`${R(t)},${z(e[t])}`),Q=[ne.map(e=>f`
+        ${e.segments.map(e=>f`<polygon fill="url(#hatch-${u})"
             points=${`${R(e.k)},${F.top} ${R(e.k+1)},${F.top} ${R(e.k+1)},${e.right} ${R(e.k)},${e.left}`} />`)}
-        ${e.fits?l`<text x=${e.from+e.width/2} y=${(F.top+e.ceiling)/2+4}
+        ${e.fits?f`<text x=${e.from+e.width/2} y=${(F.top+e.ceiling)/2+4}
                       text-anchor="middle"
-                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${ke}</text>`:g}
-      `),l`<g class="lintje-chart__reveal" ${_(x.attach)}>
-      ${m.map((e,t)=>{let n=H(e=>S[t][e]);return l`<g>
-          ${n.map(n=>n.length===1?l`<circle cx=${R(n[0])} cy=${z(w[t][n[0]])} r="2.5" fill=${e.color} />`:l`<polygon fill=${e.color}
+                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${ke}</text>`:h}
+      `),f`<g class="lintje-chart__reveal" ${m(x.attach)}>
+      ${_.map((e,t)=>{let n=H(e=>S[t][e]);return f`<g>
+          ${n.map(n=>n.length===1?f`<circle cx=${R(n[0])} cy=${z(w[t][n[0]])} r="2.5" fill=${e.color} />`:f`<polygon fill=${e.color}
                       points=${[...Z(w[t],n),...Z(C[t],n).reverse()].join(` `)} />`)}
         </g>`})}
       <!-- Between two parts a 1 px line in the surface: along each part's lower edge, not the floor. -->
-      ${m.map((e,t)=>H(e=>S[t][e]&&C[t][e]>0).filter(e=>e.length>1).map(e=>l`<polyline class="lintje-chart__segment" fill="none" points=${Z(C[t],e).join(` `)} />`))}
-    </g>`,n.hoverIndex!=null&&!b?m.map((e,t)=>S[t][n.hoverIndex]?l`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
-                          cx=${R(n.hoverIndex)} cy=${z(w[t][n.hoverIndex])} />`:g):g,i.map((e,t)=>{let r=O(F)/Math.max(1,u-1);return l`
+      ${_.map((e,t)=>H(e=>S[t][e]&&C[t][e]>0).filter(e=>e.length>1).map(e=>f`<polyline class="lintje-chart__segment" fill="none" points=${Z(C[t],e).join(` `)} />`))}
+    </g>`,n.hoverIndex!=null&&!b?_.map((e,t)=>S[t][n.hoverIndex]?f`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
+                          cx=${R(n.hoverIndex)} cy=${z(w[t][n.hoverIndex])} />`:h):h,i.map((e,t)=>{let r=O(F)/Math.max(1,d-1);return f`
         <rect x=${R(t)-r/2} y=${F.top} width=${r}
               height=${L-F.top}
               fill="transparent"
               @mousemove=${e=>n.hoverAt(t,e,Y(t))}
               @mouseleave=${()=>n.hoverAt(null)} />
-      `})];return p`
-    <div class="lintje-chart-wrap ${s?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+      `})];return s`
+    <div class="lintje-chart-wrap ${c?`lintje-chart--small`:``}"
+         ${m(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
          @keydown=${e=>n.dismiss(e)}>
       ${I({items:W,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:c,ticks:N,max:j,area:F,formatTick:P.format,axisTitle:a??o,xLabels:q,description:r,keys:te},Q)}
+      ${V({fontFamily:n.fontFamily,id:u,ticks:N,max:j,area:F,formatTick:P.format,axisTitle:a??o,xLabels:q,description:r,keys:te},Q)}
       ${G(n)}
       ${oe(n)}
     </div>
-  `}var je=5,Me=e=>{let t=e.label.toLowerCase();return t.startsWith(`overig`)||t===`rest`},Ne=e=>!e.remainder&&!Me(e);function Pe(e){let t=e.filter(Ne).sort((e,t)=>t.value-e.value),n=e.filter(e=>!e.remainder&&Me(e)),r=e.filter(e=>e.remainder);if(t.length>je){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 Fe(e,t){let{controller:n,description:r}=t,{donut:i=!1,centerValue:a,centerLabel:s,legendTable:c=!0,labelHeader:u=`Categorie`}=e,f=n.id,m=Pe(e.segments).map(e=>({...e,color:H(e.color)})),h=m.map(e=>e.href?{id:e.id??e.label,href:e.href}:null),y=me(t,h),b=e=>{let t=y.of(h[e],m[e].label,m[e].label).state;return t.includes(`is-selected`)?`is-selected`:t.includes(`is-muted`)?`is-muted`:``},x=!!t.expanded;n.measure(x?{width:!0,height:`--chart-h-main`,fit:!c}:{});let S=x?Math.max(240,Math.min(560,n.height-24)):e.size??200,C=m.reduce((e,t)=>e+t.value,0),w=S/2,T=i?w*.62:0,E=Ee(m.filter(Ne).length,e.color),D=-1,O=m.map(e=>(Ne(e)&&(D+=1),e.color??(e.remainder?`var(--color-chart-remainder)`:Me(e)?`var(--color-chart-other)`:E[Math.min(D,E.length-1)]))),k=(e,t)=>[w+t*Math.cos(e*Math.PI/180),w+t*Math.sin(e*Math.PI/180)],A=-90,j=m.map((e,t)=>{let n=e.value/C,r=A,a=A+n*360;A=a;let o=+(n>.5),[s,c]=k(r,w),[l,u]=k(a,w);return{segment:e,i:t,d:i?(()=>{let[e,t]=k(a,T),[n,i]=k(r,T);return`M ${s} ${c} A ${w} ${w} 0 ${o} 1 ${l} ${u} L ${e} ${t} A ${T} ${T} 0 ${o} 0 ${n} ${i} Z`})():`M ${w} ${w} L ${s} ${c} A ${w} ${w} 0 ${o} 1 ${l} ${u} Z`,color:O[t],middle:(r+a)/2}}),M=n.hoverIndex,N=M==null?void 0:j[M],P=e=>{n.hoverIndex=e,n.requestUpdate()},F=e=>`${d(e.value)} · ${v(e.value/C*100)}`,L=e=>({title:m[e].label,rows:[{label:`Aantal`,value:F(m[e]),color:O[e]}]}),R=ae(n,j.length,e=>{let[t,n]=k(j[e].middle,(w+T)/2);return{x:t,y:n,content:L(e)}});return p`
-    <div class="lintje-pie-chart ${x?`lintje-pie-chart--expanded`:``} ${c?``:`lintje-pie-chart--legend`}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)||y.escape(e)}>
-      ${c?g:I({items:m.map((e,t)=>({label:e.label,color:O[t],key:String(t)})),onEmphasis:e=>P(e==null?null:Number(e))})}
+  `}var je=5,Me=e=>{let t=e.label.toLowerCase();return t.startsWith(`overig`)||t===`rest`},Ne=e=>!e.remainder&&!Me(e);function Pe(e){let t=e.filter(Ne).sort((e,t)=>t.value-e.value),n=e.filter(e=>!e.remainder&&Me(e)),r=e.filter(e=>e.remainder);if(t.length>je){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 Fe(t,n){let{controller:r,description:i}=n,{donut:a=!1,centerValue:o,centerLabel:c,legendTable:u=!0,labelHeader:d=`Categorie`}=t,p=r.id,_=Pe(t.segments).map(e=>({...e,color:H(e.color)})),v=_.map(e=>e.href?{id:e.id??e.label,href:e.href}:null),y=me(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;r.measure(x?{width:!0,height:`--chart-h-main`,fit:!u}:{});let S=x?Math.max(240,Math.min(560,r.height-24)):t.size??200,C=_.reduce((e,t)=>e+t.value,0),w=S/2,T=a?w*.62:0,E=Ee(_.filter(Ne).length,t.color),D=-1,O=_.map(e=>(Ne(e)&&(D+=1),e.color??(e.remainder?`var(--color-chart-remainder)`:Me(e)?`var(--color-chart-other)`:E[Math.min(D,E.length-1)]))),k=(e,t)=>[w+t*Math.cos(e*Math.PI/180),w+t*Math.sin(e*Math.PI/180)],A=-90,j=_.map((e,t)=>{let n=e.value/C,r=A,i=A+n*360;A=i;let o=+(n>.5),[s,c]=k(r,w),[l,u]=k(i,w);return{segment:e,i:t,d:a?(()=>{let[e,t]=k(i,T),[n,a]=k(r,T);return`M ${s} ${c} A ${w} ${w} 0 ${o} 1 ${l} ${u} L ${e} ${t} A ${T} ${T} 0 ${o} 0 ${n} ${a} Z`})():`M ${w} ${w} L ${s} ${c} A ${w} ${w} 0 ${o} 1 ${l} ${u} Z`,color:O[t],middle:(r+i)/2}}),M=r.hoverIndex,N=M==null?void 0:j[M],P=e=>{r.hoverIndex=e,r.requestUpdate()},F=e=>`${l(e.value)} · ${g(e.value/C*100)}`,L=e=>({title:_[e].label,rows:[{label:`Aantal`,value:F(_[e]),color:O[e]}]}),R=ae(r,j.length,e=>{let[t,n]=k(j[e].middle,(w+T)/2);return{x:t,y:n,content:L(e)}});return s`
+    <div class="lintje-pie-chart ${x?`lintje-pie-chart--expanded`:``} ${u?``:`lintje-pie-chart--legend`}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)||y.escape(e)}>
+      ${u?h:I({items:_.map((e,t)=>({label:e.label,color:O[t],key:String(t)})),onEmphasis:e=>P(e==null?null:Number(e))})}
       <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${W(y.interactive)}
-           class="lintje-pie-chart__svg" aria-labelledby="${f}-desc" ${o(K(f))}
+           class="lintje-pie-chart__svg" aria-labelledby="${p}-desc" ${e(K(p))}
            tabindex="0" @keydown=${R.keydown} @focus=${R.focus} @blur=${R.blur}>
-        <desc id="${f}-desc">${r}</desc>
-        <defs>${J(f)}</defs>
-        ${j.map(({segment:e,i:t,d:r,color:i})=>{let a=y.of(h[t],e.label,`${e.label}: ${F(e)}`);return l`
-          <path d=${r} fill=${i}
-                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${M===t?`is-hovered`:``} ${a.state}"
-                ${o({"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} @auxclick=${a.click} @keydown=${a.keydown}
-                @mousemove=${e=>{n.hoverIndex=t,n.showTooltip(e,L(t))}}
-                @mouseleave=${()=>{n.hoverIndex=null,n.hideTooltip(),n.requestUpdate()}} />
+        <desc id="${p}-desc">${i}</desc>
+        <defs>${J(p)}</defs>
+        ${j.map(({segment:t,i:n,d:i,color:a})=>{let o=y.of(v[n],t.label,`${t.label}: ${F(t)}`);return f`
+          <path d=${i} fill=${a}
+                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${M===n?`is-hovered`:``} ${o.state}"
+                ${e({"transform-origin":`${w}px ${w}px`})}
+                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
+                aria-pressed=${o.pressed} aria-label=${o.label}
+                @click=${o.click} @auxclick=${o.click} @keydown=${o.keydown}
+                @mousemove=${e=>{r.hoverIndex=n,r.showTooltip(e,L(n))}}
+                @mouseleave=${()=>{r.hoverIndex=null,r.hideTooltip(),r.requestUpdate()}} />
         `})}
         <!-- The hovered segment once more on top, lifted with a light shadow: in place, the
              next segment would cover that shadow on one side (user test 13 Sep). -->
-        ${N?l`<path d=${N.d} fill=${N.color} class="lintje-pie-chart__lift lintje-chart__segment"
-                      ${o({"transform-origin":`${w}px ${w}px`})} aria-hidden="true" />`:g}
-        ${i&&a?l`
-          <text x=${w} y=${w+2} text-anchor="middle" class="lintje-pie-chart__center">${a}</text>
-          ${s?l`<text x=${w} y=${w+20} text-anchor="middle" class="lintje-chart__axis-label">${s}</text>`:g}
-        `:g}
+        ${N?f`<path d=${N.d} fill=${N.color} class="lintje-pie-chart__lift lintje-chart__segment"
+                      ${e({"transform-origin":`${w}px ${w}px`})} aria-hidden="true" />`:h}
+        ${a&&o?f`
+          <text x=${w} y=${w+2} text-anchor="middle" class="lintje-pie-chart__center">${o}</text>
+          ${c?f`<text x=${w} y=${w+20} text-anchor="middle" class="lintje-chart__axis-label">${c}</text>`:h}
+        `:h}
       </svg>
 
-      ${c?p`
+      ${u?s`
         <table class="lintje-pie-chart__table">
-          <caption class="visually-hidden">Legenda: ${r}</caption>
+          <caption class="visually-hidden">Legenda: ${i}</caption>
           <thead>
             <tr>
-              <th scope="col" class="lintje-pie-chart__column-label">${u}</th>
+              <th scope="col" class="lintje-pie-chart__column-label">${d}</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">aantal</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">%</th>
             </tr>
           </thead>
           <tbody>
-            ${m.map((e,t)=>p`
-              <tr class="lintje-pie-chart__row ${M===t?`is-hovered`:``} ${b(t)}"
-                  @mouseenter=${()=>P(t)} @mouseleave=${()=>P(null)}>
+            ${_.map((t,n)=>s`
+              <tr class="lintje-pie-chart__row ${M===n?`is-hovered`:``} ${b(n)}"
+                  @mouseenter=${()=>P(n)} @mouseleave=${()=>P(null)}>
                 <th scope="row" class="lintje-pie-chart__label">
                   <span class="lintje-pie-chart__label-inner">
-                    <span class="lintje-pie-chart__marker" ${o({background:O[t]})}></span>${e.label}
+                    <span class="lintje-pie-chart__marker" ${e({background:O[n]})}></span>${t.label}
                   </span>
                 </th>
-                <td class="lintje-pie-chart__value">${d(e.value)}</td>
-                <td class="lintje-pie-chart__value">${v(e.value/C*100)}</td>
+                <td class="lintje-pie-chart__value">${l(t.value)}</td>
+                <td class="lintje-pie-chart__value">${g(t.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">${d(C)}</td>
+              <td class="lintje-pie-chart__total">${l(C)}</td>
               <td class="lintje-pie-chart__total"></td>
             </tr>
           </tfoot>
         </table>
-      `:g}
-      ${G(n)}
-      ${oe(n)}
+      `:h}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}function Ie(e,t){let{controller:n,description:r}=t,{labels:i,threshold:a,thresholdLabel:s,small:c=!1,pendingHours:u=0}=e,f={...e.left,color:H(e.left.color)},m={...e.right,color:H(e.right.color)},h=n.id;n.measure({width:!0,height:t.height??(c?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let v=f.color??`var(--color-chart-default)`,y=m.color??`var(--color-chart-dark-yellow)`,b=M(Math.max(...f.values.filter(e=>e!=null),1)),x=M(Math.max(...m.values.filter(e=>e!=null),a??0,1)),S=ee(b.ticks,n.width,{fontFamily:n.fontFamily}),C=ee(x.ticks,n.width,{fontFamily:n.fontFamily}),w=D(t,{left:S.width,right:C.width}),T=w.height-w.bottom,O=n.hiddenSeries.includes(`left`),A=n.hiddenSeries.includes(`right`),j=n.hiddenSeries.includes(P),N=e=>`lintje-chart__series ${e?`is-off`:``}`,F=[{key:`left`,label:`${f.label} (linkeras)`,color:v,shape:`square`,hidden:O},{key:`right`,label:`${m.label} (rechteras)`,color:y,shape:`line`,hidden:A},...a==null?[]:[{key:P,label:s??`Norm ${a}`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:j}]],L=Math.max(1,Math.ceil(i.length/8)),z=n.hoverIndex,B=R(y),V=[[]];m.values.forEach((e,t)=>{e==null?V[V.length-1].length&&V.push([]):V[V.length-1].push(`${k(t,i.length,w).center},${E(e,x.max,w)}`)});let K=(e,t)=>e==null?`geen gegevens`:`${d(e)}${t?` ${t}`:``}`,q=e=>({title:i[e],rows:[...O?[]:[{label:f.label,value:K(f.values[e],f.unit),color:v}],...A?[]:[{label:m.label,value:K(m.values[e],m.unit),color:y}]]}),J=ae(n,i.length,e=>({x:k(e,i.length,w).center,y:Math.min(O||f.values[e]==null?T:E(f.values[e],b.max,w),A||m.values[e]==null?T:E(m.values[e],x.max,w)),content:q(e)}));return p`
-    <div class="lintje-chart-wrap ${c?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)}>
-      ${I({items:F,onToggle:e=>n.toggleSeries(e)})}
+  `}function Ie(t,n){let{controller:r,description:i}=n,{labels:a,threshold:o,thresholdLabel:c,small:u=!1,pendingHours:d=0}=t,p={...t.left,color:H(t.left.color)},g={...t.right,color:H(t.right.color)},_=r.id;r.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=M(Math.max(...p.values.filter(e=>e!=null),1)),x=M(Math.max(...g.values.filter(e=>e!=null),o??0,1)),S=ee(b.ticks,r.width,{fontFamily:r.fontFamily}),C=ee(x.ticks,r.width,{fontFamily:r.fontFamily}),w=D(n,{left:S.width,right:C.width}),T=w.height-w.bottom,O=r.hiddenSeries.includes(`left`),A=r.hiddenSeries.includes(`right`),j=r.hiddenSeries.includes(P),N=e=>`lintje-chart__series ${e?`is-off`:``}`,F=[{key:`left`,label:`${p.label} (linkeras)`,color:v,shape:`square`,hidden:O},{key:`right`,label:`${g.label} (rechteras)`,color:y,shape:`line`,hidden:A},...o==null?[]:[{key:P,label:c??`Norm ${o}`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:j}]],L=Math.max(1,Math.ceil(a.length/8)),z=r.hoverIndex,B=R(y),V=[[]];g.values.forEach((e,t)=>{e==null?V[V.length-1].length&&V.push([]):V[V.length-1].push(`${k(t,a.length,w).center},${E(e,x.max,w)}`)});let K=(e,t)=>e==null?`geen gegevens`:`${l(e)}${t?` ${t}`:``}`,q=e=>({title:a[e],rows:[...O?[]:[{label:p.label,value:K(p.values[e],p.unit),color:v}],...A?[]:[{label:g.label,value:K(g.values[e],g.unit),color:y}]]}),J=ae(r,a.length,e=>({x:k(e,a.length,w).center,y:Math.min(O||p.values[e]==null?T:E(p.values[e],b.max,w),A||g.values[e]==null?T:E(g.values[e],x.max,w)),content:q(e)}));return s`
+    <div class="lintje-chart-wrap ${u?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)}>
+      ${I({items:F,onToggle:e=>r.toggleSeries(e)})}
       <figure class="lintje-chart">
         <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${W(!1)}
-             aria-labelledby="${h}-desc" width=${w.width} height=${w.height}
+             aria-labelledby="${_}-desc" width=${w.width} height=${w.height}
              tabindex="0" @keydown=${J.keydown} @focus=${J.focus} @blur=${J.blur}>
-          <desc id="${h}-desc">${r}</desc>
+          <desc id="${_}-desc">${i}</desc>
           <defs>
-            <pattern id="hatch-${h}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+            <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. -->
-          ${u>0?(()=>{let e=k(i.length-u,i.length,w);return l`<rect x=${e.x-(e.bandWidth-e.width)/2} y=${w.top}
+          ${d>0?(()=>{let e=k(a.length-d,a.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-${h})" />`})():g}
+                             height=${T-w.top} fill="url(#hatch-${_})" />`})():h}
 
-          ${b.ticks.map(e=>{let t=E(e,b.max,w),n=e===0;return l`
+          ${b.ticks.map(e=>{let t=E(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)`}
@@ -349,7 +349,7 @@ import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as
                 </text>
               </g>
             `})}
-          ${x.ticks.map(e=>l`
+          ${x.ticks.map(e=>f`
             <text x=${w.width-w.right+8} y=${E(e,x.max,w)+4}
                   class="lintje-chart__axis-label" fill=${`var(--color-chart-dark-yellow-text)`}>${C.format(e)}</text>
           `)}
@@ -362,136 +362,136 @@ import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as
           <!-- Bars grow in one after another; the hit areas below sit on top, so hover comes
                from hoverIndex rather than :hover. -->
           <g class=${N(O)}>
-          ${f.values.map((e,t)=>{let n=k(t,i.length,w);if(e==null)return l`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
-                               height=${Math.max(0,T-w.top)} fill="url(#hatch-${h})" />`;let r=E(e,b.max,w);return l`
-              <g class="lintje-chart__bar-group ${z===t?`is-hovered`:``}"
-                 ${o(U(t,i.length))}>
-                <rect class="lintje-chart__bar" x=${n.x} y=${r} width=${n.width}
-                      height=${Math.max(0,T-r)} fill=${v} />
+          ${p.values.map((t,n)=>{let r=k(n,a.length,w);if(t==null)return f`<rect class="lintje-chart__missing" x=${r.x} y=${w.top} width=${r.width}
+                               height=${Math.max(0,T-w.top)} fill="url(#hatch-${_})" />`;let i=E(t,b.max,w);return f`
+              <g class="lintje-chart__bar-group ${z===n?`is-hovered`:``}"
+                 ${e(U(n,a.length))}>
+                <rect class="lintje-chart__bar" x=${r.x} y=${i} width=${r.width}
+                      height=${Math.max(0,T-i)} fill=${v} />
               </g>
             `})}
           </g>
 
-          ${a==null?g:l`<line class=${N(j)} x1=${w.left} x2=${w.width-w.right}
-                        y1=${E(a,x.max,w)} y2=${E(a,x.max,w)}
+          ${o==null?h:f`<line class=${N(j)} x1=${w.left} x2=${w.width-w.right}
+                        y1=${E(o,x.max,w)} y2=${E(o,x.max,w)}
                         stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="4 3" />`}
 
           <g class=${N(A)}>
           <g class="lintje-chart__reveal">
-            ${V.filter(e=>e.length>0).map(e=>{let t=e.join(` `),[n,r]=e[0].split(`,`);return l`
-                  ${B&&e.length>1?l`<polyline class="lintje-chart__line lintje-chart__line--casing"
-                                    stroke=${B} points=${t} />`:g}
-                  ${e.length===1?l`<circle cx=${n} cy=${r} r="2.5" fill=${y} />`:l`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
+            ${V.filter(e=>e.length>0).map(e=>{let t=e.join(` `),[n,r]=e[0].split(`,`);return f`
+                  ${B&&e.length>1?f`<polyline class="lintje-chart__line lintje-chart__line--casing"
+                                    stroke=${B} points=${t} />`:h}
+                  ${e.length===1?f`<circle cx=${n} cy=${r} r="2.5" fill=${y} />`:f`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
                 `})}
           </g>
           </g>
 
-          ${i.filter((e,t)=>t%L===0).map((e,t)=>l`
-            <text x=${k(t*L,i.length,w).center} y=${w.height-8}
+          ${a.filter((e,t)=>t%L===0).map((e,t)=>f`
+            <text x=${k(t*L,a.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. -->
-          ${z!=null&&!A&&m.values[z]!=null?l`<circle class="lintje-chart__hover-point" r="4" fill=${y}
-                          cx=${k(z,i.length,w).center}
-                          cy=${E(m.values[z],x.max,w)} />`:g}
-          ${i.map((e,t)=>{let r=k(t,i.length,w);return l`
-              <rect x=${r.x} y=${w.top} width=${r.bandWidth} height=${T-w.top}
+          ${z!=null&&!A&&g.values[z]!=null?f`<circle class="lintje-chart__hover-point" r="4" fill=${y}
+                          cx=${k(z,a.length,w).center}
+                          cy=${E(g.values[z],x.max,w)} />`:h}
+          ${a.map((e,t)=>{let n=k(t,a.length,w);return f`
+              <rect x=${n.x} y=${w.top} width=${n.bandWidth} height=${T-w.top}
                     fill="transparent"
-                    @mousemove=${e=>n.hoverAt(t,e,q(t))}
-                    @mouseleave=${()=>n.hoverAt(null)} />
+                    @mousemove=${e=>r.hoverAt(t,e,q(t))}
+                    @mouseleave=${()=>r.hoverAt(null)} />
             `})}
         </svg>
       </figure>
-      ${G(n)}
-      ${oe(n)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}var Le=4.5,Re=5.5,ze=44,Be=8,Ve=(e,t)=>e.left<t.right&&t.left<e.right&&e.top<t.bottom&&t.top<e.bottom;function He(e,t,n,r){let i=5.5,a=[];for(let[o,s]of e.entries()){if(!t.includes(s.label))continue;let c=h(s.label,r,700),l=s.y-9,u=l-12,d=l+3,f=[{anchor:`end`,x:s.x-Be,left:s.x-Be-c},{anchor:`start`,x:s.x+Be,left:s.x+Be}].map(e=>({...e,right:e.left+c,top:u,bottom:d})).find(t=>t.left>=n.left&&t.right<=n.width-n.right&&t.top>=0&&a.every(e=>!Ve(t,e))&&e.every((e,n)=>n===o||!Ve(t,{left:e.x-i,right:e.x+i,top:e.y-i,bottom:e.y+i})));if(!f)return[];a.push({...f,label:s.label,y:l})}return a.map(({label:e,x:t,y:n,anchor:r})=>({label:e,x:t,y:n,anchor:r}))}var Ue=e=>e.charAt(0).toUpperCase()+e.slice(1),We=(e,t)=>`${d(e)}${t?` ${t}`:``}`;function Ge(e){let t=new Set(e.series.map(e=>e.color).filter(Y)),n=N.filter(e=>!t.has(e)),r=0;return e.series.map(e=>{let t=Y(e.color)?e.color:n[r++%n.length];return{color:H(e.color??t),symbol:t}})}function Ke(e,t){let{controller:n,description:i}=t,{axisTitle:a,unit:s,xTitle:c,xUnit:u,threshold:m,thresholdLabel:h,small:v=!1}=e,y=n.id;n.measure({width:!0,height:t.height??(v?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let b=Ge(e),x=e.series.map((e,t)=>({...e,...b[t]})),S=e=>n.hiddenSeries.includes(e.label),C=x.flatMap((e,t)=>e.points.map((n,r)=>({point:n,row:e,key:`${t}:${r}`})).filter(e=>e.point.x!=null&&e.point.y!=null)).sort((e,t)=>e.point.x-t.point.x||e.point.y-t.point.y),w=C.filter(({row:e})=>!S(e)),T=new Map(w.map((e,t)=>[e.key,t])),k=n.hiddenSeries.includes(P),A=M(Math.max(...C.map(({point:e})=>e.x),1),t.mobile?3:6),j=M(Math.max(...C.map(({point:e})=>e.y),m??0,1)),N=ee(j.ticks,n.width,{fontFamily:n.fontFamily}),F=D(t,{left:N.width,bottom:ze}),L=e=>F.left+O(F)*e/A.max,z=A.ticks.map((e,t)=>({label:d(e),x:L(e),anchor:t===A.ticks.length-1?`end`:`middle`})),B=[...x.map(e=>({label:e.label,color:e.color,shape:`point`,symbol:e.symbol,hidden:S(e),fixed:x.length<2&&m==null})),...m==null?[]:[{key:P,label:h??`Norm`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:k}]];function H(e){let{point:t,row:n}=w[e];return{title:t.label,rows:[{label:n.label,value:``,color:n.color,symbol:n.symbol},{label:Ue(c),value:We(t.x,u)},{label:Ue(a),value:We(t.y,s)}]}}let W=e=>({x:L(e.x),y:E(e.y,j.max,F)}),K=e=>W(w[e].point),q=ae(n,w.length,e=>({...K(e),content:H(e)})),J=w.map(({point:e,row:t})=>e.href?{id:e.id??`${t.label} · ${e.label}`,href:e.href}:null),Y=me(t,J),X=w.map(({point:e},t)=>Y.of(J[t],e.label,re(H(t)))),ne=He(w.map((e,t)=>({label:e.point.label,...K(t)})),e.dataLabels??[],F,n.fontFamily),Z=m==null?0:E(m,j.max,F),Q=n.hoverIndex==null?void 0:w[n.hoverIndex],ie=e=>{let t=e.target.closest?.(`[data-point]`);if(t)return Number(t.getAttribute(`data-point`));let n=e.currentTarget,i=n.ownerSVGElement?.getBoundingClientRect(),a=i&&i.width>0?F.width/i.width:1,o=(e.clientX-(i?.left??0))*a,s=(e.clientY-(i?.top??0))*a,c=r(n,`--h-target`,48)/2,l=null,u=c;return w.forEach((e,t)=>{let{x:n,y:r}=K(t),i=Math.hypot(n-o,r-s);i<=u&&(l=t,u=i)}),l},se=e=>{let t=ie(e);t==null?(n.hoverIndex!=null||n.tooltip)&&n.hoverAt(null):n.hoverAt(t,e,H(t))},$=e=>{let t=ie(e),n=t==null?null:X[t];n?.clickable&&n.click!==g&&n.click(e)},ce=Q!=null&&X[n.hoverIndex]?.clickable,le=[m==null?g:l`
+  `}var Le=4.5,Re=5.5,ze=44,Be=8,Ve=(e,t)=>e.left<t.right&&t.left<e.right&&e.top<t.bottom&&t.top<e.bottom;function He(e,t,n,r){let i=5.5,a=[];for(let[o,s]of e.entries()){if(!t.includes(s.label))continue;let c=p(s.label,r,700),l=s.y-9,u=l-12,d=l+3,f=[{anchor:`end`,x:s.x-Be,left:s.x-Be-c},{anchor:`start`,x:s.x+Be,left:s.x+Be}].map(e=>({...e,right:e.left+c,top:u,bottom:d})).find(t=>t.left>=n.left&&t.right<=n.width-n.right&&t.top>=0&&a.every(e=>!Ve(t,e))&&e.every((e,n)=>n===o||!Ve(t,{left:e.x-i,right:e.x+i,top:e.y-i,bottom:e.y+i})));if(!f)return[];a.push({...f,label:s.label,y:l})}return a.map(({label:e,x:t,y:n,anchor:r})=>({label:e,x:t,y:n,anchor:r}))}var Ue=e=>e.charAt(0).toUpperCase()+e.slice(1),We=(e,t)=>`${l(e)}${t?` ${t}`:``}`;function Ge(e){let t=new Set(e.series.map(e=>e.color).filter(Y)),n=N.filter(e=>!t.has(e)),r=0;return e.series.map(e=>{let t=Y(e.color)?e.color:n[r++%n.length];return{color:H(e.color??t),symbol:t}})}function Ke(t,n){let{controller:i,description:a}=n,{axisTitle:o,unit:c,xTitle:d,xUnit:p,threshold:g,thresholdLabel:_,small:v=!1}=t,y=i.id;i.measure({width:!0,height:n.height??(v?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let b=Ge(t),x=t.series.map((e,t)=>({...e,...b[t]})),S=e=>i.hiddenSeries.includes(e.label),C=x.flatMap((e,t)=>e.points.map((n,r)=>({point:n,row:e,key:`${t}:${r}`})).filter(e=>e.point.x!=null&&e.point.y!=null)).sort((e,t)=>e.point.x-t.point.x||e.point.y-t.point.y),w=C.filter(({row:e})=>!S(e)),T=new Map(w.map((e,t)=>[e.key,t])),k=i.hiddenSeries.includes(P),A=M(Math.max(...C.map(({point:e})=>e.x),1),n.mobile?3:6),j=M(Math.max(...C.map(({point:e})=>e.y),g??0,1)),N=ee(j.ticks,i.width,{fontFamily:i.fontFamily}),F=D(n,{left:N.width,bottom:ze}),L=e=>F.left+O(F)*e/A.max,z=A.ticks.map((e,t)=>({label:l(e),x:L(e),anchor:t===A.ticks.length-1?`end`:`middle`})),B=[...x.map(e=>({label:e.label,color:e.color,shape:`point`,symbol:e.symbol,hidden:S(e),fixed:x.length<2&&g==null})),...g==null?[]:[{key:P,label:_??`Norm`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:k}]];function H(e){let{point:t,row:n}=w[e];return{title:t.label,rows:[{label:n.label,value:``,color:n.color,symbol:n.symbol},{label:Ue(d),value:We(t.x,p)},{label:Ue(o),value:We(t.y,c)}]}}let W=e=>({x:L(e.x),y:E(e.y,j.max,F)}),K=e=>W(w[e].point),q=ae(i,w.length,e=>({...K(e),content:H(e)})),J=w.map(({point:e,row:t})=>e.href?{id:e.id??`${t.label} · ${e.label}`,href:e.href}:null),Y=me(n,J),X=w.map(({point:e},t)=>Y.of(J[t],e.label,re(H(t)))),ne=He(w.map((e,t)=>({label:e.point.label,...K(t)})),t.dataLabels??[],F,i.fontFamily),Z=g==null?0:E(g,j.max,F),Q=i.hoverIndex==null?void 0:w[i.hoverIndex],ie=e=>{let t=e.target.closest?.(`[data-point]`);if(t)return Number(t.getAttribute(`data-point`));let n=e.currentTarget,i=n.ownerSVGElement?.getBoundingClientRect(),a=i&&i.width>0?F.width/i.width:1,o=(e.clientX-(i?.left??0))*a,s=(e.clientY-(i?.top??0))*a,c=r(n,`--h-target`,48)/2,l=null,u=c;return w.forEach((e,t)=>{let{x:n,y:r}=K(t),i=Math.hypot(n-o,r-s);i<=u&&(l=t,u=i)}),l},se=e=>{let t=ie(e);t==null?(i.hoverIndex!=null||i.tooltip)&&i.hoverAt(null):i.hoverAt(t,e,H(t))},$=e=>{let t=ie(e),n=t==null?null:X[t];n?.clickable&&n.click!==h&&n.click(e)},ce=Q!=null&&X[i.hoverIndex]?.clickable,le=[g==null?h:f`
         <g class="lintje-chart__series ${k?`is-off`:``}">
           <g class="lintje-chart__reference">
             <line x1=${F.left} x2=${F.width-F.right} y1=${Z} y2=${Z}
                   stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
             <text x=${F.left+6} y=${Z-6}
                   class="lintje-chart__axis-label lintje-chart__axis-label--halo">
-              ${h??`norm ${We(m,s)}`}
+              ${_??`norm ${We(g,c)}`}
             </text>
           </g>
         </g>
-      `,l`<g @mousemove=${se} @mouseleave=${()=>n.hoverAt(null)} @click=${$} @auxclick=${$}>
+      `,f`<g @mousemove=${se} @mouseleave=${()=>i.hoverAt(null)} @click=${$} @auxclick=${$}>
       <rect class="lintje-chart__hit ${ce?`is-clickable`:``}"
             x="0" y="0" width=${F.width} height=${F.height} />
       <g>
-        ${f(C,e=>e.key,({point:e,row:t,key:n},r)=>{let{x:i,y:a}=W(e),s=R(t.color),c=T.get(n),u=c==null?void 0:X[c];return l`
-              <path class="lintje-chart__point lintje-chart__mark ${s?``:`lintje-chart__segment`} ${u?.state??`is-off`}"
-                    ${o(U(r,C.length))}
-                    d=${te(t.symbol,Le,i,a)} fill=${t.color}
-                    stroke=${s??g} stroke-width=${s?1:g}
-                    data-point=${c??g}
-                    data-mark-id=${u?.markId??g} role=${u?.role??g}
-                    tabindex=${u?.tabIndex??g}
-                    aria-pressed=${u?.pressed??g} aria-label=${u?.label??g}
-                    @keydown=${u?.keydown??g} />
+        ${u(C,e=>e.key,({point:t,row:n,key:r},i)=>{let{x:a,y:o}=W(t),s=R(n.color),c=T.get(r),l=c==null?void 0:X[c];return f`
+              <path class="lintje-chart__point lintje-chart__mark ${s?``:`lintje-chart__segment`} ${l?.state??`is-off`}"
+                    ${e(U(i,C.length))}
+                    d=${te(n.symbol,Le,a,o)} fill=${n.color}
+                    stroke=${s??h} stroke-width=${s?1:h}
+                    data-point=${c??h}
+                    data-mark-id=${l?.markId??h} role=${l?.role??h}
+                    tabindex=${l?.tabIndex??h}
+                    aria-pressed=${l?.pressed??h} aria-label=${l?.label??h}
+                    @keydown=${l?.keydown??h} />
             `})}
       </g>
 
-      ${ne.map(e=>l`
+      ${ne.map(e=>f`
           <text x=${e.x} y=${e.y} text-anchor=${e.anchor}
                 class="lintje-chart__data-label lintje-chart__data-label--halo">${e.label}</text>
         `)}
 
       <!-- The point under the pointer or the keyboard, raised with a ring in the surface. -->
-      ${Q?(()=>{let{x:e,y:t}=K(n.hoverIndex),r=R(Q.row.color),i=te(Q.row.symbol,Re,e,t);return l`
-            <path class="lintje-chart__hover-point" d=${i} fill=${Q.row.color} />
-            ${r?l`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />`:g}
-          `})():g}
-    </g>`];return p`
+      ${Q?(()=>{let{x:e,y:t}=K(i.hoverIndex),n=R(Q.row.color),r=te(Q.row.symbol,Re,e,t);return f`
+            <path class="lintje-chart__hover-point" d=${r} fill=${Q.row.color} />
+            ${n?f`<path class="lintje-chart__hover-casing" d=${r} stroke=${n} />`:h}
+          `})():h}
+    </g>`];return s`
     <div class="lintje-chart-wrap ${v?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)||Y.escape(e)}>
-      ${I({items:B,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:y,ticks:j.ticks,max:j.max,area:F,formatTick:N.format,axisTitle:a,xLabels:z,xTitle:c,description:i,interactive:Y.interactive,keys:q},le)}
-      ${G(n)}
-      ${oe(n)}
+         ${m(i.attach)} ?data-in-view=${i.inView} data-tooltip-anchor
+         @keydown=${e=>i.dismiss(e)||Y.escape(e)}>
+      ${I({items:B,onToggle:e=>i.toggleSeries(e)})}
+      ${V({fontFamily:i.fontFamily,id:y,ticks:j.ticks,max:j.max,area:F,formatTick:N.format,axisTitle:o,xLabels:z,xTitle:d,description:a,interactive:Y.interactive,keys:q},le)}
+      ${G(i)}
+      ${oe(i)}
     </div>
-  `}var qe=[`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)`],Je=qe.length,Ye=[1,2,2.5,5,10];function Xe(e,t){if(!(e>0)||!Number.isFinite(e))return 1;let n=10**Math.floor(Math.log10(e)),r=0,i=1/0;for(let a of Ye){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 Ze(e,t){let n=Math.max(0,Math.min(10,-Math.floor(Math.log10(t))+1));return Number(e.toFixed(n))}function Qe(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=Xe((r-n)/Je,i),o=Math.floor(n/a)*a,s=[];for(let e=1;e<Je;e+=1){let t=Ze(o+e*a,a);if(t>r)break;s.push(t)}return s}function $e(e,t,n=0){let r=d(e,n),i=t?.trim()??``;return i?i===`%`?`${r}%`:`${r} ${i}`:r}function et(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 tt(e,t={}){let n=(t.bounds?.length?t.bounds.slice(0,Je-1):null)??Qe(e),r=et(n),i=e=>$e(e,t.unit,r),a=e=>d(e,r);if(n.length===0){let e=qe.length-1;return[{limit:1/0,color:qe[e],label:`alle waarden`,ramp:e}]}return[{limit:n[0],color:qe[0],label:`< ${i(n[0])}`,ramp:0},...n.slice(1).map((e,t)=>({limit:e,color:qe[t+1],label:`${a(n[t])}–${i(e)}`,ramp:t+1})),{limit:1/0,color:qe[n.length],label:`≥ ${i(n[n.length-1])}`,ramp:n.length}]}function nt(e,t){let n=e.findIndex(e=>t<e.limit);return n===-1?e.length-1:n}function rt(e,t,n){return Array.from({length:n},(n,r)=>Array.from({length:t},(t,n)=>e?.[n]?.[r]))}function it(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:rt(e.values,t,n),links:e.links?rt(e.links,t,n):void 0}}function at(e,t){let{controller:n,description:r,mobile:i=!1}=t,a=i?it(e):void 0,s=a?.columnLabels??e.columnLabels,c=a?.rowLabels??e.rowLabels,l=a?.values??e.values,u=a?a.links:e.links,f=a?!0:e.compact??!1,{unit:m}=e,h=me(t,(u??[]).flat()),v=tt(l,{bounds:e.bounds,unit:m}),y=e=>nt(v,e);n.measure({});let b=n.selectedCell,x=e=>`class-${e}`,S=e=>n.hiddenSeries.includes(x(v[e].ramp));return p`
-    <div class="lintje-heatmap" ${_(n.attach)} ?data-in-view=${n.inView}
-         data-tooltip-anchor @keydown=${h.escape}>
-      ${I({items:v.map(e=>({key:x(e.ramp),label:e.label,color:e.color,shape:`square`,hidden:n.hiddenSeries.includes(x(e.ramp)),fixed:v.length<2})),onToggle:e=>n.toggleSeries(e)})}
-      <table class="lintje-heatmap__grid ${f?`is-compact`:``}">
-        <caption class="visually-hidden">${r}</caption>
+  `}var qe=[`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)`],Je=qe.length,Ye=[1,2,2.5,5,10];function Xe(e,t){if(!(e>0)||!Number.isFinite(e))return 1;let n=10**Math.floor(Math.log10(e)),r=0,i=1/0;for(let a of Ye){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 Ze(e,t){let n=Math.max(0,Math.min(10,-Math.floor(Math.log10(t))+1));return Number(e.toFixed(n))}function Qe(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=Xe((r-n)/Je,i),o=Math.floor(n/a)*a,s=[];for(let e=1;e<Je;e+=1){let t=Ze(o+e*a,a);if(t>r)break;s.push(t)}return s}function $e(e,t,n=0){let r=l(e,n),i=t?.trim()??``;return i?i===`%`?`${r}%`:`${r} ${i}`:r}function et(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 tt(e,t={}){let n=(t.bounds?.length?t.bounds.slice(0,Je-1):null)??Qe(e),r=et(n),i=e=>$e(e,t.unit,r),a=e=>l(e,r);if(n.length===0){let e=qe.length-1;return[{limit:1/0,color:qe[e],label:`alle waarden`,ramp:e}]}return[{limit:n[0],color:qe[0],label:`< ${i(n[0])}`,ramp:0},...n.slice(1).map((e,t)=>({limit:e,color:qe[t+1],label:`${a(n[t])}–${i(e)}`,ramp:t+1})),{limit:1/0,color:qe[n.length],label:`≥ ${i(n[n.length-1])}`,ramp:n.length}]}function nt(e,t){let n=e.findIndex(e=>t<e.limit);return n===-1?e.length-1:n}function rt(e,t,n){return Array.from({length:n},(n,r)=>Array.from({length:t},(t,n)=>e?.[n]?.[r]))}function it(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:rt(e.values,t,n),links:e.links?rt(e.links,t,n):void 0}}function at(t,n){let{controller:r,description:i,mobile:a=!1}=n,o=a?it(t):void 0,c=o?.columnLabels??t.columnLabels,u=o?.rowLabels??t.rowLabels,d=o?.values??t.values,f=o?o.links:t.links,p=o?!0:t.compact??!1,{unit:g}=t,_=me(n,(f??[]).flat()),v=tt(d,{bounds:t.bounds,unit:g}),y=e=>nt(v,e);r.measure({});let b=r.selectedCell,x=e=>`class-${e}`,S=e=>r.hiddenSeries.includes(x(v[e].ramp));return s`
+    <div class="lintje-heatmap" ${m(r.attach)} ?data-in-view=${r.inView}
+         data-tooltip-anchor @keydown=${_.escape}>
+      ${I({items:v.map(e=>({key:x(e.ramp),label:e.label,color:e.color,shape:`square`,hidden:r.hiddenSeries.includes(x(e.ramp)),fixed:v.length<2})),onToggle:e=>r.toggleSeries(e)})}
+      <table class="lintje-heatmap__grid ${p?`is-compact`:``}">
+        <caption class="visually-hidden">${i}</caption>
         <thead>
           <tr>
             <td></td>
-            ${s.map(e=>p`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
+            ${c.map(e=>s`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${c.map((e,t)=>p`
+          ${u.map((t,n)=>s`
             <tr>
-              <th scope="row" class="lintje-heatmap__row-label" title=${e}>
-                <span class="lintje-heatmap__row-label-text">${e}</span>
+              <th scope="row" class="lintje-heatmap__row-label" title=${t}>
+                <span class="lintje-heatmap__row-label-text">${t}</span>
               </th>
-              ${s.map((r,i)=>{let a=l[t]?.[i];if(a==null)return p`
+              ${c.map((i,a)=>{let o=d[n]?.[a];if(o==null)return s`
                     <td class="lintje-heatmap__slot">
                       <div class="lintje-heatmap__cell is-empty"
-                           title="${e} · ${s[i]}: geen meting">
+                           title="${t} · ${c[a]}: geen meting">
                         <span class="visually-hidden">geen meting</span>
                       </div>
                     </td>
-                  `;let g=y(a),_=h.of(u?.[t]?.[i],`${e} · ${s[i]}`),x=!_.clickable&&b?.row===t&&b?.column===i;return p`
+                  `;let m=y(o),h=_.of(f?.[n]?.[a],`${t} · ${c[a]}`),x=!h.clickable&&b?.row===n&&b?.column===a;return s`
                   <td class="lintje-heatmap__slot">
                     <button
                       type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[g].ramp} ${x?`is-selected`:``} ${S(g)?`is-dimmed`:``} ${_.state}"
-                      data-mark-id=${_.markId}
-                      ${o({"--lintje-cell":v[g].color,...q(i,t,s.length,c.length)})}
-                      @click=${_.clickable?_.click:()=>{n.selectedCell=x?null:{row:t,column:i},n.requestUpdate()}}
-                      @auxclick=${_.click}
-                      @mousemove=${f?void 0:t=>n.showTooltip(t,{title:`${e} · ${s[i]}`,rows:[{label:`klasse ${v[g].label}`,value:$e(a,m),color:v[g].color}]})}
-                      @mouseleave=${f?void 0:()=>n.hideTooltip()}
-                      aria-pressed=${_.clickable?_.pressed:x}
-                      aria-label="${e} ${s[i]}: ${$e(a,m)}, klasse ${v[g].label}"
-                    >${d(a)}</button>
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[m].ramp} ${x?`is-selected`:``} ${S(m)?`is-dimmed`:``} ${h.state}"
+                      data-mark-id=${h.markId}
+                      ${e({"--lintje-cell":v[m].color,...q(a,n,c.length,u.length)})}
+                      @click=${h.clickable?h.click:()=>{r.selectedCell=x?null:{row:n,column:a},r.requestUpdate()}}
+                      @auxclick=${h.click}
+                      @mousemove=${p?void 0:e=>r.showTooltip(e,{title:`${t} · ${c[a]}`,rows:[{label:`klasse ${v[m].label}`,value:$e(o,g),color:v[m].color}]})}
+                      @mouseleave=${p?void 0:()=>r.hideTooltip()}
+                      aria-pressed=${h.clickable?h.pressed:x}
+                      aria-label="${t} ${c[a]}: ${$e(o,g)}, klasse ${v[m].label}"
+                    >${l(o)}</button>
                   </td>
                 `})}
             </tr>
@@ -500,66 +500,66 @@ import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as
       </table>
 
       <!-- Selected cell: a 48 px line with day, block, value, class. -->
-      ${b&&l[b.row]?.[b.column]!=null?p`
+      ${b&&d[b.row]?.[b.column]!=null?s`
         <p class="lintje-heatmap__selection">
-          <b>${c[b.row]} ${s[b.column]}</b> ·
-          ${$e(l[b.row][b.column],m)} · klasse
-          ${v[y(l[b.row][b.column])].label}
+          <b>${u[b.row]} ${c[b.column]}</b> ·
+          ${$e(d[b.row][b.column],g)} · klasse
+          ${v[y(d[b.row][b.column])].label}
         </p>
-      `:g}
+      `:h}
 
-      ${G(n)}
+      ${G(r)}
     </div>
-  `}var ot=16,st=56,ct=8,lt=18;function ut(e){return d(e,+!Number.isInteger(e))}function dt(e,t){let n=t?` ${t}`:``;return e.to==null?`${ut(e.from)}${n} of meer`:`${ut(e.from)} tot ${ut(e.to)}${n}`}function ft(e,t,n=``){let r=t.width,i=e.map(e=>{let t=h(e.text,n,e.bold?700:400),i=e.x+6+t<=r;return{x:i?e.x+6:e.x-6,anchor:i?`start`:`end`,left:i?e.x+6:e.x-6-t,right:i?e.x+6+t:e.x-6}}),a=i.length===2?+(e[1].x>=e[0].x):-1,o=i.length===2&&i[0].left<i[1].right+ct&&i[1].left<i[0].right+ct;return i.map((e,n)=>({x:e.x,y:t.top+12+(o&&n===a?lt:0),anchor:e.anchor}))}function pt(e,t){let{controller:n,description:r}=t,{bins:i,axisTitle:a,xTitle:s,unit:c,median:u,threshold:f,small:m=!1}=e,y=e.label??`Aantal`,b=H(e.color)??`var(--color-chart-default)`,x=n.id,S=e=>c?`${e} ${c}`:e;n.measure({width:!0,height:t.height??(m?`--chart-h-small`:`--chart-h-main`),fit:!!t.expanded&&!t.mobile});let C=i.map(e=>e.count).filter(e=>e!=null),w=C.length===i.length?C.reduce((e,t)=>e+t,0):null,{max:T,ticks:O}=M(Math.max(...C,1)),k=ee(O,n.width,{fontFamily:n.fontFamily}),A=D(t),j=D(t,{left:k.width,bottom:A.bottom+(s?ot:0)}),N=j.height-j.bottom,F=j.width-j.right,R=i[0]?.from??0,B=i[i.length-1],W=i.length>1?i[i.length-1].from-i[i.length-2].from:1,K=B?B.to??B.from+W:1,q=e=>j.left+(e-R)/Math.max(K-R,2**-52)*(F-j.left),J=i.map(e=>{let t=q(e.from),n=q(e.to??K)-t;return{x:t,width:n,center:t+n/2}}),Y=e=>n.hiddenSeries.includes(e),te=Y(y),X=e=>{let t=i[e].count;return{title:dt(i[e],c),rows:te?[]:[{label:y,value:t==null?`geen gegevens`:d(t),color:b},...t!=null&&w!=null&&w>0?[{label:`Aandeel`,value:v(t/w*100,1),color:b}]:[]]}},ne=ae(n,i.length,e=>({x:J[e].center,y:i[e].count==null?j.top:E(i[e].count,T,j),content:X(e)})),Z=B?.to==null&&i.length>0,Q=[...i.slice(0,Z?-1:void 0).map(e=>e.from),...Z?[]:B?[B.to]:[]].map(e=>({label:ut(e),x:q(e)})),re=Z?{label:`${ut(B.from)}+`,x:J[J.length-1].center}:null,ie=Q.length>1?(Q[Q.length-1].x-Q[0].x)/(Q.length-1):1,se=Math.max(1,Math.ceil(st/ie)),$=L(Q.filter((e,t)=>t%se===0),n.fontFamily),ce=(e,t)=>Math.abs(t.x-e.x)<(h(e.label,n.fontFamily)+h(t.label,n.fontFamily))/2+ct,le=Z?re:Q[Q.length-1];le&&!$.includes(le)&&($.length&&ce($[$.length-1],le)&&($=$.slice(0,-1)),Z||($=[...$,le]));let ue=Z?B.from:K,de=e=>e!=null&&e>=R&&e<=ue,fe=[...de(u)?[{key:z,x:q(u),text:e.medianLabel??S(`mediaan ${ut(u)}`),bold:!0,dashed:!1}]:[],...de(f)?[{key:P,x:q(f),text:e.thresholdLabel??S(`norm ${ut(f)}`),bold:!1,dashed:!0}]:[]],pe=ft(fe,j,n.fontFamily),me=e=>e.charAt(0).toUpperCase()+e.slice(1),he=[{label:y,color:b,shape:`square`,fixed:fe.length===0,hidden:te},...de(u)?[{label:me(e.medianLabel??`Mediaan`),color:`var(--color-chart-emphasis)`,shape:`line`,key:z,hidden:Y(z)}]:[],...de(f)?[{label:me(e.thresholdLabel??`Norm`),color:`var(--color-chart-emphasis)`,shape:`dashed`,key:P,hidden:Y(P)}]:[]],ge=e=>{let t=J[e],n=i[e].count;if(n==null)return l`<rect class="lintje-chart__missing" x=${t.x} y=${j.top} width=${t.width}
-                       height=${Math.max(0,N-j.top)} fill="url(#hatch-${x})" />`;let r=E(n,T,j);return l`
-      <g class="lintje-chart__bar-group" ${o(U(e,i.length))}>
-        <rect class="lintje-chart__bar lintje-chart__segment" x=${t.x} y=${r} width=${t.width}
-              height=${Math.max(0,N-r)} fill=${b} />
+  `}var ot=16,st=56,ct=8,lt=18;function ut(e){return l(e,+!Number.isInteger(e))}function dt(e,t){let n=t?` ${t}`:``;return e.to==null?`${ut(e.from)}${n} of meer`:`${ut(e.from)} tot ${ut(e.to)}${n}`}function ft(e,t,n=``){let r=t.width,i=e.map(e=>{let t=p(e.text,n,e.bold?700:400),i=e.x+6+t<=r;return{x:i?e.x+6:e.x-6,anchor:i?`start`:`end`,left:i?e.x+6:e.x-6-t,right:i?e.x+6+t:e.x-6}}),a=i.length===2?+(e[1].x>=e[0].x):-1,o=i.length===2&&i[0].left<i[1].right+ct&&i[1].left<i[0].right+ct;return i.map((e,n)=>({x:e.x,y:t.top+12+(o&&n===a?lt:0),anchor:e.anchor}))}function pt(t,n){let{controller:r,description:i}=n,{bins:a,axisTitle:o,xTitle:c,unit:u,median:d,threshold:_,small:v=!1}=t,y=t.label??`Aantal`,b=H(t.color)??`var(--color-chart-default)`,x=r.id,S=e=>u?`${e} ${u}`:e;r.measure({width:!0,height:n.height??(v?`--chart-h-small`:`--chart-h-main`),fit:!!n.expanded&&!n.mobile});let C=a.map(e=>e.count).filter(e=>e!=null),w=C.length===a.length?C.reduce((e,t)=>e+t,0):null,{max:T,ticks:O}=M(Math.max(...C,1)),k=ee(O,r.width,{fontFamily:r.fontFamily}),A=D(n),j=D(n,{left:k.width,bottom:A.bottom+(c?ot:0)}),N=j.height-j.bottom,F=j.width-j.right,R=a[0]?.from??0,B=a[a.length-1],W=a.length>1?a[a.length-1].from-a[a.length-2].from:1,K=B?B.to??B.from+W:1,q=e=>j.left+(e-R)/Math.max(K-R,2**-52)*(F-j.left),J=a.map(e=>{let t=q(e.from),n=q(e.to??K)-t;return{x:t,width:n,center:t+n/2}}),Y=e=>r.hiddenSeries.includes(e),te=Y(y),X=e=>{let t=a[e].count;return{title:dt(a[e],u),rows:te?[]:[{label:y,value:t==null?`geen gegevens`:l(t),color:b},...t!=null&&w!=null&&w>0?[{label:`Aandeel`,value:g(t/w*100,1),color:b}]:[]]}},ne=ae(r,a.length,e=>({x:J[e].center,y:a[e].count==null?j.top:E(a[e].count,T,j),content:X(e)})),Z=B?.to==null&&a.length>0,Q=[...a.slice(0,Z?-1:void 0).map(e=>e.from),...Z?[]:B?[B.to]:[]].map(e=>({label:ut(e),x:q(e)})),re=Z?{label:`${ut(B.from)}+`,x:J[J.length-1].center}:null,ie=Q.length>1?(Q[Q.length-1].x-Q[0].x)/(Q.length-1):1,se=Math.max(1,Math.ceil(st/ie)),$=L(Q.filter((e,t)=>t%se===0),r.fontFamily),ce=(e,t)=>Math.abs(t.x-e.x)<(p(e.label,r.fontFamily)+p(t.label,r.fontFamily))/2+ct,le=Z?re:Q[Q.length-1];le&&!$.includes(le)&&($.length&&ce($[$.length-1],le)&&($=$.slice(0,-1)),Z||($=[...$,le]));let ue=Z?B.from:K,de=e=>e!=null&&e>=R&&e<=ue,fe=[...de(d)?[{key:z,x:q(d),text:t.medianLabel??S(`mediaan ${ut(d)}`),bold:!0,dashed:!1}]:[],...de(_)?[{key:P,x:q(_),text:t.thresholdLabel??S(`norm ${ut(_)}`),bold:!1,dashed:!0}]:[]],pe=ft(fe,j,r.fontFamily),me=e=>e.charAt(0).toUpperCase()+e.slice(1),he=[{label:y,color:b,shape:`square`,fixed:fe.length===0,hidden:te},...de(d)?[{label:me(t.medianLabel??`Mediaan`),color:`var(--color-chart-emphasis)`,shape:`line`,key:z,hidden:Y(z)}]:[],...de(_)?[{label:me(t.thresholdLabel??`Norm`),color:`var(--color-chart-emphasis)`,shape:`dashed`,key:P,hidden:Y(P)}]:[]],ge=t=>{let n=J[t],r=a[t].count;if(r==null)return f`<rect class="lintje-chart__missing" x=${n.x} y=${j.top} width=${n.width}
+                       height=${Math.max(0,N-j.top)} fill="url(#hatch-${x})" />`;let i=E(r,T,j);return f`
+      <g class="lintje-chart__bar-group" ${e(U(t,a.length))}>
+        <rect class="lintje-chart__bar lintje-chart__segment" x=${n.x} y=${i} width=${n.width}
+              height=${Math.max(0,N-i)} fill=${b} />
       </g>
-    `},_e=n.hoverIndex,ve=_e==null?null:i[_e]?.count,ye=[l`<g class="lintje-chart__series ${te?`is-off`:``}">${i.map((e,t)=>ge(t))}</g>`,_e!=null&&ve!=null&&!te?l`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
+    `},_e=r.hoverIndex,ve=_e==null?null:a[_e]?.count,ye=[f`<g class="lintje-chart__series ${te?`is-off`:``}">${a.map((e,t)=>ge(t))}</g>`,_e!=null&&ve!=null&&!te?f`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
                   x=${J[_e].x} y=${E(ve,T,j)} width=${J[_e].width}
-                  height=${Math.max(0,N-E(ve,T,j))} fill=${b} />`:g,$.map(e=>l`
+                  height=${Math.max(0,N-E(ve,T,j))} fill=${b} />`:h,$.map(e=>f`
         <line x1=${e.x} x2=${e.x} y1=${N} y2=${N+4}
               stroke="var(--color-chart-zero)" stroke-width="1" />
         <text x=${e.x} y=${N+20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
-      `),re?l`<text x=${re.x} y=${N+20} text-anchor="middle" class="lintje-chart__axis-label">${re.label}</text>`:g,fe.map((e,t)=>{let n=pe[t];return l`
+      `),re?f`<text x=${re.x} y=${N+20} text-anchor="middle" class="lintje-chart__axis-label">${re.label}</text>`:h,fe.map((e,t)=>{let n=pe[t];return f`
         <g class="lintje-chart__series ${Y(e.key)?`is-off`:``}">
           <g class="lintje-chart__reference">
             <line x1=${e.x} x2=${e.x} y1=${j.top} y2=${N}
                   stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed?1:1.5}
-                  stroke-dasharray=${e.dashed?`3 3`:g} />
+                  stroke-dasharray=${e.dashed?`3 3`:h} />
             <text x=${n.x} y=${n.y} text-anchor=${n.anchor}
                   class=${e.bold?`lintje-chart__data-label lintje-chart__data-label--halo`:`lintje-chart__axis-label lintje-chart__axis-label--halo`}>${e.text}</text>
           </g>
         </g>
-      `}),J.map((e,t)=>l`
+      `}),J.map((e,t)=>f`
         <rect x=${e.x} y=${j.top} width=${e.width} height=${Math.max(0,N-j.top)}
               fill="transparent"
-              @mousemove=${e=>n.hoverAt(t,e,X(t))}
-              @mouseleave=${()=>n.hoverAt(null)} />
-      `)];return p`
-    <div class="lintje-chart-wrap ${m?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)}>
-      ${I({items:he,onToggle:e=>n.toggleSeries(e)})}
-      ${V({fontFamily:n.fontFamily,id:x,ticks:O,max:T,area:j,axisTitle:a,xTitle:s,description:r,formatTick:k.format,keys:ne},ye)}
-      ${G(n)}
-      ${oe(n)}
+              @mousemove=${e=>r.hoverAt(t,e,X(t))}
+              @mouseleave=${()=>r.hoverAt(null)} />
+      `)];return s`
+    <div class="lintje-chart-wrap ${v?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)}>
+      ${I({items:he,onToggle:e=>r.toggleSeries(e)})}
+      ${V({fontFamily:r.fontFamily,id:x,ticks:O,max:T,area:j,axisTitle:o,xTitle:c,description:i,formatTick:k.format,keys:ne},ye)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}var mt=16,ht=6,gt=18,_t=16,vt=3,yt=4,bt=8,xt=40,St=.7,Ct=420,wt=12,Tt=2;function Et(e){let t=new Set(e.series.map(e=>e.color).filter(Y)),n=N.filter(e=>!t.has(e)),r=0;return e.series.map(t=>{let i=e.axes.map((e,n)=>t.values[n]??null);if(t.comparison)return{label:t.label,values:i,comparison:!0,color:`var(--color-chart-secondary)`};let a=Y(t.color)?t.color:n[r++%n.length];return{label:t.label,values:i,comparison:!1,color:H(t.color??a),symbol:a}})}function Dt(e){let t=e.length,n=e.findIndex(e=>e==null);if(n===-1)return{closed:!0,runs:[e.map((e,t)=>t)]};let r=[],i=[];for(let a=1;a<=t;a++){let o=(n+a)%t;e[o]==null?(i.length&&r.push(i),i=[]):i.push(o)}return i.length&&r.push(i),{closed:!1,runs:r}}function Ot(e,t=e/5){let n=[];for(let r=1;r*t<e-t*1e-6;r++)n.push(Math.round(r*t*1e6)/1e6);return[...n,e]}var kt=e=>Number.isInteger(e)?0:String(e).split(`.`)[1]?.length??0;function At(e,t,n){let r=e.area??`emphasis`,i=t.filter(e=>!e.comparison);return new Set(i.filter(e=>e.complete&&r!==`never`&&(r===`always`||i.length===1||e.label===n)).map(e=>e.label))}function jt(e,t){let{controller:n,description:r,mobile:i=!1}=t,{axes:a,unit:s,threshold:c,small:l=!1}=e,u=a.length,f=Et(e),m=e=>n.hiddenSeries.includes(e.label),h=n.hiddenSeries.includes(P),g=f.length<2&&c==null,v=f.filter(e=>!m(e)),y=f.filter(e=>!e.comparison),b=v.filter(e=>!e.comparison),x=Math.min(2,Math.max(0,...f.flatMap(e=>e.values.filter(e=>e!=null)).map(kt),...c==null?[]:[kt(c)])),S=e=>d(e,x),C=e=>`${S(e)}${s?` ${s}`:``}`,w=e=>{let t=Math.round(e*10**x)/10**x;return t===0?S(0):`${t>0?`+`:`−`}${S(Math.abs(t))}`},T=b.length>1&&b.some(e=>e.label===n.emphasis)?n.emphasis:null,E=At(e,v.map(e=>({...e,complete:e.values.every(e=>e!=null)})),T),D=a.map((e,t)=>f.some(e=>e.values[t]==null)),O=e.dataLabels!==!1&&y.length===1,k=O&&!m(y[0]),A=[...f.map(e=>e.comparison?{label:e.label,color:e.color,shape:`line`,hidden:m(e),fixed:g}:{label:e.label,color:e.color,shape:`line`,symbol:e.symbol,hidden:m(e),fixed:g}),...c==null?[]:[{key:P,label:e.thresholdLabel??`Norm ${C(c)}`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:h}],...D.some(Boolean)?[{label:`Geen gegevens`,shape:`hatch`,fixed:!0}]:[]];function j(t){let n=v.map(e=>{let n=e.values[t];return{label:e.label,value:n==null?`geen gegevens`:C(n),color:e.color,symbol:e.symbol,marker:e.comparison?`line`:void 0}});c!=null&&!h&&n.push({label:e.thresholdLabel??`Norm`,value:C(c),color:`var(--color-chart-emphasis)`,marker:`dashed`});let[r]=b,i=b.length===1?r.values[t]:null;if(i!=null){let e=v.find(e=>e.comparison),r=e?.values[t];e&&r!=null&&n.push({label:`t.o.v. ${e.label}`,value:w(i-r),divider:!0}),c!=null&&!h&&n.push({label:`t.o.v. norm`,value:w(i-c),divider:!(e&&r!=null)})}return{title:a[t],rows:n}}let{width:M,height:N,body:F,at:L}=(i?Nt:Mt)({spec:e,controller:n,options:t,layers:f,shown:v,fills:E,emphasis:T,missing:D,reserve:O,labelled:k,hidden:m,normOff:h,format:S,contentAt:j}),R=ae(n,u,e=>({...L(e),content:j(e)}));return p`
-    <div class="lintje-chart-wrap ${l?`lintje-chart--small`:``}"
-         ${_(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
-         @keydown=${e=>n.dismiss(e)}>
-      ${I({items:A,onToggle:e=>n.toggleSeries(e),onEmphasis:y.length>1?e=>n.emphasise(e):void 0})}
+  `}var mt=16,ht=6,gt=18,_t=16,vt=3,yt=4,bt=8,xt=40,St=.7,Ct=420,wt=12,Tt=2;function Et(e){let t=new Set(e.series.map(e=>e.color).filter(Y)),n=N.filter(e=>!t.has(e)),r=0;return e.series.map(t=>{let i=e.axes.map((e,n)=>t.values[n]??null);if(t.comparison)return{label:t.label,values:i,comparison:!0,color:`var(--color-chart-secondary)`};let a=Y(t.color)?t.color:n[r++%n.length];return{label:t.label,values:i,comparison:!1,color:H(t.color??a),symbol:a}})}function Dt(e){let t=e.length,n=e.findIndex(e=>e==null);if(n===-1)return{closed:!0,runs:[e.map((e,t)=>t)]};let r=[],i=[];for(let a=1;a<=t;a++){let o=(n+a)%t;e[o]==null?(i.length&&r.push(i),i=[]):i.push(o)}return i.length&&r.push(i),{closed:!1,runs:r}}function Ot(e,t=e/5){let n=[];for(let r=1;r*t<e-t*1e-6;r++)n.push(Math.round(r*t*1e6)/1e6);return[...n,e]}var kt=e=>Number.isInteger(e)?0:String(e).split(`.`)[1]?.length??0;function At(e,t,n){let r=e.area??`emphasis`,i=t.filter(e=>!e.comparison);return new Set(i.filter(e=>e.complete&&r!==`never`&&(r===`always`||i.length===1||e.label===n)).map(e=>e.label))}function jt(t,n){let{controller:r,description:i,mobile:a=!1}=n,{axes:o,unit:c,threshold:u,small:d=!1}=t,f=o.length,p=Et(t),h=e=>r.hiddenSeries.includes(e.label),g=r.hiddenSeries.includes(P),_=p.length<2&&u==null,v=p.filter(e=>!h(e)),y=p.filter(e=>!e.comparison),b=v.filter(e=>!e.comparison),x=Math.min(2,Math.max(0,...p.flatMap(e=>e.values.filter(e=>e!=null)).map(kt),...u==null?[]:[kt(u)])),S=e=>l(e,x),C=e=>`${S(e)}${c?` ${c}`:``}`,w=e=>{let t=Math.round(e*10**x)/10**x;return t===0?S(0):`${t>0?`+`:`−`}${S(Math.abs(t))}`},T=b.length>1&&b.some(e=>e.label===r.emphasis)?r.emphasis:null,E=At(t,v.map(e=>({...e,complete:e.values.every(e=>e!=null)})),T),D=o.map((e,t)=>p.some(e=>e.values[t]==null)),O=t.dataLabels!==!1&&y.length===1,k=O&&!h(y[0]),A=[...p.map(e=>e.comparison?{label:e.label,color:e.color,shape:`line`,hidden:h(e),fixed:_}:{label:e.label,color:e.color,shape:`line`,symbol:e.symbol,hidden:h(e),fixed:_}),...u==null?[]:[{key:P,label:t.thresholdLabel??`Norm ${C(u)}`,color:`var(--color-chart-emphasis)`,shape:`dashed`,hidden:g}],...D.some(Boolean)?[{label:`Geen gegevens`,shape:`hatch`,fixed:!0}]:[]];function j(e){let n=v.map(t=>{let n=t.values[e];return{label:t.label,value:n==null?`geen gegevens`:C(n),color:t.color,symbol:t.symbol,marker:t.comparison?`line`:void 0}});u!=null&&!g&&n.push({label:t.thresholdLabel??`Norm`,value:C(u),color:`var(--color-chart-emphasis)`,marker:`dashed`});let[r]=b,i=b.length===1?r.values[e]:null;if(i!=null){let t=v.find(e=>e.comparison),r=t?.values[e];t&&r!=null&&n.push({label:`t.o.v. ${t.label}`,value:w(i-r),divider:!0}),u!=null&&!g&&n.push({label:`t.o.v. norm`,value:w(i-u),divider:!(t&&r!=null)})}return{title:o[e],rows:n}}let{width:M,height:N,body:F,at:L}=(a?Nt:Mt)({spec:t,controller:r,options:n,layers:p,shown:v,fills:E,emphasis:T,missing:D,reserve:O,labelled:k,hidden:h,normOff:g,format:S,contentAt:j}),R=ae(r,f,e=>({...L(e),content:j(e)}));return s`
+    <div class="lintje-chart-wrap ${d?`lintje-chart--small`:``}"
+         ${m(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${e=>r.dismiss(e)}>
+      ${I({items:A,onToggle:e=>r.toggleSeries(e),onEmphasis:y.length>1?e=>r.emphasise(e):void 0})}
       <figure class="lintje-chart">
         <svg viewBox="0 0 ${M} ${N}" width=${M} height=${N}
-             class="lintje-chart__svg lintje-radar ${i?`lintje-radar--rows`:``}"
-             ${o({height:`${N}px`})}
-             role=${W(!1)} aria-labelledby="${n.id}-desc" tabindex="0"
+             class="lintje-chart__svg lintje-radar ${a?`lintje-radar--rows`:``}"
+             ${e({height:`${N}px`})}
+             role=${W(!1)} aria-labelledby="${r.id}-desc" tabindex="0"
              @keydown=${R.keydown} @focus=${R.focus} @blur=${R.blur}>
-          <desc id="${n.id}-desc">${r}</desc>
+          <desc id="${r.id}-desc">${i}</desc>
           <defs>
-            <pattern id="hatch-${n.id}" width="6" height="6" patternUnits="userSpaceOnUse"
+            <pattern id="hatch-${r.id}" width="6" height="6" patternUnits="userSpaceOnUse"
                      patternTransform="rotate(45)">
               <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
             </pattern>
@@ -567,87 +567,87 @@ import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as
           ${F}
         </svg>
       </figure>
-      ${G(n)}
-      ${oe(n)}
+      ${G(r)}
+      ${oe(r)}
     </div>
-  `}function Mt({spec:e,controller:t,options:n,layers:r,shown:i,fills:a,emphasis:s,missing:c,reserve:u,labelled:f,hidden:p,normOff:m,format:_,contentAt:v}){let{axes:y,max:b,threshold:x,small:S=!1}=e,C=y.length,w=S?`--chart-h-small`:`--chart-h-main`;t.measure({width:!0,height:n.height??w,fit:!!n.expanded});let T=t.width,E=n.height??(n.expanded||S?t.height:Math.max(t.height,Math.min(Ct,Math.round(T*St)))),D=e=>-Math.PI/2+2*Math.PI*e/C,O=t.fontFamily,k=e=>h(e,O)*14/12,A=Math.max(0,...y.map((e,t)=>Math.abs(Math.cos(D(t)))<.1?0:k(e)+ht+2)),j=24+(u?_t:0),M=Math.max(xt,Math.min(T/2-A-mt,E/2-j-mt)),N=T/2,P=E/2,F=(e,t)=>({x:N+t*Math.cos(D(e)),y:P+t*Math.sin(D(e))}),I=e=>Math.max(0,Math.min(e,b))/b*M,L=e=>e.map(e=>`${e.x},${e.y}`).join(` `),z=e=>L(y.map((t,n)=>F(n,I(e)))),B=Ot(b,e.step),V=Math.max(0,...B.map(kt)),H=t.hoverIndex,U=e=>{let t=i.map(t=>t.values[e]).filter(e=>e!=null);return F(e,t.length?I(Math.max(...t)):M/2)},W=[...r.filter(e=>e.comparison),...r.filter(e=>!e.comparison)],G=e=>s!=null&&e.label!==s,K=o({"transform-origin":`${N}px ${P}px`}),q=y.map((e,t)=>{let n=Math.cos(D(t)),i=Math.sin(D(t)),a=F(t,M+mt+ht),o=Math.abs(n)<.1,s=o?`middle`:n>0?`start`:`end`,c;c=o&&i<0?a.y-4-(u?_t:0):o?a.y+12:u?a.y-2:a.y+5;let d=u?r.find(e=>!e.comparison)?.values[t]:void 0;return l`
+  `}function Mt({spec:t,controller:n,options:r,layers:i,shown:a,fills:o,emphasis:s,missing:c,reserve:u,labelled:d,hidden:m,normOff:g,format:_,contentAt:v}){let{axes:y,max:b,threshold:x,small:S=!1}=t,C=y.length,w=S?`--chart-h-small`:`--chart-h-main`;n.measure({width:!0,height:r.height??w,fit:!!r.expanded});let T=n.width,E=r.height??(r.expanded||S?n.height:Math.max(n.height,Math.min(Ct,Math.round(T*St)))),D=e=>-Math.PI/2+2*Math.PI*e/C,O=n.fontFamily,k=e=>p(e,O)*14/12,A=Math.max(0,...y.map((e,t)=>Math.abs(Math.cos(D(t)))<.1?0:k(e)+ht+2)),j=24+(u?_t:0),M=Math.max(xt,Math.min(T/2-A-mt,E/2-j-mt)),N=T/2,P=E/2,F=(e,t)=>({x:N+t*Math.cos(D(e)),y:P+t*Math.sin(D(e))}),I=e=>Math.max(0,Math.min(e,b))/b*M,L=e=>e.map(e=>`${e.x},${e.y}`).join(` `),z=e=>L(y.map((t,n)=>F(n,I(e)))),B=Ot(b,t.step),V=Math.max(0,...B.map(kt)),H=n.hoverIndex,U=e=>{let t=a.map(t=>t.values[e]).filter(e=>e!=null);return F(e,t.length?I(Math.max(...t)):M/2)},W=[...i.filter(e=>e.comparison),...i.filter(e=>!e.comparison)],G=e=>s!=null&&e.label!==s,K=e({"transform-origin":`${N}px ${P}px`}),q=y.map((e,t)=>{let n=Math.cos(D(t)),r=Math.sin(D(t)),a=F(t,M+mt+ht),o=Math.abs(n)<.1,s=o?`middle`:n>0?`start`:`end`,c;c=o&&r<0?a.y-4-(u?_t:0):o?a.y+12:u?a.y-2:a.y+5;let l=u?i.find(e=>!e.comparison)?.values[t]:void 0;return f`
       <text x=${a.x} y=${c} text-anchor=${s} class="lintje-radar__name">${e}</text>
-      ${u?l`<g class="lintje-chart__series ${f?``:`is-off`}">
+      ${u?f`<g class="lintje-chart__series ${d?``:`is-off`}">
               <text x=${a.x} y=${c+_t} text-anchor=${s}
-                    class="lintje-chart__data-label lintje-radar__value ${d==null?`lintje-radar__no-value`:``}">
-                ${d==null?`geen gegevens`:_(d)}</text>
-            </g>`:g}
-    `}),J=(e,t)=>{let n=`lintje-chart__series ${p(e)?`is-off`:``}`,r=e.values.map((e,t)=>e==null?null:F(t,I(e)));if(t===`area`)return e.comparison||r.some(e=>e==null)?g:l`<g class=${n}><g class="lintje-radar__layer" ${K}>
-        <polygon class="lintje-radar__area ${a.has(e.label)?`is-filled`:``}"
+                    class="lintje-chart__data-label lintje-radar__value ${l==null?`lintje-radar__no-value`:``}">
+                ${l==null?`geen gegevens`:_(l)}</text>
+            </g>`:h}
+    `}),J=(e,t)=>{let n=`lintje-chart__series ${m(e)?`is-off`:``}`,r=e.values.map((e,t)=>e==null?null:F(t,I(e)));if(t===`area`)return e.comparison||r.some(e=>e==null)?h:f`<g class=${n}><g class="lintje-radar__layer" ${K}>
+        <polygon class="lintje-radar__area ${o.has(e.label)?`is-filled`:``}"
                  points=${L(r)} fill=${e.color} />
-      </g></g>`;let{closed:i,runs:o}=Dt(e.values),s=e.comparison?void 0:R(e.color),c=o.map(t=>{let n=t.map(e=>r[e]),a=L(i?[...n,n[0]]:n);return n.length===1?e.comparison?l`<circle cx=${n[0].x} cy=${n[0].y} r="2.5" fill=${e.color} />`:g:l`
-        ${s?l`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${s} />`:g}
+      </g></g>`;let{closed:i,runs:a}=Dt(e.values),s=e.comparison?void 0:R(e.color),c=a.map(t=>{let n=t.map(e=>r[e]),a=L(i?[...n,n[0]]:n);return n.length===1?e.comparison?f`<circle cx=${n[0].x} cy=${n[0].y} r="2.5" fill=${e.color} />`:h:f`
+        ${s?f`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${a} stroke=${s} />`:h}
         <polyline class="lintje-chart__line" points=${a} stroke=${e.color} />
-      `}),u=e.symbol?r.map(t=>t?l`<path d=${te(e.symbol,vt,t.x,t.y)} fill=${e.color}
-                        stroke=${s??g} stroke-width=${s?1:g} />`:g):g;return t===`lift`?l`<g class="lintje-radar__lift" aria-hidden="true">${c}${u}</g>`:l`<g class=${n}><g class="lintje-radar__layer ${G(e)?`is-muted`:``}" ${K}>
-      ${c}${u}
-    </g></g>`},Y=e=>{let t=M+mt,n=Math.PI/C,r=e=>`${N+t*Math.cos(e)},${P+t*Math.sin(e)}`;return`${N},${P} ${r(D(e)-n)} ${r(D(e))} ${r(D(e)+n)}`};return{width:T,height:E,body:[B.map(e=>l`<polygon class="lintje-radar__ring" points=${z(e)} />`),c.map((e,n)=>{if(!e)return g;let r=D(n),i=-Math.sin(r)*5,a=Math.cos(r)*5,o=F(n,M);return l`<polygon class="lintje-radar__gap" fill="url(#hatch-${t.id})"
-                          points=${`${N+i},${P+a} ${o.x+i},${o.y+a} ${o.x-i},${o.y-a} ${N-i},${P-a}`} />`}),y.map((e,t)=>{let n=F(t,M+mt);return l`<line class="lintje-radar__spoke ${H===t?`is-active`:``}"
-                       x1=${N} y1=${P} x2=${n.x} y2=${n.y} />`}),B.map(e=>{let t=F(0,I(e));return l`<text x=${t.x+bt/2} y=${t.y+4}
-                       class="lintje-chart__axis-label lintje-chart__axis-label--halo">${d(e,V)}</text>`}),x==null?g:l`<g class="lintje-chart__series ${m?`is-off`:``}">
+      `}),l=e.symbol?r.map(t=>t?f`<path d=${te(e.symbol,vt,t.x,t.y)} fill=${e.color}
+                        stroke=${s??h} stroke-width=${s?1:h} />`:h):h;return t===`lift`?f`<g class="lintje-radar__lift" aria-hidden="true">${c}${l}</g>`:f`<g class=${n}><g class="lintje-radar__layer ${G(e)?`is-muted`:``}" ${K}>
+      ${c}${l}
+    </g></g>`},Y=e=>{let t=M+mt,n=Math.PI/C,r=e=>`${N+t*Math.cos(e)},${P+t*Math.sin(e)}`;return`${N},${P} ${r(D(e)-n)} ${r(D(e))} ${r(D(e)+n)}`};return{width:T,height:E,body:[B.map(e=>f`<polygon class="lintje-radar__ring" points=${z(e)} />`),c.map((e,t)=>{if(!e)return h;let r=D(t),i=-Math.sin(r)*5,a=Math.cos(r)*5,o=F(t,M);return f`<polygon class="lintje-radar__gap" fill="url(#hatch-${n.id})"
+                          points=${`${N+i},${P+a} ${o.x+i},${o.y+a} ${o.x-i},${o.y-a} ${N-i},${P-a}`} />`}),y.map((e,t)=>{let n=F(t,M+mt);return f`<line class="lintje-radar__spoke ${H===t?`is-active`:``}"
+                       x1=${N} y1=${P} x2=${n.x} y2=${n.y} />`}),B.map(e=>{let t=F(0,I(e));return f`<text x=${t.x+bt/2} y=${t.y+4}
+                       class="lintje-chart__axis-label lintje-chart__axis-label--halo">${l(e,V)}</text>`}),x==null?h:f`<g class="lintje-chart__series ${g?`is-off`:``}">
           <polygon class="lintje-chart__reference lintje-radar__norm" points=${z(x)} />
-        </g>`,W.map(e=>J(e,`area`)),W.map(e=>J(e,`line`)),s==null?g:J(r.find(e=>e.label===s),`lift`),q,H==null?g:i.map(e=>{let t=e.values[H];if(t==null)return g;let n=F(H,I(t)),r=e.comparison?void 0:R(e.color),i=te(e.symbol,yt,n.x,n.y);return l`
+        </g>`,W.map(e=>J(e,`area`)),W.map(e=>J(e,`line`)),s==null?h:J(i.find(e=>e.label===s),`lift`),q,H==null?h:a.map(e=>{let t=e.values[H];if(t==null)return h;let n=F(H,I(t)),r=e.comparison?void 0:R(e.color),i=te(e.symbol,yt,n.x,n.y);return f`
             <path class="lintje-chart__hover-point" d=${i} fill=${e.color} />
-            ${r?l`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />`:g}
-          `}),l`<g @mouseleave=${()=>t.hoverAt(null)}>
-      ${y.map((e,n)=>l`<polygon class="lintje-chart__hit" points=${Y(n)}
-                               @mousemove=${e=>t.hoverAt(n,e,v(n))} />`)}
-    </g>`],at:U}}function Nt({spec:e,controller:t,layers:n,shown:r,reserve:i,labelled:a,hidden:s,normOff:c,format:u,contentAt:f}){let{axes:p,max:m,threshold:_}=e;t.measure({width:!0});let v=t.width,y=v-1,b=n.filter(e=>!e.comparison),x=[...b.map(e=>({layer:e,size:b.length===1?8:6})),...n.filter(e=>e.comparison).map(e=>({layer:e,size:4}))],S=x.reduce((e,t)=>e+t.size,0)+Tt*Math.max(0,x.length-1),C=22+S+wt,w=p.length*C,T=w+16,E=e=>.5+Math.max(0,Math.min(e,m))/m*y,D=t.fontFamily,O=n.find(e=>!e.comparison),k=r.find(e=>!e.comparison),A=t.hoverIndex,j=e=>{let t=k?.values[e];return{x:t==null?v/2:E(t),y:e*C+gt+4}},M=p.map((e,n)=>{let r=n*C,d=r+gt+4,m=i?O?.values[n]:void 0,b=i?m==null?`geen gegevens`:u(m):``,w=i&&m!=null&&_!=null&&m<_,T=`lintje-chart__series ${a?``:`is-off`}`,k=d;return l`
-      <g class="lintje-radar__row ${A===n?`is-active`:``}">
-        <text x="0" y=${r+14} class="lintje-radar__name">${e}</text>
-        ${i?l`<g class=${T}><text x=${v} y=${r+14} text-anchor="end"
-                       class="lintje-chart__data-label lintje-radar__value ${m==null?`lintje-radar__no-value`:``}">${b}</text></g>`:g}
-        ${w?l`<g class=${T}><text x=${v-h(b,D,700)-6} y=${r+14} text-anchor="end"
-                       class="lintje-chart__axis-label lintje-radar__value">onder norm</text></g>`:g}
-        ${x.map(({layer:e,size:r})=>{let i=k;k+=r+Tt;let a=e.values[n],c=s(e)?`is-off`:``;return a==null?l`<rect class="lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${i} width=${y} height=${r}
-                       fill="url(#hatch-${t.id})" />`:l`<rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${i}
-                       width=${Math.max(0,E(a)-.5)} height=${r} fill=${e.color}
-                       ${o(U(n,p.length))} />`})}
-        <line class="lintje-radar__zero" x1="0.5" x2="0.5" y1=${d-2} y2=${d+S+2} />
-        ${_==null?g:l`<g class="lintje-chart__series ${c?`is-off`:``}">
+            ${r?f`<path class="lintje-chart__hover-casing" d=${i} stroke=${r} />`:h}
+          `}),f`<g @mouseleave=${()=>n.hoverAt(null)}>
+      ${y.map((e,t)=>f`<polygon class="lintje-chart__hit" points=${Y(t)}
+                               @mousemove=${e=>n.hoverAt(t,e,v(t))} />`)}
+    </g>`],at:U}}function Nt({spec:t,controller:n,layers:r,shown:i,reserve:a,labelled:o,hidden:s,normOff:c,format:u,contentAt:d}){let{axes:m,max:g,threshold:_}=t;n.measure({width:!0});let v=n.width,y=v-1,b=r.filter(e=>!e.comparison),x=[...b.map(e=>({layer:e,size:b.length===1?8:6})),...r.filter(e=>e.comparison).map(e=>({layer:e,size:4}))],S=x.reduce((e,t)=>e+t.size,0)+Tt*Math.max(0,x.length-1),C=22+S+wt,w=m.length*C,T=w+16,E=e=>.5+Math.max(0,Math.min(e,g))/g*y,D=n.fontFamily,O=r.find(e=>!e.comparison),k=i.find(e=>!e.comparison),A=n.hoverIndex,j=e=>{let t=k?.values[e];return{x:t==null?v/2:E(t),y:e*C+gt+4}},M=m.map((t,r)=>{let i=r*C,l=i+gt+4,g=a?O?.values[r]:void 0,b=a?g==null?`geen gegevens`:u(g):``,w=a&&g!=null&&_!=null&&g<_,T=`lintje-chart__series ${o?``:`is-off`}`,k=l;return f`
+      <g class="lintje-radar__row ${A===r?`is-active`:``}">
+        <text x="0" y=${i+14} class="lintje-radar__name">${t}</text>
+        ${a?f`<g class=${T}><text x=${v} y=${i+14} text-anchor="end"
+                       class="lintje-chart__data-label lintje-radar__value ${g==null?`lintje-radar__no-value`:``}">${b}</text></g>`:h}
+        ${w?f`<g class=${T}><text x=${v-p(b,D,700)-6} y=${i+14} text-anchor="end"
+                       class="lintje-chart__axis-label lintje-radar__value">onder norm</text></g>`:h}
+        ${x.map(({layer:t,size:i})=>{let a=k;k+=i+Tt;let o=t.values[r],c=s(t)?`is-off`:``;return o==null?f`<rect class="lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${a} width=${y} height=${i}
+                       fill="url(#hatch-${n.id})" />`:f`<rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-radar__bar lintje-chart__series ${c}" x="0.5" y=${a}
+                       width=${Math.max(0,E(o)-.5)} height=${i} fill=${t.color}
+                       ${e(U(r,m.length))} />`})}
+        <line class="lintje-radar__zero" x1="0.5" x2="0.5" y1=${l-2} y2=${l+S+2} />
+        ${_==null?h:f`<g class="lintje-chart__series ${c?`is-off`:``}">
                 <line class="lintje-chart__reference lintje-radar__norm" x1=${E(_)} x2=${E(_)}
-                      y1=${d-3} y2=${d+S+3} />
+                      y1=${l-3} y2=${l+S+3} />
               </g>`}
-        <rect class="lintje-chart__hit" x="0" y=${r} width=${v} height=${C}
-              @mousemove=${e=>t.hoverAt(n,e,f(n))} />
+        <rect class="lintje-chart__hit" x="0" y=${i} width=${v} height=${C}
+              @mousemove=${e=>n.hoverAt(r,e,d(r))} />
       </g>
-    `}),N=[0,...Ot(m,e.step)],P=Math.max(0,...N.map(kt)),F=N.map((e,t)=>l`<text x=${E(e)} y=${w+12}
+    `}),N=[0,...Ot(g,t.step)],P=Math.max(0,...N.map(kt)),F=N.map((e,t)=>f`<text x=${E(e)} y=${w+12}
                            text-anchor=${t===0?`start`:t===N.length-1?`end`:`middle`}
-                           class="lintje-chart__axis-label">${d(e,P)}</text>`);return{width:v,height:T,body:l`<g @mouseleave=${()=>t.hoverAt(null)}>${M}</g>${F}`,at:j}}function Pt(e,t){switch(t.controller.follow(e),e.kind){case`line`:return fe(e,t);case`bar`:return he(e,t);case`horizontal-bar`:return _e(e,t);case`target-progress`:return ve(e,t);case`grouped-bar`:return we(e,t);case`stacked-bar`:return Oe(e,t);case`stacked-area`:return Ae(e,t);case`pie`:return Fe(e,t);case`dual-axis`:return Ie(e,t);case`scatter`:return Ke(e,t);case`heatmap`:return at(e,t);case`histogram`:return pt(e,t);case`radar`:return jt(e,t)}}var Ft=`.lintje-chart__view{flex:none}@media screen and (width<=767px){.lintje-chart__view{--h-control:var(--h-touch);width:100%}}`,It=`.lintje-chart__svg, .lintje-pie-chart__svg`,Lt=[{value:`chart`,label:`Grafiek`},{value:`table`,label:`Tabel`}];function Rt(e){return(e??``).normalize(`NFD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-+|-+$/g,``)||`grafiek`}function zt(e){switch(e.kind){case`line`:case`stacked-area`:case`dual-axis`:case`scatter`:return`line`;case`pie`:return e.donut?`donut`:`pie`;case`radar`:return`pie`;case`heatmap`:return`heatmap`;default:return`bar`}}function Bt(e){switch(e.kind){case`horizontal-bar`:case`target-progress`:return e.rows.length?`${ge(e.rows.length)}px`:void 0;case`pie`:case`heatmap`:return;default:return e.small?`var(--chart-h-small)`:void 0}}function Vt(e){switch(e.kind){case`line`:{let t=e.events??[],n=e=>t.filter(t=>t.index===e).map(e=>e.label).join(`; `);return[[``,...e.series.map(e=>e.label),...t.length?[`Gebeurtenis`]:[]],...e.labels.map((r,i)=>[r,...e.series.map(e=>e.values[i]),...t.length?[n(i)]:[]])]}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`stacked-area`:return[[``,...e.series.map(e=>e.label),`Totaal`],...e.labels.map((t,n)=>{let r=e.series.map(e=>e.values[n]),i=r.some(e=>e==null)?null:Number(r.reduce((e,t)=>e+t,0).toFixed(Ht(r)));return[t,...r,i]})];case`pie`:return[[``,`Aantal`],...e.segments.map(e=>[e.label,e.value])];case`dual-axis`:{let t=e=>e.unit?`${e.label} (${e.unit})`:e.label;return[[``,t(e.left),t(e.right)],...e.labels.map((t,n)=>[t,e.left.values[n],e.right.values[n]])]}case`scatter`:{let t=(e,t)=>{let n=e.charAt(0).toUpperCase()+e.slice(1);return t?`${n} (${t})`:n};return[[`Reeks`,`Naam`,t(e.xTitle,e.xUnit),t(e.axisTitle,e.unit)],...e.series.flatMap(e=>e.points.map(t=>[e.label,t.label,t.x,t.y]))]}case`heatmap`:return[[``,...e.columnLabels],...e.rowLabels.map((t,n)=>[t,...e.values[n]??[]])];case`radar`:{let t=e.threshold==null?[]:[e.thresholdLabel??`Norm`];return[[``,...e.series.map(e=>e.label),...t],...e.axes.map((t,n)=>[t,...e.series.map(e=>e.values[n]??null),...e.threshold==null?[]:[e.threshold]])]}case`histogram`:{let t=t=>e.unit?`${t} (${e.unit})`:t;return[[`Klasse`,t(`Van`),t(`Tot`),`Aantal`],...e.bins.map(t=>[dt(t,e.unit),t.from,t.to??``,t.count])]}}}function Ht(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 Ut(e,t){let[n=[],...r]=Vt(e),i=n.map((e,t)=>{let n=r.map(e=>e[t]??null);return t===0||n.some(e=>typeof e==`string`&&e!==``)?{key:`c${t}`,header:String(e??``),format:`text`,sortable:!1}:{key:`c${t}`,header:String(e??``),format:`decimal`,decimals:Ht(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 Wt=class extends C{constructor(...e){super(...e),this.view=`chart`,this.#e=new j(()=>this.requestUpdate()),this.#t=null,this.#n=new i(this)}static{this.styles=[t,e(S),e(a),...X,e(Ft)]}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??Rt(this.data?.title)}csv(){let e=this.data,t=this.downloadName;e&&t!==null&&T(t,Vt(e.chart))}png(){let e=this.data;if(!e)return;let t=this.renderRoot.querySelector(this.expanded?`lintje-modal`:`lintje-tile`)?.querySelector(It);t&&w(this.downloadName??Rt(e.title),t)}expandChanged(e){e?this.#t??=new j(()=>this.requestUpdate()):(this.#t?.detach(),this.#t=null)}render(){let e=this.data;if(!e)return g;let t=this.ready,n=this.#n.matches&&e.mobileSubtitle?e.mobileSubtitle:e.subtitle,r=this.id?`${this.id}-tile`:void 0,i=e.tableSwitch&&t?this.viewSwitch():g,a=this.showsTable;return p`<lintje-tile
-        id=${r??g}
-        span=${e.span??g}
-        heading=${e.title??g}
-        icon=${e.icon??g}
-        subtitle=${n??g}
-        intro=${e.intro??g}
-        footnote=${e.footnote??g}
+                           class="lintje-chart__axis-label">${l(e,P)}</text>`);return{width:v,height:T,body:f`<g @mouseleave=${()=>n.hoverAt(null)}>${M}</g>${F}`,at:j}}function Pt(e,t){switch(t.controller.follow(e),e.kind){case`line`:return fe(e,t);case`bar`:return he(e,t);case`horizontal-bar`:return _e(e,t);case`target-progress`:return ve(e,t);case`grouped-bar`:return we(e,t);case`stacked-bar`:return Oe(e,t);case`stacked-area`:return Ae(e,t);case`pie`:return Fe(e,t);case`dual-axis`:return Ie(e,t);case`scatter`:return Ke(e,t);case`heatmap`:return at(e,t);case`histogram`:return pt(e,t);case`radar`:return jt(e,t)}}var Ft=`.lintje-chart__view{flex:none}@media screen and (width<=767px){.lintje-chart__view{--h-control:var(--h-touch);width:100%}}`,It=`.lintje-chart__svg, .lintje-pie-chart__svg`,Lt=[{value:`chart`,label:`Grafiek`},{value:`table`,label:`Tabel`}];function Rt(e){return(e??``).normalize(`NFD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-+|-+$/g,``)||`grafiek`}function zt(e){switch(e.kind){case`line`:case`stacked-area`:case`dual-axis`:case`scatter`:return`line`;case`pie`:return e.donut?`donut`:`pie`;case`radar`:return`pie`;case`heatmap`:return`heatmap`;default:return`bar`}}function Bt(e){switch(e.kind){case`horizontal-bar`:case`target-progress`:return e.rows.length?`${ge(e.rows.length)}px`:void 0;case`pie`:case`heatmap`:return;default:return e.small?`var(--chart-h-small)`:void 0}}function Vt(e){switch(e.kind){case`line`:{let t=e.events??[],n=e=>t.filter(t=>t.index===e).map(e=>e.label).join(`; `);return[[``,...e.series.map(e=>e.label),...t.length?[`Gebeurtenis`]:[]],...e.labels.map((r,i)=>[r,...e.series.map(e=>e.values[i]),...t.length?[n(i)]:[]])]}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`stacked-area`:return[[``,...e.series.map(e=>e.label),`Totaal`],...e.labels.map((t,n)=>{let r=e.series.map(e=>e.values[n]),i=r.some(e=>e==null)?null:Number(r.reduce((e,t)=>e+t,0).toFixed(Ht(r)));return[t,...r,i]})];case`pie`:return[[``,`Aantal`],...e.segments.map(e=>[e.label,e.value])];case`dual-axis`:{let t=e=>e.unit?`${e.label} (${e.unit})`:e.label;return[[``,t(e.left),t(e.right)],...e.labels.map((t,n)=>[t,e.left.values[n],e.right.values[n]])]}case`scatter`:{let t=(e,t)=>{let n=e.charAt(0).toUpperCase()+e.slice(1);return t?`${n} (${t})`:n};return[[`Reeks`,`Naam`,t(e.xTitle,e.xUnit),t(e.axisTitle,e.unit)],...e.series.flatMap(e=>e.points.map(t=>[e.label,t.label,t.x,t.y]))]}case`heatmap`:return[[``,...e.columnLabels],...e.rowLabels.map((t,n)=>[t,...e.values[n]??[]])];case`radar`:{let t=e.threshold==null?[]:[e.thresholdLabel??`Norm`];return[[``,...e.series.map(e=>e.label),...t],...e.axes.map((t,n)=>[t,...e.series.map(e=>e.values[n]??null),...e.threshold==null?[]:[e.threshold]])]}case`histogram`:{let t=t=>e.unit?`${t} (${e.unit})`:t;return[[`Klasse`,t(`Van`),t(`Tot`),`Aantal`],...e.bins.map(t=>[dt(t,e.unit),t.from,t.to??``,t.count])]}}}function Ht(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 Ut(e,t){let[n=[],...r]=Vt(e),i=n.map((e,t)=>{let n=r.map(e=>e[t]??null);return t===0||n.some(e=>typeof e==`string`&&e!==``)?{key:`c${t}`,header:String(e??``),format:`text`,sortable:!1}:{key:`c${t}`,header:String(e??``),format:`decimal`,decimals:Ht(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 Wt=class extends C{constructor(...e){super(...e),this.view=`chart`,this.#e=new j(()=>this.requestUpdate()),this.#t=null,this.#n=new a(this)}static{this.styles=[t,v(S),v(i),...X,v(Ft)]}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??Rt(this.data?.title)}csv(){let e=this.data,t=this.downloadName;e&&t!==null&&T(t,Vt(e.chart))}png(){let e=this.data;if(!e)return;let t=this.renderRoot.querySelector(this.expanded?`lintje-modal`:`lintje-tile`)?.querySelector(It);t&&w(this.downloadName??Rt(e.title),t)}expandChanged(e){e?this.#t??=new j(()=>this.requestUpdate()):(this.#t?.detach(),this.#t=null)}render(){let e=this.data;if(!e)return h;let t=this.ready,n=this.#n.matches&&e.mobileSubtitle?e.mobileSubtitle:e.subtitle,r=this.id?`${this.id}-tile`:void 0,i=e.tableSwitch&&t?this.viewSwitch():h,a=this.showsTable;return s`<lintje-tile
+        id=${r??h}
+        span=${e.span??h}
+        heading=${e.title??h}
+        icon=${e.icon??h}
+        subtitle=${n??h}
+        intro=${e.intro??h}
+        footnote=${e.footnote??h}
         ?legend-below=${!!e.legendBelow}
         ?expandable=${this.expandable&&t}
         ?download=${this.downloadName!==null&&t}
         state=${e.state??`ready`}
-        message=${e.message??g}
-        last-known=${e.lastKnown??g}
-        content-height=${Bt(e.chart)??g}
+        message=${e.message??h}
+        last-known=${e.lastKnown??h}
+        content-height=${Bt(e.chart)??h}
         @lintje-tile-expand=${e=>{e.stopPropagation(),this.expand(!0)}}
         @lintje-tile-download=${e=>{e.stopPropagation(),this.csv()}}
       >
         ${i}
-        ${e.notice?p`<lintje-announcement
+        ${e.notice?s`<lintje-announcement
               slot="notice"
               compact
               .data=${e.notice}
-            ></lintje-announcement>`:g}
+            ></lintje-announcement>`:h}
         ${this.content()}
       </lintje-tile>
 
-      ${this.renderExpandModal(this.expanded?a?this.table():this.#t?Pt(e.chart,{...this.chartOptions(this.#t),expanded:!0}):g:g,{heading:e.title,subtitle:n,footnote:e.footnote,csv:()=>this.csv(),png:a?void 0:()=>this.png()})}`}content(){let e=this.data;switch(e.state??`ready`){case`loading`:return p`<div slot="loading">
+      ${this.renderExpandModal(this.expanded?a?this.table():this.#t?Pt(e.chart,{...this.chartOptions(this.#t),expanded:!0}):h:h,{heading:e.title,subtitle:n,footnote:e.footnote,csv:()=>this.csv(),png:a?void 0:()=>this.png()})}`}content(){let e=this.data;switch(e.state??`ready`){case`loading`:return s`<div slot="loading">
           ${ne({kind:zt(e.chart),height:Bt(e.chart),status:!1})}
-        </div>`;case`empty`:case`error`:return g;default:return this.showsTable?this.table():Pt(e.chart,this.chartOptions(this.#e))}}viewSwitch(){let e=this.#n.matches;return p`<lintje-segmented
+        </div>`;case`empty`:case`error`:return h;default:return this.showsTable?this.table():Pt(e.chart,this.chartOptions(this.#e))}}viewSwitch(){let e=this.#n.matches;return s`<lintje-segmented
       class="lintje-chart__view"
       slot=${e?`notice`:`actions`}
       label="Weergave"
@@ -656,8 +656,8 @@ import{$t as e,F as t,H as n,I as r,Jt as i,O as a,St as o,Zt as s,_ as c,an as
       .value=${this.view}
       .options=${Lt}
       @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 p`<lintje-data-table
+    ></lintje-segmented>`}table(){let e=this.data,t=e.title?`${e.title}, als tabel`:`Grafiek als tabel`;return s`<lintje-data-table
       class="lintje-chart__table"
       bare
       .data=${Ut(e.chart,t)}
-    ></lintje-data-table>`}select(e,t=!1){t?e.href&&this.followLink(e.href,void 0,void 0,{newTab:!0}):this.emit(`lintje-mark-select`,e)&&e.href&&this.followLink(e.href)}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(`${It}, .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},r)=>this.select({id:e,label:t,href:n},r),onClear:e=>{this.select({id:null,label:null,href:this.data?.clearHref}),this.focusMark(e)}}}};s(`lintje-chart`,Wt);export{Wt as LintjeChart};
+    ></lintje-data-table>`}select(e,t=!1){t?e.href&&this.followLink(e.href,void 0,void 0,{newTab:!0}):this.emit(`lintje-mark-select`,e)&&e.href&&this.followLink(e.href)}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(`${It}, .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},r)=>this.select({id:e,label:t,href:n},r),onClear:e=>{this.select({id:null,label:null,href:this.data?.clearHref}),this.focusMark(e)}}}};y(`lintje-chart`,Wt);export{Wt as LintjeChart};