Statistics Ui

2023-04-06 22:23:45 +02:00
parent a7ae2bf7ba
commit e194e33d81
12 changed files with 1184 additions and 1 deletions
--- a/Moonlight/Shared/Views/Admin/Statistics.razor
+++ b/Moonlight/Shared/Views/Admin/Statistics.razor
@@ -0,0 +1,128 @@
+@page "/admin/statistics"
+@using Moonlight.App.Models.Misc
+@using Moonlight.App.Services.Statistics
+@using Moonlight.App.Database.Entities
+@using ApexCharts
+
+@inject StatisticsViewService StatisticsViewService
+
+<OnlyAdmin>
+    <div class="row mt-4 mb-2">
+        <div class="col-12 col-lg-6 col-xl">
+            <div class="card card-body">
+                <select class="form-select" @bind="bind">
+                    <option value="1"><TL>Hour</TL></option>
+                    <option value="24"><TL>Day</TL></option>
+                    <option value="744"><TL>Month</TL></option>
+                    <option value="8760"><TL>Year</TL></option>
+                    <option value="867240"><TL>All time</TL></option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <LazyLoader @ref="Loader" Load="Load">
+            @foreach (var charts in Charts.Chunk(2))
+            {
+                <div class="row">
+                    @foreach (var chart in charts)
+                    {
+                        <div class="col-sm-6">
+                            <div class="card mt-4">
+                                <div class="card-header">
+                                    <div class="card-title">
+                                        <TL>@chart.Header</TL>
+                                    </div>
+                                </div>
+                                <div class="card-body">
+                                    <ApexChart TItem="StatisticsData"
+                                               Options="GenerateOptions()"
+                                               OnRendered="OnChartRendered">
+                                        <ApexPointSeries TItem="StatisticsData"
+                                                         Items="chart.Data"
+                                                         SeriesType="SeriesType.Area"
+                                                         Name=""
+                                                         ShowDataLabels="false"
+                                                         XValue="@(e => FormatDate(e.Date))"
+                                                         YValue="@(e => (decimal) Math.Round(e.Value))"/>
+                                    </ApexChart>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            }
+    </LazyLoader>
+</OnlyAdmin>
+
+@code {
+    private StatisticsTimeSpan StatisticsTimeSpan = StatisticsTimeSpan.Day;
+    private LazyLoader Loader;
+    private List<(string Header, StatisticsData[] Data)> Charts = new();
+
+    private int bind
+    {
+        get { return (int) StatisticsTimeSpan; }
+        set { StatisticsTimeSpan = (StatisticsTimeSpan) value;
+            Task.Run(async() => await Loader.Reload());
+        }
+    }
+
+    private async Task Load(LazyLoader loader)
+    {
+        Charts.Clear();
+        
+        Charts.Add(("Servers", StatisticsViewService.GetData("statistics.serversCount", StatisticsTimeSpan)));
+        Charts.Add(("Users", StatisticsViewService.GetData("statistics.usersCount", StatisticsTimeSpan)));
+        Charts.Add(("Domains", StatisticsViewService.GetData("statistics.domainsCount", StatisticsTimeSpan)));
+        Charts.Add(("Databases", StatisticsViewService.GetData("statistics.databasesCount", StatisticsTimeSpan)));
+        Charts.Add(("Websites", StatisticsViewService.GetData("statistics.websitesCount", StatisticsTimeSpan)));
+    }
+    
+    private string FormatDate(DateTime e)
+    {
+        string i2s(int i)
+        {
+            if (i.ToString().Length < 2)
+                return "0" + i;
+            return i.ToString();
+        }
+        
+        return $"{i2s(e.Day)}.{i2s(e.Month)}.{e.Year} {i2s(e.Hour)}:{i2s(e.Minute)}";
+    }
+
+    private ApexChartOptions<StatisticsData> GenerateOptions()
+    {
+        return new()
+        {
+            Legend = new Legend()
+            {
+                Show = false
+            },
+            DataLabels = new DataLabels()
+            {
+                Enabled = false
+            },
+            Xaxis = new XAxis()
+            {
+                Labels = new XAxisLabels()
+                {
+                    Show = false
+                }
+            },
+            Chart = new Chart()
+            {
+                RedrawOnParentResize = true,
+                Toolbar = new Toolbar()
+                {
+                    Show = false
+                },
+                Height = 300
+            }
+        };
+    }
+    
+    private async Task OnChartRendered()
+    {
+    }
+}