+
+
+
+
+
+
+ Tick if the purchase is deemed an essential purchase for budgeting purposes.
+
+
+
+
+
+
+
+
+ Tick if the purchase frequently recurs, such as monthly.
+
+
+
+
+
+
+
+
+ Please give the period of time the purchase will recur from "Time of Transaction".
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Optional: Choose the Budget Type for the majority of the purchase.
+
+
+
+
+
+
+
+
@@ -34,21 +102,21 @@
-
+
Enter the street name where the organisation is located at.
-
+
Enter the name of the town where the organisation is located at.
-
+
Enter the postcode where the organisation is located at.
@@ -89,14 +157,14 @@
diff --git a/src/app/dashboard/add-data.component.ts b/src/app/dashboard/add-data.component.ts
index ffa4ef8..e0ad411 100644
--- a/src/app/dashboard/add-data.component.ts
+++ b/src/app/dashboard/add-data.component.ts
@@ -3,7 +3,7 @@ import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
import { OrgTableComponent } from '../shared/org-table.component';
import * as moment from 'moment';
-import 'rxjs/add/operator/map';
+
@Component({
templateUrl: 'add-data.component.html',
@@ -30,6 +30,9 @@ export class AddDataComponent implements OnInit {
organisationTown: string;
organisationPostcode: string;
amount: number;
+ essentialPurchase = false;
+ recurringPurchase = false;
+ recurringType: string;
transactionAdditionType = 1;
storeList = [];
showAddStore = false;
@@ -37,6 +40,11 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true;
myDate: any;
minDate: any;
+ categoryList: any;
+ categoryIdList: any;
+ leftCategoryList: number[] = [];
+ rightCategoryList: string[] = [];
+ categoryId: number;
constructor(
private formBuilder: FormBuilder,
@@ -64,6 +72,17 @@ export class AddDataComponent implements OnInit {
});
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
// this.myDate = new Date().toISOString().slice(0, 16);
+ this.api.categoryList().subscribe(
+ result => {
+ this.categoryList = result.categories;
+ this.categoryIdList = Object.keys(this.categoryList);
+ this.setCategoryList(this.categoryIdList);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
}
ngOnInit(): void {
@@ -71,6 +90,12 @@ export class AddDataComponent implements OnInit {
this.accountType = localStorage.getItem('usertype');
}
+ private setCategoryList(data: any) {
+ let halfLength = Math.floor(data.length / 2);
+ this.leftCategoryList = data.splice(0, halfLength);
+ this.rightCategoryList = data;
+ }
+
getMinDate() {
// gets the April 1st date of the current year
const aprilDate = moment().month(3).date(1);
@@ -149,12 +174,16 @@ export class AddDataComponent implements OnInit {
}
transactionFormValidate() {
- if (this.submitOrg.name.length === 0 ||
- this.submitOrg.town.length === 0 ||
- this.amount === 0 ) {
- this.transactionFormInvalid = true;
- } else {
+ this.transactionFormStatus = null;
+ if (this.submitOrg.name.length &&
+ this.amount &&
+ (this.recurringPurchase &&
+ this.recurringType ||
+ !this.recurringPurchase &&
+ !this.recurringType)) {
this.transactionFormInvalid = false;
+ } else {
+ this.transactionFormInvalid = true;
}
}
@@ -170,6 +199,9 @@ export class AddDataComponent implements OnInit {
transaction_value : this.amount,
purchase_time : purchaseTime,
organisation_id : this.organisationId,
+ category : this.categoryId,
+ essential : this.essentialPurchase,
+ recurring : this.recurringType,
};
break;
case 2:
@@ -178,6 +210,9 @@ export class AddDataComponent implements OnInit {
transaction_value : this.amount,
purchase_time : purchaseTime,
organisation_id : this.organisationId,
+ category : this.categoryId,
+ essential : this.essentialPurchase,
+ recurring : this.recurringType,
};
break;
case 3:
@@ -189,6 +224,9 @@ export class AddDataComponent implements OnInit {
street_name : this.submitOrg.street_name,
town : this.submitOrg.town,
postcode : this.submitOrg.postcode,
+ category : this.categoryId,
+ essential : this.essentialPurchase,
+ recurring : this.recurringType,
};
break;
}
@@ -199,31 +237,22 @@ export class AddDataComponent implements OnInit {
.subscribe(
result => {
if ( result.success === true ) {
- console.log('Successful Upload');
- console.log(result);
this.transactionFormStatus = 'success';
- console.log(this.transactionFormStatus);
this.resetForm();
} else {
- console.log('Upload Error');
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
- console.log(this.transactionFormStatus);
}
},
error => {
- console.log('Upload Error');
console.log(error);
try {
console.log(error.error);
- const jsonError = error.json();
- console.log('boop');
- this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+ 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';
- console.log(this.transactionFormStatus);
}
);
}
@@ -239,6 +268,9 @@ export class AddDataComponent implements OnInit {
this.amount = null;
this.transactionFormInvalid = true;
this.showAddStore = false;
+ this.essentialPurchase = false;
+ this.recurringPurchase = false;
+ this.recurringType = null;
}
onSubmitPayroll() {
@@ -248,14 +280,11 @@ export class AddDataComponent implements OnInit {
.orgPayroll(this.payrollForm.value)
.subscribe(
result => {
- console.log('data submitted!');
this.payrollFormStatus = 'success';
- console.log(this.payrollFormStatus);
},
error => {
console.log( error._body );
this.payrollFormStatus = 'send_failed';
- console.log(this.payrollFormStatus);
}
);
}
@@ -267,14 +296,10 @@ export class AddDataComponent implements OnInit {
.orgSupplier(this.singleSupplierForm.value)
.subscribe(
result => {
- console.log('data submitted!');
this.singleSupplierFormStatus = 'success';
- console.log(this.singleSupplierFormStatus);
},
error => {
- console.log( error._body );
this.singleSupplierFormStatus = 'send_failed';
- console.log(this.singleSupplierFormStatus);
}
);
}
@@ -286,14 +311,10 @@ export class AddDataComponent implements OnInit {
.orgEmployee(this.employeeForm.value)
.subscribe(
result => {
- console.log('data submitted!');
this.employeeFormStatus = 'success';
- console.log(this.employeeFormStatus);
},
error => {
- console.log( error._body );
this.employeeFormStatus = 'send_failed';
- console.log(this.employeeFormStatus);
}
);
}
diff --git a/src/app/dashboard/category-month.component.html b/src/app/dashboard/category-month.component.html
new file mode 100644
index 0000000..0cd885b
--- /dev/null
+++ b/src/app/dashboard/category-month.component.html
@@ -0,0 +1,172 @@
+(obj: T, key: K) {
+ return obj[key];
+ }
+ this.weekList1 = prop(data.data.categories, this.myWeek1);
+ this.weekList2 = prop(data.data.categories, this.myWeek2);
+ this.weekList3 = prop(data.data.categories, this.myWeek3);
+ this.weekList4 = prop(data.data.categories, this.myWeek4);
+ this.getMaxValue(this.weekList1, this.weekList2, this.weekList3, this.weekList4);
+ this.weekEssential1 = prop(data.data.essentials, this.myWeek1);
+ this.weekEssential2 = prop(data.data.essentials, this.myWeek2);
+ this.weekEssential3 = prop(data.data.essentials, this.myWeek3);
+ this.weekEssential4 = prop(data.data.essentials, this.myWeek4);
+ }
+
+ private getMaxValue (data1: any,
+ data2: any,
+ data3: any,
+ data4: any) {
+ if (data1) {
+ this.weekListValueSum1 = data1.reduce(function (s, a) {return s + a.value;}, 0);
+ }
+ if (data2) {
+ this.weekListValueSum2 = data2.reduce(function (s, a) {return s + a.value;}, 0);
+ }
+ if (data3) {
+ this.weekListValueSum3 = data3.reduce(function (s, a) {return s + a.value;}, 0);
+ }
+ if (data4) {
+ this.weekListValueSum4 = data4.reduce(function (s, a) {return s + a.value;}, 0);
+ }
+ }
+
+ private loadMore1 () {
+ this.disableCategoryButton1 = true;
+ this.categoryLimit1 = 20;
+ }
+ private loadMore2 () {
+ this.disableCategoryButton2 = true;
+ this.categoryLimit2 = 20;
+ }
+ private loadMore3 () {
+ this.disableCategoryButton3 = true;
+ this.categoryLimit3 = 20;
+ }
+ private loadMore4 () {
+ this.disableCategoryButton4 = true;
+ this.categoryLimit4 = 20;
+ }
+}
diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index 6a7c209..3638329 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -1,131 +1,115 @@
-
+
Enter the amount of employees the organisation has for the entry month.
-
+
Enter the amount of employees that live locally to the organisation for the entry month.
+
diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts
new file mode 100644
index 0000000..123dca3
--- /dev/null
+++ b/src/app/dashboard/category-month.component.ts
@@ -0,0 +1,119 @@
+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';
+
+
+@Component({
+ templateUrl: 'category-month.component.html'
+})
+export class CategoryMonthComponent implements OnInit {
+
+ disableCategoryButton1: boolean = false;
+ disableCategoryButton2: boolean = false;
+ disableCategoryButton3: boolean = false;
+ disableCategoryButton4: boolean = false;
+
+ weekPurchaseList = {
+ first: 0,
+ };
+
+ weekList1 = [];
+ weekList2 = [];
+ weekList3 = [];
+ weekList4 = [];
+ weekListValueSum1: number = 0;
+ weekListValueSum2: number = 0;
+ weekListValueSum3: number = 0;
+ weekListValueSum4: number = 0;
+ weekEssential1: number = 0;
+ weekEssential2: number = 0;
+ weekEssential3: number = 0;
+ weekEssential4: number = 0;
+
+ dayList: any[] = [];
+ valueList: number[] = [];
+ myWeek1: any;
+ myWeek2: any;
+ myWeek3: any;
+ myWeek4: any;
+ categoryLimit1: number = 6;
+ categoryLimit2: number = 6;
+ categoryLimit3: number = 6;
+ categoryLimit4: number = 6;
+
+ constructor(
+ private api: ApiService,
+ ) {
+ this.setDate();
+ this.api.categoryTransactionList().subscribe(
+ result => {
+ this.setData(result);
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
+ }
+ );
+ }
+
+ ngOnInit(): void {
+ }
+
+ private setDate () {
+ this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
+ this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');
+ this.myWeek3 = moment(this.myWeek2).subtract(1, 'weeks').format('YYYY-MM-DD');
+ this.myWeek4 = moment(this.myWeek3).subtract(1, 'weeks').format('YYYY-MM-DD');
+ }
+
+ private setData (data: any) {
+ function prop
+
+
+
+
+
+
+
+
+
+
+
+ Purchases Last Week
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Purchases 1 Week Ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Purchases 2 Weeks Ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Purchases 3 Weeks Ago
+
+
+
+
-
-
-
-
+
-
+
-
-
-
-
-
- {{ basicStats.today_sum | currency:'GBP':'symbol':'1.2-2' }}
- Total Today
-
-
-
-
-
-
-
- {{ basicStats.today_sum / (basicStats.today_count ? basicStats.today_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
- Avg. Spend Today
-
-
-
-
-
-
-
- {{ basicStats.week_sum | currency:'GBP':'symbol':'1.2-2' }}
- Last Week Total
-
-
-
-
-
-
-
- {{ basicStats.week_sum / (basicStats.week_count ? basicStats.week_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
- Last Week Avg. Spend
-
-
-
-
-
-
-
- {{ basicStats.month_sum | currency:'GBP':'symbol':'1.2-2' }}
- Last Month Total
-
-
-
-
-
-
-
- {{ basicStats.month_sum / (basicStats.month_count ? basicStats.month_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
- Last Month Avg. Spend
-
-
-
-
-
-
-
- {{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}
- User Total
-
-
-
-
-
+
-
- {{ basicStats.user_sum / (basicStats.user_count ? basicStats.user_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
- User Avg. Spend
-
-
+
+
+ (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.component.html b/src/app/dashboard/dashboard.component.html
index 4ee858b..98901c3 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,3 +1,4 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No. of Essential Purchases
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your Purchases by Category
+
+
+
+
+
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 39230e3..8870b69 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -1,16 +1,25 @@
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'
})
export class DashboardCustomerComponent implements OnInit {
- customersThisMonth: any;
- moneySpentThisMonth: any;
- pointsTotal: any;
- averageTransactionToday: any;
/* Setting up dashboard's main variables*/
name: any;
@@ -19,27 +28,178 @@ export class DashboardCustomerComponent implements OnInit {
trends: any;
myRank: any;
username: any;
+ maxPurchase: number = 0;
- basicStats = {
- today_sum: 0,
- today_count: 0,
- week_sum: 0,
- week_count: 0,
- month_sum: 0,
- month_count: 0,
- user_sum: 0,
- user_count: 0,
- global_sum: 0,
- global_count: 0,
- user_position: 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'
+ ]
+ }];
+
+
+ weekPurchaseList = {
+ first: 0,
+ second: 0,
+ max: 0,
+ sum: 0,
+ count: 0,
+ };
+
+ showTotalCategoryList: boolean = false;
+ totalCategoryLimit: number = 10;
+ totalCategoryList: any[]=[];
+
+
+ // Graph widgets
+ public widgetList = [
+ {
+ type: 'graph',
+ name: 'total_last_week',
+ icon: 'icon-diamond',
+ title: 'Last Week Total',
+ dataType: DataType.currency,
+ },
+ {
+ type: 'graph',
+ name: 'avg_spend_last_week',
+ icon: 'icon-diamond',
+ title: 'Last Week Avg. Spend',
+ dataType: DataType.currency,
+ },
+ {
+ type: 'graph',
+ name: 'total_last_month',
+ title: 'Last Month Total',
+ dataType: DataType.currency,
+ },
+ {
+ type: 'graph',
+ name: 'avg_spend_last_month',
+ title: 'Last Month Avg. Spend',
+ dataType: DataType.currency,
+ },
+ ];
constructor(
private api: ApiService,
+ private currencyPipe: CurrencyPipe,
) {
- this.api.basicStats().subscribe(
+ this.setDate();
+ this.api.customerStats().subscribe(
result => {
- this.basicStats = 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;
},
error => {
console.log('Retrieval Error');
@@ -48,6 +208,77 @@ 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
+
+
+
+
+
+
+
+ Global Puchases by Category
+
+
+
+
+ -
+
+
-
+
+ ++{{ category.category || 'N/A' }}+++Bought+ {{ category.value || 'N/A' }} +
+
- + + +
@@ -6,8 +7,107 @@
[graphName]="widget.name"
[graphTitle]="widget.title"
[graphIcon]="widget.icon"
- [dataType]="widget.dataType">
+ [dataType]="widget.dataType">
+
+ window).ga('set', 'page', event.urlAfterRedirects);
+ (window).ga('send', 'pageview');
+ }
+ });
+ }
+ 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 0e5302b..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';
@@ -16,19 +16,31 @@ import { AccountEditComponent } from './account-edit.component';
import { AddDataComponent } from './add-data.component';
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';
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';
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';
@@ -58,8 +70,14 @@ import { environment } from '../../environments/environment';
AddDataComponent,
OrgResultComponent,
OrgTableComponent,
+ RecurResultComponent,
+ RecurTableComponent,
TransactionLogComponent,
+ CategoryMonthComponent,
TransactionResultComponent,
+ SupplierResultComponent,
+ WardResultComponent,
+ MetaTypeResultComponent,
PayrollLogComponent,
PayrollResultComponent,
LeaderboardComponent,
@@ -69,7 +87,13 @@ import { environment } from '../../environments/environment';
FeedbackComponent,
GraphWidget,
OrgBarSnippetComponent,
+ 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 0ea44fb..6d554ef 100644
--- a/src/app/dashboard/dashboard.routing.ts
+++ b/src/app/dashboard/dashboard.routing.ts
@@ -12,10 +12,13 @@ import { AccountEditComponent } from './account-edit.component';
import { AddDataComponent } from './add-data.component';
import { FeedbackComponent } from './feedback.component';
import { TransactionLogComponent } from './transaction-log.component';
+import { CategoryMonthComponent } from './category-month.component';
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 = [
@@ -58,6 +61,11 @@ const routes: Routes = [
component: TransactionLogComponent,
data: { title: 'Transaction Log' },
},
+ {
+ path: 'category-month',
+ component: CategoryMonthComponent,
+ data: { title: 'Budget' },
+ },
{
path: 'map',
component: MapComponent,
@@ -66,7 +74,7 @@ const routes: Routes = [
{
path: 'story-trail',
component: TrailMapComponent,
- data: { title: 'Lancaster Independent Story' },
+ data: { title: 'Story Trail' },
},
{
path: 'payroll-log',
@@ -78,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/feedback.component.ts b/src/app/dashboard/feedback.component.ts
index 5228a3c..2811183 100644
--- a/src/app/dashboard/feedback.component.ts
+++ b/src/app/dashboard/feedback.component.ts
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
-import 'rxjs/add/operator/map';
+
@Component({
templateUrl: 'feedback.component.html',
@@ -55,9 +55,7 @@ export class FeedbackComponent implements OnInit {
result => {
if ( result.success === true ) {
console.log('Successful Upload');
- console.log(result);
this.feedbackFormStatus = 'success';
- console.log(this.feedbackFormStatus);
this.feedbackForm.patchValue({
feedbacktext: '',
});
@@ -65,22 +63,16 @@ export class FeedbackComponent implements OnInit {
console.log('Upload Error');
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.feedbackFormStatus = 'send_failed';
- console.log(this.feedbackFormStatus);
}
},
error => {
console.log('Upload Error');
- console.log(error);
try {
- console.log(error.error);
- const jsonError = error.json();
- console.log('boop');
- this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
+ this.feedbackFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.feedbackFormStatusError = 'There was a server error, please try again later.';
}
this.feedbackFormStatus = 'send_failed';
- console.log(this.feedbackFormStatus);
}
);
}
diff --git a/src/app/dashboard/leaderboard.component.html b/src/app/dashboard/leaderboard.component.html
index 34345f3..91f27f5 100644
--- a/src/app/dashboard/leaderboard.component.html
+++ b/src/app/dashboard/leaderboard.component.html
@@ -23,8 +23,8 @@
Position
- Value
- Purchase Time
+ Name
+ Gross amount
diff --git a/src/app/dashboard/leaderboard.component.ts b/src/app/dashboard/leaderboard.component.ts
index 4c76fc7..5c8140f 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: 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.html b/src/app/dashboard/map.component.html
index ab9a97e..4230fe4 100644
--- a/src/app/dashboard/map.component.html
+++ b/src/app/dashboard/map.component.html
@@ -3,8 +3,8 @@
+
+
+
+
+
+
+
+
+
+ Number of Essential Purchases
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All Organisation Purchases by Category
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This weeks' spending by Category
+
+
+
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 444a17c..f15669b 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,9 +1,16 @@
import { Component } from '@angular/core';
-import { Router } 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'
@@ -37,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',
@@ -49,7 +63,307 @@ 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() { }
+ 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) {
+ (
+
+
+
+
+
+
+
+ Global Puchases by Category
+
+
+
+
+ -
+
+
-
+
+ ++{{ category.category || 'N/A' }}+++Bought+ {{ category.value || 'N/A' }} +
+
- + + +
- Lancaster Independent Story
- Required Data marked in bold.
+ Purchase Map
+ Click a marker to get location details.
