Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

dashboard boxes ideable NEEDS FIXING

Browse source
This commit is contained in:
piratefinn 2017-07-04 17:19:26 +01:00
parent 36c0ee62a9
commit 5d16cc0285
3 changed files with 127 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

210
src/app/dashboard/dashboard.component.html
View file

@ -22,115 +22,123 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6 col-lg-3"> <div *ngIf="showGraph.customersthisweekgraph">
<div class="card card-inverse card-primary"> <div class="col-sm-6 col-lg-3">
<div class="card-block pb-0"> <div class="card card-inverse card-primary">
<div class="btn-group float-right" dropdown> <div class="card-block pb-0">
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle> <div class="btn-group float-right" dropdown>
<i class="icon-settings"></i> <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
</button> <i class="icon-settings"></i>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu> </button>
<a class="dropdown-item" href="#">Action</a> <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div> </div>
<h4 class="mb-0">138</h4>
<p>Customers this week</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="lineChart1Data"
[labels]="lineChart1Labels"
[options]="lineChart1Options"
[colors]="lineChart1Colours"
[legend]="lineChart1Legend"
[chartType]="lineChart1Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div> </div>
<h4 class="mb-0">138</h4>
<p>Customers this week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> </div><!--/.col-->
<canvas baseChart class="chart" </div>
[datasets]="lineChart1Data" <div *ngIf="showGraph.customerslastweekgraph">
[labels]="lineChart1Labels" <div class="col-sm-6 col-lg-3">
[options]="lineChart1Options" <div class="card card-inverse card-info">
[colors]="lineChart1Colours" <div class="card-block pb-0">
[legend]="lineChart1Legend" <button type="button" class="btn btn-transparent p-0 float-right">
[chartType]="lineChart1Type" <i class="icon-location-pin"></i>
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div 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 class="col-sm-6 col-lg-3">
<div class="card card-inverse card-warning">
<div class="card-block pb-0">
<div class="btn-group float-right">
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-settings"></i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <h4 class="mb-0">9.823</h4>
<a class="dropdown-item" href="#">Action</a> <p>Customers last week</p>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div> </div>
<h4 class="mb-0">9.823</h4> <div class="chart-wrapper px-3" style="height:70px;">
<p>Points earned this week</p> <canvas baseChart class="chart"
</div> [datasets]="lineChart2Data"
<div class="chart-wrapper" style="height:70px;"> [labels]="lineChart2Labels"
<canvas baseChart class="chart" [options]="lineChart2Options"
[datasets]="lineChart3Data" [colors]="lineChart2Colours"
[labels]="lineChart3Labels" [legend]="lineChart2Legend"
[options]="lineChart3Options" [chartType]="lineChart2Type"
[colors]="lineChart3Colours" (chartHover)="chartHovered($event)"
[legend]="lineChart3Legend" (chartClick)="chartClicked($event)"></canvas>
[chartType]="lineChart3Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-danger">
<div class="card-block pb-0">
<div class="btn-group float-right" dropdown>
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
<i class="icon-settings"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div> </div>
<h4 class="mb-0">9.823</h4>
<p>Points earned last week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> </div><!--/.col-->
<canvas baseChart class="chart" </div>
[datasets]="barChart1Data" <div *ngIf="showGraph.pointsthisweekgraph">
[labels]="barChart1Labels" <div class="col-sm-6 col-lg-3">
[options]="barChart1Options" <div class="card card-inverse card-warning">
[colors]="barChart1Colours" <div class="card-block pb-0">
[legend]="barChart1Legend" <div class="btn-group float-right">
[chartType]="barChart1Type" <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
(chartHover)="chartHovered($event)" <i class="icon-settings"></i>
(chartClick)="chartClicked($event)"></canvas> </button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<h4 class="mb-0">9.823</h4>
<p>Points earned this week</p>
</div>
<div class="chart-wrapper" 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>
</div> </div><!--/.col-->
</div><!--/.col--> </div>
<div *ngIf="showGraph.pointslastweekgraph">
<div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-danger">
<div class="card-block pb-0">
<div class="btn-group float-right" dropdown>
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
<i class="icon-settings"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<h4 class="mb-0">9.823</h4>
<p>Points earned last week</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="barChart1Data"
[labels]="barChart1Labels"
[options]="barChart1Options"
[colors]="barChart1Colours"
[legend]="barChart1Legend"
[chartType]="barChart1Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
</div>
</div><!--/.row--> </div><!--/.row-->
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">

7
src/app/dashboard/dashboard.component.ts
View file

@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit {
pointsTotal: any; pointsTotal: any;
averageTransactionToday: any; averageTransactionToday: any;
shuffledArray: any; shuffledArray: any;
showGraph;
constructor( constructor(
private http: Http, private http: Http,
@ -26,15 +27,21 @@ export class DashboardComponent implements OnInit {
.subscribe( .subscribe(
result => { result => {
console.log(result); console.log(result);
// Return what graphs to show
this.showGraph = result.graphstoshow;
// Chart 1
this.customersThisWeek = result.customersthisweek; this.customersThisWeek = result.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.customerslastweek; this.customersLastWeek = result.customerslastweek;
this.lineChart2Data[0].data = this.customersLastWeek.customerno; this.lineChart2Data[0].data = this.customersLastWeek.customerno;
this.lineChart2Labels = this.customersLastWeek.day; this.lineChart2Labels = this.customersLastWeek.day;
// Chart 3
this.pointsThisWeek = result.pointsthisweek; this.pointsThisWeek = result.pointsthisweek;
this.lineChart3Data[0].data = this.pointsThisWeek.points; this.lineChart3Data[0].data = this.pointsThisWeek.points;
this.lineChart3Labels = this.pointsThisWeek.day; this.lineChart3Labels = this.pointsThisWeek.day;
// Chart 4
this.pointsLastWeek = result.pointslastweek; this.pointsLastWeek = result.pointslastweek;
this.barChart1Data[0].data = this.pointsLastWeek.points; this.barChart1Data[0].data = this.pointsLastWeek.points;
this.barChart1Labels = this.pointsLastWeek.day; this.barChart1Labels = this.pointsLastWeek.day;

13
src/app/providers/api-service.ts
View file

@ -93,15 +93,24 @@ export class ApiService {
"moneyspentthismonth" : 156.02, "moneyspentthismonth" : 156.02,
"pointstotal" : 506, "pointstotal" : 506,
"averagetransactiontoday" : 3.69 "averagetransactiontoday" : 3.69
} }
) )
} }
// Fake chart data to mimic // Fake chart data to mimic
public graph_data(data) { public graph_data(data) {
return Observable.of( return Observable.of(
{ {
// graphstoshow is on server and changes every hour, listing what graphs to display
"graphstoshow" :
{
customersthisweekgraph : true,
customerslastweekgraph : false,
pointsthisweekgraph : true,
pointslastweekgraph : false,
},
"customersthisweek" : "customersthisweek" :
{ {
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],