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

   1 <br/>
   2 <div *ngIf="hideChart">
   3     <div class="tab-content">
   4         <h3>Chart Wizard Disabled</h3>
   5     </div>
   6 </div>
   7 <div *ngIf="!hideChart">
   8 <span class="ecomp-spinner" *ngIf="showSpinner"></span>
   9 <div *ngIf="!showSpinner" class="stdForm">
  10     <div class="tab-content">
  11         <h3>Step 5 - Chart Wizard Configuration</h3>
  12     </div>
  13     <br/>
  14     <div class="field-group">
  15         <label class="checkbox" for="animation1">
  16             <input [(ngModel)]="chartJson.commonChartOptions.animateAnimatedChart" class="defaultFontSize" id="animation1" type="checkbox">
  17             <i class="skin"></i><span>Animation</span>
  18         </label>
  19     </div>
  20     <br/>
  21     <div class="field-group">
  22         <label class="checkbox" for="title">
  23             <input [(ngModel)]="chartJson.showTitle" class="defaultFontSize" id="title" type="checkbox">
  24             <i class="skin"></i><span>Show Title</span>
  25         </label>
  26     </div>
  27     <br/>
  28     <div class="field-group">
  29         <table>
  30             <thead>
  31             <tr>
  32                 <th style="width: 50px"><span>Width (px)</span></th>
  33                 <th style="width: 50px">Height (px)</th>
  34             </tr>
  35             </thead>
  36             <tbody>
  37             <tr>
  38                 <td><label for="width2">
  39                     <input [(ngModel)]="chartJson.width" class="defaultFontSize" id="width2" name="displayName"
  40                            style="width: 100px;" type="text" appNumbersOnly>
  41                 </label></td>
  42                 <td><label for="height1">
  43                     <input [(ngModel)]="chartJson.height" class="defaultFontSize" id="height1" name="displayName"
  44                            style="width: 100px;" type="text" appNumbersOnly>
  45                 </label></td>
  46             </tr>
  47             </tbody>
  48         </table>
  49     </div>
  50     <div class="field-group">
  51         <mat-form-field>
  52             <mat-label class="b2b-dro">Chart Type:</mat-label>
  53             <mat-select data-select-color="blue" [(ngModel)]="chartJson.chartType" aria-label="reportType" placeholder="Select chart Type">
  54                 <mat-option  value="BarChart3D" (onSelectionChange)="setBarChartOptions()">Bar Chart</mat-option>
  55                 <mat-option value="TimeSeriesChart" (onSelectionChange)="setTimeSeriesChartOptions()">Time Series/Area Chart</mat-option>
  56                 <mat-option value="PieChart">Pie Chart</mat-option>
  57                 <mat-option value="AnnotationChart">Annotation Chart</mat-option>
  58                 <mat-option value="FlexTimeChart">Flexible Time Chart</mat-option>
  59             </mat-select>
  60         </mat-form-field>
  61         <br/>
  62         <mat-form-field>
  63             <mat-label class="lable">Domain Axis</mat-label>
  64             <mat-select [(ngModel)]="chartJson.domainAxisJSON.value" aria-label="domain axis">
  65                 <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
  66                             value="{{d.value}}">{{d.title}}</mat-option>
  67             </mat-select>
  68         </mat-form-field>
  69         <br/>
  70         <mat-form-field>
  71             <mat-label class="lable">Category</mat-label>
  72             <mat-select [(ngModel)]="chartJson.categoryAxis" aria-label="category axis">
  73                 <mat-option>None</mat-option>
  74                 <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
  75                             value="{{d.value}}">{{d.title}}</mat-option>
  76             </mat-select>
  77         </mat-form-field>
  78     </div>
  79
  80     <div id="RangeTable">
  81         <table>
  82             <thead>
  83             <tr>
  84                 <th width="18%">Range Axis</th>
  85                 <th width="15%">Y Axis</th>
  86                 <th width="15%">Chart Title</th>
  87                 <th width="22%">Color</th>
  88                 <th width="25%">Line Type</th>
  89                 <th></th>
  90             </tr>
  91             </thead>
  92             <tbody *ngFor="let rangeReport of chartJson.rangeAxisList">
  93             <tr>
  94                 <td>
  95                     <mat-form-field>
  96                         <mat-select [(ngModel)]="rangeReport.rangeAxisLabelJSON.value" aria-label="category axis">
  97                             <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
  98                                         value="{{d.value}}">{{d.title}}</mat-option>
  99                         </mat-select>
 100                     </mat-form-field>
 101                 </td>
 102                 <td>
 103                     <input [(ngModel)]="rangeReport.rangeYAxis" class="defaultFontSize1" id="rangeAxis" name="displayName"
 104                             type="text">
 105                 </td>
 106                 <td>
 107                     <input [(ngModel)]="rangeReport.rangeChartGroup" class="defaultFontSize1" id="rangeChartGroup" name="displayName"
 108                            type="text">
 109                 </td>
 110                 <td>
 111                     <mat-form-field>
 112                         <mat-label class="lable">Select Color</mat-label>
 113                         <mat-select [(ngModel)]="rangeReport.rangeColorJSON.value" aria-label="category axis">
 114                             <mat-option *ngFor="let d of rangeColors"
 115                                         value="{{d.value}}">{{d.title}}</mat-option>
 116                         </mat-select>
 117                     </mat-form-field>
 118                 </td>
 119                 <td>
 120                     <mat-form-field>
 121                         <mat-label class="lable">Select Line Type</mat-label>
 122                         <mat-select [(ngModel)]="rangeReport.rangeLineTypeJSON.value" aria-label="category axis">
 123                             <mat-option *ngFor="let d of lineTypes"
 124                                         value="{{d.value}}">{{d.title}}</mat-option>
 125                         </mat-select>
 126                     </mat-form-field>
 127                 </td>
 128                 <td><span>
 129                      <button (click)="removeRangeAxisRow(rangeReport)" class="btn btn-alt btn-small"
 130                                             ng-if="rangeReport.removed!='true'"
 131                                             type="submit">Remove</button>
 132                      </span></td>
 133             </tr>
 134             </tbody>
 135         </table>
 136         <div align="right" style="margin-right:20px">
 137             <button (click)="addRangeAxisRow()" class="btn btn-alt btn-small" style="font-size: 17px;">Add</button>
 138         </div>
 139     </div>
 140 <br/>
 141     <div class="form-group">
 142         <mat-accordion>
 143             <mat-expansion-panel>
 144                 <mat-expansion-panel-header>
 145                     <mat-panel-title>
 146                         Additional Options
 147                     </mat-panel-title>
 148                     <mat-panel-description>
 149                         Set Additional Chart Properties
 150                     </mat-panel-description>
 151                 </mat-expansion-panel-header>
 152                 <div class="field-group">
 153                     <table>
 154                         <thead>
 155                         <tr>
 156                             <th style="width: 30%"><span>Primary Axis Label</span></th>
 157                             <th style="width: 30%">Secondary Axis Label</th>
 158                         </tr>
 159                         </thead>
 160                         <tbody>
 161                         <tr>
 162                             <td><label for="primaryAxisLabel">
 163                                 <input [(ngModel)]="chartJson.primaryAxisLabel" class="defaultFontSize" id="primaryAxisLabel" name="displayName"
 164                                        style="width: 200px;" type="text">
 165                             </label></td>
 166                             <td><label for="secondaryAxisLabel">
 167                                 <input [(ngModel)]="chartJson.secondaryAxisLabel" class="defaultFontSize" id="secondaryAxisLabel" name="displayName"
 168                                        style="width: 200px;" type="text">
 169                             </label></td>
 170                         </tr>
 171                         </tbody>
 172                     </table>
 173                 </div><br/>
 174                 <div class="field-group">
 175                     <table>
 176                         <thead>
 177                         <tr>
 178                             <th style="width: 30%"><span>Range Axis Minimum Range</span></th>
 179                             <th style="width: 30%">Maximum Range</th>
 180                         </tr>
 181                         </thead>
 182                         <tbody>
 183                         <tr>
 184                             <td><label for="width1">
 185                                 <input [(ngModel)]="chartJson.minRange" class="defaultFontSize" id="width1" name="displayName"
 186                                        style="width: 200px;" type="text">
 187                             </label></td>
 188                             <td><label for="height">
 189                                 <input [(ngModel)]="chartJson.maxRange" class="defaultFontSize" id="height" name="displayName"
 190                                        style="width: 200px;" type="text">
 191                             </label></td>
 192                         </tr>
 193                         </tbody>
 194                     </table>
 195                 </div>
 196
 197             </mat-expansion-panel>
 198             <br/>
 199             <mat-expansion-panel>
 200                 <mat-expansion-panel-header>
 201                     <mat-panel-title>
 202                         Common Options
 203                     </mat-panel-title>
 204                     <mat-panel-description>
 205                         Set Common chart Options
 206                     </mat-panel-description>
 207                 </mat-expansion-panel-header>
 208                 <div>
 209                     <table>
 210                         <thead>
 211                         <tr>
 212                             <th>Label Angle</th>
 213                             <th>Legend Position</th>
 214                         </tr>
 215                         </thead>
 216                         <tbody>
 217                         <tr>
 218                             <td>
 219                               <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.legendLabelAngle" >
 220                                   <mat-radio-button   value ="up45">up 45&deg;</mat-radio-button>
 221                                   <mat-radio-button   value ='up90'>up 90&deg;</mat-radio-button>
 222                                   <mat-radio-button   value ='down45'>down 45&deg;</mat-radio-button>
 223                                   <mat-radio-button   value ='down90'>down 90&deg;</mat-radio-button>
 224                                   <mat-radio-button   value ='standard'>Standard</mat-radio-button>
 225                               </mat-radio-group>
 226                             </td>
 227                             <td>
 228                                 <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.legendPosition" >
 229                                     <mat-radio-button   value ="top">Top</mat-radio-button>
 230                                     <mat-radio-button   value ='right'>Right</mat-radio-button>
 231                                 </mat-radio-group>
 232                             </td>
 233                         </tr>
 234                         </tbody>
 235                     </table>
 236                     <table>
 237                         <thead>
 238                            <tr>
 239                                <th width="20%">Legend</th>
 240                                <th width="20%">Animation</th>
 241                                <th></th>
 242                            </tr>
 243                         </thead>
 244                         <tbody>
 245                             <tr>
 246                                 <td>
 247                                     <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.hideLegend" >
 248                                         <mat-radio-button   [value]='false'>Yes</mat-radio-button>
 249                                         <mat-radio-button   [value]='true'>No</mat-radio-button>
 250                                     </mat-radio-group>
 251                                 </td>
 252                                 <td>
 253                                     <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.animateAnimatedChart" >
 254                                         <mat-radio-button   [value]='true'>Yes</mat-radio-button>
 255                                         <mat-radio-button   [value]='false'>No</mat-radio-button>
 256                                     </mat-radio-group>
 257                                 </td>
 258                             </tr>
 259                         </tbody>
 260                     </table>
 261
 262                     <table>
 263                         <thead>
 264                            <tr>
 265                                <th width="25%">Top Margin</th>
 266                                <th width="25%">Bottom Margin</th>
 267                                <th width="25%">Left Margin</th>
 268                                <th width="25%">Right Margin</th>
 269                            </tr>
 270                         </thead>
 271                         <tbody>
 272                             <tr>
 273                                 <td>
 274                                     <input [(ngModel)]="chartJson.commonChartOptions.topMargin" class="defaultFontSize1" id="topMargin" name="displayName"
 275                                             type="text" appNumbersOnly>
 276                                 </td>
 277                                 <td>
 278                                     <input [(ngModel)]="chartJson.commonChartOptions.bottomMargin" class="defaultFontSize1" id="bottomMargin" name="displayName"
 279                                             type="text" appNumbersOnly>
 280                                 </td>
 281                                 <td>
 282                                     <input [(ngModel)]="chartJson.commonChartOptions.leftMargin" class="defaultFontSize1" id="leftMargin" name="displayName"
 283                                             type="text" appNumbersOnly>
 284                                 </td>
 285                                 <td>
 286                                     <input [(ngModel)]="chartJson.commonChartOptions.rightMargin" class="defaultFontSize1" id="rightMargin" name="displayName"
 287                                             type="text" appNumbersOnly>
 288                                 </td>
 289                             </tr>
 290                         </tbody>
 291                     </table>
 292                 </div>
 293             </mat-expansion-panel>
 294             <br/>
 295             <mat-expansion-panel *ngIf="chartJson.chartType=='BarChart3D'">
 296                 <mat-expansion-panel-header>
 297                     <mat-panel-title>
 298                         Bar Chart Options
 299                     </mat-panel-title>
 300                     <mat-panel-description>
 301                          Set Bar chart Options
 302                     </mat-panel-description>
 303                 </mat-expansion-panel-header>
 304           <div>
 305               <table>
 306                   <thead>
 307                   <tr>
 308                       <th width="25%">Orientation</th>
 309                       <th width="18%">Stacked</th>
 310                       <th width="18%">Show Controls</th>
 311                       <th width="18%">XAxis Date Type</th>
 312                       <th width="21%">Display less XAxis tickers</th>
 313                       <th></th>
 314                   </tr>
 315                   </thead>
 316                   <tbody>
 317                       <tr>
 318                           <td>
 319                               <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.verticalOrientation" >
 320                                   <mat-radio-button   [value]='true'>Vertical</mat-radio-button>
 321                                   <mat-radio-button  [value]='false'>Horizontal</mat-radio-button>
 322                               </mat-radio-group>
 323                           </td>
 324                           <td>
 325                           <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.stackedChart" >
 326                               <mat-radio-button  [value]='true'>Yes</mat-radio-button>
 327                               <mat-radio-button  [value]='false'>No</mat-radio-button>
 328                           </mat-radio-group>
 329                       </td>
 330                           <td>
 331                               <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.displayBarControls" >
 332                                   <mat-radio-button  [value]='true'>Yes</mat-radio-button>
 333                                   <mat-radio-button  [value]='false'>No</mat-radio-button>
 334                               </mat-radio-group>
 335                           </td>
 336                           <td>
 337                               <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.xAxisDateType" >
 338                                   <mat-radio-button  [value]='true'>Yes</mat-radio-button>
 339                                   <mat-radio-button  [value]='false'>No</mat-radio-button>
 340                               </mat-radio-group>
 341                           </td>
 342                           <td>
 343                               <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.minimizeXAxisTickers" >
 344                                   <mat-radio-button  [value]='true'>Yes</mat-radio-button>
 345                                   <mat-radio-button  [value]='false'>No</mat-radio-button>
 346                               </mat-radio-group>
 347                           </td>
 348
 349
 350                       </tr>
 351                   </tbody>
 352               </table>
 353               <br/>
 354               <table>
 355                   <thead>
 356                     <tr>
 357                         <th width="25%">Is Time Axis?</th>
 358                         <th width="25%">Log Scale (Y Axis)</th>
 359                         <th></th>
 360                     </tr>
 361                   </thead>
 362                   <tbody>
 363                     <tr>
 364                         <td>
 365                             <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.timeAxis" >
 366                                 <mat-radio-button  [value]='true'>Yes</mat-radio-button>
 367                                 <mat-radio-button  [value]='false'>No</mat-radio-button>
 368                             </mat-radio-group>
 369                         </td>
 370                         <td>
 371                             <label class="checkbox" for="yAxisLogScale">
 372                                 <input [(ngModel)]="chartJson.barChartOptions.yAxisLogScale" class="defaultFontSize" id="yAxisLogScale" type="checkbox">
 373                                 <i class="skin"></i>
 374                             </label>
 375                         </td>
 376                     </tr>
 377                   </tbody>
 378
 379               </table>
 380           </div>
 381             </mat-expansion-panel>
 382             <mat-expansion-panel *ngIf="chartJson.chartType=='TimeSeriesChart'">
 383                 <mat-expansion-panel-header>
 384                     <mat-panel-title>
 385                         Time Series Chart Options
 386                     </mat-panel-title>
 387                     <mat-panel-description>
 388                         Set Time Series Chart Options
 389                     </mat-panel-description>
 390                 </mat-expansion-panel-header>
 391                 <div class="field-group">
 392                     <table>
 393                         <thead>
 394                         <tr>
 395                             <th width="20%">Render as</th>
 396                             <th width="20%">X Axis Label</th>
 397                             <th width="20%">X Axis Tickers</th>
 398                             <th width="20%">Is Time Axis?</th>
 399                             <th width="20%">Multi Series</th>
 400                         </tr>
 401                         </thead>
 402                         <tbody>
 403                         <tr>
 404                             <td>
 405                                 <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.timeSeriesChartOptions.lineChartRenderer" >
 406                                     <mat-radio-button  value="line">Line</mat-radio-button>
 407                                     <mat-radio-button  value='Area'>No</mat-radio-button>
 408                                 </mat-radio-group>
 409                             </td>
 410                             <td>
 411                                 <label class="checkbox" for="showXAxisLabel">
 412                                     <input [(ngModel)]="chartJson.timeSeriesChartOptions.showXAxisLabel" class="defaultFontSize" id="showXAxisLabel" type="checkbox">
 413                                     <i class="skin"></i><span></span>
 414                                 </label>
 415                             </td>
 416                             <td>
 417                                 <label class="checkbox" for="addXAxisTicker">
 418                                     <input [(ngModel)]="chartJson.timeSeriesChartOptions.addXAxisTicker" class="defaultFontSize" id="addXAxisTicker" type="checkbox">
 419                                     <i class="skin"></i><span></span>
 420                                 </label>
 421                             </td>
 422                             <td>
 423                                 <label class="checkbox" for="nonTimeAxis">
 424                                     <input [(ngModel)]="chartJson.timeSeriesChartOptions.nonTimeAxis" class="defaultFontSize" id="nonTimeAxis" type="checkbox">
 425                                     <i class="skin"></i><span></span>
 426                                 </label>
 427                             </td>
 428                             <td>
 429                                 <label class="checkbox" for="multiSeries">
 430                                     <input [(ngModel)]="chartJson.timeSeriesChartOptions.multiSeries" class="defaultFontSize" id="multiSeries" type="checkbox">
 431                                     <i class="skin"></i><span></span>
 432                                 </label>
 433                             </td>
 434                         </tr>
 435                         </tbody>
 436                     </table>
 437                 </div>
 438             </mat-expansion-panel>
 439         </mat-accordion>
 440     </div>
 441     <br/>
 442
 443     <div class="field-group">
 444         <button (click)="saveChartData()" class="btn btn-alt btn-small" style="font-size: 17px;">Save</button>
 445     </div>
 446 </div>
 447 </div>