Main Update - add RTD8TM Chart

App.razor

@@ -1,4 +1,5 @@
-<Blazored.Modal.CascadingBlazoredModal>
+ 
+<Blazored.Modal.CascadingBlazoredModal>
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
@@ -11,4 +12,8 @@
             </LayoutView>
         </NotFound>
     </Router>
-</Blazored.Modal.CascadingBlazoredModal>
+</Blazored.Modal.CascadingBlazoredModal>
+
+@code{
+
+}

Components/RTD8TMChanelComponent.razor

@@ -54,12 +54,16 @@
     /// <param name="NewName"></param>
     private void ChangeName(string NewName)
     {
+        if (NewName == "")
+        {
+            NewName = "----------";
+        }
         RTD8tmService.SetChanelNames(StackID, ChanelID, NewName);
     }
 
 
 
-    private float RecalculateValues(float resistance, byte Type = 0)
+    public float RecalculateValues(float resistance, byte Type = 0)
     {
         if (Type == RTD8TMSensorTypes.PT100)
         {
@@ -70,7 +74,7 @@
             return resistance;
         }
     }
-    private string ValueType(byte Type)
+    public string ValueType(byte Type)
     {
         if (Type == RTD8TMSensorTypes.PT100)
         {

Components/RTD8TMGraphComponent.razor

@@ -0,0 +1,79 @@
+@using ApexCharts
+@using UI_SequentMicrosystems.Components
+@using UI_SequentMicrosystems.Services
+@using UI_SequentMicrosystems.Models
+
+@inject RTD8TMService _RTD8TMService
+
+<ApexChart TItem="RTD8TMGraphPointModel"
+           Title="Temperature"
+           Options="chartOptions"
+           @ref="chart">
+
+    @foreach (byte stack in _RTD8TMService.GetActualData().Keys)
+    {
+        for (byte chanel = 0; chanel < 8; chanel++)
+        {
+            if (_RTD8TMService.GetChanelName(stack, chanel) != "----------")
+            {
+                <ApexPointSeries TItem="RTD8TMGraphPointModel"
+                Items="@_RTD8TMService.GetChartData(stack, chanel)"
+                Name="@(_RTD8TMService.GetChanelName(stack, chanel))"
+                SeriesType="SeriesType.Line"
+                XValue="@(e => e.Time.ToString("HH:mm:ss"))"
+                YValue="@(e => (decimal)e.Value)"
+                OrderBy="e=>e.X" />
+            }
+        }
+    }
+</ApexChart>
+
+@code {
+    private ApexChart<RTD8TMGraphPointModel> chart;
+    private ApexChartOptions<RTD8TMGraphPointModel> chartOptions;
+
+
+    protected override void OnInitialized()
+    {
+        _RTD8TMService.EventUpdateGraph += UpdateChart;
+
+
+        chartOptions = new ApexChartOptions<RTD8TMGraphPointModel>
+        {
+            Theme = new Theme
+            {
+                Mode = Mode.Dark,
+            },
+            Legend = new Legend
+            {
+                Position = LegendPosition.Bottom,
+                FontSize = "20px",
+                HorizontalAlign = Align.Center
+            }
+        };
+    }
+
+    public async Task UpdateChart(object? o, bool b)
+    {
+        await InvokeAsync(() =>
+        {
+            chart.UpdateSeriesAsync(false);
+
+            StateHasChanged();
+
+        });
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

Models/RTD8TMGraphPointModel.cs

@@ -1,8 +1,8 @@
 namespace UI_SequentMicrosystems.Models
 {
-    public class RTD8TMGraphModel
+    public class RTD8TMGraphPointModel
     {
-        public SortedList<byte, float[]> Data { get; set; }
+        public float Value { get; set; }
         public DateTime Time { get; set; }
     }
 }

Pages/RTD8TMPage.razor

@@ -2,6 +2,7 @@
 @using Blazored.Modal.Services
 @using UI_SequentMicrosystems.Components
 @using UI_SequentMicrosystems.Services
+@using UI_SequentMicrosystems.Models
 @using Blazored.Modal
 
 @inject NavigationManager Navigator
@@ -42,10 +43,11 @@
 </div>
 
 <div class="row">
-    <div class="col-lg-6 graybg">
+    <div class="col-lg-6">
-        <div class="well">
+        @if (_RTD8TMService.GraphData.Keys.Count != 0)
-            1 - Future Graph
+        {
-        </div>
+            <RTD8TMGraphComponent/>
+        }
     </div>
     <div class="col-lg-6">
         <div class="row">
@@ -86,6 +88,7 @@
         });
     }
 
+    
 
 
 

Services/RTD8TMService.cs

@@ -1,4 +1,5 @@
 using System.Timers;
+using UI_SequentMicrosystems.Components;
 using UI_SequentMicrosystems.Models;
 using Wrapper_Api_SequentMicrosystems.RTD8TM;
 
@@ -9,9 +10,9 @@ namespace UI_SequentMicrosystems.Services
         private SortedList<byte, string[]> ChanelNames = new SortedList<byte, string[]>();
         private SortedList<byte, float[]> ActualValues = new SortedList<byte, float[]>();
         private SortedList<byte, byte[]> ValuesType = new SortedList<byte, byte[]>();
-        private List<RTD8TMGraphModel> GraphData = new();
+        public SortedList<byte, List<List<RTD8TMGraphPointModel>>> GraphData = new();
         private byte GraphDataCounterCount = 10;
-        private byte GraphDataCounter = 0;
+        private byte GraphDataCounter = 9;
 
         private string? Address {  get; set; }
 
@@ -20,6 +21,7 @@ namespace UI_SequentMicrosystems.Services
 
         public delegate Task AsyncEventHandler<TEventArgs>(object? sender, TEventArgs? e);
         public event AsyncEventHandler<bool>? EventUpdateValues;
+        public event AsyncEventHandler<bool>? EventUpdateGraph;
 
         public RTD8TMService()
         {
@@ -72,7 +74,13 @@ namespace UI_SequentMicrosystems.Services
             if (GraphDataCounter >= GraphDataCounterCount)
             {
                 GraphDataCounter = 0;
-                GraphData.Add(new() { Data = ActualValues, Time = DateTime.Now });
+
+                ReadChartData();
+
+                if (EventUpdateGraph != null)
+                {
+                    await EventUpdateGraph.Invoke(this, true);
+                }
             }
             else
             {
@@ -227,19 +235,50 @@ namespace UI_SequentMicrosystems.Services
 
         //Graph Data
 
+        /// <summary>
+        /// Get Chart data
+        /// </summary>
+        public void ReadChartData()
+        {
+            DateTime time = DateTime.Now;
+
+            foreach (byte stack in ActualValues.Keys)
+            {
+                if (!GraphData.ContainsKey(stack))
+                {
+                    GraphData.Add(stack, new());
+
+                    for (int chanel = 0; chanel < 8; chanel++)
+                    {
+                        GraphData[stack].Add(new());
+                    }
+                }
+
+                for (byte chanel = 0; chanel < 8; chanel++)
+                {
+                    GraphData[stack][chanel].Add(new RTD8TMGraphPointModel() { Value = new RTD8TMChanelComponent().RecalculateValues(ActualValues[stack][chanel], GetValueType(stack, chanel)), Time = time });
+                }
+            }
+        }
+
         /// <summary>
         /// Get data for graph visualize
         /// </summary>
-        /// <returns>saved Graphn Data</returns>
+        /// <returns>saved chart chanel Data</returns>
-        public List<RTD8TMGraphModel> GetGraphData()
+        public List<RTD8TMGraphPointModel> GetChartData(byte StackID, byte Chanel)
         {
-            return GraphData;
+            if (!GraphData.ContainsKey(StackID))
+            {
+                return new List<RTD8TMGraphPointModel>();
+            }
+
+            return GraphData[StackID][Chanel];
         }
 
         /// <summary>
         /// Clear data from Graph
         /// </summary>
-        public void ClearGraph()
+        public void ClearChart()
         {
             GraphData.Clear();
         }

UI_SequentMicrosystems.csproj

@@ -8,6 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazor-ApexCharts" Version="2.2.0" />
     <PackageReference Include="Blazored.Modal" Version="7.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />

_Imports.razor

@@ -7,4 +7,4 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using UI_SequentMicrosystems
-@using UI_SequentMicrosystems.Layout
+@using UI_SequentMicrosystems.Layout

wwwroot/css/Custom.css

@@ -3,13 +3,11 @@
     color: white;
 }
 
-
+.c-bg-black {
-.graybg {
+    background: black;
-    background: gray;
+    color: white;
-    color: yellow;
 }
 
-
 .no-border {
     border: 0;
     box-shadow: none; /* You may want to include this as bootstrap applies these styles too */