@page "/Test"
@attribute [AllowAnonymous]

@using GPW.CORE.WRKLOG.Components

<PageTitle>Test - Fasi</PageTitle>

<div class="row">
    <div class="col-12">
        <CalendarioAziendale></CalendarioAziendale>
    </div>
        <div class="col-4">
        <ChartTS Id="TempRil" DataTS="@getTsData()" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)"></ChartTS>
    </div>
    <div class="col-4">
        <ChartHist Id="FreqTemp" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
    </div>
    <div class="col-4">
        <Chart Id="Bar" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9", "12", "8", "14" })" BackgroundColor="@(new[] { "yellow","red", "green", "blue"})" Labels="@(new[] { "S01","S02","S03","S04"})"></Chart>
    </div>
</div>

<style>
    .containerTest {
        width: 100%;
        height: 6rem;
        position: relative;
        margin: 0px;
    }

    .box {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
    }

    .overlay {
        z-index: 5;
    }

        .overlay:hover {
            z-index: +100;
            opacity: 1;
        }

</style>

<div class="containerTest table-secondary">
    <div class="box bg-primary overlay" style="width: 35%;">Testo 1</div>
    <div class="box bg-secondary overlay" style="width: 25%; left: 20%; top: 10%;">Testo 2</div>
    <div class="box bg-primary overlay" style="width: 20%; left: 40%; top: 0%;">Testo 3</div>
    <div class="box bg-secondary overlay" style="width: 25%; left: 55%; top: 10%;">Testo 4</div>
</div>