Additions and fixes and server link fix
This commit is contained in:
piratefinn
parent
e8dcd22ead
commit
51097bc09f
5 changed files with 502 additions and 77 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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> = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue