egwcorelib/EgwCoreLib.BlazorTest/Pages/Index.razor

@page "/"

<PageTitle>Index</PageTitle>
<div>

    <div class="row py-4" style="background-color: #ACDDAC;">
        <div class="col-4">
            @*<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
            <rect width="10" height="10">
            <animate attributeName="rx"
            values="0;5;0"
            dur="5s"
            repeatCount="indefinite" />
            </rect>
            </svg>*@
        </div>
        <div class="col-4">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <radialGradient id="RadialGrad2">
                        <stop offset="0%" stop-color="#000000" />
                        <stop offset="80%" stop-color="#151515" />
                        <stop offset="90%" stop-color="#444444" />
                        <stop offset="100%" stop-color="#878787" />
                    </radialGradient>
                </defs>
                <rect width="100" height="100" rx="50" fill="url(#RadialGrad2)" fill-opacity="0.5">
                </rect>
                <text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
                <g>
                    <rect x="10%" y="10%" width="80%" height="80%" fill="white" fill-opacity="0.1">
                    </rect>
                    <text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">
                        testo più lungo... 0123456789
                        <animate attributeName="x"
                                 values="10%;10%;-10%;-80%;-100%;-100%;10%"
                                 dur="6s"
                                 begin="2s"
                                 repeatCount="indefinite" />
                    </text>
                </g>
            </svg>
        </div>
        <div class="col-4">
            <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <radialGradient id="RadialGrad2">
                        <stop offset="0%" stop-color="#000000" />
                        <stop offset="80%" stop-color="#151515" />
                        <stop offset="90%" stop-color="#444444" />
                        <stop offset="100%" stop-color="#878787" />
                    </radialGradient>
                </defs>
                <rect width="10" height="10" rx="5" fill="url(#RadialGrad2)" fill-opacity="0.5">
                </rect>
            </svg>
        </div>
        <div class="col-2 bg-dark">
        </div>
        <div class="col-2 bg-dark">
        </div>
        <div class="col-2 bg-dark">
            <CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
        </div>
        <div class="col-2 bg-dark">
            <CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
        </div>
        <div class="col-2 bg-dark">
        </div>
        <div class="col-2 bg-dark">
        </div>
    </div>
    <div class="row">
        <div class="col-12 containerCalendario">
            <div class="calendario">
                <div class="d-flex justify-content-between">
                    <div>
                        <CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" StrokeColorVal="#F1C40F" ShowCircleBtn="true"></CircleGauge>
                    </div>
                    <div>
                        <CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" StrokeColorVal="#00FF00" ShowCircleBtn="true"></CircleGauge>
                    </div>
                    <div>
                        <CircleGauge Titolo="12:00" Testo="Caricate" maxVal="480" currVal="720" StrokeColorVal="#F1C40F" StrokeColorValOuter="#01C4FF" ShowCircleBtn="true"></CircleGauge>
                    </div>
                </div>
                <div class="containerBtnTemp">
                    <button class="btn btn-sm btn-warning">
                        TEMP
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    protected List<CircleGaugeMulti.CircSegm> DDemo1 = new List<CircleGaugeMulti.CircSegm>();
    protected List<CircleGaugeMulti.CircSegm> DDemoIn2 = new List<CircleGaugeMulti.CircSegm>();
    protected List<CircleGaugeMulti.CircSegm> DDemoOut2 = new List<CircleGaugeMulti.CircSegm>();

    protected int currVal1 = 1000;
    protected int currVal2 = 1000;
    protected int maxVal = 1000;

    protected override void OnInitialized()
    {
        DDemo1.Clear();
        currVal1 = 800;
        DDemo1.Add(new CircleGaugeMulti.CircSegm() { Color = "#DCFD15", Value = 800 });
        DDemo1.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = 300 });
        Random rnd = new Random();
        DDemoIn2.Clear();
        DDemoOut2.Clear();
        currVal2 = 1300;
        DDemoIn2.Add(new CircleGaugeMulti.CircSegm() { Color = "#DCFD15", Value = 1000 });
        DDemoIn2.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = 600 });
        DDemoOut2.Add(new CircleGaugeMulti.CircSegm() { Color = "#1367FD", Value = 300 });
        // DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#1515FD", Value = 700 });
        // currVal = rnd.Next(maxVal - 200, maxVal + 500);
        // DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#13FD67", Value = currVal / 4 });
        // DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#ACFD15", Value = currVal / 4 });
        // DataDemo.Add(new CircleGaugeMulti.CircSegm() { Color = "#1515FD", Value = currVal / 2 });
    }
}