sector list code fully working

src/app/dashboard/dashboard-customer.component.html

@@ -117,80 +117,80 @@
           <div class="chart-wrapper">
             <ul class="icons-list">
               <li>
-                <i class="icon-screen-desktop bg-primary"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[0]] || 'icon-question'" class="bg-primary"></i>
                 <div class="desc">
-                  <div class="title">Sector A</div>
+                  <div class="title">Sector {{ sectorLetters[0] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <div><small>{{ sectorNames [sectorLetters[0]] }}</small></div>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>1.924</strong>
+                  <strong>{{ sectorPurchases[0] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-screen-smartphone bg-info"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[1]] || 'icon-question'" class="bg-info"></i>
                 <div class="desc">
-                  <div class="title">Sector B</div>
+                  <div class="title">Sector {{ sectorLetters[1] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[1]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>1.224</strong>
+                  <strong>{{ sectorPurchases[1] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-screen-smartphone bg-warning"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[2]] || 'icon-question'" class="bg-warning"></i>
                 <div class="desc">
-                  <div class="title">Sector C</div>
+                  <div class="title">Sector {{ sectorLetters[2] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[2]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>1.163</strong>
+                  <strong>{{ sectorPurchases[2] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-user bg-danger"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[3]] || 'icon-question'" class="bg-danger"></i>
                 <div class="desc">
-                  <div class="title">Sector D</div>
+                  <div class="title">Sector {{ sectorLetters[3] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[3]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>928</strong>
+                  <strong>{{ sectorPurchases[3] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-social-spotify bg-success"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[4]] || 'icon-question'" class="bg-success"></i>
                 <div class="desc">
-                  <div class="title">Sector E</div>
+                  <div class="title">Sector {{ sectorLetters[4] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[4]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>893</strong>
+                  <strong>{{ sectorPurchases[4] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-cloud-download bg-danger"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[5]] || 'icon-question'" class="bg-danger"></i>
                 <div class="desc">
-                  <div class="title">Sector F</div>
+                  <div class="title">Sector {{ sectorLetters[5] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[5]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>121.924</strong>
+                  <strong>{{ sectorPurchases[5] || 'N/A' }}</strong>
                 </div>
               </li>
               <li>
-                <i class="icon-camera bg-warning"></i>
+                <i [ngClass]="sectorIcons [sectorLetters[6]] || 'icon-question'" class="bg-warning"></i>
                 <div class="desc">
-                  <div class="title">Sector G</div>
+                  <div class="title">Sector {{ sectorLetters[6] || 'N/A' }}</div>
-                  <small>Lorem ipsum dolor sit amet</small>
+                  <small>{{ sectorNames [sectorLetters[6]] || 'N/A' }}</small>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought from Sector</div>
-                  <strong>12.125</strong>
+                  <strong>{{ sectorPurchases[6] || 'N/A' }}</strong>
                 </div>
               </li>
             </ul>

src/app/dashboard/dashboard-customer.component.ts

@@ -29,6 +29,55 @@ export class DashboardCustomerComponent implements OnInit {
     week_6: 0,
   };
 
+  sectorNames = {
+    A: 'Agriculture, Forestry & Fishing',
+    B: 'Mining & Quarrying',
+    C: 'Manufacturing',
+    D: 'Electricity, Gas, Steam & Air Conditioning',
+    E: 'Water & Waste Management',
+    F: 'Construction',
+    G: 'Wholesale & Retail Trade',
+    H: 'Transportation & Storage',
+    I: 'Accomodation & Food Services',
+    J: 'Information & Communication',
+    K: 'Financial & Insurance Activities',
+    L: 'Real Estate',
+    M: 'Professional, Scientfic & Technical',
+    N: 'Administrative & Support Services',
+    O: 'Public Administration, Defence & Social Security',
+    P: 'Education',
+    Q: 'Human Health & Social Work',
+    R: 'Arts, Entertainment & Recreation',
+    S: 'Other Service Activities',
+    T: 'Household Domestic Business',
+  }
+
+  sectorIcons = {
+    A: 'icon-drop',
+    B: 'icon-diamond',
+    C: 'icon-settings',
+    D: 'icon-energy',
+    E: 'icon-trash',
+    F: 'icon-wrench',
+    G: 'icon-tag',
+    H: 'icon-speedometer',
+    I: 'icon-cup',
+    J: 'icon-globe',
+    K: 'icon-credit-card',
+    L: 'icon-graph',
+    M: 'icon-chemistry',
+    N: 'icon-drawer',
+    O: 'icon-pie-chart',
+    P: 'icon-graduation',
+    Q: 'icon-support',
+    R: 'icon-film',
+    S: 'icon-calendar',
+    T: 'icon-home',
+  }
+
+  sectorLetters: string[] = [];
+  sectorPurchases: number[] = [];
+
   sectorList: any;
 
   // Graph widgets
@@ -66,8 +115,8 @@ export class DashboardCustomerComponent implements OnInit {
   ) {
     this.api.basicStats().subscribe(
       result => {
-        this.setWeekPurchaseList(result.data);
+        this.setWeekPurchaseList(result.weeks);
-
+        this.setSectorList(result.sectors);
       },
       error => {
         console.log('Retrieval Error');
@@ -92,7 +141,11 @@ export class DashboardCustomerComponent implements OnInit {
       if (! b) { b = 0 }
       return Math.max(a,b);
     });
-    console.log(this.maxPurchase);
+  }
+
+  public setSectorList (data: any) {
+    this.sectorLetters = Object.values(data.sectors);
+    this.sectorPurchases = Object.values(data.purchases);
   }
 
   ngOnInit(): void {