31 lines
1.5 KiB
PHP
31 lines
1.5 KiB
PHP
@props(['value' => 0, 'label' => null, 'sub' => null, 'tone' => 'accent'])
|
|
@php
|
|
$v = max(0, min(100, (float) $value));
|
|
$r = 34;
|
|
$circ = 2 * M_PI * $r;
|
|
$offset = $circ * (1 - $v / 100);
|
|
$stroke = [
|
|
'accent' => 'text-accent', 'online' => 'text-online',
|
|
'warning' => 'text-warning', 'offline' => 'text-offline', 'cyan' => 'text-cyan',
|
|
][$tone] ?? 'text-accent';
|
|
@endphp
|
|
<div {{ $attributes->merge(['class' => 'flex flex-col items-center']) }}>
|
|
<div class="relative h-16 w-16">
|
|
{{-- progress via SVG stroke attributes (not inline style) --}}
|
|
<svg class="h-16 w-16 -rotate-90" viewBox="0 0 80 80" aria-hidden="true">
|
|
<circle cx="40" cy="40" r="{{ $r }}" fill="none" stroke="currentColor" stroke-width="6" class="text-line" />
|
|
<circle cx="40" cy="40" r="{{ $r }}" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round"
|
|
stroke-dasharray="{{ $circ }}" stroke-dashoffset="{{ $offset }}" class="{{ $stroke }}" />
|
|
</svg>
|
|
<div class="absolute inset-0 grid place-items-center">
|
|
<span class="tabular font-mono text-xs font-semibold text-ink">{{ round($v) }}<span class="text-ink-3">%</span></span>
|
|
</div>
|
|
</div>
|
|
@if ($label)
|
|
<p class="mt-2 font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $label }}</p>
|
|
@endif
|
|
@if ($sub)
|
|
<p class="font-mono text-[11px] text-ink-4">{{ $sub }}</p>
|
|
@endif
|
|
</div>
|