Dashboard Commit 3 #8
Merged
barhen
merged 1 commits from BISK2023-21-develop-the-frontend-for-the-dashboard into dev 2 years ago
13 changed files with 275 additions and 63 deletions
@ -0,0 +1,58 @@ |
|||||
|
@using Biskilog_Accounting.Shared.CustomModels; |
||||
|
@using Biskilog_Accounting.Shared.Interfaces; |
||||
|
@inject ICalculator m_calculator |
||||
|
|
||||
|
@if (!IsLoading) |
||||
|
{ |
||||
|
<div class="card"> |
||||
|
<div class="row row-bordered g-0"> |
||||
|
<div class="col-md-8"> |
||||
|
<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.ToShortDateString())" |
||||
|
SeriesType="SeriesType.Bar" /> |
||||
|
</ApexChart> |
||||
|
</div> |
||||
|
<div class="col-md-4"> |
||||
|
<div class="text-center fw-semibold pt-3 mb-2">@SubTitle</div> |
||||
|
<ApexChart TItem="WeeklySaleItem"> |
||||
|
<ApexPointSeries TItem="WeeklySaleItem" |
||||
|
Items="@Series" |
||||
|
Name="Sales" |
||||
|
YValue="@(e => e.Total)" |
||||
|
XValue="@(e => e.Date.Day)" |
||||
|
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{ |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,46 @@ |
|||||
|
using ApexCharts; |
||||
|
using Biskilog_Accounting.Shared.CustomModels; |
||||
|
using Microsoft.AspNetCore.Components; |
||||
|
|
||||
|
namespace Biskilog_Accounting.Client.Pages.Dashboard.Elements |
||||
|
{ |
||||
|
public partial class ChartElement |
||||
|
{ |
||||
|
[Parameter] |
||||
|
public bool IsLoading { get; set; } |
||||
|
[Parameter] |
||||
|
public string Title { get; set; } = string.Empty; |
||||
|
[Parameter] |
||||
|
public string SubTitle { get; set; } = string.Empty; |
||||
|
[Parameter] |
||||
|
public List<WeeklySaleItem> Series { get; set; } = new List<WeeklySaleItem>(); |
||||
|
private ApexChartOptions<WeeklySaleItem> m_options; |
||||
|
|
||||
|
private string m_bestDay { get; set; } = string.Empty; |
||||
|
private string m_worstDay { get; set; } = string.Empty; |
||||
|
private string m_bestSales { get; set; } = string.Empty; |
||||
|
private string m_worstSales { get; set; } = string.Empty; |
||||
|
protected override void OnParametersSet() |
||||
|
{ |
||||
|
m_options = new ApexChartOptions<WeeklySaleItem> |
||||
|
{ |
||||
|
PlotOptions = new PlotOptions |
||||
|
{ |
||||
|
Bar = new PlotOptionsBar |
||||
|
{ |
||||
|
ColumnWidth = "7", |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (Series.Count > 1) |
||||
|
{ |
||||
|
m_bestDay = Series.OrderByDescending(t => t.Total).First().Date.ToShortDateString(); |
||||
|
m_bestSales = m_calculator.FormatMoneyWithCurrency((double)Series.OrderByDescending(t => t.Total).First().Total); |
||||
|
m_worstDay = Series.OrderByDescending(t => t.Total).Last().Date.ToShortDateString(); |
||||
|
m_worstSales = m_calculator.FormatMoneyWithCurrency((double)Series.OrderByDescending(t => t.Total).Last().Total); |
||||
|
} |
||||
|
base.OnParametersSet(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
using System; |
||||
|
using System.Collections.Generic; |
||||
|
using System.Linq; |
||||
|
using System.Text; |
||||
|
using System.Threading.Tasks; |
||||
|
|
||||
|
namespace Biskilog_Accounting.Shared.CustomModels |
||||
|
{ |
||||
|
public class WeeklySaleItem |
||||
|
{ |
||||
|
public DateTime Date { get; set; } |
||||
|
public decimal? Total { get; set; } |
||||
|
public string BranchId { get; set; } = null!; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue