From e8dcd22eadaebcd3a4ad29386854527995c9c33a Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 5 Jul 2017 18:08:23 +0100 Subject: [PATCH] Added more data to dashboard view --- src/app/dashboard/dashboard.component.html | 70 ++++++++++- src/app/dashboard/dashboard.component.ts | 130 +++++++++++++++++++-- src/app/providers/api-service.ts | 55 ++++++--- 3 files changed, 218 insertions(+), 37 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index d112087..2815b8d 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -22,6 +22,20 @@
+
+
+
+
+ +
+
{{percentOfCustomersSector}}%
+ Returning Visitors +
+
+
+
+
+
@@ -73,6 +87,50 @@
+
+
+
+ +

9.823

+

Customers last month

+
+
+ +
+
+
+
+
+
+ +

9.823

+

Customers last year

+
+
+ +
+
+
@@ -91,12 +149,12 @@
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index e6d6c78..a36413a 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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.lineChart3Data[0].data = this.pointsThisWeek.points; - this.lineChart3Labels = this.pointsThisWeek.day; + this.customersLastMonth = result.customerslastmonth; + this.lineChart3Data[0].data = this.customersLastMonth.customerno; + 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 = [ + { + data: [], + label: 'Series B' + } + ]; + public lineChart3Labels: Array = []; + 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 = [ + { // grey + backgroundColor: this.brandInfo, + borderColor: 'rgba(255,255,255,.55)' + } + ]; + public lineChart3Legend = false; + public lineChart3Type = 'line'; + + // lineChart4 + public lineChart4Data: Array = [ + { + data: [], + label: 'Series B' + } + ]; + public lineChart4Labels: Array = []; + 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 = [ + { // grey + backgroundColor: this.brandInfo, + borderColor: 'rgba(255,255,255,.55)' + } + ]; + public lineChart4Legend = false; + public lineChart4Type = 'line'; + + // lineChart5 + public lineChart5Data: Array = [ { data: [], label: 'Series A' } ]; - public lineChart3Labels: Array = []; - public lineChart3Options: any = { + public lineChart5Labels: Array = []; + public lineChart5Options: any = { maintainAspectRatio: false, scales: { xAxes: [{ @@ -255,14 +361,14 @@ export class DashboardComponent implements OnInit { display: false } }; - public lineChart3Colours: Array = [ + public lineChart5Colours: Array = [ { backgroundColor: 'rgba(255,255,255,.2)', borderColor: 'rgba(255,255,255,.55)', } ]; - public lineChart3Legend = false; - public lineChart3Type = 'line'; + public lineChart5Legend = false; + public lineChart5Type = 'line'; // barChart1 diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 0bab2cd..b8bfe61 100644 --- a/src/app/providers/api-service.ts +++ b/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" : - { - customersthisweekgraph : true, - customerslastweekgraph : false, - pointsthisweekgraph : true, - pointslastweekgraph : false, - - }, - "customersthisweek" : - { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - customerno : [1,2,3,4,5,6,7], - }, - "customerslastweek" : - { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - customerno : [7,6,5,4,3,2,1], - }, + // graphstoshow is on server and changes every hour, listing what graphs to display + "graphstoshow" : + { + customersthisweekgraph : true, + customerslastweekgraph : true, + customerslastmonthgraph : true, + customerslastyeargraph : true, + percentofcustomerssectorgraph : true, + pointsthisweekgraph : true, + pointslastweekgraph : true, + }, + "customersthisweek" : + { + day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], + customerno : [1,2,3,4,5,6,7], + }, + "customerslastweek" : + { + 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'],