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

   1 <style>
   2 table tbody td {
   3     border: none;
   4 }
   5
   6 table tbody tr {
   7     border: none;
   8 }
   9
  10 table{
  11     border: none;
  12     margin-bottom:0px;
  13 }
  14
  15 #RangeTable{
  16         margin-top: 5px;
  17         border: 1px solid black;
  18 }
  19 </style>
  20
  21 <div id="page-content">
  22 <h1 class="heading-page">Report Chart Configuration</h1>
  23
  24 <div ng-show="showLoader" class="span loader-container">
  25         <i class="icon-primary-spinner" role="img"
  26                 aria-label="Please wait while we load your content"></i>
  27 </div>
  28
  29
  30 <div ng-hide="showLoader">
  31 <div>
  32 <table>
  33         <thead>
  34             <tr>
  35                 <th width="30%">Chart Type</th>
  36                 <th></th>
  37             </tr>
  38         </thead>
  39
  40     <tbody>
  41         <tr>
  42             <td>
  43                                 <select name="chartType" b2b-dropdown ng-model="reportRunJson.chartType">
  44                                         <option b2b-dropdown-list option-repeat="d in chartTypeOptions" value="{{d.value}}">{{d.text}}</option>
  45                     </select>
  46             </td>
  47             <td></td>
  48         </tr>
  49     </tbody>
  50 </table>
  51
  52 <table>
  53         <thead>
  54             <tr>
  55                 <th width="50px">Width (px)</th>
  56                 <th>Height (px)</th>
  57             </tr>
  58         </thead>
  59     <tbody>
  60         <tr>
  61             <td>
  62             <input type="text" name="displayName" ng-model="reportRunJson.width" style="width:100px;">
  63             </td>
  64             <td>
  65             <input type="text" name="displayName" ng-model="reportRunJson.height" style="width:100px;">
  66             </td>
  67         </tr>
  68     </tbody>
  69 </table>
  70
  71 <table>
  72         <thead>
  73             <tr>
  74                 <th width="50px">Title</th>
  75             </tr>
  76         </thead>
  77     <tbody>
  78         <tr>
  79                 <fieldset role="radiogroup" radio-group-accessibility>
  80             <td>
  81             <label for="optionsRadiosShowTitleTrue" class="radio">
  82                 <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleTrue" name="optionsRadiosShowTitleTrue" value="true">
  83                 <i class="skin"></i>
  84                 <span>Show</span>
  85             </label>
  86             </td>
  87             <td>
  88             <label for="optionsRadiosShowTitleFalse" class="radio">
  89                 <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleFalse" name="optionsRadiosShowTitleFalse" value="false">
  90                 <i class="skin"></i>
  91                 <span>Hide</span>
  92             </label>
  93             </td>
  94             </fieldset>
  95         </tr>
  96
  97     </tbody>
  98 </table>
  99
 100 <table>
 101         <thead>
 102             <tr>
 103                 <th width="30%">Domain Axis</th>
 104                 <th  width="30%">Category</th>
 105                 <th  width="40%"></th>
 106             </tr>
 107         </thead>
 108     <tbody>
 109         <tr>
 110             <td>
 111                                 <select name="chartType" b2b-dropdown ng-model="reportRunJson.domainAxis">
 112                                         <option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
 113                     </select>
 114             </td>
 115             <td>
 116                                 <select name="chartType" b2b-dropdown ng-model="reportRunJson.categoryAxis">
 117                                         <option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
 118                     </select>
 119             </td>
 120         </tr>
 121     </tbody>
 122 </table>
 123
 124
 125         <div id="RangeTable">
 126
 127 <table ng-repeat="rangeReport in reportRunJson.rangeAxisList">
 128         <thead>
 129             <tr>
 130                 <th width="18%">Range Axis</th>
 131                 <th  width="15%">Y Axis</th>
 132                 <th  width="15%">Chart Title</th>
 133                 <th  width="22%">Color</th>
 134                 <th  width="25%">Line Type</th>
 135                 <th></th>
 136             </tr>
 137         </thead>
 138     <tbody>
 139         <tr>
 140             <td>
 141                                 <select name="chartType" b2b-dropdown ng-model="rangeReport.rangeAxisLabelJSON.value" placeholder-text="Select" ng-disabled="rangeReport.removed=='true'">
 142                                         <option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
 143                                 </select>
 144             </td>
 145             <td>
 146                 <input type="text" name="displayName" ng-model="rangeReport.rangeYAxis" ng-disabled="rangeReport.removed=='true'" style="width:100px;">
 147             </td>
 148             <td>
 149                 <input type="text" name="displayName" ng-model="rangeReport.rangeChartGroup" ng-disabled="rangeReport.removed=='true'" style="width:150px;">
 150             </td>
 151             <td>
 152                                 <select name="chartType" b2b-dropdown ng-model="rangeReport.rangeColor" ng-disabled="rangeReport.removed=='true'">
 153                                         <option b2b-dropdown-list option-repeat="d in rangeColors" value="{{d.value}}">{{d.title}}</option>
 154                                 </select>
 155             </td>
 156             <td>
 157                                 <select name="lineType" b2b-dropdown ng-model="rangeReport.rangeLineType" ng-disabled="rangeReport.removed=='true'">
 158                                         <option b2b-dropdown-list option-repeat="d in lineTypes"  value="{{d.value}}">{{d.title}}</option>
 159                                 </select>
 160             </td>
 161             <td>
 162                 <button ng-show="$index==0" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="addRangeAxisRow()">Add</button>
 163                 <span ng-hide="$index==0">
 164                         <button ng-if="rangeReport.removed!='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="removeRangeAxisRow($index)">Remove</button>
 165                         <button ng-if="rangeReport.removed=='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" disabled="disabled">Removed</button>
 166                 </span>
 167             </td>
 168         </tr>
 169
 170     </tbody>
 171 </table>
 172 </div>
 173
 174 </div>
 175
 176 <div ng-show=false style="min-height:500px" data-ng-init="init()">
 177         <div class="fn-ebz-container" >
 178                 <label class="fn-ebz-text-label">Chart Type</label><BR>
 179                 <div class="form-field" att-select="chartTypes" ng-model="reportRunJson.chartTypeJSON" placeholder="Select an Option" show-input-filter="true" ng-change="actionClicked()"></div>
 180         </div>
 181
 182
 183         <div class="fn-ebz-container" style="position:relative; top: -8px;">
 184                 <label class="fn-ebz-text-label">Animate</label><BR>
 185                         <div><input type="checkbox" ng-model="reportRunJson.animation" att-checkbox data-ng-value="true"></div>
 186         </div>
 187         <BR>
 188
 189         <div class="fn-ebz-container" >
 190                 <label class="fn-ebz-text-label">Width (Px)</label><BR>
 191                 <input type="text"  name="chartWidth"  maxlength=4  only-digits ng-model="reportRunJson.width" style="width:80px"/>
 192         </div>
 193
 194         <div class="fn-ebz-container" >
 195                 <label class="fn-ebz-text-label">Height (Px)</label><BR>
 196                 <input type="text" name="chartHeight" maxlength=4  only-digits ng-model="reportRunJson.height" style="width:80px"/>
 197         </div>
 198         <BR>
 199
 200         <div class="fn-ebz-container">
 201                 <label class="fn-ebz-text-label">Title</label><BR>
 202                 <span><input  name="tle" type="radio" ng-model="reportRunJson.showTitle"  data-ng-value="true"/>Show</span>
 203                 <span><input name="tle" type="radio" ng-model="reportRunJson.showTitle" data-ng-value="false"/>Hide</span>
 204         </div>
 205         <BR>
 206
 207
 208         <div class="fn-ebz-container" >
 209                 <label class="fn-ebz-text-label">Domain Axis</label><BR>
 210                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.domainAxisJSON" placeholder="Select an Option" show-input-filter="true"></div>
 211         </div>
 212
 213         <div class="fn-ebz-container" >
 214                 <label class="fn-ebz-text-label">Category</label><BR>
 215                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.categoryAxis" placeholder="" show-input-filter="true"></div>
 216         </div>
 217         <BR>
 218
 219 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 220 <div ng-repeat="rangeReport in reportRunJson.rangeAxisList">
 221         <div style="margin-left:5px">
 222         <div class="fn-ebz-container">
 223                 <label class="fn-ebz-text-label">Range Axis</label><BR>
 224                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList"
 225                         ng-model="rangeReport.rangeAxisLabelJSON" placeholder="Select an Option" show-input-filter="true"></div>
 226         </div>
 227
 228
 229         <div class="fn-ebz-container" >
 230                 <label class="fn-ebz-text-label">Y Axis</label><BR>
 231                 <input id="yaxs" type="text" name="yAxis" maxlength=50 ng-model=rangeReport.rangeYAxis style="width:100px"/>
 232         </div>
 233
 234         <div class="fn-ebz-container" >
 235                 <label class="fn-ebz-text-label">Chart Title</label><BR>
 236                 <input type="text" name="chartTitle"  maxlength=50 ng-model="rangeReport.rangeChartGroup" style="width:200px"/>
 237         </div>
 238
 239         <div class="fn-ebz-container" >
 240                 <label class="fn-ebz-text-label">Color</label><BR>
 241                 <div class="form-field" att-select="rangeColors" ng-model="rangeReport.rangeColorJSON" placeholder="Select an Option" show-input-filter="true"></div>
 242         </div>
 243
 244         <div class="fn-ebz-container" >
 245                 <label class="fn-ebz-text-label">Line Type</label><BR>
 246                 <div class="form-field" att-select="lineTypes" ng-model="rangeReport.rangeLineTypeJSON" placeholder="Select an Option" show-input-filter="true"></div>
 247         </div>
 248
 249         <div class="fn-ebz-container" ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart' ||
 250                         reportRunJson.chartTypeJSON.value=='AnnotationChart'" style="position:relative; top: -8px;">
 251                 <label class="fn-ebz-text-label">Area</label><BR>
 252                 <input type="checkbox" ng-model="rangeReport.showAsArea" att-checkbox data-ng-value="true">
 253         </div>
 254
 255         <div class="fn-ebz-container" style="position:relative; top: 25px;">
 256         <a href="javascript:void(0)" ng-show="{{$index==0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32"
 257                         ng-click="addRangeAxisRow(rangeReport);" >Add</a>
 258         <a href="javascript:void(0)" ng-show="{{$index>0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32" ng-click="removeRangeAxisRow($index);" >
 259                         Remove</a>
 260           </div>
 261           </div>
 262          </div>
 263         </div>
 264         <BR>
 265
 266 <accordion close-others="true" css="att-accordion--no-box">
 267         <accordion-group id="additionalOptions" heading="Additional Options"  child-length="10">
 268         <div class="fn-ebz-container">
 269                 <label class="fn-ebz-text-label">Primary Axis Label</label><BR>
 270                 <input type="text" name="prAxis" maxlength=50 ng-model="reportRunJson.primaryAxisLabel" style="width:210px"/>
 271         </div>
 272         <div class="fn-ebz-container" >
 273                 <label class="fn-ebz-text-label">Secondary Axis Label</label><BR>
 274                 <input type="text" name="secAxis" maxlength=75 ng-model="reportRunJson.secondaryAxisLabel"  style="width:210px"/>
 275         </div>
 276         <BR>
 277         <div class="fn-ebz-container" >
 278                 <label class="fn-ebz-text-label">Range Axis Minimum Range</label><BR>
 279                 <input type="text" name="rAxisMinRange" only-digits ng-model="reportRunJson.minRange" style="width:210px"/>
 280         </div>
 281         <div class="fn-ebz-container">
 282                 <label class="fn-ebz-text-label">Maximum Range</label><BR>
 283                 <input type="text" name="rAxisMaxRange" only-digits ng-model="reportRunJson.maxRange"  ng-maxLength="35" style="width:210px"/>
 284         </div><BR>
 285         </accordion-group>
 286 </accordion>
 287
 288
 289
 290
 291 <div ng-show="reportRunJson.chartType=='BarChart3D'">
 292
 293         <accordion close-others="true" css="att-accordion--no-box">
 294         <accordion-group id="accBar" heading="Bar Chart Options"  child-length="10">
 295
 296
 297         <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 298                 <div class="fn-ebz-container" style="position:relative;margin:10px;" >
 299                         <label class="fn-ebz-text-label">Orientation</label><BR>
 300                         <span><input  name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation"  data-ng-value="true"/>Vertical</span>
 301                         <span><input name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" data-ng-value="false"/>Horizontal</span>
 302                 </div>
 303
 304         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 305                 <label class="fn-ebz-text-label">Stacked</label><BR>
 306                 <span><input  name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart"  data-ng-value="true"/>Yes</span>
 307                 <span><input name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" data-ng-value="false"/>No</span>
 308         </div>
 309
 310         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 311                 <label class="fn-ebz-text-label">Show Controls</label><BR>
 312                 <span><input  name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls"  data-ng-value="true"/>Yes</span>
 313                 <span><input name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" data-ng-value="false"/>No</span>
 314         </div>
 315
 316         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 317                 <label class="fn-ebz-text-label">XAxis Date Type</label><BR>
 318                 <span><input  name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType"  data-ng-value="true"/>Yes</span>
 319                 <span><input name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" data-ng-value="false"/>No</span>
 320         </div>
 321
 322         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 323                 <label class="fn-ebz-text-label">Display less XAxis tickers</label><BR>
 324                 <span><input  name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"  data-ng-value="true"/>Yes</span>
 325                 <span><input name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" data-ng-value="false"/>No</span>
 326         </div><BR>
 327
 328         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 329                 <label class="fn-ebz-text-label">Is Time Axis?</label><BR>
 330                 <span><input  name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"  data-ng-value="true"/>Yes</span>
 331                 <span><input name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" data-ng-value="false"/>No</span>
 332         </div>
 333
 334         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 335                 <label class="fn-ebz-text-label">Log Scale (Y Axis)</label><BR>
 336                 <span><input type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" att-checkbox data-ng-value="true"></span>
 337
 338         </div>
 339  </div>
 340
 341   </accordion-group>
 342 </accordion>
 343 </div>
 344         {{reportRunJson.chartType}}
 345         <div ng-show="reportRunJson.chartType=='TimeSeriesChart'">
 346          <accordion close-others="true" css="att-accordion--no-box">
 347                 <accordion-group id="accTimeChart"  heading="Time Series Chart Options"  child-length="10">
 348
 349                 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 350                         <div style="margin-left:5px">
 351                         <div class="fn-ebz-container">
 352                                 <label class="fn-ebz-text-label">Render as</label><BR>
 353                                 <span><input  name="renderAs" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"  value="line"/>Line</span>
 354                                 <span><input name="orient" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" value="area"/>Area</span>
 355                         </div>
 356
 357                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 358                         <label class="fn-ebz-text-label">X Axis Label</label><BR>
 359                         <span><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" att-checkbox data-ng-value="true"></span>
 360                 </div><BR>
 361
 362                 <div class="fn-ebz-container" style="position:relative;bottom:10px;">
 363                         <label class="fn-ebz-text-label">X Axis <br>Tickers</label><BR>
 364                         <span style="position:relative;top:10px;"><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" att-checkbox data-ng-value="true"></span>
 365                 </div>
 366
 367                 <div class="fn-ebz-container" style="position:relative;margin:20px;">
 368                         <label class="fn-ebz-text-label">Is Time Axis?</label><BR>
 369                         <span><input  name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"  data-ng-value="true"/>Yes</span>
 370                         <span><input name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" data-ng-value="false"/>No</span>
 371                 </div>
 372
 373                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 374                         <label class="fn-ebz-text-label">Multi Series?</label><BR>
 375                         <span><input  name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"  data-ng-value="true"/>Yes</span>
 376                         <span><input name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" data-ng-value="false"/>No</span>
 377                 </div>
 378                  </div>
 379                 </div>
 380
 381          </accordion-group>
 382         </accordion>
 383
 384         </div>
 385
 386         <div>
 387
 388                 <accordion close-others="true" css="att-accordion--no-box">
 389                 <accordion-group id="accFlexTimeChart"  heading="Flex Time Series Chart Options"  child-length="10">
 390
 391                 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 392                         <div style="margin-left:5px">
 393                 <div class="fn-ebz-container">
 394                         <label class="fn-ebz-text-label">Zoom-In Window</label><BR>
 395                         <span><input type="text" name="zWindow" only-digits maxlength=3 ng-model="reportRunJson.flexTimeSeriesChartOptions.zoomIn"></span>
 396                 </div>
 397
 398                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 399                         <label class="fn-ebz-text-label">Time Axis Type</label><BR>
 400                         <span><input  name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"  value="weekly"/>Weekly</span>
 401                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="daily"/>Daily</span>
 402                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="hourly"/>Hourly</span>
 403                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="30min"/>30 Min</span>
 404                 </div>
 405           </div>
 406          </div>
 407                 </accordion-group>
 408         </accordion>
 409
 410         </div>
 411
 412
 413
 414
 415
 416
 417
 418
 419         <accordion close-others="true" css="att-accordion--no-box">
 420         <accordion-group id="accCommonOptions"  heading="Common Options"  child-length="10">
 421
 422         <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 423         <div style="margin-left:5px">
 424         <div class="fn-ebz-container">
 425                 <label class="fn-ebz-text-label">Legend Angle</label><BR>
 426                 <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up45"/>up 45&deg;</span>
 427                 <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up90"/>up 90&deg;</span>
 428             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down45"/>down 45&deg;</span>
 429             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down90"/>down 90&deg;</span>
 430             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="standard"/>Standard</span>
 431         </div>
 432
 433         <div class="fn-ebz-container" style="position:relative;margin:15px;">
 434                 <label class="fn-ebz-text-label">Legend Position</label><BR>
 435                 <span><input  name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition"  value="top"/>Top</span>
 436                 <span><input name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" value="bottom"/>Bottom</span>
 437         </div><BR>
 438
 439         <div class="fn-ebz-container">
 440                 <label class="fn-ebz-text-label">Legend</label><BR>
 441                 <span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="false"/>Yes</span>
 442                 <span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="true"/>No</span>
 443         </div>
 444
 445         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 446                 <label class="fn-ebz-text-label">Animation</label><BR>
 447                 <span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="true" />Yes</span>
 448                 <span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="false"/>No</span>
 449         </div><BR>
 450
 451         <div class="fn-ebz-container">
 452                 <label class="fn-ebz-text-label">Top Margin</label><BR>
 453                 <input type="text" name="reportRunJson.commonChartOptions.topMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.topMargin" style="width:210px"/>
 454         </div>
 455         <div class="fn-ebz-container">
 456                 <label class="fn-ebz-text-label">Bottom Margin</label><BR>
 457                 <input type="text" name="reportRunJson.commonChartOptions.bottomMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.bottomMargin"  style="width:210px"/>
 458         </div>
 459         <div class="fn-ebz-container">
 460                 <label class="fn-ebz-text-label">Left Margin</label><BR>
 461                 <input type="text" name="reportRunJson.commonChartOptions.leftMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:210px"/>
 462         </div>
 463         <div class="fn-ebz-container">
 464                 <label class="fn-ebz-text-label">Right Margin</label><BR>
 465                 <input type="text" name="reportRunJson.commonChartOptions.rightMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:210px">
 466           </div><BR>
 467          </div>
 468         </div>
 469  </accordion-group>
 470 </accordion>
 471         <br/><br/>
 472         <a href="javascript:void(0)" att-button btn-type="primary" att-accessibility-click="13,32" ng-click="saveChartData();">Save</a>
 473         <a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y" att-button btn-type="primary" att-accessibility-click="13,32">Run</a>
 474 </div>
 475
 476 <div>
 477     <b2b-expanders class="mpc-expanders" is-open="additionalOptionOpen">
 478         <b2b-expander-heading>
 479             <div class="row">
 480                 <div class="span6">
 481                     <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !additionalOptionOpen, 'b2b-toggle-header-inactive': additionalOptionOpen } ">Additional Options</div>
 482                     <p class="p-small">
 483                     </p>
 484                 </div>
 485                 <div style="position: absolute;right: 250px;" class="span1">
 486                         <i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
 487                 </div>
 488             </div>
 489         </b2b-expander-heading>
 490         <b2b-expander-body>
 491             <div>
 492                                 <div id="RangeTable">
 493                                 <table>
 494                                         <thead>
 495                                             <tr>
 496                                                 <th width="30%">Primary Axis Label</th>
 497                                                 <th  width="30%">Secondary Axis Label</th>
 498                                                 <th></th>
 499                                             </tr>
 500                                         </thead>
 501                                     <tbody>
 502                                         <tr>
 503                                             <td>
 504                                                 <input type="text" name="primaryAxisLabel" ng-model="reportRunJson.primaryAxisLabel" style="width:200px;">
 505                                             </td>
 506                                             <td>
 507                                                 <input type="text" name="secondaryAxisLabel" ng-model="reportRunJson.secondaryAxisLabel" style="width:200px;">
 508                                             </td>
 509                                         </tr>
 510                                     </tbody>
 511                                 </table>
 512                                 <table>
 513                                         <thead>
 514                                             <tr>
 515                                                 <th width="30%">Range Axis Minimum Range</th>
 516                                                 <th  width="30%">Maximum Range</th>
 517                                                 <th></th>
 518                                             </tr>
 519                                         </thead>
 520                                     <tbody>
 521                                         <tr>
 522                                             <td>
 523                                                 <input type="text" name="minRange" ng-model="reportRunJson.minRange" style="width:200px;">
 524                                             </td>
 525                                             <td>
 526                                                 <input type="text" name="maxRange" ng-model="reportRunJson.maxRange" style="width:200px;">
 527                                             </td>
 528                                         </tr>
 529                                     </tbody>
 530                                 </table>
 531                                 </div>
 532                         </div>
 533         </b2b-expander-body>
 534     </b2b-expanders>
 535
 536         <!-- BAR CHART OPTION SECTION STARTS HERE -->
 537     <b2b-expanders ng-show="reportRunJson.chartType=='BarChart3D'" class="mpc-expanders" is-open="barChartOptionOpen">
 538         <b2b-expander-heading>
 539             <div class="row">
 540                 <div class="span6">
 541                     <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !barChartOptionOpen, 'b2b-toggle-header-inactive': barChartOptionOpen } ">Bar Chart Options</div>
 542                     <p class="p-small">
 543                     </p>
 544                 </div>
 545                 <div style="position: absolute;right: 250px;" class="span1">
 546                         <i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
 547                 </div>
 548             </div>
 549         </b2b-expander-heading>
 550         <b2b-expander-body>
 551             <div>
 552                                 <div id="RangeTable">
 553                                 <table>
 554                                         <thead>
 555                                             <tr>
 556                                                 <th width="25%">Orientation</th>
 557                                                 <th  width="18%">Stacked</th>
 558                                                 <th  width="18%">Show Controls</th>
 559                                                 <th  width="18%">XAxis Date Type</th>
 560                                                 <th  width="21%">Display less XAxis tickers</th>
 561                                                 <th></th>
 562                                             </tr>
 563                                         </thead>
 564                                     <tbody>
 565                                         <tr>
 566                                             <td>
 567                                                             <label for="optionsOrientationVertical" class="radio">
 568                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationVertical" name="optionsOrientationVertical" value="true">
 569                                                                 <i class="skin"></i>
 570                                                                 <span>Vertical</span>
 571                                                             </label>
 572                                                             <label for="optionsOrientationHorizontal" class="radio">
 573                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationHorizontal" name="optionsOrientationHorizontal" value="false">
 574                                                                 <i class="skin"></i>
 575                                                                 <span>Horizontal</span>
 576                                                             </label>
 577                                             </td>
 578
 579                                             <td>
 580                                                             <label for="optionsStackedYes" class="radio">
 581                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedYes" name="optionsStackedYes" value="true">
 582                                                                 <i class="skin"></i>
 583                                                                 <span>Yes</span>
 584                                                             </label>
 585                                                             <label for="optionsStackedNo" class="radio">
 586                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedNo" name="optionsStackedNo" value="false">
 587                                                                 <i class="skin"></i>
 588                                                                 <span>No</span>
 589                                                             </label>
 590                                             </td>
 591                                             <td>
 592                                                             <label for="optionsShowControlYes" class="radio">
 593                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlYes" name="optionsShowControlYes" value="true">
 594                                                                 <i class="skin"></i>
 595                                                                 <span>Yes</span>
 596                                                             </label>
 597                                                             <label for="optionsShowControlNo" class="radio">
 598                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlNo" name="optionsShowControlNo" value="false">
 599                                                                 <i class="skin"></i>
 600                                                                 <span>No</span>
 601                                                             </label>
 602                                             </td>
 603                                             <td>
 604                                                             <label for="optionsXAxisDateTypeYes" class="radio">
 605                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeYes" name="optionsXAxisDateTypeYes" value="true">
 606                                                                 <i class="skin"></i>
 607                                                                 <span>Yes</span>
 608                                                             </label>
 609                                                             <label for="optionsXAxisDateTypeNo" class="radio">
 610                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeNo" name="optionsXAxisDateTypeNo" value="false">
 611                                                                 <i class="skin"></i>
 612                                                                 <span>No</span>
 613                                                             </label>
 614                                             </td>
 615                                             <td>
 616                                                             <label for="optionsMinimizeXAxisTickersYes" class="radio">
 617                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersYes" name="optionsMinimizeXAxisTickersYes" value="true">
 618                                                                 <i class="skin"></i>
 619                                                                 <span>Yes</span>
 620                                                             </label>
 621                                                             <label for="optionsMinimizeXAxisTickersNo" class="radio">
 622                                                                 <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersNo" name="optionsMinimizeXAxisTickersNo" value="false">
 623                                                                 <i class="skin"></i>
 624                                                                 <span>No</span>
 625                                                             </label>
 626                                             </td>
 627                                         </tr>
 628                                     </tbody>
 629                                 </table>
 630                                 <table>
 631                                         <thead>
 632                                             <tr>
 633                                                 <th width="25%">Is Time Axis?</th>
 634                                                 <th  width="25%">Log Scale (Y Axis)</th>
 635                                                 <th></th>
 636                                             </tr>
 637                                         </thead>
 638                                     <tbody>
 639                                         <tr>
 640                                             <td>
 641                                                     <label for="optionsTimeAxisYes" class="radio">
 642                                                         <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisYes" name="optionsTimeAxisYes" value="true">
 643                                                         <i class="skin"></i>
 644                                                         <span>Yes</span>
 645                                                     </label>
 646                                                     <label for="optionsTimeAxisNo" class="radio">
 647                                                         <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisNo" name="optionsTimeAxisNo" value="false">
 648                                                         <i class="skin"></i>
 649                                                         <span>No</span>
 650                                                     </label>
 651                                             </td>
 652                                             <td>
 653                                                 <label for="logScaleYAxisCheckBox" class="checkbox">
 654                                                     <input id="logScaleYAxisCheckBox" type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" /><i class="skin"></i><span></span>
 655                                                 </label>
 656                                             </td>
 657                                         </tr>
 658                                     </tbody>
 659                                 </table>
 660                                 </div>
 661                         </div>
 662         </b2b-expander-body>
 663     </b2b-expanders>
 664         <!-- BAR CHART OPTION SECTION ENDS HERE -->
 665
 666         <!-- TIME SERIES CHART OPTION SECTION STARTS HERE -->
 667     <b2b-expanders ng-show="reportRunJson.chartType=='TimeSeriesChart'" class="mpc-expanders" is-open="timeSeriesChartOptionOpen">
 668         <b2b-expander-heading>
 669             <div class="row">
 670                 <div class="span6">
 671                     <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !timeSeriesChartOptionOpen, 'b2b-toggle-header-inactive': timeSeriesChartOptionOpen } ">Time Series Chart Options</div>
 672                     <p class="p-small">
 673                     </p>
 674                 </div>
 675                 <div style="position: absolute;right: 250px;" class="span1">
 676                         <i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
 677                 </div>
 678             </div>
 679         </b2b-expander-heading>
 680         <b2b-expander-body>
 681             <div>
 682                                 <div>
 683                                 <table>
 684                                         <thead>
 685                                             <tr>
 686                                                 <th width="20%">Render as</th>
 687                                                 <th width="20%">X Axis Label</th>
 688                                                 <th width="20%">X Axis Tickers</th>
 689                                                 <th width="20%">Is Time Axis?</th>
 690                                                 <th width="20%">Multi Series</th>
 691                                             </tr>
 692                                         </thead>
 693                                     <tbody>
 694                                         <tr>
 695                                             <td>
 696                                                     <label for="optionsLineChartRendererLine" class="radio">
 697                                                         <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererLine" name="optionsLineChartRendererLine" value="line">
 698                                                         <i class="skin"></i>
 699                                                         <span>Line</span>
 700                                                     </label>
 701                                                     <label for="optionsLineChartRendererArea" class="radio">
 702                                                         <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererArea" name="optionsLineChartRendererArea" value="area">
 703                                                         <i class="skin"></i>
 704                                                         <span>Area</span>
 705                                                     </label>
 706                                             </td>
 707                                             <td>
 708                                                 <label for="xAxisLabelCheckBox" class="checkbox">
 709                                                     <input id="xAxisLabelCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" /><i class="skin"></i><span></span>
 710                                                 </label>
 711                                             </td>
 712                                             <td>
 713                                                 <label for="addXAxisTickerCheckBox" class="checkbox">
 714                                                     <input id="addXAxisTickerCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" /><i class="skin"></i><span></span>
 715                                                 </label>
 716                                             </td>
 717                                             <td>
 718                                                 <label for="isTimeAxisCheckBox" class="checkbox">
 719                                                     <input id="isTimeAxisCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" /><i class="skin"></i><span></span>
 720                                                 </label>
 721                                             </td>
 722                                             <td>
 723                                                 <label for="multiSeriesCheckBox" class="checkbox">
 724                                                     <input id="multiSeriesCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" /><i class="skin"></i><span></span>
 725                                                 </label>
 726                                             </td>
 727                                         </tr>
 728                                     </tbody>
 729                                 </table>
 730                                 </div>
 731                         </div>
 732         </b2b-expander-body>
 733     </b2b-expanders>
 734         <!-- TIME SERIES CHART OPTION SECTION ENDS HERE -->
 735
 736     <b2b-expanders class="mpc-expanders" is-open="commonOptionOpen">
 737         <b2b-expander-heading>
 738             <div class="row">
 739                 <div class="span6">
 740                     <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !commonOptionOpen, 'b2b-toggle-header-inactive': commonOptionOpen } ">Common Options</div>
 741                     <p class="p-small">
 742                     </p>
 743                 </div>
 744                 <div style="position: absolute;right: 250px;" class="span1">
 745                         <i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
 746                 </div>
 747             </div>
 748         </b2b-expander-heading>
 749         <b2b-expander-body>
 750             <div >
 751                 <div>
 752                                         <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 753                                                 <div style="margin-left:0px">
 754                                                         <table>
 755                                                         <thead>
 756                                                             <tr>
 757                                                                 <th>Legend Angle</th>
 758                                                                 <th>Legend Position</th>
 759                                                             </tr>
 760                                                         </thead>
 761                                                     <tbody>
 762                                                         <tr>
 763                                                                 <fieldset role="radiogroup" radio-group-accessibility>
 764                                                             <td>
 765                                                             <label for="optionsRadios1" class="radio">
 766                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios1" name="optionsRadio1" value="up45">
 767                                                                 <i class="skin"></i>
 768                                                                 <span>up 45&deg;</span>
 769                                                             </label>
 770                                                             <label for="optionsRadios2" class="radio">
 771                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios2" name="optionsRadio2" value="up90">
 772                                                                 <i class="skin"></i>
 773                                                                 <span>up 90&deg;</span>
 774                                                             </label>
 775                                                             <label for="optionsRadios3" class="radio">
 776                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios3" name="optionsRadio3" value="down45">
 777                                                                 <i class="skin"></i>
 778                                                                 <span>down 45&deg;</span>
 779                                                             </label>
 780                                                             <label for="optionsRadios4444" class="radio">
 781                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios4444" name="optionsRadio44" value="down90">
 782                                                                 <i class="skin"></i>
 783                                                                 <span>down 90&deg;</span>
 784                                                             </label>
 785                                                             <label for="optionsRadios5555" class="radio">
 786                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios5555" name="optionsRadio55" value="standard">
 787                                                                 <i class="skin"></i>
 788                                                                 <span>Standard</span>
 789                                                             </label>
 790                                                             </td>
 791                                                             </fieldset>
 792
 793                                                             <fieldset role="radiogroup" radio-group-accessibility>
 794                                                             <td>
 795                                                             <label for="optionsRadiosTop" class="radio">
 796                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosTop" name="optionsRadioTop" value="top">
 797                                                                 <i class="skin"></i>
 798                                                                 <span>Top</span>
 799                                                             </label>
 800                                                             <label for="optionsRadiosBottom" class="radio">
 801                                                                 <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosBottom" name="optionsRadioBottom" value="bottom">
 802                                                                 <i class="skin"></i>
 803                                                                 <span>Bottom</span>
 804                                                             </label>
 805                                                             </td>
 806                                                             </fieldset>
 807                                                         </tr>
 808                                                     </tbody>
 809                                                 </table>
 810
 811
 812                                                 <table>
 813                                                 <thead>
 814                                                     <tr>
 815                                                         <th width="20%">Legend</th>
 816                                                         <th width="20%">Animation</th>
 817                                                         <th></th>
 818                                                     </tr>
 819                                                 </thead>
 820                                             <tbody>
 821                                                 <tr>
 822                                                         <fieldset role="radiogroup" radio-group-accessibility>
 823                                                     <td>
 824                                                     <label for="optionsRadiosHideLegendFalse" class="radio">
 825                                                         <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendFalse" name="optionsRadiosHideLegendFalse" value="false">
 826                                                         <i class="skin"></i>
 827                                                         <span>Yes</span>
 828                                                     </label>
 829                                                     <label for="optionsRadiosHideLegendTrue" class="radio">
 830                                                         <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendTrue" name="optionsRadiosHideLegendTrue" value="true">
 831                                                         <i class="skin"></i>
 832                                                         <span>No</span>
 833                                                     </label>
 834                                                     </td>
 835                                                     </fieldset>
 836
 837                                                     <fieldset role="radiogroup" radio-group-accessibility>
 838                                                     <td>
 839                                                     <label for="optionsRadiosAnimateChartTrue" class="radio">
 840                                                         <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartTrue" name="optionsRadiosAnimateChartTrue" value="true">
 841                                                         <i class="skin"></i>
 842                                                         <span>Yes</span>
 843                                                     </label>
 844                                                     <label for="optionsRadiosAnimateChartFalse" class="radio">
 845                                                         <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartFalse" name="optionsRadiosAnimateChartFalse" value="false">
 846                                                         <i class="skin"></i>
 847                                                         <span>No</span>
 848                                                     </label>
 849                                                     </td>
 850                                                     </fieldset>
 851                                                     <td>
 852                                                     </td>
 853                                                 </tr>
 854                                             </tbody>
 855                                         </table>
 856
 857                                         <table>
 858                                                 <thead>
 859                                                     <tr>
 860                                                         <th width="25%">Top Margin</th>
 861                                                         <th width="25%">Bottom Margin</th>
 862                                                         <th width="25%">Left Margin</th>
 863                                                         <th width="25%">Right Margin</th>
 864                                                     </tr>
 865                                                 </thead>
 866                                             <tbody>
 867                                                 <tr>
 868                                                     <td>
 869                                                         <input type="text" name="topMargin" ng-model="reportRunJson.commonChartOptions.topMargin" style="width:200px;">
 870                                                     </td>
 871                                                     <td>
 872                                                         <input type="text" name="bottomMargin" ng-model="reportRunJson.commonChartOptions.bottomMargin" style="width:200px;">
 873                                                     </td>
 874                                                     <td>
 875                                                         <input type="text" name="leftMargin" ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:200px;">
 876                                                     </td>
 877                                                     <td>
 878                                                         <input type="text" name="rightMargin" ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:200px;">
 879                                                     </td>
 880                                                 </tr>
 881                                             </tbody>
 882                                         </table>
 883                                 </div>
 884             </div>
 885            </div>
 886         </b2b-expander-body>
 887     </b2b-expanders>
 888
 889 </div>
 890 </div>
 891         <div>
 892         <button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small" ng-click="saveChartData();">Save</button>
 893         <a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y">
 894         <button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small">Run</button>
 895         </a>
 896         </div>
 897 </div>