{{--
    Columns: one per hour of the day (or any short ordered set).
      $values  [0 => n, …, 23 => n]   (or ['label' => n] with $labels = false)
      $noun    'views'
      $hours   true: keys are hours 0–23 (labels 12 AM · 6 AM · 12 PM · 6 PM)
--}}
@php
    $hours ??= true;
    $noun ??= '';
    $max = $values ? max($values) : 0;
    [$top, $ticks] = \App\Support\Charts::scale((float) $max, 3);
    $keys = array_keys($values);
    $peak = $max > 0 ? array_search($max, $values, true) : null;
    $aria = ucfirst($noun).' by '.($hours ? 'hour of the day' : 'group').($peak !== null ? ', busiest '.($hours ? \App\Support\Charts::hour((int) $peak) : $peak) : '').'. The table below has every value.';
@endphp
<figure class="viz viz-cols" role="img" aria-label="{{ $aria }}">
    <div class="viz-frame">
        <div class="viz-yaxis" aria-hidden="true">
            @foreach ($ticks as $t)<span style="bottom:{{ $top > 0 ? $t / $top * 100 : 0 }}%">{{ \App\Support\Charts::tick($t, 'n') }}</span>@endforeach
        </div>
        <div class="viz-plot">
            @foreach ($ticks as $t)<i class="{{ $t == 0 ? 'viz-hbase' : 'viz-hgrid' }}" style="bottom:{{ $top > 0 ? $t / $top * 100 : 0 }}%"></i>@endforeach
            <div class="viz-colrow">
                @foreach ($values as $k => $v)
                    @php $lab = $hours ? \App\Support\Charts::hour((int) $k) : $k; @endphp
                    <span class="viz-col" tabindex="0" data-tip="{{ number_format($v) }} {{ $noun }}" data-tip-head="{{ $lab }}"><b style="height:{{ $top > 0 ? round($v / $top * 100, 2) : 0 }}%"></b></span>
                @endforeach
            </div>
        </div>
    </div>
    <div class="viz-xaxis cols" aria-hidden="true">
        @foreach ($keys as $i => $k)
            @if (! $hours || $k % 6 === 0)<span style="left:{{ (($i + 0.5) / max(1, count($keys))) * 100 }}%">{{ $hours ? \App\Support\Charts::hour((int) $k) : $k }}</span>@endif
        @endforeach
    </div>
</figure>