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