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

@using Lux.UI.Components.Compo.Charts

<div class="card">
    <div class="card-header d-flex justify-content-between">
        <div class="px-0">
            <h3>Statistiche in tempo reale</h3>
        </div>
    </div>
    <div class="card-body">
        <div class="card shadow">
            <div class="card-header">
                <b># Eventi</b>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <PieChart CanvasId="pieEventCount" PieDict="@DatasetCount" PieColor="@PieColors" Label="# Richieste" />

                    </div>
                    <div class="col-10">
                        <StackedBarChart CanvasId="barEventCount" ListX="@ListX" DictY="@DSBarCount" BarColor="@PieColors" />
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow">
            <div class="card-header">
                <b>Durata tot</b>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <PieChart CanvasId="pieElapsed" PieDict="@DataseElapsed" PieColor="@PieColors" Label="Elapsed" />

                    </div>
                    <div class="col-10">
                        <StackedBarChart CanvasId="barEventElapsed" ListX="@ListX" DictY="@DSBarElapsed" BarColor="@PieColors" />
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-3">
                <canvas id="chartPieEnv" width="200" height="180"></canvas>
            </div>
            <div class="col-9">
                <canvas id="chartBarEnv" width="200" height="180"></canvas>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <canvas id="chartPieType" width="400" height="180"></canvas>
            </div>
            <div class="col-9">
                <canvas id="chartBarType" width="400" height="180"></canvas>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <canvas id="chartRequestsMinute" width="400" height="180"></canvas>
            </div>
            <div class="col">
                <canvas id="chartRequestsHour" width="400" height="180"></canvas>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <canvas id="chartAvgProcessing" width="400" height="180"></canvas>
            </div>
            <div class="col">
                <canvas id="chartMaxProcessing" width="400" height="180"></canvas>
            </div>
        </div>
    </div>
</div>