diff --git a/MP.Stats/Components/ChartJs/Line.razor b/MP.Stats/Components/ChartJs/Line.razor new file mode 100644 index 00000000..6bcc1e83 --- /dev/null +++ b/MP.Stats/Components/ChartJs/Line.razor @@ -0,0 +1,93 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public string lineColor { get; set; } = ""; + [Parameter] + public string backColor { get; set; } = ""; + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// 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) + //{ + 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, + scales = new + { + yAxes = new + { + display = true, + ticks = new + { + maxTicksLimit = 10 + } + }, + xAxes = new + { + type = "timeseries", + distribution = "linear", + } + } + }, + data = new + { + datasets = new[] + { + new + { + data = DataTS, + borderColor= lineColor, + backgroundColor= backColor, + lineTension= lTens, + stepped= false, + label= "Temperatura Rilevata" + } + } + } + }; + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.Stats/Pages/Test.razor b/MP.Stats/Pages/Test.razor index 181bc912..f1c8c388 100644 --- a/MP.Stats/Pages/Test.razor +++ b/MP.Stats/Pages/Test.razor @@ -21,6 +21,10 @@ +
+ +
+
@@ -32,16 +36,7 @@
@*
- -
-
-
-
- -
-
-
*@
@@ -52,5 +47,8 @@
+
+ +
diff --git a/MP.Stats/Pages/Test.razor.cs b/MP.Stats/Pages/Test.razor.cs index babb3977..0631976e 100644 --- a/MP.Stats/Pages/Test.razor.cs +++ b/MP.Stats/Pages/Test.razor.cs @@ -65,11 +65,10 @@ namespace MP.Stats.Pages } } + protected int lineTens { get; set; } = 0; + #if false PieChart pieChart; - LineChart lineChart; - HorizontalBarChart barChartHoriz; - BarChart barChart; #endif protected override async Task OnAfterRenderAsync(bool firstRender) { @@ -176,6 +175,8 @@ namespace MP.Stats.Pages protected string[]? histGroupData { get; set; } = null; protected string[]? histGroupLabel { get; set; } = null; + + protected List? dataList { get; set; } = null; #if false