Spaces:
Running
Running
File size: 1,380 Bytes
917b070 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <div class="@WrapperClass">
<div class="relative mx-auto flex h-44 w-44 items-center justify-center">
<svg viewBox="0 0 180 180" class="h-44 w-44 -rotate-90">
<circle cx="90" cy="90" r="70" fill="none" stroke="#e2e8f0" stroke-width="18" />
<circle cx="90" cy="90" r="70" fill="none" stroke="@Color" stroke-width="18" stroke-dasharray="@DashArray" stroke-linecap="round" />
</svg>
<div class="absolute text-center">
<div class="text-3xl font-bold text-slate-950">@ClampedValue.ToString("0")%</div>
@if (!string.IsNullOrWhiteSpace(Label))
{
<div class="mt-1 text-xs font-semibold uppercase tracking-wider text-slate-400">@Label</div>
}
</div>
</div>
</div>
@code {
[Parameter] public double Value { get; set; }
[Parameter] public string? Label { get; set; }
[Parameter] public string Color { get; set; } = "#7c3aed";
[Parameter] public string WrapperClass { get; set; } = string.Empty;
private double ClampedValue => Math.Clamp(Value, 0, 100);
private string DashArray
{
get
{
const double radius = 70;
var circumference = 2 * Math.PI * radius;
var arc = circumference * ClampedValue / 100;
return $"{arc:0.##} {(circumference - arc):0.##}";
}
}
}
|