dashboard service merge conflict resolve - kdk
This commit is contained in:
dineshkumarkannan
commit
671fb8235a
@ -17,35 +17,51 @@
|
||||
{{doughnutChartDataForTelePD.length}} -->
|
||||
<mat-card-content>
|
||||
<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" style="text-align: center"><strong>Full</strong></div> -->
|
||||
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartDataForFullPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsFullPD"
|
||||
[colors]="doughnutChartColors"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
</div>
|
||||
<!--<div *ngIf="doughnutChartDataForFullPD.length != 0" style="text-align: center"><strong>Full - {{total1}}</strong></div>-->
|
||||
|
||||
<canvas baseChart class="chart "
|
||||
[data]="doughnutChartDataForFullPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsFullPD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total1 != 0" class="donut-inner"><span>{{total1}}</span></div>
|
||||
</div>
|
||||
<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"
|
||||
[data]="doughnutChartDataForSmartPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsSmartPD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total2 != 0" class="donut-inner"><span>{{total2}}</span></div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
[data]="doughnutChartDataForTelePD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsTelePD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[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>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -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-content>
|
||||
<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" > -->
|
||||
<mat-list-item>
|
||||
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
|
||||
@ -122,7 +138,7 @@
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<!-- {{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" > -->
|
||||
|
||||
<mat-list-item>
|
||||
@ -148,7 +164,7 @@
|
||||
<mat-card-content>
|
||||
<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" > -->
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.city_name}} </h3>
|
||||
|
||||
@ -8,10 +8,58 @@ mat-card-title{
|
||||
padding-bottom: 1rem;
|
||||
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 {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
.donut-inner span{
|
||||
font-size:1rems;
|
||||
}
|
||||
.chart{
|
||||
padding: 0rem !important;
|
||||
}
|
||||
|
||||
// .profile {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
@ -549,6 +597,6 @@ mat-card-title{
|
||||
// }
|
||||
|
||||
|
||||
.chart{
|
||||
padding: 2rem;
|
||||
}
|
||||
//.chart{
|
||||
// padding: 2rem;
|
||||
//}
|
||||
@ -11,26 +11,48 @@ import { BaseChartDirective } from 'ng2-charts/ng2-charts';
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
|
||||
|
||||
export class DashboardComponent {
|
||||
|
||||
dashboardTitle = 'Monthly Status';
|
||||
|
||||
@ViewChild('mycanvas')
|
||||
myChart: BaseChartDirective;
|
||||
canvas:ElementRef;
|
||||
|
||||
doughnutChartType = 'doughnut';
|
||||
doughnutChartLabels: string[] = ['Draft','Triggered','Allocated','Scheduled','InProgress','Completed','QC Completed'];
|
||||
|
||||
doughnutChartDataForFullPD:any[]=[];
|
||||
doughnutChartDataForSmartPD:any[]=[];
|
||||
doughnutChartDataForTelePD:any[]=[];
|
||||
TempDataFullPD :number[]=[];
|
||||
TempDataSmartPD :number[]=[];
|
||||
TempDataTelePD :number[]=[];
|
||||
|
||||
tempDataFullPD :number[]=[];
|
||||
tempDataSmartPD :number[]=[];
|
||||
tempDataTelePD :number[]=[];
|
||||
|
||||
total1: number = 0;
|
||||
total2: number = 0;
|
||||
total3: number = 0;
|
||||
doughnutChartName:any;
|
||||
citywisepd : any[];
|
||||
lenderpd :any[];
|
||||
message : any[];
|
||||
Status = false;
|
||||
|
||||
cityWisePD : any[];
|
||||
lenderWisePD :any[];
|
||||
alertMessage : any[];
|
||||
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 = {
|
||||
// responsive: false,
|
||||
@ -46,17 +68,47 @@ export class DashboardComponent {
|
||||
// position: 'bottom'
|
||||
// }
|
||||
// };
|
||||
globalChartOptions: any = {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
TodayFullPD:any = [];
|
||||
MonthlyFullPD:any = [];
|
||||
|
||||
|
||||
// title: {
|
||||
// display: true,
|
||||
// position: "bottom",
|
||||
// text: 'Upcoming Meetings'
|
||||
// },
|
||||
// legend: {
|
||||
// display: false
|
||||
// },
|
||||
// centertext: "123"
|
||||
globalChartOptions: any = {
|
||||
responsive: false,
|
||||
//legendCallback: this.getLegendCallback
|
||||
//legendCallback: function (chart) {
|
||||
// console.log(chart);
|
||||
// return 'a';
|
||||
// }
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
//getColor(color) {
|
||||
//switch (country) {
|
||||
//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) {
|
||||
|
||||
}
|
||||
@ -65,126 +117,174 @@ export class DashboardComponent {
|
||||
//name: "DoughnutTextInside"
|
||||
|
||||
ngOnInit(){
|
||||
|
||||
this.GetData();
|
||||
this.getDoNUT();
|
||||
|
||||
}
|
||||
this.getPDSubCardData();
|
||||
this.getDoughnutChartData();
|
||||
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 => {
|
||||
//console.log('Lender');console.log(data);
|
||||
this.TodayFullPD = data.records;
|
||||
|
||||
// console.log(this.TodayFullPD);
|
||||
// console.log(this.TodayFullPD.current_day);
|
||||
// console.log(this.TodayFullPD.current_week);
|
||||
// console.log(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.lenderpd = this.TodayFullPD.current_month;
|
||||
console.log('******************** lender');
|
||||
console.log(this.lenderpd);
|
||||
|
||||
// for(let contact of this.TodayFullPD.current_month) {
|
||||
// let message = contact;
|
||||
// }
|
||||
|
||||
}
|
||||
else{
|
||||
//console.log('Else Condition month');
|
||||
}
|
||||
});
|
||||
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(this.TodayFullPD.current_day);
|
||||
// console.log(this.TodayFullPD.current_week);
|
||||
// console.log(this.TodayFullPD.current_month);
|
||||
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(' ***** Lender Wise *****');
|
||||
console.log('Lender Wise Whole Data',data);
|
||||
|
||||
/** Daily Lender Datas */
|
||||
if(data.records.current_day.length != '0'){
|
||||
//console.log('If Condition day');
|
||||
}
|
||||
else{
|
||||
//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');
|
||||
}
|
||||
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;
|
||||
//}
|
||||
|
||||
|
||||
/** Monthly Lender Datas */
|
||||
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{
|
||||
//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 => {
|
||||
|
||||
console.log(' ***** Alert Message *****');
|
||||
console.log('Alert Message Whole Data',data);
|
||||
this.alertMessage = data.records;
|
||||
console.log('Alert Message',this.alertMessage);
|
||||
});
|
||||
|
||||
}
|
||||
getDoNUT(){
|
||||
|
||||
|
||||
/**
|
||||
* To Get and Display Doughnut Chart Data Based on PDType
|
||||
**/
|
||||
getDoughnutChartData(){
|
||||
|
||||
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(' ***** Doughnut Chart Data *****');
|
||||
console.log('Whole Data',data);
|
||||
|
||||
let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft');
|
||||
let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
let ScheduledIndexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
let InProgressIndexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
let CompletedIndexvalue = this.doughnutChartLabels.indexOf('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(this.MonthlyFullPD.current_week.length != '0'){
|
||||
|
||||
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(this.MonthlyFullPD.current_month.length != '0'){
|
||||
|
||||
if(data.records.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('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 TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
let ScheduledIndexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
let InProgressIndexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
let CompletedIndexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
let QCCompletedIndexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
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');
|
||||
if(TriggerFullPDvalue.length != '0'){
|
||||
@ -192,11 +292,11 @@ getDoNUT(){
|
||||
for(let FPD of TriggerFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[TriggedIndexvalue] = y;
|
||||
this.tempDataFullPD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataFullPD[TriggedIndexvalue] = 0;
|
||||
this.tempDataFullPD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
@ -204,11 +304,11 @@ getDoNUT(){
|
||||
for(let FPD of AllocatedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[AllocatedIndexvalue] = y;
|
||||
this.tempDataFullPD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataFullPD[AllocatedIndexvalue] = 0;
|
||||
this.tempDataFullPD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
@ -216,13 +316,13 @@ getDoNUT(){
|
||||
for(let FPD of ScheduledFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[ScheduledIndexvalue] = y;
|
||||
this.tempDataFullPD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataFullPD[ScheduledIndexvalue] = 0;
|
||||
this.tempDataFullPD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
@ -230,13 +330,13 @@ getDoNUT(){
|
||||
for(let FPD of InProgressFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[InProgressIndexvalue] = y;
|
||||
this.tempDataFullPD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataFullPD[InProgressIndexvalue] = 0;
|
||||
this.tempDataFullPD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
@ -244,13 +344,13 @@ getDoNUT(){
|
||||
for(let FPD of CompletedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[CompletedIndexvalue] = y;
|
||||
this.tempDataFullPD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataFullPD[CompletedIndexvalue] = 0;
|
||||
this.tempDataFullPD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
@ -258,13 +358,26 @@ getDoNUT(){
|
||||
for(let FPD of QCCompletedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.TempDataFullPD[QCCompletedIndexvalue] = y;
|
||||
this.tempDataFullPD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
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');
|
||||
@ -273,11 +386,11 @@ getDoNUT(){
|
||||
for(let FPD of TriggerSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[TriggedIndexvalue] = y;
|
||||
this.tempDataSmartPD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataSmartPD[TriggedIndexvalue] = 0;
|
||||
this.tempDataSmartPD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
@ -285,11 +398,11 @@ getDoNUT(){
|
||||
for(let FPD of AllocatedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[AllocatedIndexvalue] = y;
|
||||
this.tempDataSmartPD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataSmartPD[AllocatedIndexvalue] = 0;
|
||||
this.tempDataSmartPD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
@ -297,13 +410,13 @@ getDoNUT(){
|
||||
for(let FPD of ScheduledSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[ScheduledIndexvalue] = y;
|
||||
this.tempDataSmartPD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataSmartPD[ScheduledIndexvalue] = 0;
|
||||
this.tempDataSmartPD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
@ -311,13 +424,13 @@ getDoNUT(){
|
||||
for(let FPD of InProgressSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[InProgressIndexvalue] = y;
|
||||
this.tempDataSmartPD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataSmartPD[InProgressIndexvalue] = 0;
|
||||
this.tempDataSmartPD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
@ -325,13 +438,13 @@ getDoNUT(){
|
||||
for(let FPD of CompletedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[CompletedIndexvalue] = y;
|
||||
this.tempDataSmartPD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataSmartPD[CompletedIndexvalue] = 0;
|
||||
this.tempDataSmartPD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
@ -339,26 +452,40 @@ getDoNUT(){
|
||||
for(let FPD of QCCompletedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.TempDataSmartPD[QCCompletedIndexvalue] = y;
|
||||
this.tempDataSmartPD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
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');
|
||||
if(TriggerTelePDvalue.length != '0'){
|
||||
//console.log('console triggered value',TriggerTelePDvalue);
|
||||
for(let FPD of TriggerTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[TriggedIndexvalue] = y;
|
||||
this.tempDataTelePD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[TriggedIndexvalue] = 0;
|
||||
this.tempDataTelePD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
@ -366,11 +493,11 @@ getDoNUT(){
|
||||
for(let FPD of AllocatedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[AllocatedIndexvalue] = y;
|
||||
this.tempDataTelePD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[AllocatedIndexvalue] = 0;
|
||||
this.tempDataTelePD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
@ -378,13 +505,13 @@ getDoNUT(){
|
||||
for(let FPD of ScheduledTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[ScheduledIndexvalue] = y;
|
||||
this.tempDataTelePD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[ScheduledIndexvalue] = 0;
|
||||
this.tempDataTelePD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
@ -392,13 +519,13 @@ getDoNUT(){
|
||||
for(let FPD of InProgressTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[InProgressIndexvalue] = y;
|
||||
this.tempDataTelePD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[InProgressIndexvalue] = 0;
|
||||
this.tempDataTelePD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
@ -406,13 +533,13 @@ getDoNUT(){
|
||||
for(let FPD of CompletedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[CompletedIndexvalue] = y;
|
||||
this.tempDataTelePD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[CompletedIndexvalue] = 0;
|
||||
this.tempDataTelePD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
@ -420,101 +547,101 @@ getDoNUT(){
|
||||
for(let FPD of QCCompletedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.TempDataTelePD[QCCompletedIndexvalue] = y;
|
||||
this.tempDataTelePD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.TempDataTelePD[QCCompletedIndexvalue] = 0;
|
||||
this.tempDataTelePD[QCCompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
// y: number
|
||||
|
||||
//console.log(MonthlyFullPDArr.pd_status);
|
||||
// for(let FPD of MonthlyFullPDArr){
|
||||
//console.log(monthlyFullPDArr.pd_status);
|
||||
// for(let FPD of monthlyFullPDArr){
|
||||
|
||||
// if(FPD.pd_status == 'TRIGGERED'){
|
||||
// console.log('PD Status');
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// let y = +FPD.count; // y: number
|
||||
// console.log('Initial',this.TempDataFullPD);
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// console.log(this.TempDataFullPD);
|
||||
// console.log('Initial',this.tempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// console.log(this.tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
|
||||
// // if(contact.pd_status == 'TRIGGERED' && contact.PDTYPE == 'FULL'){
|
||||
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// // var y = +contact.count; // y: number
|
||||
// // console.log('Initial',this.TempDataFullPD);
|
||||
// // this.TempDataFullPD[Indexvalue] = y;
|
||||
// // console.log(this.TempDataFullPD);
|
||||
// // console.log('Initial',this.tempDataFullPD);
|
||||
// // this.tempDataFullPD[Indexvalue] = y;
|
||||
// // console.log(this.tempDataFullPD);
|
||||
// // }
|
||||
// // else{
|
||||
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// // this.TempDataFullPD[Indexvalue] = 0;
|
||||
// // this.tempDataFullPD[Indexvalue] = 0;
|
||||
|
||||
// // }
|
||||
// if(FPD.pd_status == 'ALLOCATED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
// var y = +FPD.count; // y: number
|
||||
// // console.log(this.TempDataFullPD);
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated b4',TempDataFullPD);
|
||||
// // console.log(this.tempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// if(FPD.pd_status == 'INPROGRESS'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// if(FPD.pd_status == 'SCHEDULED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('d',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('d',tempDataFullPD);
|
||||
// }
|
||||
// if(FPD.pd_status == 'COMPLETED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// //return TempDataFullPD;
|
||||
// //return tempDataFullPD;
|
||||
|
||||
// if(FPD.pd_status == 'QC COMPLETED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.TempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
// this.TempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('Final Data',TempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('Final Data',tempDataFullPD);
|
||||
// }
|
||||
// //console.log('inside',this.TempDataFullPD);
|
||||
// //console.log('inside',this.tempDataFullPD);
|
||||
// }
|
||||
//this.doughnutChartDataForFullPD = [3,4,5,6,7,8];
|
||||
}
|
||||
@ -522,16 +649,62 @@ getDoNUT(){
|
||||
else{
|
||||
//console.log('Else Condition month');
|
||||
}
|
||||
this.doughnutChartDataForFullPD = this.TempDataFullPD;
|
||||
this.doughnutChartDataForSmartPD = this.TempDataSmartPD;
|
||||
this.doughnutChartDataForTelePD = this.TempDataTelePD;
|
||||
this.doughnutChartDataForFullPD = this.tempDataFullPD;
|
||||
this.doughnutChartDataForSmartPD = this.tempDataSmartPD;
|
||||
this.doughnutChartDataForTelePD = this.tempDataTelePD;
|
||||
|
||||
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('Temp Smart Data',this.TempDataSmartPD);
|
||||
console.log('temp Smart Data',this.tempDataSmartPD);
|
||||
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,36 +715,124 @@ getDoNUT(){
|
||||
// }];
|
||||
// }, 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({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
}
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Full',
|
||||
fontSize: 15,
|
||||
},
|
||||
centertext:'One'
|
||||
},this.globalChartOptions);
|
||||
|
||||
doughnutOptionsSmartPD: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
}
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Smart',
|
||||
fontSize: 15
|
||||
},
|
||||
centertext:'Two'
|
||||
},
|
||||
this.globalChartOptions);
|
||||
|
||||
doughnutOptionsTelePD: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Tele',
|
||||
fontSize: 15
|
||||
},
|
||||
centertext:'Three'
|
||||
}, 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();
|
||||
// }
|
||||
// }
|
||||
@ -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>
|
||||
<!-- start main applicant details -->
|
||||
@ -15,10 +15,13 @@
|
||||
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
|
||||
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
|
||||
<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 style="width: 100%">
|
||||
|
||||
@ -68,6 +71,8 @@
|
||||
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
|
||||
|
||||
<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 style="width: 100%">
|
||||
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
|
||||
@ -117,7 +122,7 @@
|
||||
<div fxFlex="60" class="pb-0 text-sm-left">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,7 +131,7 @@
|
||||
|
||||
<mat-card-actions>
|
||||
<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>
|
||||
</mat-card-actions>
|
||||
|
||||
|
||||
@ -38,7 +38,6 @@ export class PersonalInfoComponent implements OnInit {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.loadPDDetails(this.pdid,this.form_id);
|
||||
this.getRelationMaster();
|
||||
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){
|
||||
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(defaultMainApp,this.coApplicantDetails);
|
||||
|
||||
this.loadFormData();
|
||||
|
||||
|
||||
}
|
||||
@ -90,33 +66,60 @@ export class PersonalInfoComponent implements OnInit {
|
||||
loadDataStatus: boolean;
|
||||
|
||||
loadFormWithIDData(data) {
|
||||
// main applicant
|
||||
var main_result = Object.keys(data.main_applicant_details).map(function(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({
|
||||
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),
|
||||
qualification_ans:new FormControl(item.qualification_ans, Validators.required),
|
||||
earning_ans:new FormControl(item.earning_ans, Validators.required),
|
||||
})));
|
||||
// co applicant
|
||||
let iterateCoApp=[];
|
||||
|
||||
let coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({
|
||||
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];
|
||||
});
|
||||
|
||||
coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({
|
||||
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),
|
||||
qualification_ans:new FormControl(item.qualification_ans, Validators.required),
|
||||
earning_ans:new FormControl(item.earning_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({
|
||||
pdid:null,
|
||||
@ -129,7 +132,8 @@ var co_result = Object.keys(data.co_applicant_details).map(function(key) {
|
||||
this.loadDataStatus = true;
|
||||
}
|
||||
|
||||
loadFormData(mainApp,coApp){
|
||||
loadFormData(){
|
||||
|
||||
// main applicant
|
||||
let mainApplicantGroup = new FormArray(this.mainApplicantDetails.map((item,key) => new FormGroup({
|
||||
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),
|
||||
age_ques:new FormControl(this.mainApplicantQuestions[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_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_id: new FormControl(3),
|
||||
qualification_ans:new FormControl(null, Validators.required),
|
||||
@ -149,19 +153,17 @@ var co_result = Object.keys(data.co_applicant_details).map(function(key) {
|
||||
earning_ans:new FormControl(null, Validators.required),
|
||||
|
||||
})));
|
||||
// co applicant
|
||||
let iterateCoApp=[];
|
||||
|
||||
// co applicant
|
||||
let 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.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_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_id: new FormControl(3),
|
||||
qualification_ans:new FormControl(null, Validators.required),
|
||||
@ -205,7 +207,14 @@ this.loadDataStatus = true;
|
||||
|
||||
// submit forms details
|
||||
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 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user