fix
This commit is contained in:
@@ -5,109 +5,49 @@
|
||||
<app-breadcrumb [title]="'Dashboad 2'" [items]="['Home']" [active_item]="'Dashboad 2'"></app-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>Income</h5>
|
||||
<p class="text-muted">Income last 7 days</p>
|
||||
</div>
|
||||
<h3 class="text-info">{{dashboardModel?.incomeLastWeek | number: '1.2-6'}}</h3>
|
||||
</div>
|
||||
<div class="card-content mt-2">
|
||||
<div class="progress skill-progress m-b-5 w-100">
|
||||
<div class="progress-bar l-bg-purple width-per-45" role="progressbar" aria-valuenow="45"
|
||||
aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="col-4 col-sm-4 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>Balance</h5>
|
||||
</div>
|
||||
<h3 class="text-danger">{{dashboardModel?.balance | number: '0.2-2'}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.incomePreviousWeek}}">
|
||||
<p class="text-muted mb-0">Change previous 7 days</p>
|
||||
<p class="text-muted mb-0">{{dashboardModel?.incomeChange | number: '1.2'}}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 col-sm-4 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>Debit balance</h5>
|
||||
<p class="text-muted"></p>
|
||||
</div>
|
||||
<h3 class="text-success">{{dashboardModel?.balanceDebit | number: '0.2-2'}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 col-sm-4 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>Credit balance</h5>
|
||||
</div>
|
||||
<h3 class="text-danger">{{dashboardModel?.balanceCredit | number: '0.2-2'}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>Outcome</h5>
|
||||
<p class="text-muted">Outcome last 7 days</p>
|
||||
</div>
|
||||
<h3 class="text-success">{{dashboardModel?.outcomeLastWeek | number: '1.2-6'}}</h3>
|
||||
</div>
|
||||
<div class="card-content mt-2">
|
||||
<div class="progress skill-progress m-b-5 w-100">
|
||||
<div class="progress-bar l-bg-orange width-per-45" role="progressbar" aria-valuenow="45"
|
||||
aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.outcomePreviousWeek}}">
|
||||
<p class="text-muted mb-0">Change previous 7 days</p>
|
||||
<p class="text-muted mb-0">{{dashboardModel?.outcomeChange | number: '1.2'}}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>New Orders</h5>
|
||||
<p class="text-muted">Fresh New Order</p>
|
||||
</div>
|
||||
<h3 class="text-danger">15</h3>
|
||||
</div>
|
||||
<div class="card-content mt-2">
|
||||
<div class="progress skill-progress m-b-5 w-100">
|
||||
<div class="progress-bar l-bg-cyan width-per-45" role="progressbar" aria-valuenow="45" aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="text-muted mb-0">Change</p>
|
||||
<p class="text-muted mb-0">50%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5>New Users</h5>
|
||||
<p class="text-muted">Joined New User</p>
|
||||
</div>
|
||||
<h3 class="text-secondary">12</h3>
|
||||
</div>
|
||||
<div class="card-content mt-2">
|
||||
<div class="progress skill-progress m-b-5 w-100">
|
||||
<div class="progress-bar l-bg-red width-per-45" role="progressbar" aria-valuenow="45" aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-2">
|
||||
<p class="text-muted mb-0">Change</p>
|
||||
<p class="text-muted mb-0">25%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row clearfix">
|
||||
<!-- Bar chart with line -->
|
||||
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
|
||||
|
||||
@@ -65,8 +65,8 @@ export class Dashboard2Component implements OnInit {
|
||||
this.httpClient
|
||||
.get<DashboardModel>(ApiRoutes.Dashboard)
|
||||
.subscribe(data => {
|
||||
data.incomeChange = this.calcChanges(data.incomeLastWeek, data.incomePreviousWeek);
|
||||
data.outcomeChange = this.calcChanges(data.outcomeLastWeek, data.outcomePreviousWeek);
|
||||
data.incomeChange = this.calcChanges(data.incomeLast, data.incomePrevious);
|
||||
data.outcomeChange = this.calcChanges(data.outcomeLast, data.outcomePrevious);
|
||||
this.dashboardModel = data;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
export interface DashboardModel {
|
||||
incomeLastWeek: number;
|
||||
incomePreviousWeek: number;
|
||||
incomeLast: number;
|
||||
incomePrevious: number;
|
||||
incomeChange: number;
|
||||
outcomeLastWeek: number;
|
||||
outcomePreviousWeek: number;
|
||||
outcomeLast: number;
|
||||
outcomePrevious: number;
|
||||
outcomeChange: number;
|
||||
balance: number;
|
||||
balanceDebit: number;
|
||||
balanceCredit: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user