625 lines
18 KiB
TypeScript
625 lines
18 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { single, multi } from './charts.data';
|
|
import { DashboardService } from './dashboard.service';
|
|
import { MatIconRegistry } from '@angular/material/icon';
|
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
import * as moment from 'moment';
|
|
import { CurrencyPipe, DatePipe } from '@angular/common';
|
|
@Component({
|
|
selector: 'app-dashboard',
|
|
templateUrl: './dashboard.component.html',
|
|
styleUrls: ['./dashboard.component.scss'],
|
|
providers:[CurrencyPipe],
|
|
})
|
|
export class DashboardComponent {
|
|
private currencyPipe1:CurrencyPipe
|
|
|
|
public single: any[];
|
|
public multi: any[];
|
|
public showXAxis = true;
|
|
public showYAxis = true;
|
|
public gradient = false;
|
|
public showLegend = false;
|
|
public showXAxisLabel = false;
|
|
public xAxisLabel = 'Year';
|
|
public showYAxisLabel = false;
|
|
public yAxisLabel = 'Population';
|
|
public colorScheme = {
|
|
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
|
|
};
|
|
public autoScale = true;
|
|
count: any = [];
|
|
|
|
// Shared chart options
|
|
globalChartOptions: any = {
|
|
responsive: true,
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
};
|
|
|
|
doughnutOptions: any = Object.assign({
|
|
elements: {
|
|
arc: {
|
|
borderWidth: 3
|
|
}
|
|
}
|
|
}, this.globalChartOptions);
|
|
// Round Pie Chart 1
|
|
pieChartData: number[] = [];
|
|
doughnutChartColors: any[] = [{
|
|
backgroundColor: [] = []
|
|
}];
|
|
pieChartLabels: string[] = [];
|
|
pieChartType = 'pie';
|
|
|
|
|
|
// Round Pie Chart 2
|
|
globalChartOptions2: any = {
|
|
responsive: true,
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
};
|
|
|
|
doughnutOptions2: any = Object.assign({
|
|
elements: {
|
|
arc: {
|
|
borderWidth: 3
|
|
}
|
|
}
|
|
}, this.globalChartOptions2);
|
|
pieChartData2: number[] = [];
|
|
doughnutChartColors2: any[] = [{
|
|
backgroundColor: []
|
|
}];
|
|
pieChartLabels2: string[] = [];
|
|
pieChartType2 = 'pie';
|
|
|
|
|
|
// Round Pie Chart 3
|
|
globalChartOptions3: any = {
|
|
responsive: true,
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
};
|
|
|
|
doughnutOptions3: any = Object.assign({
|
|
elements: {
|
|
arc: {
|
|
borderWidth: 3
|
|
}
|
|
}
|
|
}, this.globalChartOptions3);
|
|
pieChartData3: number[] = [];
|
|
doughnutChartColors3: any[] = [{
|
|
backgroundColor: []
|
|
}];
|
|
pieChartLabels3: string[] = [];
|
|
pieChartType3 = 'pie';
|
|
|
|
|
|
// Round Pie Chart 4
|
|
globalChartOptions4: any = {
|
|
responsive: true,
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
};
|
|
|
|
doughnutOptions4: any = Object.assign({
|
|
elements: {
|
|
arc: {
|
|
borderWidth: 3
|
|
}
|
|
}
|
|
}, this.globalChartOptions4);
|
|
pieChartData4: number[] = [];
|
|
doughnutChartColors4: any[] = [{
|
|
backgroundColor: []
|
|
}];
|
|
pieChartLabels4: string[] = [];
|
|
pieChartType4 = 'pie';
|
|
|
|
// Bar
|
|
barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7'];
|
|
barChartType = 'bar';
|
|
barChartLegend = true;
|
|
barChartData: any[] = [{
|
|
data: [6, 5, 8, 8, 5, 5, 4],
|
|
label: 'Series A',
|
|
borderWidth: 0
|
|
}, {
|
|
data: [5, 4, 4, 2, 6, 2, 5],
|
|
label: 'Series B',
|
|
borderWidth: 0
|
|
}];
|
|
barChartOptions: any = Object.assign({
|
|
scaleShowVerticalLines: false,
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
responsive: true,
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0,0,0,0.02)',
|
|
defaultFontColor: 'rgba(0,0,0,0.02)',
|
|
zeroLineColor: 'rgba(0,0,0,0.02)'
|
|
},
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0,0,0,0.02)',
|
|
defaultFontColor: 'rgba(0,0,0,0.02)',
|
|
zeroLineColor: 'rgba(0,0,0,0.02)'
|
|
},
|
|
stacked: true
|
|
}]
|
|
}
|
|
}, this.globalChartOptions);
|
|
|
|
// Bubble Chart
|
|
bubbleChartData: Array <any> = [{
|
|
data: [{
|
|
x: 6,
|
|
y: 5,
|
|
r: 15,
|
|
}, {
|
|
x: 5,
|
|
y: 4,
|
|
r: 10,
|
|
}, {
|
|
x: 8,
|
|
y: 4,
|
|
r: 6,
|
|
}, {
|
|
x: 8,
|
|
y: 4,
|
|
r: 6,
|
|
}, {
|
|
x: 5,
|
|
y: 14,
|
|
r: 14,
|
|
}, {
|
|
x: 5,
|
|
y: 6,
|
|
r: 8,
|
|
}, {
|
|
x: 4,
|
|
y: 2,
|
|
r: 10,
|
|
}],
|
|
label: 'Series A',
|
|
borderWidth: 1
|
|
}];
|
|
bubbleChartType = 'bubble';
|
|
|
|
// combo chart
|
|
comboChartLabels: Array <any> = [];
|
|
chartColors2: Array <any> = [
|
|
{ // grey
|
|
backgroundColor: '#5fc983',
|
|
borderColor: '#5fc983',
|
|
pointBackgroundColor: '#5fc983',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: '#5fc983'
|
|
}
|
|
];
|
|
chartColors: Array <any> = [
|
|
// { // red
|
|
// backgroundColor: '#f44336',
|
|
// borderColor: '#f44336',
|
|
// pointBackgroundColor: '#f44336',
|
|
// pointBorderColor: '#fff',
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
|
// },
|
|
// { // grey
|
|
// backgroundColor: '#5fc983',
|
|
// borderColor: '#5fc983',
|
|
// pointBackgroundColor: '#5fc983',
|
|
// pointBorderColor: '#fff',
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// pointHoverBorderColor: '#5fc983'
|
|
// },
|
|
{ // blue
|
|
backgroundColor: '#76b0a6',
|
|
borderColor: '#1f7f6f',
|
|
pointBackgroundColor: '#1f7f6f',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
|
},
|
|
// { // grey
|
|
// backgroundColor: '#5fc983',
|
|
// borderColor: '#5fc983',
|
|
// pointBackgroundColor: '#5fc983',
|
|
// pointBorderColor: '#fff',
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// pointHoverBorderColor: '#5fc983'
|
|
// }
|
|
];
|
|
comboChartLegend = true;
|
|
ComboChartData: Array <any> = [{
|
|
data: [],
|
|
label: 'Count of Appointment',
|
|
borderWidth: 1,
|
|
type: 'line',
|
|
fill: false
|
|
}
|
|
|
|
];
|
|
ComboChartData2: Array <any> = [{
|
|
data: [],
|
|
label: '',
|
|
borderWidth: 1,
|
|
type: 'line',
|
|
fill: false
|
|
}
|
|
];
|
|
ComboChartOptions: any = Object.assign({
|
|
animation: false,
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0,0,0,0.02)',
|
|
zeroLineColor: 'rgba(0,0,0,0.02)'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0,0,0,0.02)',
|
|
zeroLineColor: 'rgba(0,0,0,0.02)'
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
suggestedMax: 9,
|
|
}
|
|
}]
|
|
}
|
|
}, this.globalChartOptions);
|
|
|
|
// newsfeed
|
|
messages: Object[] = [{
|
|
from: 'Carolyn',
|
|
message: 'Contrary to popular belief, Lorem Ipsum',
|
|
photo: 'assets/images/face3.jpg',
|
|
subject: 'Met, consectetur adipisic',
|
|
}, {
|
|
from: 'Chloe',
|
|
message: 'It has roots in a piece of classica',
|
|
photo: 'assets/images/face6.jpg',
|
|
subject: 'Consectetur adipisic',
|
|
}, {
|
|
from: 'Diana',
|
|
message: 'Professor at Hampden-Sydney College in Virginia',
|
|
photo: 'assets/images/face4.jpg',
|
|
subject: 'Onsectetur adipisic',
|
|
}, ];
|
|
finalChartPie: any = [];
|
|
practitionerPieChart: any = [];
|
|
servicePieChart: any = [];
|
|
|
|
ranges: any = {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
'Last Month': [
|
|
moment().subtract(1, 'month').startOf('month'),
|
|
moment().subtract(1, 'month').endOf('month')
|
|
]
|
|
};
|
|
selectedDateRange: {startDate: moment.Moment, endDate: moment.Moment};
|
|
currentDate: Date;
|
|
lineChart: any = [];
|
|
user_role: any;
|
|
currency: any;
|
|
countAndRevenue: boolean = false;
|
|
currencyHtmlCode: any;
|
|
|
|
constructor(private currencySymbol: CurrencyPipe,public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) {
|
|
// this.fetch((data) => { this.rows = data; });
|
|
Object.assign(this, {single, multi})
|
|
this.matIconRegistry.addSvgIcon(
|
|
'service',
|
|
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/service_icon.svg')
|
|
);
|
|
this.user_role = localStorage.getItem('user_role')
|
|
|
|
this.currency = localStorage.getItem('currency')
|
|
console.log(this.currency)
|
|
// Usage example
|
|
// const currencyName = 'INR';
|
|
this.currencyHtmlCode = this.getCurrencyHtmlCode(this.currency);
|
|
}
|
|
|
|
ngOnInit() {
|
|
let user_role = localStorage.getItem('user_role')
|
|
let param
|
|
if(user_role == 'PRACTITIONER'){
|
|
param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId')}
|
|
}else{
|
|
param = {'busId':localStorage.getItem('busId')}
|
|
}
|
|
|
|
this.getCount(param)
|
|
|
|
//Start Line Chart
|
|
this.currentDate = new Date();
|
|
let startDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
|
|
let EndDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
|
|
console.log(startDate,EndDate);
|
|
let lineParams
|
|
if(user_role == 'BIZADMIN'){
|
|
lineParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
this.getLineChartData(lineParams)
|
|
}
|
|
|
|
//End Line Chart
|
|
|
|
}
|
|
|
|
getCount(param){
|
|
console.log(param)
|
|
this._dash.getCountDetails(param).subscribe(res => {
|
|
if (res.status == 200) {
|
|
console.log(res)
|
|
this.count = res['data']
|
|
|
|
this.currentDate = new Date();
|
|
let startDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
|
|
let EndDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
|
|
console.log(startDate,EndDate);
|
|
let user_role = localStorage.getItem('user_role')
|
|
let pieChartParams
|
|
if(user_role == 'PRACTITIONER'){
|
|
pieChartParams = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
}else{
|
|
pieChartParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
}
|
|
console.log(pieChartParams)
|
|
this.getPieChartData(pieChartParams)
|
|
}
|
|
})
|
|
}
|
|
|
|
getPieChartData(param){
|
|
console.log(param)
|
|
this._dash.getPieChartDetails(param).subscribe(res => {
|
|
if (res.status == 200) {
|
|
console.log(res)
|
|
this.practitionerPieChart = res['data'].finalchart
|
|
console.log(this.practitionerPieChart)
|
|
let practitionerName = this.practitionerPieChart.map(val => val.doctor_name)
|
|
this.pieChartLabels = practitionerName
|
|
this.pieChartLabels2 = practitionerName
|
|
let practiAppointCount = this.practitionerPieChart.map(val => val.appoinments_count)
|
|
this.pieChartData = practiAppointCount
|
|
for(let id of practitionerName){
|
|
var x = Math.floor(Math.random() * 245);
|
|
var y = Math.floor(Math.random() * 245);
|
|
var z = Math.floor(Math.random() * 245);
|
|
console.log(this.doughnutChartColors)
|
|
this.doughnutChartColors[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
}
|
|
let practiRevenue = this.practitionerPieChart.map(val => val.amount)
|
|
console.log(practiRevenue)
|
|
// practiRevenue.forEach(element => {
|
|
// console.log(element)
|
|
// let amount = this.currencySymbol.transform(element,this.currency, 'symbol');
|
|
// console.log(amount)
|
|
// element = amount
|
|
// console.log(element)
|
|
// this.pieChartData2.push(element)
|
|
// });
|
|
// console.log(this.pieChartData2)
|
|
this.pieChartData2 = practiRevenue
|
|
|
|
for(let id of practiRevenue){
|
|
var x = Math.floor(Math.random() * 256);
|
|
var y = Math.floor(Math.random() * 256);
|
|
var z = Math.floor(Math.random() * 256);
|
|
console.log(this.doughnutChartColors)
|
|
this.doughnutChartColors2[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
}
|
|
// this.random_bg_color()
|
|
|
|
this.getPieChartServiceData(param)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
getPieChartServiceData(param){
|
|
console.log(param)
|
|
this._dash.getPieChartServiceDetails(param).subscribe(res => {
|
|
if (res.status == 200) {
|
|
console.log(res)
|
|
this.servicePieChart = res['data'].finalchart
|
|
console.log(this.servicePieChart)
|
|
let serviceName = this.servicePieChart.map(val => val.service_name)
|
|
this.pieChartLabels3 = serviceName
|
|
this.pieChartLabels4 = serviceName
|
|
let serviceAppointCount = this.servicePieChart.map(val => val.appoinments_count)
|
|
this.pieChartData3 = serviceAppointCount
|
|
for(let id of serviceAppointCount){
|
|
var x = Math.floor(Math.random() * 266);
|
|
var y = Math.floor(Math.random() * 266);
|
|
var z = Math.floor(Math.random() * 266);
|
|
console.log(this.doughnutChartColors3)
|
|
this.doughnutChartColors3[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
}
|
|
let serviceRevenue = this.servicePieChart.map(val => val.amount)
|
|
this.pieChartData4 = serviceRevenue
|
|
for(let id of serviceRevenue){
|
|
var x = Math.floor(Math.random() * 276);
|
|
var y = Math.floor(Math.random() * 276);
|
|
var z = Math.floor(Math.random() * 276);
|
|
console.log(this.doughnutChartColors4)
|
|
this.doughnutChartColors4[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
}
|
|
}
|
|
})
|
|
}
|
|
getLineChartData(param){
|
|
console.log(param)
|
|
this._dash.getLineChart(param).subscribe(res => {
|
|
if (res.status == 200) {
|
|
console.log(res)
|
|
this.lineChart = res['data']
|
|
console.log(this.lineChart)
|
|
this.lineChart.sort((a, b) => {
|
|
const dateA:any = new Date(a.date);
|
|
const dateB:any = new Date(b.date);
|
|
return dateA - dateB;
|
|
});
|
|
let linecount = this.lineChart.map(val => val.count)
|
|
let lineMonth = this.lineChart.map(val => val.date)
|
|
let lineFees = this.lineChart.map(val => val.fees)
|
|
this.comboChartLabels = lineMonth
|
|
console.log(linecount,lineMonth,lineFees)
|
|
console.log(this.ComboChartData)
|
|
this.ComboChartData[0].data = linecount
|
|
this.ComboChartData2[0].data = lineFees
|
|
this.ComboChartData2[0].label = 'Revenue ' + this.currencyHtmlCode
|
|
// this.ComboChartData.forEach(element => {
|
|
// console.log(element)
|
|
// if(element.type == 'line'){
|
|
// element.data = linecount
|
|
// }
|
|
// if(element.type == 'bar') {
|
|
// element.data = lineFees
|
|
// }
|
|
// });
|
|
console.log(this.ComboChartData)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
// random_bg_color() {
|
|
// for(let id of this.practitionerPieChart){
|
|
// var x = Math.floor(Math.random() * 245);
|
|
// var y = Math.floor(Math.random() * 235);
|
|
// var z = Math.floor(Math.random() * 256);
|
|
// console.log(this.doughnutChartColors)
|
|
// this.doughnutChartColors[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
// this.doughnutChartColors2[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
|
|
// }
|
|
// }
|
|
|
|
|
|
onSelect(event) {
|
|
console.log(event);
|
|
}
|
|
|
|
|
|
// open(e) {
|
|
// console.log(e);
|
|
// // this.pickerDirective.open(e);
|
|
// }
|
|
|
|
// // Function to call when the input value changes.
|
|
// onChange = () => {
|
|
// }
|
|
|
|
// // Function to call when the input is touched.
|
|
// onTouched = () => {
|
|
// }
|
|
|
|
// // Allows Angular to update the model (rating).
|
|
// // Update the model and changes needed for the view here.
|
|
// writeValue(obj: any): void {
|
|
// console.log(obj);
|
|
// }
|
|
|
|
// // Allows Angular to register a function to call when the model (rating) changes.
|
|
// // Save the function as a property to call later here.
|
|
// registerOnChange(fn: any): void {
|
|
// console.log(fn);
|
|
// // this.onChange = fn;
|
|
// }
|
|
|
|
// // Allows Angular to register a function to call when the input has been touched.
|
|
// // Save the function as a property to call later here.
|
|
// registerOnTouched(fn: () => void): void {
|
|
// this.onTouched = fn;
|
|
// }
|
|
|
|
// // Allows Angular to disable the input.
|
|
// setDisabledState(isDisabled: boolean): void {
|
|
// // this.disabled = isDisabled;
|
|
// }
|
|
|
|
// onInputChange() {
|
|
// console.log('Input value changed:', this.selectedDateRange);
|
|
// // Perform your desired logic here
|
|
// }
|
|
|
|
dateWiseFilter() {
|
|
// if(this.selectedDateRange.startDate != null && this.selectedDateRange.endDate != null){
|
|
|
|
console.log('Input value changed:', this.selectedDateRange);
|
|
let startDate = new DatePipe('en-US').transform(this.selectedDateRange.startDate['$d'], 'yyyy-MM-dd')
|
|
let EndDate = new DatePipe('en-US').transform(this.selectedDateRange.endDate['$d'], 'yyyy-MM-dd')
|
|
console.log(startDate,EndDate);
|
|
let user_role = localStorage.getItem('user_role')
|
|
let param
|
|
if(user_role == 'PRACTITIONER'){
|
|
param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
}else{
|
|
param = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
}
|
|
console.log(param);
|
|
// Perform your desired logic here
|
|
this.getPieChartData(param)
|
|
|
|
//Start Line Chart
|
|
let lineParams
|
|
if(user_role == 'BIZADMIN'){
|
|
lineParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
|
|
}
|
|
this.getLineChartData(lineParams)
|
|
//End Line Chart
|
|
}
|
|
|
|
// }
|
|
|
|
onToggleChange(event){
|
|
console.log(event)
|
|
this.countAndRevenue = event
|
|
}
|
|
|
|
getCurrencyHtmlCode(currencyName) {
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: currencyName,
|
|
});
|
|
|
|
const sampleValue = 123; // Use a sample value to retrieve the currency symbol
|
|
const formattedValue = formatter.format(sampleValue);
|
|
|
|
const match = formattedValue.match(/(\D+)/); // Extract the non-numeric part (currency symbol)
|
|
const currencySymbol = match ? match[0] : '';
|
|
|
|
const spanElement = document.createElement('span');
|
|
spanElement.textContent = currencySymbol;
|
|
|
|
return spanElement.innerHTML;
|
|
}
|
|
}
|