1 files changed, 169 insertions, 8 deletions
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 5f9a0fd0..18f5ab1b 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
@@ -1,17 +1,178 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit, Input} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Router} from '@angular/router';
+import {ChartWizard} from './chart-wizard.service';
+import {RangeAxisListModel} from './chart-wizard-model/range-axis-list-model';
+import {error} from 'util';
+import {forEach} from '@angular/router/src/utils/collection';
+import {MatDialog, MatDialogConfig} from '@angular/material';
 
 @Component({
-  selector: 'app-chart-wizard',
-  templateUrl: './chart-wizard.component.html',
-  styleUrls: ['./chart-wizard.component.css']
+    selector: 'app-chart-wizard',
+    templateUrl: './chart-wizard.component.html',
+    styleUrls: ['./chart-wizard.component.css']
 })
 export class ChartWizardComponent implements OnInit {
 
-  @Input("reportId") reportId1 : string;
 
-  constructor() { }
+    @Input() reportId: string;
 
-  ngOnInit() {
-  }
+    chartJson: any;
+    showSpinner: boolean;
+    isFirstBar: boolean;
+    isFirstTimeSeries: boolean;
+    lineTypes = [
+        {index: 0, value: 'default', title: 'Default'},
+        {index: 1, value: 'dotted_lines', title: 'Dotted Lines'},
+        {index: 2, value: 'dashed_lines', title: 'Dashed Lines'}
+    ];
+    rangeColors = [
+        {index: 0, value: '#1f77b4', title: 'Dodger Blue'},
+        {index: 1, value: '#ff7f0e', title: 'Vivid orange'},
+        {index: 2, value: '#2ca02c', title: 'Forest Green'},
+        {index: 3, value: '#8c864b', title: 'Greenish Red'},
+        {index: 4, value: '#9467bd', title: 'Desaturated violet'},
+        {index: 5, value: '#8c564b', title: 'Dark moderate red'},
+        {index: 6, value: '#e377c2', title: 'Soft pink'},
+        {index: 7, value: '#7f7f7f', title: 'Dark gray'},
+        {index: 8, value: '#bcbd22', title: 'Strong yellow'},
+        {index: 9, value: '#17becf', title: 'Strong cyan'},
+        {index: 10, value: '#dc143c', title: 'Vivid red'},
+        {index: 11, value: '#800080', title: 'Dark magenta'},
+        {index: 12, value: '#0000FF', title: 'Blue'},
+        {index: 13, value: '#008000', title: 'Dark lime green'},
+        {index: 14, value: '#D2691E', title: 'Reddish Orange'},
+        {index: 15, value: '#FF0000', title: 'Red'},
+        {index: 16, value: '#000000', title: 'Black'},
+        {index: 17, value: '#DB7093', title: 'Pink'},
+        {index: 18, value: '#FF00FF', title: 'Pure Magenta'},
+        {index: 19, value: '#7B68EE', title: 'Soft blue'},
+        {index: 20, value: '#1f77b6', title: 'Strong blue'},
+        {index: 21, value: '#9edae5', title: 'Very soft cyan'},
+        {index: 22, value: '#393b79', title: 'Dark Blue'},
+        {index: 23, value: '#5254a3', title: 'Dark moderate Blue'},
+        {index: 24, value: '#6b6ecf', title: 'Slightly desaturated blue'},
+        {index: 25, value: '#9c9ede', title: 'Very soft blue'},
+        {index: 26, value: '#637939', title: 'Dark Green'},
+        {index: 27, value: '#8ca252', title: 'Dark moderate green'},
+        {index: 28, value: '#b5cf6b', title: 'Slightly desaturated green'},
+        {index: 29, value: '#cedb9c', title: 'Desaturated Green'},
+
+        /* Old Colors  */
+        {index: 30, value: '#00FFFF', title: 'Aqua'},
+        {index: 31, value: '#000000', title: 'Black'},
+        {index: 32, value: '#0000FF', title: 'Blue'},
+        {index: 33, value: '#FF00FF', title: 'Fuchsia'},
+        {index: 34, value: '#808080', title: 'Gray'},
+        {index: 35, value: '#008000', title: 'Green'},
+        {index: 36, value: '#00FF00', title: 'Lime'},
+        {index: 37, value: '#800000', title: 'Maroon'},
+        {index: 38, value: '#000080', title: 'Navy'},
+        {index: 39, value: '#808000', title: 'Olive'},
+        {index: 40, value: '#FF9900', title: 'Orange'},
+        {index: 41, value: '#800080', title: 'Purple'},
+        {index: 42, value: '#FF0000', title: 'Red'},
+        {index: 43, value: '#C0C0C0', title: 'Silver'},
+        {index: 44, value: '#008080', title: 'Teal'},
+        {index: 45, value: '#FFFFFF', title: 'White'},
+        {index: 46, value: '#FFFF00', title: 'Yellow'}
+    ];
+    displayedColumns: string[] = ['Range Axis', 'Y Axis', 'Chart Title', 'Color', 'Line Type'];
+    rangeAxisRemoveList: RangeAxisListModel[];
+    hideChart = false;
+    displayOptions: {}[];
+
+    constructor(private _http: HttpClient, private _router: Router, private chartService: ChartWizard,  private dialog: MatDialog) {
+    }
+
+    ngOnInit() {
+        this.showSpinner = true;
+        this.isFirstBar = false;
+        this.isFirstTimeSeries = false;
+        this.chartService.getReportTypeData(this.reportId).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.reportId).subscribe(
+                (response) => {
+                    this.chartJson = response;
+                    // @ts-ignore
+                    this.rangeAxisRemoveList = response.rangeAxisRemoveList;
+                    this.showSpinner = false;
+                });
+        }
+    }
+
+    saveChartData() {
+        this.showSpinner = true;
+        this.chartJson.chartTypeJSON = {
+            index: 0,
+            value: this.chartJson.chartType,
+            title: ''
+        };
+        this.chartJson.categoryAxisJSON = this.chartJson.categoryAxisJSON || {};
+        if (this.chartJson.categoryAxis) {
+            this.chartJson.categoryAxisJSON = {
+                index: 0,
+                value: this.chartJson.categoryAxis,
+                title: this.chartJson.categoryAxis
+            };
+        } 
+		else {
+            this.chartJson.categoryAxisJSON = {};
+        }
+        this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
+        this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
+        for (const removeList of this.rangeAxisRemoveList) {
+            this.chartJson.rangeAxisList.push(removeList);
+        }
+
+          this.chartService.saveChartData(this.chartJson).subscribe(
+              (response) => {
+                  this.ngOnInit();
+              });
+        this.showSpinner = false;
+    }
+
+    addRangeAxisRow() {
+        this.chartJson.rangeAxisList = this.chartJson.rangeAxisList || {};
+        this.chartJson.rangeAxisList.push(new RangeAxisListModel());
+    }
+
+    removeRangeAxisRow(d: any) {
+        this.chartJson.rangeAxisList = this.chartJson.rangeAxisList.filter(item => item !== d);
+        this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
+        this.rangeAxisRemoveList.push(d);
+        this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
+    }
+
+    setBarChartOptions() {
+        this.chartJson.barChartOptions = this.chartJson.barChartOptions || {
+            verticalOrientation: null,
+            stackedChart: null,
+            displayBarControls: null,
+            xAxisDateType: null,
+            minimizeXAxisTickers: null,
+            timeAxis: null,
+            yAxisLogScale: null
+        };
+    }
+
+    setTimeSeriesChartOptions() {
+          this.chartJson.timeSeriesChartOptions = this.chartJson.timeSeriesChartOptions || {
+              lineChartRenderer: null,
+              showXAxisLabel: null,
+              addXAxisTicker: null,
+              nonTimeAxis: null,
+              multiSeries: null
+          };
+    }
 
 }
+