Add piechart da raffinare

2022-02-25 12:15:17 +01:00
parent 8e5a392c8c
commit 0a26d475f9
7 changed files with 102 additions and 16 deletions
@@ -0,0 +1,87 @@
+@using MP.Data
+@inject IJSRuntime JSRuntime
+
+<canvas id="@Id"></canvas>
+
+@code {
+
+    [Parameter]
+    public string Id { get; set; } = "MyTs";
+
+    [Parameter]
+    public List<double> Data { get; set; } = null!;
+
+    [Parameter]
+    public string lineColor { get; set; } = "";
+    [Parameter]
+    public string backColor { get; set; } = "";
+    [Parameter]
+    public int lTens { get; set; } = 0;
+
+    /// <summary>
+    /// 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
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        //if (!firstRender)
+        //{
+        await renderChart();
+        //}
+    }
+
+    /// <summary>
+    /// 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
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected async Task renderChart()
+    {
+        // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
+        var config = new
+        {
+            type = "pie",
+            options = new
+            {
+                responsive = true,
+                //        plugins = {
+                //    legend =
+                //                {
+                //        position = "top",
+                //                },
+                //                title = {
+                //        display = true,
+                //                text = 'Chart.js Pie Chart'
+                //                 }
+                //}
+            },
+            data = new
+            {
+                datasets = new[]
+                    {
+                    new
+                    {
+                        data = Data,
+                        borderColor= lineColor,
+                        backgroundColor= backColor,
+                        lineTension= lTens,
+                        stepped= false,
+                        label= "Temperatura Rilevata"
+                    }
+}
+            }
+        };
+        await JSRuntime.InvokeVoidAsync("setup", Id, config);
+    }
+}