diff --git a/EgwCoreLib.BlazorTest/Pages/Index.razor b/EgwCoreLib.BlazorTest/Pages/Index.razor index aa67a90..e746b4b 100644 --- a/EgwCoreLib.BlazorTest/Pages/Index.razor +++ b/EgwCoreLib.BlazorTest/Pages/Index.razor @@ -28,7 +28,7 @@ Titolo - + testo più lungo... 0123456789 @@ -55,6 +55,20 @@ +
+
+
+
+
+ +
+
+ +
+
+
+
+
@@ -78,4 +92,34 @@
- \ No newline at end of file + + +@code { + protected List DDemo1 = new List(); + protected List DDemoIn2 = new List(); + protected List DDemoOut2 = new List(); + + 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 }); + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/CircleGaugeMulti.razor b/EgwCoreLib.Razor/CircleGaugeMulti.razor new file mode 100644 index 0000000..7da171f --- /dev/null +++ b/EgwCoreLib.Razor/CircleGaugeMulti.razor @@ -0,0 +1,36 @@ + + + + @foreach (var item in ListInner) + { + + } + @if (ShowCircleBtn) + { + + + + + + + + + + + } + @if (showOuter) + { + + @foreach (var item in ListOuter) + { + + } + @* *@ + } + + @Titolo + @Testo + + + + diff --git a/EgwCoreLib.Razor/CircleGaugeMulti.razor.cs b/EgwCoreLib.Razor/CircleGaugeMulti.razor.cs new file mode 100644 index 0000000..8c4449f --- /dev/null +++ b/EgwCoreLib.Razor/CircleGaugeMulti.razor.cs @@ -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 ListInner { get; set; } = new List(); + [Parameter] + public List ListOuter { get; set; } = new List(); + + /// + /// Indica se mostrare o meno il btn centrale + /// + [Parameter] + public bool ShowCircleBtn { get; set; } = false; + + /// + /// Valore MASSIMO da rappresentare (=100%) + /// + [Parameter] + public int maxVal { get; set; } = 0; + + + /// + /// Spessore dei cerchi da disegnare + /// + [Parameter] + public int sWidth { get; set; } = 10; + + + /// + /// Raggio cerchio interno (0..100) + /// + [Parameter] + public int innRad { get; set; } = 70; + + /// + /// Raggio cerchio esterno (0..100) + /// + [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; + } + + /// + /// Parametri per disegno segmento circolare + /// + public class CircSegm + { + public int Value { get; set; } = 0; + public string Color { get; set; } = "#00FF66"; + } + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/CircleGaugeMulti.razor.css b/EgwCoreLib.Razor/CircleGaugeMulti.razor.css new file mode 100644 index 0000000..087d841 --- /dev/null +++ b/EgwCoreLib.Razor/CircleGaugeMulti.razor.css @@ -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 */ +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/CircleGaugeMulti.razor.less b/EgwCoreLib.Razor/CircleGaugeMulti.razor.less new file mode 100644 index 0000000..3bdac9b --- /dev/null +++ b/EgwCoreLib.Razor/CircleGaugeMulti.razor.less @@ -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 */ +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/CircleGaugeMulti.razor.min.css b/EgwCoreLib.Razor/CircleGaugeMulti.razor.min.css new file mode 100644 index 0000000..d38efbf --- /dev/null +++ b/EgwCoreLib.Razor/CircleGaugeMulti.razor.min.css @@ -0,0 +1 @@ +text{text-anchor:middle;dominant-baseline:middle;} \ No newline at end of file