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

Merge branch 'master' of https://bitbucket.org/sriramv18/sparqsineedge

Browse Source
This commit is contained in:
dineshkumarkannan 2018-11-17 12:39:15 +05:30
commit 8318819a34
11 changed files with 913 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ng6-seed/package-lock.json generated
View File

@ -7212,6 +7212,11 @@
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.5.3.tgz", "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.5.3.tgz",
"integrity": "sha512-CJca1od05yf2j8OKUm5ar+mIVFB3n01+vbMpLeT+9/drKYCxgmtxxmmsgwWBNNXWYa2GNYB7PGH+mdKQkeypOg==" "integrity": "sha512-CJca1od05yf2j8OKUm5ar+mIVFB3n01+vbMpLeT+9/drKYCxgmtxxmmsgwWBNNXWYa2GNYB7PGH+mdKQkeypOg=="
}, },
"ngx-mat-daterange-picker": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/ngx-mat-daterange-picker/-/ngx-mat-daterange-picker-1.1.4.tgz",
"integrity": "sha512-bfIYGJicxwg58j6LZjUE5JPXqq7yJfremFhX5S/DnUYwQjgmDWN6PUOFEegEO7ua4QdgGWrhK04ElOw25aWrzQ=="
},
"ngx-mat-select-search": { "ngx-mat-select-search": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-1.3.1.tgz", "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-1.3.1.tgz",

1
ng6-seed/package.json
View File

@ -52,6 +52,7 @@
"ng2-toastr": "^4.1.2", "ng2-toastr": "^4.1.2",
"ng2-validation": "4.2.0", "ng2-validation": "4.2.0",
"ngx-color-picker": "^4.0.3", "ngx-color-picker": "^4.0.3",
"ngx-mat-daterange-picker": "^1.1.4",
"ngx-mat-select-search": "^1.3.1", "ngx-mat-select-search": "^1.3.1",
"ngx-perfect-scrollbar": "5.0.0-7", "ngx-perfect-scrollbar": "5.0.0-7",
"perfect-scrollbar": "^1.3.0", "perfect-scrollbar": "^1.3.0",

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

@ -1,12 +1,107 @@
<!--<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"> <div class="pad-wrap">
<!-- doughnut --> <!-- doughnut -->
<!-- <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100"> -->
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100"> <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
<mat-card> <mat-card>
<mat-card-title>
<div fxFlex.gt-sm="25" fxFlex="100">
<div fxFlex.gt-sm="75" fxFlex="100">
{{dashboardTitle}}
</div>
<div fxFlex.gt-sm="25" fxFlex="100">
<ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" (change)="onChange($event,'One')" [options]="options" #dateRangePicker></ngx-mat-drp>
</div>
</div>
<div fxFlex.gt-sm="25" fxFlex="100">
</div>
<div fxFlex.gt-sm="25" fxFlex="100">
<!-- <mat-form-field >
<mat-card-title>{{dashboardTitle}}</mat-card-title> <input matInput placeholder="Placeholder">
<!-- Full Pd <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-select placeholder="City" [formControl]="myControl" multiple>
<mat-select-trigger style="color:#fff;">
{{myControl.value ? myControl.value[0].name : ''}}
<span *ngIf="myControl.value?.length > 1" >
(+{{myControl.value.length - 1}} {{myControl.value?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>
<mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
</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>
</div>
<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-select placeholder="Lender" [formControl]="myControl2" multiple>
<mat-select-trigger style="color:#fff;">
{{myControl2.value ? myControl2.value[0].short_name : ''}}
<span *ngIf="myControl2.value?.length > 1" >
(+{{myControl2.value.length - 1}} {{myControl2.value?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>
<!-- <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-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>
</div>
</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
{{doughnutChartDataForFullPD.length}} {{doughnutChartDataForFullPD.length}}
Smart Pd Smart Pd
@ -16,52 +111,61 @@
{{doughnutChartDataForTelePD}} Length {{doughnutChartDataForTelePD}} Length
{{doughnutChartDataForTelePD.length}} --> {{doughnutChartDataForTelePD.length}} -->
<mat-card-content> <mat-card-content>
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> <div fxLayout="row">
<!--<div *ngIf="doughnutChartDataForFullPD.length != 0" style="text-align: center"><strong>Full - {{total1}}</strong></div>--> <div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart"
<canvas baseChart class="chart " height="280px" width="280px"
[data]="doughnutChartDataForFullPD" [data]="doughnutChartDataForFullPD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsFullPD" [options]="doughnutOptions"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false" [legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total1 != 0" class="donut-inner"><span>{{total1}}</span></div> <div *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
</div> </div>
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> <div fxFlex.gt-sm="5" fxFlex="100">
<!--<div *ngIf="doughnutChartDataForSmartPD.length != 0" style="text-align: center"><strong>Smart - {{total2}}</strong></div>--> </div>
<div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart" <canvas baseChart class="chart"
height="280px" width="280px"
[data]="doughnutChartDataForSmartPD" [data]="doughnutChartDataForSmartPD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsSmartPD" [options]="doughnutOptions"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false" [legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total2 != 0" class="donut-inner"><span>{{total2}}</span></div> <div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
</div> </div>
<div fxFlex.gt-sm="5" fxFlex="100">
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90"> </div>
<!--<div *ngIf="doughnutChartDataForTelePD.length != 0" style="text-align: center"> <strong>Tele - {{total3}}</strong></div>--> <div fxFlex.gt-sm="30" fxFlex="100">
<canvas baseChart class="chart" <canvas baseChart class="chart"
height="280px" width="280px"
[data]="doughnutChartDataForTelePD" [data]="doughnutChartDataForTelePD"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabels"
[options]="doughnutOptionsTelePD" [options]="doughnutOptions"
[colors]="doughnutChartColors" [colors]="doughnutChartColors"
[legend]="false" [legend]="false"
[chartType]="doughnutChartType"></canvas> [chartType]="doughnutChartType"></canvas>
<div *ngIf="total3 != 0" class="donut-inner"><span>{{total3}}</span></div> <div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
</div> </div>
<div *ngIf="legendArr"> </div>
<ul class="clas">
<li class="cla"><div class="oval" style="background-color:#c1c1c1"></div>Draft</li> <div fxLayout="row">
<li class="cla"><div class="oval" style="background-color:#f44336"></div>Triggered</li> <div fxFlex.gt-sm="100" fxFlex="100" >
<li class="cla"><div class="oval" style="background-color:#ffa500"></div>Allocated</li> <br><br><br><br><br><br>
<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> <ul class="lengend-list">
<li class="cla"><div class="oval" style="background-color:#00ff00"></div>Completed</li> <li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>
<li class="cla"><div class="oval" style="background-color:#4caf50"></div>QC Completed</li> <li class="lengend-element"><span class="oval" style="background-color:#f44336"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Triggered</li>
<li class="lengend-element"><span class="oval" style="background-color:#ffa500"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Allocated</li>
<li class="lengend-element"><span class="oval" style="background-color:#ffeb3b"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Scheduled</li>
<li class="lengend-element"><span class="oval" style="background-color:#3f51b5"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; InProgress</li>
<li class="lengend-element"><span class="oval" style="background-color:#00ff00"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Completed</li>
<li class="lengend-element"><span class="oval" style="background-color:#4caf50"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; QC Completed</li>
</ul> </ul>
</div> </div>
</div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
@ -106,78 +210,3 @@
</mat-card> </mat-card>
</div>--> </div>-->
</div> </div>
<div fxLayout="row">
<div fxFlex="100">
<mat-card>
<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]="alertMessage">
<!-- <ng-template *ngFor="let item of message" > -->
<mat-list-item>
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
<!--<h3 mat-line> {{item.applicantname}} </h3>
<p mat-line> {{item.applicantid}}</p>
<p mat-line> {{item.lendername}} - {{item.status}} </p> -->
<h3 mat-line> {{item.applicant_name}} </h3>
<p mat-line> {{item.lender_applicant_id}}</p>
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>
</div>
<!-- <div fxFlex="100"> -->
<div fxFlex="100">
<mat-card>
<mat-card-title>Lenderwise</mat-card-title>
<mat-card-content>
<mat-list>
<!-- {{lenderpd}} -->
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderWisePD">
<!-- <ng-template *ngFor="let item of lenderpd" > -->
<mat-list-item>
<h3 mat-line>{{item.full_name}} / {{item.city_name}} </h3>
<p mat-line> {{item.PDTYPE}} -{{item.count}} </p>
<!-- <p mat-line>
<div *ngIf="item.PDTYPE == FULL" > {{item.PDTYPE}} -{{item.count}} </div>
<div *ngIf="item.PDTYPE == SMART" > {{item.PDTYPE}} -{{item.count}} </div>
<div *ngIf="item.PDTYPE == TELE" > {{item.PDTYPE}} -{{item.count}} </div> -->
<!-- <h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p> -->
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>
</div>
<!-- <div fxFlex="100"> -->
<div fxFlex="100">
<mat-card>
<mat-card-title>CityWise</mat-card-title>
<mat-card-content>
<mat-list>
<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>
<!-- <h3 mat-line> item </h3> -->
<p mat-line> {{item.PDTYPE}} -{{item.count}}
<!-- <div *ngIf="item.PDTYPE == FULL" >{{item.PDTYPE}} -{{item.count}} </div> -->
<!-- <div *ngIf="item.PDTYPE == SMART"> {{item.PDTYPE}} -{{item.count}} </div>
<div *ngIf="item.PDTYPE == TELE"> {{item.PDTYPE}} -{{item.count}} </div> -->
</p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>
</div>
</div>

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

@ -5,49 +5,69 @@ $p: 12px;
mat-card-title{ mat-card-title{
background-color:#E00201 !important; background-color:#E00201 !important;
color:#fff; color:#fff;
padding-bottom: 1rem; //padding-bottom: 1rem;
margin-bottom: 0px; //margin-bottom: 0px;
}
.mat-input-wrapper {
background: #fff;
}
// .example-form {
// min-width: 150px;
// max-width: 500px;
// width: 95%;
// }
li
{
display:block;
float:left;
}
::ng-deep {
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
mat-form-field {
.mat-hint, input, ::placeholder, .mat-form-field-label {
color: white;
}
}
}
.example-full-width {
width: 95%;
} }
.oval { .oval {
height: 13px; height: 13px;
width: 25px; width: 25px;
border-radius: 50%; border-radius: 50%;
} }
.clas {
.ngx-mat-drp-date-input[_ngcontent-c17] {
text-overflow: ellipsis;
color: #fff;
}
.lengend-list {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
text-align:justify;
} }
.cla {
.lengend-element {
font-size: 1rem; font-size: 1rem;
padding-right: 3%;
} }
.cla a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.cla a:hover {
background-color: #111111;
}
.donut-inner{ .donut-inner{
//c - with chart lender margin-top: -171px;
//c margin-bottom: 154px; margin-left: 120px;
//c margin-top: -187px;
//c margin-left: 145px;
margin-bottom: 154px;
margin-top: -152px;
margin-left: 142px;
//margin-bottom: 154px; //margin-bottom: 154px;
//margin-top: -221px; //margin-top: -221px;
//margin-left: 145px; //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;
@ -56,9 +76,6 @@ mat-card-title{
.donut-inner span{ .donut-inner span{
font-size:1rems; font-size:1rems;
} }
.chart{
padding: 0rem !important;
}
// .profile { // .profile {
// position: relative; // position: relative;
@ -595,8 +612,10 @@ mat-card-title{
// font-size: 50px; // font-size: 50px;
// display: inline-block; // display: inline-block;
// } // }
mat-card-content{
min-height: 400px;
}
.chart{
padding: 0.8rem;
//.chart{ }
// padding: 2rem;
//}

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

@ -1,10 +1,16 @@
//import { Component } from '@angular/core'; //import { Component } from '@angular/core';
import {Component, NgModule, ElementRef, Inject, ViewChild} from '@angular/core' import {Component, NgModule, ElementRef, Inject, Injectable, ViewChild} from '@angular/core'
import { FormBuilder, FormGroup, Validators , ValidatorFn, AbstractControl, FormControl} from '@angular/forms'
import { HttpClient } from '@angular/common/http';
import {BrowserModule} from '@angular/platform-browser' import {BrowserModule} from '@angular/platform-browser'
import {ChartsModule, Color} from 'ng2-charts'; import {ChartsModule, Color} from 'ng2-charts';
//import { MastersService } from './../service/masters/masters.service' import {Observable} from 'rxjs';
import {map, startWith, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import { MastersService } from '../settings/service/masters/masters.service';
import { DashboardService } from './dashboard.service'; import { DashboardService } from './dashboard.service';
import { NgxDrpOptions, PresetItem, Range } from 'ngx-mat-daterange-picker';
import { BaseChartDirective } from 'ng2-charts/ng2-charts'; import { BaseChartDirective } from 'ng2-charts/ng2-charts';
//import { DatePipe } from '@angular/common';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
@ -14,11 +20,21 @@ import { BaseChartDirective } from 'ng2-charts/ng2-charts';
export class DashboardComponent { export class DashboardComponent {
dashboardTitle = 'Monthly Status'; /** Declaration Part Of DataRange Picker */
range:Range = {fromDate:new Date(), toDate: new Date()};
options:NgxDrpOptions;
presets:Array<PresetItem> = [];
@ViewChild('dateRangePicker') dateRangePicker;
/* RefLINK: https://www.npmjs.com/package/ngx-mat-daterange-picker */
/** End Of Date Range Declaration */
dashboardTitle = 'PD Status';
/** Declaration Part Of Doughnut Chart */
@ViewChild('mycanvas') canvas:ElementRef;
//myChart: BaseChartDirective;
@ViewChild('mycanvas')
myChart: BaseChartDirective;
canvas:ElementRef;
doughnutChartType = 'doughnut'; doughnutChartType = 'doughnut';
doughnutChartLabels: string[] = ['Draft','Triggered','Allocated','Scheduled','InProgress','Completed','QC Completed']; doughnutChartLabels: string[] = ['Draft','Triggered','Allocated','Scheduled','InProgress','Completed','QC Completed'];
@ -34,106 +50,134 @@ export class DashboardComponent {
total1: number = 0; total1: number = 0;
total2: number = 0; total2: number = 0;
total3: number = 0; total3: number = 0;
total4: number = 0;
cityWisePD : any[]; total5: number = 0;
lenderWisePD :any[]; total6: number = 0;
alertMessage : any[]; flag : number = 0;
legendArr : any[] = [];
legendData: any;
// doughnutChartColors: any[] = [{ // doughnutChartColors: any[] = [{
// backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7'] // backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7']
// backgroundColor: ['#c1c1c1','#f44336','#3f51b5','#ffeb3b','#4caf50','#2196f3','#673ab7']
// }]; // }];
doughnutChartColors: any[] = [{ doughnutChartColors: any[] = [{
//backgroundColor: ['#c1c1c1','#f44336','#3f51b5','#ffeb3b','#4caf50','#2196f3','#673ab7']
backgroundColor: ['#c1c1c1','#f44336','#ffa500','#ffeb3b','#3f51b5','#00ff00','#4caf50'] backgroundColor: ['#c1c1c1','#f44336','#ffa500','#ffeb3b','#3f51b5','#00ff00','#4caf50']
}]; }];
// globalChartOptionsFullPD: any = { globalChartOptions: any = {
// responsive: false,
// legend: {
// display: false,
// position: 'bottom'
// }
// };
// globalChartOptionsSmartPD: any = {
// responsive: false,
// legend: {
// display: false,
// position: 'bottom'
// }
// };
// title: {
// display: true,
// position: "bottom",
// text: 'Upcoming Meetings'
// },
// legend: {
// display: false
// },
// centertext: "123"
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) {
//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) { /** Declaration Part Of SubCard Section */
cityWisePD : any=[];
lenderWisePD :any=[];
alertMessage : any=[];
selectedCity : any=[];
selectedLender : any=[];
/** Declaration Part Of Title Form Section */
myControl = new FormControl();
myControl2 = new FormControl();
myControl3 = new FormControl();
lenderData : any[];
cityData : any[];
constructor(private _dashboardService: DashboardService,
private _masterService: MastersService) {
/** To Display The City Data For City DropDown */
this._masterService.getAllCity().subscribe(
dataresult => {
if (dataresult.dataStatus == true) {
this.cityData = dataresult.records;
this.cityData = this.cityData.filter(city=>city.isactive == 1 );
}
});
/** To Display The Entities Data For Entities DropDown */
this._masterService.getAllMasterData('ENTITY').subscribe(
dataresult => {
if (dataresult.dataStatus == true) {
this.lenderData = dataresult.records;
this.lenderData = this.lenderData.filter(entity=>entity.isactive == 1 );
}
});
} }
// Doughnut
//name: "DoughnutTextInside"
ngOnInit(){ ngOnInit(){
this.getPDSubCardData(); this.getPDSubCardData();
this.getDoughnutChartData(); this.getDoughnutChartData();
let arr1 = this.doughnutChartLabels;
let arr2 = this.doughnutChartColors["0"].backgroundColor; const today = new Date();
//console.log(arr1.length); const fromMin = new Date(today.getFullYear(), today.getMonth()-2, 1);
//console.log(arr2.length); const fromMax = new Date(today.getFullYear(), today.getMonth()+1, 0);
if(arr1.length == arr2.length){ const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
for(let i=0;i<arr1.length;i++ ) const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);
{
this.legendArr[i] = {'labelcolor':arr2[i],'labelname':arr1[i] }; const resetRange = {fromDate: today, toDate: today};
this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
this.setupPresets();
this.options = {
presets: this.presets,
format: 'mediumDate',
range: {fromDate:today, toDate: today},
applyLabel: "Submit",
calendarOverlayConfig: {
shouldCloseOnBackdropClick: false,
hasBackdrop:false,
},
placeholder: "Date",
cancelLabel: "Cancel",
excludeWeekends:true,
fromMinMax: {fromDate:fromMin, toDate:fromMax},
toMinMax: {fromDate:toMin, toDate:toMax}
};
}
updateRange(range: Range){
this.range = range;
this.onChange(this.range,1);
} }
}
//console.log(this.legendArr);
}
setupPresets() {
// var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')); const backDate = (numOfDays) => {
const today = new Date();
return new Date(today.setDate(today.getDate() - numOfDays));
}
const today = new Date();
const yesterday = backDate(1);
const minus7 = backDate(7)
const minus30 = backDate(30);
const currMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
const currMonthEnd = new Date(today.getFullYear(), today.getMonth()+1, 0);
const lastMonthStart = new Date(today.getFullYear(), today.getMonth()-1, 1);
const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
this.presets = [
{presetLabel: "Yesterday", range:{ fromDate:yesterday, toDate:today }},
{presetLabel: "Last 7 Days", range:{ fromDate: minus7, toDate:today }},
{presetLabel: "Last 30 Days", range:{ fromDate: minus30, toDate:today }},
{presetLabel: "This Month", range:{ fromDate: currMonthStart, toDate:currMonthEnd }},
{presetLabel: "Last Month", range:{ fromDate: lastMonthStart, toDate:lastMonthEnd }}
]
}
/** /**
* To Get and Display PD Details As Per * To Get and Display PD Details As Per
@ -236,10 +280,17 @@ if(arr1.length == arr2.length){
**/ **/
getDoughnutChartData(){ getDoughnutChartData(){
this._dashboardService.getPDDetailForDoughnut().subscribe(data => { let fromdate = '' ;
let todate = '';
let cityarr = '';
let lenderarr = '';
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,cityarr,lenderarr).subscribe(data => {
this.flag = 1;
console.log(' ***** Doughnut Chart Data *****'); console.log(' ***** Doughnut Chart Data *****');
console.log('Whole Data',data); console.log('Whole Data',data);
console.log('Monthly Status',data.records.current_month);
let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft'); let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft');
let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered'); let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
@ -249,23 +300,7 @@ getDoughnutChartData(){
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'){ if(data.records.current_month.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('If Condition monthLY');
console.log('Monthly Status',data.records.current_month); console.log('Monthly Status',data.records.current_month);
@ -555,95 +590,6 @@ getDoughnutChartData(){
else{ else{
this.tempDataTelePD[QCCompletedIndexvalue] = 0; this.tempDataTelePD[QCCompletedIndexvalue] = 0;
} }
// y: number
//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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// 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);
// // }
// // else{
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
// // 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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
// 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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
// 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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
// 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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
// this.tempDataFullPD[Indexvalue] = 0;
// }
// //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);
// }
// else{
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
// this.tempDataFullPD[Indexvalue] = 0;
// //console.log('Final Data',tempDataFullPD);
// }
// //console.log('inside',this.tempDataFullPD);
// }
//this.doughnutChartDataForFullPD = [3,4,5,6,7,8];
} }
else{ else{
@ -659,11 +605,12 @@ getDoughnutChartData(){
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('total3',this.total3);
console.log('total2',this.total2);
console.log('total1',this.total1);
//console.log(this.tempDataTelePD.__proto__); //console.log(this.tempDataTelePD.__proto__);
//console.log(this.tempDataTelePD._chartjs); //console.log(this.tempDataTelePD._chartjs);
//console.log(this.doughnutChartDataForTelePD['event'].listeners["0"].chart.boxes["0"].legendItems); //console.log(this.doughnutChartDataForTelePD['event'].listeners["0"].chart.boxes["0"].legendItems);
//chart.chart.ctx; //chart.chart.ctx;
/*beforeDraw: function (this.doughnutChartDataForTelePD.chart) { /*beforeDraw: function (this.doughnutChartDataForTelePD.chart) {
@ -715,124 +662,441 @@ getDoughnutChartData(){
// }]; // }];
// }, 100); // }, 100);
doughnutOptionsFullPD: any = Object.assign({ doughnutOptions: any = Object.assign({
elements: { elements: {
arc: { arc: {
borderWidth: 0.2 borderWidth: 0
} }
}, },
title: { // title: {
display: true, // display: true,
position: "top", // position: "top",
text: 'Full', // text: 'Full',
fontSize: 15, // fontSize: 15,
},
centertext:'One' centertext:'One'
},this.globalChartOptions); },this.globalChartOptions);
doughnutOptionsSmartPD: any = Object.assign({ onChange(e :any,flag: any) {
elements: { let fromdate;
arc: { let todate;
borderWidth: 0.2 console.log('flag',flag);
if(flag == 1){
fromdate = new Date(e.fromDate);
todate = new Date(e.toDate);
} }
},
title: {
display: true,
position: "top",
text: 'Smart',
fontSize: 15
},
centertext:'Two'
},
this.globalChartOptions);
doughnutOptionsTelePD: any = Object.assign({ if(flag == 2){
elements: { // if(e.source._selected == true ){
arc: { // let data = e.source.value.city_id;
borderWidth: 0.2 // 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;
e.source._selected == true ? this.selectedCity.push(data)
: this.selectedCity.splice(this.selectedCity.indexOf(data),1);
console.log(this.selectedCity);
} }
},
title: { if(flag == 3){
display: true, let data = e.source.value.entity_id;
position: "top", e.source._selected == true ? this.selectedLender.push(data)
text: 'Tele', : this.selectedLender.splice(this.selectedLender.indexOf(data),1);
fontSize: 15
}, console.log(this.selectedLender);
centertext:'Three'
}, this.globalChartOptions);
// Chart.pluginService.register({ }
// beforeDraw: function(chart) {
// var width = chart.chart.width,
// height = chart.chart.height,
// ctx = chart.chart.ctx;
// ctx.restore(); // this._dashboardService.get2(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(
// var fontSize = (height / 114).toFixed(2);
// ctx.font = fontSize + "em sans-serif";
// ctx.textBaseline = "middle";
// var text = "75%", // dataresult=>{
// textX = Math.round((width - ctx.measureText(text).width) / 2),
// textY = height / 2;
// ctx.fillText(text, textX, textY); // });
// ctx.save();
// } this._dashboardService.getPDDetailForDoughnut(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(data => {
// });
console.log(' *****Updated Date Doughnut Chart Data *****');
console.log('Whole Data',data);
if(data.records.current_month.length != 0){
this.total1 = 0;
this.total2 = 0;
this.total3 = 0;
}
this.doughnutChartDataForFullPD = [];
this.doughnutChartDataForSmartPD = [];
this.doughnutChartDataForTelePD = [];
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_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');
if(TriggerFullPDvalue.length != '0'){
//console.log('console triggered value',TriggerFullPDvalue);
for(let FPD of TriggerFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[TriggedIndexvalue] = y;
}
}
else{
this.tempDataFullPD[TriggedIndexvalue] = 0;
}
let AllocatedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
if(AllocatedFullPDvalue.length != '0'){
for(let FPD of AllocatedFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[AllocatedIndexvalue] = y;
}
}
else{
this.tempDataFullPD[AllocatedIndexvalue] = 0;
}
let ScheduledFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
if(ScheduledFullPDvalue.length != '0'){
for(let FPD of ScheduledFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[ScheduledIndexvalue] = y;
}
//let y = +ScheduledFullPDvalue.count;
}
else{
this.tempDataFullPD[ScheduledIndexvalue] = 0;
}
let InProgressFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
if(InProgressFullPDvalue.length != '0'){
for(let FPD of InProgressFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[InProgressIndexvalue] = y;
}
//let y = +InProgressFullPDvalue.count;
}
else{
this.tempDataFullPD[InProgressIndexvalue] = 0;
}
let CompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
if(CompletedFullPDvalue.length != '0'){
for(let FPD of CompletedFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[CompletedIndexvalue] = y;
}
//let y = +CompletedFullPDvalue.count;
}
else{
this.tempDataFullPD[CompletedIndexvalue] = 0;
}
let QCCompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
if(QCCompletedFullPDvalue.length != '0'){
for(let FPD of QCCompletedFullPDvalue){
let y = +FPD.count;
this.total1 = this.total1+y;
this.tempDataFullPD[QCCompletedIndexvalue] = y;
}
//let y = +QCCompletedFullPDvalue.count;
}
else{
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');
if(TriggerSmartPDvalue.length != '0'){
for(let FPD of TriggerSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[TriggedIndexvalue] = y;
}
}
else{
this.tempDataSmartPD[TriggedIndexvalue] = 0;
}
let AllocatedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
if(AllocatedSmartPDvalue.length != '0'){
for(let FPD of AllocatedSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[AllocatedIndexvalue] = y;
}
}
else{
this.tempDataSmartPD[AllocatedIndexvalue] = 0;
}
let ScheduledSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
if(ScheduledSmartPDvalue.length != '0'){
for(let FPD of ScheduledSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[ScheduledIndexvalue] = y;
}
//let y = +ScheduledFullPDvalue.count;
}
else{
this.tempDataSmartPD[ScheduledIndexvalue] = 0;
}
let InProgressSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
if(InProgressSmartPDvalue.length != '0'){
for(let FPD of InProgressSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[InProgressIndexvalue] = y;
}
//let y = +InProgressFullPDvalue.count;
}
else{
this.tempDataSmartPD[InProgressIndexvalue] = 0;
}
let CompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
if(CompletedSmartPDvalue.length != '0'){
for(let FPD of CompletedSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[CompletedIndexvalue] = y;
}
//let y = +CompletedFullPDvalue.count;
}
else{
this.tempDataSmartPD[CompletedIndexvalue] = 0;
}
let QCCompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
if(QCCompletedSmartPDvalue.length != '0'){
for(let FPD of QCCompletedSmartPDvalue){
let y = +FPD.count;
this.total2 = this.total2+y;
this.tempDataSmartPD[QCCompletedIndexvalue] = y;
}
//let y = +QCCompletedFullPDvalue.count;
}
else{
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;
}
}
else{
this.tempDataTelePD[TriggedIndexvalue] = 0;
}
let AllocatedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
if(AllocatedTelePDvalue.length != '0'){
for(let FPD of AllocatedTelePDvalue){
let y = +FPD.count;
this.total3 = this.total3+y;
this.tempDataTelePD[AllocatedIndexvalue] = y;
}
}
else{
this.tempDataTelePD[AllocatedIndexvalue] = 0;
}
let ScheduledTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
if(ScheduledTelePDvalue.length != '0'){
for(let FPD of ScheduledTelePDvalue){
let y = +FPD.count;
this.total3 = this.total3+y;
this.tempDataTelePD[ScheduledIndexvalue] = y;
}
//let y = +ScheduledFullPDvalue.count;
}
else{
this.tempDataTelePD[ScheduledIndexvalue] = 0;
}
let InProgressTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
if(InProgressTelePDvalue.length != '0'){
for(let FPD of InProgressTelePDvalue){
let y = +FPD.count;
this.total3 = this.total3+y;
this.tempDataTelePD[InProgressIndexvalue] = y;
}
//let y = +InProgressFullPDvalue.count;
}
else{
this.tempDataTelePD[InProgressIndexvalue] = 0;
}
let CompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'COMPLETED');
if(CompletedTelePDvalue.length != '0'){
for(let FPD of CompletedTelePDvalue){
let y = +FPD.count;
this.total3 = this.total3+y;
this.tempDataTelePD[CompletedIndexvalue] = y;
}
//let y = +CompletedFullPDvalue.count;
}
else{
this.tempDataTelePD[CompletedIndexvalue] = 0;
}
let QCCompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
if(QCCompletedTelePDvalue.length != '0'){
for(let FPD of QCCompletedTelePDvalue){
let y = +FPD.count;
this.total3 = this.total3+y;
this.tempDataTelePD[QCCompletedIndexvalue] = y;
}
//let y = +QCCompletedFullPDvalue.count;
}
else{
this.tempDataTelePD[QCCompletedIndexvalue] = 0;
}
}
else{
//console.log('Else Condition month');
}
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('Final Smart Data Completed',this.doughnutChartDataForSmartPD);
console.log('temp Smart Data',this.tempDataSmartPD);
console.log('Final Tele Data Completed',this.doughnutChartDataForTelePD);
console.log('temp Tele Data',this.tempDataTelePD);
console.log('total3',this.total3);
console.log('total2',this.total2);
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);
}
}*/
})
} }
}
// 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();
// }
// }

31
ng6-seed/src/app/dashboard/dashboard.module.ts
View File

@ -1,7 +1,23 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule,MatTabsModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
import { MatIconModule,
MatCardModule,
MatTabsModule,
MatButtonModule,
MatListModule,
MatProgressBarModule,
MatMenuModule,
MatAutocompleteModule,
MatInputModule,
MatSelectModule} from '@angular/material';
// import {
// MatRadioModule,
// MatToolbarModule,MatCheckboxModule,
// MatTableModule,MatPaginatorModule,MatSortModule} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { ChartsModule } from 'ng2-charts/ng2-charts'; import { ChartsModule } from 'ng2-charts/ng2-charts';
@ -13,10 +29,15 @@ import { DashboardRoutes } from './dashboard.routing';
/** Dashboard Service */ /** Dashboard Service */
import { DashboardService } from './dashboard.service'; import { DashboardService } from './dashboard.service';
import { MastersService } from '../settings/service/masters/masters.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxMatDrpModule } from 'ngx-mat-daterange-picker';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, ReactiveFormsModule,
RouterModule.forChild(DashboardRoutes), RouterModule.forChild(DashboardRoutes),
MatIconModule, MatIconModule,
MatCardModule, MatCardModule,
@ -25,12 +46,16 @@ import { DashboardService } from './dashboard.service';
MatListModule, MatListModule,
MatProgressBarModule, MatProgressBarModule,
MatMenuModule, MatMenuModule,
MatInputModule,
MatSelectModule,
ChartsModule, ChartsModule,
NgxChartsModule, NgxChartsModule,
NgxDatatableModule, NgxDatatableModule,
FlexLayoutModule MatAutocompleteModule,
NgxMatDrpModule,
FlexLayoutModule,
], ],
providers: [ DashboardService ], providers: [ DashboardService,MastersService ],
declarations: [ DashboardComponent ] declarations: [ DashboardComponent ]
}) })

37
ng6-seed/src/app/dashboard/dashboard.service.ts
View File

@ -21,7 +21,7 @@ const currentdate = new Date().toJSON().slice(0,19).replace('T',' ');
export class DashboardService { export class DashboardService {
private apiUrl = environment.apiEndpoint; private apiUrl = environment.apiEndpoint;
//private apiUrl = 'http://localhost/sparqapi/api/';
constructor(private _http: HttpClient, constructor(private _http: HttpClient,
private _aws:AwsService) { } private _aws:AwsService) { }
@ -44,13 +44,26 @@ export class DashboardService {
/** /**
* TO get PD Datas For Dashboard Screen * TO get PD Datas For Dashboard Screen
*/ */
getPDDetailForDoughnut(): Observable<any> { // getPDDetailForDoughnut(): Observable<any> {
return this._http.get(this.apiUrl+'getDashBoardMaster') // return this._http.get(this.apiUrl+'getDashBoardMaster')
.pipe( // .pipe(
catchError(this.handleError('role', [])) // catchError(this.handleError('role', []))
// )
// }
getPDDetailForDoughnut(fromdate,todate,cityarr,lenderarr): Observable<any> {
return this._http.post(this.apiUrl+'getDashBoardMaster', {
"fromdate":fromdate,
"todate": todate,
"cityarr":cityarr,
"lenderarr": lenderarr})
.pipe(catchError(this.handleError('role', []))
) )
} }
getLenderDetail(): Observable<any> { getLenderDetail(): Observable<any> {
return this._http.get(this.apiUrl+'getDashBoardLenderCity') return this._http.get(this.apiUrl+'getDashBoardLenderCity')
@ -76,6 +89,18 @@ getLenderDetail(): Observable<any> {
} }
get2(fromdate,todate,cityarr,lenderarr): Observable<any> {
return this._http.post(this.apiUrl+'getDashBoardMaster', {
"fromdate":fromdate,
"todate": todate,
"cityarr":cityarr,
"lenderarr": lenderarr})
.pipe(catchError(this.handleError('role', []))
)
}
/** /**
* TO Handle The Error * TO Handle The Error
*/ */

33
ng6-seed/src/app/layouts/admin/admin-layout.component.html
View File

@ -254,7 +254,7 @@
</mat-menu> --> </mat-menu> -->
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible"> <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
<mat-icon>notifications</mat-icon> <mat-icon>notifications</mat-icon>
<span class="notification-label">2</span> <span *ngIf="alertCount != 0" style = "width:23px" class="notification-label" >{{alertCount}}</span>
</button> </button>
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs"> <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
<mat-icon>person</mat-icon> <mat-icon>person</mat-icon>
@ -313,9 +313,25 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false"> <mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
<div style="text-align: center;">Not Yet Scheduled</div>
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs> <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
<mat-tab> <mat-tab>
<ng-template mat-tab-label>Triggered</ng-template>
<div class="scroll">
<mat-nav-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgTriggerType">
<mat-list-item>
<h3 mat-line> {{item.applicant_name}} </h3>
<p mat-line> {{item.lender_applicant_id}}</p>
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
</mat-list-item>
</ng-template>
</mat-nav-list>
</div>
</mat-tab>
<!--<mat-tab>
<ng-template mat-tab-label>Today</ng-template> <ng-template mat-tab-label>Today</ng-template>
<ng-template mat-tab-label>Allocated</ng-template>
<div class="scroll"> <div class="scroll">
<mat-list class="pt-1 pb-1"> <mat-list class="pt-1 pb-1">
<mat-list-item> <mat-list-item>
@ -356,11 +372,20 @@
</mat-list-item> </mat-list-item>
</mat-nav-list> </mat-nav-list>
</div> </div>
</mat-tab> </mat-tab>-->
<mat-tab> <mat-tab>
<ng-template mat-tab-label>Notifications</ng-template> <ng-template mat-tab-label>Allocated</ng-template>
<div class="scroll"> <div class="scroll">
<mat-nav-list> <mat-nav-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgAllocateType">
<mat-list-item>
<h3 mat-line> {{item.applicant_name}} </h3>
<p mat-line> {{item.lender_applicant_id}}</p>
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
</mat-list-item>
</ng-template>
</mat-nav-list>
<!-- <mat-nav-list>
<mat-list-item> <mat-list-item>
<mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon> <mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
<h4 mat-line>Social</h4> <h4 mat-line>Social</h4>
@ -392,7 +417,7 @@
<h4 mat-line>4 Users connected</h4> <h4 mat-line>4 Users connected</h4>
<span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span> <span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
</mat-list-item> </mat-list-item>
</mat-nav-list> </mat-nav-list> -->
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>

25
ng6-seed/src/app/layouts/admin/admin-layout.component.ts
View File

@ -10,7 +10,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
import { PerfectScrollbarConfigInterface, import { PerfectScrollbarConfigInterface,
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar'; PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { UserService } from '../../settings/service/user.service'; import { UserService } from '../../settings/service/user.service';
import { DashboardService } from '../../dashboard/dashboard.service';
import { AwsService } from '../../AwsService/aws.service'; import { AwsService } from '../../AwsService/aws.service';
@Component({ @Component({
@ -44,7 +44,12 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
@ViewChild('sidemenu') sidemenu; @ViewChild('sidemenu') sidemenu;
public config: PerfectScrollbarConfigInterface = {}; public config: PerfectScrollbarConfigInterface = {};
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService ) {
alertMsgTriggerType : any[];
alertMsgAllocateType : any[];
alertCount: any;
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService) {
const browserLang: string = translate.getBrowserLang(); const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en'); translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
this.users.getroles().subscribe(res=>{ this.users.getroles().subscribe(res=>{
@ -78,6 +83,22 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
} }
}); });
/** 3) Getting PD Details For Alert Message */
this._dashboardService.getAlertDetail().subscribe(data => {
console.log(' *****Layout Alert Message *****');
console.log('Layout Alert Message Whole Data',data);
this.alertCount = data.records.length;
this.alertMsgTriggerType = data.records.filter(trigger=>trigger.pd_status == "TRIGGERED" );
this.alertMsgAllocateType = data.records.filter(allocate=>allocate.pd_status == "ALLOCATED" );
console.log('Layout Alert Message',this.alertMsgTriggerType);
console.log('Layout Alert Message',this.alertMsgAllocateType);
console.log('Layout Alert Count',this.alertCount);
});
} }
ngOnInit(): void { ngOnInit(): void {

6
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
View File

@ -72,13 +72,13 @@
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant"> <mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
<mat-list *ngFor="let applicant of pdApplicantData"> <mat-list *ngFor="let applicant of pdApplicantData">
<mat-list-item> <mat-list-item style="height:68px !important;">
<p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon"> <p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o"></i> <i class="fa-1x fa fa-user-o"></i>
&nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon"> &nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone"></i> <i class="fa-1x fa fa-phone"></i>
&nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant <br></span> &nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant </span>
<ng-template #codetails>&nbsp;&nbsp;&nbsp;<span>{{applicant.relation_name}}</span></ng-template> <ng-template #codetails><span>{{applicant.relation_name}}</span></ng-template>
</p> </p>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>

17
ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
View File

@ -61,33 +61,22 @@
<mat-card-header> <mat-card-header>
<mat-card-title>Applicants</mat-card-title> <mat-card-title>Applicants</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant"> <mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
<mat-list *ngFor="let applicant of pdApplicantData"> <mat-list *ngFor="let applicant of pdApplicantData">
<mat-list-item> <mat-list-item style="height:68px !important;">
<p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon"> <p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o"></i> <i class="fa-1x fa fa-user-o"></i>
&nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon"> &nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone"></i> <i class="fa-1x fa fa-phone"></i>
&nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant<br></span> &nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant</span>
<ng-template #codetails>&nbsp;&nbsp;&nbsp;<span>{{applicant.relation_name}}</span></ng-template> <ng-template #codetails><span>{{applicant.relation_name}}</span></ng-template>
</p> </p>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</mat-card-content> </mat-card-content>
<ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template> <ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template>
</mat-card> </mat-card>
</div> </div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<!-- pd documents card --> <!-- pd documents card -->
<mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument"> <mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">