Update display charts energy

MP.Stats/Components/ChartJs/Line.razor

@@ -26,6 +26,9 @@
     [Parameter]
     public double AspRatio { get; set; } = 0;
 
+    [Parameter]
+    public bool Stepped { get; set; } = false;
+
 
     [Parameter]
     public string MinValue { get; set; } = "0";
@@ -74,6 +77,8 @@
                 {
                     yAxes = new
                     {
+                        type = "linear",
+                        // type = "logarithmic",
                         display = true,
                         ticks = new
                         {
@@ -96,14 +101,13 @@
                 labels = Labels,
                 datasets = new[]
                         {
-                    new
-                    {
+                    new {
                         data = DataTS,
-                        borderColor= lineColor,
-                        backgroundColor= backColor,
-                        lineTension= lTens,
-                        stepped= false,
-                        label= Title
+                        borderColor = lineColor,
+                        backgroundColor = backColor,
+                        lineTension = lTens,
+                        stepped = Stepped,
+                        label = Title
                     }
                 }
             }

MP.Stats/Components/ChartJs/MultiLine.razor

@@ -0,0 +1,119 @@
+@using MP.Data
+@inject IJSRuntime JSRuntime
+
+<canvas id="@Id"></canvas>
+
+@code {
+
+    [Parameter]
+    public string Id { get; set; } = "MyTs";
+
+    [Parameter]
+    public List<string> Titles { get; set; } = new List<string>() { "Demo Line" };
+
+    [Parameter]
+    public List<List<chartJsData.chartJsTSerie>> DataTSList { get; set; } = null!;
+
+    [Parameter]
+    public List<string> Labels { get; set; } = new List<string>();
+
+    [Parameter]
+    public List<string> lineColor { get; set; } = new List<string>();
+
+    [Parameter]
+    public List<string> backColor { get; set; } = new List<string>();
+
+    [Parameter]
+    public double AspRatio { get; set; } = 0;
+
+    [Parameter]
+    public bool Stepped { get; set; } = false;
+
+
+    [Parameter]
+    public string MinValue { get; set; } = "0";
+
+    [Parameter]
+    public string MaxValue { get; set; } = "0";
+
+    [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)
+    {
+        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>
+    /// <returns></returns>
+    protected async Task renderChart()
+    {
+        int i = 0;
+        // preparo lista di dati...
+        var dataSetsList = DataTSList.Select(dTS => new
+        {
+            data = dTS,
+            borderColor = lineColor[i],
+            backgroundColor = backColor,
+            lineTension = lTens,
+            stepped = Stepped,
+            label = Titles[i++]
+        }).ToList();
+
+        // 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
+                    {
+                        stacked= true,
+                        type = "linear",
+                        // type = "logarithmic",
+                        display = true,
+                        ticks = new
+                        {
+                            maxTicksLimit = 10
+                        },
+                        suggestedMin = MinValue != MaxValue ? MinValue : "auto",
+                        suggestedMax = MinValue != MaxValue ? MaxValue : "auto"
+                    },
+                    xAxes = new
+                    {
+                        type = "time",
+                        distribution = "linear",
+                    }
+                },
+                Animation = false,
+                AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
+            },
+            data = new
+            {
+                labels = Labels,
+                datasets = dataSetsList
+            }
+        };
+        await JSRuntime.InvokeVoidAsync("setup", Id, config);
+    }
+}