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

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


<div class="card">
    <div class="card-header d-flex justify-content-between">
        <div class="px-0">
            <h3>Statistiche Storiche</h3>
        </div>
        <div class="px-0">
            <div>
                <label>Da:</label>
                <input type="datetime-local" @bind="from" />
                <label>A:</label>
                <input type="datetime-local" @bind="to" />
                <button class="btn btn-sm btn-primary" @onclick="Load">Carica</button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <canvas id="chartHistoricalRequests" width="600" height="120"></canvas>
        <canvas id="chartHistoricalAvg" width="600" height="120"></canvas>
        <canvas id="chartHistoricalMax" width="600" height="120"></canvas>
    </div>
</div>

@code {

    private DateTime from = DateTime.Now.AddHours(-24);
    private DateTime to = DateTime.Now;

    private List<string> labels = new();
    private List<double> reqData = new();
    private List<double> avgData = new();
    private List<double> maxData = new();

    private async Task Load()
    {
        var stats = await Calc.GetStatsRangeAsync(from, to);

        labels = stats.HourLabels;
        reqData = stats.Requests;
        avgData = stats.AvgProcessing;
        maxData = stats.MaxProcessing;

        await JSRuntime.InvokeVoidAsync("chartsInterop.createChart", "chartHistoricalRequests", new
        {
            type = "line",
            data = new
            {
                labels,
                datasets = new[]
        {
    new {
    label = "Richieste/ora",
    data = reqData,
    borderColor = "blue"
    }
    }
            }
        });

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

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