From 7c8f3c7d7dd888d7685bb7403f98847dc10a8340 Mon Sep 17 00:00:00 2001 From: "venbatechnologies@gmail.com" Date: Wed, 14 Nov 2018 13:35:50 +0530 Subject: [PATCH 1/2] Dashboard changes and length issues fixes : ps --- .../app/dashboard/dashboard.component.html | 40 +- .../app/dashboard/dashboard.component.scss | 54 +- .../src/app/dashboard/dashboard.component.ts | 649 ++++++++++++------ .../src/app/dashboard/dashboard.service.ts | 5 +- 4 files changed, 538 insertions(+), 210 deletions(-) diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html index 4f840d978..804de166b 100644 --- a/ng6-seed/src/app/dashboard/dashboard.component.html +++ b/ng6-seed/src/app/dashboard/dashboard.component.html @@ -17,35 +17,51 @@ {{doughnutChartDataForTelePD.length}} -->
-
Full - {{total1}}
- - - -
+ + + +
{{total1}}
+
-
Smart - {{total2}}
+ +
{{total2}}
-
Tele - {{total3}}
+ +
{{total3}}
+
+
    +
  • Draft
    • +
  • Triggered
    • +
  • Allocated
    • +
  • Scheduled
    • +
  • InProgress
    • +
  • Completed
    • +
  • QC Completed
    • +
+
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.scss b/ng6-seed/src/app/dashboard/dashboard.component.scss index fc7f8f15d..82b9bed74 100644 --- a/ng6-seed/src/app/dashboard/dashboard.component.scss +++ b/ng6-seed/src/app/dashboard/dashboard.component.scss @@ -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; -} \ No newline at end of file +//.chart{ + // padding: 2rem; +//} \ No newline at end of file diff --git a/ng6-seed/src/app/dashboard/dashboard.component.ts b/ng6-seed/src/app/dashboard/dashboard.component.ts index cd1d19cb3..d60b96ba4 100644 --- a/ng6-seed/src/app/dashboard/dashboard.component.ts +++ b/ng6-seed/src/app/dashboard/dashboard.component.ts @@ -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 { - //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; } -} \ No newline at end of file + +// 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(); +// } +// } \ No newline at end of file diff --git a/ng6-seed/src/app/dashboard/dashboard.service.ts b/ng6-seed/src/app/dashboard/dashboard.service.ts index e87616fad..56514a881 100644 --- a/ng6-seed/src/app/dashboard/dashboard.service.ts +++ b/ng6-seed/src/app/dashboard/dashboard.service.ts @@ -14,7 +14,10 @@ import { environment } from 'environments/environment'; /** Consant Value For Created Date And Updated Date */ const currentdate = new Date().toJSON().slice(0,19).replace('T',' '); -@Injectable() + +@Injectable({ + providedIn: 'root' +}) export class DashboardService { From 6615eb14989cd5f09852613079e54aaf91db7e83 Mon Sep 17 00:00:00 2001 From: "venbatechnologies@gmail.com" Date: Wed, 14 Nov 2018 14:15:10 +0530 Subject: [PATCH 2/2] Dashboard : ps --- ng6-seed/src/app/dashboard/dashboard.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html index 804de166b..a0dbdb0f7 100644 --- a/ng6-seed/src/app/dashboard/dashboard.component.html +++ b/ng6-seed/src/app/dashboard/dashboard.component.html @@ -113,7 +113,7 @@ Alert warning - + @@ -138,7 +138,7 @@ - + @@ -164,7 +164,7 @@ - +

{{item.city_name}}