<div class="row" style="padding-left:10px;margin-top:10px;margin-bottom:20px;">
    <div class="col-md-4" style="width:310px;">

	    <div class="row" style="padding-left:10px;width:250;">
		 <div class="col-md-12">			            
			    <strong>{{ "chart.type" | translate }}</strong><br/>
			    <ul class="chart-type" style="list-style-type: none;display: inline-block;padding:0; margin:0;width:300px;">
				    <li style="display: inline;padding:0; margin:0;">
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.pieclicked,'btnFalse':!clicked.pieclicked}" type="button" ng-click="setChartType('pieChart')" title="{{'chart.secteur' | translate}}">
						    <i class="fa fa-pie-chart fa-lg"></i>
					    </button>
				    </li>
				    <li  style="display: inline;padding:0; margin:0;" >
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.discrete,'btnFalse':!clicked.discrete}" type="button" ng-click="setChartType('discreteBarChart')" title="{{'chart.discrete' | translate}}">
						    <i class="fa fa-bar-chart-o fa-lg"></i>
					    </button>
				    </li>
				    <li style="display: inline;padding:0; margin:0;" >
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.line,'btnFalse':!clicked.line}" type="button" ng-click="setChartType('lineChart')" title="{{'chart.line' | translate}}">
						    <i class="fa fa-line-chart fa-lg"></i>
					    </button>
				    </li>
				    <li style="display: inline;padding:0; margin:0;" >				
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.stacked,'btnFalse':!clicked.stacked}" type="button" ng-click="setChartType('stackedAreaChart')" title="{{'chart.stacked' | translate}}">
						    <i class="fa fa-area-chart fa-lg"></i>
					    </button>
				    </li>
				    <li style="display: inline;padding:0; margin:0;" >
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.multi,'btnFalse':!clicked.multi}" type="button" ng-click="setChartType('multiBarChart')" title="{{'chart.multi_bar' | translate}}">
						    <i class="fa fa-bar-chart fa-lg"></i>
					    </button>
				    </li>
				    <li style="display: inline;padding:0; margin:0;" >
					    <button class="btn btn-default btn-sm" ng-class="{'btnTrue':clicked.scatter,'btnFalse':!clicked.scatter}" type="button" ng-click="setChartType('scatterChart')" title="{{'chart.scatter' | translate}}">
						    <i class="fa fa-circle fa-lg"></i>
					    </button>
				    </li>
			    <ul>
		    </div>
	    </div><br/>



	    <div class="row" style="padding-left:10px;">
		    <div class="col-md-10">
			<div ng-switch="configChart.choice.type">
			    <div ng-switch-when="pieChart">
				<strong>{{ "chart.attribute" | translate }}</strong>
			    </div>
			    <div ng-switch-default><strong>{{ "chart.xAxis" | translate }}</strong>
			    </div>
			</div>

			<div model-attribute fti="fti" res="res"></div>
			<span ng-show="attrChoices.visible">
			    <strong>{{ "chart.yAxis" | translate }}</strong><br/>
				<select style="width:250px;max-height: 100px;overflow:auto ; text-align:center;" ng-options="t.nametosearch for t in  attrChoices.attributes" multiple required="" ng-model="attrChoices.choice.y">
				</select>
			</span>
			<span ng-show="attrChoices.visibleSingle">
			    <strong>{{ "chart.yAxis" | translate }}</strong><br/>
			    <div model-attribute fti="fti" res="res2"></div>
			</span>
		    </div>
	    </div><br/>

	    <div class="col-md-12" style="margin-bottom:20px;" ng-if="(configChart.choice.type === 'discreteBarChart' ||
			configChart.choice.type === 'multiBarChart' || configChart.choice.type === 'pieChart')">
		<strong>{{ "chart.affichage" | translate }}</strong><br/>
		<div class="col-md-12">
		    <input type="radio" name="chart.affichage" ng-model="chartOpt.affichage" value="graph">
		    <span translate>chart.showgraph</span>
		    <br>
		    <input type="radio" name="chart.affichage" ng-model="chartOpt.affichage" value="table">
		    <span translate>chart.showtable</span>
		</div>
		<div class="col-md-12" ng-if="chartOpt.affichage === 'table'">
		    <label translate>chart.column</label>
		    <br>
		    <input type="checkbox" ng-model="chartOpt.showColonneNumber" style="margin-left:25px;"/>
		    <span translate>chart.count</span>
		    <br>
		    <input type="checkbox" ng-model="chartOpt.showColonnePercentage" style="margin-left:25px;"/>
		    <span translate>chart.percentage</span>
		</div>
	    </div>

	    <div class="row" style="padding-left:10px;">
		 <div class="col-md-10">
		    <span data-template="js\XG\widgets\utilities\chart\views\popoverChart.html"  ng-click="refreshOptions()" data-placement="right" data-animation="am-flip-x" bs-popover="">
			<button class="btn btn-default btn-sm" ><span class="fa fa-gears" title="{{ 'chart.options' | translate }}" ></span></button>
		    </span>
		    <button class="btn btn-default btn-sm" type="button" ng-disabled="!modifOpt"
			    ng-click="chartBuild()" ng-class="{'modified-options-true':modifOpt,'modified-options-false':!modifOpt}" >
			<span class="glyphicon glyphicon-refresh" title="{{ 'chart.update' | translate }}"  ></span>
		    </button>			
		    <button class="btn btn-default btn-sm" type="button" ng-click="downloadPNG()" >
			<span class="glyphicon glyphicon-download-alt" title="{{ 'chart.download' | translate }}" ></span>
		    </button>
		    <div class="btn btn-default btn-sm"
			 ng-if="(configChart.choice.type === 'discreteBarChart' ||
			    configChart.choice.type === 'multiBarChart' ||
			    configChart.choice.type === 'pieChart')" field-separator=";"
			 ng-csv="exportCsvFile()" add-bom="true" filename="stats.csv">
			<translate>common.export_csv</translate>
		    </div>
		</div>
	    </div>
    </div>

    <div class="col-md-8" style="padding:0;">
	<div class="col-md-12" >
		<img src="img/common/wait.gif" id="waitImg" ng-show="wait"/>
	</div>
	<nvd3 id="{{ graphid }}" style="margin-left:10px;" options="chartOpt"
	      data="chartdata" config="{extended : true, deepWatchOptions: true}"
	      api="api" ng-hide="wait || chartOpt.affichage !== 'graph'"></nvd3>
	<div  class="col-md-12" ng-hide="wait || chartOpt.affichage !== 'table' " style="max-height:450px;overflow-y:auto;">
	    <div class="title h4" style="width: auto; text-align: center; padding: 10px 0 10px 0;">
		{{ chartOpt.title.text }}
	    </div>
	    <table ng-table="tableParamsResults" class="table table-striped table-bordered" >
		<tr>
		    <th colspan="2" ng-if="configChart.choice.type === 'pieChart' ||
			    configChart.choice.type === 'discreteBarChart'"><translate>chart.label</translate></th>
		    <th colspan="2" ng-if="configChart.choice.type === 'multiBarChart'">
			{{ res2.alias + "/" + res.alias }}
		    </th>
		    <th colspan="2" ng-show="chartOpt.showColonneNumber" ><translate>chart.count</translate></th>
		    <th colspan="2" ng-show="chartOpt.showColonnePercentage"><translate>chart.percentage</translate></th>
		</tr>
		<tr style="text-align: center;" ng-repeat="element in $data" ng-if="configChart.choice.type === 'pieChart' ||
			    configChart.choice.type === 'discreteBarChart'">
		    <td colspan="2">
			<span>{{ element.label }}</span>
		    </td>
		    <td colspan="2" ng-show="chartOpt.showColonneNumber">
			<span>{{ integerFilter(element.count) }}</span>
		    </td>
		    <td colspan="2" ng-show="chartOpt.showColonnePercentage">
			<span>{{ DecimalFilter(element.value) }}</span>
		    </td>
		</tr>
		<tr style="text-align: center;" ng-repeat="element in $data" ng-if="configChart.choice.type === 'multiBarChart'">
		    <td colspan="2">
			<span>{{  element.key }}</span>
		    </td>
		    <td colspan="2" ng-show="chartOpt.showColonneNumber">
			<ul style="list-style-type: none;"> 
			    <li ng-repeat=" v in element.values ">
				<div class="col-md-6" style="padding:0px;">{{ v.x }}</div>
				<div class="col-md-6" style="padding:0px;">{{ integerFilter(v.count) }}</div>
			    </li>
			</ul>
		    </td>
		    <td colspan="2" ng-show="chartOpt.showColonnePercentage">
			<ul style="list-style-type: none;"> 
			    <li ng-repeat=" v in element.values ">
				<div class="col-md-6" style="padding:0px;">{{ v.x }}</div>
				<div class="col-md-6" style="padding:0px;">{{ DecimalFilter(v.y) }}</div>
			    </li>
			</ul>
		    </td>
		</tr>
	    </table>
	</div>
    </div>  
</div>