From d674c5b59be18650300af9c4abae45a2ec098680 Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Wed, 24 Jan 2018 13:18:51 +0000
Subject: [PATCH] list fully finished

---
 .../dashboard/category-month.component.html   | 30 ++++++++---------
 src/app/dashboard/category-month.component.ts | 33 ++++++++++++++-----
 src/app/dashboard/dashboard.routing.ts        |  2 +-
 src/app/layouts/full-layout.component.html    |  2 +-
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/app/dashboard/category-month.component.html b/src/app/dashboard/category-month.component.html
index ac5ba47..5b5434d 100644
--- a/src/app/dashboard/category-month.component.html
+++ b/src/app/dashboard/category-month.component.html
@@ -12,12 +12,12 @@
             <ul class="horizontal-bars type-2">
               <li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
                 <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
-                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
-                  0</span></span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
+                  ({{ (categoryEntry.value || 0 ) / weekListValueMax1 | 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.first || 0 ) / weekPurchaseList.first | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                    [style.width]="(categoryEntry.value || 0 ) / weekListValueMax1 | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                   </div>
                 </div>
               </li>
@@ -36,19 +36,19 @@
         <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title float-left mb-0">Purchases this week</h4>
+              <h4 class="card-title float-left mb-0">Purchases last week</h4>
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
               <li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
                 <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
-                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
-                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
+                  ({{ (categoryEntry.value || 0 ) / weekListValueMax2 | 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.first || 0 ) / weekPurchaseList.first | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                    [style.width]="(categoryEntry.value || 0 ) / weekListValueMax2 | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                   </div>
                 </div>
               </li>
@@ -67,19 +67,19 @@
         <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title float-left mb-0">Purchases this week</h4>
+              <h4 class="card-title float-left mb-0">Purchases 2 weeks ago</h4>
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
               <li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
                 <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
-                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
-                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
+                  ({{ (categoryEntry.value || 0 ) / weekListValueMax3 | 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.first || 0 ) / weekPurchaseList.first | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                    [style.width]="(categoryEntry.value || 0 ) / weekListValueMax3 | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                   </div>
                 </div>
               </li>
@@ -98,19 +98,19 @@
         <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title float-left mb-0">Purchases this week</h4>
+              <h4 class="card-title float-left mb-0">Purchases 3 weeks ago</h4>
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
             <ul class="horizontal-bars type-2">
               <li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
                 <span class="title">{{ categoryNameList[categoryEntry.category] || 'Uncategorised' }}</span>
-                <span class="value">{{ ( categoryEntry.value || 0 ) }} <span class="text-muted small">
-                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
+                  ({{ (categoryEntry.value || 0 ) / weekListValueMax4 | 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.first || 0 ) / weekPurchaseList.first | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                    [style.width]="(categoryEntry.value || 0 ) / weekListValueMax4 | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
                   </div>
                 </div>
               </li>
diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts
index 1e20a3e..6569a26 100644
--- a/src/app/dashboard/category-month.component.ts
+++ b/src/app/dashboard/category-month.component.ts
@@ -22,6 +22,10 @@ export class CategoryMonthComponent implements OnInit {
   weekList2 = [];
   weekList3 = [];
   weekList4 = [];
+  weekListValueMax1: number = 0;
+  weekListValueMax2: number = 0;
+  weekListValueMax3: number = 0;
+  weekListValueMax4: number = 0;
 
   categoryList: number[] = [];
   dayList: any[] = [];
@@ -32,7 +36,7 @@ export class CategoryMonthComponent implements OnInit {
   myWeek4: any;
   categoryIdList: number[] = [];
   categoryNameList: string[] = [];
-  categoryLimit1: number = 2;
+  categoryLimit1: number = 6;
   categoryLimit2: number = 6;
   categoryLimit3: number = 6;
   categoryLimit4: number = 6;
@@ -75,10 +79,6 @@ export class CategoryMonthComponent implements OnInit {
     this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');
     this.myWeek3 = moment(this.myWeek2).subtract(1, 'weeks').format('YYYY-MM-DD');
     this.myWeek4 = moment(this.myWeek3).subtract(1, 'weeks').format('YYYY-MM-DD');
-    console.log(this.myWeek1);
-    console.log(this.myWeek2);
-    console.log(this.myWeek3);
-    console.log(this.myWeek4);
   }
 
   private setData (data: any) {
@@ -89,10 +89,25 @@ export class CategoryMonthComponent implements OnInit {
     this.weekList2 = prop(data.data, this.myWeek2);
     this.weekList3 = prop(data.data, this.myWeek3);
     this.weekList4 = prop(data.data, this.myWeek4);
-    console.log(this.weekList1);
-    console.log(this.weekList2);
-    console.log(this.weekList3);
-    console.log(this.weekList4);
+    this.getMaxValue(this.weekList1, this.weekList2, this.weekList3, this.weekList4);
+  }
+
+  private getMaxValue (data1: any,
+    data2: any,
+    data3: any,
+    data4: any) {
+    if (data1) {
+      this.weekListValueMax1 = Math.max.apply(Math,data1.map(function(o){return o.value;}));
+    }
+    if (data2) {
+      this.weekListValueMax2 = Math.max.apply(Math,data2.map(function(o){return o.value;}));
+    }
+    if (data3) {
+      this.weekListValueMax3 = Math.max.apply(Math,data3.map(function(o){return o.value;}));
+    }
+    if (data4) {
+      this.weekListValueMax4 = Math.max.apply(Math,data4.map(function(o){return o.value;}));
+    }
   }
 
   private loadMore1 () {
diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts
index 90cb277..6505f9a 100644
--- a/src/app/dashboard/dashboard.routing.ts
+++ b/src/app/dashboard/dashboard.routing.ts
@@ -62,7 +62,7 @@ const routes: Routes = [
       {
         path: 'category-month',
         component: CategoryMonthComponent,
-        data: { title: 'Month Category' },
+        data: { title: 'Budget' },
       },
       {
         path: 'map',
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 40d7c98..8e4d931 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -85,7 +85,7 @@
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/category-month']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-basket"></i></div>
-              <div class="col-10">Month Category</div>
+              <div class="col-10">Budget</div>
             </div>
           </a>
         </li>