| New file |
|---|
| 0,0 → 1,125 |
|---|
| function capitaliserPremiereLettre(string) { |
| return string.charAt(0).toUpperCase() + string.slice(1); |
| } |
| |
| function obtenirNomEspeceSelectionnee() { |
| return $('#selecteur_liste_especes option:selected').text(); |
| } |
| |
| function obtenirAnneeSelectionnee() { |
| return $('#selecteur_annees option:selected').text(); |
| } |
| |
| function obtenirDonneesPhasesPhenologiques(id_espece, annee) { |
| $.get(url_jrest+'OdsExport/ExportPhasesPhenologiquesJson?espece='+id_espece+'&annee='+annee, function(e) { |
| dessinerGraphiquePhasesPhenologiques(e, annee); |
| }); |
| } |
| |
| |
| var legende_points = {}; |
| var legende_points_index = {}; |
| function dessinerGraphiquePhasesPhenologiques(data, annee) { |
| |
| var traces = new Array(); |
| for (var id_evenement in data) { |
| if (!data.hasOwnProperty(id_evenement)) continue; |
| var data_evenement = data[id_evenement]; |
| traces.push({ |
| x: data_evenement.x, |
| type: 'box', |
| name: capitaliserPremiereLettre(id_evenement), |
| }); |
| |
| legende_points[capitaliserPremiereLettre(id_evenement)] = data_evenement.text_index; |
| legende_points_index[capitaliserPremiereLettre(id_evenement)] = Object.keys(data_evenement.text_index).map(function(x) { |
| return parseFloat(x.replace("'", '')); |
| }); |
| } |
| |
| var layout = { |
| title: 'Calendrier phénologique pour l\'espèce '+obtenirNomEspeceSelectionnee()+'<br /> Année '+obtenirAnneeSelectionnee(), |
| xaxis: { |
| title: '', |
| autorange: true, |
| autoticks: false, |
| hoverformat: '.7f', |
| tickvals: [1,2,3,4,5,6,7,8,9,10,11,12], |
| ticktext: ['janvier', 'fevrier', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'], |
| } |
| }; |
| |
| Plotly.newPlot('conteneur-graphique', traces, layout); |
| var graphique = document.getElementById('conteneur-graphique'); |
| |
| graphique.on('plotly_hover', function(data) { |
| modifierAffichageToolTips(data); |
| }); |
| |
| } |
| |
| function modifierAffichageToolTips(data) { |
| var axeY = data.points[0].y; |
| $('text.nums, text.name').css('visibility', 'hidden'); |
| $('text.nums, text.name').css('width', 0); |
| $('text.nums').each(function() { |
| var $text_hover_clone = creerCopieTooltip($(this), axeY); |
| $(this).parent().append($text_hover_clone); |
| }); |
| } |
| |
| function renvoyerDatePourIndexNumerique(index_valeur, index_evenement_legende) { |
| // des fois le graphique fait des arrondis de valeurs dont on ne peut plus relier |
| // la valeur du graphique a sa date, dans ce cas là on prend la plus proche du tableau |
| var index_valeur_formate = parseFloat(index_valeur).toFixed(7); |
| var text_hover = legende_points[index_evenement_legende]["'"+index_valeur_formate+"'"]; |
| if(typeof text_hover == "undefined") { |
| index_valeur_f = parseFloat(index_valeur); |
| index_valeur = legende_points_index[index_evenement_legende].reduce(function(prev, curr) { |
| return (Math.abs(curr - index_valeur_f) < Math.abs(prev - index_valeur_f) ? curr : prev); |
| }); |
| text_hover = legende_points[index_evenement_legende]["'"+index_valeur+"'"]; |
| } |
| |
| return text_hover; |
| } |
| |
| function creerCopieTooltip($original, index_evenement_legende) { |
| var $clone = $original.clone(true); |
| var text_hover = renvoyerDatePourIndexNumerique($original.data('unformatted'), index_evenement_legende) |
| |
| $clone.html(text_hover); |
| $clone.data('unformatted', text_hover); |
| $clone.attr('data-unformatted', text_hover); |
| $clone.css('visibility', 'visible'); |
| $clone.css('width', '100%'); |
| $clone.css('font-size', '11px'); |
| |
| return $clone; |
| } |
| |
| $(document).ready(function() { |
| |
| $('#selecteur_liste_especes').change(function(e) { |
| var conteneur_graphique = document.getElementById('conteneur-graphique'); |
| Plotly.purge(conteneur_graphique); |
| |
| if($('#selecteur_annees').val() != "0") { |
| obtenirDonneesPhasesPhenologiques($(this).val(), $('#selecteur_annees').val()); |
| } |
| |
| }); |
| |
| $('#selecteur_annees').change(function(e) { |
| var conteneur_graphique = document.getElementById('conteneur-graphique'); |
| Plotly.purge(conteneur_graphique); |
| if($(this).val() == "0") { |
| return; |
| } |
| |
| if($('#selecteur_liste_especes').val() != "0") { |
| obtenirDonneesPhasesPhenologiques($('#selecteur_liste_especes').val(), $(this).val()); |
| } |
| }); |
| |
| }); |