dashboard chart

ng-seed/src/app/dashboard/dashboard.component.html

@@ -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>
+         <mat-card class="mat_height">
-            <div fxLayout="row wrap">
+            <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>
+                           <h2>{{count.monthly_appoinments_count}}</h2>
-                           <p class="text-muted">Total</p>
+                           <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>
+         <mat-card class="mat_height">
-            <div fxLayout="row wrap">
+            <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>
+                           <h2>{{count.monthly_earning_count}}</h2>
-                           <p class="text-muted">Total</p>
+                           <p class="text-muted">Monthly</p>
                         </div>
                         <hr>
-                        <div>
+                        <div> 
-                           <h2>{{count.monthly_earning_count == null ? 0 : count.monthly_earning_count}}</h2>
+                           <h2>{{count.today_earning_count}}</h2>
-                           <p class="text-muted">Monthly</p>
+                           <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>
+         <mat-card class="mat_height">
-            <div fxLayout="row wrap">
+            <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>
+                           <h2>{{count.customer_count}}</h2>
-                           <p class="text-muted">Online</p>
+                           <p class="text-muted">Total</p>
-                        </div>
+                        </div> 
-                        <hr>
-                        <div>
-                           <h2>21</h2>
-                           <p class="text-muted">Comment</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">
+      <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
-         <mat-card>
+         <mat-card class="pie">
             <mat-card-title fxLayout="row" fxLayoutAlign="start center">
                Practitioner &nbsp;
                <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">
+      <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
-         <mat-card>
+         <mat-card class="pie">
             <mat-card-title fxLayout="row" fxLayoutAlign="start center">
-               Yearly Sales &nbsp;
+               Practitioner wise Revenue&nbsp;
                <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 &nbsp;
+               <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 &nbsp;
+               <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>

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;
+    }
+}

ng-seed/src/app/dashboard/dashboard.component.ts

@@ -29,12 +29,11 @@ export class DashboardComponent {
    globalChartOptions: any = {
     responsive: true,
     legend: {
-      display: false,
+      display: true,
-      position: 'bottom'
+      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'];
+    pieChartLabels4: string[] = ['Customer', 'Services', 'Practitioner'];
-  pieChartType = 'pie';
+    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);

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 ]
 })