Additions and fixes and server link fix

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

View file

@ -209,7 +209,7 @@
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="grosswage" placeholder="0.00">
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employeegrosswage" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
</div>

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">

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> = [
{

View file

@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
@Injectable()
export class ApiService {
private apiUrl = 'https://dev.app.peartrade.org/api';
private apiUrl = 'https://dev.peartrade.org/api';
private sessionKey: string = null;
constructor(
private http: Http,
@ -102,52 +102,101 @@ export class ApiService {
public graph_data(data) {
return Observable.of(
{
// graphstoshow is on server and changes every hour, listing what graphs to display
"graphstoshow" :
{
customersthisweekgraph : true,
customerslastweekgraph : true,
customerslastmonthgraph : true,
customerslastyeargraph : true,
percentofcustomerssectorgraph : true,
pointsthisweekgraph : true,
pointslastweekgraph : true,
},
"customersthisweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
customerno : [1,2,3,4,5,6,7],
},
"customerslastweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
customerno : [7,6,5,4,3,2,1],
},
// can take differing size arrays, so any month works. Example here is for April
"customerslastmonth" :
{
day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8',
'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16',
'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24',
'April 25','April 26','April 27','April 28','April 29','April 30'],
customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
},
"customerslastyear" :
{
day : ['January','February','March','April','May','June','July','August','September','October','November','December'],
customerno : [7,6,5,4,3,2,1,8,9,10,11,12],
},
percentofcustomerssector : 76,
"pointsthisweek" :
// graphstoshow is on server and changes every hour, listing what snippets & graphs to display
"elementstoshow" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
points : [1,2,3,4,5,6,7],
"graphs" :
{
customersthisweek : true,
customerslastweek : true,
customerslastmonth : true,
customerslastyear : true,
returningcustomerslastweek : true,
returningcustomerslastmonth : true,
returningcustomerslastyear : true,
noofcustomerssector : true,
percentofcustomerssector : true,
pointsthisweek : true,
percentlocalsuppliersvscompetitor : true,
},
"snippets" :
{
customersthismonth: false,
moneyspentthismonth: true,
pointstotal: true,
averagetransactiontoday: false,
percentownlocalsupplier : true,
percentsinglecompetitorlocalsupplier : true,
},
"pointslastweek" :
},
"data" :
"graphs" :
{
"customersthisweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
customerno : [1,2,3,4,5,6,7],
returningcustomerno : [1,1,2,3,4,5,4],
totalcustomerno:
},
"customerslastweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
customerno : [7,6,5,4,3,2,1],
returningcustomerno : [3,4,5,4,3,2,1],
},
// can take differing size arrays, so any month works. Example here is for April
"customerslastmonth" :
{
day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8',
'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16',
'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24',
'April 25','April 26','April 27','April 28','April 29','April 30'],
customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
returningcustomerno : [4,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
},
"customerslastyear" :
{
month : ['January','February','March','April','May','June','July','August','September','October','November','December'],
customerno : [7,6,5,4,3,2,1,8,9,10,11,12],
returningcustomerno : [3,2,4,2,1,1,1,6,4,8,5,12],
},
// If the number is potential or actual customers in their sector has yet to be determined
"customersinsector" :
{
percent : 76,
customerno : 34000,
},
"pointsthisweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
points : [1,2,3,4,5,6,7],
},
"pointslastweek" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
points : [1,2,3,4,5,6,7],
},
"localsuppliers" :
{
percentownlocal : 50,
percentsinglecompetitorlocal : 65,
},
},
"snippets" :
{
day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],
points : [1,2,3,4,5,6,7],
}
"customersinsector" :
{
percent : 76,
customerno : 34000,
},
"localsuppliers" :
{
percentownlocal : 50,
percentsinglecompetitorlocal : 65,
},
},
}
)
}

View file

@ -1 +1,90 @@
// Here you can add other styles
// white title font variant on type-2 as defined in _widgets.css
.horizontal-bars {
padding: 0;
margin: 0;
list-style: none;
li {
position: relative;
height: 40px;
line-height: 40px;
vertical-align: middle;
.title {
width: 100px;
font-size: 12px;
font-weight: 600;
color: $text-muted;
vertical-align: middle;
}
.bars {
position: absolute;
top: 15px;
width: 100%;
padding-left: 100px;
.progress:first-child {
margin-bottom: 2px;
}
}
&.legend {
text-align: center;
.badge {
display: inline-block;
width: 8px;
height: 8px;
padding: 0;
}
}
&.divider {
height: 40px;
i {
margin: 0 !important;
}
}
}
&.type-3 {
li {
overflow: hidden;
i {
display: inline-block;
margin-right: $spacer;
margin-left: 5px;
font-size: 18px;
line-height: 40px;
}
.title {
display: inline-block;
width: auto;
margin-top: -9px;
font-size: $font-size-base;
font-weight: normal;
line-height: 40px;
color: $white;
}
.value {
float: right;
font-weight: 600;
}
.bars {
position: absolute;
top: auto;
bottom: 0;
padding: 0;
}
}
}
}