Inserita parte preliminare per fare grafici parametri

2022-03-08 18:55:09 +01:00
parent b1d0b02fd8
commit ffdfcdf9a9
5 changed files with 225 additions and 5 deletions
@@ -0,0 +1,35 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace MP.MONO.Data
+{
+    public class chartJsData
+    {
+        #region Public Classes
+
+        public class chartJsTSerie
+        {
+            #region Public Properties
+
+            public DateTime x { get; set; }
+            public double y { get; set; }
+
+            #endregion Public Properties
+        }
+
+        public class chartJsXY
+        {
+            #region Public Properties
+
+            public double x { get; set; }
+            public double y { get; set; }
+
+            #endregion Public Properties
+        }
+
+        #endregion Public Classes
+    }
+}
@@ -9,7 +9,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MP.MONO.Data", "MP.MONO.Dat
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MP.MONO.Core", "MP.MONO.Core\MP.MONO.Core.csproj", "{7DE649D8-511E-4674-A170-7E7AFDE4FD89}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MachineSim", "MachineSim\MachineSim.csproj", "{4C719185-F1C9-4066-8464-183166475CB5}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MachineSim", "MachineSim\MachineSim.csproj", "{4C719185-F1C9-4066-8464-183166475CB5}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -0,0 +1,142 @@
+@using MP.MONO.Data
+@inject IJSRuntime JSRuntime
+
+<canvas id="@Id"></canvas>
+
+@code {
+
+    private List<chartJsData.chartJsTSerie> _DataTS { get; set; } = null!;
+
+    [Parameter]
+    public string Id { get; set; } = "MyTs";
+
+    [Parameter]
+    public string Title { get; set; } = "Demo Line";
+
+    [Parameter]
+    public List<chartJsData.chartJsTSerie> DataTS
+    {
+        get
+        {
+            return _DataTS;
+        }
+        set
+        {
+            _DataTS = value;
+            //var pUpd = Task.Run(async () => await renderChart());
+            //pUpd.Wait();
+        }
+    }
+
+    [Parameter]
+    public List<string> Labels { get; set; } = new List<string>();
+
+    [Parameter]
+    public List<string> pointColor { 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 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>
+    /// <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 = "line",
+            options = new
+            {
+                responsive = true,
+                scales = new
+                {
+                    yAxes = new
+                    {
+                        display = true,
+                        position = "right",
+                        ticks = new
+                        {
+                            maxTicksLimit = 10
+                        },
+                        suggestedMin = MinValue != MaxValue ? MinValue : "auto",
+                        suggestedMax = MinValue != MaxValue ? MaxValue : "auto"
+                    },
+                    xAxes = new
+                    {
+                        type = "time",
+                        distribution = "linear",
+                    }
+                },
+                plugins = new
+                {
+                    legend = new
+                    {
+                        display = false
+                    },
+                },
+                Animation = false,
+                AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
+            },
+            data = new
+            {
+                labels = Labels,
+                datasets = new[]
+                            {
+                    new
+                    {
+                        data = DataTS,
+                        pointBorderColor = backColor,
+                        borderColor = lineColor,
+                        backgroundColor = backColor,
+                        fill = true,
+                        PointRadius = 2,
+                        BorderWidth = 1,
+                        lineTension= lTens,
+                        stepped= false,
+                        label= Title
+                    }
+                }
+            }
+        };
+        await JSRuntime.InvokeVoidAsync("setup", Id, config);
+    }
+}
@@ -9,8 +9,8 @@
    <ul class="list-group">
        @foreach (var item in ListRecords)
        {
-            <li class="list-group-item list-group-item-action">
-                <div class="d-flex w-100 justify-content-between" title="order">
+            <li class="list-group-item list-group-item-action" @onclick="() => raiseSelect(item.Title)">
+                <div class="d-flex w-100 justify-content-between" title="click to show graph">
                    @if (!string.IsNullOrEmpty(item.CssIcon))
                    {
                        <div class="d-flex flex-column">
@@ -35,8 +35,35 @@
                    </div>
                </div>
            </li>
+           @* @if (item.Title != null) {
+                <div class="p-1 py-md-2">
+                    @if (ListRecords == null || ListRecords.Count == 0)
+                    {
+                        <LoadingDataSmall></LoadingDataSmall>
+                    }
+                    else
+                    {
+                        @*<Line Id="@(ListRecords.)" AspRatio="2" DataTS="@LevelVal" lineColor="@getLineColors("0.75")" backColor="@getFillColors("0.25")" pointColor="@getPointColors("1")" lTens="0" Title="Livello" MinValue="0" MaxValue="30000"></Line>
+                        <MP.MONO.UI.Components.Chart.Line AspRatio="2" DataTS="@LevelVal"></MP.MONO.UI.Components.Chart.Line>
+                    }
+                </div>
+            }*@
        }
    </ul>
+   @* @if (string.IsNullOrEmpty(EC_SelValue)
+    {
+        <div class="p-1 py-md-2">
+                    @if (ListRecords == null || ListRecords.Count == 0)
+                    {
+                        <LoadingDataSmall></LoadingDataSmall>
+                    }
+                    else
+                    {
+                        <MP.MONO.UI.Components.Chart.Line AspRatio="2" DataTS="@LevelVal"></MP.MONO.UI.Components.Chart.Line>
+                    }
+                </div>
+    }*@
+

 }
 else
@@ -1,9 +1,11 @@
+using Microsoft.AspNetCore.Components;
 using MP.MONO.Core.DTO;
 using MP.MONO.Data;
 using Newtonsoft.Json;

 namespace MP.MONO.UI.Components
 {
+
    public partial class ParamOverview
    {
        #region Private Properties
@@ -14,6 +16,14 @@ namespace MP.MONO.UI.Components

        #region Private Methods

+       
+
+        [Parameter]
+        public EventCallback<string> EC_SelValue { get; set; }
+
+        protected List<chartJsData.chartJsTSerie> LevelVal = new List<chartJsData.chartJsTSerie>();
+
+
        private void ParametersPipe_EA_NewMessage(object? sender, EventArgs e)
        {
            PubSubEventArgs currArgs = (PubSubEventArgs)e;
@@ -56,6 +66,12 @@ namespace MP.MONO.UI.Components
            return answ;
        }

-        #endregion Protected Methods
+        protected void raiseSelect(string SelectedValue)
+        {
+
+            EC_SelValue.InvokeAsync(SelectedValue);
+        }
+
    }
-}
+    #endregion Protected Methods
+}