using EgwCoreLib.Razor.Data; using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; namespace EgwCoreLib.Razor { public partial class ChartTS { #region Public Properties [Parameter] public bool AddSlash { get; set; } = false; [Parameter] public int AnimationTime { get; set; } = 0; [Parameter] public string BackColor { get; set; } = ""; [Parameter] public string ChartLabel { get; set; } = ""; [Parameter] public List DataTS { get; set; } = null!; [Parameter] public string GridColor { get; set; } = ""; [Parameter] public string Id { get; set; } = "MyTs"; [Parameter] public string LineColor { get; set; } = ""; [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/ChartHist.razor.js"; if (AddSlash) { jsPath = "/." + jsPath; } module = await JSRuntime.InvokeAsync("import", jsPath); await Task.Delay(50); 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, MaintainAspectRatio = false, scales = new { yAxes = new { display = true, grid = new { color = GridColor, display = true, }, ticks = new { color = TextColor, maxTicksLimit = 10, } }, xAxes = new { type = "timeseries", distribution = "linear", grid = new { color = GridColor, display = true, }, ticks = new { color = TextColor, }, } }, plugins = new { legend = new { display = true, labels = new { color = TextColor, }, }, }, Animation = new { Duration = AnimationTime }, }, data = new { datasets = new[] { new { data = DataTS, borderColor = LineColor, backgroundColor = BackColor, lineTension = 0, stepped = true, label = ChartLabel } } } }; 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 } }