{"id":2,"date":"2025-04-11T15:29:47","date_gmt":"2025-04-11T13:29:47","guid":{"rendered":"http:\/\/fiches-especes.simonpotier.fr\/?page_id=2"},"modified":"2025-04-23T15:05:57","modified_gmt":"2025-04-23T13:05:57","slug":"page-d-exemple","status":"publish","type":"page","link":"https:\/\/spes.anivise.fr\/index.php\/page-d-exemple\/","title":{"rendered":"Page d\u2019exemple"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/blockquote>\n\n\n\n<label for=\"search-espece\">Rechercher une esp\u00e8ce :<\/label>\n<input type=\"text\" id=\"search-espece\" list=\"liste-especes\" placeholder=\"Tapez le nom de l'esp\u00e8ce...\">\n<datalist id=\"liste-especes\"><\/datalist>\n\n<!-- Bouton de validation -->\n<button id=\"valider-espece\">Afficher le graphique<\/button>\n\n<!-- Zone de message d\u2019erreur -->\n<div id=\"message-erreur\" style=\"color: red; margin-top: 10px;\"><\/div>\n\n<!-- Conteneur du camembert -->\n<div id=\"camembert\" style=\"width: 100%; max-width: 600px; height: 400px; margin-top: 20px;\"><\/div>\n\n<script src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\n<script>\n  const urlCSV = 'https:\/\/fiches-especes.simonpotier.fr\/data\/regime_alimentaire.csv';\n  let donneesCSV = [];\n  let entetes = [];\n\n  google.charts.load('current', { packages: ['corechart'] });\n  google.charts.setOnLoadCallback(init);\n\n  function init() {\n    fetch(urlCSV)\n      .then(res => res.text())\n      .then(csvText => {\n        const lignes = csvText.trim().split('\\n');\n        entetes = lignes[0].split(',');\n\n        donneesCSV = lignes.slice(1).map(ligne =>\n          ligne.trim().split(',').map(cell => cell.trim())\n        );\n\n        const datalist = document.getElementById('liste-especes');\n        donneesCSV.forEach(row => {\n          const option = document.createElement('option');\n          option.value = row[0];\n          datalist.appendChild(option);\n        });\n\n        \/\/ Ajout d\u2019un bouton pour valider\n        const bouton = document.getElementById('valider-espece');\n        const input = document.getElementById('search-espece');\n        const messageErreur = document.getElementById('message-erreur');\n\n        bouton.addEventListener('click', () => {\n          const saisie = input.value.trim().toLowerCase();\n          const ligne = donneesCSV.find(row => row[0].toLowerCase() === saisie);\n\n          if (ligne) {\n            messageErreur.textContent = '';\n            afficherCamembert(ligne);\n          } else {\n            messageErreur.textContent = 'Esp\u00e8ce introuvable \ud83d\ude22';\n            document.getElementById('camembert').innerHTML = '';\n          }\n        });\n\n        \/\/ Ajout de validation avec la touche \"Entr\u00e9e\"\n        input.addEventListener('keypress', function (e) {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            bouton.click(); \/\/ simule un clic\n          }\n        });\n      })\n      .catch(err => console.error('Erreur CSV :', err));\n  }\n\n  function afficherCamembert(row) {\n    if (!row || row.length < 4) return;\n\n    const data = google.visualization.arrayToDataTable([\n      ['Composant alimentaire', 'Pourcentage'],\n      [entetes[1], parseFloat(row[1])],\n      [entetes[2], parseFloat(row[2])],\n      [entetes[3], parseFloat(row[3])]\n    ]);\n\n    const options = {\n      title: 'R\u00e9gime alimentaire \u2013 ' + row[0],\n      pieHole: 0.4\n    };\n\n    const chart = new google.visualization.PieChart(document.getElementById('camembert'));\n    chart.draw(data, options);\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Rechercher une esp\u00e8ce : Afficher le graphique<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"pmpro_default_level":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":7,"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/spes.anivise.fr\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}