Biskilog_Accounting/Client/Pages/Dashboard/Elements/ChartElement.razor

@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@using Microsoft.Fast.Components.FluentUI
@inject ICalculator m_calculator

@if (!IsLoading)
{
    <div class="card" style="min-height:480px;">
        <div class="row row-bordered g-0">
            <div class="col-md-7">
                <h5 class="card-header m-0 me-2 pb-3">@Title</h5>
                <ApexChart TItem="WeeklySaleItem" Options=m_options>

                    <ApexPointSeries TItem="WeeklySaleItem"
                                 Items="@Series"
                                 Name="Sales"
                                 YValue="@(e => e.Total)"
                                 XValue="@(e => e.Date.ToString("dd MMM"))"
                                 SeriesType="SeriesType.Bar" />
                </ApexChart>
            </div>
            <div class="col-md-5">
                <div class="text-center fw-semibold pt-3 mb-2">@SubTitle</div>
                <ApexChart TItem="WeeklySaleItem" Options="options">
                    <ApexPointSeries TItem="WeeklySaleItem" Items="@Series" Name="Sales" YValue="@(e => e.Total)" XValue="@(e => e.Date.ToString("dd MMM"))"
                                 SeriesType="SeriesType.Area" />
                </ApexChart>
                <div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
                    <div class="d-flex">
                        <div class="me-2">
                            <span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span>
                        </div>
                        <div class="d-flex flex-column">
                            <small>Best Day</small>
                            <small class="mb-0">@m_bestDay</small>
                            <small class="mb-0">@m_bestSales</small>
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="me-2">
                            <span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span>
                        </div>
                        <div class="d-flex flex-column">
                            <small>Worst Day</small>
                            <small class="mb-0">@m_worstDay</small>
                            <small class="mb-0">@m_worstSales</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <FluentCard class="card-padding">
        <FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="SkeletonShape.Circle" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
        <FluentSkeleton style="
                border-radius: 4px;
                width: 75px;
                height: 30px;
                margin-top: 20px;
                margin-bottom: 10px;
            "
                    Shape="SkeletonShape.Rect"
                    Shimmer="true"></FluentSkeleton>
    </FluentCard>
}