dashboard chart
This commit is contained in:
Surendiran
parent
34146c7a71
commit
f4eb62a023
Binary file not shown.
@ -1,8 +1,8 @@
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row wrap">
|
||||
<mat-card class="mat_height">
|
||||
<div fxLayout="row wrap" class="inside_height">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-blue icon-tp">
|
||||
<div class="text-center">
|
||||
<mat-icon>calendar_today</mat-icon>
|
||||
@ -15,8 +15,8 @@
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>{{count.total_appoinments_count}}</h2>
|
||||
<p class="text-muted">Total</p>
|
||||
<h2>{{count.monthly_appoinments_count}}</h2>
|
||||
<p class="text-muted">Monthly</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
@ -30,13 +30,13 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row wrap">
|
||||
<mat-card class="mat_height">
|
||||
<div fxLayout="row wrap" class="inside_height">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-green icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa fa-money fa-3x align-self-center"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Earnings</h5>
|
||||
<h5>Revenue</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,13 +44,13 @@
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>{{count.total_earning_count == null ? 0 : count.total_earning_count}}</h2>
|
||||
<p class="text-muted">Total</p>
|
||||
<h2>{{count.monthly_earning_count}}</h2>
|
||||
<p class="text-muted">Monthly</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>{{count.monthly_earning_count == null ? 0 : count.monthly_earning_count}}</h2>
|
||||
<p class="text-muted">Monthly</p>
|
||||
<div>
|
||||
<h2>{{count.today_earning_count}}</h2>
|
||||
<p class="text-muted">Today</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,13 +59,13 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row wrap">
|
||||
<mat-card class="mat_height">
|
||||
<div fxLayout="row wrap" class="inside_height">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-red icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-linkedin fa-3x"></i>
|
||||
<i class="fa fa-users fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Linkedin</h5>
|
||||
<h5>Customer</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,14 +73,9 @@
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>9</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>21</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
<h2>{{count.customer_count}}</h2>
|
||||
<p class="text-muted">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,12 +164,36 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.gt-sm="50" fxFlex.gt-xs="50" fxFlex="50" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<mat-card class="pie">
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Practitioner
|
||||
<span fxFlex></span>
|
||||
</mat-card-title>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card1" aria-label="Open card menu">
|
||||
<mat-icon class="filter_menu">more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card1="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>settings</mat-icon> -->
|
||||
Monthly
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>more</mat-icon> -->
|
||||
This Week
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>notifications_off</mat-icon> -->
|
||||
Today
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>exit_to_app</mat-icon> -->
|
||||
Last 7 Days
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
@ -187,16 +206,128 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div fxFlex.gt-sm="50" fxFlex.gt-xs="50" fxFlex="50" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<mat-card class="pie">
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Yearly Sales
|
||||
Practitioner wise Revenue
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
|
||||
<mat-icon class="filter_menu">more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
|
||||
<mat-menu #card2="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>settings</mat-icon> -->
|
||||
Monthly
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>more</mat-icon> -->
|
||||
This Week
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>notifications_off</mat-icon> -->
|
||||
Today
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>exit_to_app</mat-icon> -->
|
||||
Last 7 Days
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart" [datasets]="ComboChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="barChartType"></canvas>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
[data]="pieChartData2"
|
||||
[options]="doughnutOptions2"
|
||||
[colors]="doughnutChartColors2"
|
||||
[labels]="pieChartLabels2"
|
||||
[chartType]="pieChartType2"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<mat-card class="pie">
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Service Appointment
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card3" aria-label="Open card menu">
|
||||
<mat-icon class="filter_menu">more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card3="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>settings</mat-icon> -->
|
||||
Monthly
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>more</mat-icon> -->
|
||||
This Week
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>notifications_off</mat-icon> -->
|
||||
Today
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>exit_to_app</mat-icon> -->
|
||||
Last 7 Days
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
[data]="pieChartData3"
|
||||
[options]="doughnutOptions3"
|
||||
[colors]="doughnutChartColors3"
|
||||
[labels]="pieChartLabels3"
|
||||
[chartType]="pieChartType3"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
|
||||
<mat-card class="pie">
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Service Wise Revenue
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card4" aria-label="Open card menu">
|
||||
<mat-icon class="filter_menu">more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card4="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>settings</mat-icon> -->
|
||||
Monthly
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>more</mat-icon> -->
|
||||
This Week
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>notifications_off</mat-icon> -->
|
||||
Today
|
||||
</button>
|
||||
<hr>
|
||||
<button mat-menu-item>
|
||||
<!-- <mat-icon>exit_to_app</mat-icon> -->
|
||||
Last 7 Days
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
[data]="pieChartData4"
|
||||
[options]="doughnutOptions4"
|
||||
[colors]="doughnutChartColors4"
|
||||
[labels]="pieChartLabels4"
|
||||
[chartType]="pieChartType4"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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 ]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user