From b0a044db970be81be82eada252b86f8347f388b2 Mon Sep 17 00:00:00 2001
From: Masu-Baumgartner <68913099+Masu-Baumgartner@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:54:48 +0100
Subject: [PATCH] Implemented apex charts for visualisation

The fill animations is buggy
---
 Moonlight.Client/Moonlight.Client.csproj    |   1 +
 Moonlight.Client/UI/Views/Admin/Index.razor | 183 +++++++++++++++++++-
 2 files changed, 183 insertions(+), 1 deletion(-)

diff --git a/Moonlight.Client/Moonlight.Client.csproj b/Moonlight.Client/Moonlight.Client.csproj
index 9bb5a597..df387267 100644
--- a/Moonlight.Client/Moonlight.Client.csproj
+++ b/Moonlight.Client/Moonlight.Client.csproj
@@ -8,6 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Blazor-ApexCharts" Version="3.5.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.6" PrivateAssets="all"/>
         <PackageReference Include="MoonCore" Version="1.6.8" />
diff --git a/Moonlight.Client/UI/Views/Admin/Index.razor b/Moonlight.Client/UI/Views/Admin/Index.razor
index 9507be97..b0cb7616 100644
--- a/Moonlight.Client/UI/Views/Admin/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Index.razor
@@ -1,3 +1,184 @@
 @page "/admin"
 
-<h1>Elo testy</h1>
\ No newline at end of file
+@using ApexCharts
+
+<div class="card max-w-md">
+    <ApexChart @ref="ApexChart" TItem="MyData"
+               Options="Options">
+
+        <ApexPointSeries TItem="MyData"
+                         Items="Data"
+                         Name="Net Profit"
+                         SeriesType="SeriesType.Area"
+                         Color="#3b82f6"
+                         ShowDataLabels="false"
+                         XValue="e => e.Index"
+                         YValue="e => e.Value"/>
+    </ApexChart>
+</div>
+
+@code {
+    private List<MyData> Data { get; set; } = new();
+
+    private ApexChartOptions<MyData> Options;
+    private ApexChart<MyData> ApexChart;
+
+    private int Counter = 0;
+    private int IndexCounter = 0;
+
+    protected override void OnInitialized()
+    {
+        Options = new()
+        {
+            Stroke = new()
+            {
+                Curve = new CurveSelections()
+                {
+                    Curve.Smooth
+                },
+                Width = 4
+            },
+            Title = new()
+            {
+                Text = ""
+            },
+            Chart = new()
+            {
+                Toolbar = new()
+                {
+                    Show = false
+                },
+                Animations = new()
+                {
+                    Easing = Easing.Linear,
+                    DynamicAnimation = new()
+                    {
+                        Speed = 950
+                    }
+                },
+                Zoom = new Zoom
+                {
+                    Enabled = false
+                },
+                Height = "100%",
+                Sparkline = new()
+                {
+                    Enabled = false
+                }
+            },
+            Tooltip = new()
+            {
+                Enabled = false
+            },
+            Xaxis = new()
+            {
+                Range = 20,
+                Tooltip = new()
+                {
+                    Enabled = false
+                },
+                Labels = new()
+                {
+                    Show = false
+                },
+                AxisTicks = new()
+                {
+                    Show = false
+                },
+                AxisBorder = new()
+                {
+                    Show = false
+                }
+            },
+            Yaxis = new(),
+            Series = new(),
+            Grid = new()
+            {
+                Show = false,
+                Padding = new Padding()
+                {
+                    Bottom = 0,
+                    Left = 0,
+                    Right = 0,
+                    Top = 0
+                }
+            },
+        };
+
+        Options.Yaxis.Add(new()
+        {
+            Labels = new()
+            {
+                Show = false,
+                Style = new()
+                {
+                    CssClass = "fs-6",
+                    Colors = new("#FFFFFF")
+                },
+                Formatter = $"function (value) {{ return Math.round(value) + ' Users' }}",
+            },
+            Show = false
+        });
+
+        for (int i = 0; i < 20; i++)
+        {
+            IndexCounter++;
+            Data.Add(new MyData { Index = IndexCounter, Value = 0 });
+        }
+
+        Task.Run(async () =>
+        {
+            await Task.Delay(1000);
+
+            var random = new Random();
+
+            while (true)
+            {
+                var x = random.Next(0, 100);
+                await HandleData(x);
+
+                await Task.Delay(1000);
+            }
+        });
+    }
+
+    public async Task HandleData(int newValue)
+    {
+        if (Counter > 30)
+        {
+            await ApexChart.UpdateSeriesAsync();
+            Counter = 0;
+        }
+
+        IndexCounter++;
+        var item = new MyData()
+        {
+            Index = IndexCounter,
+            Value = newValue
+        };
+
+        Data.Add(item);
+
+        if (Data.Count > 30)
+            Data.RemoveAt(0);
+
+        try
+        {
+            await ApexChart.AppendDataAsync(new[] { item });
+        }
+        catch (TaskCanceledException)
+        {
+            /* ignore task canceled exception */
+        }
+
+        Counter++;
+    }
+
+    public class MyData
+    {
+        public int Index { get; set; }
+        public int Value { get; set; }
+    }
+
+
+}
\ No newline at end of file