lux/Lux.UI/Components/Compo/Stats/RealTimeStats.razor

@using EgwCoreLib.Lux.Data.Services
@inject CalcRuidService Calc
@inject IJSRuntime JSRuntime

<h3>Statistiche in tempo reale</h3>

<canvas id="chartRequestsMinute" width="400" height="150"></canvas>
<canvas id="chartRequestsHour" width="400" height="150"></canvas>
<canvas id="chartAvgProcessing" width="400" height="150"></canvas>
<canvas id="chartMaxProcessing" width="400" height="150"></canvas>

@code {
    private dynamic? stats;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await InitCharts();
            _ = UpdateLoop();
        }
    }

    private async Task InitCharts()
    {
        await JSRuntime.InvokeVoidAsync("chartsInterop.createChart", "chartRequestsMinute", new
        {
            type = "line",
            data = new
            {
                labels = new[] { "Now" },
                datasets = new[]
                {
                    new {
                        label = "Richieste/minuto",
                        data = new[] { 0 },
                        borderColor = "blue"
                    }
                }
            }
        });

        await JSRuntime.InvokeVoidAsync("chartsInterop.createChart", "chartRequestsHour", new
        {
            type = "bar",
            data = new
            {
                labels = new[] { "Now" },
                datasets = new[]
                {
                    new {
                        label = "Richieste/ora",
                        data = new[] { 0 },
                        backgroundColor = "green"
                    }
                }
            }
        });

        await JSRuntime.InvokeVoidAsync("chartsInterop.createChart", "chartAvgProcessing", new
        {
            type = "line",
            data = new
            {
                labels = new[] { "Now" },
                datasets = new[]
                {
                    new {
                        label = "Tempo medio (s)",
                        data = new[] { 0 },
                        borderColor = "orange"
                    }
                }
            }
        });

        await JSRuntime.InvokeVoidAsync("chartsInterop.createChart", "chartMaxProcessing", new
        {
            type = "line",
            data = new
            {
                labels = new[] { "Now" },
                datasets = new[]
                {
                    new {
                        label = "Tempo massimo (s)",
                        data = new[] { 0 },
                        borderColor = "red"
                    }
                }
            }
        });
    }

    private async Task UpdateLoop()
    {
        var timer = new PeriodicTimer(TimeSpan.FromSeconds(5));

        while (await timer.WaitForNextTickAsync())
        {
            stats = await Calc.GetStatsAsync();

            await JSRuntime.InvokeVoidAsync("chartsInterop.updateChart",
                "chartRequestsMinute",
                new[] { DateTime.Now.ToString("HH:mm:ss") },
                new[] { (double)stats.RequestsLastMinute });

            await JSRuntime.InvokeVoidAsync("chartsInterop.updateChart",
                "chartRequestsHour",
                new[] { DateTime.Now.ToString("HH:mm:ss") },
                new[] { (double)stats.RequestsLastHour });

            await JSRuntime.InvokeVoidAsync("chartsInterop.updateChart",
                "chartAvgProcessing",
                new[] { DateTime.Now.ToString("HH:mm:ss") },
                new[] { (double)stats.ProcessingAvgLastHour });

            await JSRuntime.InvokeVoidAsync("chartsInterop.updateChart",
                "chartMaxProcessing",
                new[] { DateTime.Now.ToString("HH:mm:ss") },
                new[] { (double)stats.ProcessingMaxLastHour });

            StateHasChanged();
        }
    }
}