import { Directive, Component, OnInit } from '@angular/core'; import { Http, Response } from '@angular/http'; import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; @Component({ templateUrl: 'dashboard.component.html' }) export class DashboardComponent implements OnInit { customersThisWeek: any; customersLastWeek: any; customersLastMonth: any; customersLastYear: any; pointsThisWeek: any; pointsLastWeek: any; customersThisMonth: any; moneySpentThisMonth: any; pointsTotal: any; averageTransactionToday: any; shuffledArray: any; showGraph: any; percentOfCustomersSector: any; constructor( private http: Http, private api: ApiService, ) { this.shuffle = this.shuffledArray; this.api.graph_data(undefined) .subscribe( result => { console.log(result); // Return what graphs to show this.showGraph = result.graphstoshow; // Percentage Chart this.percentOfCustomersSector = result.percentofcustomerssector; // Chart 1 this.customersThisWeek = result.customersthisweek; this.lineChart1Data[0].data = this.customersThisWeek.customerno; this.lineChart1Labels = this.customersThisWeek.day; // Chart 2 this.customersLastWeek = result.customerslastweek; this.lineChart2Data[0].data = this.customersLastWeek.customerno; this.lineChart2Labels = this.customersLastWeek.day; // Chart 3 this.customersLastMonth = result.customerslastmonth; this.lineChart3Data[0].data = this.customersLastMonth.customerno; this.lineChart3Labels = this.customersLastMonth.day; // Chart 4 this.customersLastYear = result.customerslastyear; this.lineChart4Data[0].data = this.customersLastYear.customerno; this.lineChart4Labels = this.customersLastYear.day; // Chart 5 this.pointsThisWeek = result.pointsthisweek; this.lineChart5Data[0].data = this.pointsThisWeek.points; this.lineChart5Labels = this.pointsThisWeek.day; // Chart 6 this.pointsLastWeek = result.pointslastweek; this.barChart1Data[0].data = this.pointsLastWeek.points; this.barChart1Labels = this.pointsLastWeek.day; } ), this.api.breadcrumb_data(undefined) .subscribe( result => { console.log(result); this.customersThisMonth = result.customersthismonth; this.moneySpentThisMonth = result.moneyspentthismonth; this.pointsTotal = result.pointstotal; this.averageTransactionToday = result.averagetransactiontoday; } ) } // Fisher-Yates shuffle function 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 let index = Math.floor(Math.random() * counter); // Decrease counter by 1 counter--; // And swap the last element with it let 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'; // lineChart2 public lineChart2Data: Array = [ { data: [], label: 'Series B' } ]; public lineChart2Labels: Array = []; public lineChart2Options: 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 lineChart2Colours: Array = [ { // grey backgroundColor: this.brandInfo, borderColor: 'rgba(255,255,255,.55)' } ]; public lineChart2Legend = false; public lineChart2Type = 'line'; // lineChart3 public lineChart3Data: Array = [ { data: [], label: 'Series B' } ]; public lineChart3Labels: Array = []; public lineChart3Options: 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 lineChart3Colours: Array = [ { // grey backgroundColor: this.brandInfo, borderColor: 'rgba(255,255,255,.55)' } ]; public lineChart3Legend = false; public lineChart3Type = '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'; // 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)); } } }