Added more data to dashboard view
This commit is contained in:
piratefinn
parent
2e1439f435
commit
e8dcd22ead
3 changed files with 218 additions and 37 deletions
|
|
@ -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"
|
||||
[labels]="lineChart3Labels"
|
||||
[options]="lineChart3Options"
|
||||
[colors]="lineChart3Colours"
|
||||
[legend]="lineChart3Legend"
|
||||
[chartType]="lineChart3Type"
|
||||
[datasets]="lineChart5Data"
|
||||
[labels]="lineChart5Labels"
|
||||
[options]="lineChart5Options"
|
||||
[colors]="lineChart5Colours"
|
||||
[legend]="lineChart5Legend"
|
||||
[chartType]="lineChart5Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<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 lineChart3Options: any = {
|
||||
public lineChart5Labels: Array<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 lineChart3Type = 'line';
|
||||
public lineChart5Legend = false;
|
||||
public lineChart5Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
Reference in a new issue