egwcorelib/EgwCoreLib.BlazorTest/Pages/TestChart.razor

@page "/TestChart"
@using EgwCoreLib.Razor.Data;
@using EgwCoreLib.Utils;

<PageTitle>Test</PageTitle>

<div class="card">
    <div class="card-header d-flex justify-content-between">
        <div class="px-0">
            <h3>Test Grafici Chart.js</h3>
        </div>
        <div class="px-0">
            <Toggler SelFilter="CurrFilt" FilterChanged="SetTipo"></Toggler>
        </div>
    </div>
    <div class="card-body py-1">
        @if (showMulti)
        {
            <div class="row" style="height: 400px;">
                <div class="col-6">
                    <ChartHist Id="01" Data="@histData(1)" Labels="@histLabel(1)" LineColor="rgb(7, 173, 236)" BackColor="rgba(107, 223, 255, 0.5)" ChartLabel="Ore 01"></ChartHist>
                </div>
                <div class="col-6">
                    <ChartMultiLine DataSets="currDS" ChartLabels="ChLabels"></ChartMultiLine>
                </div>
            </div>
        }
        else
        {
            <div class="row" style="height: 400px;">
                <div class="col-6">
                    @if (periodo != null)
                    {
                        <div>
                            Periodo Selezionato: <b>@($"{periodo.Inizio:yyyy/MM/dd}") &rarr; @($"{periodo.Fine:yyyy/MM/dd}")</b>
                        </div>
                    }
                </div>
                <div class="col-6">
                    <PeriodoSel E_PeriodoSel="setPeriodo" CurrPeriodo="@periodo"></PeriodoSel>
                </div>
                <div class="col-4">
                    <ChartHist Id="01" Data="@histData(1)" Labels="@histLabel(1)" LineColor="rgb(7, 173, 236)" BackColor="rgba(107, 223, 255, 0.5)" ChartLabel="Ore 01"></ChartHist>
                </div>
                <div class="col-2 text-center">
                    <div>
                        <Doughnut Id="00" Type="@Doughnut.ChartType.Doughnut" Data="@SimData()" BackgroundColor="@colors" BordWidth="1"></Doughnut>
                    </div>
                    <small>display con animazione</small>
                </div>
                <div class="col-2 text-center">
                    <div>
                        <Doughnut Id="03" Type="@Doughnut.ChartType.Doughnut" Data="@SimData()" BackgroundColor="@colors" BordWidth="3"></Doughnut>
                    </div>
                    <small>display con animazione</small>
                </div>
                <div class="col-4">
                    <ChartHist Id="02" Data="@histData(2)" Labels="@histLabel(2)" LineColor="rgb(173, 7, 236)" BackColor="rgba(223,107,  255, 0.5)" ChartLabel="Ore 02"></ChartHist>
                </div>
            </div>
        }
    </div>
</div>