Dashboard UI

This commit is contained in:
saravanakumarkandasami 2018-10-23 18:11:07 +05:30
parent 52c460ec64
commit 338e115646
4 changed files with 155 additions and 151 deletions

View File

@ -24,8 +24,7 @@
<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" >
<ngx-charts-gauge [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
</ngx-charts-gauge> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>
@ -36,11 +35,9 @@
<mat-card-title>Smart</mat-card-title> <mat-card-title>Smart</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]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
<ngx-charts-gauge [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
</ngx-charts-gauge> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>
@ -54,7 +51,7 @@
<mat-card-content> <mat-card-content>
<div class="w-100 h-300px"> <div class="w-100 h-300px">
<ngx-charts-gauge [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" > <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> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>

View File

@ -11,17 +11,23 @@ export class DashboardComponent {
public showXAxis = true; public showXAxis = true;
public showYAxis = true; public showYAxis = true;
public gradient = false; public gradient = true;
public showLegend = false; public showLegend = false;
public showXAxisLabel = true; public showXAxisLabel = true;
public xAxisLabel = 'Status'; public xAxisLabel = 'Status';
public showYAxisLabel = true; public showYAxisLabel = true;
public yAxisLabel = 'PD'; public yAxisLabel = 'PD';
view: any[];
width = 350;
height= 250;
public colorScheme = { public colorScheme = {
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653'] domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
}; };
public autoScale = false; public autoScale = true;
constructor() { constructor() {
}
ngOnInit(){
this.view = [this.width, this.height];
} }
//Full Pd Data //Full Pd Data

View File

@ -1,4 +1,4 @@
<mat-card class="p-1">
<form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)"> <form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)">
<mat-card-content> <mat-card-content>
@ -212,7 +212,7 @@
<h5>Co-Applicant</h5> <h5>Co-Applicant</h5>
<!-- <button _ngcontent-c29="" class="mr-1 mb-2 mat-fab1 mat-accent" mat-fab="" (click)="addCoApplicant(createWithLongContent)"><span class="mat-button-wrapper"><mat-icon _ngcontent-c29="" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button> --> <!-- <button _ngcontent-c29="" class="mr-1 mb-2 mat-fab1 mat-accent" mat-fab="" (click)="addCoApplicant(createWithLongContent)"><span class="mat-button-wrapper"><mat-icon _ngcontent-c29="" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button> -->
<!--<button mat-fab class="mr-1 mb-1" color="primary" (click)="addCoApplicant()"><mat-icon>add</mat-icon></button>--> <!--<button mat-fab class="mr-1 mb-1" color="primary" (click)="addCoApplicant()"><mat-icon>add</mat-icon></button>-->
<button mat-fab class="mr-1 mb-1" color="primary" style="opacity: 0.5;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> <button mat-fab class="mr-1 mb-1" color="primary" style="opacity: 0.5;border:2px;border-radius: 50%;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>
<!-- <button mat-raised-button mat-button-sm color="primary" (click)="addCoApplicant()" type="button">Add More Co-Applicant</button> --> <!-- <button mat-raised-button mat-button-sm color="primary" (click)="addCoApplicant()" type="button">Add More Co-Applicant</button> -->
</mat-card> </mat-card>
@ -267,11 +267,11 @@
(click)="onReset()"><mat-icon>settings_backup_restore</mat-icon></button> (click)="onReset()"><mat-icon>settings_backup_restore</mat-icon></button>
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Click To Draft" matTooltipPosition="above" type="button" (click)="addCoApplicant()"><mat-icon>drafts</mat-icon></button> --> <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Click To Draft" matTooltipPosition="above" type="button" (click)="addCoApplicant()"><mat-icon>drafts</mat-icon></button> -->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above"><mat-icon>drafts</mat-icon></button> <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above"><mat-icon>description</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button> <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button>
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card>

View File

@ -21,7 +21,7 @@
<div class="card-comment-widget"> <div class="card-comment-widget">
<mat-list *ngIf="pdList.length > 0"> <mat-list *ngIf="pdList.length > 0">
<mat-list-item *ngFor="let details of dataSource.connect() | async" style="border-bottom:1px solid #f1f7f5"> <mat-list-item *ngFor="let details of dataSource.connect() | async" style="border-bottom:1px solid #f1f7f5">
<img mat-list-avatar src="assets/images/lime.jpg" alt=""> <!--<img mat-list-avatar src="assets/images/lime.jpg" alt="">-->
<!-- {{details.applicat_details[0].applicant_name}} --> <!-- {{details.applicat_details[0].applicant_name}} -->
<p *ngIf="details.applicat_details" mat-line>{{details.applicat_details[0].applicant_name}} </p> <p *ngIf="details.applicat_details" mat-line>{{details.applicat_details[0].applicant_name}} </p>
@ -139,3 +139,4 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>