diff options
14 files changed, 385 insertions, 20 deletions
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/package.json b/ecomp-sdk/epsdk-app-os/ngappsrc/package.json index e36e8ae4..e60a8845 100644 --- a/ecomp-sdk/epsdk-app-os/ngappsrc/package.json +++ b/ecomp-sdk/epsdk-app-os/ngappsrc/package.json @@ -65,7 +65,8 @@ "sonar-scanner": "^3.1.0", "tslib": "^1.9.0", "web-animations-js": "^2.3.2", - "zone.js": "~0.8.26" + "zone.js": "~0.8.26", + "ng2-charts": "2.2.3" }, "devDependencies": { "@angular-devkit/build-angular": "^0.10.0", diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts index 4b7a7811..15675360 100644 --- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts +++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts @@ -45,7 +45,7 @@ import {Chart} from 'chart.js'; styleUrls: ['./bar-chart.component.scss'] }) export class BarChartComponent implements OnInit { - fixesEnhancementBarChart = []; + fixesEnhancementBarChart:any; constructor() { } ngOnInit() { diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts index 356c85a6..8ed114e6 100644 --- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts +++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts @@ -46,7 +46,7 @@ import {Chart} from 'chart.js'; }) export class PieChartComponent implements OnInit { - userFeedbackRootCausePieChart = []; + userFeedbackRootCausePieChart :any; constructor() { } ngOnInit() { diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html index 4440b9e5..c4bc61e1 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html @@ -57,10 +57,11 @@ <mat-option value="PieChart">Pie Chart</mat-option> <mat-option value="AnnotationChart">Annotation Chart</mat-option> <mat-option value="FlexTimeChart">Flexible Time Chart</mat-option> + <mat-option value="StackedCoulmnChart" (onSelectionChange)="setStackedCoulmnChartOptions()">Stacked Coulmn Chart</mat-option> </mat-select> </mat-form-field> <br/> - <mat-form-field> + <mat-form-field *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <mat-label class="lable">Domain Axis</mat-label> <mat-select [(ngModel)]="chartJson.domainAxisJSON.value" aria-label="domain axis"> <mat-option *ngFor="let d of chartJson.chartColumnJSONList" @@ -68,7 +69,7 @@ </mat-select> </mat-form-field> <br/> - <mat-form-field> + <mat-form-field *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <mat-label class="lable">Category</mat-label> <mat-select [(ngModel)]="chartJson.categoryAxis" aria-label="category axis"> <mat-option>None</mat-option> @@ -78,7 +79,7 @@ </mat-form-field> </div> - <div id="RangeTable"> + <div id="RangeTable" *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <table> <thead> <tr> @@ -141,7 +142,7 @@ <br/> <div class="form-group"> <mat-accordion> - <mat-expansion-panel> + <mat-expansion-panel *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <mat-expansion-panel-header> <mat-panel-title> Additional Options @@ -197,7 +198,7 @@ </mat-expansion-panel> <br/> - <mat-expansion-panel> + <mat-expansion-panel *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <mat-expansion-panel-header> <mat-panel-title> Common Options @@ -302,7 +303,7 @@ Set Bar chart Options </mat-panel-description> </mat-expansion-panel-header> - <div> + <div *ngIf="chartJson.chartType !=='StackedCoulmnChart'"> <table> <thead> <tr> @@ -437,6 +438,40 @@ </table> </div> </mat-expansion-panel> + <mat-expansion-panel *ngIf="chartJson.chartType =='StackedCoulmnChart'"> + <mat-expansion-panel-header> + <mat-panel-description> + Set Stacked Column Chart Option + </mat-panel-description> + </mat-expansion-panel-header> + <div class="field-group"> + <mat-form-field> + <mat-label class="lable">Set Column For X Axis</mat-label> + <mat-select [(ngModel)]="chartJson.domainAxisJSON.value" aria-label="domain axis"> + <mat-option *ngFor="let d of chartJson.chartColumnJSONList" + value="{{d.value}}">{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + <br/> + <mat-form-field> + <mat-label class="lable">Set Column For Y Axis</mat-label> + <mat-select [(ngModel)]="chartJson.categoryAxis" aria-label="category axis"> + <mat-option>None</mat-option> + <mat-option *ngFor="let d of chartJson.chartColumnJSONList" + value="{{d.value}}">{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + <br/> + <mat-form-field> + <mat-label class="lable">Set Column For Count</mat-label> + <mat-select [(ngModel)]="chartJson.primaryAxisLabel" aria-label="count"> + <mat-option>None</mat-option> + <mat-option *ngFor="let d of chartJson.chartColumnJSONList" + value="{{d.value}}">{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + </div> + </mat-expansion-panel> </mat-accordion> </div> <br/> diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.ts index 2d9a52c0..294efcb7 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.ts @@ -174,5 +174,18 @@ export class ChartWizardComponent implements OnInit { }; } + setStackedCoulmnChartOptions() { + console.log("Seeting up Stacked Column Charts"); + this.chartJson.stackedCoulmnChartOptions = this.chartJson.stackedCoulmnChartOptions || { + lineChartRenderer: null, + showXAxisLabel: null, + addXAxisTicker: null, + nonTimeAxis: null, + multiSeries: null + }; + console.log("StackedCoulmnChart chartJson:: ",this.chartJson); + } + + } diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.css index bf51ea3a..95ef60d0 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.css +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.css @@ -64,11 +64,11 @@ input { border-radius: 6px; color: #5a5a5a; display: inline-block; - font-size: 1.6rem; + /*font-size: 1.6rem;*/ margin: 0px; /* padding: 0 15px 0 15px; */ vertical-align: middle; - line-height: normal; + /* line-height: normal; */ } .btns { diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.service.ts index 88d1c84f..2ae8f07f 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.service.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.service.ts @@ -15,6 +15,6 @@ export class ReportListService { return this._http.get(environment.baseUrl + "raptor.htm?action=report.delete&c_master=" + reportId); } getAllReports():Observable<any>{ - return this._http.get(environment.baseUrl + "raptor.htm?action=report.search.execute&r_page=0"); + return this._http.get(environment.baseUrl + "raptor.htm?action=report.search.execute&r_page=0&show_all=true"); } } diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts index 77e05dce..7bb16145 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts @@ -27,6 +27,8 @@ import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap'; import { RemoveSpaceDirective} from './run/run-report-form-fields/remove-space.directive'; import { RunCrossTabReportComponent } from './run/run-report/run-cross-tab-report/run-cross-tab-report.component'; import { DisplayAreaComponent } from '../pages/analytics/Report_List/display-area/display-area.component'; +import { RunStackedColumnReportComponent } from './run/run-report/run-stacked-column-report/run-stacked-column-report.component'; +import { ChartsModule } from 'ng2-charts'; @NgModule({ declarations: [RunDashboardReportComponent, @@ -37,7 +39,8 @@ import { DisplayAreaComponent } from '../pages/analytics/Report_List/display-are RunComponent, RemoveSpaceDirective, RunCrossTabReportComponent, - DisplayAreaComponent], + DisplayAreaComponent, + RunStackedColumnReportComponent], imports: [ MatTableModule, CommonModule, @@ -56,7 +59,8 @@ import { DisplayAreaComponent } from '../pages/analytics/Report_List/display-are MatInputModule, ReportRunRouting, MatSortModule, - NgbTooltipModule + NgbTooltipModule, + ChartsModule ], exports: [RunReportComponent, RunComponent, RunReportFormFieldsComponent] }) diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html index ea413efc..afd105d1 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html @@ -324,6 +324,16 @@ <div *ngIf="navigateToRun"> <!-- <app-run-dashboard-report [reportId]="reportId" [reportMode]="reportMode" [queryString]="getQueryString()" [DashboardReportObj]="DashboardReportObj"></app-run-dashboard-report> --> + <div *ngIf="chartType === 'StackedCoulmnChart'"> + <app-run-stacked-column-report + [reportId]="reportId" + [chartType]="chartType" + [reportMode]="reportMode" + [reportType]="reportType" + [groupSelectValue]="groupSelectValue" + [queryString]="getQueryString()"> + </app-run-stacked-column-report> + </div> <div *ngIf="reportType !== 'Cross-Tab'"> <div *ngIf="reportHeader !== ''"> <div [innerHtml]="reportHeader" style="width: 60%; padding-left: 20%;"> @@ -331,14 +341,14 @@ <br/> <br/> </div> - <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr" + <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr" [chartType]="chartType" [groupSelectValue]="groupSelectValue" [hitCnt]="hitCnt" [isGoBack]="downloadPrevReport" [queryString]="getQueryString()" [reportId]="reportId" [reportMode]="reportMode" [reportType]="reportType" - [runAgain]="runReportAgain"></app-run-report> - <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;"></div> - + [runAgain]="runReportAgain"> + </app-run-report> + <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;"></div> </div> <div *ngIf="reportType === 'Cross-Tab'"> <div *ngIf="reportHeader !== ''"> diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts index aa36178f..6dfa64a2 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts @@ -404,8 +404,10 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges { } if (response['chartWizardAvailable'] === true && this.chartType !== 'none') { - this.isChartAvailable = true; - this.iframe.nativeElement.setAttribute('src', this.chartRunUrl); + if(this.chartType !=='StackedCoulmnChart'){ + this.isChartAvailable = true; + this.iframe.nativeElement.setAttribute('src', this.chartRunUrl); + } } let totalCnt = 0; diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.html new file mode 100644 index 00000000..ba7bc281 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.html @@ -0,0 +1,10 @@ +<div class="stacked-chart-container"> + <canvas baseChart + [datasets]="barChartData" + [labels]="barChartLabels" + [options]="barChartOptions" + [plugins]="barChartPlugins" + [legend]="barChartLegend" + [chartType]="barChartType"> + </canvas> +</div> diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.scss new file mode 100644 index 00000000..98769533 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.scss @@ -0,0 +1,12 @@ +p { + font-family: Lato; +} + +.stacked-chart-container{ + position: relative; + height: 75vh; + width: 62vw; + margin-left: 0em; + margin-top: 1em; + cursor: pointer; +}
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.spec.ts new file mode 100644 index 00000000..a2d9eada --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RunStackedColumnReportComponent } from './run-stacked-column-report.component'; + +describe('RunStackedColumnReportComponent', () => { + let component: RunStackedColumnReportComponent; + let fixture: ComponentFixture<RunStackedColumnReportComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RunStackedColumnReportComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RunStackedColumnReportComponent); + component = fixture.componentInstance; + //fixture.detectChanges(); + }); + + //it('should create', () => { + // expect(component).toBeTruthy(); + //}); +}); diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.ts new file mode 100644 index 00000000..ac6001c7 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.ts @@ -0,0 +1,253 @@ +import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; +import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; +import { Label } from 'ng2-charts'; +import { RunService } from '../../run.service'; +import {environment} from '../../../../../../src/environments/environment' +import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap'; +import { ErrorModalComponent } from 'src/app/modals/error-modal/error-modal.component'; +import { HttpCacheService } from 'src/app/shared/services/cache.service'; +import { Router } from '@angular/router'; +import { ChartWizard } from 'src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.service'; + +@Component({ + selector: 'app-run-stacked-column-report', + templateUrl: './run-stacked-column-report.component.html', + styleUrls: ['./run-stacked-column-report.component.scss'] +}) +export class RunStackedColumnReportComponent implements OnInit { + + @Input('reportId') inputReportId: string; + @Input('reportMode') reportMode: string; + @Input('reportType') reportType: string; + @Input('chartType') chartType: string; + @Input('queryString') queryString: string; + @Input('groupSelectValue') groupSelectValue: string; + + showSpinner: boolean; + chartRunUrl: string; + environment:any; + modalOptions: NgbModalOptions; + isChartAvailable = false; + displayedColumnsArr: string[]; + hideChart = false; + displayOptions: {}[]; + chartJson: any; + xAxisDataColumn: any; + yAxisDataColumn: any; + countCoulumn: any; + + constructor(private _runService: RunService, + private changeDetectorRefs: ChangeDetectorRef, + public ngbModal: NgbModal, + private httpCacheService: HttpCacheService, + private _router: Router, + private chartService: ChartWizard + + ){ + this.environment = environment; + this.modalOptions = { + backdrop: 'static', + keyboard: false, + size: 'lg' + }; + } + + public barChartOptions: ChartOptions = { + responsive: true, + scales: { + yAxes: [ + { + display: true, + scaleLabel: { + display: true, + labelString: "Counts", + }, + }, + ], + xAxes: [ + { + scaleLabel: { + display: true, + labelString: "Months", + }, + }, + ], + }, + }; + + public barChartType: ChartType = 'bar'; + public barChartLegend = true; + public barChartPlugins = []; + + public barChartLabels: Label[] = []; + public barChartData: ChartDataSets[] = [{ data: [], label: '', stack: 'a' }]; + // public barChartData: ChartDataSets[] = [ + // { data: [65, 59, 80, 81, 56, 55, 40], label: 'ECOMP Portal', stack: 'a' }, + // { data: [28, 48, 40, 19, 86, 27, 90], label: 'VID', stack: 'a' }, + // { data: [28, 48, 40, 19, 86, 27, 90], label: 'SGNGC', stack: 'a' }, + // { data: [28, 48, 40, 19, 86, 27, 90], label: 'SDNGP', stack: 'a' }, + // { data: [28, 48, 40, 19, 86, 27, 90], label: 'ALTS DATA Browser', stack: 'a' }, + // { data: [50, 48, 100, 19, 86, 27, 90], label: 'ALTS UI', stack: 'a' } + // ]; + + ngOnInit() { + console.log("inputReportId iniside stacked Column Chart>>>> ",this.inputReportId); + console.log("reportMode iniside stacked Column Chart>>>> ",this.reportMode); + console.log("reportType iniside stacked Column Chart>>>> ",this.reportType); + console.log("barChartData initial>>>> ",this.barChartData); + this.chartService.getReportTypeData(this.inputReportId).subscribe( + (respone) => { + this.displayOptions = respone['displayOptions']; + for (let dpOption = 0 ; dpOption < this.displayOptions.length ; dpOption++) { + if (this.displayOptions[dpOption]['name'] === 'HideChart') { + this.hideChart = this.displayOptions[dpOption]['selected']; + } + } + }); + + if (!this.hideChart) { + this.chartService.getChartData(this.inputReportId).subscribe( + (response) => { + this.chartJson = response; + this.xAxisDataColumn = this.chartJson['domainAxis']; + this.yAxisDataColumn = this.chartJson['categoryAxis']; + this.countCoulumn = this.chartJson['primaryAxisLabel']; + console.log("chartJson xAxisDataColumn::",this.chartJson['domainAxis']); + console.log("chartJson yAxisDataColumn::",this.chartJson['categoryAxis']); + console.log("chartJson primaryAxisLabel::",this.chartJson['primaryAxisLabel']); + + }); + } + + this.getSqlQueryResponse(); + } + + getSqlQueryResponse(){ + this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue) + .subscribe((response) => { + console.log("response>>>>>inside stacked column",response); + + if(response && response.reportDataRows && response.reportDataRows.length >0){ + this.postFetchingReportDataFn(response); + } + + if (response['errormessage']) { + this.openErrorModel(response['errormessage']); + this.showError(); + this.changeDetectorRefs.detectChanges(); + } else { + // + } + }, error => { + this.openErrorModel('Error occurred while running report: ' + this.inputReportId); + this.showError(); + }); + } + + postFetchingReportDataFn(response: any) { + let app_usage_count_map = new Map(); + this.displayedColumnsArr = []; + let rdr_cntr = 0; + let monthArr = []; + let counter = 0; + while (response['reportDataRows'][counter]) { + const reportDataRows = response['reportDataRows'][counter]; + let monthOfYear = ''; + monthOfYear = reportDataRows[this.xAxisDataColumn]['displayValue']; + monthArr.push(Number(monthOfYear)); + counter++; + } + while (response['reportDataRows'][rdr_cntr]) { + const reportDataRows = response['reportDataRows'][rdr_cntr]; + //console.log("reportDataRow ::",reportDataRows); + let app_name = ''; + let usagescount = ''; + let monthOfYear = ''; + app_name = reportDataRows[this.yAxisDataColumn]['displayValue']; + usagescount = reportDataRows[this.countCoulumn]['displayValue']; + monthOfYear = reportDataRows[this.xAxisDataColumn]['displayValue']; + monthArr.push(Number(monthOfYear)); + //console.log("rdr_cntr >>>>",rdr_cntr, "app_name >>>>",app_name, "usagescount >>>>",usagescount); + if(app_usage_count_map.has(app_name)){ + let existingCountArr = app_usage_count_map.get(app_name); + existingCountArr[Number(monthOfYear)-1] = Number(usagescount); + app_usage_count_map.set(app_name, existingCountArr); + }else{ + let countArray: Array<number> = []; + for(let i=1; i<=Math.max(...monthArr); i++){ + countArray[i]=0; + } + countArray[Number(monthOfYear)-1] = Number(usagescount); + app_usage_count_map.set(app_name, countArray); + } + + rdr_cntr++; + } + /** + * Setting max months display over x axis + */ + let maxMonth = Math.max(...monthArr); + for(let i=1; i <=maxMonth; i++ ){ + this.barChartLabels.push(String(i)); + } + this.prepareChartDataModel(app_usage_count_map) + } + + prepareChartDataModel(app_usage_count_map:any){ + console.log("app_usage_count_map",app_usage_count_map); + if(app_usage_count_map){ + app_usage_count_map.forEach((value: Array<number>, key: string) => { + var random_color = this.getRandomColor(); + const chartdata: ChartDataSets = <ChartDataSets><any>{ + "data": value, + "label": key, + "stack": 'a', + "backgroundColor":random_color, + "hoverBackgroundColor":random_color + } + this.barChartData.push(chartdata); + }); + this.barChartData.shift(); + console.log("barChartData ::: ",this.barChartData); + } +} + +getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color +} + +openErrorModelPopup(_message: string) { + this.changeDetectorRefs.detectChanges(); + const modalInfoRef = this.ngbModal.open(ErrorModalComponent, this.modalOptions); + modalInfoRef.componentInstance.message = _message; + modalInfoRef.result.then((data) => { + this.resetFormFieldValues(this.inputReportId); + }); + return modalInfoRef; +} + +openErrorModel(_message: string) { + this.changeDetectorRefs.detectChanges(); + const modalInfoRef = this.ngbModal.open(ErrorModalComponent, this.modalOptions); + modalInfoRef.componentInstance.message = _message; + return modalInfoRef; +} + +showError() { + this.showSpinner = false; + this.isChartAvailable = false; + this.changeDetectorRefs.detectChanges(); +} + +resetFormFieldValues(reportId) { + this.httpCacheService.clearCache(); + this._router.navigateByUrl('v2/app/refresh', {skipLocationChange: true}).then(() => + this._router.navigate(['v2/run', reportId])); +} + +} |