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 --- .../run-stacked-column-report.component.ts | 253 +++++++++++++++++++++ 1 file changed, 253 insertions(+) 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/ngapp/src/app/report-run/run/run-report/run-stacked-column-report/run-stacked-column-report.component.ts') 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