Merge pull request #9 from Pear-Trading/TBSliver/Widget-Graph-Improvements
Widget graph and Snippet addition for organisations
This commit is contained in:
Tom Bloor
GitHub
commit
4161b57476
12 changed files with 147 additions and 799 deletions
|
|
@ -21,6 +21,7 @@ import { CustomerGuard } from './_guards/customer.guard';
|
|||
import { ApiService } from './providers/api-service';
|
||||
|
||||
import { OrgGraphsService } from './providers/org-graphs.service';
|
||||
import { OrgSnippetsService } from './providers/org-snippets.service';
|
||||
|
||||
// Layouts
|
||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||
|
|
@ -63,6 +64,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
|
|||
CustomerGuard,
|
||||
ApiService,
|
||||
OrgGraphsService,
|
||||
OrgSnippetsService,
|
||||
{
|
||||
provide: LocationStrategy,
|
||||
useClass: HashLocationStrategy
|
||||
|
|
|
|||
|
|
@ -1,228 +1,12 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li *ngIf="showSnippet.customersthismonth" class="hidden-sm-down">
|
||||
<div class="text-muted">Customers This Month</div>
|
||||
<strong>{{customersThisMonth}}</strong>
|
||||
</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 *ngIf="showSnippet.pointstotal" class="hidden-sm-down">
|
||||
<div class="text-muted">Points Total</div>
|
||||
<strong>{{pointsTotal}}</strong>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<snippet-bar-org></snippet-bar-org>
|
||||
<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">
|
||||
<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.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.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">
|
||||
<i class="icon-location-pin"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Customers last year</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart4Data"
|
||||
[labels]="lineChart4Labels"
|
||||
[options]="lineChart4Options"
|
||||
[colors]="lineChart4Colours"
|
||||
[legend]="lineChart4Legend"
|
||||
[chartType]="lineChart4Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<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">
|
||||
<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>
|
||||
<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]="lineChart5Data"
|
||||
[labels]="lineChart5Labels"
|
||||
[options]="lineChart5Options"
|
||||
[colors]="lineChart5Colours"
|
||||
[legend]="lineChart5Legend"
|
||||
[chartType]="lineChart5Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<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>
|
||||
<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 *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>
|
||||
<widget-graph *ngIf="widget.type == 'graph'"
|
||||
[graphName]="widget.name"
|
||||
[graphTitle]="widget.title"
|
||||
[graphIcon]="widget.icon"
|
||||
[dataType]="widget.dataType"></widget-graph>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card">
|
||||
|
|
|
|||
|
|
@ -1,30 +1,15 @@
|
|||
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 { GraphWidget } from '../widgets/graph-widget.component';
|
||||
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
||||
import { DataType } from '../shared/data-types.enum';
|
||||
|
||||
@Component({
|
||||
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;
|
||||
percentOfCustomersSector: any;
|
||||
noOfCustomersSector: any;
|
||||
percentOfLocalSuppliers: any;
|
||||
percentOfSingleCompetitorLocalSuppliers: any;
|
||||
|
||||
public widgetList = [
|
||||
{
|
||||
|
|
@ -44,83 +29,32 @@ export class DashboardComponent implements OnInit {
|
|||
name: 'sales_last_7_days',
|
||||
icon: 'icon-diamond',
|
||||
title: 'Sales Last 7 Days',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'sales_last_30_days',
|
||||
icon: 'icon-diamond',
|
||||
title: 'Sales Last 30 Days',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'purchases_last_7_days',
|
||||
title: 'Purchases Last 7 Days',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'purchases_last_30_days',
|
||||
title: 'Purchases Last 30 Days',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
];
|
||||
|
||||
constructor(
|
||||
private http: Http,
|
||||
private api: ApiService,
|
||||
) {
|
||||
this.shuffle = this.shuffledArray;
|
||||
this.api.graph_data(undefined)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log(result);
|
||||
// Return what data to show 4 of
|
||||
this.showGraph = result.elementstoshow.graphs;
|
||||
this.showSnippet = result.elementstoshow.snippets;
|
||||
// Percentage Chart
|
||||
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.data.customersthisweek;
|
||||
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
|
||||
this.lineChart1Labels = this.customersThisWeek.day;
|
||||
// Chart 4
|
||||
this.customersLastYear = result.data.customerslastyear;
|
||||
this.lineChart4Data[0].data = this.customersLastYear.customerno;
|
||||
this.lineChart4Labels = this.customersLastYear.month;
|
||||
// Chart 5
|
||||
this.pointsThisWeek = result.data.pointsthisweek;
|
||||
this.lineChart5Data[0].data = this.pointsThisWeek.points;
|
||||
this.lineChart5Labels = this.pointsThisWeek.day;
|
||||
// Chart 6
|
||||
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)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log(result);
|
||||
this.customersThisMonth = result.customersthismonth;
|
||||
this.moneySpentThisMonth = result.moneyspentthismonth;
|
||||
this.pointsTotal = result.pointstotal;
|
||||
this.averageTransactionToday = result.averagetransactiontoday;
|
||||
}
|
||||
);
|
||||
this.shuffle = this.shuffledArray;
|
||||
}
|
||||
|
||||
// Fisher-Yates shuffle function
|
||||
|
|
@ -147,20 +81,10 @@ export class DashboardComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
public brandPrimary = '#20a8d8';
|
||||
public brandSuccess = '#4dbd74';
|
||||
public brandInfo = '#63c2de';
|
||||
public brandWarning = '#f8cb00';
|
||||
public brandDanger = '#f86c6b';
|
||||
|
||||
// dropdown buttons
|
||||
public status: { isopen } = { isopen: false };
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
// convert Hex to RGBA
|
||||
public convertHex(hex: string, opacity: number) {
|
||||
hex = hex.replace('#', '');
|
||||
|
|
@ -181,332 +105,6 @@ export class DashboardComponent implements OnInit {
|
|||
console.log(e);
|
||||
}
|
||||
|
||||
// lineChart1
|
||||
public lineChart1Data: Array<any> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart1Labels: Array<any> = [];
|
||||
public lineChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart1Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart1Legend = false;
|
||||
public lineChart1Type = 'line';
|
||||
|
||||
// lineChart4
|
||||
public lineChart4Data: Array<any> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'Series B'
|
||||
}
|
||||
];
|
||||
public lineChart4Labels: Array<any> = [];
|
||||
public lineChart4Options: 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 lineChart4Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
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> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart5Labels: Array<any> = [];
|
||||
public lineChart5Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart5Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
}
|
||||
];
|
||||
public lineChart5Legend = false;
|
||||
public lineChart5Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
public barChart1Data: Array<any> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart1Labels: Array<any> = [];
|
||||
public barChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart1Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart1Legend = false;
|
||||
public barChart1Type = 'bar';
|
||||
|
||||
// mainChart
|
||||
|
||||
public random(min: number, max: number) {
|
||||
|
|
@ -595,154 +193,6 @@ export class DashboardComponent implements OnInit {
|
|||
public mainChartLegend = false;
|
||||
public mainChartType = 'line';
|
||||
|
||||
// social box charts
|
||||
|
||||
public socialChartData1: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Facebook'
|
||||
}
|
||||
];
|
||||
public socialChartData2: Array<any> = [
|
||||
{
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
label: 'Twitter'
|
||||
}
|
||||
];
|
||||
public socialChartData3: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'LinkedIn'
|
||||
}
|
||||
];
|
||||
public socialChartData4: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Google+'
|
||||
}
|
||||
];
|
||||
|
||||
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public socialChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public socialChartColours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
}
|
||||
];
|
||||
public socialChartLegend = false;
|
||||
public socialChartType = 'line';
|
||||
|
||||
// sparkline charts
|
||||
|
||||
public sparklineChartData1: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
public sparklineChartData2: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
|
||||
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public sparklineChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public sparklineChartDefault: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#d1d4d7',
|
||||
}
|
||||
];
|
||||
public sparklineChartPrimary: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandPrimary,
|
||||
}
|
||||
];
|
||||
public sparklineChartInfo: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
}
|
||||
];
|
||||
public sparklineChartDanger: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
}
|
||||
];
|
||||
public sparklineChartWarning: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandWarning,
|
||||
}
|
||||
];
|
||||
public sparklineChartSuccess: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
public sparklineChartLegend = false;
|
||||
public sparklineChartType = 'line';
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
// generate random values for mainChart
|
||||
for (let i = 0; i <= this.mainChartElements; i++) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
|
|||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
import { NgxPaginationModule } from 'ngx-pagination';
|
||||
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardCustomerComponent } from './dashboard-customer.component';
|
||||
import { AccountEditComponent } from './account-edit.component';
|
||||
|
|
@ -13,6 +15,7 @@ import { FeedbackComponent } from './feedback.component';
|
|||
import { TransactionLogComponent } from './transaction-log.component';
|
||||
|
||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
||||
|
||||
import { DashboardRoutingModule } from './dashboard.routing';
|
||||
import { OrgResultComponent } from '../shared/org-result.component';
|
||||
|
|
@ -41,6 +44,10 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone
|
|||
TransactionResultComponent,
|
||||
FeedbackComponent,
|
||||
GraphWidget,
|
||||
]
|
||||
OrgBarSnippetComponent,
|
||||
],
|
||||
providers: [
|
||||
CurrencyPipe
|
||||
],
|
||||
})
|
||||
export class DashboardModule { }
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class ApiService {
|
|||
}
|
||||
}
|
||||
|
||||
public post(url, data) {
|
||||
public post(url: string, data: any = {}) {
|
||||
if ( this.sessionKey != null ) {
|
||||
data.session_key = this.sessionKey;
|
||||
}
|
||||
|
|
@ -230,19 +230,6 @@ export class ApiService {
|
|||
).map( response => response.json() );
|
||||
}
|
||||
|
||||
// Fake Breadcrumb data
|
||||
|
||||
public breadcrumb_data(data) {
|
||||
return Observable.of(
|
||||
{
|
||||
"customersthismonth" : 196,
|
||||
"moneyspentthismonth" : 156.02,
|
||||
"pointstotal" : 506,
|
||||
"averagetransactiontoday" : 3.69
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Fake chart data to mimic
|
||||
|
||||
public graph_data(data) {
|
||||
|
|
|
|||
14
src/app/providers/org-snippets.service.ts
Normal file
14
src/app/providers/org-snippets.service.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { ApiService } from './api-service';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
@Injectable()
|
||||
export class OrgSnippetsService {
|
||||
private orgSnippetsUrl = '/v1/organisation/snippets';
|
||||
|
||||
constructor(private api: ApiService) { }
|
||||
|
||||
public getData(): Observable<any> {
|
||||
return this.api.post(this.orgSnippetsUrl);
|
||||
}
|
||||
}
|
||||
4
src/app/shared/data-types.enum.ts
Normal file
4
src/app/shared/data-types.enum.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export enum DataType {
|
||||
number,
|
||||
currency,
|
||||
}
|
||||
22
src/app/snippets/org-snippet-bar.component.html
Normal file
22
src/app/snippets/org-snippet-bar.component.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<div class="card">
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Customers This Month</div>
|
||||
<strong>{{ thisMonthSalesCount }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Money Spent This Month</div>
|
||||
<strong>{{ thisMonthPurchasesTotal | currency:'GBP':true:'1.2-2'}}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Customers Today</div>
|
||||
<strong>{{ todaySalesCount }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Average Transaction Today</div>
|
||||
<strong>{{ ( todaySalesTotal / todaySalesCount ) || 0 | currency:'GBP':true:'1.2-2'}}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
48
src/app/snippets/org-snippet-bar.component.ts
Normal file
48
src/app/snippets/org-snippet-bar.component.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { OrgSnippetsService } from '../providers/org-snippets.service';
|
||||
|
||||
@Component({
|
||||
selector: 'snippet-bar-org',
|
||||
templateUrl: 'org-snippet-bar.component.html',
|
||||
})
|
||||
export class OrgBarSnippetComponent implements OnInit {
|
||||
|
||||
public thisMonthSalesCount = 0;
|
||||
public thisMonthSalesTotal = 0;
|
||||
public thisWeekSalesCount = 0;
|
||||
public thisWeekSalesTotal = 0;
|
||||
public todaySalesCount = 0;
|
||||
public todaySalesTotal = 0;
|
||||
|
||||
public thisMonthPurchasesCount = 0;
|
||||
public thisMonthPurchasesTotal = 0;
|
||||
public thisWeekPurchasesCount = 0;
|
||||
public thisWeekPurchasesTotal = 0;
|
||||
public todayPurchasesCount = 0;
|
||||
public todayPurchasesTotal = 0;
|
||||
|
||||
constructor(
|
||||
private snippetsService: OrgSnippetsService,
|
||||
) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.snippetsService.getData()
|
||||
.subscribe(
|
||||
result => {
|
||||
this.thisMonthSalesCount = result.snippets.this_month_sales_count;
|
||||
this.thisMonthSalesTotal = result.snippets.this_month_sales_total;
|
||||
this.thisWeekSalesCount = result.snippets.this_week_sales_count;
|
||||
this.thisWeekSalesTotal = result.snippets.this_week_sales_total;
|
||||
this.todaySalesCount = result.snippets.today_sales_count;
|
||||
this.todaySalesTotal = result.snippets.today_sales_total;
|
||||
|
||||
this.thisMonthPurchasesCount = result.snippets.this_week_purchases_count;
|
||||
this.thisMonthPurchasesTotal = result.snippets.this_week_purchases_total;
|
||||
this.thisWeekPurchasesCount = result.snippets.this_month_purchases_count;
|
||||
this.thisWeekPurchasesTotal = result.snippets.this_month_purchases_total;
|
||||
this.todayPurchasesCount = result.snippets.today_purchases_count;
|
||||
this.todayPurchasesTotal = result.snippets.today_purchases_total;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,8 @@
|
|||
<button type="button" class="btn btn-transparent p-0 float-right">
|
||||
<i [ngClass]="graphIcon"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">{{ graphSum }}</h4>
|
||||
<h4 *ngIf="dataType == availableDataTypes.number" class="mb-0">{{ graphSum }}</h4>
|
||||
<h4 *ngIf="dataType == availableDataTypes.currency" class="mb-0">{{ graphSum | currency:'GBP':true:'1.2-2' }}</h4>
|
||||
<p>{{ graphTitle }}</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { OrgGraphsService } from '../providers/org-graphs.service';
|
||||
import { DataType } from '../shared/data-types.enum';
|
||||
|
||||
interface ChartData {
|
||||
data: Array<number>;
|
||||
|
|
@ -14,11 +16,13 @@ export class GraphWidget implements OnInit {
|
|||
@Input() public graphName: string;
|
||||
@Input() public graphTitle = 'Graph';
|
||||
@Input() public graphIcon = 'icon-graph';
|
||||
@Input() public dataType: DataType = DataType.number;
|
||||
|
||||
@Output() public graphHover = new EventEmitter();
|
||||
@Output() public graphClick = new EventEmitter();
|
||||
|
||||
public graphSum: Number = 0;
|
||||
public availableDataTypes = DataType;
|
||||
|
||||
public lineChartData: Array<ChartData> = [
|
||||
{
|
||||
|
|
@ -60,7 +64,14 @@ export class GraphWidget implements OnInit {
|
|||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltip, data) => {
|
||||
return this.tooltipLabelCallback(tooltip, data);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{
|
||||
|
|
@ -72,12 +83,22 @@ export class GraphWidget implements OnInit {
|
|||
public lineChartType = 'line';
|
||||
|
||||
|
||||
constructor(private graphService: OrgGraphsService) { }
|
||||
constructor(
|
||||
private graphService: OrgGraphsService,
|
||||
private currencyPipe: CurrencyPipe,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if ( this.graphName == null ) {
|
||||
throw new Error('Attribute \'graphName\' is required on component \'widget-graph\'');
|
||||
}
|
||||
if ( this.dataType === undefined ) {
|
||||
// Need to do this as it may be passed in a loop with an undefined value
|
||||
this.dataType = DataType.number;
|
||||
}
|
||||
if ( !( this.dataType in DataType ) ) {
|
||||
console.warn('Unknown DataType for graph \'' + this.graphName + '\' - defaulting to number');
|
||||
}
|
||||
this.graphService.getGraph(this.graphName)
|
||||
.subscribe( result => this.setData(result.graph) );
|
||||
}
|
||||
|
|
@ -112,4 +133,12 @@ export class GraphWidget implements OnInit {
|
|||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
private tooltipLabelCallback(tooltipItem: any, data: any) {
|
||||
const value = tooltipItem.yLabel;
|
||||
if ( this.dataType === DataType.currency ) {
|
||||
return this.currencyPipe.transform(value, 'GBP', true, '1.2-2');
|
||||
}
|
||||
return value || '0';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
],
|
||||
|
||||
"directive-selector": [true, "attribute", "app", "camelCase"],
|
||||
"component-selector": [true, "element", ["app", "widget"], "kebab-case"],
|
||||
"component-selector": [true, "element", ["app", "widget", "snippet"], "kebab-case"],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
|
|
|
|||
Reference in a new issue