community-app/app/views/reports/run_reports.html

<div class="content-container">
    <ul class="breadcrumb">
        <li><a href="#/reports/all">{{'label.anchor.reports' | translate}}</a></li>
        <li class="active">{{'label.anchor.runreport' | translate}}</li>
    </ul>
	<div class="card well" ng-controller="RunReportsController">
    <api-validate></api-validate>
	    <div class="span gray-head" style="margin-left:0%;height:30px;">
	          <span style="margin-left: 10px;font-size:20px;">
	                <strong>{{''+reportName+'' | translate}}</strong>
	                <button type="button" class="btn btn-primary pull-right" ng-show="checkStatus()"
	                        ng-click="isCollapsed=!isCollapsed"><i class="fa fa-chevron-down "></i>{{
	                    'label.button.parameters' | translate }}
	                </button>
	                <button type="button" data-ng-hide="hideChart" class="btn btn-primary pull-right" ng-click="setTypePie()">
	                    {{ 'label.input.piechart' | translate }}
	                </button>
	                <button type="button" data-ng-hide="hideChart" class="btn btn-primary pull-right" ng-click="setTypeBar()">
	                    <i class="fa fa-bar-chart-o"></i>&nbsp;&nbsp;{{ 'label.input.barchart' | translate }}
	                </button>
	          </span>
	    </div>
	    <div ng-hide="isCollapsed" class="alert-block form-horizontal">
	        <br>

	        <div class="form-group info" ng-repeat="reportParam in reportParams">
	            <label class="control-label col-sm-2" for="{{reportParam.variable}}">{{ reportParam.label | translate}}</label>

                <div class="col-sm-3">
                    <select chosen="reportParam.selectOptions" id="{{reportParam.inputName}}" ng-model="formData[reportParam.inputName]"
							ng-options="selectOption.id as selectOption.name for selectOption in reportParam.selectOptions"
							value="{{selectOption.id}}"
							class="form-control input-xlarge" ng-change="getDependencies(reportParam)" required>
	                    <option value="">--{{"label.menu.selectone" | translate}}--</option>
	                </select>
	            </div>
	        </div>
	        <div class="form-group info" ng-repeat="reportTextParam in reportTextParams">
	            <label class="control-label col-sm-2" for="{{reportTextParam.variable}}">{{ reportTextParam.label |
	                translate}}</label>

	            <div class="col-sm-3">
	                <input style="width: 257px" id="{{reportTextParam.inputName}}" type="text" ng-model="formData[reportTextParam.inputName]"  class="form-control" required late-Validate/>
	            </div>
	        </div>
	        <div class="form-group info" ng-repeat="reportDateParam in reportDateParams">
	            <label class="control-label col-sm-2" for="{{reportDateParam.variable}}">{{ reportDateParam.label |
	                translate}}</label>

	            <div class="col-sm-3">
	                <input style="width: 257px" id="{{reportDateParam.inputName}}" type="text" datepicker-pop="yyyy-MM-dd"
	                       ng-model="formData[reportDateParam.inputName]" is-open="'opened'+$index" min="minDate"
	                        date-disabled="disabled(date, mode)"  class="form-control" required late-Validate/>
	            </div>
	        </div>
	        <div class="form-group info" ng-show="reportType == 'Pentaho'">
	            <label class="control-label col-sm-2" for="outputType">{{ 'label.input.outputtype' | translate }}</label>

	            <div class="col-sm-3">
	                <select class="form-control input-xlarge" ng-model="formData.outputType">
	                    <option value="HTML">{{ 'label.input.showreport' | translate }}</option>
	                    <option value="XLS">{{ 'label.input.exportexcel' | translate }}</option>
	                    <option value="XLSX">{{ 'label.input.exportexcel2' | translate }}</option>
	                    <option value="CSV">{{ 'label.input.exportcsv' | translate }}</option>
	                    <option value="PDF">{{ 'label.input.pdfformat' | translate }}</option>
	                </select>
	            </div>
	        </div>
	        <div class="form-group info">
	            <label class="control-label col-sm-2" for="decimalsChoice">{{ 'label.input.decimalplace' | translate }}</label>
				<div class="col-sm-3">
					<select id="decimalsChoice"  class="form-control input-xlarge" ng-model="decimalsChoice">
			            <option value="">{{ 'label.input.no.decimalplaces' | translate }}</option>
			            <option value="4">4</option>
			            <option value="3">3</option>
			            <option value="2">2</option>
			            <option value="1">1</option>
			            <option value="0">0</option>
			        </select>
				</div>
	        </div>

	        <span class="col-md-offset-3 paddedleft52px"><a id="run" ng-click="runReport()" class="btn btn-primary control"></i>
	            &nbsp;&nbsp;{{ 'label.button.runreport' | translate }}</a></span>
	    </div>
	    <div style="visibility: hidden">
	        <table>
	            <tr>
	                <td width="30%"></td>
	                <td>
	                    <input type="radio" ng-model="type" value="pie">{{'label.input.pie' |
	                    translate}}<br/>
	                <td>
	                <td>
	                    <input type="radio" ng-model="type" value="bar">{{'label.input.bar' |
	                    translate}}<br/>
	                </td>
	            </tr>
	        </table>
	    </div>
	    <div style="margin-left:-45px;overflow:auto">
	        <div data-ng-hide="hideChart">
	            <div data-ng-show="type=='pie'">
	                <nvd3-pie-chart
	                        data="chartData"
	                        id="pie"
	                        width="1100"
	                        height="900"
	                        x="xFunction()"
	                        y="yFunction()"
	                        tooltips="true"
	                        showLegend="true"
	                        showLabels="true"
	                        labelType="percent">
	                    <svg height="1300"></svg>
	                </nvd3-pie-chart>
	            </div>
	            <div style="margin-left: 100px" data-ng-show="type=='bar'">
	                <nvd3-multi-bar-chart
	                        data="barData"
	                        id="barchart"
	                        width="1000"
	                        height="600"
	                        showValues="true"
	                        tooltips="true"
	                        rotateLabels="90">
	                    <svg></svg>
	                </nvd3-multi-bar-chart>
	            </div>
	        </div>
	    </div>

	    <div data-ng-hide="hideTable">
	        <div class="pull-right" ng-show="reportType == 'Table'">
	            <button type="button" class="btn btn-primary" ng-csv="csvData"><i class="fa fa-file "></i>&nbsp;&nbsp;{{'label.button.exportcsv'
	                | translate }}
	            </button>
	        </div>
	        <div scroll>
	            <table style="width: 1200px;white-space:nowrap" class="table table-bordered" data-anchor>
	                <thead>
	                <tr class="graybg">
	                    <th ng-repeat="columnHeader in reportData.columnHeaders">{{columnHeader.columnName}}</th>
	                </tr>
	                </thead>
	                <tbody>
	                <!-- http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/ -->
	                <tr id="{{$index}}" data-ng-click="highlight($index)" ng-repeat="row in reportData.data track by $index">
						<td ng-repeat="col in row.row track by $index">
							<span ng-show="isDecimal($index)">{{col | FormatNumber:decimalsChoice}}</span>
							<span ng-hide="isDecimal($index)">{{col}}</span>
						</td>
	                </tr>
	                </tbody>
	            </table>
	        </div>
	    </div>
	    <div uib-collapse="hidePentahoReport" class="row alert-block span tab-content">
	        <br>
	        <iframe id="rptLoadingFrame" ng-src="{{baseURL}}" frameborder="0" width="100%" height="600px"></iframe>
	    </div>
	</div>
</div>