Dashboard UI
This commit is contained in:
parent
52c460ec64
commit
338e115646
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
@ -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>
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user