diff --git a/MP.IOC/Components/App.razor b/MP.IOC/Components/App.razor index efe9dd93..50f26fdc 100644 --- a/MP.IOC/Components/App.razor +++ b/MP.IOC/Components/App.razor @@ -6,7 +6,6 @@ @* *@ - @@ -20,6 +19,11 @@ + @* *@ + +@* + *@ + diff --git a/MP.IOC/Components/ChartJS/BarPlot.razor b/MP.IOC/Components/ChartJS/BarPlot.razor new file mode 100644 index 00000000..985a7630 --- /dev/null +++ b/MP.IOC/Components/ChartJS/BarPlot.razor @@ -0,0 +1,133 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + [Parameter] + public string Id { get; set; } = "MyHist"; + + [Parameter] + public string Legenda { get; set; } = "Legenda"; + + [Parameter] + public bool Horizontal { get; set; } = false; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + protected async Task renderChart() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale + var config = new + { + type = "bar", + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + suggestedMin = 0, + display = true, + ticks = new + { + beginAtZero = true, + maxTicksLimit = 10 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] { + new { + data = Data, + borderColor = lineColor, + backgroundColor = backColor, + borderWidth = 1, + label = Legenda + } + }, + labels = Labels + } + }; + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale + var configHor = new + { + type = "bar", + options = new + { + indexAxis = "y", + responsive = true, + scales = new + { + yAxes = new + { + suggestedMin = 0, + display = true, + ticks = new + { + beginAtZero = true, + maxTicksLimit = 10 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] { + new { + data = Data, + borderColor = lineColor, + backgroundColor = backColor, + borderWidth = 1, + label = Legenda + } + }, + labels = Labels + } + }; + await Task.Delay(50); + if (Horizontal) + { + await JSRuntime.InvokeVoidAsync("setup", Id, configHor); + } + else + { + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + } +} diff --git a/MP.IOC/Components/ChartJS/Chart.razor b/MP.IOC/Components/ChartJS/Chart.razor new file mode 100644 index 00000000..7be94585 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Chart.razor @@ -0,0 +1,63 @@ +@inject IJSRuntime JSRuntime + + + +@code { + public enum ChartType + { + Pie, + Bar + } + + [Parameter] + public string Id { get; set; } = "MyChart"; + + [Parameter] + public ChartType Type { get; set; } + + [Parameter] + public string[]? Data { get; set; } + + [Parameter] + public string[]? BackgroundColor { get; set; } + + [Parameter] + public string[]? Labels { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await InitDefault(); + } + + protected async Task InitDefault() + { + // Here we create an anonymous type with all the options + // that need to be sent to Chart.js + var config = new + { + type = Type.ToString().ToLower(), + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + suggestedMin = 0 + } + } + }, + data = new + { + datasets = new[] + { + new { data = Data, backgroundColor = BackgroundColor} + }, + labels = Labels + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/Line.razor b/MP.IOC/Components/ChartJS/Line.razor new file mode 100644 index 00000000..83db14b7 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Line.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "Demo Line"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + protected override async Task OnParametersSetAsync() + { + // await Task.Delay(100); + await renderChart(); + } + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + protected async Task renderChart() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "line", + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = new[] + { + new { + data = DataTS, + borderColor = lineColor, + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Title + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/MultiLine.razor b/MP.IOC/Components/ChartJS/MultiLine.razor new file mode 100644 index 00000000..3a926640 --- /dev/null +++ b/MP.IOC/Components/ChartJS/MultiLine.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List Titles { get; set; } = new List() { "Demo Line" }; + + [Parameter] + public List> DataTSList { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + [Parameter] + public bool Stacked { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + protected async Task renderChart() + { + int i = 0; + // preparo lista di dati... + var dataSetsList = DataTSList.Select(dTS => new + { + data = dTS, + borderColor = lineColor[i], + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Titles[i++] + }).ToList(); + + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "line", + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + stacked = Stacked, + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = dataSetsList + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/PieChart.razor b/MP.IOC/Components/ChartJS/PieChart.razor new file mode 100644 index 00000000..5294db68 --- /dev/null +++ b/MP.IOC/Components/ChartJS/PieChart.razor @@ -0,0 +1,98 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "DEMO Pie Chart"; + + [Parameter] + public string LegendPos { get; set; } = "right"; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + protected async Task renderChart() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "pie", + options = new + { + responsive = true, + plugins = new + { + legend = new + { + position = LegendPos + }, + title = new + { + display = true, + text = Title + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}", + HoverBorderWidth = 3 + }, + data = new + { + labels = Labels.ToArray(), + datasets = new[] + { + new + { + data = Data, + borderColor= lineColor, + backgroundColor= backColor + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/StepLine.razor b/MP.IOC/Components/ChartJS/StepLine.razor new file mode 100644 index 00000000..ff48aa1e --- /dev/null +++ b/MP.IOC/Components/ChartJS/StepLine.razor @@ -0,0 +1,94 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// Inizializzazione rendering componente + /// + /// partendo da qui: + /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/ + /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ + /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type + /// + /// + protected async Task renderChart() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "line", + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + display = true, + ticks = new + { + maxTicksLimit = 10 + } + }, + xAxes = new + { + type = "timeseries", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] + { + new + { + data = DataTS, + borderColor= lineColor, + backgroundColor= backColor, + lineTension= 0, + stepped= true, + label= "Temperatura Rilevata" + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/Compo/ParetoDetail.razor b/MP.IOC/Components/Compo/ParetoDetail.razor index e98eb733..1285c8d6 100644 --- a/MP.IOC/Components/Compo/ParetoDetail.razor +++ b/MP.IOC/Components/Compo/ParetoDetail.razor @@ -7,8 +7,6 @@
    - @*
  • -
    • *@ @foreach (var itemDet in ListPaged) {
  • @@ -20,8 +18,6 @@
    • } - @*
  • -
    • *@
diff --git a/MP.IOC/Components/Pages/CallStats.razor b/MP.IOC/Components/Pages/CallStats.razor index 5d1c3ed1..e45c9261 100644 --- a/MP.IOC/Components/Pages/CallStats.razor +++ b/MP.IOC/Components/Pages/CallStats.razor @@ -2,48 +2,58 @@
-

Current Call Stats

(24h) +

Current Call Stats (24h)

-
+
  • Avail Data +
    • @foreach (var item in ParetoDay) {
  • @item.Key -
    • }
-
- Pareto Chart +
+ @if (string.IsNullOrEmpty(@currSelect)) + { +
selezionare la metrica
+ } + else + { + + }
- Pie chart +
-
- lista dettaglio (5/10 pag) +
+
-
+
timeserie selezionata x num call/tempo
-
+@*
@foreach (var item in ParetoDay) {
} -
+
*@
diff --git a/MP.IOC/Components/Pages/CallStats.razor.cs b/MP.IOC/Components/Pages/CallStats.razor.cs index 042973ea..3fd46239 100644 --- a/MP.IOC/Components/Pages/CallStats.razor.cs +++ b/MP.IOC/Components/Pages/CallStats.razor.cs @@ -19,6 +19,76 @@ namespace MP.IOC.Components.Pages private Dictionary> ParetoDay = new(); + private void DoReset() + { + currSelect = ""; + currData = new(); + } + private void DoSelect(string reqKey) + { + if (ParetoDay.ContainsKey(reqKey)) + { + currSelect = reqKey; + currTitle = $"Pareto | {reqKey}"; + currData = ParetoDay[reqKey]; + } + } + private string currSelect = ""; + private string currTitle = ""; + private List currData = new(); + + private List LabelPareto + { + get => currData.Select(x => x.Label).ToList(); + } + + private List DatiPareto + { + get => currData.Select(x => x.Value).ToList(); + } + /// + /// Genera colori sfondo 33% rosso / arancione / giallo + /// + /// + /// + /// + private List semaphColors(int numRecords, string alpha) + { + List answ = new List(); + // verde... + for (int i = 0; i < numRecords / 3; i++) + { + answ.Add($"rgba(54, 235, 82, {alpha})"); + } + // arancione + for (int i = 0; i < numRecords / 3; i++) + { + answ.Add($"rgba(255, 206, 86, {alpha})"); + } + while (answ.Count < numRecords) + { + answ.Add($"rgba(255, 99, 132, {alpha}"); + } + + return answ; + } + /// + /// Genera colori sfondo 33% rosso / arancione / giallo + /// + /// + protected List bgColors + { + get => semaphColors(currData.Count, "0.3"); + } + /// + /// Genera colori sfondo 33% rosso / arancione / giallo + /// + /// + private List lineColors + { + get => semaphColors(currData.Count, "1"); + } + #endregion Private Fields #region Private Properties diff --git a/MP.IOC/Components/_Imports.razor b/MP.IOC/Components/_Imports.razor index f1d9a66a..b2c77cbf 100644 --- a/MP.IOC/Components/_Imports.razor +++ b/MP.IOC/Components/_Imports.razor @@ -11,5 +11,6 @@ @using MP.Data.Services @using MP.IOC.Components @using MP.IOC.Components.Compo +@using MP.IOC.Components.ChartJS @using System.Net.Http @using System.Net.Http.Json diff --git a/MP.IOC/MP.IOC.csproj b/MP.IOC/MP.IOC.csproj index 016342de..9c2954a2 100644 --- a/MP.IOC/MP.IOC.csproj +++ b/MP.IOC/MP.IOC.csproj @@ -4,7 +4,7 @@ net8.0 enable enable - 6.16.2604.1008 + 6.16.2604.1009 diff --git a/MP.IOC/Resources/ChangeLog.html b/MP.IOC/Resources/ChangeLog.html index dbb2f036..b71861f1 100644 --- a/MP.IOC/Resources/ChangeLog.html +++ b/MP.IOC/Resources/ChangeLog.html @@ -1,6 +1,6 @@ Modulo MP-IOC -

Versione: 6.16.2604.1008

+

Versione: 6.16.2604.1009


Note di rilascio: