<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"
</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>
</mat-form-field>
</div>
- <div id="RangeTable">
+ <div id="RangeTable" *ngIf="chartJson.chartType !=='StackedCoulmnChart'">
<table>
<thead>
<tr>
<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
</mat-expansion-panel>
<br/>
- <mat-expansion-panel>
+ <mat-expansion-panel *ngIf="chartJson.chartType !=='StackedCoulmnChart'">
<mat-expansion-panel-header>
<mat-panel-title>
Common Options
Set Bar chart Options
</mat-panel-description>
</mat-expansion-panel-header>
- <div>
+ <div *ngIf="chartJson.chartType !=='StackedCoulmnChart'">
<table>
<thead>
<tr>
</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/>
--- /dev/null
+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]));
+}
+
+}
Code Review / portal / sdk.git / commitdiff