<div style="width:320px">

	<div class="form-inline">
		<div class="form-group">
			<label>Type de Representation: </label>
			<select class="form-control" data-ng-attr-size="22" ng-model="selectChart.config.typeChart" ng-change="cancelCharts()" >
			<option disabled selected hidden value> --choisir-- </option>
			<option value="CHARTPIE"> Secteur </option>
			<option value="CHLOROPLETH"> Carte de couleur</option>
			</select>
		</div>
	<!--button type="button" class="btn btn-default" ng-click="removeFile()"><i class="fa fa-minus" ></i></button-->
	</div>
	

<div class="form-group" >
	<!-- SECTEUR ZG --> 

  	<div  ng-show="selectChart.config.typeChart=='CHARTPIE'" style ="padding-top :5px;">
		<div class="row form-inline"  >
			<div class="col-xs-12 ">
				<label>Support : </label>
				<button ng-model="selectedcomponentsupport" style="width:150px;" class="form-control"  bs-options="'features.' + c.name +'.alias' |translate for c in component | orderBy:'label' | filter:myfilter"  ng-change="selectcomponetchangesupport() " placeholder="{{'query.placeholder_component' | translate}}" bs-select >
					Action <span class="" ></span>
				</button>
			</div>
		</div>
		<div class="row"  >
			<div class="col-xs-12 ">
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="ReseauRadios" id="ObjetsRadios10" value="DB" ng-model="selectChart.config.datasource" ng-click="cancelCharts()" >
						Toutes les données
					</label>
				</div>
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="ReseauRadios" id="ObjetsRadios0" value="SELECTION" ng-model="selectChart.config.datasource" ng-click="cancelCharts()"  >
						La selection 
					</label>
				</div>
			</div>
		</div>

		<div class="row "  >
				<div class="col-xs-12 ">
				 	<label>Relation : </label> 
					<select ng-model="selectedrelation" style="width:150px;" class="form-control"   ng-change="selectrelationchange() " 
					placeholder="{{'query.placeholder_component' | translate}}"  >
						<option disabled selected hidden value> --choisir-- </option>
						<option value="INTERSECT" > INTERSECT </option>
			
						<option value="{{rel.name}}"  ng-repeat="rel in selectedcomponentsupport.relations">{{rel.name}}</option>
					</select>
				</div>
		</div>
		<div class="row "  >
			<div class="col-xs-12 ">
				<label>Composant lié  : </label>
				<button ng-model="selectedcomponentlink" style="width:150px;" class="form-control"  bs-options="'features.' + c.name +'.alias' |translate for c in componentlink | orderBy:'label' "  ng-change="selectcomponentchangelink() " placeholder="{{'query.placeholder_component' | translate}}" bs-select >
						Action <span class="" ></span>
				</button>
			</div>
		</div>
		<div class="row "  >
		<div class="col-xs-12 ">
			<label> Choix Attribut  : </label>
			<button style="width:150px; " type="button" class="form-control" ng-model="selectedattributlink"  bs-options="icon.label for icon in attributslink | orderBy:'label'" placeholder="{{'query.attribute' | translate}}" ng-change="selectattributchangelink()" bs-select>
					Action <span class=""></span>
			</button>				
		</div>
		</div>  
		 <div class="row"  >
			<div class="col-xs-12 ">
				<div class="radio" style ="padding-top :5px; padding-left :20px">
					<label>
						<input type="radio" name="valueLegRadios" id="ObjetsRadios0" value="DISCRETE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()" >
							Discrete
					</label>
				</div>
				<div class="radio" style ="padding-left :20px" ng-show="selectedattributlink.att.type=='java.lang.Double' || selectedattributlink.att.type=='java.math.BigDecimal' || selectedattributlink.att.type=='java.lang.Integer' || selectedattributlink.att.type=='java.lang.Float'">
					<label>
						<input type="radio" name="valueLegRadios" id="ObjetsRadios10" value="INTERVALE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()" >
							Intervale régulier
					</label>
				</div>				
			</div>
		</div>

		<div ng-show="selectChart.config.valueLeg=='DISCRETE'">				
				<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="pieChartStyleDiscret()"><i class="fa fa-list"></i></button>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;">
					<div class="col-xs-12 ">
						<table style"height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="text" ng-model="row['val']">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
		</div>

		<div  ng-show="selectChart.config.valueLeg=='INTERVALE'">				
				<div class="row" >
					<div class="col-xs-12 ">
						<label>nb classe </label>
						<input type="number"  ng-model="iteration"  >
						<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="pieChartStyleInterv(iteration)"><i class="fa fa-list"></i></button>
					</div>
				</div>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;">
					<div class="col-xs-12 ">
						<table style="height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="number" ng-model="row['min']">
									</td>
									<td >
										<input type="number" ng-model="row['max']">
									</td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
		</div> 			
		<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="applyCharts()"><i class="fa fa-check-circle-o"></i></button>
		<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="cancelCharts()"><i class="fa fa-ban"></i></button>	
	</div> 

	<!--CHLOROPLETH-->
	<div  ng-show="selectChart.config.typeChart=='CHLOROPLETH'" style ="padding-top :5px;">
		<div class="row form-inline" >
			<div class="col-xs-12 " >
				<label>Support : </label>
				<button ng-model="selectedcomponentsupport" style="width:150px;" class="form-control"  bs-options="'features.' + c.name +'.alias' |translate for c in component | orderBy:'label' | filter:myfilter"  ng-change="selectcomponetchangesupport() " placeholder="{{'query.placeholder_component' | translate}}" bs-select >
					Action <span class="" ></span>
				</button>
			</div>
		</div>
		<div class="row"  >
			<div class="col-xs-12 ">
			<label>Données: </label>
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="dataSourceRadios" id="ObjetsRadios10" value="DB" ng-model="selectChart.config.datasource" ng-click="cancelCharts()" >
						Toutes les données
					</label>
				</div>
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="dataSourceRadios" id="ObjetsRadios0" value="SELECTION" ng-model="selectChart.config.datasource"  ng-click="cancelCharts()" >
						La selection 
					</label>
				</div>
			</div>
		</div>
		<div class="row"  >
			<div class="col-xs-12 ">
				<label>Valeurs: </label> 
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="ReseauRadios" id="ObjetsRadios10" value="VALUE" ng-model="selectChart.config.charttypevalue" ng-click="cancelCharts()" >
						Valeur directe
					</label>
				</div>
				<div class="radio" style ="padding-left :20px">
					<label>
						<input type="radio" name="ReseauRadios" id="ObjetsRadios0" value="LINKVALUE" ng-model="selectChart.config.charttypevalue" ng-click="cancelCharts()" >
						Valeurs liées
					</label>
				</div>
			</div>
		</div>

		<!--- CAS de DIRECTVALUE  -->
		<div ng-show="selectChart.config.charttypevalue=='VALUE'" >
			<div class="row form-inline"  >
				<div class="col-xs-12 ">
					<label>Attribut : </label> 
					<button style="width:150px;" type="button" class="form-control" ng-model="selectedattribut"  bs-options="icon.label for icon in attributssupport | orderBy:'label'" placeholder="{{'query.attribute' | translate}}" ng-change="selectattributchange()" placeholder="--choisir--" bs-select>
						Action <span class=""></span>
					</button>
				</div>
			</div>
			<div class="row"  >
				<div class="col-xs-12 ">
					<!-- <label>Type de Representation </label>
					{{selectedattribut.att.type }} -->
					<div class="radio" style ="padding-top :5px; padding-left :20px">
						<label>
							<input type="radio" name="valueLegRadios" id="ObjetsRadios0" value="DISCRETE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()" >
							Discrete
						</label>
					</div>
					<div class="radio" style ="padding-left :20px" ng-show="selectedattribut.att.type=='java.lang.Double' || selectedattribut.att.type=='java.math.BigDecimal' || selectedattribut.att.type=='java.lang.Integer' || selectedattribut.att.type=='java.lang.Float'">
						<label>
							<input type="radio" name="valueLegRadios" id="ObjetsRadios10" value="INTERVALE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()">
							Intervale régulier
						</label>
					</div>
					<div class="radio"  style ="padding-left :20px" ng-show="selectedattribut.att.type=='java.lang.Double' || selectedattribut.att.type=='java.math.BigDecimal' || selectedattribut.att.type=='java.lang.Integer' || selectedattribut.att.type=='java.lang.Float'">
						<label>
							<input type="radio"  name="valueLegRadios" id="ObjetsRadios10" value="INTERVALE2" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()">
							Intervale à population identique
						</label>
					</div>				
				</div>
			</div>
			<div class="row" >
				<div class="col-xs-12 ">
					<div class="category_input">
						<div  class="btn btn-default btn-xs pull-right" id="palette_picker" ng-click="openPalettesLibrary()">
							<i  class="fa fa-columns"></i>
						</div>
						<label><translate>model.styles.editor.category.palette</translate></label>
						<palette-viewer palette="currentPalette.data"></palette-viewer>
					</div>
				</div>
			</div>
			<div ng-show="selectChart.config.valueLeg=='DISCRETE'">
			<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="countDiscret()"><i class="fa fa-list"></i></button>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;" >
					<div class="col-xs-12 ">
						<table style="height:200px; ">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="text" ng-model="row['val']">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
				<!-- interval regulier -->
			<div  ng-show="selectChart.config.valueLeg=='INTERVALE'" >
				<div class="row" >
					<div class="col-xs-12 ">
						<label>nb classe </label>
						<input type="number"  ng-model="iteration"  >
						<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="countInterv(iteration)"><i class="fa fa-list"></i></button>
					</div>			
				</div>
				<div class="row"  style ="padding-top :5px;padding-bottom :5px;">
					<div class="col-xs-12 ">
						<table style="height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="number" ng-model="row['min']">
									</td>
									<td >
										<input type="number" ng-model="row['max']">
									</td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
			</div>	
				<!-- interval à population identique -->
			<div  ng-show="selectChart.config.valueLeg=='INTERVALE2'" >
				<div class="row" >
					<div class="col-xs-12 ">
						<label>nb classe </label>
						<input type="number"  ng-model="iteration"  >
						<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="calcintervPop(iteration)"><i class="fa fa-list"></i></button>
					</div>		
				</div>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;" >
					<div class="col-xs-12 ">
						<table style="height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td ><
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="number" ng-model="row['min']">
									</td>
									<td >
										<input type="number" ng-model="row['max']">
									</td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
			</div>
			<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="applyChloro()"><i class="fa fa-check-circle-o"></i></button>
			<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="cancelCharts()"><i class="fa fa-ban"></i></button>
		</div>


		<!--- CAS de LINKVALUE-->
		<div  ng-show="selectChart.config.charttypevalue=='LINKVALUE'" >
			<div class="row "  >
				<div class="col-xs-12 ">
				 	<label>Relation : </label> 
					<select ng-model="selectedrelation" style="width:200px;" class="form-control"   ng-change="selectrelationchange() " 
					placeholder="{{'query.placeholder_component' | translate}}"  >
						<option disabled selected hidden value> --choisir-- </option>
						<option value="INTERSECT" > INTERSECT </option>
						<!-- <option value="{{rel.name}}" ng-repeat="rel in selectedcomponentsupport.relations">{{rel.alias}}</option> -->
						<option value="{{rel.name}}"  ng-repeat="rel in selectedcomponentsupport.relations">{{rel.name}}</option>
					</select>
				</div>
			</div>
			<div class="row "  >
				<div class="col-xs-12 ">
					<label>Composant lié  : </label>
					<button ng-model="selectedcomponentlink" style="width:200px;" class="form-control"  bs-options="'features.' + c.name +'.alias' |translate for c in componentlink | orderBy:'label' "  ng-change="selectcomponentchangelink() " placeholder="{{'query.placeholder_component' | translate}}" bs-select >
					Action <span class="" ></span>
					</button>
				</div>
			</div>

			<div class="row "  >
				<div class="col-xs-12 ">
					 <label>Type calcul : </label> 
					<select ng-model="selectedRepresentation" style="width:200px;" class="form-control"   
					placeholder="{{'query.placeholder_component' | translate}}" ng-change="selectrepresentation() "  >
						<option disabled selected hidden value> --choisir-- </option>
						<option value="COUNT" > Count </option>
						<option value="ATTRIBUT" > Attribut</option>
					</select>
				</div>
			</div>			
			<div class="row" ng-show = "selectedRepresentation=='ATTRIBUT'" >
				<div class="col-xs-12 ">
					<label> Choix Attribut  : </label>
					<button style="width:150px; " type="button" class="form-control" ng-model="selectedattributlink"  bs-options="icon.label for icon in attributslink | orderBy:'label'" placeholder="{{'query.attribute' | translate}}" ng-change="selectattributchangelink()" bs-select>
					Action <span class=""></span>
					</button>				
				</div>
				<div class="col-xs-12 " ng-show ="selectedattributlink.att.type=='java.lang.Double' || selectedattributlink.att.type=='java.math.BigDecimal' || selectedattributlink.att.type=='java.lang.Integer' || selectedattributlink.att.type=='java.lang.Float'">
					<label>Opération : </label>
					<select ng-model="selectedOperation" style="width:150px;" class="form-control"   
						placeholder="{{'query.placeholder_component' | translate}}" ng-change="selectOperation() "  >
						<option disabled selected hidden value> --choisir-- </option>
						<option value="SUM" > Somme </option>
						<option value="AVG"> Moyenne</option>
						<option value="MIN"> Minimum</option>
						<option value="MAX" > MAximum </option>
						<!-- 	<option value="ANY"> Any</option> -->
					</select>
				</div>
			</div>

			<div class="row">
				<div class="radio" style ="padding-top :5px; padding-left :30px">
					<label>
						<input type="radio" name="valueLegRadios" id="ObjetsRadios0" value="DISCRETE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()" >
								Discrete
					</label>
				</div>
				<div class="radio" style ="padding-top :5px; padding-left :30px" >
					<label>
					<input type="radio" name="valueLegRadios" id="ObjetsRadios10" value="INTERVALE" ng-model="selectChart.config.valueLeg" ng-click="cancelCharts()" >
								Intervale régulier
					</label>
				</div>	
			</div>
			<div class="row">
				<div class="col-xs-12 ">
					<div class="category_input">
						<div class="btn btn-default btn-xs pull-right" id="palette_picker" ng-click="openPalettesLibrary()">
							<i class="fa fa-columns"></i>
						</div>
						<label><translate>model.styles.editor.category.palette</translate></label>
						<palette-viewer palette="currentPalette.data"></palette-viewer>
					</div>
				</div>
			</div>

			<div ng-show="selectChart.config.valueLeg=='DISCRETE'">			
				<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="countDiscret()"><i class="fa fa-list"></i></button>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;">
					<div class="col-xs-12 ">
						<table style="height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="text" ng-model="row['val']">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div  ng-show="selectChart.config.valueLeg=='INTERVALE'">				
				<div class="row" >
					<div class="col-xs-12 ">
						<label>nb classe </label>
						<input type="number"  ng-model="iteration"  >
						<button style ="padding-bottom :5px;padding-top :5px;"  type="button" class="btn btn-default" ng-click="countInterv(iteration)"><i class="fa fa-list"></i></button>
					</div>
				</div>
				<div class="row" style ="padding-top :5px;padding-bottom :5px;">
					<div class="col-xs-12 ">
						<table style="height:200px">
							<tbody>
								<tr ng-repeat="row in selectChart.styles">
									<td >
										<div style="background:{{row['hexa']}};width:25px;height:20px" > 
										</div>
									</td>
									<td >
										<input type="number" ng-model="row['min']">
									</td>
									<td >
										<input type="number" ng-model="row['max']">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
			<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="applyChloro()"><i class="fa fa-check-circle-o"></i></button>
			<button style ="padding-top :5px;padding-bottom :5px;"  type="button" class="btn btn-default" ng-click="cancelCharts()"><i class="fa fa-ban"></i></button>
		</div>

	</div>
</div>
</div>
