You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
3.5 KiB
80 lines
3.5 KiB
2 years ago
|
@using Biskilog_Accounting.Shared.CustomModels;
|
||
|
|
@using Biskilog_Accounting.Shared.Interfaces;
|
||
|
|
@inject ICalculator m_calculator
|
||
|
|
|
||
|
|
@if (!IsLoading)
|
||
|
|
{
|
||
|
|
@if (MostPurchasedItems.Count() > 5)
|
||
|
|
{
|
||
|
|
<div class="card h-100">
|
||
|
|
<div class="card-body" style="padding:5px !important;">
|
||
|
|
<div class="d-flex justify-content-between flex-sm-row flex-column gap-3">
|
||
|
|
<div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
|
||
|
|
<div class="card-title" style="padding:10px;">
|
||
|
|
<h5 class="text-nowrap mb-2">Top 50 most purchased items</h5>
|
||
|
|
</div>
|
||
|
|
<div class="mt-sm-auto">
|
||
|
|
@foreach (MostPurchasedItem purchasedItem in m_items.Take(5))
|
||
|
|
{
|
||
|
|
<small class="text-nowrap fw-semibold">
|
||
|
|
@($"{purchasedItem.ProductName} x{purchasedItem.NbrTimesSold}")
|
||
|
|
</small> <br />
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ApexChart TItem="MostPurchasedItem" Options="@m_options" Width="150" Height="150">
|
||
|
|
|
||
|
|
<ApexPointSeries TItem="MostPurchasedItem"
|
||
|
|
Items="m_items"
|
||
|
|
SeriesType="SeriesType.Donut"
|
||
|
|
Name="Top 5 performers"
|
||
|
|
XValue="@(e => e.ProductName)"
|
||
|
|
YValue="@(e => e.NbrTimesSold)"
|
||
|
|
OrderByDescending="e=>e.Y" />
|
||
|
|
</ApexChart>
|
||
|
|
</div>
|
||
|
|
<div class="card-body" style="padding:5px !important;">
|
||
|
|
<RadzenDataGrid Data="@MostPurchasedItems" TItem="MostPurchasedItem" AllowPaging="true" AllowSorting="true" PageSize="5">
|
||
|
|
<Columns>
|
||
|
|
<RadzenDataGridColumn TItem="MostPurchasedItem" Property="Revenue" Title="Product">
|
||
|
|
<Template Context="detail">
|
||
|
|
<RadzenRow>
|
||
|
|
<RadzenColumn>
|
||
|
|
<span> <b>@detail.ProductName</b></span> <br />
|
||
|
|
<span> @detail.ProductId</span>
|
||
|
|
</RadzenColumn>
|
||
|
|
<RadzenColumn style="justify-content:end !important;">
|
||
|
|
<span><b>Revenue:</b> @m_calculator.FormatMoneyWithCurrencyKilo((double)detail.Revenue)</span> <br />
|
||
|
|
<span><b>Quantity Sold:</b> @detail.NbrTimesSold</span>
|
||
|
|
</RadzenColumn>
|
||
|
|
</RadzenRow>
|
||
|
|
</Template>
|
||
|
|
</RadzenDataGridColumn>
|
||
|
|
</Columns>
|
||
|
|
</RadzenDataGrid>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="card h-100">
|
||
|
|
<div class="card-body" style="padding:5px !important;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
<style>
|
||
|
|
.rz-datatable-thead th, .rz-grid-table thead th {
|
||
|
|
background-color: #a4d5d3;
|
||
|
|
padding: 0;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rz-paginator {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
</style>
|