From 66b814d391d0a5c914ef945edd71aee58e575be7 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Sat, 27 Oct 2018 11:05:45 +0530
Subject: [PATCH] Dashboard

---
 .../app/dashboard/dashboard.component.html    | 149 ++++++++----------
 .../src/app/dashboard/dashboard.component.ts  |  30 +++-
 .../src/app/dashboard/dashboard.module.ts     |   5 +-
 .../list-pd/view-pd/view-pd.component.html    |   4 +-
 ng6-seed/src/index.html                       |  13 +-
 5 files changed, 108 insertions(+), 93 deletions(-)

diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index 0d806f948..0d36576e6 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -17,96 +17,83 @@
        </div>
   </div> -->
   <div fxLayout="row wrap"> 
-    <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
+    <div fxFlex.gt-sm="60%" fxFlex="100" class="m-gap">
         <mat-card>
-           <mat-card-title>Full</mat-card-title>
+           <mat-card-title>Today's Details</mat-card-title>
            <mat-card-subtitle></mat-card-subtitle>
            <hr> 
             <mat-card-content>
                 <div class="w-100 h-300px">
-                    <ngx-charts-gauge    [view]="view"  [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
-                    </ngx-charts-gauge>
+                        <span>Full</span>
+                    <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="full"  [gradient]="gradient" >
+                    </ngx-charts-advanced-pie-chart>
                 </div>
-            </mat-card-content> 
-        </mat-card>
-     </div>
-     <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
-        <mat-card>
-           <mat-card-title>Smart</mat-card-title>
-           <mat-card-subtitle></mat-card-subtitle>
-           <hr>      
-            <mat-card-content>
-                <div class="w-100 h-300px">
-                    <ngx-charts-gauge  [view]="view" [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
-                    </ngx-charts-gauge>
-                </div>
-            </mat-card-content> 
-        </mat-card>
-     </div>
-     <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
-        <mat-card>
-           <mat-card-title>Tele</mat-card-title>
-           <mat-card-subtitle></mat-card-subtitle>
-           <hr> 
-            <mat-card-content>
-                <div class="w-100 h-300px">
 
-                    <ngx-charts-gauge  [view]="view" [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
-                    </ngx-charts-gauge>
-                </div>
+                <div class="w-100 h-300px">
+                    <span>Semi</span>
+                        <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="smart"  [gradient]="gradient" >
+                        </ngx-charts-advanced-pie-chart>
+                    </div>
+                    <div class="w-100 h-300px">
+                        <span>Tele</span>
+                            <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="tele"  [gradient]="gradient" >
+                            </ngx-charts-advanced-pie-chart>
+                        </div>
             </mat-card-content> 
         </mat-card>
      </div>
+     
+     <div fxFlex.gt-sm="40%" fxFlex="100" class="m-gap">
+            <mat-card class="p-2">
+                    <!---<h4>Profile Settings</h4>-->
+                    <mat-tab-group >
+                       <mat-tab>
+                          <ng-template mat-tab-label>Lenderwise</ng-template> 
+                          <mat-card-content>
+                                <mat-list>
+                                        <ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
+                                           <mat-list-item> 
+                                              <h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
+                                              <p mat-line> Full  -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}} </p>
+                                           </mat-list-item>
+                                        </ng-template>
+                                     </mat-list>
+                          </mat-card-content>
+                       </mat-tab>
+                       <mat-tab>
+                          <ng-template mat-tab-label>CityWise</ng-template> 
+                          <mat-list>
+                                <ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
+                                   <mat-list-item> 
+                                      <h3 mat-line> {{item.cityname}} </h3>
+                                      <p mat-line> Full -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}}</p>
+                                   </mat-list-item>
+                                </ng-template>
+                             </mat-list>
+                             <mat-card-content>
+                              
+                          </mat-card-content>
+                       </mat-tab>
+                       <mat-tab>
+                          <ng-template mat-tab-label><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon color="primary"> warning</mat-icon></span></ng-template>
+                          <mat-card-content>
+                                <mat-list>
+                                        <ng-template let-item let-last="last" ngFor [ngForOf]="message">
+                                           <mat-list-item> 
+                                              <!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
+                                              <h3 mat-line> {{item.applicantname}} </h3>
+                                              <p mat-line> {{item.applicantid}}</p>
+                                              <p mat-line> {{item.lendername}} - {{item.status}} </p>
+                                           </mat-list-item>
+                                        </ng-template>
+                                     </mat-list>
+                          </mat-card-content>
+                       </mat-tab>
+                    </mat-tab-group>
+                 </mat-card>
+     </div>
 </div>
-  <!--Lender,Citywise, Same Status-->
- 
-  <div fxLayout="row wrap">
-      <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
-          <mat-card>
-             <mat-card-title>Lenderwise</mat-card-title>
-             <mat-card-subtitle>Triggered Today</mat-card-subtitle>
-             <hr>
-             <mat-list>
-                <ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
-                   <mat-list-item> 
-                      <h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
-                      <p mat-line> Full  -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}} </p>
-                   </mat-list-item>
-                </ng-template>
-             </mat-list>
-          </mat-card>
-       </div>
-      <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
-          <mat-card>
-             <mat-card-title>Citywise</mat-card-title>
-             <mat-card-subtitle>Triggered Today</mat-card-subtitle>
-             <hr>
-             <mat-list>
-                <ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
-                   <mat-list-item> 
-                      <h3 mat-line> {{item.cityname}} </h3>
-                      <p mat-line> Full -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}}</p>
-                   </mat-list-item>
-                </ng-template>
-             </mat-list>
-          </mat-card>
-       </div> 
-      <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
-         <mat-card>
-            <mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon color="primary"> warning</mat-icon></span></mat-card-title>
-            <mat-card-subtitle>Unscheduled</mat-card-subtitle>
-            <hr>
-            <mat-list>
-               <ng-template let-item let-last="last" ngFor [ngForOf]="message">
-                  <mat-list-item> 
-                     <!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
-                     <h3 mat-line> {{item.applicantname}} </h3>
-                     <p mat-line> {{item.applicantid}}</p>
-                     <p mat-line> {{item.lendername}} - {{item.status}} </p>
-                  </mat-list-item>
-               </ng-template>
-            </mat-list>
-         </mat-card>
-      </div> 
-   </div>
+  
+   
+      
 </div>  
\ No newline at end of file
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.ts b/ng6-seed/src/app/dashboard/dashboard.component.ts
index 7d56ca23f..2303afb15 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng6-seed/src/app/dashboard/dashboard.component.ts
@@ -18,7 +18,7 @@ export class DashboardComponent {
   public showYAxisLabel = true;
   public yAxisLabel = 'PD'; 
   view: any[];
-  width = 350;
+  width =600;
   height= 250;
   public colorScheme = {
     domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
@@ -30,6 +30,34 @@ export class DashboardComponent {
   this.view = [this.width, this.height];
  
  }
+//pie chart
+  single: Object[]  = [
+  {
+    name: 'Germany',
+    value: 40632
+  },
+  {
+    name: 'USA',
+    value: 49737
+  },
+  {
+    name: 'France',
+    value: 36745
+  },
+  {
+    name: 'UK',
+    value: 36240
+  },
+  {
+    name: 'Spain',
+    value: 33000
+  },
+  {
+    name: 'Italy',
+    value: 35800
+  }
+];
+
   //Full Pd Data
   full: Object[] = [
     {
diff --git a/ng6-seed/src/app/dashboard/dashboard.module.ts b/ng6-seed/src/app/dashboard/dashboard.module.ts
index 771a0da1e..ac863a047 100644
--- a/ng6-seed/src/app/dashboard/dashboard.module.ts
+++ b/ng6-seed/src/app/dashboard/dashboard.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
+import { MatIconModule, MatCardModule,MatTabsModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ChartsModule } from 'ng2-charts/ng2-charts';
@@ -9,7 +9,7 @@ import { NgxChartsModule} from '@swimlane/ngx-charts';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 import { DashboardComponent } from './dashboard.component';
-import { DashboardRoutes } from './dashboard.routing';
+import { DashboardRoutes } from './dashboard.routing'; 
 
 @NgModule({
   imports: [
@@ -17,6 +17,7 @@ import { DashboardRoutes } from './dashboard.routing';
     RouterModule.forChild(DashboardRoutes),
     MatIconModule,
     MatCardModule,
+    MatTabsModule,
     MatButtonModule,
     MatListModule,
     MatProgressBarModule,
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 59cbae1cf..7145a4470 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -5,9 +5,9 @@
                   {{master.pd_date_of_initiation}}
                 </div>
                  <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1"   fxFlex="25" style="text-align:right;" >
-                  <button  *ngIf="master.pd_type_name" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Allocation" matTooltipPosition="above" (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
+                  <button  *ngIf="master.pd_type_name" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above" (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
                         <button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
-                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Details" matTooltipPosition="above" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"  type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>        
                     <br><span style="color:red;text-align:center">{{master.pd_allocated_to}} -{{master.pd_status_name}}</span>
                   </div>
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index e2f577376..be4ec30e1 100644
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -121,20 +121,19 @@
                 transform: scale3D(0, 0, 1);
             }
         }
-        .mat-cell,.mat-form-field{
+        .mat-card-subtitle, .mat-card-content, .mat-card-header, .mat-card-title,.mat-cell,.mat-form-field{
             font-size:1.2rem !important;
         }
         .mat-header-cell{
             font-size:1.2rem !important;
             font-weight:800 !important;
         }
-
-      .swal2-header {
+        .swal2-title, .swal2-header {
         text-align:left !important;   
-        }
-        .swal2-title {
-            text-align:left !important;
-        }
+        }     
+        .mat-card-subtitle{
+            color:#000 !important;
+        }  
     </style>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" />