Refactor customer graph to use new service for org graphs

This commit is contained in:
Tom Bloor 2017-08-29 17:39:27 +01:00
parent 7342db0713
commit 5e2471aebf
5 changed files with 41 additions and 10 deletions

View file

@ -17,6 +17,8 @@ import { AppRoutingModule } from './app.routing';
import { AuthGuard } from './_guards/auth.guard'; import { AuthGuard } from './_guards/auth.guard';
import { ApiService } from './providers/api-service'; import { ApiService } from './providers/api-service';
import { OrgGraphsService } from './providers/org-graphs.service';
// Layouts // Layouts
import { FullLayoutComponent } from './layouts/full-layout.component'; import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component'; import { SimpleLayoutComponent } from './layouts/simple-layout.component';
@ -54,6 +56,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
providers: [ providers: [
AuthGuard, AuthGuard,
ApiService, ApiService,
OrgGraphsService,
{ {
provide: LocationStrategy, provide: LocationStrategy,
useClass: HashLocationStrategy useClass: HashLocationStrategy

View file

@ -61,7 +61,7 @@
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3"> <div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
<widget-customer-7-days></widget-customer-7-days> <widget-customers-last-7-days></widget-customers-last-7-days>
</div><!--/.col--> </div><!--/.col-->
<div *ngIf="showGraph.customerslastweek" class="col-sm-6 col-lg-3"> <div *ngIf="showGraph.customerslastweek" class="col-sm-6 col-lg-3">
<div class="card card-inverse card-info"> <div class="card card-inverse card-info">

View file

@ -18,6 +18,16 @@ export class ApiService {
} }
} }
public post(url, data) {
if ( this.sessionKey != null ) {
data.session_key = this.sessionKey;
}
return this.http.post(
this.apiUrl + url,
data
).map( response => response.json() );
}
// Login API // Login API
private getSessionKey() { private getSessionKey() {

View file

@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
@Injectable()
export class OrgGraphsService {
private orgGraphUrl = '/v1/organisation/graphs';
constructor(private api: ApiService) { }
public getGraph(name: string) {
return this.api.post(this.orgGraphUrl, { graph: name });
}
}

View file

@ -1,18 +1,24 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ApiService } from '../providers/api-service'; import { OrgGraphsService } from '../providers/org-graphs.service';
interface ChartData {
data: Array<number>;
label: string;
}
@Component({ @Component({
selector: 'widget-customer-7-days', selector: 'widget-customers-last-7-days',
templateUrl: 'customers.component.html', templateUrl: 'customers.component.html',
}) })
export class Customer7DayWidget implements OnInit { export class Customer7DayWidget implements OnInit {
public lineChartData: Array<any> = [
public lineChartData: Array<ChartData> = [
{ {
data: [], data: [],
label: 'Series A' label: 'Series A'
} }
]; ];
public lineChartLabels: Array<any> = []; public lineChartLabels: Array<string>;
public lineChartOptions: any = { public lineChartOptions: any = {
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
@ -59,16 +65,15 @@ export class Customer7DayWidget implements OnInit {
public customerSum: Number = 0; public customerSum: Number = 0;
constructor(private api: ApiService) { } constructor(private graphService: OrgGraphsService) { }
ngOnInit(): void { ngOnInit(): void {
this.api.graph_data(undefined) this.graphService.getGraph('customers_last_7_days')
.subscribe( .subscribe(
result => { result => {
console.log(result); console.log(result);
const customersThisWeek = result.data.customersthisweek; this.lineChartData[0].data = result.graph.count;
this.lineChartData[0].data = customersThisWeek.customerno; this.lineChartLabels = result.graph.day;
this.lineChartLabels = customersThisWeek.day;
this.customerSum = this.lineChartData[0].data.reduce((a, b) => a + b, 0); this.customerSum = this.lineChartData[0].data.reduce((a, b) => a + b, 0);
} }
); );