+
-
-
-
-
-
Customers
-
November 2015
-
-
-
-
-
-
-
-
-
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 47da3e5..cbdef96 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -5,26 +5,36 @@ import { Router } from '@angular/router';
import { GraphWidget } from '../widgets/graph-widget.component';
@Component({
- templateUrl: 'dashboard.component.html'
+ templateUrl: 'dashboard-customer.component.html'
})
-export class DashboardComponent implements OnInit {
- shuffledArray: any;
- showGraph: any;
+export class DashboardCustomerComponent implements OnInit {
showSnippet: any;
customersThisMonth: any;
moneySpentThisMonth: any;
pointsTotal: any;
averageTransactionToday: any;
- customersThisWeek: any;
- customersLastWeek: any;
- customersLastMonth: any;
- customersLastYear: any;
- pointsThisWeek: any;
- pointsLastWeek: any;
- percentOfCustomersSector: any;
- noOfCustomersSector: any;
- percentOfLocalSuppliers: any;
- percentOfSingleCompetitorLocalSuppliers: any;
+
+ /* Setting up dashboard's main variables*/
+ name: any;
+ email:any;
+ myPearPoints: any;
+ trends: any;
+ myRank: any;
+ username: any;
+
+ 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,
+ };
public widgetList = [
{
@@ -45,688 +55,17 @@ export class DashboardComponent implements OnInit {
private http: Http,
private api: ApiService,
) {
- this.shuffle = this.shuffledArray;
- this.api.graph_data(undefined)
- .subscribe(
+ this.api.basicStats().subscribe(
result => {
- console.log(result);
- // Return what data to show 4 of
- this.showGraph = result.elementstoshow.graphs;
- this.showSnippet = result.elementstoshow.snippets;
- // Percentage Chart
- this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal;
- this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal;
- // Percentage Chart 2
- this.percentOfCustomersSector = result.data.customersinsector.percent;
- this.noOfCustomersSector = result.data.customersinsector.customerno;
- // Chart 1
- this.customersThisWeek = result.data.customersthisweek;
- this.lineChart1Data[0].data = this.customersThisWeek.customerno;
- this.lineChart1Labels = this.customersThisWeek.day;
- // Chart 4
- this.customersLastYear = result.data.customerslastyear;
- this.lineChart4Data[0].data = this.customersLastYear.customerno;
- this.lineChart4Labels = this.customersLastYear.month;
- // Chart 5
- this.pointsThisWeek = result.data.pointsthisweek;
- this.lineChart5Data[0].data = this.pointsThisWeek.points;
- this.lineChart5Labels = this.pointsThisWeek.day;
- // Chart 6
- this.pointsLastWeek = result.data.pointslastweek;
- this.barChart1Data[0].data = this.pointsLastWeek.points;
- this.barChart1Labels = this.pointsLastWeek.day;
- // Chart 7
- this.customersLastWeek = result.data.customerslastweek;
- this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno;
- this.lineChart6Labels = this.customersLastWeek.day;
- // Chart 8
- this.customersLastMonth = result.data.customerslastmonth;
- this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno;
- this.lineChart7Labels = this.customersLastMonth.day;
- // Chart 9
- this.customersLastYear = result.data.customerslastyear;
- this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno;
- this.lineChart8Labels = this.customersLastYear.month;
- }
- ),
- this.api.breadcrumb_data(undefined)
- .subscribe(
- result => {
- console.log(result);
- this.customersThisMonth = result.customersthismonth;
- this.moneySpentThisMonth = result.moneyspentthismonth;
- this.pointsTotal = result.pointstotal;
- this.averageTransactionToday = result.averagetransactiontoday;
+ this.basicStats = result;
+ },
+ error => {
+ console.log('Retrieval Error');
+ console.log( error._body );
}
);
}
- // Fisher-Yates shuffle function
- public shuffle(array) {
- return new Promise(resolve => {
- let counter = array.length;
-
- // While there are elements in the array
- while (counter > 0) {
- // Pick a random index
- const index = Math.floor(Math.random() * counter);
-
- // Decrease counter by 1
- counter--;
-
- // And swap the last element with it
- const temp = array[counter];
- array[counter] = array[index];
- array[index] = temp;
- }
-
- this.shuffledArray = array;
- resolve(true);
- });
- }
-
- public brandPrimary = '#20a8d8';
- public brandSuccess = '#4dbd74';
- public brandInfo = '#63c2de';
- public brandWarning = '#f8cb00';
- public brandDanger = '#f86c6b';
-
- // dropdown buttons
- public status: { isopen } = { isopen: false };
- public toggleDropdown($event: MouseEvent): void {
- $event.preventDefault();
- $event.stopPropagation();
- this.status.isopen = !this.status.isopen;
- }
-
- // convert Hex to RGBA
- public convertHex(hex: string, opacity: number) {
- hex = hex.replace('#', '');
- 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(e: any): void {
- console.log(e);
- }
-
- public chartHovered(e: any): void {
- console.log(e);
- }
-
- // lineChart1
- public lineChart1Data: Array
= [
- {
- data: [],
- label: 'Series A'
- }
- ];
- public lineChart1Labels: Array = [];
- public lineChart1Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent'
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- }
-
- }],
- yAxes: [{
- display: false,
- ticks: {
- display: false,
- }
- }],
- },
- elements: {
- line: {
- borderWidth: 1
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart1Colours: Array = [
- { // grey
- backgroundColor: this.brandPrimary,
- borderColor: 'rgba(255,255,255,.55)'
- }
- ];
- public lineChart1Legend = false;
- public lineChart1Type = 'line';
-
- // lineChart4
- public lineChart4Data: Array = [
- {
- data: [],
- label: 'Series B'
- }
- ];
- public lineChart4Labels: Array = [];
- public lineChart4Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent'
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- }
-
- }],
- yAxes: [{
- display: false,
- ticks: {
- display: false,
- }
- }],
- },
- elements: {
- line: {
- tension: 0.00001,
- borderWidth: 1
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart4Colours: Array = [
- { // grey
- backgroundColor: this.brandInfo,
- borderColor: 'rgba(255,255,255,.55)'
- }
- ];
- public lineChart4Legend = false;
- public lineChart4Type = 'line';
-
- // lineChart6
- public lineChart6Data: Array = [
- {
- data: [],
- label: 'Series B'
- }
- ];
- public lineChart6Labels: Array = [];
- public lineChart6Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent'
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- }
-
- }],
- yAxes: [{
- display: false,
- ticks: {
- display: false,
- }
- }],
- },
- elements: {
- line: {
- tension: 0.00001,
- borderWidth: 1
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart6Colours: Array = [
- { // grey
- backgroundColor: this.brandInfo,
- borderColor: 'rgba(255,255,255,.55)'
- }
- ];
- public lineChart6Legend = false;
- public lineChart6Type = 'line';
-
- // lineChart7
- public lineChart7Data: Array = [
- {
- data: [],
- label: 'Series B'
- }
- ];
- public lineChart7Labels: Array = [];
- public lineChart7Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- display: false
- }],
- yAxes: [{
- display: false
- }]
- },
- elements: {
- line: {
- borderWidth: 2
- },
- point: {
- radius: 2,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart7Colours: Array = [
- { // grey
- backgroundColor: this.brandInfo,
- borderColor: 'rgba(255,255,255,.55)'
- }
- ];
- public lineChart7Legend = false;
- public lineChart7Type = 'line';
-
- // lineChart8
- public lineChart8Data: Array = [
- {
- data: [],
- label: 'Series B'
- }
- ];
- public lineChart8Labels: Array = [];
- public lineChart8Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent'
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- }
-
- }],
- yAxes: [{
- display: false,
- ticks: {
- display: false,
- }
- }],
- },
- elements: {
- line: {
- tension: 0.00001,
- borderWidth: 1
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart8Colours: Array = [
- { // grey
- backgroundColor: this.brandInfo,
- borderColor: 'rgba(255,255,255,.55)'
- }
- ];
- public lineChart8Legend = false;
- public lineChart8Type = 'line';
-
- // lineChart5
- public lineChart5Data: Array = [
- {
- data: [],
- label: 'Series A'
- }
- ];
- public lineChart5Labels: Array = [];
- public lineChart5Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- display: false
- }],
- yAxes: [{
- display: false
- }]
- },
- elements: {
- line: {
- borderWidth: 2
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
- legend: {
- display: false
- }
- };
- public lineChart5Colours: Array = [
- {
- backgroundColor: 'rgba(255,255,255,.2)',
- borderColor: 'rgba(255,255,255,.55)',
- }
- ];
- public lineChart5Legend = false;
- public lineChart5Type = 'line';
-
-
- // barChart1
- public barChart1Data: Array = [
- {
- data: [],
- label: 'Series A'
- }
- ];
- public barChart1Labels: Array = [];
- public barChart1Options: any = {
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- display: false,
- barPercentage: 0.6,
- }],
- yAxes: [{
- display: false
- }]
- },
- legend: {
- display: false
- }
- };
- public barChart1Colours: Array = [
- {
- backgroundColor: 'rgba(255,255,255,.3)',
- borderWidth: 0
- }
- ];
- public barChart1Legend = false;
- public barChart1Type = 'bar';
-
- // mainChart
-
- public random(min: number, max: number) {
- return Math.floor(Math.random() * (max - min + 1) + min);
- }
-
- public mainChartElements = 27;
- public mainChartData1: Array = [];
- public mainChartData2: Array = [];
- public mainChartData3: Array = [];
-
- public mainChartData: Array = [
- {
- data: this.mainChartData1,
- label: 'Current'
- },
- {
- data: this.mainChartData2,
- label: 'Previous'
- },
- {
- data: this.mainChartData3,
- label: 'BEP'
- }
- ];
- /* tslint:disable:max-line-length */
- public mainChartLabels: Array = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
- /* tslint:enable:max-line-length */
- public mainChartOptions: any = {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- gridLines: {
- drawOnChartArea: false,
- },
- ticks: {
- callback: function(value: any) {
- return value.charAt(0);
- }
- }
- }],
- yAxes: [{
- ticks: {
- beginAtZero: true,
- maxTicksLimit: 5,
- stepSize: Math.ceil(250 / 5),
- max: 250
- }
- }]
- },
- elements: {
- line: {
- borderWidth: 2
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- }
- },
- legend: {
- display: false
- }
- };
- public mainChartColours: Array = [
- { // brandInfo
- backgroundColor: this.convertHex(this.brandInfo, 10),
- borderColor: this.brandInfo,
- pointHoverBackgroundColor: '#fff'
- },
- { // brandSuccess
- backgroundColor: 'transparent',
- borderColor: this.brandSuccess,
- pointHoverBackgroundColor: '#fff'
- },
- { // brandDanger
- backgroundColor: 'transparent',
- borderColor: this.brandDanger,
- pointHoverBackgroundColor: '#fff',
- borderWidth: 1,
- borderDash: [8, 5]
- }
- ];
- public mainChartLegend = false;
- public mainChartType = 'line';
-
- // social box charts
-
- public socialChartData1: Array = [
- {
- data: [65, 59, 84, 84, 51, 55, 40],
- label: 'Facebook'
- }
- ];
- public socialChartData2: Array = [
- {
- data: [1, 13, 9, 17, 34, 41, 38],
- label: 'Twitter'
- }
- ];
- public socialChartData3: Array = [
- {
- data: [78, 81, 80, 45, 34, 12, 40],
- label: 'LinkedIn'
- }
- ];
- public socialChartData4: Array = [
- {
- data: [35, 23, 56, 22, 97, 23, 64],
- label: 'Google+'
- }
- ];
-
- public socialChartLabels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
- public socialChartOptions: any = {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- display: false,
- }],
- yAxes: [{
- display: false,
- }]
- },
- elements: {
- line: {
- borderWidth: 2
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- }
- },
- legend: {
- display: false
- }
- };
- public socialChartColours: Array = [
- {
- backgroundColor: 'rgba(255,255,255,.1)',
- borderColor: 'rgba(255,255,255,.55)',
- pointHoverBackgroundColor: '#fff'
- }
- ];
- public socialChartLegend = false;
- public socialChartType = 'line';
-
- // sparkline charts
-
- public sparklineChartData1: Array = [
- {
- data: [35, 23, 56, 22, 97, 23, 64],
- label: 'Clients'
- }
- ];
- public sparklineChartData2: Array = [
- {
- data: [65, 59, 84, 84, 51, 55, 40],
- label: 'Clients'
- }
- ];
-
- public sparklineChartLabels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
- public sparklineChartOptions: any = {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- xAxes: [{
- display: false,
- }],
- yAxes: [{
- display: false,
- }]
- },
- elements: {
- line: {
- borderWidth: 2
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- }
- },
- legend: {
- display: false
- }
- };
- public sparklineChartDefault: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: '#d1d4d7',
- }
- ];
- public sparklineChartPrimary: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: this.brandPrimary,
- }
- ];
- public sparklineChartInfo: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: this.brandInfo,
- }
- ];
- public sparklineChartDanger: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: this.brandDanger,
- }
- ];
- public sparklineChartWarning: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: this.brandWarning,
- }
- ];
- public sparklineChartSuccess: Array = [
- {
- backgroundColor: 'transparent',
- borderColor: this.brandSuccess,
- }
- ];
-
-
- public sparklineChartLegend = false;
- public sparklineChartType = 'line';
-
-
ngOnInit(): void {
- // generate random values for mainChart
- for (let i = 0; i <= this.mainChartElements; i++) {
- this.mainChartData1.push(this.random(50, 200));
- this.mainChartData2.push(this.random(80, 100));
- this.mainChartData3.push(this.random(50, 200));
- }
}
}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 5e37b19..324e795 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -18,20 +18,6 @@
Average Transaction Today
{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}
-
- Local Suppliers
- {{percentOfLocalSuppliers}}%
-
-
-
- Competitor Local Suppliers
- {{percentOfSingleCompetitorLocalSuppliers}}%
-
-