frontpage sectors and week stats amended
This commit is contained in:
parent
f4c9724097
commit
d8fab7c4df
2 changed files with 37 additions and 146 deletions
|
@ -19,85 +19,52 @@
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h4 class="card-title float-left mb-0">Purchases Per Week</h4>
|
<h4 class="card-title float-left mb-0">Purchases by Week</h4>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<ul class="horizontal-bars type-2">
|
<ul class="horizontal-bars type-2">
|
||||||
<li>
|
<li>
|
||||||
<span class="title">This Week</span>
|
<span class="title">This Week</span>
|
||||||
<span class="value">{{ (weekPurchaseList.week_0 || 0 ) }} <span
|
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress" style="height: 6px;">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
[style.width]="(weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
[style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">Last Week</span>
|
<span class="title">Last Week</span>
|
||||||
<span class="value">{{ weekPurchaseList.week_1 || 0 }} <span
|
<span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress" style="height: 6px;">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
[style.width]="(weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
[style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">2 Weeks Ago</span>
|
<span class="title">Week Maximum</span>
|
||||||
<span class="value">{{ weekPurchaseList.week_2 || 0 }} <span
|
<span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
(100%)</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress" style="height: 6px;">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
[style.width]="(weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">3 Weeks Ago</span>
|
<span class="title">Weekly Average</span>
|
||||||
<span class="value">{{ weekPurchaseList.week_3 || 0 }} <span
|
<span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} <span class="text-muted small">
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress" style="height: 6px;">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
[style.width]="(weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
[style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="title">4 Weeks Ago</span>
|
|
||||||
<span class="value">{{ weekPurchaseList.week_4 || 0 }} <span
|
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
||||||
<div class="bars">
|
|
||||||
<div class="progress" style="height: 6px;">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
|
||||||
[style.width]="(weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="title">5 Weeks Ago</span>
|
|
||||||
<span class="value">{{ weekPurchaseList.week_5 || 0 }} <span
|
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
||||||
<div class="bars">
|
|
||||||
<div class="progress" style="height: 6px;">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
|
||||||
[style.width]="(weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="title">6 Weeks Ago</span>
|
|
||||||
<span class="value">{{ weekPurchaseList.week_6 || 0 }} <span
|
|
||||||
class="text-muted small">({{ (weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
||||||
<div class="bars">
|
|
||||||
<div class="progress" style="height: 6px;">
|
|
||||||
<div class="progress-bar bg-success" role="progressbar"
|
|
||||||
[style.width]="(weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -117,7 +84,7 @@
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<ul class="icons-list">
|
<ul class="icons-list">
|
||||||
<!-- New loop -->
|
<!-- New loop -->
|
||||||
<li *ngFor="let sector of sectorLetters; let i=index">
|
<li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; let i=index">
|
||||||
<i [ngClass]="sectorIcons [sector] || 'icon-question'" class="bg-primary"></i>
|
<i [ngClass]="sectorIcons [sector] || 'icon-question'" class="bg-primary"></i>
|
||||||
<div class="desc">
|
<div class="desc">
|
||||||
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
|
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
|
||||||
|
@ -127,84 +94,9 @@
|
||||||
<strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
|
<strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li *ngIf="sectorLetters.length > 10 && disableSectorButton == false" class="divider text-center">
|
||||||
<!-- Old code -->
|
<button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
|
||||||
<!-- <li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[0]] || 'icon-question'" class="bg-primary"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">{{ sectorNames [sectorLetters[0]] }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[0] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[1]] || 'icon-question'" class="bg-info"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[1] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[1]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[1] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[2]] || 'icon-question'" class="bg-warning"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[2] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[2]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[2] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[3]] || 'icon-question'" class="bg-danger"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[3] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[3]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[3] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[4]] || 'icon-question'" class="bg-success"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[4] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[4]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[4] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[5]] || 'icon-question'" class="bg-danger"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[5] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[5]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[5] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i [ngClass]="sectorIcons [sectorLetters[6]] || 'icon-question'" class="bg-warning"></i>
|
|
||||||
<div class="desc">
|
|
||||||
<div class="title">Sector {{ sectorLetters[6] || 'N/A' }}</div>
|
|
||||||
<small>{{ sectorNames [sectorLetters[6]] || 'N/A' }}</small>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<div class="small text-muted">Bought</div>
|
|
||||||
<strong>{{ sectorPurchases[6] || 'N/A' }}</strong>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,14 +20,14 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
username: any;
|
username: any;
|
||||||
maxPurchase: number = 0;
|
maxPurchase: number = 0;
|
||||||
|
|
||||||
|
disableSectorButton: boolean = false;
|
||||||
|
|
||||||
weekPurchaseList = {
|
weekPurchaseList = {
|
||||||
week_0: 0,
|
first: 0,
|
||||||
week_1: 0,
|
second: 0,
|
||||||
week_2: 0,
|
max: 0,
|
||||||
week_3: 0,
|
sum: 0,
|
||||||
week_4: 0,
|
count: 0,
|
||||||
week_5: 0,
|
|
||||||
week_6: 0,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
sectorNames = {
|
sectorNames = {
|
||||||
|
@ -75,11 +75,12 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
R: 'icon-film',
|
R: 'icon-film',
|
||||||
S: 'icon-calendar',
|
S: 'icon-calendar',
|
||||||
T: 'icon-home',
|
T: 'icon-home',
|
||||||
U: 'cion-globe',
|
U: 'icon-globe',
|
||||||
}
|
}
|
||||||
|
|
||||||
sectorLetters: string[] = [];
|
sectorLetters: string[] = [];
|
||||||
sectorPurchases: number[] = [];
|
sectorPurchases: number[] = [];
|
||||||
|
sectorLimit: number = 10;
|
||||||
|
|
||||||
sectorList: any;
|
sectorList: any;
|
||||||
|
|
||||||
|
@ -130,19 +131,12 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
|
|
||||||
public setWeekPurchaseList (data: any) {
|
public setWeekPurchaseList (data: any) {
|
||||||
this.weekPurchaseList = {
|
this.weekPurchaseList = {
|
||||||
week_0: data.purchases[0],
|
first: data.first,
|
||||||
week_1: data.purchases[1],
|
second: data.second,
|
||||||
week_2: data.purchases[2],
|
max: data.max,
|
||||||
week_3: data.purchases[3],
|
sum: data.sum,
|
||||||
week_4: data.purchases[4],
|
count: data.count,
|
||||||
week_5: data.purchases[5],
|
|
||||||
week_6: data.purchases[6],
|
|
||||||
};
|
};
|
||||||
this.maxPurchase = Object.keys(this.weekPurchaseList).map(key => this.weekPurchaseList[key]).reduce((a,b) => {
|
|
||||||
if (! a) { a = 0 }
|
|
||||||
if (! b) { b = 0 }
|
|
||||||
return Math.max(a,b);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public setSectorList (data: any) {
|
public setSectorList (data: any) {
|
||||||
|
@ -150,6 +144,11 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
|
this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public loadMore () {
|
||||||
|
this.disableSectorButton = true;
|
||||||
|
this.sectorLimit = 22;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue