{{--
    A line over time, drawn on the server; app.js adds the crosshair and tooltip.
      $series   list of ['name' => 'Views', 'values' => [Y-m-d => number], 'prev' => bool]  (first = this period)
      $fmt      'n' or 'money' (micro-dollars)
      $bucket   'day' or 'week'
      $markers  optional list of ['day' => Y-m-d, 'label' => 'Featured']
      $label    what the chart shows, for screen readers
    The plot stretches to the card; lines keep 2px (non-scaling strokes) and text stays HTML, so phones get
    readable labels. One y-axis only: other measures get their own chart.
--}}
@php
    $fmt ??= 'n';
    $bucket ??= 'day';
    $markers ??= [];
    $cur = $series[0];
    $days = array_keys($cur['values']);
    $n = count($days);
    $max = 0;
    foreach ($series as $s) { $max = max($max, $s['values'] ? max(array_values($s['values'])) : 0); }
    [$top, $ticks] = \App\Support\Charts::scale((float) $max);
    $x = fn (int $i) => $n > 1 ? round($i * 1000 / ($n - 1), 2) : 500;
    $y = fn ($v) => round(100 - ($top > 0 ? $v / $top * 100 : 0), 3);
    $points = fn (array $vals) => implode(' ', array_map(fn ($i, $v) => $x($i).','.$y($v), array_keys(array_values($vals)), array_values($vals)));
    $curVals = array_values($cur['values']);
    $area = $n ? 'M0,100 L'.str_replace(' ', ' L', $points($cur['values'])).' L'.$x($n - 1).',100 Z' : '';
    $xl = \App\Support\Charts::xLabels($days, $bucket);
    $data = [
        'fmt' => $fmt,
        'labels' => array_map(fn ($d) => ($bucket === 'week' ? 'Week of ' : '').\Carbon\CarbonImmutable::parse($d)->format('D, M j, Y'), $days),
        'series' => array_map(fn ($s) => ['name' => $s['name'], 'prev' => (bool) ($s['prev'] ?? false), 'values' => array_values($s['values'])], $series),
    ];
    $last = $n ? $curVals[$n - 1] : 0;
@endphp
<figure class="viz viz-line" data-viz="{{ json_encode($data) }}" data-top="{{ $top }}" role="img" aria-label="{{ $label ?? $cur['name'] }}: {{ $n }} {{ $bucket === 'week' ? 'weeks' : 'days' }}, latest {{ \App\Support\Charts::format($last, $fmt) }}. The table below has every value.">
    <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, $fmt) }}</span>@endforeach
        </div>
        <div class="viz-plot">
            <svg viewBox="0 0 1000 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">
                @foreach ($ticks as $t)
                    <line class="{{ $t == 0 ? 'viz-base' : 'viz-grid' }}" x1="0" x2="1000" y1="{{ $y($t) }}" y2="{{ $y($t) }}" vector-effect="non-scaling-stroke"/>
                @endforeach
                @foreach ($markers as $m)
                    @php $mi = array_search($m['day'], $days, true); @endphp
                    @if ($mi !== false)<line class="viz-mark" x1="{{ $x($mi) }}" x2="{{ $x($mi) }}" y1="0" y2="100" vector-effect="non-scaling-stroke"/>@endif
                @endforeach
                @foreach (array_slice($series, 1) as $s)
                    <polyline class="viz-prev" points="{{ $points($s['values']) }}" vector-effect="non-scaling-stroke"/>
                @endforeach
                @if ($n > 1)<path class="viz-area" d="{{ $area }}"/>@endif
                <polyline class="viz-cur" points="{{ $points($cur['values']) }}" vector-effect="non-scaling-stroke"/>
            </svg>
            @if ($n)<span class="viz-end" style="left:{{ $x($n - 1) / 10 }}%;top:{{ $y($last) }}%"></span>@endif
            @foreach ($markers as $m)
                @php $mi = array_search($m['day'], $days, true); @endphp
                @if ($mi !== false)<span class="viz-marklabel" style="left:{{ $x($mi) / 10 }}%">{{ $m['label'] }}</span>@endif
            @endforeach
        </div>
    </div>
    <div class="viz-xaxis" aria-hidden="true">
        @foreach ($xl as $i => $lab)<span style="left:{{ $x($i) / 10 }}%" @class(['first' => $i === 0, 'last' => $i === $n - 1])>{{ $lab }}</span>@endforeach
    </div>
    @if (count($series) > 1)
        <figcaption class="viz-legend">
            @foreach ($series as $s)<span><i class="vkey {{ ($s['prev'] ?? false) ? 'prev' : 'cur' }}"></i>{{ $s['name'] }}</span>@endforeach
        </figcaption>
    @endif
</figure>