percent per week data viewing done

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

@@ -10,12 +10,11 @@
       </widget-graph>
     </div><!--/.col-->
   </div><!--/.row-->
-  <!-- http://www.chartjs.org/docs/latest/charts/polar.html?h=polar -->
   <div class=row>
-    <div class="col-md-4">
+    <div class="col-xl-4 col-md-6">
       <panel-pie></panel-pie>
     </div><!--/.col-->
-    <div class="col-md-4">
+    <div class="col-xl-4 col-md-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -27,37 +26,78 @@
             <ul class="horizontal-bars type-2">
               <li>
                 <span class="title">This Week</span>
-                <span class="value">191,235 <span class="text-muted small">(56%)</span></span>
+                <span class="value">{{ (weekPurchaseList.week_0  || 0 ) }} <span
+                  class="text-muted small">({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
                 <div class="bars">
-                  <div class="progress progress-xs">
+                  <div class="progress" style="height: 6px;">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
+                    <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>
                   </div>
                 </div>
               </li>
               <li>
                 <span class="title">Last Week</span>
-                <span class="value">51,223 <span class="text-muted small">(15%)</span></span>
+                <span class="value">{{ weekPurchaseList.week_1 || 0 }} <span
+                  class="text-muted small">({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
                 <div class="bars">
-                  <div class="progress progress-xs">
+                  <div class="progress" style="height: 6px;">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+                    <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>
                   </div>
                 </div>
               </li>
               <li>
                 <span class="title">2 Weeks Ago</span>
-                <span class="value">37,564 <span class="text-muted small">(11%)</span></span>
+                <span class="value">{{ weekPurchaseList.week_2 || 0 }} <span
+                  class="text-muted small">({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
                 <div class="bars">
-                  <div class="progress progress-xs">
+                  <div class="progress" style="height: 6px;">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
+                    <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>
                   </div>
                 </div>
               </li>
               <li>
                 <span class="title">3 Weeks Ago</span>
-                <span class="value">27,319 <span class="text-muted small">(8%)</span></span>
+                <span class="value">{{ weekPurchaseList.week_3 || 0 }} <span
+                  class="text-muted small">({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
                 <div class="bars">
-                  <div class="progress progress-xs">
+                  <div class="progress" style="height: 6px;">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
+                    <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>
+                  </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>
               </li>
@@ -66,7 +106,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-md-4">
+    <div class="col-xl-4">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -83,7 +123,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>1.924</strong>
                 </div>
               </li>
@@ -94,7 +134,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>1.224</strong>
                 </div>
               </li>
@@ -105,7 +145,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>1.163</strong>
                 </div>
               </li>
@@ -116,7 +156,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>928</strong>
                 </div>
               </li>
@@ -127,7 +167,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>893</strong>
                 </div>
               </li>
@@ -138,7 +178,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>121.924</strong>
                 </div>
               </li>
@@ -149,7 +189,7 @@
                   <small>Lorem ipsum dolor sit amet</small>
                 </div>
                 <div class="value">
-                  <div class="small text-muted">Bought this week</div>
+                  <div class="small text-muted">Bought from Sector</div>
                   <strong>12.125</strong>
                 </div>
               </li>

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

@@ -19,12 +19,19 @@ export class DashboardCustomerComponent implements OnInit {
   myRank: any;
   username: any;
 
-  // PolarArea
+  weekPurchaseList = {
-  public polarAreaChartLabels: string[] = ['Local', 'Not Local'];
+    week_0: 0,
-  public polarAreaChartData: number[] = [400, 100];
+    week_1: 0,
-  public polarAreaLegend = true;
+    week_2: 0,
-  public polarAreaChartType = 'polarArea';
+    week_3: 0,
+    week_4: 0,
+    week_5: 0,
+    week_6: 0,
+  };
 
+  sectorList: any;
+
+  // Graph widgets
   public widgetList = [
     {
       type: 'graph',
@@ -57,6 +64,35 @@ export class DashboardCustomerComponent implements OnInit {
   constructor(
   private api: ApiService,
   ) {
+    this.api.basicStats().subscribe(
+      result => {
+        this.setWeekPurchaseList(result.data);
+
+      },
+      error => {
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    );
+  }
+
+  public setWeekPurchaseList (data: any) {
+    this.weekPurchaseList = {
+      week_0: data.purchases[0],
+      week_1: data.purchases[1],
+      week_2: data.purchases[2],
+      week_3: data.purchases[3],
+      week_4: data.purchases[4],
+      week_5: data.purchases[5],
+      week_6: data.purchases[6],
+    };
+    //this.maxPurchase = Math.max(...this.weekPurchaseList);
+    this.maxPurchase = Object.values(this.weekPurchaseList).reduce((a,b) => {
+      if (! a) { a = 0 }
+      if (! b) { b = 0 }
+      return Math.max(a,b);
+    });
+    console.log(this.maxPurchase);
   }
 
   ngOnInit(): void {

src/app/panels/pie-panel.component.ts

@@ -30,10 +30,8 @@ export class PiePanel implements OnInit {
 
   private setData(data: any) {
     this.doughnutChartData = Object.values(data);
-    console.log(this.chartData);
     // setTimeout is currently a workaround for ng2-charts labels
     setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0);
-    console.log(this.chartLabels);
   }
 
   // convert Hex to RGBA