Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard service merge conflict resolve - kdk

Browse Source
This commit is contained in:
dineshkumarkannan 2018-11-14 17:05:48 +05:30
commit 671fb8235a
5 changed files with 615 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -17,34 +17,50 @@
{{doughnutChartDataForTelePD.length}} --> {{doughnutChartDataForTelePD.length}} -->
<mat-card-content> <mat-card-content>
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
<div *ngIf="doughnutChartDataForFullPD.length != 0" style="text-align: center"><strong>Full - {{total1}}</strong></div> <!--<div *ngIf="doughnutChartDataForFullPD.length != 0" style="text-align: center"><strong>Full - {{total1}}</strong></div>-->
<!-- <div *ngIf="doughnutChartDataForFullPD" style="text-align: center"><strong>Full</strong></div> -->
<canvas baseChart class="chart " <canvas baseChart class="chart "
[data]="doughnutChartDataForFullPD" [data]="doughnutChartDataForFullPD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsFullPD" [options]="doughnutOptionsFullPD"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total1 != 0" class="donut-inner"><span>{{total1}}</span></div>
</div> </div>
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
<div *ngIf="doughnutChartDataForSmartPD.length != 0" style="text-align: center"><strong>Smart - {{total2}}</strong></div> <!--<div *ngIf="doughnutChartDataForSmartPD.length != 0" style="text-align: center"><strong>Smart - {{total2}}</strong></div>-->
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataForSmartPD" [data]="doughnutChartDataForSmartPD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsSmartPD" [options]="doughnutOptionsSmartPD"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total2 != 0" class="donut-inner"><span>{{total2}}</span></div>
</div> </div>
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
<div *ngIf="doughnutChartDataForTelePD.length != 0" style="text-align: center"> <strong>Tele - {{total3}}</strong></div> <!--<div *ngIf="doughnutChartDataForTelePD.length != 0" style="text-align: center"> <strong>Tele - {{total3}}</strong></div>-->
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataForTelePD" [data]="doughnutChartDataForTelePD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsTelePD" [options]="doughnutOptionsTelePD"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total3 != 0" class="donut-inner"><span>{{total3}}</span></div>
</div>
<div *ngIf="legendArr">
<ul class="clas">
<li class="cla"><div class="oval" style="background-color:#c1c1c1"></div>Draft</li>
<li class="cla"><div class="oval" style="background-color:#f44336"></div>Triggered</li>
<li class="cla"><div class="oval" style="background-color:#ffa500"></div>Allocated</li>
<li class="cla"><div class="oval" style="background-color:#ffeb3b"></div>Scheduled</li>
<li class="cla"><div class="oval" style="background-color:#3f51b5"></div>InProgress</li>
<li class="cla"><div class="oval" style="background-color:#00ff00"></div>Completed</li>
<li class="cla"><div class="oval" style="background-color:#4caf50"></div>QC Completed</li>
</ul>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -97,7 +113,7 @@
<mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon> warning</mat-icon></span></mat-card-title> <mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon> warning</mat-icon></span></mat-card-title>
<mat-card-content> <mat-card-content>
<mat-list> <mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="message"> <ng-template let-item let-last="last" ngFor [ngForOf]="alertMessage">
<!-- <ng-template *ngFor="let item of message" > --> <!-- <ng-template *ngFor="let item of message" > -->
<mat-list-item> <mat-list-item>
<!--<img mat-list-avatar src="{{item.photo}}" alt="">--> <!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
@ -122,7 +138,7 @@
<mat-card-content> <mat-card-content>
<mat-list> <mat-list>
<!-- {{lenderpd}} --> <!-- {{lenderpd}} -->
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd"> <ng-template let-item let-last="last" ngFor [ngForOf]="lenderWisePD">
<!-- <ng-template *ngFor="let item of lenderpd" > --> <!-- <ng-template *ngFor="let item of lenderpd" > -->
<mat-list-item> <mat-list-item>
@ -148,7 +164,7 @@
<mat-card-content> <mat-card-content>
<mat-list> <mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd"> <ng-template let-item let-last="last" ngFor [ngForOf]="cityWisePD">
<!-- <ng-template *ngFor="let item of citywisepd" > --> <!-- <ng-template *ngFor="let item of citywisepd" > -->
<mat-list-item> <mat-list-item>
<h3 mat-line> {{item.city_name}} </h3> <h3 mat-line> {{item.city_name}} </h3>

54
ng6-seed/src/app/dashboard/dashboard.component.scss
View File

@ -8,10 +8,58 @@ mat-card-title{
padding-bottom: 1rem; padding-bottom: 1rem;
margin-bottom: 0px; margin-bottom: 0px;
} }
.oval {
height: 13px;
width: 25px;
border-radius: 50%;
}
.clas {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.cla {
font-size: 1rem;
}
.cla a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.cla a:hover {
background-color: #111111;
}
.donut-inner{
//c - with chart lender
//c margin-bottom: 154px;
//c margin-top: -187px;
//c margin-left: 145px;
margin-bottom: 154px;
margin-top: -152px;
margin-left: 142px;
//margin-bottom: 154px;
//margin-top: -221px;
//margin-left: 145px;
//margin-bottom: 197px;
//margin-top: -251px;
//margin-left: 188px;
}
.donut-inner h5 { .donut-inner h5 {
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 0; margin-top: 0;
} }
.donut-inner span{
font-size:1rems;
}
.chart{
padding: 0rem !important;
}
// .profile { // .profile {
// position: relative; // position: relative;
// width: 100%; // width: 100%;
@ -549,6 +597,6 @@ mat-card-title{
// } // }
.chart{ //.chart{
padding: 2rem; // padding: 2rem;
} //}

619
ng6-seed/src/app/dashboard/dashboard.component.ts
View File

@ -12,25 +12,47 @@ import { BaseChartDirective } from 'ng2-charts/ng2-charts';
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent { export class DashboardComponent {
dashboardTitle = 'Monthly Status'; dashboardTitle = 'Monthly Status';
@ViewChild('mycanvas') @ViewChild('mycanvas')
myChart: BaseChartDirective;
canvas:ElementRef;
doughnutChartType = 'doughnut';
doughnutChartLabels: string[] = ['Draft','Triggered','Allocated','Scheduled','InProgress','Completed','QC Completed'];
doughnutChartDataForFullPD:any[]=[]; doughnutChartDataForFullPD:any[]=[];
doughnutChartDataForSmartPD:any[]=[]; doughnutChartDataForSmartPD:any[]=[];
doughnutChartDataForTelePD:any[]=[]; doughnutChartDataForTelePD:any[]=[];
TempDataFullPD :number[]=[];
TempDataSmartPD :number[]=[]; tempDataFullPD :number[]=[];
TempDataTelePD :number[]=[]; tempDataSmartPD :number[]=[];
tempDataTelePD :number[]=[];
total1: number = 0; total1: number = 0;
total2: number = 0; total2: number = 0;
total3: number = 0; total3: number = 0;
doughnutChartName:any;
citywisepd : any[]; cityWisePD : any[];
lenderpd :any[]; lenderWisePD :any[];
message : any[]; alertMessage : any[];
Status = false; legendArr : any[] = [];
legendData: any;
// doughnutChartColors: any[] = [{
// backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7']
// }];
doughnutChartColors: any[] = [{
//backgroundColor: ['#c1c1c1','#f44336','#3f51b5','#ffeb3b','#4caf50','#2196f3','#673ab7']
backgroundColor: ['#c1c1c1','#f44336','#ffa500','#ffeb3b','#3f51b5','#00ff00','#4caf50']
}];
// globalChartOptionsFullPD: any = { // globalChartOptionsFullPD: any = {
// responsive: false, // responsive: false,
@ -46,16 +68,46 @@ export class DashboardComponent {
// position: 'bottom' // position: 'bottom'
// } // }
// }; // };
// title: {
// display: true,
// position: "bottom",
// text: 'Upcoming Meetings'
// },
// legend: {
// display: false
// },
// centertext: "123"
globalChartOptions: any = { globalChartOptions: any = {
responsive: false, responsive: false,
//legendCallback: this.getLegendCallback
//legendCallback: function (chart) {
// console.log(chart);
// return 'a';
// }
legend: { legend: {
display: true, display: true,
position: 'bottom' position: 'bottom'
} }
}; };
//getColor(color) {
TodayFullPD:any = []; //switch (country) {
MonthlyFullPD:any = []; //case "#c1c1c1":
//return '#c1c1c1';
//case "#f44336":
//return "#f44336";
//case "#ffa500":
//return "#ffa500";
//case "#ffeb3b":
//return "#ffeb3b";
//case "#3f51b5":
//return "#3f51b5";
//case "#00ff00":
//return "#00ff00";
//case "#4caf50":
//return "#4caf50";
//}
//}
constructor(private _dashboardService: DashboardService) { constructor(private _dashboardService: DashboardService) {
@ -65,120 +117,131 @@ export class DashboardComponent {
//name: "DoughnutTextInside" //name: "DoughnutTextInside"
ngOnInit(){ ngOnInit(){
this.getPDSubCardData();
this.GetData(); this.getDoughnutChartData();
this.getDoNUT(); let arr1 = this.doughnutChartLabels;
let arr2 = this.doughnutChartColors["0"].backgroundColor;
//console.log(arr1.length);
//console.log(arr2.length);
if(arr1.length == arr2.length){
for(let i=0;i<arr1.length;i++ )
{
this.legendArr[i] = {'labelcolor':arr2[i],'labelname':arr1[i] };
}
}
//console.log(this.legendArr);
} }
GetData(){
// var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d'));
/**
* To Get and Display PD Details As Per
* 1) LenderWise PD Details,
* 2) Citywise PD Details,
* 3) Alert Message of PD Details.
**/
getPDSubCardData(){
/** 1) Getting Lenderwise PD Details - Daily , Weekly and Monthly Data **/
this._dashboardService.getLenderDetail().subscribe(data => { this._dashboardService.getLenderDetail().subscribe(data => {
//console.log('Lender');console.log(data);
this.TodayFullPD = data.records;
// console.log(this.TodayFullPD); console.log(' ***** Lender Wise *****');
// console.log(this.TodayFullPD.current_day); console.log('Lender Wise Whole Data',data);
// console.log(this.TodayFullPD.current_week);
// console.log(this.TodayFullPD.current_month); /** Daily Lender Datas */
if(this.TodayFullPD.current_day.length != '0'){ if(data.records.current_day.length != '0'){
//console.log('If Condition day'); //console.log('If Condition day');
} }
else{ else{
//console.log('Else Condition day'); //console.log('Else Condition day');
} }
if(this.TodayFullPD.current_week.length != '0'){
/** Weekly Lender Datas */
if(data.records.current_week.length != '0'){
//console.log('If Condition week'); //console.log('If Condition week');
} }
else{ else{
//console.log('Else Condition week'); //console.log('Else Condition week');
} }
if(this.TodayFullPD.current_month.length != '0'){
this.lenderpd = this.TodayFullPD.current_month;
console.log('******************** lender');
console.log(this.lenderpd);
// for(let contact of this.TodayFullPD.current_month) { /** Monthly Lender Datas */
// let message = contact; if(data.records.current_month.length != '0'){
// }
this.lenderWisePD = Object.keys(data.records.current_month).map(function(key) {
return data.records.current_month[key];
});
console.log('Monthly Status Lenderwise PD',this.lenderWisePD);
} }
else{ else{
//console.log('Else Condition month'); //console.log('Else Condition month');
} }
}); });
/** 2) Getting Citywise PD Details - Daily , Weekly and Monthly Data **/
this._dashboardService.getCityDetail().subscribe(data => {
console.log(' ***** City Wise *****');
console.log('City Wise Whole Data',data);
/** Daily City Datas */
if(data.records.current_day.length != '0'){
//console.log('If Condition day');
}
else{
//console.log('Else Condition day');
}
/** Weekly City Datas */
if(data.records.current_week.length != '0'){
//console.log('If Condition week');
}
else{
//console.log('Else Condition week');
}
/** Monthly City Datas */
if(data.records.current_month.length != '0'){
//this.cityWisePD = this.TodayFullPD.current_month;
this.cityWisePD = Object.keys(data.records.current_month).map(function(key) {
return data.records.current_month[key];
});
console.log('Monthly Status Citywise PD',this.cityWisePD);
}
else{
//console.log('Else Condition month');
}
});
/** 3) Getting Alert Message of PD Details */
this._dashboardService.getAlertDetail().subscribe(data => { this._dashboardService.getAlertDetail().subscribe(data => {
console.log('Alert*********************************');console.log(data);
this.message = data.records;
console.log(this.message);
});
this._dashboardService.getCityDetail().subscribe(data => {console.log('City');console.log(data);
this.TodayFullPD = data.records;
// console.log(this.TodayFullPD); console.log(' ***** Alert Message *****');
// console.log(this.TodayFullPD.current_day); console.log('Alert Message Whole Data',data);
// console.log(this.TodayFullPD.current_week); this.alertMessage = data.records;
// console.log(this.TodayFullPD.current_month); console.log('Alert Message',this.alertMessage);
console.log('Whole',this.TodayFullPD); });
console.log('Today only',this.TodayFullPD.current_day);
console.log('This week',this.TodayFullPD.current_week);
console.log('This month',this.TodayFullPD.current_month);
if(this.TodayFullPD.current_day.length != '0'){
//console.log('If Condition day');
}
else{
//console.log('Else Condition day');
}
if(this.TodayFullPD.current_week.length != '0'){
//console.log('If Condition week');
}
else{
//console.log('Else Condition week');
}
if(this.TodayFullPD.current_month.length != '0'){
this.citywisepd = this.TodayFullPD.current_month;
//console.log('citywisepd');
//console.log(this.citywisepd);
//for(let contact of this.TodayFullPD.current_month) {
// let message = contact;
//}
} }
else{
//console.log('Else Condition month');
} /**
}); * To Get and Display Doughnut Chart Data Based on PDType
} **/
getDoNUT(){ getDoughnutChartData(){
this._dashboardService.getPDDetailForDoughnut().subscribe(data => { this._dashboardService.getPDDetailForDoughnut().subscribe(data => {
this.MonthlyFullPD = data.records;
console.log('whole',this.MonthlyFullPD);
console.log('Today',this.MonthlyFullPD.current_day);
console.log('week',this.MonthlyFullPD.current_week);
console.log('month',this.MonthlyFullPD.current_month);
if(this.MonthlyFullPD.current_day.length != '0'){
//console.log('If Condition day');
}
else{
//console.log('Else Condition day');
}
if(this.MonthlyFullPD.current_week.length != '0'){
//console.log('If Condition week');
}
else{
//console.log('Else Condition week');
}
if(this.MonthlyFullPD.current_month.length != '0'){
//console.log('If Condition monthLY');
//this.citydatas = this.citydatas.filter(city=>city.isactive == 1 );
let Monthly = this.MonthlyFullPD.current_month;
let MonthlyFullPDArr = Monthly.filter(arr=>arr.PDTYPE == 'FULL' );
let MonthlySmartPDArr = Monthly.filter(arr=>arr.PDTYPE == 'SMART' );
let MonthlyTelePDArr = Monthly.filter(arr=>arr.PDTYPE == 'TELE' );
console.log(' ***** Doughnut Chart Data *****');
console.log('Whole Data',data);
let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft');
let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered'); let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated'); let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated');
let ScheduledIndexvalue = this.doughnutChartLabels.indexOf('Scheduled'); let ScheduledIndexvalue = this.doughnutChartLabels.indexOf('Scheduled');
@ -186,17 +249,54 @@ getDoNUT(){
let CompletedIndexvalue = this.doughnutChartLabels.indexOf('Completed'); let CompletedIndexvalue = this.doughnutChartLabels.indexOf('Completed');
let QCCompletedIndexvalue = this.doughnutChartLabels.indexOf('QC Completed'); let QCCompletedIndexvalue = this.doughnutChartLabels.indexOf('QC Completed');
if(data.records.current_day.length != '0'){
//console.log('If Condition day');
console.log('Today Status ',data.records.current_day);
}
else{
//console.log('Else Condition day');
}
if(data.records.current_week.length != '0'){
//console.log('If Condition week');
console.log('Weekly Status',data.records.current_week);
}
else{
//console.log('Else Condition week');
}
if(data.records.current_month.length != '0'){
//console.log('If Condition monthLY');
console.log('Monthly Status',data.records.current_month);
let MonthlyFullPDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'FULL' );
let MonthlySmartPDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'SMART' );
let MonthlyTelePDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'TELE' );
let DraftFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'DRAFT');
if(DraftFullPDvalue.length != '0'){
//console.log('console triggered value',TriggerFullPDvalue);
for(let FPD of DraftFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[DraftIndexvalue] = y;
}
}
else{
this.tempDataFullPD[DraftIndexvalue] = 0;
}
let TriggerFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'TRIGGERED'); let TriggerFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
if(TriggerFullPDvalue.length != '0'){ if(TriggerFullPDvalue.length != '0'){
//console.log('console triggered value',TriggerFullPDvalue); //console.log('console triggered value',TriggerFullPDvalue);
for(let FPD of TriggerFullPDvalue){ for(let FPD of TriggerFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[TriggedIndexvalue] = y; this.tempDataFullPD[TriggedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataFullPD[TriggedIndexvalue] = 0; this.tempDataFullPD[TriggedIndexvalue] = 0;
} }
let AllocatedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'ALLOCATED'); let AllocatedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
@ -204,11 +304,11 @@ getDoNUT(){
for(let FPD of AllocatedFullPDvalue){ for(let FPD of AllocatedFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[AllocatedIndexvalue] = y; this.tempDataFullPD[AllocatedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataFullPD[AllocatedIndexvalue] = 0; this.tempDataFullPD[AllocatedIndexvalue] = 0;
} }
let ScheduledFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'SCHEDULED'); let ScheduledFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
@ -216,13 +316,13 @@ getDoNUT(){
for(let FPD of ScheduledFullPDvalue){ for(let FPD of ScheduledFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[ScheduledIndexvalue] = y; this.tempDataFullPD[ScheduledIndexvalue] = y;
} }
//let y = +ScheduledFullPDvalue.count; //let y = +ScheduledFullPDvalue.count;
} }
else{ else{
this.TempDataFullPD[ScheduledIndexvalue] = 0; this.tempDataFullPD[ScheduledIndexvalue] = 0;
} }
let InProgressFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'INPROGRESS'); let InProgressFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
@ -230,13 +330,13 @@ getDoNUT(){
for(let FPD of InProgressFullPDvalue){ for(let FPD of InProgressFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[InProgressIndexvalue] = y; this.tempDataFullPD[InProgressIndexvalue] = y;
} }
//let y = +InProgressFullPDvalue.count; //let y = +InProgressFullPDvalue.count;
} }
else{ else{
this.TempDataFullPD[InProgressIndexvalue] = 0; this.tempDataFullPD[InProgressIndexvalue] = 0;
} }
let CompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'COMPLETED'); let CompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
@ -244,13 +344,13 @@ getDoNUT(){
for(let FPD of CompletedFullPDvalue){ for(let FPD of CompletedFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[CompletedIndexvalue] = y; this.tempDataFullPD[CompletedIndexvalue] = y;
} }
//let y = +CompletedFullPDvalue.count; //let y = +CompletedFullPDvalue.count;
} }
else{ else{
this.TempDataFullPD[CompletedIndexvalue] = 0; this.tempDataFullPD[CompletedIndexvalue] = 0;
} }
let QCCompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED"); let QCCompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
@ -258,13 +358,26 @@ getDoNUT(){
for(let FPD of QCCompletedFullPDvalue){ for(let FPD of QCCompletedFullPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total1 = this.total1+y; this.total1 = this.total1+y;
this.TempDataFullPD[QCCompletedIndexvalue] = y; this.tempDataFullPD[QCCompletedIndexvalue] = y;
} }
//let y = +QCCompletedFullPDvalue.count; //let y = +QCCompletedFullPDvalue.count;
} }
else{ else{
this.TempDataFullPD[QCCompletedIndexvalue] = 0; this.tempDataFullPD[QCCompletedIndexvalue] = 0;
}
let DraftSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'DRAFT');
if(DraftSmartPDvalue.length != '0'){
//console.log('console triggered value',TriggerFullPDvalue);
for(let FPD of DraftSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[DraftIndexvalue] = y;
}
}
else{
this.tempDataSmartPD[DraftIndexvalue] = 0;
} }
let TriggerSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'TRIGGERED'); let TriggerSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
@ -273,11 +386,11 @@ getDoNUT(){
for(let FPD of TriggerSmartPDvalue){ for(let FPD of TriggerSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[TriggedIndexvalue] = y; this.tempDataSmartPD[TriggedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataSmartPD[TriggedIndexvalue] = 0; this.tempDataSmartPD[TriggedIndexvalue] = 0;
} }
let AllocatedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'ALLOCATED'); let AllocatedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
@ -285,11 +398,11 @@ getDoNUT(){
for(let FPD of AllocatedSmartPDvalue){ for(let FPD of AllocatedSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[AllocatedIndexvalue] = y; this.tempDataSmartPD[AllocatedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataSmartPD[AllocatedIndexvalue] = 0; this.tempDataSmartPD[AllocatedIndexvalue] = 0;
} }
let ScheduledSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'SCHEDULED'); let ScheduledSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
@ -297,13 +410,13 @@ getDoNUT(){
for(let FPD of ScheduledSmartPDvalue){ for(let FPD of ScheduledSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[ScheduledIndexvalue] = y; this.tempDataSmartPD[ScheduledIndexvalue] = y;
} }
//let y = +ScheduledFullPDvalue.count; //let y = +ScheduledFullPDvalue.count;
} }
else{ else{
this.TempDataSmartPD[ScheduledIndexvalue] = 0; this.tempDataSmartPD[ScheduledIndexvalue] = 0;
} }
let InProgressSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'INPROGRESS'); let InProgressSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
@ -311,13 +424,13 @@ getDoNUT(){
for(let FPD of InProgressSmartPDvalue){ for(let FPD of InProgressSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[InProgressIndexvalue] = y; this.tempDataSmartPD[InProgressIndexvalue] = y;
} }
//let y = +InProgressFullPDvalue.count; //let y = +InProgressFullPDvalue.count;
} }
else{ else{
this.TempDataSmartPD[InProgressIndexvalue] = 0; this.tempDataSmartPD[InProgressIndexvalue] = 0;
} }
let CompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'COMPLETED'); let CompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
@ -325,13 +438,13 @@ getDoNUT(){
for(let FPD of CompletedSmartPDvalue){ for(let FPD of CompletedSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[CompletedIndexvalue] = y; this.tempDataSmartPD[CompletedIndexvalue] = y;
} }
//let y = +CompletedFullPDvalue.count; //let y = +CompletedFullPDvalue.count;
} }
else{ else{
this.TempDataSmartPD[CompletedIndexvalue] = 0; this.tempDataSmartPD[CompletedIndexvalue] = 0;
} }
let QCCompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED"); let QCCompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
@ -339,13 +452,27 @@ getDoNUT(){
for(let FPD of QCCompletedSmartPDvalue){ for(let FPD of QCCompletedSmartPDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total2 = this.total2+y; this.total2 = this.total2+y;
this.TempDataSmartPD[QCCompletedIndexvalue] = y; this.tempDataSmartPD[QCCompletedIndexvalue] = y;
} }
//let y = +QCCompletedFullPDvalue.count; //let y = +QCCompletedFullPDvalue.count;
} }
else{ else{
this.TempDataSmartPD[QCCompletedIndexvalue] = 0; this.tempDataSmartPD[QCCompletedIndexvalue] = 0;
}
let DraftTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'DRAFT');
if(DraftTelePDvalue.length != '0'){
for(let FPD of DraftTelePDvalue){
let y = +FPD.count;
this.total1 = this.total3+y;
this.tempDataTelePD[DraftIndexvalue] = y;
}
}
else{
this.tempDataTelePD[DraftIndexvalue] = 0;
} }
let TriggerTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'TRIGGERED'); let TriggerTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
@ -354,11 +481,11 @@ getDoNUT(){
for(let FPD of TriggerTelePDvalue){ for(let FPD of TriggerTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[TriggedIndexvalue] = y; this.tempDataTelePD[TriggedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataTelePD[TriggedIndexvalue] = 0; this.tempDataTelePD[TriggedIndexvalue] = 0;
} }
let AllocatedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'ALLOCATED'); let AllocatedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
@ -366,11 +493,11 @@ getDoNUT(){
for(let FPD of AllocatedTelePDvalue){ for(let FPD of AllocatedTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[AllocatedIndexvalue] = y; this.tempDataTelePD[AllocatedIndexvalue] = y;
} }
} }
else{ else{
this.TempDataTelePD[AllocatedIndexvalue] = 0; this.tempDataTelePD[AllocatedIndexvalue] = 0;
} }
let ScheduledTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'SCHEDULED'); let ScheduledTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
@ -378,13 +505,13 @@ getDoNUT(){
for(let FPD of ScheduledTelePDvalue){ for(let FPD of ScheduledTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[ScheduledIndexvalue] = y; this.tempDataTelePD[ScheduledIndexvalue] = y;
} }
//let y = +ScheduledFullPDvalue.count; //let y = +ScheduledFullPDvalue.count;
} }
else{ else{
this.TempDataTelePD[ScheduledIndexvalue] = 0; this.tempDataTelePD[ScheduledIndexvalue] = 0;
} }
let InProgressTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'INPROGRESS'); let InProgressTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
@ -392,13 +519,13 @@ getDoNUT(){
for(let FPD of InProgressTelePDvalue){ for(let FPD of InProgressTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[InProgressIndexvalue] = y; this.tempDataTelePD[InProgressIndexvalue] = y;
} }
//let y = +InProgressFullPDvalue.count; //let y = +InProgressFullPDvalue.count;
} }
else{ else{
this.TempDataTelePD[InProgressIndexvalue] = 0; this.tempDataTelePD[InProgressIndexvalue] = 0;
} }
let CompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'COMPLETED'); let CompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'COMPLETED');
@ -406,13 +533,13 @@ getDoNUT(){
for(let FPD of CompletedTelePDvalue){ for(let FPD of CompletedTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[CompletedIndexvalue] = y; this.tempDataTelePD[CompletedIndexvalue] = y;
} }
//let y = +CompletedFullPDvalue.count; //let y = +CompletedFullPDvalue.count;
} }
else{ else{
this.TempDataTelePD[CompletedIndexvalue] = 0; this.tempDataTelePD[CompletedIndexvalue] = 0;
} }
let QCCompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == "QC_COMPLETED"); let QCCompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
@ -420,101 +547,101 @@ getDoNUT(){
for(let FPD of QCCompletedTelePDvalue){ for(let FPD of QCCompletedTelePDvalue){
let y = +FPD.count; let y = +FPD.count;
this.total3 = this.total3+y; this.total3 = this.total3+y;
this.TempDataTelePD[QCCompletedIndexvalue] = y; this.tempDataTelePD[QCCompletedIndexvalue] = y;
} }
//let y = +QCCompletedFullPDvalue.count; //let y = +QCCompletedFullPDvalue.count;
} }
else{ else{
this.TempDataTelePD[QCCompletedIndexvalue] = 0; this.tempDataTelePD[QCCompletedIndexvalue] = 0;
} }
// y: number // y: number
//console.log(MonthlyFullPDArr.pd_status); //console.log(monthlyFullPDArr.pd_status);
// for(let FPD of MonthlyFullPDArr){ // for(let FPD of monthlyFullPDArr){
// if(FPD.pd_status == 'TRIGGERED'){ // if(FPD.pd_status == 'TRIGGERED'){
// console.log('PD Status'); // console.log('PD Status');
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered'); // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// let y = +FPD.count; // y: number // let y = +FPD.count; // y: number
// console.log('Initial',this.TempDataFullPD); // console.log('Initial',this.tempDataFullPD);
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// console.log(this.TempDataFullPD); // console.log(this.tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered'); // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// } // }
// // if(contact.pd_status == 'TRIGGERED' && contact.PDTYPE == 'FULL'){ // // if(contact.pd_status == 'TRIGGERED' && contact.PDTYPE == 'FULL'){
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered'); // // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// // var y = +contact.count; // y: number // // var y = +contact.count; // y: number
// // console.log('Initial',this.TempDataFullPD); // // console.log('Initial',this.tempDataFullPD);
// // this.TempDataFullPD[Indexvalue] = y; // // this.tempDataFullPD[Indexvalue] = y;
// // console.log(this.TempDataFullPD); // // console.log(this.tempDataFullPD);
// // } // // }
// // else{ // // else{
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered'); // // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// // this.TempDataFullPD[Indexvalue] = 0; // // this.tempDataFullPD[Indexvalue] = 0;
// // } // // }
// if(FPD.pd_status == 'ALLOCATED'){ // if(FPD.pd_status == 'ALLOCATED'){
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated'); // let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
// var y = +FPD.count; // y: number // var y = +FPD.count; // y: number
// // console.log(this.TempDataFullPD); // // console.log(this.tempDataFullPD);
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// //console.log('allocated b4',TempDataFullPD); // //console.log('allocated b4',tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated'); // let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// } // }
// if(FPD.pd_status == 'INPROGRESS'){ // if(FPD.pd_status == 'INPROGRESS'){
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress'); // let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
// var y = +FPD.count; // y: number // var y = +FPD.count; // y: number
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// //console.log('b4',TempDataFullPD); // //console.log('b4',tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress'); // let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// } // }
// if(FPD.pd_status == 'SCHEDULED'){ // if(FPD.pd_status == 'SCHEDULED'){
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled'); // let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
// var y = +FPD.count; // y: number // var y = +FPD.count; // y: number
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// //console.log('b4',TempDataFullPD); // //console.log('b4',tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled'); // let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// //console.log('d',TempDataFullPD); // //console.log('d',tempDataFullPD);
// } // }
// if(FPD.pd_status == 'COMPLETED'){ // if(FPD.pd_status == 'COMPLETED'){
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed'); // let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
// var y = +FPD.count; // y: number // var y = +FPD.count; // y: number
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// //console.log('allocated',TempDataFullPD); // //console.log('allocated',tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed'); // let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// } // }
// //return TempDataFullPD; // //return tempDataFullPD;
// if(FPD.pd_status == 'QC COMPLETED'){ // if(FPD.pd_status == 'QC COMPLETED'){
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed'); // let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
// var y = +FPD.count; // y: number // var y = +FPD.count; // y: number
// this.TempDataFullPD[Indexvalue] = y; // this.tempDataFullPD[Indexvalue] = y;
// //console.log('allocated',TempDataFullPD); // //console.log('allocated',tempDataFullPD);
// } // }
// else{ // else{
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed'); // let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
// this.TempDataFullPD[Indexvalue] = 0; // this.tempDataFullPD[Indexvalue] = 0;
// //console.log('Final Data',TempDataFullPD); // //console.log('Final Data',tempDataFullPD);
// } // }
// //console.log('inside',this.TempDataFullPD); // //console.log('inside',this.tempDataFullPD);
// } // }
//this.doughnutChartDataForFullPD = [3,4,5,6,7,8]; //this.doughnutChartDataForFullPD = [3,4,5,6,7,8];
} }
@ -522,16 +649,62 @@ getDoNUT(){
else{ else{
//console.log('Else Condition month'); //console.log('Else Condition month');
} }
this.doughnutChartDataForFullPD = this.TempDataFullPD; this.doughnutChartDataForFullPD = this.tempDataFullPD;
this.doughnutChartDataForSmartPD = this.TempDataSmartPD; this.doughnutChartDataForSmartPD = this.tempDataSmartPD;
this.doughnutChartDataForTelePD = this.TempDataTelePD; this.doughnutChartDataForTelePD = this.tempDataTelePD;
console.log('Final full Data Completed',this.doughnutChartDataForFullPD); console.log('Final full Data Completed',this.doughnutChartDataForFullPD);
console.log('Temp full Data',this.TempDataFullPD); console.log('temp full Data',this.tempDataFullPD);
console.log('Final Smart Data Completed',this.doughnutChartDataForSmartPD); console.log('Final Smart Data Completed',this.doughnutChartDataForSmartPD);
console.log('Temp Smart Data',this.TempDataSmartPD); console.log('temp Smart Data',this.tempDataSmartPD);
console.log('Final Tele Data Completed',this.doughnutChartDataForTelePD); console.log('Final Tele Data Completed',this.doughnutChartDataForTelePD);
console.log('Temp Tele Data',this.TempDataTelePD); console.log('temp Tele Data',this.tempDataTelePD);
//console.log(this.tempDataTelePD.__proto__);
//console.log(this.tempDataTelePD._chartjs);
//console.log(this.doughnutChartDataForTelePD['event'].listeners["0"].chart.boxes["0"].legendItems);
//chart.chart.ctx;
/*beforeDraw: function (this.doughnutChartDataForTelePD.chart) {
if (chart.config.options.elements.center) {
//Get ctx from string
var ctx = chart.chart.ctx;
//Get options from the center object in options
var centerConfig = chart.config.options.elements.center;
var fontStyle = centerConfig.fontStyle || 'Arial';
var txt = centerConfig.text;
var color = centerConfig.color || '#000';
var sidePadding = centerConfig.sidePadding || 20;
var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
//Start with a base font of 30px
ctx.font = "30px " + fontStyle;
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringWidth = ctx.measureText(txt).width;
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
var widthRatio = elementWidth / stringWidth;
var newFontSize = Math.floor(30 * widthRatio);
var elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
var fontSizeToUse = Math.min(newFontSize, elementHeight);
//Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse+"px " + fontStyle;
ctx.fillStyle = color;
//Draw text in center
ctx.fillText(txt, centerX, centerY);
}
}*/
}) })
} }
@ -542,18 +715,19 @@ getDoNUT(){
// }]; // }];
// }, 100); // }, 100);
doughnutChartColors: any[] = [{
backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7']
}];
doughnutChartType = 'doughnut';
doughnutChartLabels: string[] = ['Triggered', 'Allocated','Scheduled','InProgress','Completed','QC Completed'];
doughnutOptionsFullPD: any = Object.assign({ doughnutOptionsFullPD: any = Object.assign({
elements: { elements: {
arc: { arc: {
borderWidth: 0.2 borderWidth: 0.2
} }
} },
title: {
display: true,
position: "top",
text: 'Full',
fontSize: 15,
},
centertext:'One'
},this.globalChartOptions); },this.globalChartOptions);
doughnutOptionsSmartPD: any = Object.assign({ doughnutOptionsSmartPD: any = Object.assign({
@ -561,17 +735,104 @@ doughnutOptionsSmartPD: any = Object.assign({
arc: { arc: {
borderWidth: 0.2 borderWidth: 0.2
} }
} },
}, this.globalChartOptions); title: {
display: true,
position: "top",
text: 'Smart',
fontSize: 15
},
centertext:'Two'
},
this.globalChartOptions);
doughnutOptionsTelePD: any = Object.assign({ doughnutOptionsTelePD: any = Object.assign({
elements: { elements: {
arc: { arc: {
borderWidth: 0.2 borderWidth: 0.2
} }
} },
title: {
display: true,
position: "top",
text: 'Tele',
fontSize: 15
},
centertext:'Three'
}, this.globalChartOptions); }, this.globalChartOptions);
chartfunction(){ this.Status = true; }
// Chart.pluginService.register({
// beforeDraw: function(chart) {
// var width = chart.chart.width,
// height = chart.chart.height,
// ctx = chart.chart.ctx;
// ctx.restore();
// var fontSize = (height / 114).toFixed(2);
// ctx.font = fontSize + "em sans-serif";
// ctx.textBaseline = "middle";
// var text = "75%",
// textX = Math.round((width - ctx.measureText(text).width) / 2),
// textY = height / 2;
// ctx.fillText(text, textX, textY);
// ctx.save();
// }
// });
} }
// import {Component, NgModule, ElementRef, Inject, ViewChild} from '@angular/core'
// import {BrowserModule} from '@angular/platform-browser'
// import {ChartsModule, Color} from 'ng2-charts';
// @Component({
// selector: 'app-dashboard',
// templateUrl: './dashboard.component.html',
// styleUrls: ['./dashboard.component.scss']
// })
// export class DashboardComponent {
// @ViewChild('mycanvas')
// canvas:ElementRef;
// doughnutChartDataForTelePD:number[]=[1,2,3,4,5,6];
// options: { circumference: number; rotation: number; animation: { onComplete: () => void; }; };
// ngOnInit(){
// var ctx = this.canvas.nativeElement.getContext("2d");
// let me = this;
// this.options = {
// circumference: Math.PI,
// rotation : Math.PI,
// animation:{ onComplete: function() {
// me.doit(ctx);
// }}
// }
// }
// doit(ctx) {
// // Chart.types.Doughnut.prototype.draw.apply(this, arguments);
// var width = this.canvas.nativeElement.clientWidth,
// height = this.canvas.nativeElement.clientHeight;
// var fontSize = (height / 250).toFixed(2);
// ctx.font = fontSize + "em Verdana";
// ctx.textBaseline = "middle";
// ctx.fillStyle = "blue";
// var text = "Pass Rate 82%",
// textX = Math.round((width - ctx.measureText(text).width) / 2),
// textY = height -10;
// ctx.fillText(text, textX, textY);
// ctx.restore();
// }
// }

11
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
View File

@ -1,4 +1,4 @@
<form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)"> <form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
<mat-card-content> <mat-card-content>
<!-- start main applicant details --> <!-- start main applicant details -->
@ -15,10 +15,13 @@
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Name" formControlName="name_ans" type="text" required> <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput placeholder="Age" formControlName="age_ans" type="text" required> <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
<mat-error *ngIf="mainDetails['controls'].age_ans.hasError('pattern') || mainDetails['controls'].age_ans.hasError('maxlength') || mainDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
@ -68,6 +71,8 @@
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> --> <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Age" formControlName="age_ans" type="text" required> <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
<mat-error *ngIf="coDetails['controls'].age_ans.hasError('pattern') || coDetails['controls'].age_ans.hasError('maxlength') || coDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> --> <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
@ -117,7 +122,7 @@
<div fxFlex="60" class="pb-0 text-sm-left"> <div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%"> <mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label> <mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark"></textarea> <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -126,7 +131,7 @@
<mat-card-actions> <mat-card-actions>
<div fxFlexOffset="90" fxFlex="10" style="text-align:left;"> <div fxFlexOffset="90" fxFlex="10" style="text-align:left;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above" [disabled]="!_personalForm.valid "><mat-icon>save</mat-icon></button> <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
</div> </div>
</mat-card-actions> </mat-card-actions>

106
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
View File

@ -38,7 +38,6 @@ export class PersonalInfoComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.loadPDDetails(this.pdid,this.form_id); this.loadPDDetails(this.pdid,this.form_id);
this.getRelationMaster(); this.getRelationMaster();
this.mainApplicantDetails = this.pd_all_details.pdapplicants_detials.filter(item => item.applicant_type == 1); this.mainApplicantDetails = this.pd_all_details.pdapplicants_detials.filter(item => item.applicant_type == 1);
@ -56,31 +55,8 @@ export class PersonalInfoComponent implements OnInit {
} }
else if(data.status == 204){ else if(data.status == 204){
let defaultMainApp=[];
let defaultCoApp=[];
// generate default main applicant form details
if(this.mainApplicantDetails.length>0){
for(let j=0;j<this.mainApplicantQuestions.length; j++)
{
if(j==0){
let generateRow = {
"pd_question":"",
"pd_answer": this.mainApplicantDetails[0].applicant_name,
}
defaultMainApp.push(generateRow);
}
else{
let generateRow = {
"pd_question":"",
"pd_answer": "",
}
defaultMainApp.push(generateRow);
}
this.loadFormData();
}
}
this.loadFormData(defaultMainApp,this.coApplicantDetails);
} }
@ -90,33 +66,60 @@ export class PersonalInfoComponent implements OnInit {
loadDataStatus: boolean; loadDataStatus: boolean;
loadFormWithIDData(data) { loadFormWithIDData(data) {
// main applicant
var main_result = Object.keys(data.main_applicant_details).map(function(key) { var main_result = Object.keys(data.main_applicant_details).map(function(key) {
return data.main_applicant_details[key]; return data.main_applicant_details[key];
}); });
var co_result = Object.keys(data.co_applicant_details).map(function(key) {
return data.co_applicant_details[key];
});
// main applicant
let mainApplicantGroup = new FormArray(main_result.map((item,key) => new FormGroup({ let mainApplicantGroup = new FormArray(main_result.map((item,key) => new FormGroup({
name_ans:new FormControl(item.name_ans, Validators.required), name_ans:new FormControl(item.name_ans, Validators.required),
age_ans:new FormControl(item.age_ans, Validators.required), age_ans:new FormControl(item.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ans:new FormControl(item.entity_ans, Validators.required), entity_ans:new FormControl(item.entity_ans, Validators.required),
qualification_ans:new FormControl(item.qualification_ans, Validators.required), qualification_ans:new FormControl(item.qualification_ans, Validators.required),
earning_ans:new FormControl(item.earning_ans, Validators.required), earning_ans:new FormControl(item.earning_ans, Validators.required),
}))); })));
// co applicant // co applicant
let iterateCoApp=[]; let coApplicantGroup;
if(data.co_applicant_details!=undefined){
var co_result = Object.keys(data.co_applicant_details).map(function(key) {
return data.co_applicant_details[key];
});
let coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({ coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({
name_ans:new FormControl(item.name_ans, Validators.required), name_ans:new FormControl(item.name_ans, Validators.required),
age_ans:new FormControl(item.age_ans, Validators.required), age_ans:new FormControl(item.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ans:new FormControl(item.entity_ans, Validators.required), entity_ans:new FormControl(item.entity_ans, Validators.required),
qualification_ans:new FormControl(item.qualification_ans, Validators.required), qualification_ans:new FormControl(item.qualification_ans, Validators.required),
earning_ans:new FormControl(item.earning_ans, Validators.required), earning_ans:new FormControl(item.earning_ans, Validators.required),
relation_ans:new FormControl(item.relation_ans, Validators.required), relation_ans:new FormControl(item.relation_ans, Validators.required),
}))); })));
}
else{
coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.coApplicantQuestions[0]),
name_ans:new FormControl(item.applicant_name, Validators.required),
name_id:new FormControl(0),
age_ques:new FormControl(this.coApplicantQuestions[1]),
age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.coApplicantQuestions[2]),
entity_id: new FormControl(2),
entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.coApplicantQuestions[3]),
qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required),
earningStatus_ques:new FormControl(this.coApplicantQuestions[4]),
earning_id: new FormControl(4),
earning_ans:new FormControl(null, Validators.required),
relationShip_ques:new FormControl(this.coApplicantQuestions[5]),
relation_id:new FormControl(5),
relation_ans:new FormControl(null, Validators.required),
})));
}
this._personalForm = this._fb.group({ this._personalForm = this._fb.group({
pdid:null, pdid:null,
@ -129,7 +132,8 @@ var co_result = Object.keys(data.co_applicant_details).map(function(key) {
this.loadDataStatus = true; this.loadDataStatus = true;
} }
loadFormData(mainApp,coApp){ loadFormData(){
// main applicant // main applicant
let mainApplicantGroup = new FormArray(this.mainApplicantDetails.map((item,key) => new FormGroup({ let mainApplicantGroup = new FormArray(this.mainApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.mainApplicantQuestions[0]), name_ques:new FormControl(this.mainApplicantQuestions[0]),
@ -137,10 +141,10 @@ var co_result = Object.keys(data.co_applicant_details).map(function(key) {
name_id:new FormControl(0), name_id:new FormControl(0),
age_ques:new FormControl(this.mainApplicantQuestions[1]), age_ques:new FormControl(this.mainApplicantQuestions[1]),
age_id:new FormControl(1), age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.required), age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.mainApplicantQuestions[2]), entity_ques: new FormControl(this.mainApplicantQuestions[2]),
entity_id: new FormControl(2), entity_id: new FormControl(2),
entity_ans:new FormControl(null, Validators.required), entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.mainApplicantQuestions[3]), qualification_ques: new FormControl(this.mainApplicantQuestions[3]),
qualification_id: new FormControl(3), qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required), qualification_ans:new FormControl(null, Validators.required),
@ -150,18 +154,16 @@ var co_result = Object.keys(data.co_applicant_details).map(function(key) {
}))); })));
// co applicant // co applicant
let iterateCoApp=[];
let coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({ let coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.coApplicantQuestions[0]), name_ques:new FormControl(this.coApplicantQuestions[0]),
name_ans:new FormControl(item.applicant_name, Validators.required), name_ans:new FormControl(item.applicant_name, Validators.required),
name_id:new FormControl(0), name_id:new FormControl(0),
age_ques:new FormControl(this.coApplicantQuestions[1]), age_ques:new FormControl(this.coApplicantQuestions[1]),
age_id:new FormControl(1), age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.required), age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.coApplicantQuestions[2]), entity_ques: new FormControl(this.coApplicantQuestions[2]),
entity_id: new FormControl(2), entity_id: new FormControl(2),
entity_ans:new FormControl(null, Validators.required), entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.coApplicantQuestions[3]), qualification_ques: new FormControl(this.coApplicantQuestions[3]),
qualification_id: new FormControl(3), qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required), qualification_ans:new FormControl(null, Validators.required),
@ -205,7 +207,14 @@ this.loadDataStatus = true;
// submit forms details // submit forms details
submitPersonalForm(formData:any) { submitPersonalForm(formData:any) {
if(this._personalForm.valid){ if (this._personalForm.invalid) {
this.validateAllFormFields(this._personalForm);
// this.notifier.notify('warning', 'All Fields Are Required.!');
return;
}
else{
let main_applicantDetails:any=[]; let main_applicantDetails:any=[];
let co_applicantDetails:any=[]; let co_applicantDetails:any=[];
@ -254,5 +263,20 @@ submitPersonalForm(formData:any) {
} }
} }
// validate all form group and form array fields
validateAllFormFields(formGroup: any) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
} else if (control instanceof FormArray) {
this.validateAllFormFields(control);
}
});
}
} }