| 330 |
aurelien |
1 |
function tableauxOntAuMoinsUnElementEnCommun(haystack, arr) {
|
|
|
2 |
return arr.some(function (v) {
|
|
|
3 |
return haystack.indexOf(v) >= 0;
|
|
|
4 |
});
|
|
|
5 |
};
|
|
|
6 |
|
|
|
7 |
function obtenirNomEspeceSelectionnee() {
|
|
|
8 |
return $('#selecteur_liste_especes option:selected').text();
|
|
|
9 |
}
|
|
|
10 |
|
|
|
11 |
function obtenirNomStadeSelectionne() {
|
|
|
12 |
return $('#selecteur_stade option:selected').text();
|
|
|
13 |
}
|
|
|
14 |
|
|
|
15 |
function surChangementSelecteurEspece(id_espece_selectionnee, evenements) {
|
|
|
16 |
|
|
|
17 |
var $evenements_options = $('#selecteur_stade option');
|
|
|
18 |
|
|
|
19 |
$('#selecteur_stade option').addClass('hide');
|
|
|
20 |
if(id_espece_selectionnee == 0) {
|
|
|
21 |
$('#selecteur_stade').addClass('hide');
|
|
|
22 |
} else {
|
|
|
23 |
$('#selecteur_stade').removeClass('hide');
|
|
|
24 |
$evenements_options.each(function() {
|
|
|
25 |
var $evenement_option = $(this);
|
|
|
26 |
if($evenement_option.val() != 0) {
|
|
|
27 |
var stades_option = $evenement_option.data('evenements');
|
|
|
28 |
$evenement_option.toggleClass('hide', !tableauxOntAuMoinsUnElementEnCommun(evenements, stades_option));
|
|
|
29 |
} else {
|
|
|
30 |
$evenement_option.removeClass('hide');
|
|
|
31 |
}
|
|
|
32 |
});
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
// mise sur le selecteur par défaut
|
|
|
36 |
$('#selecteur_stade').val("0");
|
|
|
37 |
}
|
|
|
38 |
|
|
|
39 |
function surChangementSelecteurStade(id_stade_selectionne) {
|
|
|
40 |
obtenirDonneesStadePhenologiques($('#selecteur_liste_especes').val(), id_stade_selectionne)
|
|
|
41 |
}
|
|
|
42 |
|
|
|
43 |
function obtenirDonneesStadePhenologiques(id_espece, id_stades) {
|
|
|
44 |
$.get(url_jrest+'OdsExport/ExportEvolutionPhenologiqueJson?espece='+id_espece+'&evenements='+id_stades, function(e) {
|
|
|
45 |
dessinerGraphiqueEvolutionStadesPhenologiques(e, id_stades);
|
|
|
46 |
});
|
|
|
47 |
}
|
|
|
48 |
|
|
|
49 |
function renvoyerNomsEvenementLegendeGraphique(id_stades) {
|
|
|
50 |
var stades = id_stades.split(',');
|
|
|
51 |
var stades_legende = {};
|
|
|
52 |
|
|
|
53 |
if(stades.length == 2) {
|
|
|
54 |
var stade_debut = global_evenements[stades[0]];
|
|
|
55 |
var stade_fin = global_evenements[stades[1]];
|
|
|
56 |
var legende_debut = 'début '+(stade_debut.nom)+' (stade '+(stade_debut.code)+')';
|
|
|
57 |
var legende_fin = 'fin '+stade_fin.nom+' (stade '+stade_fin.code+')';
|
|
|
58 |
stades_legende[stades[0]] = legende_debut;
|
|
|
59 |
stades_legende[stades[1]] = legende_fin;
|
|
|
60 |
} else {
|
|
|
61 |
var stade_unique = global_evenements[stades[0]];
|
|
|
62 |
stades_legende[stades[0]] = stade_unique.nom;
|
|
|
63 |
}
|
|
|
64 |
|
|
|
65 |
return stades_legende;
|
|
|
66 |
}
|
|
|
67 |
|
|
|
68 |
function dessinerGraphiqueEvolutionStadesPhenologiques(data, id_stades) {
|
|
|
69 |
|
|
|
70 |
var noms_evenements = renvoyerNomsEvenementLegendeGraphique(id_stades);
|
|
|
71 |
var nb_evenements = 0;
|
|
|
72 |
var graph_data = new Array();
|
|
|
73 |
for (var id_evenement in data) {
|
|
|
74 |
if (!data.hasOwnProperty(id_evenement)) continue;
|
|
|
75 |
|
|
|
76 |
var data_evenement = data[id_evenement];
|
|
|
77 |
|
|
|
78 |
graph_data.push({
|
|
|
79 |
type: "scatter",
|
|
|
80 |
mode: 'lines+markers',
|
|
|
81 |
name: noms_evenements[id_evenement],
|
|
|
82 |
x: data_evenement.x,
|
|
|
83 |
y: data_evenement.y,
|
|
|
84 |
text: data_evenement.text,
|
|
|
85 |
hoverinfo: 'text'
|
|
|
86 |
});
|
|
|
87 |
|
|
|
88 |
nb_evenements++;
|
|
|
89 |
}
|
|
|
90 |
|
|
|
91 |
var nom_espece_selectionnee = obtenirNomEspeceSelectionnee();
|
|
|
92 |
var nom_stade_selectionne = obtenirNomStadeSelectionne().toLowerCase();
|
|
|
93 |
|
| 333 |
aurelien |
94 |
var titre_graphique = 'Dates moyennes de ';
|
| 330 |
aurelien |
95 |
if(nb_evenements > 1) {
|
|
|
96 |
titre_graphique += 'début et fin de ';
|
|
|
97 |
}
|
|
|
98 |
titre_graphique += nom_stade_selectionne+' pour l\'espèce '+nom_espece_selectionnee;
|
|
|
99 |
|
|
|
100 |
var layout = {
|
|
|
101 |
title: titre_graphique,
|
|
|
102 |
xaxis: {
|
|
|
103 |
title: 'Années',
|
|
|
104 |
showgrid: false,
|
|
|
105 |
zeroline: false,
|
|
|
106 |
tickvals: annees_observations,
|
|
|
107 |
ticktext: annees_observations,
|
|
|
108 |
autoticks: false,
|
|
|
109 |
},
|
|
|
110 |
yaxis: {
|
|
|
111 |
title: '',
|
|
|
112 |
autoticks: false,
|
|
|
113 |
tickvals: [1,2,3,4,5,6,7,8,9,10,11,12],
|
|
|
114 |
ticktext: ['janvier', 'fevrier', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
|
| 333 |
aurelien |
115 |
},
|
|
|
116 |
// pour la légende apparaisse en bas du graphique afin de ne pas gâcher
|
|
|
117 |
// presque un tiers de l'espace de la page
|
|
|
118 |
legend:{
|
|
|
119 |
xanchor:"center",
|
|
|
120 |
yanchor:"top",
|
|
|
121 |
y:-0.3,
|
|
|
122 |
x:0.5
|
|
|
123 |
}
|
| 330 |
aurelien |
124 |
};
|
|
|
125 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
|
|
126 |
Plotly.purge(conteneur_graphique);
|
|
|
127 |
var graphique = Plotly.plot(conteneur_graphique, graph_data, layout);
|
|
|
128 |
}
|
|
|
129 |
|
|
|
130 |
$(document).ready(function() {
|
|
|
131 |
$('#selecteur_liste_especes').change(function(e) {
|
|
|
132 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
|
|
133 |
Plotly.purge(conteneur_graphique);
|
|
|
134 |
surChangementSelecteurEspece($(this).val(), $(this).find(":selected").data('id-evenements'));
|
|
|
135 |
});
|
|
|
136 |
|
|
|
137 |
$('#selecteur_stade').change(function(e) {
|
|
|
138 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
|
|
139 |
Plotly.purge(conteneur_graphique);
|
|
|
140 |
if($(this).val() == "0") {
|
|
|
141 |
return;
|
|
|
142 |
}
|
|
|
143 |
surChangementSelecteurStade($(this).val());
|
|
|
144 |
});
|
| 333 |
aurelien |
145 |
|
|
|
146 |
if(espece_defaut != null && stades_defaut != 0) {
|
|
|
147 |
obtenirDonneesStadePhenologiques(espece_defaut, stades_defaut);
|
|
|
148 |
}
|
| 330 |
aurelien |
149 |
});
|