Dashboard
This commit is contained in:
saravanakumarkandasami
parent
d26f1d0125
commit
66b814d391
@ -17,96 +17,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div fxLayout="row wrap">
|
<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>
|
||||||
<mat-card-title>Full</mat-card-title>
|
<mat-card-title>Today's Details</mat-card-title>
|
||||||
<mat-card-subtitle></mat-card-subtitle>
|
<mat-card-subtitle></mat-card-subtitle>
|
||||||
<hr>
|
<hr>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<div class="w-100 h-300px">
|
<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" >
|
<span>Full</span>
|
||||||
</ngx-charts-gauge>
|
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="full" [gradient]="gradient" >
|
||||||
|
</ngx-charts-advanced-pie-chart>
|
||||||
</div>
|
</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" >
|
<div class="w-100 h-300px">
|
||||||
</ngx-charts-gauge>
|
<span>Semi</span>
|
||||||
</div>
|
<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-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</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>
|
</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>
|
</div>
|
||||||
@ -18,7 +18,7 @@ export class DashboardComponent {
|
|||||||
public showYAxisLabel = true;
|
public showYAxisLabel = true;
|
||||||
public yAxisLabel = 'PD';
|
public yAxisLabel = 'PD';
|
||||||
view: any[];
|
view: any[];
|
||||||
width = 350;
|
width =600;
|
||||||
height= 250;
|
height= 250;
|
||||||
public colorScheme = {
|
public colorScheme = {
|
||||||
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
|
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
|
||||||
@ -30,6 +30,34 @@ export class DashboardComponent {
|
|||||||
this.view = [this.width, this.height];
|
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 Pd Data
|
||||||
full: Object[] = [
|
full: Object[] = [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { CommonModule } from '@angular/common';
|
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 { FlexLayoutModule } from '@angular/flex-layout';
|
||||||
|
|
||||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||||
@ -9,7 +9,7 @@ import { NgxChartsModule} from '@swimlane/ngx-charts';
|
|||||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||||
|
|
||||||
import { DashboardComponent } from './dashboard.component';
|
import { DashboardComponent } from './dashboard.component';
|
||||||
import { DashboardRoutes } from './dashboard.routing';
|
import { DashboardRoutes } from './dashboard.routing';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@ -17,6 +17,7 @@ import { DashboardRoutes } from './dashboard.routing';
|
|||||||
RouterModule.forChild(DashboardRoutes),
|
RouterModule.forChild(DashboardRoutes),
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatCardModule,
|
MatCardModule,
|
||||||
|
MatTabsModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatListModule,
|
MatListModule,
|
||||||
MatProgressBarModule,
|
MatProgressBarModule,
|
||||||
|
|||||||
@ -5,9 +5,9 @@
|
|||||||
{{master.pd_date_of_initiation}}
|
{{master.pd_date_of_initiation}}
|
||||||
</div>
|
</div>
|
||||||
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1" fxFlex="25" style="text-align:right;" >
|
<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 *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>
|
<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>
|
<br><span style="color:red;text-align:center">{{master.pd_allocated_to}} -{{master.pd_status_name}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -121,20 +121,19 @@
|
|||||||
transform: scale3D(0, 0, 1);
|
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;
|
font-size:1.2rem !important;
|
||||||
}
|
}
|
||||||
.mat-header-cell{
|
.mat-header-cell{
|
||||||
font-size:1.2rem !important;
|
font-size:1.2rem !important;
|
||||||
font-weight:800 !important;
|
font-weight:800 !important;
|
||||||
}
|
}
|
||||||
|
.swal2-title, .swal2-header {
|
||||||
.swal2-header {
|
|
||||||
text-align:left !important;
|
text-align:left !important;
|
||||||
}
|
}
|
||||||
.swal2-title {
|
.mat-card-subtitle{
|
||||||
text-align:left !important;
|
color:#000 !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" />
|
<link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user