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 } }