CSS changes
This commit is contained in:
parent
629bb2b72c
commit
f99edf725b
@ -1,19 +1,4 @@
|
|||||||
|
<div class="pad-wrap">
|
||||||
<!--<div fxLayout="row" fxLayoutWrap="wrap">
|
|
||||||
<!-- <div fxFlex.gt-sm="50" fxFlex="100">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Stateold" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
|
|
||||||
</mat-form-field>
|
|
||||||
</div> --
|
|
||||||
<!-- <div fxFlex.gt-sm="50" fxFlex="100">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Statenew" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
|
|
||||||
(ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
|
|
||||||
</mat-form-field>
|
|
||||||
</div> --
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
<div class="pad-wrap">
|
|
||||||
|
|
||||||
<!-- doughnut -->
|
<!-- doughnut -->
|
||||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
||||||
@ -28,21 +13,6 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||||
<!-- <mat-form-field >
|
|
||||||
|
|
||||||
<input matInput placeholder="Placeholder">
|
|
||||||
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
|
|
||||||
<mat-hint>Hint</mat-hint>
|
|
||||||
</mat-form-field> -->
|
|
||||||
<!-- <mat-form-field appearance="outline"
|
|
||||||
<mat-label>City</mat-label>
|
|
||||||
<input type="text" placeholder="City" matInput [formControl]="myControl" [matAutocomplete]="auto" color="accent">
|
|
||||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
|
|
||||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
|
|
||||||
{{ option.name }} / {{option.state_name}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-autocomplete>
|
|
||||||
</mat-form-field> -->
|
|
||||||
<mat-form-field class="example-full-width">
|
<mat-form-field class="example-full-width">
|
||||||
<mat-select placeholder="City" [formControl]="myControl" multiple>
|
<mat-select placeholder="City" [formControl]="myControl" multiple>
|
||||||
<mat-select-trigger style="color:#fff;">
|
<mat-select-trigger style="color:#fff;">
|
||||||
@ -53,23 +23,12 @@
|
|||||||
</mat-select-trigger>
|
</mat-select-trigger>
|
||||||
<mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
|
<mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
<!-- <mat-select placeholder="City" [formControl]="myControl" multiple>
|
|
||||||
<!-- <mat-option *ngFor="let ld of lenderdatas" [value]="ld.entity_id" >{{ ld.short_name }} {{ ld.full_name }} </mat-option> --
|
|
||||||
<mat-option *ngFor="let cd of cityData" [value]="cd.city_id">{{ cd.name }} / {{cd.state_name}} </mat-option>
|
|
||||||
</mat-select> -->
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||||
<!-- <mat-form-field appearance="outline" class="example-full-width">
|
|
||||||
<mat-label>Lender</mat-label>
|
|
||||||
<input type="text" placeholder="Lender" matInput [formControl]="myControl2" [matAutocomplete]="auto2" color="#000000">
|
|
||||||
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn2">
|
|
||||||
<mat-option *ngFor="let option2 of filteredOptions2 | async" [value]="option2">
|
|
||||||
{{ option2.full_name }} ({{option2.short_name}})
|
|
||||||
</mat-option>
|
|
||||||
</mat-autocomplete>
|
|
||||||
</mat-form-field> -->
|
|
||||||
<mat-form-field class="example-full-width">
|
<mat-form-field class="example-full-width">
|
||||||
<mat-select placeholder="Lender" [formControl]="myControl2" multiple>
|
<mat-select placeholder="Lender" [formControl]="myControl2" multiple>
|
||||||
<mat-select-trigger style="color:#fff;">
|
<mat-select-trigger style="color:#fff;">
|
||||||
@ -81,32 +40,11 @@
|
|||||||
<!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> -->
|
<!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> -->
|
||||||
<mat-option *ngFor="let ld of lenderData" (onSelectionChange)="onChange($event,3)" [value]="ld">{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
|
<mat-option *ngFor="let ld of lenderData" (onSelectionChange)="onChange($event,3)" [value]="ld">{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
<!-- <mat-form-field class="example-full-width">
|
|
||||||
<mat-select placeholder="Lender" [formControl]="myControl2" multiple>
|
|
||||||
<mat-option *ngFor="let ld of lenderData" [value]="ld.entity_id" >{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
|
|
||||||
</mat-select> -->
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</mat-card-title>
|
</mat-card-title>
|
||||||
<!--<mat-form-field class="example-full-width">
|
|
||||||
<input type="text" placeholder="City" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
|
||||||
<mat-autocomplete #autoforcity="matAutocomplete">
|
|
||||||
<mat-option *ngFor="let option of filteredOptionsforcity | async" [value]="option">
|
|
||||||
{{option}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-autocomplete>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
Full Pd
|
|
||||||
{{doughnutChartDataForFullPD}} Length
|
|
||||||
{{doughnutChartDataForFullPD.length}}
|
|
||||||
Smart Pd
|
|
||||||
{{doughnutChartDataForSmartPD}} Length
|
|
||||||
{{doughnutChartDataForSmartPD.length}}
|
|
||||||
Tele Pd
|
|
||||||
{{doughnutChartDataForTelePD}} Length
|
|
||||||
{{doughnutChartDataForTelePD.length}} -->
|
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<div fxLayout="row">
|
<div fxLayout="row">
|
||||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||||
@ -166,44 +104,5 @@
|
|||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
<!--<div fxLayout="row wrap">
|
|
||||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-title>Today's Status</mat-card-title>
|
|
||||||
<mat-card-subtitle></mat-card-subtitle>
|
|
||||||
<hr>
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="w-100 h-300px">
|
|
||||||
<ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
|
|
||||||
</ngx-charts-bar-horizontal-stacked>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div fxLayout="row">
|
|
||||||
<div fxFlex="77%">
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-title>Today's Details</mat-card-title>
|
|
||||||
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="w-100 h-300px">
|
|
||||||
<span>Full</span>
|
|
||||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="full" [gradient]="gradient" >
|
|
||||||
</ngx-charts-advanced-pie-chart>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-100 h-300px">
|
|
||||||
<span>Smart</span>
|
|
||||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="smart" [gradient]="gradient" >
|
|
||||||
</ngx-charts-advanced-pie-chart>
|
|
||||||
</div>
|
|
||||||
<div class="w-100 h-300px">
|
|
||||||
<span>Tele</span>
|
|
||||||
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="tele" [gradient]="gradient" >
|
|
||||||
</ngx-charts-advanced-pie-chart>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -22,16 +22,16 @@ li
|
|||||||
float:left;
|
float:left;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep {
|
//::ng-deep {
|
||||||
.mat-form-field-appearance-outline .mat-form-field-outline {
|
// .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||||
color: white;
|
// color: white;
|
||||||
}
|
//}
|
||||||
mat-form-field {
|
//mat-form-field {
|
||||||
.mat-hint, input, ::placeholder, .mat-form-field-label {
|
// .mat-hint, input, ::placeholder, .mat-form-field-label {
|
||||||
color: white;
|
// color: white;
|
||||||
}
|
//}
|
||||||
}
|
//}
|
||||||
}
|
//}
|
||||||
|
|
||||||
.example-full-width {
|
.example-full-width {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|||||||
@ -116,7 +116,7 @@ export class DashboardComponent {
|
|||||||
|
|
||||||
|
|
||||||
ngOnInit(){
|
ngOnInit(){
|
||||||
this.getPDSubCardData();
|
|
||||||
|
|
||||||
this.getDoughnutChartData();
|
this.getDoughnutChartData();
|
||||||
|
|
||||||
@ -126,13 +126,18 @@ export class DashboardComponent {
|
|||||||
const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
|
const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
|
||||||
const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);
|
const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);
|
||||||
|
|
||||||
const thismonth = new Date(today.getFullYear(), today.getMonth(), 0);
|
const LastDateForPreMonth = new Date(today.getFullYear(), today.getMonth(), 0);
|
||||||
console.log(fromMin);
|
const FirstDateForPreMonth = new Date(today.getFullYear(), today.getMonth()-1, 1);
|
||||||
console.log(fromMax);
|
|
||||||
console.log(toMin);
|
console.log('FromDateMin:',fromMin);
|
||||||
console.log(toMax);
|
console.log('FromDateMax:',fromMax);
|
||||||
//const resetRange = {fromDate: today, toDate: today};
|
console.log('ToDateMin',toMin);
|
||||||
//this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
|
console.log('ToDateMax',toMax);
|
||||||
|
console.log('LastDateForPreMonth',LastDateForPreMonth);
|
||||||
|
console.log('FirstDateForPreMonth',FirstDateForPreMonth);
|
||||||
|
|
||||||
|
// const resetRange = {fromDate: today, toDate: today};
|
||||||
|
// this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
|
||||||
|
|
||||||
|
|
||||||
this.setupPresets();
|
this.setupPresets();
|
||||||
@ -184,101 +189,6 @@ console.log(toMax);
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 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');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** Weekly Lender Datas */
|
|
||||||
if(data.records.current_week.length != '0'){
|
|
||||||
//console.log('If Condition week');
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
//console.log('Else Condition week');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** 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);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* To Get and Display Doughnut Chart Data Based on PDType
|
* To Get and Display Doughnut Chart Data Based on PDType
|
||||||
@ -613,59 +523,11 @@ getDoughnutChartData(){
|
|||||||
console.log('total3',this.total3);
|
console.log('total3',this.total3);
|
||||||
console.log('total2',this.total2);
|
console.log('total2',this.total2);
|
||||||
console.log('total1',this.total1);
|
console.log('total1',this.total1);
|
||||||
//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);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.datasets = [{
|
|
||||||
// data: [12, 19, 3, 5, 2, 3]
|
|
||||||
// }];
|
|
||||||
// }, 100);
|
|
||||||
|
|
||||||
doughnutOptions: any = Object.assign({
|
doughnutOptions: any = Object.assign({
|
||||||
elements: {
|
elements: {
|
||||||
@ -673,11 +535,6 @@ doughnutOptions: any = Object.assign({
|
|||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// title: {
|
|
||||||
// display: true,
|
|
||||||
// position: "top",
|
|
||||||
// text: 'Full',
|
|
||||||
// fontSize: 15,
|
|
||||||
centertext:'One'
|
centertext:'One'
|
||||||
},this.globalChartOptions);
|
},this.globalChartOptions);
|
||||||
|
|
||||||
@ -693,17 +550,6 @@ onChange(e :any,flag: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if(flag == 2){
|
if(flag == 2){
|
||||||
// if(e.source._selected == true ){
|
|
||||||
// let data = e.source.value.city_id;
|
|
||||||
// this.selectedCity.push(data);
|
|
||||||
// console.log('true');
|
|
||||||
// }
|
|
||||||
// else if(e.source._selected == false){
|
|
||||||
// let data = e.source.value.city_id;
|
|
||||||
// let index = this.selectedCity.indexOf(data);
|
|
||||||
// this.selectedCity.splice(index,1);
|
|
||||||
// console.log('false');
|
|
||||||
// }
|
|
||||||
let data = e.source.value.city_id;
|
let data = e.source.value.city_id;
|
||||||
e.source._selected == true ? this.selectedCity.push(data)
|
e.source._selected == true ? this.selectedCity.push(data)
|
||||||
: this.selectedCity.splice(this.selectedCity.indexOf(data),1);
|
: this.selectedCity.splice(this.selectedCity.indexOf(data),1);
|
||||||
@ -720,11 +566,6 @@ onChange(e :any,flag: any) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// this._dashboardService.get2(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(
|
|
||||||
|
|
||||||
// dataresult=>{
|
|
||||||
|
|
||||||
// });
|
|
||||||
|
|
||||||
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(data => {
|
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(data => {
|
||||||
|
|
||||||
@ -758,7 +599,7 @@ onChange(e :any,flag: any) {
|
|||||||
|
|
||||||
let DraftFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'DRAFT');
|
let DraftFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'DRAFT');
|
||||||
if(DraftFullPDvalue.length != '0'){
|
if(DraftFullPDvalue.length != '0'){
|
||||||
//console.log('console triggered value',TriggerFullPDvalue);
|
|
||||||
for(let FPD of DraftFullPDvalue){
|
for(let FPD of DraftFullPDvalue){
|
||||||
let y = +FPD.count;
|
let y = +FPD.count;
|
||||||
this.total1 = this.total1+y;
|
this.total1 = this.total1+y;
|
||||||
@ -771,7 +612,7 @@ onChange(e :any,flag: any) {
|
|||||||
|
|
||||||
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);
|
|
||||||
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;
|
||||||
@ -1054,52 +895,9 @@ onChange(e :any,flag: any) {
|
|||||||
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('total3',this.total3);
|
console.log('total3',this.total3);
|
||||||
console.log('total2',this.total2);
|
console.log('total2',this.total2);
|
||||||
console.log('total1',this.total1);
|
console.log('total1',this.total1);
|
||||||
//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);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<!--<pre> {{ m_group | json}}</pre>-->
|
<!--<pre> {{ m_group | json}}</pre>-->
|
||||||
<mat-card style="padding: 12px;">
|
<mat-card style="padding: 12px;">
|
||||||
|
<p>Client Details</p>
|
||||||
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
|
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
|
||||||
<div fxLayout="row" fxLayoutAlign="start none">
|
<div fxLayout="row" fxLayoutAlign="start none">
|
||||||
<div formArrayName="client_details" fxFill>
|
<div formArrayName="client_details" fxFill>
|
||||||
@ -28,7 +29,7 @@
|
|||||||
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
|
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
|
||||||
<div>
|
<div>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
|
<mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode">
|
||||||
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
|
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
@ -49,7 +50,7 @@
|
|||||||
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
|
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
|
||||||
<div>
|
<div>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
|
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase">
|
||||||
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
|
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
@ -63,17 +64,18 @@
|
|||||||
|
|
||||||
<div fxFlex="20">
|
<div fxFlex="20">
|
||||||
<span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
|
<span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
|
||||||
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
|
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
|
|
||||||
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" style="text-align:right;">
|
<div class="row" style="text-align:right;">
|
||||||
|
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
|
||||||
|
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
|
||||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
|
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
|
||||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
|
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import {
|
|||||||
FormArray,
|
FormArray,
|
||||||
} from '@angular/forms';
|
} from '@angular/forms';
|
||||||
|
|
||||||
|
|
||||||
import { NotifierService } from 'angular-notifier';
|
import { NotifierService } from 'angular-notifier';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@ -84,10 +85,13 @@ export class ClientInfoComponent implements OnInit {
|
|||||||
// 'name': 'Others'
|
// 'name': 'Others'
|
||||||
// }
|
// }
|
||||||
// ]
|
// ]
|
||||||
|
private notifier: NotifierService;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
notifier: NotifierService,
|
||||||
private _formBuilder: FormBuilder,
|
private _formBuilder: FormBuilder,
|
||||||
private pdTrigerService: PdTrigerService) { }
|
private pdTrigerService: PdTrigerService) {
|
||||||
|
this.notifier = notifier;}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.getM_FreqOfPurchase();
|
this.getM_FreqOfPurchase();
|
||||||
@ -254,16 +258,16 @@ var result = Object.keys(supp_data).map(function(key) {
|
|||||||
dataresult => {
|
dataresult => {
|
||||||
if (dataresult.status == 200) {
|
if (dataresult.status == 200) {
|
||||||
// console.log(dataresult);
|
// console.log(dataresult);
|
||||||
// this.notifier.notify('success', 'Record Saved Successfully.!');
|
this.notifier.notify('success', 'Record Saved Successfully.!');
|
||||||
// this.dialogRef.close();
|
// this.dialogRef.close();
|
||||||
// alert("sample alert for Saving");
|
// alert("sample alert for Saving");
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
||||||
// this.errorMessage = "Some Thing Wents Wrong Try Again !";
|
// this.errorMessage = "Some Thing Wents Wrong Try Again !";
|
||||||
}
|
}
|
||||||
}, error => {
|
}, error => {
|
||||||
// this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
||||||
// this.errorMessage = "Something Wents Wrong Try Again !";
|
// this.errorMessage = "Something Wents Wrong Try Again !";
|
||||||
// this.dialogRef.close();
|
// this.dialogRef.close();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user