Fixed dashboard to use new graph widget, and a widget list

This commit is contained in:
Tom Bloor 2017-08-30 12:35:43 +01:00
parent 8a509e5051
commit cd0dd73c1c
3 changed files with 21 additions and 152 deletions

View file

@ -36,6 +36,9 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
<widget-graph *ngIf="widget.type == 'graph'" [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon"></widget-graph>
</div>
<div *ngIf="showGraph.noofcustomerssector" class="col-sm-6 col-lg-3"> <div *ngIf="showGraph.noofcustomerssector" 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"> <div class="card-block">
@ -60,53 +63,6 @@
</div> </div>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
<widget-customers-last-7-days></widget-customers-last-7-days>
</div><!--/.col-->
<div *ngIf="showGraph.customerslastweek" 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 week</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="lineChart2Data"
[labels]="lineChart2Labels"
[options]="lineChart2Options"
[colors]="lineChart2Colours"
[legend]="lineChart2Legend"
[chartType]="lineChart2Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customerslastmonth" 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.customerslastyear" class="col-sm-6 col-lg-3"> <div *ngIf="showGraph.customerslastyear" 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">

View file

@ -2,7 +2,7 @@ import { Directive, Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http'; import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service'; import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Customer7DayWidget } from '../widgets/customers.component'; import { GraphWidget } from '../widgets/graph-widget.component';
@Component({ @Component({
templateUrl: 'dashboard.component.html' templateUrl: 'dashboard.component.html'
@ -26,6 +26,21 @@ export class DashboardComponent implements OnInit {
percentOfLocalSuppliers: any; percentOfLocalSuppliers: any;
percentOfSingleCompetitorLocalSuppliers: any; percentOfSingleCompetitorLocalSuppliers: any;
public widgetList = [
{
type: 'graph',
name: 'customers_last_7_days',
icon: 'icon-people',
title: 'Customers Last 7 Days',
},
{
type: 'graph',
name: 'customers_last_30_days',
icon: 'icon-people',
title: 'Customers Last 30 Days',
},
];
constructor( constructor(
private http: Http, private http: Http,
private api: ApiService, private api: ApiService,
@ -48,14 +63,6 @@ export class DashboardComponent implements OnInit {
this.customersThisWeek = result.data.customersthisweek; this.customersThisWeek = result.data.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.data.customerslastweek;
this.lineChart2Data[0].data = this.customersLastWeek.customerno;
this.lineChart2Labels = this.customersLastWeek.day;
// Chart 3
this.customersLastMonth = result.data.customerslastmonth;
this.lineChart3Data[0].data = this.customersLastMonth.customerno;
this.lineChart3Labels = this.customersLastMonth.day;
// Chart 4 // Chart 4
this.customersLastYear = result.data.customerslastyear; this.customersLastYear = result.data.customerslastyear;
this.lineChart4Data[0].data = this.customersLastYear.customerno; this.lineChart4Data[0].data = this.customersLastYear.customerno;
@ -204,100 +211,6 @@ export class DashboardComponent implements OnInit {
public lineChart1Legend = false; public lineChart1Legend = false;
public lineChart1Type = 'line'; public lineChart1Type = 'line';
// lineChart2
public lineChart2Data: Array<any> = [
{
data: [],
label: 'Series B'
}
];
public lineChart2Labels: Array<any> = [];
public lineChart2Options: 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 lineChart2Colours: Array<any> = [
{ // grey
backgroundColor: this.brandInfo,
borderColor: 'rgba(255,255,255,.55)'
}
];
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 // lineChart4
public lineChart4Data: Array<any> = [ public lineChart4Data: Array<any> = [
{ {

View file

@ -9,7 +9,7 @@ import { LeaderboardsComponent } from './leaderboards.component';
import { AccountEditComponent } from './account-edit.component'; import { AccountEditComponent } from './account-edit.component';
import { AddDataComponent } from './add-data.component'; import { AddDataComponent } from './add-data.component';
import { Customer7DayWidget } from '../widgets/customers.component'; import { GraphWidget } from '../widgets/graph-widget.component';
import { DashboardRoutingModule } from './dashboard.routing'; import { DashboardRoutingModule } from './dashboard.routing';
@ -28,7 +28,7 @@ import { DashboardRoutingModule } from './dashboard.routing';
LeaderboardsComponent, LeaderboardsComponent,
AccountEditComponent, AccountEditComponent,
AddDataComponent, AddDataComponent,
Customer7DayWidget, GraphWidget,
] ]
}) })
export class DashboardModule { } export class DashboardModule { }