properly displaying essential purchases dataset

src/app/dashboard/dashboard.component.html

@@ -12,7 +12,7 @@
     </div><!--/.col-->
   </div><!--/.row-->
   <panel-graph></panel-graph>
-<div class=row>
+  <div class=row>
     <div class="col-xl-6">
       <div class="card">
         <div class="card-block">
@@ -21,7 +21,7 @@
               <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]="barChartDataEssential"
             [labels]="barChartLabelsEssential"
@@ -79,7 +79,7 @@
     <div class="col-xl-6">
       <org-pie-panel></org-pie-panel>
     </div>
-<div class="col-xl-6">
+    <div class="col-xl-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -108,5 +108,5 @@
             </div>
           </div><!--/.row-->
         </div>
-</div>
-</div>
+      </div>
+    </div>

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]);

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',