<!-- *** TEMPLATE GMB CBNB -Stats croisées communales TMB-CGTV / DIAGRAMME TEXT + PIE + PIE / BANDEAU BAS *** --> 

{{#features}}
	<li class="item" style="">
		<h3 class="title-feature ">{{NOM_M}}</h3>
    <!-- Colonne 3 - Texte -->
		<div class="col-sm-2">
			<!--Texte 1-->
					<div class="text-feature">Cette analyse permet de confronter, pour chaque commune, le recouvrement des végétations simplifiées issues de la Carte des Grand Types de Végétations avec la part de ces même végétations simplifiées dans les Coeurs d'Habitats de 12 espèces, identifiés par la Trame Mammifères de Bretagne dans la commune. </div>
			<!--./Texte 1-->
		</div>
		<!-- /.Colonne 3 - Texte -->
	<!-- Colonne 4 - Graph 1 -->
		<div class="col-sm-4">
			<!-- Chart 1 Pie-->
			<div class="Chart">
				<div id="idChart">
					<canvas class="chart" id="myChartPie1_{{NOM_M}}" data-codegeo="{{NOM_M}}" data-mychartPie1-1="{{Littoral}}" data-mychartPie1-2="{{Arbustif}}" data-mychartPie1-3="{{Cultures}}" data-mychartPie1-4="{{Plantarb}}" data-mychartPie1-5="{{Forets}}" data-mychartPie1-6="{{Haies}}" data-mychartPie1-7="{{Prairies}}" data-mychartPie1-8="{{Eauzh}}" data-mychartPie1-9="{{Nonveget}}"  width="40" height="20"></canvas>
				</div>
				<div class="textChart">
					<div class="title-chart">Recouvrement des vététations simplifiées</div>
					<div class="subtitle-chart"><i>en proportion de la surface communale</i></div>
				</div>        
			</div>
			<!-- ./Chart 1 Pie-->
		</div>
		<!-- /.Colonne 4 - Graph 1 -->
		<!-- Colonne 5 - Graph 2 -->
		<div class="col-sm-5">
			<!-- Chart 2 Pie-->
			<div class="Chart">
				<div id="idChart">
					<canvas class="chart" id="myChartPie2_{{NOM_M}}" data-codegeo="{{NOM_M}}" data-mychartPie2-2="{{Hab_littor}}" data-mychartPie2-2="{{Hab_arbust}}" data-mychartPie2-3="{{Hab_cultur}}" data-mychartPie2-4="{{Hab_planta}}" data-mychartPie2-5="{{Hab_forets}}" data-mychartPie2-6="{{Hab_haies}}" data-mychartPie2-7="{{Hab_prairi}}" data-mychartPie2-8="{{Hab_eauzh}}" data-mychartPie2-9="{{Hab_nonveg}}"  width="40" height="20"></canvas>
				</div>
				<div class="textChart">
					<div class="title-chart">Proportion des vététations simplifiées</div>
					<div class="subtitle-chart"><i>au sein des coeurs d'habitats des mammifères</i></div>
				</div>        
			</div>
			<!-- ./Chart 2 Pie-->
		</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: 11px;
      color:#777;
      margin-top: 5px;
    }
    .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('{{NOM_M}}');
        {{/features}}

	/// CHART PIE 1 - Création d'un diagramme circulaire

    var graph_myChartPie1 = {};
    graph_myChartPie1.getData = function () {
    // Définition du code geo - ID
    var code_geo = $("#myChartPie1_{{NOM_M}}").attr("data-codegeo");
     // Définition des variables du graphiques
    var data = {myChartPie1_attr: {labels:["Estran, dunes, etc","Milieux arbustifs et mixtes","Cultures","Plantations arborées","Bois et forêts","Haies","Prairies","Eau et zones humides","Milieux non végétalisés"], data: {datasets:[[parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-1")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-2")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-3")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-4")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-5")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-6")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-7")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-8")),parseFloat($("#myChartPie1_{{NOM_M}}").attr("data-mychartPie1-9"))]]}}};
    // Affichage des données dans la console
    console.log(data);
    // Création du graphique avec les paramètres définis
    graph_myChartPie1.drawChart(data);
  };    
  
  // Définition des paramètres du graphique
  graph_myChartPie1.drawChart = function (data) {
  var ctx = document.getElementById("myChartPie1_{{NOM_M}}");
  var myChart1 = new Chart(ctx, {
          type: 'pie',
          data: {
              labels: data.myChartPie1_attr.labels,
              datasets: [{                  
                  label: "ha",
                  data: data.myChartPie1_attr.data.datasets[0],
                  backgroundColor: [
                    "rgba(67,173,187,0.9)",
					"rgba(124,112,133,0.9)",
					"rgba(237,233,188,0.9)",
					"rgba(134,98,96,0.9)",
					"rgba(119,171,150,0.9)",
					"rgba(29,28,51,0.9)",
					"rgba(202,231,210,0.9)",
					"rgba(130,202,200,0.9)",                    
                    "rgba(213,213,213,0.9)"
                  ],
                  hoverBackgroundColor: [
                    "rgba(67,173,187,0.9)",
					"rgba(124,112,133,0.9)",
					"rgba(237,233,188,0.9)",
					"rgba(134,98,96,0.9)",
					"rgba(119,171,150,0.9)",
					"rgba(29,28,51,0.9)",
					"rgba(202,231,210,0.9)",
					"rgba(130,202,200,0.9)",                    
                    "rgba(213,213,213,0.9)"
                  ],
                  borderWidth: 3 
              }]
          },
          options: { 
            responsive: true,
            tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      return parseFloat(data.datasets[0].data[tooltipItem.index]).toFixed(0).toLocaleString() + " %";
                  }
              }
            }
          }
      });
    };

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

  	/// CHART PIE 2 - Création d'un diagramme circulaire

    var graph_myChartPie2 = {};
    graph_myChartPie2.getData = function () {
    // Définition du code geo - ID
    var code_geo = $("#myChartPie2_{{NOM_M}}").attr("data-codegeo");
     // Définition des variables du graphiques
    var data = {myChartPie2_attr: {labels:["Estran, dunes, etc","Milieux arbustifs et mixtes","Cultures","Plantations arborées","Bois et forêts","Haies","Prairies","Eau et zones humides","Milieux non végétalisés"], data: {datasets:[[parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-1")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-2")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-3")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-4")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-5")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-6")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-7")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-8")),parseFloat($("#myChartPie2_{{NOM_M}}").attr("data-mychartPie2-9"))]]}}};
    // Affichage des données dans la console
    console.log(data);
    // Création du graphique avec les paramètres définis
    graph_myChartPie2.drawChart(data);
  };    
  
  // Définition des paramètres du graphique
  graph_myChartPie2.drawChart = function (data) {
  var ctx = document.getElementById("myChartPie2_{{NOM_M}}");
  var myChart1 = new Chart(ctx, {
          type: 'pie',
          data: {
              labels: data.myChartPie2_attr.labels,
              datasets: [{                  
                  label: "ha",
                  data: data.myChartPie2_attr.data.datasets[0],
                  backgroundColor: [
                    "rgba(67,173,187,0.9)",
					"rgba(124,112,133,0.9)",
					"rgba(237,233,188,0.9)",
					"rgba(134,98,96,0.9)",
					"rgba(119,171,150,0.9)",
					"rgba(29,28,51,0.9)",
					"rgba(202,231,210,0.9)",
					"rgba(130,202,200,0.9)",                    
                    "rgba(213,213,213,0.9)"
                  ],
                  hoverBackgroundColor: [
                    "rgba(67,173,187,0.9)",
					"rgba(124,112,133,0.9)",
					"rgba(237,233,188,0.9)",
					"rgba(134,98,96,0.9)",
					"rgba(119,171,150,0.9)",
					"rgba(29,28,51,0.9)",
					"rgba(202,231,210,0.9)",
					"rgba(130,202,200,0.9)",                    
                    "rgba(213,213,213,0.9)"
                  ],
          },
          options: { 
            responsive: true,
            tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      return parseFloat(data.datasets[0].data[tooltipItem.index]).toFixed(0).toLocaleString() + " %";
                  }
              }
            }
          }
      });
    };

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

{{/features}}

</script>