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

Additions and fixes and server link fix

Browse source
This commit is contained in:
piratefinn 2017-07-18 11:35:43 +01:00
parent e8dcd22ead
commit 51097bc09f
5 changed files with 502 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,41 +2,65 @@
<div class="card">
<div class="card-footer">
<ul>
<li class="hidden-sm-down">
<li *ngIf="showSnippet.customersthismonth" class="hidden-sm-down">
<div class="text-muted">Customers This Month</div>
<strong>{{customersThisMonth}}</strong>
</li>
<li>
<li *ngIf="showSnippet.moneyspentthismonth" class="hidden-sm-down">
<div class="text-muted">Money Spent This Month</div>
<strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
</li>
<li class="hidden-sm-down">
<li *ngIf="showSnippet.pointstotal" class="hidden-sm-down">
<div class="text-muted">Points Total</div>
<strong>{{pointsTotal}}</strong>
</li>
<li class="hidden-sm-down">
<li *ngIf="showSnippet.averagetransactiontoday" class="hidden-sm-down">
<div class="text-muted">Average Transaction Today</div>
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
</li>
<li *ngIf="showSnippet.percentownlocalsupplier" class="hidden-sm-down">
<div class="text-muted">Local Suppliers</div>
<strong>{{percentOfLocalSuppliers}}%</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li *ngIf="showSnippet.percentsinglecompetitorlocalsupplier" class="hidden-sm-down">
<div class="text-muted">Competitor Local Suppliers</div>
<strong>{{percentOfSingleCompetitorLocalSuppliers}}%</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div *ngIf="showGraph.percentofcustomerssectorgraph" 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-block">
<div class="h1 text-muted text-right mb-4">
<i class="icon-pie-chart"></i>
</div>
<div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
<div class="h4 mb-0">{{noOfCustomersSector}}</div>
<div>No. of Customers in your Sector</div>
<div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customersthisweekgraph" class="col-sm-6 col-lg-3">
<div *ngIf="showGraph.percentofcustomerssector" class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
<div>Customers in your Sector</div>
<div class="progress progress-white progress-xs mt-3">
<div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block pb-0">
<div class="btn-group float-right" dropdown>
@ -65,7 +89,7 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customerslastweekgraph" 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-block pb-0">
<button type="button" class="btn btn-transparent p-0 float-right">
@ -87,7 +111,7 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customerslastmonthgraph" class="col-sm-6 col-lg-3">
<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">
@ -109,7 +133,7 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.customerslastyeargraph" 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-block pb-0">
<button type="button" class="btn btn-transparent p-0 float-right">
@ -131,7 +155,73 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.pointsthisweekgraph" class="col-sm-6 col-lg-3">
<div *ngIf="showGraph.returningcustomerslastweek" 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>Returning Customers last week</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="lineChart6Data"
[labels]="lineChart6Labels"
[options]="lineChart6Options"
[colors]="lineChart6Colours"
[legend]="lineChart6Legend"
[chartType]="lineChart6Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.returningcustomerslastmonth" 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>Returning Customers last month</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="lineChart7Data"
[labels]="lineChart7Labels"
[options]="lineChart7Options"
[colors]="lineChart7Colours"
[legend]="lineChart7Legend"
[chartType]="lineChart7Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.returningcustomerslastyear" 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>Returning Customers last year</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart"
[datasets]="lineChart8Data"
[labels]="lineChart8Labels"
[options]="lineChart8Options"
[colors]="lineChart8Colours"
[legend]="lineChart8Legend"
[chartType]="lineChart8Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.pointsthisweek" 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">
@ -160,7 +250,7 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.pointslastweekgraph" class="col-sm-6 col-lg-3">
<div *ngIf="showGraph.pointslastweek" 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>
@ -189,6 +279,35 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showGraph.percentlocalsuppliersvscompetitor" class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary">
<div class="card-block">
<div>Your suppliers that are local vs a local competitor</div>
<ul class="horizontal-bars type-3">
<li>
<i class="icon-pie-chart"></i>
<span class="title">Yours</span>
<span class="value">{{percentOfLocalSuppliers}}%</span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<i class="icon-pie-chart"></i>
<span class="title">A competitor</span>
<span class="value">{{percentOfSingleCompetitorLocalSuppliers}}%</span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="card">
<div class="card-block">

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

@ -7,19 +7,23 @@ import { Router } from '@angular/router';
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {
shuffledArray: any;
showGraph: any;
showSnippet: any;
customersThisMonth: any;
moneySpentThisMonth: any;
pointsTotal: any;
averageTransactionToday: any;
customersThisWeek: any;
customersLastWeek: any;
customersLastMonth: any;
customersLastYear: any;
pointsThisWeek: any;
pointsLastWeek: any;
customersThisMonth: any;
moneySpentThisMonth: any;
pointsTotal: any;
averageTransactionToday: any;
shuffledArray: any;
showGraph: any;
percentOfCustomersSector: any;
noOfCustomersSector: any;
percentOfLocalSuppliers: any;
percentOfSingleCompetitorLocalSuppliers: any;
constructor(
private http: Http,
@ -30,34 +34,51 @@ export class DashboardComponent implements OnInit {
.subscribe(
result => {
console.log(result);
// Return what graphs to show
this.showGraph = result.graphstoshow;
// Return what data to show 4 of
this.showGraph = result.elementstoshow.graphs;
this.showSnippet = result.elementstoshow.snippets;
// Percentage Chart
this.percentOfCustomersSector = result.percentofcustomerssector;
this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal;
this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal;
// Percentage Chart 2
this.percentOfCustomersSector = result.data.customersinsector.percent;
this.noOfCustomersSector = result.data.customersinsector.customerno;
// Chart 1
this.customersThisWeek = result.customersthisweek;
this.customersThisWeek = result.data.customersthisweek;
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
this.lineChart1Labels = this.customersThisWeek.day;
// Chart 2
this.customersLastWeek = result.customerslastweek;
this.customersLastWeek = result.data.customerslastweek;
this.lineChart2Data[0].data = this.customersLastWeek.customerno;
this.lineChart2Labels = this.customersLastWeek.day;
// Chart 3
this.customersLastMonth = result.customerslastmonth;
this.customersLastMonth = result.data.customerslastmonth;
this.lineChart3Data[0].data = this.customersLastMonth.customerno;
this.lineChart3Labels = this.customersLastMonth.day;
// Chart 4
this.customersLastYear = result.customerslastyear;
this.customersLastYear = result.data.customerslastyear;
this.lineChart4Data[0].data = this.customersLastYear.customerno;
this.lineChart4Labels = this.customersLastYear.day;
this.lineChart4Labels = this.customersLastYear.month;
// Chart 5
this.pointsThisWeek = result.pointsthisweek;
this.pointsThisWeek = result.data.pointsthisweek;
this.lineChart5Data[0].data = this.pointsThisWeek.points;
this.lineChart5Labels = this.pointsThisWeek.day;
// Chart 6
this.pointsLastWeek = result.pointslastweek;
this.pointsLastWeek = result.data.pointslastweek;
this.barChart1Data[0].data = this.pointsLastWeek.points;
this.barChart1Labels = this.pointsLastWeek.day;
// Chart 7
this.customersLastWeek = result.data.customerslastweek;
this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno;
this.lineChart6Labels = this.customersLastWeek.day;
// Chart 8
this.customersLastMonth = result.data.customerslastmonth;
this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno;
this.lineChart7Labels = this.customersLastMonth.day;
// Chart 9
this.customersLastYear = result.data.customerslastyear;
this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno;
this.lineChart8Labels = this.customersLastYear.month;
}
),
this.api.breadcrumb_data(undefined)
@ -329,6 +350,153 @@ export class DashboardComponent implements OnInit {
public lineChart4Legend = false;
public lineChart4Type = 'line';
// lineChart6
public lineChart6Data: Array<any> = [
{
data: [],
label: 'Series B'
}
];
public lineChart6Labels: Array<any> = [];
public lineChart6Options: 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 lineChart6Colours: Array<any> = [
{ // grey
backgroundColor: this.brandInfo,
borderColor: 'rgba(255,255,255,.55)'
}
];
public lineChart6Legend = false;
public lineChart6Type = 'line';
// lineChart7
public lineChart7Data: Array<any> = [
{
data: [],
label: 'Series B'
}
];
public lineChart7Labels: Array<any> = [];
public lineChart7Options: 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 lineChart7Colours: Array<any> = [
{ // grey
backgroundColor: this.brandInfo,
borderColor: 'rgba(255,255,255,.55)'
}
];
public lineChart7Legend = false;
public lineChart7Type = 'line';
// lineChart8
public lineChart8Data: Array<any> = [
{
data: [],
label: 'Series B'
}
];
public lineChart8Labels: Array<any> = [];
public lineChart8Options: 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 lineChart8Colours: Array<any> = [
{ // grey
backgroundColor: this.brandInfo,
borderColor: 'rgba(255,255,255,.55)'
}
];
public lineChart8Legend = false;
public lineChart8Type = 'line';
// lineChart5
public lineChart5Data: Array<any> = [
{