From a44c24eb13b48eb784225e8d2da8d5df4d750353 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Fri, 14 Jan 2022 17:51:33 +0100 Subject: [PATCH] Fix display assi x chartJs --- GPW.CORE.UI/Components/Chart.razor | 132 +++----------------- GPW.CORE.UI/Components/ChartHist.razor | 85 +++++++------ GPW.CORE.UI/Components/ChartTS.razor | 100 +++++++++------ GPW.CORE.UI/Components/DayCheckEditor.razor | 8 +- GPW.CORE.UI/Pages/Test.razor | 2 +- GPW.CORE.UI/wwwroot/lib/chartBoot.js | 13 +- 6 files changed, 136 insertions(+), 204 deletions(-) diff --git a/GPW.CORE.UI/Components/Chart.razor b/GPW.CORE.UI/Components/Chart.razor index b84dd03..ededce3 100644 --- a/GPW.CORE.UI/Components/Chart.razor +++ b/GPW.CORE.UI/Components/Chart.razor @@ -5,11 +5,8 @@ @code { public enum ChartType { - Nd, Pie, - Bar, - Hist, - TS + Bar } [Parameter] @@ -21,9 +18,6 @@ [Parameter] public string[] Data { get; set; } - [Parameter] - public List DataTS{ get; set; } - [Parameter] public string[] BackgroundColor { get; set; } @@ -32,105 +26,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { - if (!firstRender) - { - switch (Type) - { - case ChartType.Hist: - await InitHist(); - break; - - case ChartType.TS: - await InitTs(); - break; - - case ChartType.Nd: - case ChartType.Pie: - case ChartType.Bar: - default: - await InitDefault(); - break; - } - } - } - - protected async Task InitHist() - { - // 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 - { - display = true, - } - } - }, - Data = new - { - Datasets = new[] - { - new { Data = Data, BackgroundColor = BackgroundColor} - }, - Labels = Labels - } - }; - await JSRuntime.InvokeVoidAsync("setup", Id, config); - } - - protected async Task InitTs() - { - // Here we create an anonymous type with all the options - // that need to be sent to 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 = new - { - duration = 100 - } - } - }, - Data = new - { - Datasets = new[] - { - new - { - Data = DataTS, - borderColor= "rgb(7, 173, 236)", - lineTension= 0, - stepped= true, - label= "Temperatura Rilevata" - } - } - } - }; - await JSRuntime.InvokeVoidAsync("setup", Id, config); + await InitDefault(); } protected async Task InitDefault() @@ -139,25 +35,25 @@ // that need to be sent to Chart.js var config = new { - Type = Type.ToString().ToLower(), - Options = new + type = Type.ToString().ToLower(), + options = new { - Responsive = true, + responsive = true, scales = new { - //yAxes = new - //{ - // suggestedMin = 0 - //} + yAxes = new + { + suggestedMin = 0 + } } }, - Data = new + data = new { - Datasets = new[] - { - new { Data = Data, BackgroundColor = BackgroundColor} + datasets = new[] + { + new { data = Data, backgroundColor = BackgroundColor} }, - Labels = Labels + labels = Labels } }; await JSRuntime.InvokeVoidAsync("setup", Id, config); diff --git a/GPW.CORE.UI/Components/ChartHist.razor b/GPW.CORE.UI/Components/ChartHist.razor index ce9fe39..047cbf9 100644 --- a/GPW.CORE.UI/Components/ChartHist.razor +++ b/GPW.CORE.UI/Components/ChartHist.razor @@ -20,50 +20,63 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { - if (!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 { - // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js - var config = new + type = "bar", + options = new { - type = "bar", - options = new + responsive = true, + scales = new { - Responsive = true, - scales = new + yAxes = new { - yAxes = new + suggestedMin = 0, + display = true, + ticks = new { - display = true, - ticks = new - { - beginAtZero = true, - maxTicksLimit = 10 - } - }, - animation = new - { - duration = 100 + beginAtZero = true, + maxTicksLimit = 10 } } - }, - data = new - { - datasets = new[] - { - new - { - data = Data, - borderColor = lineColor, - backgroundColor = backColor, - borderWidth = 1, - label= "Freq. Osservate" - } - }, - labels = Labels } - }; - await JSRuntime.InvokeVoidAsync("setup", Id, config); - } + }, + data = new + { + datasets = new[] + { + new + { + data = Data, + borderColor = lineColor, + backgroundColor = backColor, + borderWidth = 1, + label= "Freq. Osservate" + } + }, + labels = Labels + } + }; + await JSRuntime.InvokeVoidAsync("setup", Id, config); } } \ No newline at end of file diff --git a/GPW.CORE.UI/Components/ChartTS.razor b/GPW.CORE.UI/Components/ChartTS.razor index dcc646f..ccbefc1 100644 --- a/GPW.CORE.UI/Components/ChartTS.razor +++ b/GPW.CORE.UI/Components/ChartTS.razor @@ -15,56 +15,76 @@ [Parameter] public string backColor { get; set; } - + /// + /// 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) { - if (!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 { - // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js - var config = new + type = "line", + options = new { - type = "line", - options = new + responsive = true, + scales = new { - Responsive = true, - scales = new + yAxes = new { - yAxes = new + display = true, + ticks = new { - display = true, - ticks = new - { - maxTicksLimit = 10 - } - }, - xAxes = new - { - type = "timeseries", - distribution = "linear", - }, - animation = new - { - duration = 100 + maxTicksLimit = 10 } - } - }, - data = new - { - datasets = new[] + }, + xAxes = new { - new - { - data = DataTS, - borderColor= lineColor, - backgroundColor= backColor, - lineTension= 0, - stepped= true, - label= "Temperatura Rilevata" - } + type = "timeseries", + distribution = "linear", } } - }; - await JSRuntime.InvokeVoidAsync("setup", Id, config); - } + }, + data = new + { + datasets = new[] + { + new + { + data = DataTS, + borderColor= lineColor, + backgroundColor= backColor, + lineTension= 0, + stepped= true, + label= "Temperatura Rilevata" + } + } + } + }; + await JSRuntime.InvokeVoidAsync("setup", Id, config); } } \ No newline at end of file diff --git a/GPW.CORE.UI/Components/DayCheckEditor.razor b/GPW.CORE.UI/Components/DayCheckEditor.razor index 2f8eff0..0cfa87a 100644 --- a/GPW.CORE.UI/Components/DayCheckEditor.razor +++ b/GPW.CORE.UI/Components/DayCheckEditor.razor @@ -18,10 +18,14 @@
-
+
gestione temperature rilevate + insert quotidiano @TargetDate.ToShortDateString()
-
+
+ + +
+
elenco ultimi check VC19...
diff --git a/GPW.CORE.UI/Pages/Test.razor b/GPW.CORE.UI/Pages/Test.razor index 99398be..83ce5d5 100644 --- a/GPW.CORE.UI/Pages/Test.razor +++ b/GPW.CORE.UI/Pages/Test.razor @@ -13,7 +13,7 @@
- +
diff --git a/GPW.CORE.UI/wwwroot/lib/chartBoot.js b/GPW.CORE.UI/wwwroot/lib/chartBoot.js index 7594b34..8916384 100644 --- a/GPW.CORE.UI/wwwroot/lib/chartBoot.js +++ b/GPW.CORE.UI/wwwroot/lib/chartBoot.js @@ -2,17 +2,16 @@ ///Setup del chart desiderato con id univoco window.setup = (id, config) => { var ctx = document.getElementById(id).getContext('2d'); - //console.log("Calling setup..."); + //let currentDate = new Date(); + //console.log(currentDate + " - Calling setup..."); //console.log(id); if (window['chart-' + id] instanceof Chart) { //window.myChart.destroy(); + window['chart-' + id].destroy(); //console.log("Chart destroyed!"); - window['chart-' + id].update(); - //console.log("Chart " + id + " updated!"); - } - else { - window['chart-' + id] = new Chart(ctx, config); - //console.log("Chart " + id + " created!"); } + + window['chart-' + id] = new Chart(ctx, config); + //console.log("Chart " + id + " created!"); //console.log(window['chart-' + id]); }