From 55e62a6b87b315675813e60eb3d9f3a13bfee4bc Mon Sep 17 00:00:00 2001
From: Finn <toyou1995@gmail.com>
Date: Tue, 20 Aug 2019 16:43:53 +0100
Subject: [PATCH] properly displaying essential purchases dataset

---
 src/app/dashboard/dashboard.component.html | 166 ++++++++++-----------
 src/app/dashboard/dashboard.component.ts   |  27 ++--
 src/environments/environment.ts            |   2 +-
 3 files changed, 100 insertions(+), 95 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 8520235..7c5dafd 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -12,101 +12,101 @@
     </div><!--/.col-->
   </div><!--/.row-->
   <panel-graph></panel-graph>
-<div class=row>
-  <div class="col-xl-6">
-    <div class="card">
-      <div class="card-block">
-        <div class="row">
-          <div class="col-12">
-            <h4 class="card-title mb-0">Number of Essential Purchases</h4>
-          </div>
-        </div>
-        <div class="chart-wrapper">
-          <canvas baseChart class="chart"
-          [datasets]="barChartDataEssential"
-          [labels]="barChartLabelsEssential"
-          [options]="barChartOptionsEssential"
-          [chartType]="barChartTypeEssential"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div>
-  </div><!--/.col-->
-  <div class="col-xl-6">
-    <div class="card">
-      <div class="card-block">
-        <div class="row">
-          <div class="col-12">
-            <h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
-          </div><!--/.col-->
-        </div><!--/.row-->
-        <div class="chart-wrapper">
-          <canvas baseChart class="chart"
-          [datasets]="barChartDataCategory"
-          [labels]="barChartLabelsCategory"
-          [options]="barChartOptionsCategory"
-          [colors]="barChartColoursCategory"
-          [legend]="barChartLegendCategory"
-          [chartType]="barChartTypeCategory"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div>
-  </div><!--/.col-->
-  <div  *ngIf="showCategoryDoughnutChart" class="col-xl-6">
-    <div class="card">
+  <div class=row>
+    <div class="col-xl-6">
+      <div class="card">
         <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title mb-0">Spending by Category</h4>
+              <h4 class="card-title mb-0">Number of Essential Purchases</h4>
             </div>
           </div>
-          <div class="chart-wrapper">
+          <div *ngIf="showEssentialBarChart" class="chart-wrapper">
             <canvas baseChart class="chart"
-              [datasets]="doughnutChartDataCategory"
-              [labels]="doughnutChartLabelsCategory"
-              [options]="doughnutChartOptionsCategory"
-              [legend]="chartLegend"
-              [chartType]="chartType"
-              (chartHover)="chartHovered($event)"
-              (chartClick)="chartClicked($event)"></canvas>
+            [datasets]="barChartDataEssential"
+            [labels]="barChartLabelsEssential"
+            [options]="barChartOptionsEssential"
+            [chartType]="barChartTypeEssential"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
           </div>
         </div>
       </div>
-  </div>
+    </div><!--/.col-->
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
+            </div><!--/.col-->
+          </div><!--/.row-->
+          <div class="chart-wrapper">
+            <canvas baseChart class="chart"
+            [datasets]="barChartDataCategory"
+            [labels]="barChartLabelsCategory"
+            [options]="barChartOptionsCategory"
+            [colors]="barChartColoursCategory"
+            [legend]="barChartLegendCategory"
+            [chartType]="barChartTypeCategory"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div  *ngIf="showCategoryDoughnutChart" class="col-xl-6">
+      <div class="card">
+          <div class="card-block">
+            <div class="row">
+              <div class="col-12">
+                <h4 class="card-title mb-0">Spending by Category</h4>
+              </div>
+            </div>
+            <div class="chart-wrapper">
+              <canvas baseChart class="chart"
+                [datasets]="doughnutChartDataCategory"
+                [labels]="doughnutChartLabelsCategory"
+                [options]="doughnutChartOptionsCategory"
+                [legend]="chartLegend"
+                [chartType]="chartType"
+                (chartHover)="chartHovered($event)"
+                (chartClick)="chartClicked($event)"></canvas>
+            </div>
+          </div>
+        </div>
+    </div>
     <div class="col-xl-6">
       <org-pie-panel></org-pie-panel>
     </div>
-<div class="col-xl-6">
-  <div class="card">
-    <div class="card-block">
-      <div class="row">
-        <div class="col-12">
-          <h4 class="card-title float-left mb-0"> Global Puchases by Category</h4>
-        </div>
-        <div class="col-12">
-          <div *ngIf="showTotalCategoryList" class="chart-wrapper">
-            <ul class="icons-list">
-              <!-- New loop  -->
-              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
-                <i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
-                <div class="desc">
-                  <div class="title">{{ category.category || 'N/A' }}</div>
-                </div>
-              <div class="value">
-                <div class="small text-muted">Bought</div>
-                <strong>{{ category.value || 'N/A' }}</strong>
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title float-left mb-0"> Global Puchases by Category</h4>
+            </div>
+            <div class="col-12">
+              <div *ngIf="showTotalCategoryList" class="chart-wrapper">
+                <ul class="icons-list">
+                  <!-- New loop  -->
+                  <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
+                    <i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
+                    <div class="desc">
+                      <div class="title">{{ category.category || 'N/A' }}</div>
+                    </div>
+                  <div class="value">
+                    <div class="small text-muted">Bought</div>
+                    <strong>{{ category.value || 'N/A' }}</strong>
+                  </div>
+                  </li>
+                  <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
+                    <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
+                  </li>
+                </ul>
               </div>
-              </li>
-              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
-              </li>
-            </ul>
+            </div>
+          </div><!--/.row-->
         </div>
       </div>
-    </div><!--/.row-->
-  </div>
-</div>
-</div>
+    </div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index ddd479b..9a0367d 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -97,13 +97,13 @@ export class DashboardComponent {
 
   public purchaseNotEssential: number;
   public purchaseEssential: number;
-  public showEssentialBarChart = false;
+  public showEssentialBarChart:boolean = false;
   public showCategoryBarChart = false;
   public showCategoryDoughnutChart = false;
 
-  public barChartDataEssential:any[]=[
-    {data: 0, label: 'Essential', stack: '1'},
-    {data: 0, label: 'Non-Essential', stack: '1'},
+  public barChartDataEssential: ChartDataSets[] = [
+    {data: [0], label: 'Essential', stack: '1'},
+    {data: [0], label: 'Non-Essential', stack: '1'},
   ];
   public barChartLabelsEssential:string[] = ['All Purchases'];
   public barChartOptionsEssential:any = {
@@ -247,17 +247,11 @@ export class DashboardComponent {
         this.setWeekPurchaseList(result.weeks);
         this.setWeekData(result);
         this.setChartDataCat(result.data.cat_total);
+        this.setChartDataEssential(result.data.essentials);
         this.totalCategoryList = result.data.cat_list;
         if (this.totalCategoryList) {
           this.showTotalCategoryList = true;
         }
-        this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
-        this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
-        this.barChartDataEssential = [
-          {data: this.purchaseEssential, label: 'Essential', stack: '1'},
-          {data: this.purchaseNotEssential, label: 'Non-Essential', stack: '1'},
-        ];
-        this.showEssentialBarChart = true;
       },
       error => {
         console.log('Retrieval Error');
@@ -266,6 +260,17 @@ export class DashboardComponent {
     );
   }
 
+  private setChartDataEssential (dataEs: any) {
+    this.purchaseEssential = dataEs.purchase_no_essential_total;
+    this.purchaseNotEssential = dataEs.purchase_no_total - this.purchaseEssential;
+    this.barChartDataEssential = [
+      {data: [this.purchaseEssential], label: 'Essential', stack: '1'},
+      {data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
+    ];
+    this.showEssentialBarChart = true;
+    console.log(this.barChartDataEssential);
+  }
+
   private setChartDataCat(dataCat: any) {
     this.barChartLabelsCategory = Object.keys(dataCat);
     let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 4dd4515..bd440f0 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'https://dev.peartrade.org/api',
+  apiUrl: 'https://dev.localspend.co.uk/api',
   mapApiKey: 'CHANGEME',
   enableAnalytics: false,
   analyticsKey: 'CHANGEME',