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 2017-09-07 16:25:57 +01:00 committed by GitHub
commit 4161b57476
12 changed files with 147 additions and 799 deletions

View file

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

View file

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

View file

@ -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;
}
);
}
// 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++) {

View file

@ -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 { }

View file

@ -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) {

View 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);
}
}

View file

@ -0,0 +1,4 @@
export enum DataType {
number,
currency,
}

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

View 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;
}
);
}
}

View file

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

View file

@ -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';
}
}

View file

@ -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,