Refactor customer graph to use new service for org graphs
This commit is contained in:
parent
7342db0713
commit
5e2471aebf
5 changed files with 41 additions and 10 deletions
|
@ -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
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
13
src/app/providers/org-graphs.service.ts
Normal file
13
src/app/providers/org-graphs.service.ts
Normal 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 });
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
Reference in a new issue