Added initial dashboard display

Uses mock API
This commit is contained in:
piratefinn 2017-06-19 17:20:21 +01:00
parent 7c55779a0f
commit ee253f263f
4 changed files with 37 additions and 8 deletions

View file

@ -13,8 +13,8 @@
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div> </div>
<h4 class="mb-0">£183.98</h4> <h4 class="mb-0">138</h4>
<p>Money spent this week</p> <p>Customers this week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> <div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -36,7 +36,7 @@
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
</button> </button>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Money spent last week</p> <p>Customers last week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> <div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"

View file

@ -1,12 +1,29 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
templateUrl: 'dashboard.component.html' templateUrl: 'dashboard.component.html'
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
thisweekcustomerno: any;
// constructor( ) { } constructor(
private http: Http,
private api: ApiService,
) {
this.api.graph_data(undefined)
.subscribe(
result => {
console.log(result);
this.thisweekcustomerno = result;
this.lineChart1Data[0].data = this.thisweekcustomerno.customerno;
this.lineChart1Labels = this.thisweekcustomerno.day;
}
)
}
public brandPrimary = '#20a8d8'; public brandPrimary = '#20a8d8';
public brandSuccess = '#4dbd74'; public brandSuccess = '#4dbd74';
@ -45,11 +62,11 @@ export class DashboardComponent implements OnInit {
// lineChart1 // lineChart1
public lineChart1Data: Array<any> = [ public lineChart1Data: Array<any> = [
{ {
data: [44.72, 29.97, 16.65, 30.99, 47.75, 6.95, 6.95], data: [],
label: 'Series A' label: 'Series A'
} }
]; ];
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; public lineChart1Labels: Array<any> = [];
public lineChart1Options: any = { public lineChart1Options: any = {
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
@ -68,8 +85,6 @@ export class DashboardComponent implements OnInit {
display: false, display: false,
ticks: { ticks: {
display: false, display: false,
min: 5 - 5,
max: 50 + 5,
} }
}], }],
}, },

View file

@ -36,6 +36,10 @@ export class LoginComponent implements OnInit {
} }
); );
this.api.graph_data(undefined).subscribe(
result => { console.log(result) }
)
// get return url from route parameters or default to '/' // get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
} }

View file

@ -84,4 +84,14 @@ export class ApiService {
).map( response => response.json() ); ).map( response => response.json() );
} }
// Fake data to mimic
public graph_data(data) {
return Observable.of(
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
customerno : [1,2,3,4,5,6,7],
}
)
}
} }