Trechter: bezoekers, aanvragen, klanten Nieuw

<!-- Trechter: bezoekers, aanvragen, klanten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fnl">
<div class="fnl__hd"><p class="fnl__t">Van bezoek naar klant<span> · Van Dijk Installatietechniek, Breda</span></p><div class="fnl__sw" role="group" aria-label="Periode"><button type="button" aria-pressed="true" data-p="0">Sep</button><button type="button" aria-pressed="false" data-p="1">Aug</button></div></div>
<div class="fnl__st">
<div class="fnl__row" tabindex="0" data-k="0"><div class="fnl__bar"><span class="fnl__lab">Bezoekers</span><b class="fnl__val">12.480</b></div></div>
<p class="fnl__cv" data-k="0">3,5% vraagt een offerte aan</p>
<div class="fnl__row" tabindex="0" data-k="1"><div class="fnl__bar"><span class="fnl__lab">Aanvragen</span><b class="fnl__val">436</b></div></div>
<p class="fnl__cv" data-k="1">14% wordt klant</p>
<div class="fnl__row" tabindex="0" data-k="2"><div class="fnl__bar"><span class="fnl__lab">Klanten</span><b class="fnl__val">61</b></div></div>
</div>
<p class="fnl__det" aria-live="polite"></p>
</div>
</div>

/* Trechter: bezoekers, aanvragen, klanten · NedDev · eigen werk. */
.fnl{position:absolute;inset:0;box-sizing:border-box;padding:12px 14px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;display:flex;flex-direction:column;gap:6px;container-type:inline-size}
.fnl p{margin:0}
.fnl__hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fnl__t{font-size:13px;font-weight:600;min-width:0}
.fnl__t span{font-weight:400;color:#5f5e5a}
.fnl__sw{display:flex;border:1px solid #d6d3ce;border-radius:4px;padding:2px;flex:none}
.fnl__sw button{min-height:24px;min-width:40px;padding:0 8px;border:0;border-radius:3px;background:none;color:#5f5e5a;font:600 12px 'Switzer',sans-serif;cursor:pointer}
.fnl__sw button[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.fnl__sw button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.fnl__st{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;gap:2px}
.fnl__row{width:100%;display:flex;justify-content:center;outline:none;border-radius:4px;cursor:default}
.fnl__row:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.fnl__bar{box-sizing:border-box;height:30px;width:var(--w,100%);min-width:110px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 16px;color:#fff;font-size:12px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,10px 100%);transition:width .6s cubic-bezier(.3,.7,.2,1),opacity .2s}
.fnl__row[data-k="0"] .fnl__bar{background:#0a0a0a}
.fnl__row[data-k="1"] .fnl__bar{background:#4a4947}
.fnl__row[data-k="2"] .fnl__bar{background:#F5480F;color:#0a0a0a}
.fnl__val{font-size:13px;font-variant-numeric:tabular-nums}
.fnl.is-hover .fnl__row:not(.is-on) .fnl__bar{opacity:.4}
.fnl__cv{font-size:12px;color:#5f5e5a;line-height:1.3}
.fnl__det{font-size:12px;color:#3d3c39;min-height:16px;text-align:center}
@container (max-width:380px){.fnl__t span{display:none}.fnl__bar{height:28px}}
@media(prefers-reduced-motion:reduce){.fnl__bar{transition:none}}

// Trechter: bezoekers, aanvragen, klanten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.fnl');if(!w)return;
var D=[{n:'september',v:[12480,436,61],o:4150,x:['61% komt via Google, 22% via een doorverwijzing','gemiddeld 1 op de 29 bezoekers vraagt een offerte aan']},
{n:'augustus',v:[9870,298,47],o:3890,x:['vakantiemaand: 21% minder bezoek dan in september','gemiddeld 1 op de 33 bezoekers vraagt een offerte aan']}];
var rows=[].slice.call(w.querySelectorAll('.fnl__row')),cvs=w.querySelectorAll('.fnl__cv'),det=w.querySelector('.fnl__det'),btns=[].slice.call(w.querySelectorAll('.fnl__sw button')),p=0,shown=[0,0,0],reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
function nl(v){return Math.round(v).toLocaleString('nl-NL');}
function pct(a,b){var x=a/b*100;return (x<10?x.toFixed(1):Math.round(x)+'').replace('.',',');}
function eur(v){return '€ '+nl(v);}
function summary(){var d=D[p];return 'Omzet uit nieuwe klanten in '+d.n+': '+eur(d.v[2]*d.o);}
function detail(k){var d=D[p];return k<2?nl(d.v[k])+(k?' aanvragen, ':' bezoekers, ')+d.x[k]:nl(d.v[2])+' klanten, gemiddelde opdracht '+eur(d.o);}
function tween(from,to){if(reduce){apply(to);return;}var t0=performance.now();requestAnimationFrame(function f(t){var q=Math.min(1,(t-t0)/600),e=1-Math.pow(1-q,3);apply(from.map(function(a,i){return a+(to[i]-a)*e;}));if(q<1)requestAnimationFrame(f);});}
function apply(v){shown=v;rows.forEach(function(r,i){r.querySelector('.fnl__val').textContent=nl(v[i]);});}
function render(first){var d=D[p],max=D[0].v[0];rows.forEach(function(r,i){var wv=100*Math.pow(d.v[i]/max,.2);r.querySelector('.fnl__bar').style.setProperty('--w',wv.toFixed(1)+'%');r.setAttribute('aria-label',(['Bezoekers','Aanvragen','Klanten'][i])+' in '+d.n+': '+nl(d.v[i]));});
cvs[0].textContent=pct(d.v[1],d.v[0])+'% vraagt een offerte aan';cvs[1].textContent=pct(d.v[2],d.v[1])+'% wordt klant';tween(first?[0,0,0]:shown,d.v);det.textContent=summary();}
function on(k){w.classList.add('is-hover');rows.forEach(function(r,i){r.classList.toggle('is-on',i===k);});det.textContent=detail(k);}
function off(){w.classList.remove('is-hover');rows.forEach(function(r){r.classList.remove('is-on');});det.textContent=summary();}
rows.forEach(function(r,i){r.addEventListener('pointerenter',function(){on(i);});r.addEventListener('pointerleave',function(){if(document.activeElement!==r)off();});r.addEventListener('focus',function(){on(i);});r.addEventListener('blur',off);});
btns.forEach(function(b){b.addEventListener('click',function(){p=+b.dataset.p;btns.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false');});off();render(false);});});
render(true);
}
init(document.querySelector('.jouw-container'));