Fixed dashboard to use new graph widget, and a widget list
This commit is contained in:
Tom Bloor
parent
8a509e5051
commit
cd0dd73c1c
|
|
@ -36,6 +36,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 class="card card-inverse card-primary">
|
||||
<div class="card-block">
|
||||
|
|
@ -60,53 +63,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</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 class="card card-inverse card-info">
|
||||
<div class="card-block pb-0">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Directive, Component, OnInit } from '@angular/core';
|
|||
import { Http, Response } from '@angular/http';
|
||||
import { ApiService } from '../providers/api-service';
|
||||
import { Router } from '@angular/router';
|
||||
import { Customer7DayWidget } from '../widgets/customers.component';
|
||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'dashboard.component.html'
|
||||
|
|
@ -26,6 +26,21 @@ export class DashboardComponent implements OnInit {
|
|||
percentOfLocalSuppliers: 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(
|
||||
private http: Http,
|
||||
private api: ApiService,
|
||||
|
|
@ -48,14 +63,6 @@ export class DashboardComponent implements OnInit {
|
|||
this.customersThisWeek = result.data.customersthisweek;
|
||||
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
|
||||
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
|
||||
this.customersLastYear = result.data.customerslastyear;
|
||||
this.lineChart4Data[0].data = this.customersLastYear.customerno;
|
||||
|
|
@ -204,100 +211,6 @@ export class DashboardComponent implements OnInit {
|
|||
public lineChart1Legend = false;
|
||||
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
|
||||
public lineChart4Data: Array<any> = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { LeaderboardsComponent } from './leaderboards.component';
|
|||
import { AccountEditComponent } from './account-edit.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';
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ import { DashboardRoutingModule } from './dashboard.routing';
|
|||
LeaderboardsComponent,
|
||||
AccountEditComponent,
|
||||
AddDataComponent,
|
||||
Customer7DayWidget,
|
||||
GraphWidget,
|
||||
]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
|
|
|
|||
Reference in a new issue