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