Added category all time purchase list
This commit is contained in:
parent
543bd120fd
commit
4d56dcb233
2 changed files with 42 additions and 4 deletions
|
@ -140,7 +140,36 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title float-left mb-0">Purchases by Sector</h4>
|
||||
<h4 class="card-title float-left mb-0">All Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<ul class="icons-list">
|
||||
<!-- New loop -->
|
||||
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
|
||||
<i [ngClass]="[sectorIcons [category.name] || 'icon-question', sectorClasses [category.name] || 'bg-info']"></i>
|
||||
<div class="desc">
|
||||
<div class="title">{{ category.category || 'N/A' }}</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Bought</div>
|
||||
<strong>{{ category.value || 'N/A' }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title float-left mb-0">All Purchases by Sector</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
|
@ -157,7 +186,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" (click)="sectorLoadMore()"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -24,6 +24,7 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
maxPurchase: number = 0;
|
||||
|
||||
disableSectorButton: boolean = false;
|
||||
disableCategoryButton: boolean = false;
|
||||
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
|
@ -175,7 +176,8 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
sectorLetters: string[] = [];
|
||||
sectorPurchases: number[] = [];
|
||||
sectorLimit: number = 10;
|
||||
|
||||
totalCategoryLimit: number = 10;
|
||||
totalCategoryList: any;
|
||||
sectorList: any;
|
||||
|
||||
// Graph widgets
|
||||
|
@ -219,6 +221,8 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
this.setSectorList(result.sectors);
|
||||
this.setWeekData(result);
|
||||
this.setChartData(result.data.cat_total);
|
||||
this.totalCategoryList = result.data.cat_list;
|
||||
console.log(this.totalCategoryList);
|
||||
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
|
||||
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
|
||||
this.barChartDataEssential = [
|
||||
|
@ -278,11 +282,16 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
|
||||
}
|
||||
|
||||
private loadMore () {
|
||||
private sectorLoadMore () {
|
||||
this.disableSectorButton = true;
|
||||
this.sectorLimit = 22;
|
||||
}
|
||||
|
||||
private categoryLoadMore () {
|
||||
this.disableCategoryButton = true;
|
||||
this.totalCategoryLimit = 30;
|
||||
}
|
||||
|
||||
public convertHex(hex: string, opacity: number) {
|
||||
hex = hex.replace('#', '');
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
|
|
Reference in a new issue