gerrit.onap Code Review - portal/sdk.git/blob

   1 import {Component, OnInit, Input} from '@angular/core';
   2 import {HttpClient} from '@angular/common/http';
   3 import {Router} from '@angular/router';
   4 import {ChartWizard} from './chart-wizard.service';
   5 import {RangeAxisListModel} from './chart-wizard-model/range-axis-list-model';
   6 import {error} from 'util';
   7 import {forEach} from '@angular/router/src/utils/collection';
   8 import {MatDialog, MatDialogConfig} from '@angular/material';
   9
  10 @Component({
  11     selector: 'app-chart-wizard',
  12     templateUrl: './chart-wizard.component.html',
  13     styleUrls: ['./chart-wizard.component.css']
  14 })
  15 export class ChartWizardComponent implements OnInit {
  16
  17
  18     @Input() reportId: string;
  19
  20     chartJson: any;
  21     showSpinner: boolean;
  22     isFirstBar: boolean;
  23     isFirstTimeSeries: boolean;
  24     lineTypes = [
  25         {index: 0, value: 'default', title: 'Default'},
  26         {index: 1, value: 'dotted_lines', title: 'Dotted Lines'},
  27         {index: 2, value: 'dashed_lines', title: 'Dashed Lines'}
  28     ];
  29     rangeColors = [
  30         {index: 0, value: '#1f77b4', title: 'Dodger Blue'},
  31         {index: 1, value: '#ff7f0e', title: 'Vivid orange'},
  32         {index: 2, value: '#2ca02c', title: 'Forest Green'},
  33         {index: 3, value: '#8c864b', title: 'Greenish Red'},
  34         {index: 4, value: '#9467bd', title: 'Desaturated violet'},
  35         {index: 5, value: '#8c564b', title: 'Dark moderate red'},
  36         {index: 6, value: '#e377c2', title: 'Soft pink'},
  37         {index: 7, value: '#7f7f7f', title: 'Dark gray'},
  38         {index: 8, value: '#bcbd22', title: 'Strong yellow'},
  39         {index: 9, value: '#17becf', title: 'Strong cyan'},
  40         {index: 10, value: '#dc143c', title: 'Vivid red'},
  41         {index: 11, value: '#800080', title: 'Dark magenta'},
  42         {index: 12, value: '#0000FF', title: 'Blue'},
  43         {index: 13, value: '#008000', title: 'Dark lime green'},
  44         {index: 14, value: '#D2691E', title: 'Reddish Orange'},
  45         {index: 15, value: '#FF0000', title: 'Red'},
  46         {index: 16, value: '#000000', title: 'Black'},
  47         {index: 17, value: '#DB7093', title: 'Pink'},
  48         {index: 18, value: '#FF00FF', title: 'Pure Magenta'},
  49         {index: 19, value: '#7B68EE', title: 'Soft blue'},
  50         {index: 20, value: '#1f77b6', title: 'Strong blue'},
  51         {index: 21, value: '#9edae5', title: 'Very soft cyan'},
  52         {index: 22, value: '#393b79', title: 'Dark Blue'},
  53         {index: 23, value: '#5254a3', title: 'Dark moderate Blue'},
  54         {index: 24, value: '#6b6ecf', title: 'Slightly desaturated blue'},
  55         {index: 25, value: '#9c9ede', title: 'Very soft blue'},
  56         {index: 26, value: '#637939', title: 'Dark Green'},
  57         {index: 27, value: '#8ca252', title: 'Dark moderate green'},
  58         {index: 28, value: '#b5cf6b', title: 'Slightly desaturated green'},
  59         {index: 29, value: '#cedb9c', title: 'Desaturated Green'},
  60
  61         /* Old Colors  */
  62         {index: 30, value: '#00FFFF', title: 'Aqua'},
  63         {index: 31, value: '#000000', title: 'Black'},
  64         {index: 32, value: '#0000FF', title: 'Blue'},
  65         {index: 33, value: '#FF00FF', title: 'Fuchsia'},
  66         {index: 34, value: '#808080', title: 'Gray'},
  67         {index: 35, value: '#008000', title: 'Green'},
  68         {index: 36, value: '#00FF00', title: 'Lime'},
  69         {index: 37, value: '#800000', title: 'Maroon'},
  70         {index: 38, value: '#000080', title: 'Navy'},
  71         {index: 39, value: '#808000', title: 'Olive'},
  72         {index: 40, value: '#FF9900', title: 'Orange'},
  73         {index: 41, value: '#800080', title: 'Purple'},
  74         {index: 42, value: '#FF0000', title: 'Red'},
  75         {index: 43, value: '#C0C0C0', title: 'Silver'},
  76         {index: 44, value: '#008080', title: 'Teal'},
  77         {index: 45, value: '#FFFFFF', title: 'White'},
  78         {index: 46, value: '#FFFF00', title: 'Yellow'}
  79     ];
  80     displayedColumns: string[] = ['Range Axis', 'Y Axis', 'Chart Title', 'Color', 'Line Type'];
  81     rangeAxisRemoveList: RangeAxisListModel[];
  82     hideChart = false;
  83     displayOptions: {}[];
  84
  85     constructor(private _http: HttpClient, private _router: Router, private chartService: ChartWizard,  private dialog: MatDialog) {
  86     }
  87
  88     ngOnInit() {
  89         this.showSpinner = true;
  90         this.isFirstBar = false;
  91         this.isFirstTimeSeries = false;
  92         this.chartService.getReportTypeData(this.reportId).subscribe(
  93             (respone) => {
  94                 this.displayOptions = respone['displayOptions'];
  95                 for (let dpOption = 0 ; dpOption < this.displayOptions.length ; dpOption++) {
  96                     if (this.displayOptions[dpOption]['name'] === 'HideChart') {
  97                         this.hideChart = this.displayOptions[dpOption]['selected'];
  98                     }
  99                 }
 100             });
 101         if (!this.hideChart) {
 102             this.chartService.getChartData(this.reportId).subscribe(
 103                 (response) => {
 104                     this.chartJson = response;
 105                     // @ts-ignore
 106                     this.rangeAxisRemoveList = response.rangeAxisRemoveList;
 107                     this.showSpinner = false;
 108                 });
 109         }
 110     }
 111
 112     saveChartData() {
 113         this.showSpinner = true;
 114         this.chartJson.chartTypeJSON = {
 115             index: 0,
 116             value: this.chartJson.chartType,
 117             title: ''
 118         };
 119         this.chartJson.categoryAxisJSON = this.chartJson.categoryAxisJSON || {};
 120         if (this.chartJson.categoryAxis) {
 121             this.chartJson.categoryAxisJSON = {
 122                 index: 0,
 123                 value: this.chartJson.categoryAxis,
 124                 title: this.chartJson.categoryAxis
 125             };
 126         }
 127                 else {
 128             this.chartJson.categoryAxisJSON = {};
 129         }
 130         this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
 131         this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
 132         for (const removeList of this.rangeAxisRemoveList) {
 133             this.chartJson.rangeAxisList.push(removeList);
 134         }
 135
 136           this.chartService.saveChartData(this.chartJson).subscribe(
 137               (response) => {
 138                   this.ngOnInit();
 139               });
 140         this.showSpinner = false;
 141     }
 142
 143     addRangeAxisRow() {
 144         this.chartJson.rangeAxisList = this.chartJson.rangeAxisList || {};
 145         this.chartJson.rangeAxisList.push(new RangeAxisListModel());
 146     }
 147
 148     removeRangeAxisRow(d: any) {
 149         this.chartJson.rangeAxisList = this.chartJson.rangeAxisList.filter(item => item !== d);
 150         this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
 151         this.rangeAxisRemoveList.push(d);
 152         this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
 153     }
 154
 155     setBarChartOptions() {
 156         this.chartJson.barChartOptions = this.chartJson.barChartOptions || {
 157             verticalOrientation: null,
 158             stackedChart: null,
 159             displayBarControls: null,
 160             xAxisDateType: null,
 161             minimizeXAxisTickers: null,
 162             timeAxis: null,
 163             yAxisLogScale: null
 164         };
 165     }
 166
 167     setTimeSeriesChartOptions() {
 168           this.chartJson.timeSeriesChartOptions = this.chartJson.timeSeriesChartOptions || {
 169               lineChartRenderer: null,
 170               showXAxisLabel: null,
 171               addXAxisTicker: null,
 172               nonTimeAxis: null,
 173               multiSeries: null
 174           };
 175     }
 176
 177 }
 178