<!-- *** TEMPLATE GMB-ENJEUX / DIAGRAMME TEXT + BAR + BAR / BANDEAU BAS *** --> 

{{#features}}
	<li class="item" style="">
		<h3 class="title-feature ">MAILLE {{ID_mail2km}}</h3>
    <!-- Colonne 3 - Texte -->
		<div class="col-sm-2">
			<!--Texte 1-->
					<div class="text-feature">La grille des enjeux de conservation et de restauration des continuités écologiques pour 12 mammifères permet de localiser où les actions seront les plus profitables aux continuités régionales des différentes espèces. Dans chaque maille de 2 x 2 km des enjeux de conservation ou renforcement et des enjeux de rétablissement ont été déterminés comme faibles ou localisés (1), moyens (2), forts (3), ou majeurs (4)</div>
			<!--./Texte 1-->
		</div>
		<!-- /.Colonne 3 - Texte -->
	<!-- Colonne 4 - Graph 1 -->
		<div class="col-sm-4">
			<!-- Chart 1-->
			<div class="row Chart">
				<div id="idChart">
					<canvas class="chart" id="myChartBar1_{{ID_mail2km}}" data-codegeo="{{ID_mail2km}}" data-mychartBar1-1="{{MyoBecCons}}" data-mychartBar1-2="{{ArvSapCons}}" data-mychartBar1-3="{{MusAveCons}}" data-mychartBar1-4="{{RhiFerCons}}" data-mychartBar1-5="{{LutLutCons}}" data-mychartBar1-6="{{RhiHipCons}}" data-mychartBar1-7="{{MyoDauCons}}" data-mychartBar1-8="{{SciVulCons}}" data-mychartBar1-9="{{OryCunCons}}" data-mychartBar1-10="{{MelMelCons}}" data-mychartBar1-11="{{BarBarCons}}" data-mychartBar1-12="{{EptSerCons}}" width="80" height="32"></canvas>
				</div>
				<div class="textChart">
					<div class="title-chart">Enjeux de conservation des continutités</div>
					<div class="subtitle-chart"><i>au sein de la maille de 2x2 km sélectionnée</i></div>
				</div>        
			</div>
			<!-- ./Chart 1-->
		</div>
		<!-- /.Colonne 4 - Graph 1 -->
	<!-- Colonne 5 - Graph 2 -->
		<div class="col-sm-5">
			<!-- Chart 2-->
			<div class="row Chart">
				<div id="idChart">
					<canvas class="chart" id="myChartBar2_{{ID_mail2km}}" data-codegeo="{{ID_mail2km}}" data-mychartBar2-1="{{MyoBecRest}}" data-mychartBar2-2="{{ArvSapRest}}" data-mychartBar2-3="{{MusAveRest}}" data-mychartBar2-4="{{RhiFerRest}}" data-mychartBar2-5="{{LutLutRest}}" data-mychartBar2-6="{{RhiHipRest}}" data-mychartBar2-7="{{MyoDauRest}}" data-mychartBar2-8="{{SciVulRest}}" data-mychartBar2-9="{{OryCunRest}}" data-mychartBar2-10="{{MelMelRest}}" data-mychartBar2-11="{{BarBarRest}}" data-mychartBar2-12="{{EptSerRest}}" width="80" height="32"></canvas>
				</div>
				<div class="textChart">
					<div class="title-chart">Enjeux de rétablissement des continutités</div>
					<div class="subtitle-chart"><i>au sein de la maille de 2x2 km sélectionnée</i></div>
				</div>        
			</div>
			<!-- ./Chart 2-->	
		</div>
	<!-- /.Colonne 5 - Graph 2 -->
		
		
	</li>
{{/features}}

<style>

	/*** Définir la couleur de mon template - Insérer le code #HEX de votre couleur */
	:root {
		--mycolor: #1D1B35;
	}

	

  	/***********************************************/
	/*** Ne pas toucher aux propriétés suivantes ***/

	/* Texte */

	.title-feature {
		color: var(--mycolor);
	    font-family: 'roboto_bold', Arial, Sans-serif;
	    text-transform: uppercase;
	    font-size: 19px;
	    line-height: 1.2;
		  margin: 0;
	}

	.subtitle-feature {
		color: var(--mycolor);
		font-family:'roboto_regular', Arial, Sans-serif;
		font-size:18px;
		margin-top:7%;
		line-height:1;
	}
	
	.text-feature{
		font-family:'roboto_regular', Arial, Sans-serif;
		color:#3A5396;
		font-size:12px;
		margin-top:10%;
	}

	/* Chart */
  	.Chart{
		text-align:center; 
    	margin:0;
	}

    .textChart {
      font-family:"roboto_regular";
      font-size: 12px;
      color:#777;
      margin-top: 8px;
    }
    .title-chart{
      font-family: "roboto_bold";
    }

	
</style>

<script language="javascript">
{{#features}}    

  ////// PARAMETRAGE DES GRAPHIQUES - JS///////

  /// Récupération du code_geo de l'entité selectionnée 
  var c_geo = [];
        {{#features}}
            c_geo.push('{{ID_mail2km}}');
        {{/features}}

  /// CHART BAR 1 - Création d'un diagramme bar

  var graph_myChartBar1 = {};
  graph_myChartBar1.getData = function () {
    // Définition du code geo - ID
    var code_geo = $("#myChartBar1_{{ID_mail2km}}").attr("data-codegeo");
    // Définition des variables du graphiques
    var data = {myChartBar1_attr: {labels:["Murin de Bechstein","Campagnol amphibie","Muscardin","Grand rhinolophe","Loutre d'Europe","Petit rhinolophe","Murin de Daubenton","Ecureuil roux","Lapin de garenne","Blaireau européen","Barbastelle d'Europe","Sérotine commune"], data: {datasets:[[parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-1")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-2")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-3")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-4")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-5")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-6")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-7")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-8")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-9")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-10")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-11")),parseFloat($("#myChartBar1_{{ID_mail2km}}").attr("data-mychartBar1-12"))]]}}};
    // Affichage des données dans la console
    console.log(data);
    // Création du graphique avec les paramètres définis
    graph_myChartBar1.drawChart(data);
  };    
  
  // Définition des paramètres du graphique
  graph_myChartBar1.drawChart = function (data) {
  var ctx = document.getElementById("myChartBar1_{{ID_mail2km}}");
  var myChart1 = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.myChartBar1_attr.labels,
              datasets: [{                  
                  label: "Hauteur des enjeux de conservation (de 1 : faibles ou localisés à 4 : majeurs)",
                  backgroundColor: "rgba(130,202,200,0.9)",
                  borderColor: "rgba(130,202,200,0.9)",
                  borderWidth: 1,
                  borderSkipped:'left',
                  hoverBackgroundColor: "rgba(130,202,200,1)",
                  hoverBorderColor: "rgba(130,202,200,1)",
                  data: data.myChartBar1_attr.data.datasets[0],
              }]
          },
          options: {            
            scales:{
              yAxes:[{
                  ticks:{
                    min:0
                  }
                }]
            },
            responsive: true,
            tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      return data.datasets[tooltipItem.datasetIndex].label +': ' + parseFloat(tooltipItem.yLabel.toFixed(2)).toLocaleString();
                  }
              }
            }
          }
      });
    };  

    if  (typeof Chart === 'function') {
       graph_myChartBar1.getData();
  } else {
      $.get('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js', function() {
        graph_myChartBar1.getData();
        
      }); 
  }

  /// CHART BAR 2 - Création d'un diagramme bar
  var graph_myChartBar2 = {};
  graph_myChartBar2.getData = function () {
    // Définition du code geo - ID
    var code_geo = $("#myChartBar2_{{ID_mail2km}}").attr("data-codegeo");
    // Définition des variables du graphiques
    var data = {myChartBar2_attr: {labels:["Murin de Bechstein","Campagnol amphibie","Muscardin","Grand rhinolophe","Loutre d'Europe","Petit rhinolophe","Murin de Daubenton","Ecureuil roux","Lapin de garenne","Blaireau européen","Barbastelle d'Europe","Sérotine commune"], data: {datasets:[[parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-1")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-2")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-3")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-4")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-5")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-6")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-7")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-8")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-9")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-10")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-11")),parseFloat($("#myChartBar2_{{ID_mail2km}}").attr("data-myChartBar2-12"))]]}}};
    // Affichage des données dans la console
    console.log(data);
    // Création du graphique avec les paramètres définis
    graph_myChartBar2.drawChart(data);
  };    
  
  // Définition des paramètres du graphique
  graph_myChartBar2.drawChart = function (data) {
  var ctx = document.getElementById("myChartBar2_{{ID_mail2km}}");
  var myChart1 = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.myChartBar2_attr.labels,
              datasets: [{                  
                  label: "Hauteur des enjeux de restauration (de 1 : faibles ou localisés à 4 : majeurs)",
                  backgroundColor: "rgba(130,202,200,0.9)",
                  borderColor: "rgba(130,202,200,0.9)",
                  borderWidth: 1,
                  borderSkipped:'left',
                  hoverBackgroundColor: "rgba(130,202,200,1)",
                  hoverBorderColor: "rgba(130,202,200,1)",
                  data: data.myChartBar2_attr.data.datasets[0],
              }]
          },
          options: {            
            scales:{
              yAxes:[{
                  ticks:{
                    min:0
                  }
                }]
            },
            responsive: true,
            tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      return data.datasets[tooltipItem.datasetIndex].label +': ' + parseFloat(tooltipItem.yLabel.toFixed(2)).toLocaleString();
                  }
              }
            }
          }
      });
    };  

    if  (typeof Chart === 'function') {
       graph_myChartBar2.getData();
  } else {
      $.get('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js', function() {
        graph_myChartBar2.getData();
        
      }); 
  }

{{/features}}

</script>