32 lines
1.1 KiB
PHP
32 lines
1.1 KiB
PHP
@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:80px;height:32px" aria-hidden="true">
|
|
@if ($area)
|
|
<path class="area" d="{{ $path }} L96 34 L0 34 Z" />
|
|
@endif
|
|
<path class="line" d="{{ $path }}" />
|
|
</svg>
|
|
@endif
|