Started porting dashboard stats to AntDesign.

Components can't be rendered with server prerendered??

LANCommander/Extensions/ArrayExtensions.cs

@@ -0,0 +1,19 @@
+namespace LANCommander.Extensions
+{
+    public static class ArrayExtensions
+    {
+        public static T[] ShiftArrayAndInsert<T>(this T[] array, T input, int max)
+        {
+            if (array == null || array.Length < max)
+            {
+                array = new T[max];
+            }
+
+            Array.Copy(array, 1, array, 0, array.Length - 1);
+
+            array[array.Length - 1] = input;
+
+            return array;
+        }
+    }
+}

LANCommander/LANCommander.csproj

@@ -21,6 +21,7 @@
 
   <ItemGroup>
     <PackageReference Include="AntDesign" Version="0.14.3" />
+    <PackageReference Include="AntDesign.Charts" Version="0.3.0" />
     <PackageReference Include="Blazor-ApexCharts" Version="0.9.18-beta" />
     <PackageReference Include="BlazorMonaco" Version="3.0.0" />
     <PackageReference Include="ByteSize" Version="2.1.1" />

LANCommander/Pages/Dashboard/Charts/NetworkDownloadRate.razor

@@ -0,0 +1,62 @@
+@using System.Diagnostics;
+@using LANCommander.Extensions;
+@using AntDesign.Charts;
+<Line @ref="Chart" Config="Config" />
+
+@code {
+    [Parameter] public int TimerHistory { get; set; }
+    [Parameter] public int TimerInterval { get; set; }
+    IChartComponent? Chart;
+
+    Dictionary<string, double[]> Data = new Dictionary<string, double[]>();
+
+    Dictionary<string, PerformanceCounter> PerformanceCounters = new Dictionary<string, PerformanceCounter>();
+
+    LineConfig Config = new LineConfig
+    {
+        Name = "Network Download Rate",
+        Padding = "auto",
+        SeriesField = "Series",
+        YField = "Value",
+        XField = "Index",
+        XAxis = new ValueCatTimeAxis
+        {
+            Type = "dateTime",
+            TickCount = 1
+        }
+    };
+
+    protected override void OnInitialized()
+    {
+        var timer = new System.Timers.Timer();
+
+        timer.Interval = TimerInterval;
+
+        timer.Elapsed += async (s, e) =>
+        {
+            await RefreshData();
+
+            await InvokeAsync(StateHasChanged);
+        };
+
+        timer.Start();
+    }
+
+    private async Task RefreshData()
+    {
+        var category = new PerformanceCounterCategory("Network Interface");
+
+        foreach (var instance in category.GetInstanceNames())
+        {
+            if (!Data.ContainsKey(instance))
+                Data[instance] = new double[TimerHistory];
+
+            if (!PerformanceCounters.ContainsKey(instance))
+                PerformanceCounters[instance] = new PerformanceCounter("Network Interface", "Bytes Received/sec", instance);
+
+            Data[instance] = Data[instance].ShiftArrayAndInsert((double)PerformanceCounters[instance].NextValue(), TimerHistory);
+        }
+
+        await Chart.ChangeData(Data.SelectMany(x => x.Value.Select((y, i) => new { Value = y, Index = i, Series = x.Key })), true);
+    }
+}

LANCommander/Pages/Dashboard/Charts/NetworkUploadRate.razor

@@ -0,0 +1,62 @@
+@using System.Diagnostics;
+@using LANCommander.Extensions;
+@using AntDesign.Charts;
+<Line @ref="Chart" Config="Config" />
+
+@code {
+    [Parameter] public int TimerHistory { get; set; }
+    [Parameter] public int TimerInterval { get; set; }
+    IChartComponent? Chart;
+
+    Dictionary<string, double[]> Data = new Dictionary<string, double[]>();
+
+    Dictionary<string, PerformanceCounter> PerformanceCounters = new Dictionary<string, PerformanceCounter>();
+
+    LineConfig Config = new LineConfig
+    {
+        Name = "Network Upload Rate",
+        Padding = "auto",
+        SeriesField = "Series",
+        YField = "Value",
+        XField = "Index",
+        XAxis = new ValueCatTimeAxis
+        {
+            Type = "dateTime",
+            TickCount = 1
+        }
+    };
+
+    protected override void OnInitialized()
+    {
+        var timer = new System.Timers.Timer();
+
+        timer.Interval = TimerInterval;
+
+        timer.Elapsed += async (s, e) =>
+        {
+            await RefreshData();
+
+            await InvokeAsync(StateHasChanged);
+        };
+
+        timer.Start();
+    }
+
+    private async Task RefreshData()
+    {
+        var category = new PerformanceCounterCategory("Network Interface");
+
+        foreach (var instance in category.GetInstanceNames())
+        {
+            if (!Data.ContainsKey(instance))
+                Data[instance] = new double[TimerHistory];
+
+            if (!PerformanceCounters.ContainsKey(instance))
+                PerformanceCounters[instance] = new PerformanceCounter("Network Interface", "Bytes Sent/sec", instance);
+
+            Data[instance] = Data[instance].ShiftArrayAndInsert((double)PerformanceCounters[instance].NextValue(), TimerHistory);
+        }
+
+        await Chart.ChangeData(Data.SelectMany(x => x.Value.Select((y, i) => new { Value = y, Index = i, Series = x.Key })), true);
+    }
+}

LANCommander/Pages/Dashboard/Charts/ProcessorUtilization.razor

@@ -0,0 +1,50 @@
+@using System.Diagnostics;
+@using LANCommander.Extensions;
+@using AntDesign.Charts;
+<Line @ref="Chart" Config="Config" />
+
+@code {
+    [Parameter] public int TimerHistory { get; set; }
+    [Parameter] public int TimerInterval { get; set; }
+    IChartComponent? Chart;
+
+    double[] Data;
+
+    PerformanceCounter PerformanceCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");
+
+    LineConfig Config = new LineConfig
+    {
+        Name = "Processor Utilization",
+        Padding = "auto",
+        YField = "Value",
+        XField = "Index",
+        XAxis = new ValueCatTimeAxis
+        {
+            Type = "dateTime",
+            TickCount = 1
+        }
+    };
+
+    protected override void OnInitialized()
+    {
+        var timer = new System.Timers.Timer();
+
+        timer.Interval = TimerInterval;
+
+        timer.Elapsed += async (s, e) =>
+        {
+            await RefreshData();
+
+            await InvokeAsync(StateHasChanged);
+        };
+
+        timer.Start();
+    }
+
+    private async Task RefreshData()
+    {
+        Data = Data.ShiftArrayAndInsert((double)PerformanceCounter.NextValue(), TimerHistory);
+
+        await Chart.ChangeData(Data.Select((x, i) => new { Value = x, Index = i }), true);
+    }
+}

LANCommander/Pages/Dashboard/Index.razor

@@ -0,0 +1,10 @@
+@page "/Dashboard"
+@using LANCommander.Pages.Dashboard.Charts
+
+<NetworkDownloadRate TimerHistory="60" TimerInterval="1000" />
+<NetworkUploadRate TimerHistory="60" TimerInterval="1000" />
+<ProcessorUtilization TimerHistory="60" TimerInterval="1000" />
+
+@code {
+
+}

LANCommander/Pages/_Layout.cshtml

@@ -22,7 +22,9 @@
         </div>
 
         <script src="~/_content/MudBlazor/MudBlazor.min.js"></script>
+        <script src="~/lib/antv/g2plot/dist/g2plot.js"></script>
         <script src="~/_content/AntDesign/js/ant-design-blazor.js"></script>
+        <script src="~/_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
         <script src="~/_framework/blazor.server.js"></script>
         <script src="~/_content/BlazorMonaco/jsInterop.js"></script>
         <script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>

LANCommander/libman.json

@@ -37,19 +37,27 @@
         "min/vs/loader.js",
         "min/vs/base/browser/ui/codicons/codicon/codicon.ttf"
       ]
+    },
+    {
+      "provider": "cdnjs",
+      "library": "tabler-icons@1.35.0",
+      "destination": "wwwroot/lib/tabler-icons/",
+      "files": [
+        "iconfont/tabler-icons.min.css",
+        "iconfont/fonts/tabler-icons.eot",
+        "iconfont/fonts/tabler-icons.ttf",
+        "iconfont/fonts/tabler-icons.woff",
+        "iconfont/fonts/tabler-icons.woff2"
+      ]
+    },
+    {
+      "provider": "unpkg",
+      "library": "@antv/g2plot@1.1.28",
+      "destination": "wwwroot/lib/antv/g2plot/",
+      "files": [
+        "dist/g2plot.js",
+        "dist/g2plot.js.map"
+      ]
     }
-  ,
-{
-  "provider": "cdnjs",
-  "library": "tabler-icons@1.35.0",
-  "destination": "wwwroot/lib/tabler-icons/",
-  "files": [
-    "iconfont/tabler-icons.min.css",
-    "iconfont/fonts/tabler-icons.eot",
-    "iconfont/fonts/tabler-icons.ttf",
-    "iconfont/fonts/tabler-icons.woff",
-    "iconfont/fonts/tabler-icons.woff2"
   ]
-}
-]
 }