- {{ categoryEntry.category || 'Uncategorised' }}
+ {{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}
{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }}
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})
diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts
index 123dca3..809e71f 100644
--- a/src/app/dashboard/category-month.component.ts
+++ b/src/app/dashboard/category-month.component.ts
@@ -2,7 +2,7 @@ import { Directive, Component, OnInit } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment';
-
+import 'rxjs/add/operator/map';
@Component({
templateUrl: 'category-month.component.html'
@@ -31,12 +31,15 @@ export class CategoryMonthComponent implements OnInit {
weekEssential3: number = 0;
weekEssential4: number = 0;
+ categoryList: number[] = [];
dayList: any[] = [];
valueList: number[] = [];
myWeek1: any;
myWeek2: any;
myWeek3: any;
myWeek4: any;
+ categoryIdList: number[] = [];
+ categoryNameList: string[] = [];
categoryLimit1: number = 6;
categoryLimit2: number = 6;
categoryLimit3: number = 6;
@@ -46,6 +49,15 @@ export class CategoryMonthComponent implements OnInit {
private api: ApiService,
) {
this.setDate();
+ this.api.categoryList().subscribe(
+ result => {
+ this.setCategoryList(result.categories);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
this.api.categoryTransactionList().subscribe(
result => {
this.setData(result);
@@ -60,6 +72,11 @@ export class CategoryMonthComponent implements OnInit {
ngOnInit(): void {
}
+ private setCategoryList(data: any) {
+ this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
+ this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
+ }
+
private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');
diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index 3638329..e8019a4 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -11,105 +11,96 @@
-
-
-
+
-
-
-
-
-
-
+
-
No. of Essential Purchases
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Your Purchases by Category
+ Purchases by Week
-
+
+ -
+ This Week
+ {{ (weekPurchaseList.first || 0 ) }}
+ ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})
+
+
+ -
+ Last Week
+ {{ weekPurchaseList.second || 0 }}
+ ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})
+
+
+ -
+ Week Maximum
+ {{ weekPurchaseList.max || 0 }}
+ (100%)
+
+
+ -
+ Weekly Average
+ {{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}}
+ ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})
+
+
+
-
+
-
Global Puchases by Category
-
-
-
-
-
- -
-
-
-
{{ category.category || 'N/A' }}
-
-
Bought
-
{{ category.value || 'N/A' }}
-
- -
-
-
-
-
+
Purchases by Sector
+
+
+
+
+
+ -
+
+
+
{{ sectorNames [sector] || 'N/A' }}
+
+
Bought
+
{{ sectorPurchases[i] || 'N/A' }}
+
+ -
+
+
+
-
+
-
-
+
+
+
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 8870b69..55f1b6a 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -1,20 +1,10 @@
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'
@@ -30,111 +20,7 @@ export class DashboardCustomerComponent implements OnInit {
username: any;
maxPurchase: number = 0;
- 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 = false;
- public showCategoryBarChart = false;
- public showCategoryDoughnutChart = false;
-
- public barChartDataEssential:any[]=[
- {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:[{
- scaleLabel: {
- display:true,
- },
- stacked:true,
-
- }],
- }
- };
- public barChartTypeEssential:string = 'horizontalBar';
-
- 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 barChartColoursCategory: any[] = [
- {
- backgroundColor:[
- '#ffa1b5',
- '#3cde52',
- '#52afed',
- '#c133e3',
- '#f7fa08',
- '#75152d',
- '#ee12ee',
- '#15eaea',
- '#eaa015',
- '#ea1515',
- '#2d4fcc'
- ]
- }];
-
+ disableSectorButton: boolean = false;
weekPurchaseList = {
first: 0,
@@ -144,10 +30,83 @@ export class DashboardCustomerComponent implements OnInit {
count: 0,
};
- showTotalCategoryList: boolean = false;
- totalCategoryLimit: number = 10;
- totalCategoryList: any[]=[];
+ sectorNames = {
+ A: 'Agriculture, Forestry & Fishing',
+ B: 'Mining & Quarrying',
+ C: 'Manufacturing',
+ D: 'Electricity, Gas, Steam & Air Conditioning',
+ E: 'Water & Waste Management',
+ F: 'Construction',
+ G: 'Wholesale & Retail Trade',
+ H: 'Transportation & Storage',
+ I: 'Accomodation & Food Services',
+ J: 'Information & Communication',
+ K: 'Financial & Insurance Activities',
+ L: 'Real Estate',
+ M: 'Professional, Scientfic & Technical',
+ N: 'Administrative & Support Services',
+ O: 'Public Administration, Defence & Social Security',
+ P: 'Education',
+ Q: 'Human Health & Social Work',
+ R: 'Arts, Entertainment & Recreation',
+ S: 'Other Service Activities',
+ T: 'Household Domestic Business',
+ U: 'Extraterritorial Organisations and Bodies'
+ }
+ sectorIcons = {
+ A: 'icon-drop',
+ B: 'icon-diamond',
+ C: 'icon-settings',
+ D: 'icon-energy',
+ E: 'icon-trash',
+ F: 'icon-wrench',
+ G: 'icon-tag',
+ H: 'icon-speedometer',
+ I: 'icon-cup',
+ J: 'icon-feed',
+ K: 'icon-credit-card',
+ L: 'icon-graph',
+ M: 'icon-chemistry',
+ N: 'icon-drawer',
+ O: 'icon-pie-chart',
+ P: 'icon-graduation',
+ Q: 'icon-support',
+ R: 'icon-film',
+ S: 'icon-calendar',
+ T: 'icon-home',
+ U: 'icon-globe',
+ }
+
+ sectorClasses = {
+ A: 'bg-primary',
+ B: 'bg-success',
+ C: 'bg-danger',
+ D: 'bg-warning',
+ E: 'bg-info',
+ F: 'bg-primary',
+ G: 'bg-success',
+ H: 'bg-danger',
+ I: 'bg-warning',
+ J: 'bg-info',
+ K: 'bg-primary',
+ L: 'bg-success',
+ M: 'bg-danger',
+ N: 'bg-warning',
+ O: 'bg-info',
+ P: 'bg-primary',
+ Q: 'bg-success',
+ R: 'bg-danger',
+ S: 'bg-warning',
+ T: 'bg-info',
+ U: 'bg-primary',
+ }
+
+ sectorLetters: string[] = [];
+ sectorPurchases: number[] = [];
+ sectorLimit: number = 10;
+
+ sectorList: any;
// Graph widgets
public widgetList = [
@@ -181,25 +140,11 @@ export class DashboardCustomerComponent implements OnInit {
constructor(
private api: ApiService,
- private currencyPipe: CurrencyPipe,
) {
- this.setDate();
this.api.customerStats().subscribe(
result => {
this.setWeekPurchaseList(result.weeks);
- this.setWeekData(result);
- this.setChartData(result.data.cat_total);
- this.totalCategoryList = result.data.cat_list;
- 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 = [
- {data: [this.purchaseEssential], label: 'Essential', stack: '1'},
- {data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
- ];
- this.showEssentialBarChart = true;
+ this.setSectorList(result.sectors);
},
error => {
console.log('Retrieval Error');
@@ -208,35 +153,6 @@ export class DashboardCustomerComponent implements OnInit {
);
}
- private setChartData(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 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,
@@ -247,36 +163,14 @@ export class DashboardCustomerComponent implements OnInit {
};
}
- private categoryLoadMore () {
- this.disableCategoryButton = true;
- this.totalCategoryLimit = 30;
+ public setSectorList (data: any) {
+ this.sectorLetters = Object.keys(data.sectors).map(key => data.sectors[key]);
+ this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
}
- 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 {
+ private loadMore () {
+ this.disableSectorButton = true;
+ this.sectorLimit = 22;
}
ngOnInit(): void {
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 98901c3..ff6f092 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,4 +1,3 @@
-
-
-
-
-
-
-
-
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' }}
-
- -
-
-
-
-
-
-
-
-
-
+
| Position |
Name |
- Gross amount |
+ Amount |
diff --git a/src/app/dashboard/leaderboard.component.ts b/src/app/dashboard/leaderboard.component.ts
index 5c8140f..4c76fc7 100644
--- a/src/app/dashboard/leaderboard.component.ts
+++ b/src/app/dashboard/leaderboard.component.ts
@@ -5,7 +5,7 @@ import {PaginationInstance} from 'ngx-pagination';
// import { PaginationControlsComponent } from 'ngx-pagination';
// import { PaginationControlsDirective } from 'ngx-pagination';
// import { TransactionResultComponent } from '../shared/transaction-result.component';
-
+import 'rxjs/add/operator/map';
@Component({
templateUrl: 'leaderboard.component.html',
@@ -22,7 +22,7 @@ export class LeaderboardComponent implements OnInit {
public paginateConfig: PaginationInstance = {
id: 'leadpaginate',
- itemsPerPage: 20,
+ itemsPerPage: 10,
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.html b/src/app/dashboard/map.component.html
index c7346bf..4230fe4 100644
--- a/src/app/dashboard/map.component.html
+++ b/src/app/dashboard/map.component.html
@@ -39,8 +39,9 @@
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
+ [scaleControl]="true"
(idle)="viewBoundsChanged()">
-
+
-
-
-
-
-
-
-
-
-
- | 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{transactionFormStatusSuccess}}
-
-
- {{transactionFormStatusError}}
-
-
-
-
-
-
- No Recurring Transactions.
-
-
| Seller |
- Value |
- Net Value |
- Sales Tax Value |
- Gross Value |
+ Value |
Purchase Time |
- |
+ |
{
- this.categoryList = result.categories;
- this.categoryIdList = Object.keys(this.categoryList);
- },
- error => {
- console.log('Retrieval Error');
- console.log( error._body );
- }
- );
// this.myDate = new Date().toISOString().slice(0, 16);
}
ngOnInit(): void {
+ this.getMinDate();
this.loadTransactions(1);
- this.accountType = localStorage.getItem('usertype');
+ }
+
+ getMinDate() {
+ // gets the April 1st date of the current year
+ const aprilDate = moment().month(3).date(1);
+ const now = moment();
+ // Checks if current time is before April 1st, if so returns true
+ const beforeApril = now.isBefore(aprilDate);
+ if ( beforeApril === true ) {
+ this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
+ } else {
+ this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
+ }
}
loadTransactions(logPage: number) {
+ console.log(logPage);
this.api.transList(logPage).subscribe(
result => {
if (result.transactions.length > 0) {
@@ -76,13 +66,6 @@ export class TransactionLogComponent implements OnInit {
this.transactionList = null;
this.noTransactionList = true;
}
- if (result.recurring_transactions) {
- this.recurringTransactionList = result.recurring_transactions;
- this.noRecurringList = false;
- } else {
- this.recurringTransactionList = null;
- this.noRecurringList = true;
- }
},
error => {
console.log(error);
@@ -90,82 +73,4 @@ export class TransactionLogComponent implements OnInit {
);
}
-
- recurringTransactionDetails(clicked, template: TemplateRef) {
- this.clickedRecur = clicked;
- this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
- this.openModal(template);
- }
-
- openModal(template: TemplateRef) {
- this.modalRef = this.modalService.show(template);
- }
-
- editRecurringTransaction() {
- let updatedTimeSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
- this.clickedRecur.display_time = moment(this.updatedTime).format('llll');
- let myParams = {
- category: (this.clickedRecur.category == 0 ? undefined : this.clickedRecur.category),
- essential: this.clickedRecur.essential,
- id: this.clickedRecur.id,
- apply_time: updatedTimeSubmit,
- recurring_period: this.clickedRecur.recurring_period,
- seller: this.clickedRecur.seller,
- value: this.clickedRecur.value,
- };
- this.api
- .recurUpdate(myParams)
- .subscribe(
- result => {
- if ( result.success === true ) {
- this.transactionFormStatus = 'success';
- this.transactionFormStatusSuccess = 'Edit Succeeded.';
- } else {
- this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
- this.transactionFormStatus = 'send_failed';
- }
- },
- error => {
- console.log(error);
- try {
- this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
- } catch (e) {
- this.transactionFormStatusError = 'There was a server error, please try again later.';
- }
- this.transactionFormStatus = 'send_failed';
- }
- );
- }
-
- deleteRecurringTransaction() {
- let myParams = {
- id: this.clickedRecur.id,
- };
- this.api
- .recurDelete(myParams)
- .subscribe(
- result => {
- if ( result.success === true ) {
- this.transactionFormStatus = 'success';
- this.transactionFormStatusSuccess = 'Delete Succeeded.';
- } else {
- this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
- this.transactionFormStatus = 'send_failed';
- }
- },
- error => {
- console.log(error);
- try {
- this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
- } catch (e) {
- this.transactionFormStatusError = 'There was a server error, please try again later.';
- }
- this.transactionFormStatus = 'send_failed';
- }
- );
- }
-
- toggleShowMeta() {
- this.showMeta = !this.showMeta;
- }
}
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 7dec667..f5f37bb 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -20,16 +20,10 @@
-
@@ -137,7 +123,6 @@
-