+
-
+
diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index 7141abd..3638329 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -12,29 +12,34 @@
-
-
-
-
-
-
Weekly Spending by Category
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
-
Monthly Spending by Category
-
-
+
Your Purchases by Category
+
+
-
-
-
-
-
-
-
+
Global Puchases by Category
+
-
All Purchases by Category
-
-
-
-
-
- -
-
-
-
{{ category.category || 'N/A' }}
-
-
Bought
-
{{ category.value || 'N/A' }}
-
- -
-
-
-
+
+
+
+ -
+
+
+
{{ category.category || 'N/A' }}
+
+
Bought
+
{{ category.value || 'N/A' }}
+
+ -
+
+
+
+
-
+
-
-
-
+
+
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 5b0cb04..8870b69 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -2,12 +2,19 @@ import { Directive, Component, OnInit } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { GraphWidget } from '../widgets/graph-widget.component';
+import { Color, Label } from 'ng2-charts';
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
import { PiePanel } from '../panels/pie-panel.component';
import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment';
+import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
+// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
+interface SuppliersComponent {
+ name : string;
+}
@Component({
templateUrl: 'dashboard-customer.component.html'
@@ -32,6 +39,22 @@ export class DashboardCustomerComponent implements OnInit {
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];
+ public doughnutChartColoursCategory: any[] = [
+ {
+ backgroundColor:[
+ '#ffa1b5',
+ '#3cde52',
+ '#52afed',
+ '#c133e3',
+ '#f7fa08',
+ '#75152d',
+ '#ee12ee',
+ '#15eaea',
+ '#eaa015',
+ '#ea1515',
+ '#2d4fcc'
+ ]
+ }];
public doughnutChartOptionsCategory:any = {
tooltips: {
@@ -62,11 +85,12 @@ export class DashboardCustomerComponent implements OnInit {
responsive: true,
scales:{
xAxes:[{
- stacked:true
+ scaleLabel: {
+ display:true,
+ },
+ stacked:true,
+
}],
- yAxes:[{
- stacked:true
- }]
}
};
public barChartTypeEssential:string = 'horizontalBar';
@@ -94,6 +118,23 @@ export class DashboardCustomerComponent implements OnInit {
public barChartLegendCategory:boolean = false;
public barChartDataCategory:any[]=[];
public barChartLabelsCategory:string[] = [];
+ public barChartColoursCategory: any[] = [
+ {
+ backgroundColor:[
+ '#ffa1b5',
+ '#3cde52',
+ '#52afed',
+ '#c133e3',
+ '#f7fa08',
+ '#75152d',
+ '#ee12ee',
+ '#15eaea',
+ '#eaa015',
+ '#ea1515',
+ '#2d4fcc'
+ ]
+ }];
+
weekPurchaseList = {
first: 0,
@@ -107,6 +148,7 @@ export class DashboardCustomerComponent implements OnInit {
totalCategoryLimit: number = 10;
totalCategoryList: any[]=[];
+
// Graph widgets
public widgetList = [
{
@@ -148,7 +190,9 @@ export class DashboardCustomerComponent implements OnInit {
this.setWeekData(result);
this.setChartData(result.data.cat_total);
this.totalCategoryList = result.data.cat_list;
- this.showTotalCategoryList = true;
+ if (this.totalCategoryList) {
+ this.showTotalCategoryList = true;
+ }
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index ff6f092..98901c3 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,3 +1,4 @@
+
-
+
+
+
+
+
+
Number of Essential Purchases
+
+
+
+
+
+
+
+
+
+
+
+
+
+
All Organisation Purchases by Category
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This weeks' spending by Category
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Global Puchases by Category
+
+
+
+
+
+ -
+
+
+
{{ category.category || 'N/A' }}
+
+
Bought
+
{{ category.value || 'N/A' }}
+
+ -
+
+
+
+
+
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 4a15b1e..f15669b 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,10 +1,16 @@
import { Component } from '@angular/core';
-import {Router, NavigationEnd} from "@angular/router";
+import { Router, NavigationEnd } from "@angular/router";
+import { CurrencyPipe } from '@angular/common';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Color, Label } from 'ng2-charts';
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { GraphPanel } from '../panels/graph-panel.component';
+import { OrgPiePanel } from '../panels/org-pie-panel.component';
import { DataType } from '../shared/data-types.enum';
+import { ApiService } from '../providers/api-service';
import { environment } from '../../environments/environment';
+import * as moment from 'moment';
@Component({
templateUrl: 'dashboard.component.html'
@@ -38,6 +44,13 @@ export class DashboardComponent {
title: 'Sales Last 30 Days',
dataType: DataType.currency,
},
+ {
+ type: 'graph',
+ name: 'sales_last_quart',
+ icon: 'icon-diamond',
+ title: 'Sales Last Quart',
+ dataType: DataType.currency,
+ },
{
type: 'graph',
name: 'purchases_last_7_days',
@@ -50,8 +63,194 @@ export class DashboardComponent {
title: 'Purchases Last 30 Days',
dataType: DataType.currency,
},
+ {
+ type: 'graph',
+ name: 'purchases_last_quart;',
+ title: 'Purchases Last Quart',
+ dataType: DataType.currency,
+ },
];
- constructor(private router: Router) {
+
+ disableCategoryButton: boolean = false;
+
+ public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
+'bg-danger', 'bg-warning', 'bg-info'];
+
+ public chartType = 'doughnut';
+ public chartLegend = true;
+ public doughnutChartDataCategory: any[] = [];
+ public doughnutChartLabelsCategory: string[] = [];
+ public doughnutChartColoursCategory: any[] = [
+ {
+ backgroundColor:[
+ '#ffa1b5',
+ '#3cde52',
+ '#52afed',
+ '#c133e3',
+ '#f7fa08',
+ '#75152d',
+ '#ee12ee',
+ '#15eaea',
+ '#eaa015',
+ '#ea1515',
+ '#2d4fcc'
+ ]
+ }];
+
+
+ public doughnutChartOptionsCategory:any = {
+ tooltips: {
+ callbacks: {
+ label: (tooltip, data) => {
+ return this.tooltipLabelCallback(tooltip, data);
+ },
+ },
+ },
+ }
+
+ myWeek1: any;
+
+ weekList1 = [];
+
+ public purchaseNotEssential: number;
+ public purchaseEssential: number;
+ public showEssentialBarChart:boolean = false;
+ public showCategoryBarChart = false;
+ public showCategoryDoughnutChart = false;
+
+ public barChartDataEssential: ChartDataSets[] = [
+ {data: [0], label: 'Essential', stack: '1'},
+ {data: [0], label: 'Non-Essential', stack: '1'},
+ ];
+ public barChartLabelsEssential:string[] = ['All Purchases'];
+ public barChartOptionsEssential:any = {
+ responsive: true,
+ scales:{
+ xAxes:[{
+ stacked:true
+ }],
+ yAxes:[{
+ stacked:true
+ }]
+ }
+ };
+ public barChartTypeEssential:string = 'horizontalBar';
+ public barChartColoursCategory: any[] = [
+ {
+ backgroundColor:[
+ '#ffa1b5',
+ '#3cde52',
+ '#52afed',
+ '#c133e3',
+ '#f7fa08',
+ '#75152d',
+ '#ee12ee',
+ '#15eaea',
+ '#eaa015',
+ '#ea1515',
+ '#2d4fcc'
+ ]
+ }];
+
+ public barChartOptionsCategory:any = {
+ scaleShowVerticalLines: false,
+ responsive: true,
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ callback: label => `£${label}`
+ }
+ }]
+ },
+ tooltips: {
+ callbacks: {
+ label: (tooltip, data) => {
+ return this.tooltipLabelCallback(tooltip, data);
+ },
+ },
+ },
+ };
+ public barChartTypeCategory:string = 'bar';
+ public barChartLegendCategory:boolean = false;
+ public barChartDataCategory:any[]=[];
+ public barChartLabelsCategory:string[] = [];
+
+ public lineChartDataSector: ChartDataSets[] = [
+ { data: [], label: '' },
+ ];
+ public lineChartLabelsSector: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
+ public lineChartOptionsSector: (ChartOptions & { annotation: any }) = {
+ responsive: true,
+ scales: {
+ // We use this empty structure as a placeholder for dynamic theming.
+ xAxes: [{}],
+ yAxes: [{}]
+ },
+ annotation: {
+ annotations: [
+ {
+ type: 'line',
+ mode: 'vertical',
+ scaleID: 'x-axis-0',
+ value: 'March',
+ borderColor: 'orange',
+ borderWidth: 2,
+ label: {
+ enabled: true,
+ fontColor: 'orange',
+ content: 'LineAnno'
+ }
+ },
+ ],
+ },
+ };
+ public lineChartColorsSector: Color[] = [
+ { // grey
+ backgroundColor: 'rgba(148,159,177,0.2)',
+ borderColor: 'rgba(148,159,177,1)',
+ pointBackgroundColor: 'rgba(148,159,177,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+ },
+ { // dark grey
+ backgroundColor: 'rgba(77,83,96,0.2)',
+ borderColor: 'rgba(77,83,96,1)',
+ pointBackgroundColor: 'rgba(77,83,96,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(77,83,96,1)'
+ },
+ { // red
+ backgroundColor: 'rgba(255,0,0,0.3)',
+ borderColor: 'red',
+ pointBackgroundColor: 'rgba(148,159,177,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+ }
+ ];
+ public lineChartLegendSector = true;
+ public lineChartTypeSector = 'line';
+
+ weekPurchaseList = {
+ first: 0,
+ second: 0,
+ max: 0,
+ sum: 0,
+ count: 0,
+ };
+
+ showTotalCategoryList: boolean = false;
+ totalCategoryLimit: number = 10;
+ totalCategoryList: any[]=[];
+
+ constructor(
+ private router: Router,
+ private api: ApiService,
+ private currencyPipe: CurrencyPipe,
+ ) {
if (environment.enableAnalytics) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
@@ -60,5 +259,111 @@ export class DashboardComponent {
}
});
}
+ this.setDate();
+ this.api.orgStats().subscribe(
+ result => {
+ this.setWeekPurchaseList(result.weeks);
+ this.setWeekData(result);
+ this.setChartDataCat(result.data.cat_total);
+ this.setChartDataEssential(result.data.essentials);
+ this.totalCategoryList = result.data.cat_list;
+ if (this.totalCategoryList) {
+ this.showTotalCategoryList = true;
+ }
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
+ }
+
+ private setChartDataEssential (dataEs: any) {
+ this.purchaseEssential = dataEs.purchase_no_essential_total;
+ this.purchaseNotEssential = dataEs.purchase_no_total - this.purchaseEssential;
+ this.barChartDataEssential = [
+ {data: [this.purchaseEssential], label: 'Essential', stack: '1'},
+ {data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
+ ];
+ this.showEssentialBarChart = true;
+ console.log(this.barChartDataEssential);
+ }
+
+ private setChartDataCat(dataCat: any) {
+ this.barChartLabelsCategory = Object.keys(dataCat);
+ let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
+ this.barChartDataCategory = [
+ {data: barChartDataCategoryInitial, label: 'Series A'},
+ ];
+ this.showCategoryBarChart = true;
+ if (this.weekList1) {
+ let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
+ this.doughnutChartDataCategory = [
+ {data: doughnutChartDataCategoryInitial, label: 'Series A'},
+ ];
+ // setTimeout is currently a workaround for ng2-charts labels
+ setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
+ this.showCategoryDoughnutChart = true;
+ }
+ }
+
+ private setChartDataSector(dataSec: any) {
+
+ }
+
+ private setDate () {
+ this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
+ }
+
+ private setWeekData (data: any) {
+ function prop
(obj: T, key: K) {
+ return obj[key];
+ }
+ this.weekList1 = prop(data.data.categories, this.myWeek1);
+ }
+
+ public setWeekPurchaseList (data: any) {
+ this.weekPurchaseList = {
+ first: data.first,
+ second: data.second,
+ max: data.max,
+ sum: data.sum,
+ count: data.count,
+ };
+ }
+
+ private categoryLoadMore () {
+ this.disableCategoryButton = true;
+ this.totalCategoryLimit = 30;
+ }
+
+ public getBootstrapColour(index: number) {
+ return this.bootstrapColours[index % this.bootstrapColours.length];
+ }
+
+ public convertHex(hex: string, opacity: number) {
+ hex = hex.replace('#', '');
+ const r = parseInt(hex.substring(0, 2), 16);
+ const g = parseInt(hex.substring(2, 4), 16);
+ const b = parseInt(hex.substring(4, 6), 16);
+
+ const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
+ return rgba;
+ }
+
+ private tooltipLabelCallback(tooltipItem: any, data: any) {
+ var dataset = data.datasets[tooltipItem.datasetIndex];
+ var value = dataset.data[tooltipItem.index];
+ return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2');
+ }
+
+ // events
+ public chartClicked(e: any): void {
+ }
+
+ public chartHovered(e: any): void {
+ }
+
+ ngOnInit(): void {
}
}
diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts
index 21573f4..094216c 100644
--- a/src/app/dashboard/dashboard.module.ts
+++ b/src/app/dashboard/dashboard.module.ts
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ChartsModule } from 'ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxPaginationModule } from 'ngx-pagination';
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
@@ -18,6 +18,8 @@ import { FeedbackComponent } from './feedback.component';
import { TransactionLogComponent } from './transaction-log.component';
import { CategoryMonthComponent } from './category-month.component';
import { PayrollLogComponent } from './payroll-log.component';
+import { SuppliersComponent } from './suppliers.component';
+import { MoreStuffComponent } from './more-graphs-and-tables.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
@@ -26,7 +28,9 @@ import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
import { GraphPanel } from '../panels/graph-panel.component';
+import { BubbleChartComponent } from '../panels/bubble-panel.component';
import { PiePanel } from '../panels/pie-panel.component';
+import { OrgPiePanel } from '../panels/org-pie-panel.component';
import { DashboardRoutingModule } from './dashboard.routing';
import { OrgResultComponent } from '../shared/org-result.component';
@@ -34,6 +38,9 @@ import { OrgTableComponent } from '../shared/org-table.component';
import { RecurResultComponent } from '../shared/recur-result.component';
import { RecurTableComponent } from '../shared/recur-table.component';
import { TransactionResultComponent } from '../shared/transaction-result.component';
+import { SupplierResultComponent } from '../shared/supplier-result.component';
+import { WardResultComponent } from '../shared/ward-result.component';
+import { MetaTypeResultComponent } from '../shared/meta-type-result.component';
import { PayrollResultComponent } from '../shared/payroll-result.component';
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
@@ -68,6 +75,9 @@ import { environment } from '../../environments/environment';
TransactionLogComponent,
CategoryMonthComponent,
TransactionResultComponent,
+ SupplierResultComponent,
+ WardResultComponent,
+ MetaTypeResultComponent,
PayrollLogComponent,
PayrollResultComponent,
LeaderboardComponent,
@@ -80,6 +90,10 @@ import { environment } from '../../environments/environment';
CustBarSnippetComponent,
GraphPanel,
PiePanel,
+ OrgPiePanel,
+ BubbleChartComponent,
+ SuppliersComponent,
+ MoreStuffComponent,
],
providers: [
CurrencyPipe,
diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts
index 6505f9a..6d554ef 100644
--- a/src/app/dashboard/dashboard.routing.ts
+++ b/src/app/dashboard/dashboard.routing.ts
@@ -17,6 +17,8 @@ import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
+import { MoreStuffComponent } from './more-graphs-and-tables.component';
+import { SuppliersComponent } from './suppliers.component';
// Using child path to allow for FullLayout theming
const routes: Routes = [
@@ -84,6 +86,16 @@ const routes: Routes = [
path: 'feedback',
component: FeedbackComponent,
data: { title: 'Give Feedback' },
+ },
+ {
+ path: 'suppliers',
+ component: SuppliersComponent,
+ data: { title: 'Suppliers' }
+ },
+ {
+ path: 'more-graphs-and-tables',
+ component: MoreStuffComponent,
+ data: { title: 'Infographics'}
}
],
}
diff --git a/src/app/dashboard/leaderboard.component.html b/src/app/dashboard/leaderboard.component.html
index c5014ea..91f27f5 100644
--- a/src/app/dashboard/leaderboard.component.html
+++ b/src/app/dashboard/leaderboard.component.html
@@ -24,7 +24,7 @@
| Position |
Name |
- Amount |
+ Gross amount |
diff --git a/src/app/dashboard/leaderboard.component.ts b/src/app/dashboard/leaderboard.component.ts
index 4a97dfc..5c8140f 100644
--- a/src/app/dashboard/leaderboard.component.ts
+++ b/src/app/dashboard/leaderboard.component.ts
@@ -22,7 +22,7 @@ export class LeaderboardComponent implements OnInit {
public paginateConfig: PaginationInstance = {
id: 'leadpaginate',
- itemsPerPage: 10,
+ itemsPerPage: 20,
currentPage: 1,
totalItems: 0
};
@@ -70,7 +70,7 @@ export class LeaderboardComponent implements OnInit {
console.log(error);
}
);
- }
+ }org
// // dynamically changes the row style based on player's position
// // for instance, top three player and the player him/herself should
diff --git a/src/app/dashboard/map.component.ts b/src/app/dashboard/map.component.ts
index db66479..d48c567 100644
--- a/src/app/dashboard/map.component.ts
+++ b/src/app/dashboard/map.component.ts
@@ -9,7 +9,7 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit, AfterViewInit {
- @ViewChild('statusModal') myStatusModal: ModalDirective;
+ @ViewChild('statusModal', { static: true }) myStatusModal: ModalDirective;
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;
diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html
new file mode 100644
index 0000000..73cef98
--- /dev/null
+++ b/src/app/dashboard/more-graphs-and-tables.component.html
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+ | Ward |
+ Amount of Transactions |
+ Sum of Transactions |
+
+
+
+ |
+
+
+
+
+ No Data available.
+
+
+
+
+
+
+
+
+
+
+ | Ward |
+ Amount of Transactions |
+ Sum of Transactions |
+
+
+
+ |
+
+
+
+
+ No Data available.
+
+
+
+
+
+
+
+
+
+
Supplier spend amount and number of purchases
+
+
+
vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date
+
+
+
+
+
+
+
+
+
+
+
Spend & Number of Transactions
+ Date against Value and Number of Transactions
+
+
+
+
+
+
+
+
+
+
+
+
Supplier Spend History
+
+
+
+
+ Page {{ _supplierHistoryPage }} of {{ _supplierHistoryPages }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Name
+
+
+ |
+ Postcode
+
+
+ |
+ Spend
+
+
+ |
+
+
+
+ |
+
+
+
+
+
+
+
+ No Suppliers available.
+
+
+
+
+
| Seller |
- Value |
+ Value |
+ Net Value |
+ Sales Tax Value |
+ Gross Value |
Purchase Time |
- |
+ |
) {
this.clickedRecur = clicked;
this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
@@ -161,4 +163,7 @@ export class TransactionLogComponent implements OnInit {
);
}
+ toggleShowMeta() {
+ this.showMeta = !this.showMeta;
+ }
}
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 58baf2c..31e297a 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -38,6 +38,14 @@
+
+
+
+
+
@@ -94,14 +102,22 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/panels/bubble-panel.component.html b/src/app/panels/bubble-panel.component.html
new file mode 100644
index 0000000..9a9ab6b
--- /dev/null
+++ b/src/app/panels/bubble-panel.component.html
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/src/app/panels/bubble-panel.component.ts b/src/app/panels/bubble-panel.component.ts
new file mode 100644
index 0000000..e57a646
--- /dev/null
+++ b/src/app/panels/bubble-panel.component.ts
@@ -0,0 +1,97 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Color } from 'ng2-charts';
+
+@Component({
+ selector: 'app-bubble-chart',
+ templateUrl: './bubble-panel.component.html',
+})
+export class BubbleChartComponent implements OnInit {
+ public bubbleChartOptions: ChartOptions = {
+ responsive: true,
+ scales: {
+ xAxes: [
+ {
+ ticks: {
+ min: 0,
+ max: 30,
+ }
+ }
+ ],
+ yAxes: [
+ {
+ ticks: {
+ min: 0,
+ max: 30,
+ }
+ }
+ ]
+ }
+ };
+ public bubbleChartType: ChartType = 'bubble';
+ public bubbleChartLegend = true;
+
+ public bubbleChartData: ChartDataSets[] = [
+ {
+ data: [
+ { x: 10, y: 10, r: 10 },
+ { x: 15, y: 5, r: 15 },
+ { x: 26, y: 12, r: 23 },
+ { x: 7, y: 8, r: 8 },
+ ],
+ label: 'Series A',
+ backgroundColor: 'green',
+ borderColor: 'blue',
+ hoverBackgroundColor: 'purple',
+ hoverBorderColor: 'red',
+ },
+ ];
+
+ public bubbleChartColors: Color[] = [
+ {
+ backgroundColor: [
+ 'red',
+ 'green',
+ 'blue',
+ 'purple',
+ 'yellow',
+ 'brown',
+ 'magenta',
+ 'cyan',
+ 'orange',
+ 'pink'
+ ]
+ }
+ ];
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ // events
+ public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
+ console.log(event, active);
+ }
+
+ public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+ console.log(event, active);
+ }
+
+ private rand(max: number) {
+ return Math.trunc(Math.random() * max);
+ }
+
+ private randomPoint(maxCoordinate: number) {
+ const x = this.rand(maxCoordinate);
+ const y = this.rand(maxCoordinate);
+ const r = this.rand(30) + 5;
+ return { x, y, r };
+ }
+
+ public randomize(): void {
+ const numberOfPoints = this.rand(5) + 5;
+ const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
+ this.bubbleChartData[0].data = data;
+ }
+}
diff --git a/src/app/panels/candlestick.component.html b/src/app/panels/candlestick.component.html
new file mode 100644
index 0000000..9aa9cb5
--- /dev/null
+++ b/src/app/panels/candlestick.component.html
@@ -0,0 +1,19 @@
+
+
\ No newline at end of file
diff --git a/src/app/panels/candlestick.component.ts b/src/app/panels/candlestick.component.ts
new file mode 100644
index 0000000..4f8d3c0
--- /dev/null
+++ b/src/app/panels/candlestick.component.ts
@@ -0,0 +1,84 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import 'dist/chartjs-chart-financial/chartjs-chart-financial';
+import * as luxon from 'luxon';
+import 'chartjs-adapter-luxon';
+import { ChartOptions } from 'chart.js';
+import { Color, BaseChartDirective } from 'ng2-charts';
+
+@Component({
+ selector: 'app-financial-chart',
+ templateUrl: './financial-chart.component.html',
+ styleUrls: ['./financial-chart.component.css']
+})
+export class FinancialChartComponent implements OnInit {
+ barCount = 60;
+ initialDateStr = '01 Apr 2017 00:00 Z';
+
+ public financialChartData = [
+ {
+ label: 'CHRT - Chart.js Corporation',
+ data: this.getRandomData(this.initialDateStr, this.barCount)
+ },
+ ];
+ public financialChartOptions: ChartOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ };
+ public financialChartColors: Color[] = [
+ {
+ borderColor: 'black',
+ backgroundColor: 'rgba(255,0,0,0.3)',
+ },
+ ];
+ public financialChartLegend : Boolean;
+ public chartLegend : Boolean;
+ public financialChartType = 'candlestick';
+ public chartType : string;
+ public financialChartPlugins = [];
+
+ @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
+
+ constructor() { }
+
+ ngOnInit() {
+ this.financialChartType = 'candlestick';
+ this.chartType=this.financialChartType;
+
+ this.financialChartLegend = this.chartLegend;
+ }
+
+ randomNumber(min: number, max: number) {
+ return Math.random() * (max - min) + min;
+ }
+
+ randomBar(date: luxon.DateTime, lastClose: number) {
+ const open = this.randomNumber(lastClose * 0.95, lastClose * 1.05);
+ const close = this.randomNumber(open * 0.95, open * 1.05);
+ const high = this.randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
+ const low = this.randomNumber(Math.min(open, close) * 0.9, Math.min(open, close));
+ return {
+ t: date.valueOf(),
+ o: open,
+ h: high,
+ l: low,
+ c: close
+ };
+ }
+
+ getRandomData(dateStr: string, count: number) {
+ let date = luxon.DateTime.fromRFC2822(dateStr);
+ const data = [this.randomBar(date, 30)];
+ while (data.length < count) {
+ date = date.plus({ days: 1 });
+ if (date.weekday <= 5) {
+ data.push(this.randomBar(date, data[data.length - 1].c));
+ }
+ }
+ return data;
+ }
+
+ update() {
+ // candlestick vs ohlc
+ this.financialChartType = this.financialChartType === 'candlestick' ? 'ohlc' : 'candlestick';
+ }
+}
\ No newline at end of file
diff --git a/src/app/panels/graph-panel.component.html b/src/app/panels/graph-panel.component.html
index 35d1aa1..6f4f35e 100644
--- a/src/app/panels/graph-panel.component.html
+++ b/src/app/panels/graph-panel.component.html
@@ -1,18 +1,9 @@
-
diff --git a/src/app/panels/org-pie-panel.component.ts b/src/app/panels/org-pie-panel.component.ts
new file mode 100644
index 0000000..f56152e
--- /dev/null
+++ b/src/app/panels/org-pie-panel.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ApiService } from '../providers/api-service';
+import { OrgPiesService } from '../providers/org-pies.service';
+import { DataType } from '../shared/data-types.enum';
+import { ChartData } from '../_interfaces/chart-data';
+
+
+@Component({
+ selector: 'org-pie-panel',
+ templateUrl: 'org-pie-panel.component.html',
+})
+
+export class OrgPiePanel implements OnInit {
+
+ public chartType = 'pie';
+ public chartLegend = true;
+ public doughnutChartDataLocal: number[] = [];
+ public doughnutChartColors: any[] = [
+ {
+ backgroundColor:[
+ '#ffa1b5',
+ '#3cde52',
+ '#52afed',
+ '#c133e3',
+ '#f7fa08',
+ '#75152d',
+ '#ee12ee',
+ '#15eaea',
+ '#eaa015',
+ '#ea1515',
+ '#2d4fcc'
+ ]
+ },
+ {
+ borderColor: [
+ 'red',
+ 'green',
+ 'blue',
+ 'purple',
+ 'yellow',
+ 'brown',
+ 'magenta',
+ 'cyan',
+ 'orange',
+ 'pink'
+ ]
+ },
+ { borderWidth: [100]
+ },
+];
+
+ public doughnutChartLabelsLocal: string[] = [];
+
+ constructor(
+ private api: ApiService,
+ private pieService: OrgPiesService,
+ ) {
+ this.pieService.getOrgPie().subscribe(
+ result => {
+ this.setChartData(result.local_all);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
+ }
+
+ public ngOnInit(): void {
+
+ }
+
+ private setChartData(dataLocal: any) {
+ this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
+ // setTimeout is currently a workaround for ng2-charts labels
+ setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
+ }
+
+ // events
+ public chartClicked(e: any): void {
+ }
+
+ public chartHovered(e: any): void {
+ }
+
+}
diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html
index 0ddfafb..0a3846d 100644
--- a/src/app/panels/pie-panel.component.html
+++ b/src/app/panels/pie-panel.component.html
@@ -2,13 +2,14 @@
-
All Purchases
+ All Purchases by Category
+
\ No newline at end of file
diff --git a/src/app/panels/polar-panel.component.ts b/src/app/panels/polar-panel.component.ts
new file mode 100644
index 0000000..e698fb4
--- /dev/null
+++ b/src/app/panels/polar-panel.component.ts
@@ -0,0 +1,72 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { SingleDataSet, Label } from 'ng2-charts';
+import { ChartType } from 'chart.js';
+import { ApiService } from '../providers/api-service';
+import { CustPiesService } from '../providers/cust-pies.service';
+import { DataType } from '../shared/data-types.enum';
+import { ChartData } from '../_interfaces/chart-data';
+
+@Component({
+ selector: 'polar-area',
+ templateUrl: 'polar-panel.component.html',
+})
+
+export class PolarAreaChartComponent implements OnInit {
+ // PolarArea
+
+ public chartType : 'polar-area';
+ public polarAreaChartLabels: Label[];
+ public polarAreaChartData: SingleDataSet;
+ public chartLegend : Boolean;
+ public polarAreaLegend : Boolean;
+
+ public polarChartLabelsLocal: string[] = [];
+ public polarChartDataLocal: number[] = [];
+
+ public polarAreaChartType: ChartType = 'polarArea';
+
+ constructor(
+ private api: ApiService,
+ private pieService: CustPiesService,
+ ) {
+ this.pieService.getPie().subscribe(
+ result => {
+ this.setChartData(result.local_all);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
+ }
+
+ ngOnInit() {
+ this.polarAreaLegend = this.chartLegend;
+ this.polarAreaLegend = true;
+ }
+
+ private setChartData(dataLocal: any) {
+ this.polarChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
+ // setTimeout is currently a workaround for ng2-charts labels
+ setTimeout(() => this.polarChartLabelsLocal = Object.keys(dataLocal), 0);
+ }
+
+ public convertHex(hex: string, opacity: number) {
+ hex = hex.replace('#', '');
+ const r = parseInt(hex.substring(0, 2), 16);
+ const g = parseInt(hex.substring(2, 4), 16);
+ const b = parseInt(hex.substring(4, 6), 16);
+
+ const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
+ return rgba;
+ }
+
+ // events
+ public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
+ console.log(event, active);
+ }
+
+ public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+ console.log(event, active);
+ }
+}
\ No newline at end of file
diff --git a/src/app/panels/stacked-bar.component.html.broken b/src/app/panels/stacked-bar.component.html.broken
new file mode 100644
index 0000000..8a95a2e
--- /dev/null
+++ b/src/app/panels/stacked-bar.component.html.broken
@@ -0,0 +1,19 @@
+
+
\ No newline at end of file
diff --git a/src/app/panels/stacked-bar.component.ts.broken b/src/app/panels/stacked-bar.component.ts.broken
new file mode 100644
index 0000000..3987dc5
--- /dev/null
+++ b/src/app/panels/stacked-bar.component.ts.broken
@@ -0,0 +1,68 @@
+import { NgModule, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ApiService } from '../providers/api-service';
+import { CustPiesService } from '../providers/cust-pies.service';
+import { DataType } from '../shared/data-types.enum';
+import { ChartData } from '../_interfaces/chart-data';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { DxChartModule } from 'devextreme-angular';
+
+if(!/localhost/.test(document.location.host)) {
+ enableProdMode();
+}
+
+@Component({
+ selector: 'stacked-bar',
+ templateUrl: 'stacked-bar.component.html',
+})
+@NgModule({
+ imports: [
+ BrowserModule,
+ DxChartModule
+ ],
+ declarations: [StackedBarChartComponent],
+ bootstrap: [StackedBarChartComponent]
+})
+export class StackedBarChartComponent {
+
+ public chartType: 'stacked-bar';
+ public chartLegend = true;
+ public stackedBarChartDataLocal : number[] = [];
+ public stackedBarChartLabelsLocal : string[] = [];
+
+ constructor(
+ private api: ApiService,
+ private pieService: CustPiesService,
+ ) {
+ this.pieService.getPie().subscribe(
+ result => {
+ this.setChartData(result.local_all);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
+ }
+
+ public ngOnInit(): void {
+ console.log("stacked bar graph tried to initialise");
+ }
+
+ private setChartData(dataLocal: any) {
+ this.stackedBarChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
+ // setTimeout is currently a workaround for ng2-charts labels
+ setTimeout(() => this.stackedBarChartLabelsLocal = Object.keys(dataLocal), 0);
+ }
+
+ customizeTooltip(arg: any) {
+ return {
+ text: arg.percentText + ' - ' + arg.valueText
+ };
+ }
+}
+
+
+platformBrowserDynamic().bootstrapModule(StackedBarChartComponent);
\ No newline at end of file
diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts
index 61508c1..8307371 100644
--- a/src/app/providers/api-service.ts
+++ b/src/app/providers/api-service.ts
@@ -133,6 +133,43 @@ export class ApiService {
);
}
+ // LCC data
+ public externalTransactions() {
+ const key = this.sessionKey;
+ return this.http.post
(
+ this.apiUrl + '/v1/organisation/external/transactions',
+ {
+ session_key : key,
+ }
+ );
+ }
+
+ public loadMiscUrl(extra_url, extraArgs = {}) {
+ const key = this.sessionKey;
+ return this.http.post(
+ this.apiUrl + '/v1/' + extra_url,
+ {
+ session_key : key,
+ ...extraArgs,
+ }
+ );
+ }
+
+ public externalSuppliers(page, sortBy, sortDir, perPage, search) {
+ const key = this.sessionKey;
+ return this.http.post(
+ this.apiUrl + '/v1/organisation/external/suppliers',
+ {
+ session_key : key,
+ page : page,
+ sort_by : sortBy,
+ sort_dir : sortDir,
+ per_page : perPage,
+ search : search,
+ }
+ );
+ }
+
// Searches organisations used for transaction submission
public search(data) {
@@ -324,4 +361,15 @@ export class ApiService {
}
);
}
+
+ // Basic Customer User stats API
+ public orgStats() {
+ const key = this.sessionKey;
+ return this.http.post(
+ this.apiUrl + '/stats/organisation',
+ {
+ session_key : key,
+ }
+ );
+ }
}
diff --git a/src/app/providers/org-graphs.service.ts b/src/app/providers/org-graphs.service.ts
index d19a53b..859361c 100644
--- a/src/app/providers/org-graphs.service.ts
+++ b/src/app/providers/org-graphs.service.ts
@@ -3,7 +3,7 @@ import { ApiService } from './api-service';
@Injectable()
export class OrgGraphsService {
- private orgGraphUrl = '/v1/customer/graphs';
+ private orgGraphUrl = '/v1/organisation/graphs';
constructor(private api: ApiService) { }
diff --git a/src/app/providers/org-pies.service.ts b/src/app/providers/org-pies.service.ts
new file mode 100644
index 0000000..987b973
--- /dev/null
+++ b/src/app/providers/org-pies.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from './api-service';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class OrgPiesService {
+ private orgPieUrl = '/v1/organisation/pies';
+
+ constructor(private api: ApiService) { }
+
+ public getOrgPie(): Observable {
+ return this.api.post(this.orgPieUrl);
+ }
+}
diff --git a/src/app/shared/meta-type-result.component.html b/src/app/shared/meta-type-result.component.html
new file mode 100644
index 0000000..755ba49
--- /dev/null
+++ b/src/app/shared/meta-type-result.component.html
@@ -0,0 +1,3 @@
+{{type.type}} |
+{{type.count}} |
+{{type.sum | currency:'GBP':'symbol':'1.2-2' }} |
diff --git a/src/app/shared/meta-type-result.component.ts b/src/app/shared/meta-type-result.component.ts
new file mode 100644
index 0000000..5a5a0c2
--- /dev/null
+++ b/src/app/shared/meta-type-result.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+interface MetaTypeData {
+ type: string;
+ sum: number;
+ count: number;
+}
+
+@Component({
+ // tslint:disable-next-line
+ selector: '[meta-type-result]',
+ templateUrl: 'meta-type-result.component.html',
+})
+export class MetaTypeResultComponent implements OnInit {
+ @Input() public type: MetaTypeData;
+
+ ngOnInit(): void {
+ }
+}
diff --git a/src/app/shared/supplier-result.component.html b/src/app/shared/supplier-result.component.html
new file mode 100644
index 0000000..5f73644
--- /dev/null
+++ b/src/app/shared/supplier-result.component.html
@@ -0,0 +1,3 @@
+{{supplier.name}} |
+{{supplier.postcode}} |
+{{supplier.spend | currency:'GBP':'symbol':'1.2-2' }} |
diff --git a/src/app/shared/supplier-result.component.ts b/src/app/shared/supplier-result.component.ts
new file mode 100644
index 0000000..aac4e75
--- /dev/null
+++ b/src/app/shared/supplier-result.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+interface SupplierData {
+ name: string;
+ postcode: string;
+ spend: number;
+}
+
+@Component({
+ // tslint:disable-next-line
+ selector: '[supplier-result]',
+ templateUrl: 'supplier-result.component.html',
+})
+export class SupplierResultComponent implements OnInit {
+ @Input() public supplier: SupplierData;
+
+ ngOnInit(): void {
+ }
+}
diff --git a/src/app/shared/transaction-result.component.html b/src/app/shared/transaction-result.component.html
index 8218cb7..279ca90 100644
--- a/src/app/shared/transaction-result.component.html
+++ b/src/app/shared/transaction-result.component.html
@@ -1,3 +1,6 @@
{{transaction.seller}} |
-{{transaction.value | currency:'GBP':'symbol':'1.2-2' }} |
+{{transaction.value | currency:'GBP':'symbol':'1.2-2' }} |
+{{transaction.net_value | currency:'GBP':'symbol':'1.2-2' }} |
+{{transaction.sales_tax_value | currency:'GBP':'symbol':'1.2-2' }} |
+{{transaction.gross_value | currency:'GBP':'symbol':'1.2-2' }} |
{{transactionDate}} |
diff --git a/src/app/shared/transaction-result.component.ts b/src/app/shared/transaction-result.component.ts
index a293b72..97b8bd9 100644
--- a/src/app/shared/transaction-result.component.ts
+++ b/src/app/shared/transaction-result.component.ts
@@ -14,6 +14,7 @@ interface TransactionData {
})
export class TransactionResultComponent implements OnInit {
@Input() public transaction: TransactionData;
+ @Input() public showMeta: boolean;
public transactionDate: string;
ngOnInit(): void {
diff --git a/src/app/shared/ward-result.component.html b/src/app/shared/ward-result.component.html
new file mode 100644
index 0000000..1d5246f
--- /dev/null
+++ b/src/app/shared/ward-result.component.html
@@ -0,0 +1,3 @@
+{{ward.ward}} |
+{{ward.count}} |
+{{ward.sum | currency:'GBP':'symbol':'1.2-2' }} |
diff --git a/src/app/shared/ward-result.component.ts b/src/app/shared/ward-result.component.ts
new file mode 100644
index 0000000..d147f1a
--- /dev/null
+++ b/src/app/shared/ward-result.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+interface WardData {
+ ward: string;
+ sum: number;
+ count: number;
+}
+
+@Component({
+ // tslint:disable-next-line
+ selector: '[ward-result]',
+ templateUrl: 'ward-result.component.html',
+})
+export class WardResultComponent implements OnInit {
+ @Input() public ward: WardData;
+
+ ngOnInit(): void {
+ }
+}
diff --git a/src/app/snippets/org-snippet-bar.component.html b/src/app/snippets/org-snippet-bar.component.html
index db5bfb6..02ca850 100644
--- a/src/app/snippets/org-snippet-bar.component.html
+++ b/src/app/snippets/org-snippet-bar.component.html
@@ -2,7 +2,15 @@