Spostamento org classi chartJs + nuova opzione horiz chart

2022-02-24 12:09:33 +01:00
parent b760d4fa1a
commit d6c226ae1a
9 changed files with 65 additions and 15 deletions
@@ -14,9 +14,9 @@ using Microsoft.JSInterop;
 using MP.Stats;
 using MP.Stats.Shared;

-namespace MP.Stats.Components
+namespace MP.Stats.Components.ChartJs
 {
-    public partial class ChartJsBar
+    public partial class BarPlot
    {
        [Inject]
        IJSRuntime JSRuntime { get; set; }
@@ -26,6 +26,9 @@ namespace MP.Stats.Components

        [Parameter]
        public string Legenda { get; set; } = "Legenda";
+
+        [Parameter]
+        public bool Horizontal { get; set; } = false;
        [Parameter]
        public string[]? Data { get; set; }

@@ -44,6 +47,7 @@ namespace MP.Stats.Components
            //}
        }

+
        /// <summary>
        /// Inizializzazione rendering componente
        ///
@@ -56,7 +60,7 @@ namespace MP.Stats.Components
        /// <returns></returns>
        protected async Task renderChart()
        {
-            // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
+            // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
            var config = new
            {
                type = "bar",
@@ -81,17 +85,60 @@ namespace MP.Stats.Components
                {
                    datasets = new[] {
                        new {
-                            data = Data, 
-                            borderColor = lineColor, 
-                            backgroundColor = backColor, 
-                            borderWidth = 1, 
+                            data = Data,
+                            borderColor = lineColor,
+                            backgroundColor = backColor,
+                            borderWidth = 1,
                            label = Legenda
                        }
                    },
                    labels = Labels
                }
            };
-            await JSRuntime.InvokeVoidAsync("setup", Id, config);
+            // 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);
+            }
        }
    }
 }