dashboard boxes ideable NEEDS FIXING
This commit is contained in:
parent
36c0ee62a9
commit
5d16cc0285
3 changed files with 127 additions and 103 deletions
|
@ -22,6 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div *ngIf="showGraph.customersthisweekgraph">
|
||||||
<div class="col-sm-6 col-lg-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<div class="card card-inverse card-primary">
|
<div class="card card-inverse card-primary">
|
||||||
<div class="card-block pb-0">
|
<div class="card-block pb-0">
|
||||||
|
@ -51,6 +52,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showGraph.customerslastweekgraph">
|
||||||
<div class="col-sm-6 col-lg-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<div class="card card-inverse card-info">
|
<div class="card card-inverse card-info">
|
||||||
<div class="card-block pb-0">
|
<div class="card-block pb-0">
|
||||||
|
@ -73,6 +76,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showGraph.pointsthisweekgraph">
|
||||||
<div class="col-sm-6 col-lg-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<div class="card card-inverse card-warning">
|
<div class="card card-inverse card-warning">
|
||||||
<div class="card-block pb-0">
|
<div class="card-block pb-0">
|
||||||
|
@ -102,6 +107,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showGraph.pointslastweekgraph">
|
||||||
<div class="col-sm-6 col-lg-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<div class="card card-inverse card-danger">
|
<div class="card card-inverse card-danger">
|
||||||
<div class="card-block pb-0">
|
<div class="card-block pb-0">
|
||||||
|
@ -131,6 +138,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
</div>
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
|
|
|
@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit {
|
||||||
pointsTotal: any;
|
pointsTotal: any;
|
||||||
averageTransactionToday: any;
|
averageTransactionToday: any;
|
||||||
shuffledArray: any;
|
shuffledArray: any;
|
||||||
|
showGraph;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private http: Http,
|
private http: Http,
|
||||||
|
@ -26,15 +27,21 @@ export class DashboardComponent implements OnInit {
|
||||||
.subscribe(
|
.subscribe(
|
||||||
result => {
|
result => {
|
||||||
console.log(result);
|
console.log(result);
|
||||||
|
// Return what graphs to show
|
||||||
|
this.showGraph = result.graphstoshow;
|
||||||
|
// Chart 1
|
||||||
this.customersThisWeek = result.customersthisweek;
|
this.customersThisWeek = result.customersthisweek;
|
||||||
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
|
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
|
||||||
this.lineChart1Labels = this.customersThisWeek.day;
|
this.lineChart1Labels = this.customersThisWeek.day;
|
||||||
|
// Chart 2
|
||||||
this.customersLastWeek = result.customerslastweek;
|
this.customersLastWeek = result.customerslastweek;
|
||||||
this.lineChart2Data[0].data = this.customersLastWeek.customerno;
|
this.lineChart2Data[0].data = this.customersLastWeek.customerno;
|
||||||
this.lineChart2Labels = this.customersLastWeek.day;
|
this.lineChart2Labels = this.customersLastWeek.day;
|
||||||
|
// Chart 3
|
||||||
this.pointsThisWeek = result.pointsthisweek;
|
this.pointsThisWeek = result.pointsthisweek;
|
||||||
this.lineChart3Data[0].data = this.pointsThisWeek.points;
|
this.lineChart3Data[0].data = this.pointsThisWeek.points;
|
||||||
this.lineChart3Labels = this.pointsThisWeek.day;
|
this.lineChart3Labels = this.pointsThisWeek.day;
|
||||||
|
// Chart 4
|
||||||
this.pointsLastWeek = result.pointslastweek;
|
this.pointsLastWeek = result.pointslastweek;
|
||||||
this.barChart1Data[0].data = this.pointsLastWeek.points;
|
this.barChart1Data[0].data = this.pointsLastWeek.points;
|
||||||
this.barChart1Labels = this.pointsLastWeek.day;
|
this.barChart1Labels = this.pointsLastWeek.day;
|
||||||
|
|
|
@ -102,6 +102,15 @@ export class ApiService {
|
||||||
public graph_data(data) {
|
public graph_data(data) {
|
||||||
return Observable.of(
|
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" :
|
"customersthisweek" :
|
||||||
{
|
{
|
||||||
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
|
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
|
||||||
|
|
Reference in a new issue