From 1f7ed8d80f03f288181718a3572896ac48849163 Mon Sep 17 00:00:00 2001 From: "Kumar, Sudarshan (sk670p)" Date: Mon, 26 Apr 2021 23:41:22 +0530 Subject: Integrating Stacked Column Chart SDK-Raptor Integrating Stacked Column Chart SDK-Raptor Issue-ID: PORTAL-1068 Change-Id: I624e9ac3f6e52d5d4d501e46de979649a51f27ff Signed-off-by: Sudarshan Kumar --- .../chart-wizard/chart-wizard.component.html | 47 +++- .../Report/chart-wizard/chart-wizard.component.ts | 13 ++ .../Report_List/Report/sql/sql.component.css | 4 +- .../analytics/Report_List/report-list.service.ts | 2 +- .../ngapp/src/app/report-run/report-run.module.ts | 8 +- .../run-report-form-fields.component.html | 18 +- .../run/run-report/run-report.component.ts | 6 +- .../run-stacked-column-report.component.html | 10 + .../run-stacked-column-report.component.scss | 12 + .../run-stacked-column-report.component.spec.ts | 25 ++ .../run-stacked-column-report.component.ts | 253 +++++++++++++++++++++ 11 files changed, 381 insertions(+), 17 deletions(-) create mode 100644 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 create mode 100644 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 create mode 100644 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 create mode 100644 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 (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp') 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 @@ Pie Chart Annotation Chart Flexible Time Chart + Stacked Coulmn Chart
- + Domain Axis
- + Category None @@ -78,7 +79,7 @@ -
+
@@ -141,7 +142,7 @@
- + Additional Options @@ -197,7 +198,7 @@
- + Common Options @@ -302,7 +303,7 @@ Set Bar chart Options -
+
@@ -437,6 +438,40 @@
+ + + + Set Stacked Column Chart Option + + +
+ + Set Column For X Axis + + {{d.title}} + + +
+ + Set Column For Y Axis + + None + {{d.title}} + + +
+ + Set Column For Count + + None + {{d.title}} + + +
+

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{ - 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 @@
+
+ + +
@@ -331,14 +341,14 @@

- -
- + [runAgain]="runReportAgain"> + +
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 @@ +
+ + +
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; + + 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 = []; + 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, key: string) => { + var random_color = this.getRandomColor(); + const chartdata: ChartDataSets = { + "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])); +} + +} -- cgit 1.2.3-korg