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 MP.Stats; using MP.Stats.Shared; namespace MP.Stats.Components { public partial class ChartJsBar { [Inject] IJSRuntime JSRuntime { get; set; } [Parameter] public string Id { get; set; } = "MyHist"; [Parameter] public string Legenda { get; set; } = "Legenda"; [Parameter] public string[]? Data { get; set; } [Parameter] public string[]? Labels { get; set; } [Parameter] public string lineColor { get; set; } = ""; [Parameter] public string backColor { get; set; } = ""; protected override async Task OnAfterRenderAsync(bool firstRender) { //if (!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 = "bar", options = new { responsive = true, scales = new { yAxes = new { suggestedMin = 0, display = true, ticks = new { beginAtZero = true, maxTicksLimit = 10 } } } }, data = new { datasets = new[] { new { data = Data, borderColor = lineColor, backgroundColor = backColor, borderWidth = 1, label = Legenda } }, labels = Labels } }; await JSRuntime.InvokeVoidAsync("setup", Id, config); } } }