Added more data to dashboard view

src/app/dashboard/dashboard.component.html

@@ -22,6 +22,20 @@
     </div>
   </div>
   <div class="row">
+    <div *ngIf="showGraph.percentofcustomerssectorgraph" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-primary">
+        <div class="card-block">
+          <div class="h1 text-muted text-right mb-4">
+            <i class="icon-pie-chart"></i>
+          </div>
+          <div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
+          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
+          <div class="progress progress-white progress-xs mt-3">
+            <div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+      </div>
+    </div><!--/.col-->
     <div *ngIf="showGraph.customersthisweekgraph" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-primary">
         <div class="card-block pb-0">
@@ -73,6 +87,50 @@
         </div>
       </div>
     </div><!--/.col-->
+    <div *ngIf="showGraph.customerslastmonthgraph" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-info">
+        <div class="card-block pb-0">
+          <button type="button" class="btn btn-transparent p-0 float-right">
+            <i class="icon-location-pin"></i>
+          </button>
+          <h4 class="mb-0">9.823</h4>
+          <p>Customers last month</p>
+        </div>
+        <div class="chart-wrapper px-3" style="height:70px;">
+          <canvas baseChart class="chart"
+          [datasets]="lineChart3Data"
+          [labels]="lineChart3Labels"
+          [options]="lineChart3Options"
+          [colors]="lineChart3Colours"
+          [legend]="lineChart3Legend"
+          [chartType]="lineChart3Type"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div *ngIf="showGraph.customerslastyeargraph" class="col-sm-6 col-lg-3">
+      <div class="card card-inverse card-info">
+        <div class="card-block pb-0">
+          <button type="button" class="btn btn-transparent p-0 float-right">
+            <i class="icon-location-pin"></i>
+          </button>
+          <h4 class="mb-0">9.823</h4>
+          <p>Customers last year</p>
+        </div>
+        <div class="chart-wrapper px-3" style="height:70px;">
+          <canvas baseChart class="chart"
+          [datasets]="lineChart4Data"
+          [labels]="lineChart4Labels"
+          [options]="lineChart4Options"
+          [colors]="lineChart4Colours"
+          [legend]="lineChart4Legend"
+          [chartType]="lineChart4Type"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div><!--/.col-->
     <div *ngIf="showGraph.pointsthisweekgraph" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-warning">
         <div class="card-block pb-0">
@@ -91,12 +149,12 @@
         </div>
         <div class="chart-wrapper" style="height:70px;">
           <canvas baseChart class="chart"
-          [datasets]="lineChart3Data"
+          [datasets]="lineChart5Data"
-          [labels]="lineChart3Labels"
+          [labels]="lineChart5Labels"
-          [options]="lineChart3Options"
+          [options]="lineChart5Options"
-          [colors]="lineChart3Colours"
+          [colors]="lineChart5Colours"
-          [legend]="lineChart3Legend"
+          [legend]="lineChart5Legend"
-          [chartType]="lineChart3Type"
+          [chartType]="lineChart5Type"
           (chartHover)="chartHovered($event)"
           (chartClick)="chartClicked($event)"></canvas>
         </div>

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Directive, Component, OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
 import { Router } from '@angular/router';
@@ -9,6 +9,8 @@ import { Router } from '@angular/router';
 export class DashboardComponent implements OnInit {
   customersThisWeek: any;
   customersLastWeek: any;
+  customersLastMonth: any;
+  customersLastYear: any;
   pointsThisWeek: any;
   pointsLastWeek: any;
   customersThisMonth: any;
@@ -16,7 +18,8 @@ export class DashboardComponent implements OnInit {
   pointsTotal: any;
   averageTransactionToday: any;
   shuffledArray: any;
-  showGraph;
+  showGraph: any;
+  percentOfCustomersSector: any;
 
   constructor(
   private http: Http,
@@ -29,6 +32,8 @@ export class DashboardComponent implements OnInit {
         console.log(result);
         // Return what graphs to show
         this.showGraph = result.graphstoshow;
+        // Percentage Chart
+        this.percentOfCustomersSector = result.percentofcustomerssector;
         // Chart 1
         this.customersThisWeek = result.customersthisweek;
         this.lineChart1Data[0].data = this.customersThisWeek.customerno;
@@ -38,10 +43,18 @@ export class DashboardComponent implements OnInit {
         this.lineChart2Data[0].data = this.customersLastWeek.customerno;
         this.lineChart2Labels = this.customersLastWeek.day;
         // Chart 3
-        this.pointsThisWeek = result.pointsthisweek;
+        this.customersLastMonth = result.customerslastmonth;
-        this.lineChart3Data[0].data = this.pointsThisWeek.points;
+        this.lineChart3Data[0].data = this.customersLastMonth.customerno;
-        this.lineChart3Labels = this.pointsThisWeek.day;
+        this.lineChart3Labels = this.customersLastMonth.day;
         // Chart 4
+        this.customersLastYear = result.customerslastyear;
+        this.lineChart4Data[0].data = this.customersLastYear.customerno;
+        this.lineChart4Labels = this.customersLastYear.day;
+        // Chart 5
+        this.pointsThisWeek = result.pointsthisweek;
+        this.lineChart5Data[0].data = this.pointsThisWeek.points;
+        this.lineChart5Labels = this.pointsThisWeek.day;
+        // Chart 6
         this.pointsLastWeek = result.pointslastweek;
         this.barChart1Data[0].data = this.pointsLastWeek.points;
         this.barChart1Labels = this.pointsLastWeek.day;
@@ -221,17 +234,110 @@ export class DashboardComponent implements OnInit {
   ];
   public lineChart2Legend = false;
   public lineChart2Type = 'line';
-
+  
-
   // lineChart3
   public lineChart3Data: Array<any> = [
+    {
+      data: [],
+      label: 'Series B'
+    }
+  ];
+  public lineChart3Labels: Array<any> = [];
+  public lineChart3Options: any = {
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        display: false
+      }],
+      yAxes: [{
+        display: false
+      }]
+    },
+    elements: {
+      line: {
+        borderWidth: 2
+      },
+      point: {
+        radius: 2,
+        hitRadius: 10,
+        hoverRadius: 4,
+      },
+    },
+    legend: {
+      display: false
+    }
+  };
+  public lineChart3Colours: Array<any> = [
+    { // grey
+      backgroundColor: this.brandInfo,
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChart3Legend = false;
+  public lineChart3Type = 'line';
+  
+  // lineChart4
+  public lineChart4Data: Array<any> = [
+    {
+      data: [],
+      label: 'Series B'
+    }
+  ];
+  public lineChart4Labels: Array<any> = [];
+  public lineChart4Options: any = {
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        gridLines: {
+          color: 'transparent',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          fontSize: 2,
+          fontColor: 'transparent',
+        }
+
+      }],
+      yAxes: [{
+        display: false,
+        ticks: {
+          display: false,
+        }
+      }],
+    },
+    elements: {
+      line: {
+        tension: 0.00001,
+        borderWidth: 1
+      },
+      point: {
+        radius: 4,
+        hitRadius: 10,
+        hoverRadius: 4,
+      },
+    },
+    legend: {
+      display: false
+    }
+  };
+  public lineChart4Colours: Array<any> = [
+    { // grey
+      backgroundColor: this.brandInfo,
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChart4Legend = false;
+  public lineChart4Type = 'line';
+  
+  // lineChart5
+  public lineChart5Data: Array<any> = [
     {
       data: [],
       label: 'Series A'
     }
   ];
-  public lineChart3Labels: Array<any> = [];
+  public lineChart5Labels: Array<any> = [];
-  public lineChart3Options: any = {
+  public lineChart5Options: any = {
     maintainAspectRatio: false,
     scales: {
       xAxes: [{
@@ -255,14 +361,14 @@ export class DashboardComponent implements OnInit {
       display: false
     }
   };
-  public lineChart3Colours: Array<any> = [
+  public lineChart5Colours: Array<any> = [
     {
       backgroundColor: 'rgba(255,255,255,.2)',
       borderColor: 'rgba(255,255,255,.55)',
     }
   ];
-  public lineChart3Legend = false;
+  public lineChart5Legend = false;
-  public lineChart3Type = 'line';
+  public lineChart5Type = 'line';
 
 
   // barChart1

src/app/providers/api-service.ts

@@ -102,25 +102,42 @@ export class ApiService {
   public graph_data(data) {
     return Observable.of(
     {
-      // graphstoshow is on server and changes every hour, listing what graphs to display
+    // graphstoshow is on server and changes every hour, listing what graphs to display
-      "graphstoshow" :
+    "graphstoshow" :
-        {
+      {
-          customersthisweekgraph : true,
+        customersthisweekgraph : true,
-          customerslastweekgraph : false,
+        customerslastweekgraph : true,
-          pointsthisweekgraph : true,
+        customerslastmonthgraph : true,
-          pointslastweekgraph : false,
+        customerslastyeargraph : true,
-          
+        percentofcustomerssectorgraph : true,
-        },
+        pointsthisweekgraph : true,
-      "customersthisweek" :
+        pointslastweekgraph : true,
-        {
+      },
-          day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+    "customersthisweek" :
-          customerno : [1,2,3,4,5,6,7],
+      {
-        },
+        day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
-      "customerslastweek" :
+        customerno : [1,2,3,4,5,6,7],
-        {
+      },
-          day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+    "customerslastweek" :
-          customerno : [7,6,5,4,3,2,1],
+      {
-        },
+        day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
+        customerno : [7,6,5,4,3,2,1],
+      },
+      // can take differing size arrays, so any month works. Example here is for April
+      "customerslastmonth" :
+      {
+        day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8',
+        'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16',
+        'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24',
+        'April 25','April 26','April 27','April 28','April 29','April 30'],
+        customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
+      },
+      "customerslastyear" :
+      {
+        day : ['January','February','March','April','May','June','July','August','September','October','November','December'],
+        customerno : [7,6,5,4,3,2,1,8,9,10,11,12],
+      },
+      percentofcustomerssector : 76,
       "pointsthisweek" :
         {
           day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],