@props([
    /** @var array<int, int|float> the series, in the order it happened */
    'points' => [],
    // muted where the figure is observed, accent where it can be acted on.
    // Four accent charts in a row is how an accent stops meaning anything.
    'tone' => 'accent',
    'area' => false,
])
@php
    $values = array_values(array_filter($points, 'is_numeric'));
    $min = $values ? min($values) : 0;
    $max = $values ? max($values) : 0;
    $span = max(0.0001, $max - $min);
    $step = count($values) > 1 ? 96 / (count($values) - 1) : 96;

    $path = '';
    foreach ($values as $i => $v) {
        $x = round($i * $step, 1);
        $y = round(30 - (($v - $min) / $span) * 26, 1);
        $path .= ($i === 0 ? 'M' : ' ').$x.' '.$y;
    }
@endphp
@if ($path !== '')
    <svg class="spark {{ $tone === 'accent' ? '' : 'muted' }}" viewBox="0 0 96 34" preserveAspectRatio="none"
         style="width:96px;height:34px" aria-hidden="true">
        @if ($area)
            <path class="area" d="{{ $path }} L96 34 L0 34 Z" />
        @endif
        <path class="line" d="{{ $path }}" />
    </svg>
@endif