Files
egwcorelib/EgwCoreLib.Razor/CircleGaugeMulti.razor
2023-10-13 12:15:04 +02:00

37 lines
2.0 KiB
Plaintext

<svg viewBox="0 0 200 200" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="@innRad" fill="none" stroke="rgba(189, 195, 199, 0.5)" stroke-width="@sWidth" />
@foreach (var item in ListInner)
{
<circle cx="100" cy="100" r="@innRad" fill="none" stroke="@item.Color" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@innRad * 6.2832 * @item.Value / @maxVal) calc(@innRad * 6.2832 * (@maxVal - @item.Value) / @maxVal)" />
}
@if (ShowCircleBtn)
{
<defs>
<radialGradient id="RadialGrad2">
<stop offset="0%" stop-color="#000000" />
<stop offset="80%" stop-color="#151515" />
<stop offset="90%" stop-color="#444444" />
<stop offset="100%" stop-color="#878787" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="@(innRad-sWidth)" fill="url(#RadialGrad2)" fill-opacity="0.5">
</circle>
}
@if (showOuter)
{
<circle cx="100" cy="100" r="@outRad" fill=none stroke="rgba(189, 195, 199, 0.5)" class="bg-opacity-25" stroke-width="@sWidth" />
@foreach (var item in ListOuter)
{
<circle cx="100" cy="100" r="@outRad" fill="none" stroke="@item.Color" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@outRad * 6.2832 * @item.Value / @maxVal) calc(@outRad * 6.2832 * (@maxVal - @item.Value) / @maxVal)" />
}
@* <circle cx="100" cy="100" r="@outRad" fill=none stroke="@StrokeColorValOuter" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@outRad * 6.28 * @valOuter / @maxVal) calc(@outRad * 6.28 * (@maxVal - @valOuter) / @maxVal)" /> *@
}
<g transform="translate(100,100)">
<text id="TitleElem" style="@StyleTitolo" x="0" y="0">@Titolo</text>
<text x="0" y="30" style="@StyleTesto">@Testo</text>
</g>
</svg>