1<script>
 2  let { values, labels, metric = 'minutes' } = $props();
 3  const fmt = (v) => new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(v);
 4  let max = $derived(Math.max(1, ...values));
 5</script>
 6<ol class="chart" aria-label={metric}>
 7  {#each values as value, index}
 8    <li><span class="chart-label">{labels[index]}</span><span class="track"><span class="fill" style:width="{Math.max(0, value / max * 100)}%"></span></span><span class="chart-value">{fmt(value)} <small>{metric}</small></span></li>
 9  {/each}
10</ol>