added varying colors based on sector
This commit is contained in:
parent
2ed709476c
commit
2784387b12
2 changed files with 25 additions and 1 deletions
|
@ -85,7 +85,7 @@
|
||||||
<ul class="icons-list">
|
<ul class="icons-list">
|
||||||
<!-- New loop -->
|
<!-- New loop -->
|
||||||
<li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; 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', sectorClasses [sector] || 'bg-info']"></i>
|
||||||
<div class="desc">
|
<div class="desc">
|
||||||
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
|
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -78,6 +78,30 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
U: 'icon-globe',
|
U: 'icon-globe',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sectorClasses = {
|
||||||
|
A: 'bg-primary',
|
||||||
|
B: 'bg-success',
|
||||||
|
C: 'bg-danger',
|
||||||
|
D: 'bg-warning',
|
||||||
|
E: 'bg-info',
|
||||||
|
F: 'bg-primary',
|
||||||
|
G: 'bg-success',
|
||||||
|
H: 'bg-danger',
|
||||||
|
I: 'bg-warning',
|
||||||
|
J: 'bg-info',
|
||||||
|
K: 'bg-primary',
|
||||||
|
L: 'bg-success',
|
||||||
|
M: 'bg-danger',
|
||||||
|
N: 'bg-warning',
|
||||||
|
O: 'bg-info',
|
||||||
|
P: 'bg-primary',
|
||||||
|
Q: 'bg-success',
|
||||||
|
R: 'bg-danger',
|
||||||
|
S: 'bg-warning',
|
||||||
|
T: 'bg-info',
|
||||||
|
U: 'bg-primary',
|
||||||
|
}
|
||||||
|
|
||||||
sectorLetters: string[] = [];
|
sectorLetters: string[] = [];
|
||||||
sectorPurchases: number[] = [];
|
sectorPurchases: number[] = [];
|
||||||
sectorLimit: number = 10;
|
sectorLimit: number = 10;
|
||||||
|
|
Reference in a new issue