Integrating Stacked Column Chart SDK-Raptor

Integrating Stacked Column Chart  SDK-Raptor

Issue-ID: PORTAL-1068
Change-Id: I624e9ac3f6e52d5d4d501e46de979649a51f27ff
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

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]));
+}
+
+}