Aggiunta componente gaugeMulti
This commit is contained in:
Samuele Locatelli
@@ -28,7 +28,7 @@
|
||||
</rect>
|
||||
<text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
|
||||
<g>
|
||||
<rect x="10%" y="10%" width="80%" height="80%" fill="white" fill-opacity="0.1" >
|
||||
<rect x="10%" y="10%" width="80%" height="80%" fill="white" fill-opacity="0.1">
|
||||
</rect>
|
||||
<text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">
|
||||
testo più lungo... 0123456789
|
||||
@@ -55,6 +55,20 @@
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
<CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
<CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
</div>
|
||||
<div class="col-2 bg-dark">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 containerCalendario">
|
||||
@@ -78,4 +92,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
protected List<CircleGaugeMulti.CircSegm> DDemo1 = new List<CircleGaugeMulti.CircSegm>();
|
||||
protected List<CircleGaugeMulti.CircSegm> DDemoIn2 = new List<CircleGaugeMulti.CircSegm>();
|
||||
protected List<CircleGaugeMulti.CircSegm> DDemoOut2 = new List<CircleGaugeMulti.CircSegm>();
|
||||
|
||||
protected int currVal1 = 1000;
|
||||
protected int currVal2 = 1000;
|
||||
protected int maxVal = 1000;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
DDemo1.Clear();
|
||||
currVal1 = 800;
|
||||
DDemo1.Add(new CircleGaugeMulti.CircSegm() { Color = "#DCFD15", Value = 800 });
|
||||
DDemo1.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = 300 });
|
||||
Random rnd = new Random();
|
||||
DDemoIn2.Clear();
|
||||
DDemoOut2.Clear();
|
||||
currVal2 = 1300;
|
||||
DDemoIn2.Add(new CircleGaugeMulti.CircSegm() { Color = "#DCFD15", Value = 1000 });
|
||||
DDemoIn2.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = 600 });
|
||||
DDemoOut2.Add(new CircleGaugeMulti.CircSegm() { Color = "#1367FD", Value = 300 });
|
||||
// DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#1515FD", Value = 700 });
|
||||
// currVal = rnd.Next(maxVal - 200, maxVal + 500);
|
||||
// DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = currVal / 4 });
|
||||
// DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#ACFD15", Value = currVal / 4 });
|
||||
// DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#1515FD", Value = currVal / 2 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,78 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
||||
namespace EgwCoreLib.Razor
|
||||
{
|
||||
public partial class CircleGaugeMulti
|
||||
{
|
||||
[Parameter]
|
||||
public string Titolo { get; set; } = "Titolo";
|
||||
[Parameter]
|
||||
public string Testo { get; set; } = "Testo";
|
||||
[Parameter]
|
||||
public string StyleTitolo { get; set; } = "font-size: 3em; font-weight:bold; fill: white;";
|
||||
[Parameter]
|
||||
public string StyleTesto { get; set; } = "font-size: 1em; fill: gray;";
|
||||
[Parameter]
|
||||
public List<CircSegm> ListInner { get; set; } = new List<CircSegm>();
|
||||
[Parameter]
|
||||
public List<CircSegm> ListOuter { get; set; } = new List<CircSegm>();
|
||||
|
||||
/// <summary>
|
||||
/// Indica se mostrare o meno il btn centrale
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool ShowCircleBtn { get; set; } = false;
|
||||
|
||||
/// <summary>
|
||||
/// Valore MASSIMO da rappresentare (=100%)
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int maxVal { get; set; } = 0;
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// Spessore dei cerchi da disegnare
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int sWidth { get; set; } = 10;
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// Raggio cerchio interno (0..100)
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int innRad { get; set; } = 70;
|
||||
|
||||
/// <summary>
|
||||
/// Raggio cerchio esterno (0..100)
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int outRad { get; set; } = 85;
|
||||
|
||||
private bool showOuter
|
||||
{
|
||||
get => ListOuter.Count > 0;
|
||||
}
|
||||
|
||||
|
||||
protected string calcDash(int currRad, int currVal)
|
||||
{
|
||||
string answ = $"{currRad * 6.2832 * currVal / maxVal:N0} {currRad * 6.2832 * (maxVal - currVal) / maxVal:N0}";
|
||||
return answ;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Parametri per disegno segmento circolare
|
||||
/// </summary>
|
||||
public class CircSegm
|
||||
{
|
||||
public int Value { get; set; } = 0;
|
||||
public string Color { get; set; } = "#00FF66";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* FIX per tyesto dentro SVG: https://www.fabiofranchino.com/blog/how-to-align-svg-text/ */
|
||||
text {
|
||||
text-anchor: middle;
|
||||
/* align center */
|
||||
dominant-baseline: middle;
|
||||
/* vertical alignment fix */
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
/* FIX per tyesto dentro SVG: https://www.fabiofranchino.com/blog/how-to-align-svg-text/ */
|
||||
text {
|
||||
text-anchor: middle; /* align center */
|
||||
dominant-baseline: middle; /* vertical alignment fix */
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
text{text-anchor:middle;dominant-baseline:middle;}
|
||||
Reference in New Issue
Block a user