From b4e7cd18cdfee83bdfdcedee8a17805494a990a5 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Fri, 14 Jan 2022 17:03:11 +0100 Subject: [PATCH] Setup preliminare classi oggetti ChartJs OK! --- GPW.CORE.UI/Components/Chart.razor | 133 +- GPW.CORE.UI/Components/ChartHist.razor | 69 + GPW.CORE.UI/Components/ChartTS.razor | 70 + GPW.CORE.UI/GPW.CORE.UI.csproj | 2 +- GPW.CORE.UI/Pages/Test.razor | 11 +- GPW.CORE.UI/Pages/Test.razor.cs | 14 + GPW.CORE.UI/Pages/_Layout.cshtml | 4 +- GPW.CORE.UI/chartJsData.cs | 16 + GPW.CORE.UI/libman.json | 8 + GPW.CORE.UI/wwwroot/lib/chartBoot.js | 22 +- .../chartjs-adapter-luxon.esm.js | 91 + .../chartjs-adapter-luxon.esm.min.js | 1 + .../chartjs-adapter-luxon.js | 96 + .../chartjs-adapter-luxon.min.js | 7 + .../wwwroot/lib/luxon/cjs-browser/luxon.js | 8473 ++++++++++++++++ .../lib/luxon/cjs-browser/luxon.js.map | 1 + .../lib/luxon/cjs-browser/luxon.min.js | 1 + GPW.CORE.UI/wwwroot/lib/luxon/luxon.js | 8478 +++++++++++++++++ GPW.CORE.UI/wwwroot/lib/luxon/luxon.js.map | 1 + GPW.CORE.UI/wwwroot/lib/luxon/luxon.min.js | 1 + .../wwwroot/lib/luxon/luxon.min.js.map | 1 + Resources/ChangeLog.html | 2 +- Resources/VersNum.txt | 2 +- Resources/manifest.xml | 2 +- 24 files changed, 17464 insertions(+), 42 deletions(-) create mode 100644 GPW.CORE.UI/Components/ChartHist.razor create mode 100644 GPW.CORE.UI/Components/ChartTS.razor create mode 100644 GPW.CORE.UI/chartJsData.cs create mode 100644 GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.js create mode 100644 GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.min.js create mode 100644 GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.js create mode 100644 GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.min.js create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.js create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.js.map create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.min.js create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/luxon.js create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/luxon.js.map create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/luxon.min.js create mode 100644 GPW.CORE.UI/wwwroot/lib/luxon/luxon.min.js.map diff --git a/GPW.CORE.UI/Components/Chart.razor b/GPW.CORE.UI/Components/Chart.razor index cea01da..b84dd03 100644 --- a/GPW.CORE.UI/Components/Chart.razor +++ b/GPW.CORE.UI/Components/Chart.razor @@ -5,8 +5,11 @@ @code { public enum ChartType { + Nd, Pie, - Bar + Bar, + Hist, + TS } [Parameter] @@ -18,6 +21,9 @@ [Parameter] public string[] Data { get; set; } + [Parameter] + public List DataTS{ get; set; } + [Parameter] public string[] BackgroundColor { get; set; } @@ -26,7 +32,31 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { - // Here we create an anonymous type with all the options + 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 { @@ -34,26 +64,103 @@ Options = new { Responsive = true, - //Scales = new - //{ - // YAxes = new[] - // { - // new { Ticks = new { - // BeginAtZero=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); + } + + protected async Task InitDefault() + { + // 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 + //{ + // suggestedMin = 0 + //} + } + }, + Data = new + { + Datasets = new[] + { + new { Data = Data, BackgroundColor = BackgroundColor} + }, + Labels = Labels + } + }; + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + } \ No newline at end of file diff --git a/GPW.CORE.UI/Components/ChartHist.razor b/GPW.CORE.UI/Components/ChartHist.razor new file mode 100644 index 0000000..ce9fe39 --- /dev/null +++ b/GPW.CORE.UI/Components/ChartHist.razor @@ -0,0 +1,69 @@ +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyHist"; + + [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) + { + // 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 + { + display = true, + ticks = new + { + beginAtZero = true, + maxTicksLimit = 10 + } + }, + animation = new + { + duration = 100 + } + } + }, + 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 new file mode 100644 index 0000000..dcc646f --- /dev/null +++ b/GPW.CORE.UI/Components/ChartTS.razor @@ -0,0 +1,70 @@ +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List DataTS { get; set; } + + [Parameter] + public string lineColor { get; set; } + [Parameter] + public string backColor { get; set; } + + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (!firstRender) + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a 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= 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/GPW.CORE.UI.csproj b/GPW.CORE.UI/GPW.CORE.UI.csproj index f2ed6e3..cbe7c96 100644 --- a/GPW.CORE.UI/GPW.CORE.UI.csproj +++ b/GPW.CORE.UI/GPW.CORE.UI.csproj @@ -2,7 +2,7 @@ net6.0 - 3.0.2201.1415 + 3.0.2201.1417 enable enable diff --git a/GPW.CORE.UI/Pages/Test.razor b/GPW.CORE.UI/Pages/Test.razor index 9a1db46..99398be 100644 --- a/GPW.CORE.UI/Pages/Test.razor +++ b/GPW.CORE.UI/Pages/Test.razor @@ -7,14 +7,17 @@
- +
- + +
+
+
-
+@*
@@ -287,7 +290,7 @@
-
+
*@