ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/report_chart_wizard.html

   1 <div style="color:#2ca02c" ng-show="successSubmit">Your configurations have been successfully submitted</div>
   2
   3 <div  style="min-height:500px" data-ng-init="init()">
   4         <div class="fn-ebz-container" >
   5                 <label class="fn-ebz-text-label">Chart Type</label><BR>
   6                 <div class="form-field" att-select="chartTypes" ng-model="reportRunJson.chartTypeJSON" placeholder="Select an Option" show-input-filter="true" ng-change="actionClicked()"></div>
   7         </div>
   8
   9
  10         <div class="fn-ebz-container" style="position:relative; top: -8px;">
  11                 <label class="fn-ebz-text-label">Animate</label><BR>
  12                         <div><input type="checkbox" ng-model="reportRunJson.animation" att-checkbox data-ng-value="true"></div>
  13         </div>
  14         <BR>
  15
  16         <div class="fn-ebz-container" >
  17                 <label class="fn-ebz-text-label">Width (Px)</label><BR>
  18                 <input type="text"  name="chartWidth"  maxlength=4  only-digits ng-model="reportRunJson.width" style="width:80px"/>
  19         </div>
  20
  21         <div class="fn-ebz-container" >
  22                 <label class="fn-ebz-text-label">Height (Px)</label><BR>
  23                 <input type="text" name="chartHeight" maxlength=4  only-digits ng-model="reportRunJson.height" style="width:80px"/>
  24         </div>
  25         <BR>
  26
  27         <div class="fn-ebz-container">
  28                 <label class="fn-ebz-text-label">Title</label><BR>
  29                 <span><input  name="tle" type="radio" ng-model="reportRunJson.showTitle"  data-ng-value="true"/>Show</span>
  30                 <span><input name="tle" type="radio" ng-model="reportRunJson.showTitle" data-ng-value="false"/>Hide</span>
  31         </div>
  32         <BR>
  33
  34
  35         <div class="fn-ebz-container" >
  36                 <label class="fn-ebz-text-label">Domain Axis</label><BR>
  37                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.domainAxisJSON" placeholder="Select an Option" show-input-filter="true"></div>
  38         </div>
  39
  40         <div class="fn-ebz-container" >
  41                 <label class="fn-ebz-text-label">Category</label><BR>
  42                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.categoryAxisJSON" placeholder="Select an Option" show-input-filter="true"></div>
  43         </div>
  44         <BR>
  45
  46 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
  47 <div ng-repeat="rangeReport in reportRunJson.rangeAxisList">
  48         <div style="margin-left:5px">
  49         <div class="fn-ebz-container">
  50                 <label class="fn-ebz-text-label">Range Axis</label><BR>
  51                 <div class="form-field" att-select="reportRunJson.chartColumnJSONList"
  52                         ng-model="rangeReport.rangeAxisLabelJSON" placeholder="Select an Option" show-input-filter="true"></div>
  53         </div>
  54
  55
  56         <div class="fn-ebz-container" >
  57                 <label class="fn-ebz-text-label">Y Axis</label><BR>
  58                 <input id="yaxs" type="text" name="yAxis" maxlength=50 ng-model=rangeReport.rangeYAxis style="width:100px"/>
  59         </div>
  60
  61         <div class="fn-ebz-container" >
  62                 <label class="fn-ebz-text-label">Chart Title</label><BR>
  63                 <input type="text" name="chartTitle"  maxlength=50 ng-model="rangeReport.rangeChartGroup" style="width:200px"/>
  64         </div>
  65
  66         <div class="fn-ebz-container" >
  67                 <label class="fn-ebz-text-label">Color</label><BR>
  68                 <div class="form-field" att-select="rangeColors" ng-model="rangeReport.rangeColorJSON" placeholder="Select an Option" show-input-filter="true"></div>
  69         </div>
  70
  71         <div class="fn-ebz-container" >
  72                 <label class="fn-ebz-text-label">Line Type</label><BR>
  73                 <div class="form-field" att-select="lineTypes" ng-model="rangeReport.rangeLineTypeJSON" placeholder="Select an Option" show-input-filter="true"></div>
  74         </div>
  75
  76         <div class="fn-ebz-container" ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart' ||
  77                         reportRunJson.chartTypeJSON.value=='AnnotationChart'" style="position:relative; top: -8px;">
  78                 <label class="fn-ebz-text-label">Area</label><BR>
  79                 <input type="checkbox" ng-model="rangeReport.showAsArea" att-checkbox data-ng-value="true">
  80         </div>
  81
  82         <div class="fn-ebz-container" style="position:relative; top: 25px;">
  83         <a href="javascript:void(0)" ng-show="{{$index==0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32"
  84                         ng-click="addRangeAxisRow(rangeReport);" >Add</a>
  85         <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);" >
  86                         Remove</a>
  87           </div>
  88           </div>
  89          </div>
  90         </div>
  91         <BR>
  92
  93 <accordion close-others="true" css="att-accordion--no-box">
  94         <accordion-group id="additionalOptions" heading="Additional Options"  child-length="10">
  95         <div class="fn-ebz-container">
  96                 <label class="fn-ebz-text-label">Primary Axis Label</label><BR>
  97                 <input type="text" name="prAxis" maxlength=50 ng-model="reportRunJson.primaryAxisLabel" style="width:210px"/>
  98         </div>
  99         <div class="fn-ebz-container" >
 100                 <label class="fn-ebz-text-label">Secondary Axis Label</label><BR>
 101                 <input type="text" name="secAxis" maxlength=75 ng-model="reportRunJson.secondaryAxisLabel"  style="width:210px"/>
 102         </div>
 103         <BR>
 104         <div class="fn-ebz-container" >
 105                 <label class="fn-ebz-text-label">Range Axis Minimum Range</label><BR>
 106                 <input type="text" name="rAxisMinRange" only-digits ng-model="reportRunJson.minRange" style="width:210px"/>
 107         </div>
 108         <div class="fn-ebz-container">
 109                 <label class="fn-ebz-text-label">Maximum Range</label><BR>
 110                 <input type="text" name="rAxisMaxRange" only-digits ng-model="reportRunJson.maxRange"  ng-maxLength="35" style="width:210px"/>
 111         </div><BR>
 112         </accordion-group>
 113 </accordion>
 114
 115
 116
 117
 118 <div ng-show="reportRunJson.chartTypeJSON.value=='BarChart3D'">
 119
 120         <accordion close-others="true" css="att-accordion--no-box">
 121         <accordion-group id="accBar" heading="Bar Chart Options"  child-length="10">
 122
 123
 124         <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 125                 <div class="fn-ebz-container" style="position:relative;margin:10px;" >
 126                         <label class="fn-ebz-text-label">Orientation</label><BR>
 127                         <span><input  name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation"  data-ng-value="true"/>Vertical</span>
 128                         <span><input name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" data-ng-value="false"/>Horizontal</span>
 129                 </div>
 130
 131         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 132                 <label class="fn-ebz-text-label">Stacked</label><BR>
 133                 <span><input  name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart"  data-ng-value="true"/>Yes</span>
 134                 <span><input name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" data-ng-value="false"/>No</span>
 135         </div>
 136
 137         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 138                 <label class="fn-ebz-text-label">Show Controls</label><BR>
 139                 <span><input  name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls"  data-ng-value="true"/>Yes</span>
 140                 <span><input name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" data-ng-value="false"/>No</span>
 141         </div>
 142
 143         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 144                 <label class="fn-ebz-text-label">XAxis Date Type</label><BR>
 145                 <span><input  name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType"  data-ng-value="true"/>Yes</span>
 146                 <span><input name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" data-ng-value="false"/>No</span>
 147         </div>
 148
 149         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 150                 <label class="fn-ebz-text-label">Display less XAxis tickers</label><BR>
 151                 <span><input  name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"  data-ng-value="true"/>Yes</span>
 152                 <span><input name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" data-ng-value="false"/>No</span>
 153         </div><BR>
 154
 155         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 156                 <label class="fn-ebz-text-label">Is Time Axis?</label><BR>
 157                 <span><input  name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"  data-ng-value="true"/>Yes</span>
 158                 <span><input name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" data-ng-value="false"/>No</span>
 159         </div>
 160
 161         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 162                 <label class="fn-ebz-text-label">Log Scale (Y Axis)</label><BR>
 163                 <span><input type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" att-checkbox data-ng-value="true"></span>
 164
 165         </div>
 166  </div>
 167
 168   </accordion-group>
 169 </accordion>
 170 </div>
 171
 172         <div ng-show="reportRunJson.chartTypeJSON.value=='TimeSeriesChart'">
 173         <!-- <div class="fn-ebz-text-label"><b>Time Series Chart Options</b></div><BR> -->
 174          <accordion close-others="true" css="att-accordion--no-box">
 175                 <accordion-group id="accTimeChart"  heading="Time Series Chart Options"  child-length="10">
 176
 177                 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 178                         <div style="margin-left:5px">
 179                         <div class="fn-ebz-container">
 180                                 <label class="fn-ebz-text-label">Render as</label><BR>
 181                                 <span><input  name="renderAs" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"  value="line"/>Line</span>
 182                                 <span><input name="orient" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" value="area"/>Area</span>
 183                         </div>
 184
 185                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 186                         <label class="fn-ebz-text-label">X Axis Label</label><BR>
 187                         <span><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" att-checkbox data-ng-value="true"></span>
 188                 </div><BR>
 189
 190                 <div class="fn-ebz-container" style="position:relative;bottom:10px;">
 191                         <label class="fn-ebz-text-label">X Axis <br>Tickers</label><BR>
 192                         <span style="position:relative;top:10px;"><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" att-checkbox data-ng-value="true"></span>
 193                 </div>
 194
 195                 <div class="fn-ebz-container" style="position:relative;margin:20px;">
 196                         <label class="fn-ebz-text-label">Is Time Axis?</label><BR>
 197                         <span><input  name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"  data-ng-value="true"/>Yes</span>
 198                         <span><input name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" data-ng-value="false"/>No</span>
 199                 </div>
 200
 201                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 202                         <label class="fn-ebz-text-label">Multi Series?</label><BR>
 203                         <span><input  name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"  data-ng-value="true"/>Yes</span>
 204                         <span><input name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" data-ng-value="false"/>No</span>
 205                 </div>
 206                  </div>
 207                 </div>
 208
 209          </accordion-group>
 210         </accordion>
 211
 212         </div>
 213
 214         <div ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart'">
 215
 216
 217                 <accordion close-others="true" css="att-accordion--no-box">
 218                 <accordion-group id="accFlexTimeChart"  heading="Flex Time Series Chart Options"  child-length="10">
 219
 220                 <!-- <div class="fn-ebz-text-label"><b>Flex Time Series Chart Options</b></div><BR>  -->
 221                 <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 222                         <div style="margin-left:5px">
 223                 <div class="fn-ebz-container">
 224                         <label class="fn-ebz-text-label">Zoom-In Window</label><BR>
 225                         <span><input type="text" name="zWindow" only-digits maxlength=3 ng-model="reportRunJson.flexTimeSeriesChartOptions.zoomIn"></span>
 226                 </div>
 227
 228                 <div class="fn-ebz-container" style="position:relative;margin:10px;">
 229                         <label class="fn-ebz-text-label">Time Axis Type</label><BR>
 230                         <span><input  name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"  value="weekly"/>Weekly</span>
 231                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="daily"/>Daily</span>
 232                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="hourly"/>Hourly</span>
 233                         <span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="30min"/>30 Min</span>
 234                 </div>
 235           </div>
 236          </div>
 237                 </accordion-group>
 238         </accordion>
 239
 240         </div>
 241
 242
 243
 244
 245
 246
 247
 248         <!-- <div class="fn-ebz-text-label"><b>Common Options</b></div><BR>  -->
 249
 250         <accordion close-others="true" css="att-accordion--no-box">
 251         <accordion-group id="accCommonOptions"  heading="Common Options"  child-length="10">
 252
 253         <div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
 254         <div style="margin-left:5px">
 255         <div class="fn-ebz-container">
 256                 <label class="fn-ebz-text-label">Legend Angle</label><BR>
 257                 <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up45"/>up 45&deg;</span>
 258                 <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up90"/>up 90&deg;</span>
 259             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down45"/>down 45&deg;</span>
 260             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down90"/>down 90&deg;</span>
 261             <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="standard"/>Standard</span>
 262         </div>
 263
 264         <div class="fn-ebz-container" style="position:relative;margin:15px;">
 265                 <label class="fn-ebz-text-label">Legend Position</label><BR>
 266                 <span><input  name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition"  value="top"/>Top</span>
 267                 <span><input name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" value="bottom"/>Bottom</span>
 268         </div><BR>
 269
 270         <div class="fn-ebz-container">
 271                 <label class="fn-ebz-text-label">Legend</label><BR>
 272                 <span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="false"/>Yes</span>
 273                 <span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="true"/>No</span>
 274         </div>
 275
 276         <div class="fn-ebz-container" style="position:relative;margin:10px;">
 277                 <label class="fn-ebz-text-label">Animation</label><BR>
 278                 <span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="true" />Yes</span>
 279                 <span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="false"/>No</span>
 280         </div><BR>
 281
 282         <div class="fn-ebz-container">
 283                 <label class="fn-ebz-text-label">Top Margin</label><BR>
 284                 <input type="text" name="reportRunJson.commonChartOptions.topMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.topMargin" style="width:210px"/>
 285         </div>
 286         <div class="fn-ebz-container">
 287                 <label class="fn-ebz-text-label">Bottom Margin</label><BR>
 288                 <input type="text" name="reportRunJson.commonChartOptions.bottomMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.bottomMargin"  style="width:210px"/>
 289         </div>
 290         <div class="fn-ebz-container">
 291                 <label class="fn-ebz-text-label">Left Margin</label><BR>
 292                 <input type="text" name="reportRunJson.commonChartOptions.leftMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:210px"/>
 293         </div>
 294         <div class="fn-ebz-container">
 295                 <label class="fn-ebz-text-label">Right Margin</label><BR>
 296                 <input type="text" name="reportRunJson.commonChartOptions.rightMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:210px">
 297           </div><BR>
 298          </div>
 299         </div>
 300  </accordion-group>
 301 </accordion>
 302         <br/><br/>
 303         <a href="javascript:void(0)" att-button btn-type="primary" att-accessibility-click="13,32" ng-click="saveChartData();">Save</a>
 304         <a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y" att-button btn-type="primary" att-accessibility-click="13,32">Run</a>
 305
 306
 307
 308
 309
 310 </div>
 311
 312
 313