1 files changed, 253 insertions, 0 deletions
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]));
+}
+
+}