From 8e13de8d1e22ee65dd315ca74123405a6d382c12 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Tue, 25 Jul 2023 15:18:38 +0200 Subject: [PATCH] Aggiunta componente multiline x ChartJs + refresh --- .../Pages/TestMultiLine.razor | 19 +++ .../Pages/TestMultiLine.razor.cs | 97 +++++++++++++ EgwCoreLib.Razor/ChartHist.razor.cs | 3 +- EgwCoreLib.Razor/ChartHist.razor.js | 9 +- EgwCoreLib.Razor/ChartMultiLine.razor | 4 + EgwCoreLib.Razor/ChartMultiLine.razor.cs | 131 ++++++++++++++++++ EgwCoreLib.Razor/ChartMultiLine.razor.js | 12 ++ EgwCoreLib.Razor/ChartTS.razor.js | 8 +- EgwCoreLib.Razor/Data/chartJsData.cs | 29 ++++ EgwCoreLib.Razor/EgwCoreLib.Razor.csproj | 5 + 10 files changed, 307 insertions(+), 10 deletions(-) create mode 100644 EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor create mode 100644 EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs create mode 100644 EgwCoreLib.Razor/ChartMultiLine.razor create mode 100644 EgwCoreLib.Razor/ChartMultiLine.razor.cs create mode 100644 EgwCoreLib.Razor/ChartMultiLine.razor.js diff --git a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor new file mode 100644 index 0000000..e3d24db --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor @@ -0,0 +1,19 @@ +@page "/TestMultiLine" + +@if (currDS == null) +{ + +} +else +{ +

TestMultiLine

+
+
+ +
+
+ +
+
+} + diff --git a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs new file mode 100644 index 0000000..189626a --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs @@ -0,0 +1,97 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Components; +using System.Net.Http; +using Microsoft.AspNetCore.Authorization; +using Microsoft.AspNetCore.Components.Authorization; +using Microsoft.AspNetCore.Components.Forms; +using Microsoft.AspNetCore.Components.Routing; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.Web.Virtualization; +using Microsoft.JSInterop; +using EgwCoreLib.BlazorTest; +using EgwCoreLib.BlazorTest.Components; +using EgwCoreLib.BlazorTest.Shared; +using EgwCoreLib.Razor; +using EgwCoreLib.Razor.Data; +using static EgwCoreLib.Razor.Data.chartJsData; + +namespace EgwCoreLib.BlazorTest.Pages +{ + public partial class TestMultiLine + { + + protected override async Task OnInitializedAsync() + { + currDS = null; + await Task.Delay(200); + await setupData(); + } + + protected List? currDS { get; set; } = null; + + protected List? ChLabels { get; set; } = null; + + protected Random rnd = new Random(); + + private async Task setupData() + { + currDS = null; + List currDemo = new List(); + ChLabels = new List(); + int numMesi = 6; + for (int iMese = 1; iMese <= numMesi; iMese++) + { + ChLabels.Add($"{iMese:00}"); + } + for (int iSerie = 0; iSerie < 4; iSerie++) + { + // simulo 12 mesi... + List simData = new List(); + for (int iMese = 1; iMese <= numMesi; iMese++) + { + simData.Add(new chartJsXY() { x = iMese, y = iMese + rnd.Next(-4, 4) }); + } + int rCol = rnd.Next(0, 155); + int gCol = rnd.Next(0, 155); + int bCol = rnd.Next(0, 100); + + chartJsData.chartJsDataSetXY singleData = new chartJsData.chartJsDataSetXY() + { + label = $"Data_{iSerie:00}", + data = simData, + borderColor = $"#{10 + rCol:X2}{30 + gCol:X2}{100 + bCol:X2}", + backgroundColor = $"rgba({60 + rCol},{80 + gCol},{155 + bCol},0.3)", + lineTension = 0, + stepped = iSerie % 5 == 0, + fill = iSerie % 3 == 0 ? "start" : "false" + }; + // aggiungo + currDemo.Add(singleData); + } + currDS = currDemo; + await Task.Delay(10); + } + + protected string[] histLabel(int num) + { + List answ = new List(); + for (int i = 0; i < 50; i++) + { + answ.Add($"LBL_{i:00}"); + } + return answ.ToArray(); + } + protected string[] histData(int num) + { + List answ = new List(); + for (int i = 0; i < 50; i++) + { + answ.Add($"{(double)(rnd.Next(10, 100)) / 10 + i}"); + } + return answ.ToArray(); + } + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/ChartHist.razor.cs b/EgwCoreLib.Razor/ChartHist.razor.cs index f905623..03e09b4 100644 --- a/EgwCoreLib.Razor/ChartHist.razor.cs +++ b/EgwCoreLib.Razor/ChartHist.razor.cs @@ -120,7 +120,8 @@ namespace EgwCoreLib.Razor }, data = new { - datasets = new[]{ + datasets = new[] + { new { data = Data, diff --git a/EgwCoreLib.Razor/ChartHist.razor.js b/EgwCoreLib.Razor/ChartHist.razor.js index 2e45682..1cd8e37 100644 --- a/EgwCoreLib.Razor/ChartHist.razor.js +++ b/EgwCoreLib.Razor/ChartHist.razor.js @@ -1,12 +1,11 @@ ///Setup del chart desiderato con id univoco window.setup = (id, config) => { var ctx = document.getElementById(id); - if (window['myChart' + id] instanceof Chart) { - window['myChart' + id].destroy(); - window['myChart' + id] = new Chart(ctx, config); + if (window['histChart' + id] instanceof Chart) { + window['histChart' + id].destroy(); + window['histChart' + id] = new Chart(ctx, config); } else { - window['myChart' + id] = new Chart(ctx, config); + window['histChart' + id] = new Chart(ctx, config); } - } \ No newline at end of file diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor b/EgwCoreLib.Razor/ChartMultiLine.razor new file mode 100644 index 0000000..60523c5 --- /dev/null +++ b/EgwCoreLib.Razor/ChartMultiLine.razor @@ -0,0 +1,4 @@ +@using Microsoft.JSInterop + + + diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor.cs b/EgwCoreLib.Razor/ChartMultiLine.razor.cs new file mode 100644 index 0000000..9b03066 --- /dev/null +++ b/EgwCoreLib.Razor/ChartMultiLine.razor.cs @@ -0,0 +1,131 @@ +using EgwCoreLib.Razor.Data; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using System.ComponentModel.DataAnnotations.Schema; +using System.Data; +using System.Reflection.Emit; + +namespace EgwCoreLib.Razor +{ + public partial class ChartMultiLine + { + #region Public Properties + + [Parameter] + public bool AddSlash { get; set; } = false; + + [Parameter] + public int AnimationTime { get; set; } = 0; + + + [Parameter] + public List DataSets { get; set; } = null!; + + [Parameter] + public string GridColor { get; set; } = ""; + + [Parameter] + public string Id { get; set; } = "myMLP"; + + [Parameter] + public List ChartLabels { get; set; } = new List(); + + [Parameter] + public string TextColor { get; set; } = ""; + + #endregion Public Properties + + #region Protected Methods + + /// + /// 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) + { + string jsPath = "./_content/EgwCoreLib.Razor/ChartMultiLine.razor.js"; + if (AddSlash) + { + jsPath = "/." + jsPath; + } + module = await JSRuntime.InvokeAsync("import", jsPath); + await Task.Delay(250); + 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() + { + List dynData = new List(); + foreach (var item in DataSets) + { + dynData.Add(new + { + data = item.valY, + label = item.label, + borderColor = item.borderColor, + backgroundColor = item.backgroundColor, + lineTension = item.lineTension, + stepped = item.stepped, + fill = item.fill + }); + } + + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "line", + options = new + { + Responsive = true, + MaintainAspectRatio = false, + plugins = new + { + legend = new + { + display = true, + labels = new + { + color = TextColor, + }, + }, + }, + Animation = new + { + Duration = AnimationTime + }, + }, + data = new + { + datasets = dynData, + labels = ChartLabels + } + }; + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + + + #endregion Protected Methods + + #region Private Properties + + [Inject] + private IJSRuntime JSRuntime { get; set; } = null!; + + private IJSObjectReference module { get; set; } = null!; + + + #endregion Private Properties + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor.js b/EgwCoreLib.Razor/ChartMultiLine.razor.js new file mode 100644 index 0000000..d7c7021 --- /dev/null +++ b/EgwCoreLib.Razor/ChartMultiLine.razor.js @@ -0,0 +1,12 @@ +///Setup del chart desiderato con id univoco +window.setup = (id, config) => { + var ctx = document.getElementById(id); + if (window['mlChart' + id] instanceof Chart) { + window['mlChart' + id].destroy(); + window['mlChart' + id] = new Chart(ctx, config); + } + else { + window['mlChart' + id] = new Chart(ctx, config); + } + +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/ChartTS.razor.js b/EgwCoreLib.Razor/ChartTS.razor.js index 2e45682..6a03d1b 100644 --- a/EgwCoreLib.Razor/ChartTS.razor.js +++ b/EgwCoreLib.Razor/ChartTS.razor.js @@ -1,12 +1,12 @@ ///Setup del chart desiderato con id univoco window.setup = (id, config) => { var ctx = document.getElementById(id); - if (window['myChart' + id] instanceof Chart) { - window['myChart' + id].destroy(); - window['myChart' + id] = new Chart(ctx, config); + if (window['tsChart' + id] instanceof Chart) { + window['tsChart' + id].destroy(); + window['tsChart' + id] = new Chart(ctx, config); } else { - window['myChart' + id] = new Chart(ctx, config); + window['tsChart' + id] = new Chart(ctx, config); } } \ No newline at end of file diff --git a/EgwCoreLib.Razor/Data/chartJsData.cs b/EgwCoreLib.Razor/Data/chartJsData.cs index faa9976..9146d94 100644 --- a/EgwCoreLib.Razor/Data/chartJsData.cs +++ b/EgwCoreLib.Razor/Data/chartJsData.cs @@ -12,5 +12,34 @@ public decimal x { get; set; } public decimal y { get; set; } } + + public class chartJsDataSetXY + { + public string label { get; set; } = "DataSet00"; + public string borderColor { get; set; } = "blue"; + public string backgroundColor { get; set; } = "aqua"; + public double lineTension { get; set; } = 0; + public bool stepped { get; set; } = false; + public string fill { get; set; } = "false"; + public List data { get; set; } = new List(); + public string[] valX + { + get => data.Select(val => $"{val.x}").ToArray(); + } + public string[] valY + { + get => data.Select(val => $"{val.y}").ToArray(); + } + } + + public class chartJsDataSetTS + { + public string label { get; set; } = "DataSet00"; + public string borderColor { get; set; } = "blue"; + public string backgroundColor { get; set; } = "aqua"; + public double lineTension { get; set; } = 0; + public bool stepped { get; set; } = false; + public List data { get; set; } = new List(); + } } } diff --git a/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj b/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj index 8bd3f95..9a99e29 100644 --- a/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj +++ b/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj @@ -30,11 +30,16 @@ + + + true + PreserveNewest + true PreserveNewest