Gauge Chart Nieuw

<!-- Gauge Chart · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="gac"><div class="gac__top"><span class="gac__lbl">Bezetting werkplaats · week 41</span></div><svg class="gac__svg" viewBox="0 0 220 128" role="img" aria-label="Bezettingsgraad"><path class="gac__bg" d="M30 112 A80 80 0 0 1 190 112" pathLength="100"/><path class="gac__val" d="M30 112 A80 80 0 0 1 190 112" pathLength="100"/><g class="gac__ticks"></g><line class="gac__needle" x1="110" y1="112" x2="110" y2="48"/><circle cx="110" cy="112" r="6" class="gac__hub"/></svg><div class="gac__num"><b>0</b><span>%</span></div><div class="gac__days" role="group" aria-label="Dag kiezen"><button type="button" data-v="62">Ma</button><button type="button" data-v="78" class="is-on">Di</button><button type="button" data-v="91">Wo</button><button type="button" data-v="54">Do</button><button type="button" data-v="70">Vr</button></div></div>
</div>

/* Gauge Chart · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.gac{width:280px;max-width:88%;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;position:relative}
.gac__top{align-self:stretch;text-align:center}
.gac__lbl{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.55)}
.gac__svg{width:100%;height:auto;display:block;margin-top:4px;overflow:visible}
.gac__bg,.gac__val{fill:none;stroke-width:14;stroke-linecap:butt}
.gac__bg{stroke:#e4e0da}
.gac__val{stroke:#F5480F;stroke-dasharray:0 100}
.gac__ticks line{stroke:#0a0a0a;stroke-width:1.5}
.gac__ticks text{font:500 8px 'JetBrains Mono',monospace;fill:rgba(10,10,10,.55);text-anchor:middle}
.gac__needle{stroke:#0a0a0a;stroke-width:3;stroke-linecap:round;transform-origin:110px 112px}
.gac__hub{fill:#0a0a0a}
.gac__num{display:flex;justify-content:center;align-items:baseline;margin-top:-2px;color:#0a0a0a}
.gac__num b{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:26px;line-height:1.3;font-variant-numeric:tabular-nums}
.gac__num span{font-size:14px;font-weight:600;margin-left:2px}
.gac__days{display:flex;gap:4px;margin-top:6px}
.gac__days button{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.06em;background:#fff;color:#0a0a0a;border:1px solid rgba(10,10,10,.14);border-radius:3px;padding:6px 8px;cursor:pointer}
.gac__days button.is-on{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.gac__days button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Gauge Chart · Bron: Animata · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.gac'); if (!w) return;
    var val = w.querySelector('.gac__val'), nd = w.querySelector('.gac__needle'), out = w.querySelector('.gac__num b'), tk = w.querySelector('.gac__ticks'), bts = w.querySelectorAll('.gac__days button');
    var NS = 'http://www.w3.org/2000/svg', reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
    for (var i = 0; i <= 10; i++) {
      var a = Math.PI * (1 - i / 10), c = Math.cos(a), s = Math.sin(a), big = i % 5 === 0;
      var l = document.createElementNS(NS, 'line');
      l.setAttribute('x1', (110 + c * 64).toFixed(1)); l.setAttribute('y1', (112 - s * 64).toFixed(1));
      l.setAttribute('x2', (110 + c * (big ? 56 : 60)).toFixed(1)); l.setAttribute('y2', (112 - s * (big ? 56 : 60)).toFixed(1)); tk.appendChild(l);
      if (big) { var t = document.createElementNS(NS, 'text'); t.setAttribute('x', (110 + c * 46).toFixed(1)); t.setAttribute('y', (112 - s * 46 + 3).toFixed(1)); t.textContent = String(i * 10); tk.appendChild(t); }
    }
    var cur = 0, raf = 0;
    function render(v) { val.style.strokeDasharray = v.toFixed(2) + ' 100'; nd.style.transform = 'rotate(' + (v * 1.8 - 90).toFixed(2) + 'deg)'; out.textContent = String(Math.round(v)); }
    function to(v) {
      cancelAnimationFrame(raf); var from = cur, t0 = performance.now(), D = reduce ? 1 : 1100;
      (function step(now) { var p = Math.min(1, (now - t0) / D), e = 1 - Math.pow(1 - p, 4); cur = from + (v - from) * e; render(cur); if (p < 1) raf = requestAnimationFrame(step); })(t0);
      w.querySelector('.gac__svg').setAttribute('aria-label', 'Bezettingsgraad ' + v + ' procent');
    }
    bts.forEach(function (b) { b.addEventListener('click', function () { bts.forEach(function (o) { o.classList.toggle('is-on', o === b); }); to(+b.dataset.v); }); });
    render(0); setTimeout(function () { to(78); }, 200);
}
init(document.querySelector('.jouw-container'));