diff --git a/MP.Stats/Components/ChartJs/BarPlot.razor b/MP.Stats/Components/ChartJs/BarPlot.razor index bf9c0864..876358b3 100644 --- a/MP.Stats/Components/ChartJs/BarPlot.razor +++ b/MP.Stats/Components/ChartJs/BarPlot.razor @@ -4,122 +4,123 @@ @code { - [Parameter] - public string Id { get; set; } = "MyHist"; + [Parameter] + public string Id { get; set; } = "MyHist"; - [Parameter] - public string Legenda { get; set; } = "Legenda"; + [Parameter] + public string Legenda { get; set; } = "Legenda"; - [Parameter] - public bool Horizontal { get; set; } = false; - [Parameter] - public string[]? Data { get; set; } + [Parameter] + public bool Horizontal { get; set; } = false; - [Parameter] - public string[]? Labels { get; set; } + [Parameter] + public string[]? Data { get; set; } - [Parameter] - public List lineColor { get; set; } = new List(); - [Parameter] - public List backColor { get; set; } = new List(); + [Parameter] + public string[]? Labels { get; set; } - protected override async Task OnAfterRenderAsync(bool firstRender) + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + protected override async Task OnAfterRenderAsync(bool 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, tipo verticale + var config = new { - await renderChart(); + 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 + } + }; + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale + var configHor = new + { + type = "bar", + options = new + { + indexAxis = "y", + 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 + } + }; + if (Horizontal) + { + await JSRuntime.InvokeVoidAsync("setup", Id, configHor); } - - - /// - /// 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() + else { - // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale - 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 - } - }; - // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale - var configHor = new - { - type = "bar", - options = new - { - indexAxis = "y", - 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 - } - }; - if (Horizontal) - { - await JSRuntime.InvokeVoidAsync("setup", Id, configHor); - } - else - { - await JSRuntime.InvokeVoidAsync("setup", Id, config); - } + await JSRuntime.InvokeVoidAsync("setup", Id, config); } } } diff --git a/MP.Stats/Components/ChartJs/Line.razor b/MP.Stats/Components/ChartJs/Line.razor index 82558606..5d5031a3 100644 --- a/MP.Stats/Components/ChartJs/Line.razor +++ b/MP.Stats/Components/ChartJs/Line.razor @@ -13,8 +13,10 @@ [Parameter] public List lineColor { get; set; } = new List(); + [Parameter] public List backColor { get; set; } = new List(); + [Parameter] public int lTens { get; set; } = 0; diff --git a/MP.Stats/Components/ChartJs/PieChart.razor b/MP.Stats/Components/ChartJs/PieChart.razor index b1c7cfff..98f10c64 100644 --- a/MP.Stats/Components/ChartJs/PieChart.razor +++ b/MP.Stats/Components/ChartJs/PieChart.razor @@ -11,10 +11,15 @@ [Parameter] public List Data { get; set; } = null!; + [Parameter] + public List Labels { get; set; } = new List(); + [Parameter] public List lineColor { get; set; } = new List(); + [Parameter] public List backColor { get; set; } = new List(); + [Parameter] public int lTens { get; set; } = 0; @@ -56,7 +61,7 @@ { legend = new { - position = "top" + position = "right" }, title = new { @@ -64,25 +69,19 @@ text = "Chart.js Pie Chart" } } - // plugins = { - // legend = - // { - // position = "top", - // }, - //} }, data = new { + labels = Labels.ToArray(), datasets = new[] - { + { new { data = Data, borderColor= lineColor, - backgroundColor= backColor, - label= "Temperatura Rilevata" + backgroundColor= backColor } -} + } } }; await JSRuntime.InvokeVoidAsync("setup", Id, config); diff --git a/MP.Stats/Components/ChartJs/StepLine.razor b/MP.Stats/Components/ChartJs/StepLine.razor index bb36481a..541a81dc 100644 --- a/MP.Stats/Components/ChartJs/StepLine.razor +++ b/MP.Stats/Components/ChartJs/StepLine.razor @@ -13,6 +13,7 @@ [Parameter] public List lineColor { get; set; } = new List(); + [Parameter] public List backColor { get; set; } = new List(); diff --git a/MP.Stats/Pages/Test.razor b/MP.Stats/Pages/Test.razor index 4c81435e..c3e3d18f 100644 --- a/MP.Stats/Pages/Test.razor +++ b/MP.Stats/Pages/Test.razor @@ -35,9 +35,6 @@
- @*
- -
*@
@@ -50,8 +47,8 @@
-
- +
+
diff --git a/MP.Stats/Pages/Test.razor.cs b/MP.Stats/Pages/Test.razor.cs index 0c98050d..1dc6b7ec 100644 --- a/MP.Stats/Pages/Test.razor.cs +++ b/MP.Stats/Pages/Test.razor.cs @@ -67,9 +67,6 @@ namespace MP.Stats.Pages protected int lineTens { get; set; } = 0; -#if false - PieChart pieChart; -#endif protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) @@ -86,22 +83,6 @@ namespace MP.Stats.Pages object horizontalLineChartOptions = new { - //Title = new - //{ - // Display = true, - // Text = "Line chart sample" - //}, - //Scales = new - //{ - // XAxes = new object[] - // { - // new { - // //ScaleLabel = new { - // //Display = true, LabelString = "value" }, - // Stacked = true - // } - // } - //}, Tooltips = new { Mode = "nearest", @@ -129,19 +110,15 @@ namespace MP.Stats.Pages ; private async Task HandleRedraw() { -#if false - await pieChart.Clear(); - await pieChart.AddLabelsDatasetsAndUpdate(Labels, GetPieChartDataset()); -#endif // calcolo hist frequenza con EFCore: https://entityframeworkcore.com/knowledge-base/60871048/group-by-and-to-dictionary-in-ef-core-3-1 randData = RandomizeData(); - var histDict = randData.GroupBy(r => r).Select(g => new - { - g.Key, - Count = g.Count() - }).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString()); - histData = histDict.Values.ToArray(); - histLabel = histDict.Keys.Select(x => $"{x}").ToArray(); + //var histDict = randData.GroupBy(r => r).Select(g => new + //{ + // g.Key, + // Count = g.Count() + //}).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString()); + //histData = histDict.Values.ToArray(); + //histLabel = histDict.Keys.Select(x => $"{x}").ToArray(); // calcolo i valori raggruppati in numGroup... int numGroup = (int)Math.Sqrt(numRec); @@ -152,11 +129,12 @@ namespace MP.Stats.Pages { g.Key, Count = g.Count() - }).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString()); - histGroupData = histDictGroup.Values.ToArray(); + }).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count); + histGroupData = histDictGroup.Values.Select(x => $"{x}").ToArray(); histGroupLabel = histDictGroup.Keys.Select(x => $"{x:N2}").ToArray(); - + histData = histDictGroup.Values.Select(x => (double)x).ToList(); + histLabel = histDictGroup.Keys.Select(x => $"{x:N2}").ToList(); dataList = TSData(DateTime.Today.AddHours(-randData.Count), randData).Select(r => new chartJsData.chartJsTSerie() { x = r.Key, y = r.Value }).ToList(); @@ -165,9 +143,9 @@ namespace MP.Stats.Pages bgColors = new List() { "rgba(255, 99, 132, 0.3)", "rgba(255, 159, 64, 0.3)", "rgba(255, 205, 86, 0.3)", "rgba(75, 192, 192, 0.3)", "rgba(54, 162, 235, 0.3)", "rgba(153, 102, 255, 0.3)", "rgba(201, 203, 207, 0.3)" }; } - protected string[]? histData { get; set; } = null; + protected List histData { get; set; } = new List(); - protected string[]? histLabel { get; set; } = null; + protected List histLabel { get; set; } = new List(); protected string[]? histGroupData { get; set; } = null; @@ -180,34 +158,10 @@ namespace MP.Stats.Pages protected List? dataList { get; set; } = null; -#if false - - PieChartDataset GetPieChartDataset() - { - return new PieChartDataset { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors }; - } - - LineChartDataset GetLineChartDataset() - { - return new LineChartDataset { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, Fill = true, PointRadius = 2, BorderDash = new List { } }; - } - - BarChartDataset GetBarChartDataset() - { - return new BarChartDataset { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, HoverBorderWidth = 5 }; - } - - BarChartDataset GetHorizBarChartDataset() - { - return new BarChartDataset { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, HoverBorderWidth = 5 }; - } -#endif string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }; -#if false - List backgroundColors = new List { ChartColor.Fromrgbaa(255, 99, 132, 0.2f), ChartColor.Fromrgbaa(54, 162, 235, 0.2f), ChartColor.Fromrgbaa(255, 206, 86, 0.2f), ChartColor.Fromrgbaa(75, 192, 192, 0.2f), ChartColor.Fromrgbaa(153, 102, 255, 0.2f), ChartColor.Fromrgbaa(255, 159, 64, 0.2f) }; - List borderColors = new List { ChartColor.Fromrgbaa(255, 99, 132, 1f), ChartColor.Fromrgbaa(54, 162, 235, 1f), ChartColor.Fromrgbaa(255, 206, 86, 1f), ChartColor.Fromrgbaa(75, 192, 192, 1f), ChartColor.Fromrgbaa(153, 102, 255, 1f), ChartColor.Fromrgbaa(255, 159, 64, 1f) }; -#endif + + private List RandomizeData() {