diff --git a/ng-seed/Appointment_Frontend_Build.zip b/ng-seed/Appointment_Frontend_Build.zip index d5235d1..b0bbfc6 100644 Binary files a/ng-seed/Appointment_Frontend_Build.zip and b/ng-seed/Appointment_Frontend_Build.zip differ diff --git a/ng-seed/src/app/dashboard/dashboard.component.html b/ng-seed/src/app/dashboard/dashboard.component.html index e5b660b..80cef3a 100644 --- a/ng-seed/src/app/dashboard/dashboard.component.html +++ b/ng-seed/src/app/dashboard/dashboard.component.html @@ -1,8 +1,8 @@
- -
+ +
calendar_today @@ -15,8 +15,8 @@
-

{{count.total_appoinments_count}}

-

Total

+

{{count.monthly_appoinments_count}}

+

Monthly

@@ -30,13 +30,13 @@
- -
+ +
-
Earnings
+
Revenue
@@ -44,13 +44,13 @@
-

{{count.total_earning_count == null ? 0 : count.total_earning_count}}

-

Total

+

{{count.monthly_earning_count}}

+

Monthly

-
-

{{count.monthly_earning_count == null ? 0 : count.monthly_earning_count}}

-

Monthly

+
+

{{count.today_earning_count}}

+

Today

@@ -59,13 +59,13 @@
- -
+ +
- +
-
Linkedin
+
Customer
@@ -73,14 +73,9 @@
-

9

-

Online

-
-
-
-

21

-

Comment

-
+

{{count.customer_count}}

+

Total

+
@@ -169,12 +164,36 @@
-->
-
- +
+ Practitioner   - + + + + +
+ +
+ +
+ +
-
- +
+ - Yearly Sales   + Practitioner wise Revenue  + - + + +
+ +
+ +
+ +
- + + + +
+
+
+
+ + + Service Appointment   + + + + + +
+ +
+ +
+ + +
+ + + + +
+
+ + + Service Wise Revenue   + + + + + +
+ +
+ +
+ + +
+ +
diff --git a/ng-seed/src/app/dashboard/dashboard.component.scss b/ng-seed/src/app/dashboard/dashboard.component.scss index 14f6c5d..ad65dc8 100644 --- a/ng-seed/src/app/dashboard/dashboard.component.scss +++ b/ng-seed/src/app/dashboard/dashboard.component.scss @@ -553,3 +553,16 @@ mat-icon{ align-self: unset !important; font-size: unset !important; } + +.mat_height{ + height: 96% !important; +} + +.inside_height{ + height: 100% !important; +} +.pie{ + .filter_menu{ + font-size: 20px !important; + } +} \ No newline at end of file diff --git a/ng-seed/src/app/dashboard/dashboard.component.ts b/ng-seed/src/app/dashboard/dashboard.component.ts index 2f507e3..9e3bcb4 100644 --- a/ng-seed/src/app/dashboard/dashboard.component.ts +++ b/ng-seed/src/app/dashboard/dashboard.component.ts @@ -29,12 +29,11 @@ export class DashboardComponent { globalChartOptions: any = { responsive: true, legend: { - display: false, - position: 'bottom' + display: true, + position: 'top' } }; - pieChartData: number[] = []; doughnutOptions: any = Object.assign({ elements: { arc: { @@ -42,11 +41,85 @@ export class DashboardComponent { } } }, this.globalChartOptions); - doughnutChartColors: any[] = [{ + // 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[] = [300,200,100]; + doughnutChartColors2: any[] = [{ + backgroundColor: ['#f44336', '#009688 ', '#2196f3'] + }]; + 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[] = [500,600,700]; + doughnutChartColors3: any[] = [{ + backgroundColor: ['#f44336', '#009688 ', '#2196f3'] + }]; + pieChartLabels3: string[] = ['Customer', 'Services', 'Practitioner']; + 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[] = [100,200,500]; + doughnutChartColors4: any[] = [{ backgroundColor: ['#f44336', '#009688 ', '#2196f3'] - }]; - pieChartLabels: string[] = ['Customer', 'Services', 'Practitioner']; - pieChartType = 'pie'; + }]; + pieChartLabels4: string[] = ['Customer', 'Services', 'Practitioner']; + pieChartType4 = 'pie'; // Bar barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7']; @@ -203,6 +276,7 @@ messages: Object[] = [{ photo: 'assets/images/face4.jpg', subject: 'Onsectetur adipisic', }, ]; + finalChartPie: any = []; constructor(public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) { @@ -227,17 +301,64 @@ messages: Object[] = [{ } getCount(param){ - console.log(param) this._dash.getCountDetails(param).subscribe(res => { if (res.status == 200) { console.log(res) this.count = res['data'] - this.pieChartData.push(this.count.customer_count, this.count.practitioner_count, this.count.service_count) + this.finalChartPie = this.count.finalchart + console.log(this.finalChartPie) + + let piePratitionerName = this.finalChartPie.map(val => val.doctor_name) + this.pieChartLabels = piePratitionerName + this.pieChartLabels2 = piePratitionerName + // Start Pie Chart 1 + let appointmentSum = this.finalChartPie.map(val => val.service.map(v => v.appoinments_count)) + appointmentSum.forEach(element => { + if(element.length==0){ + element.push(0) + } + // element = element.reduce((a,b)=>a+b,0) + }); + let appointmentSumValue=[]; + appointmentSum.forEach(element => { + appointmentSumValue.push(element.reduce((a,b)=>a+b,0)) + }); + console.log(appointmentSumValue) + this.pieChartData = appointmentSumValue + // End Pie Chart 1 + + // Start Pie Chart 2 + let appointmentSum2 = this.finalChartPie.map(val => val.service.map(v => v.feesRevenue)) + appointmentSum2.forEach(element => { + if(element.length==0){ + element.push(0) + } + // element = element.reduce((a,b)=>a+b,0) + }); + let appointmentSumValue2=[]; + appointmentSum2.forEach(element => { + appointmentSumValue2.push(element.reduce((a,b)=>a+b,0)) + }); + console.log(appointmentSumValue2) + this.pieChartData2 = appointmentSumValue2 + // End Pie Chart 2 + + this.random_bg_color() } }) } + random_bg_color() { + for(let id of this.pieChartData){ + 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.doughnutChartColors[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")"); + } +} + onSelect(event) { console.log(event); diff --git a/ng-seed/src/app/dashboard/dashboard.module.ts b/ng-seed/src/app/dashboard/dashboard.module.ts index e39d520..39e1878 100644 --- a/ng-seed/src/app/dashboard/dashboard.module.ts +++ b/ng-seed/src/app/dashboard/dashboard.module.ts @@ -16,6 +16,7 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { DashboardComponent } from './dashboard.component'; import { DashboardRoutes } from './dashboard.routing'; import { NgScrollbarModule } from 'ngx-scrollbar'; +import { DemoMaterialModule } from 'app/shared/demo.module'; @NgModule({ imports: [ @@ -31,7 +32,8 @@ import { NgScrollbarModule } from 'ngx-scrollbar'; NgxChartsModule, NgxDatatableModule, FlexLayoutModule, - NgScrollbarModule + NgScrollbarModule, + DemoMaterialModule, ], declarations: [ DashboardComponent ] })