| 1 |
function capitaliserPremiereLettre(string) {
|
1 |
function capitaliserPremiereLettre(string) {
|
| 2 |
return string.charAt(0).toUpperCase() + string.slice(1);
|
2 |
return string.charAt(0).toUpperCase() + string.slice(1);
|
| 3 |
}
|
3 |
}
|
| 4 |
|
4 |
|
| 5 |
function obtenirNomEspeceSelectionnee() {
|
5 |
function obtenirNomEspeceSelectionnee() {
|
| 6 |
return $('#selecteur_liste_especes option:selected').text();
|
6 |
return $('#selecteur_liste_especes option:selected').text();
|
| 7 |
}
|
7 |
}
|
| 8 |
|
8 |
|
| 9 |
function obtenirAnneeSelectionnee() {
|
9 |
function obtenirAnneeSelectionnee() {
|
| 10 |
return $('#selecteur_annees option:selected').text();
|
10 |
return $('#selecteur_annees option:selected').text();
|
| 11 |
}
|
11 |
}
|
| 12 |
|
12 |
|
| 13 |
function obtenirDonneesPhasesPhenologiques(id_espece, annee) {
|
13 |
function obtenirDonneesPhasesPhenologiques(id_espece, annee) {
|
| 14 |
$.get(url_jrest+'OdsExport/ExportPhasesPhenologiquesJson?espece='+id_espece+'&annee='+annee, function(e) {
|
14 |
$.get(url_jrest+'OdsExport/ExportPhasesPhenologiquesJson?espece='+id_espece+'&annee='+annee, function(e) {
|
| 15 |
dessinerGraphiquePhasesPhenologiques(e, annee);
|
15 |
dessinerGraphiquePhasesPhenologiques(e, annee);
|
| 16 |
});
|
16 |
});
|
| 17 |
}
|
17 |
}
|
| 18 |
|
18 |
|
| 19 |
|
19 |
|
| 20 |
var legende_points = {};
|
20 |
var legende_points = {};
|
| 21 |
var legende_points_index = {};
|
21 |
var legende_points_index = {};
|
| 22 |
function dessinerGraphiquePhasesPhenologiques(data, annee) {
|
22 |
function dessinerGraphiquePhasesPhenologiques(data, annee) {
|
| 23 |
|
23 |
|
| 24 |
var traces = new Array();
|
24 |
var traces = new Array();
|
| 25 |
for (var id_evenement in data) {
|
25 |
for (var id_evenement in data) {
|
| 26 |
if (!data.hasOwnProperty(id_evenement)) continue;
|
26 |
if (!data.hasOwnProperty(id_evenement)) continue;
|
| 27 |
var data_evenement = data[id_evenement];
|
27 |
var data_evenement = data[id_evenement];
|
| 28 |
traces.push({
|
28 |
traces.push({
|
| 29 |
x: data_evenement.x,
|
29 |
x: data_evenement.x,
|
| 30 |
type: 'box',
|
30 |
type: 'box',
|
| 31 |
name: capitaliserPremiereLettre(id_evenement),
|
31 |
name: capitaliserPremiereLettre(id_evenement),
|
| 32 |
});
|
32 |
});
|
| 33 |
|
33 |
|
| 34 |
legende_points[capitaliserPremiereLettre(id_evenement)] = data_evenement.text_index;
|
34 |
legende_points[capitaliserPremiereLettre(id_evenement)] = data_evenement.text_index;
|
| 35 |
legende_points_index[capitaliserPremiereLettre(id_evenement)] = Object.keys(data_evenement.text_index).map(function(x) {
|
35 |
legende_points_index[capitaliserPremiereLettre(id_evenement)] = Object.keys(data_evenement.text_index).map(function(x) {
|
| 36 |
return parseFloat(x.replace("'", ''));
|
36 |
return parseFloat(x.replace("'", ''));
|
| 37 |
});
|
37 |
});
|
| 38 |
}
|
38 |
}
|
| 39 |
|
39 |
|
| 40 |
var titre = 'Calendrier phénologique pour l\'espèce '+obtenirNomEspeceSelectionnee();
|
40 |
var titre = 'Espèce '+obtenirNomEspeceSelectionnee();
|
| 41 |
if(annee == "0") {
|
41 |
if(annee == "0") {
|
| 42 |
titre += '<br /> Toutes les années';
|
42 |
titre += '<br /> Toutes les années';
|
| 43 |
} else {
|
43 |
} else {
|
| 44 |
titre += '<br /> Année '+obtenirAnneeSelectionnee();
|
44 |
titre += '<br /> Année '+obtenirAnneeSelectionnee();
|
| 45 |
}
|
45 |
}
|
| 46 |
|
46 |
|
| 47 |
|
47 |
|
| 48 |
var layout = {
|
48 |
var layout = {
|
| 49 |
title: titre,
|
49 |
title: titre,
|
| 50 |
xaxis: {
|
50 |
xaxis: {
|
| 51 |
title: '',
|
51 |
title: '',
|
| 52 |
autorange: true,
|
52 |
autorange: true,
|
| 53 |
autoticks: false,
|
53 |
autoticks: false,
|
| 54 |
hoverformat: '.7f',
|
54 |
hoverformat: '.7f',
|
| 55 |
tickvals: [1,2,3,4,5,6,7,8,9,10,11,12],
|
55 |
tickvals: [1,2,3,4,5,6,7,8,9,10,11,12],
|
| 56 |
ticktext: ['janvier', 'fevrier', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
|
56 |
ticktext: ['janvier', 'fevrier', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
|
| 57 |
}
|
57 |
},
|
| - |
|
58 |
// pour la légende apparaisse en bas du graphique afin de ne pas gâcher
|
| - |
|
59 |
// presque un tiers de l'espace de la page
|
| - |
|
60 |
legend:{
|
| - |
|
61 |
xanchor:"center",
|
| - |
|
62 |
yanchor:"top",
|
| - |
|
63 |
y:-0.3,
|
| - |
|
64 |
x:0.5
|
| - |
|
65 |
}
|
| 58 |
};
|
66 |
};
|
| 59 |
|
67 |
|
| 60 |
Plotly.newPlot('conteneur-graphique', traces, layout);
|
68 |
Plotly.newPlot('conteneur-graphique', traces, layout);
|
| 61 |
var graphique = document.getElementById('conteneur-graphique');
|
69 |
var graphique = document.getElementById('conteneur-graphique');
|
| 62 |
|
70 |
|
| 63 |
graphique.on('plotly_hover', function(data) {
|
71 |
graphique.on('plotly_hover', function(data) {
|
| 64 |
modifierAffichageToolTips(data);
|
72 |
modifierAffichageToolTips(data);
|
| 65 |
});
|
73 |
});
|
| 66 |
|
74 |
|
| 67 |
}
|
75 |
}
|
| 68 |
|
76 |
|
| 69 |
function modifierAffichageToolTips(data) {
|
77 |
function modifierAffichageToolTips(data) {
|
| 70 |
var axeY = data.points[0].y;
|
78 |
var axeY = data.points[0].y;
|
| 71 |
$('text.nums, text.name').css('visibility', 'hidden');
|
79 |
$('text.nums, text.name').css('visibility', 'hidden');
|
| 72 |
$('text.nums, text.name').css('width', 0);
|
80 |
$('text.nums, text.name').css('width', 0);
|
| 73 |
$('text.nums').each(function() {
|
81 |
$('text.nums').each(function() {
|
| - |
|
82 |
|
| - |
|
83 |
// certains label contiennent du texte qui ne doit pas être changé
|
| - |
|
84 |
// par exemple si un point tombe pile sur un début de mois
|
| - |
|
85 |
// le nom du mois doit rester affiché
|
| - |
|
86 |
if(isNaN($(this).data('unformatted'))) {
|
| - |
|
87 |
$(this).css('visibility', 'visible');
|
| - |
|
88 |
$(this).css('width', '100%');
|
| - |
|
89 |
return true;
|
| - |
|
90 |
}
|
| - |
|
91 |
|
| - |
|
92 |
var $label_axe_y = $(this).parent().find(":contains("+axeY+")");
|
| - |
|
93 |
if($label_axe_y.length != 0) {
|
| - |
|
94 |
$label_axe_y.css('z-index', -99999);
|
| - |
|
95 |
$label_axe_y.hide();
|
| - |
|
96 |
}
|
| 74 |
var $text_hover_clone = creerCopieTooltip($(this), axeY);
|
97 |
var $text_hover_clone = creerCopieTooltip($(this), axeY);
|
| 75 |
$(this).parent().append($text_hover_clone);
|
98 |
$(this).parent().append($text_hover_clone);
|
| 76 |
});
|
99 |
});
|
| 77 |
}
|
100 |
}
|
| 78 |
|
101 |
|
| 79 |
function renvoyerDatePourIndexNumerique(index_valeur, index_evenement_legende) {
|
102 |
function renvoyerDatePourIndexNumerique(index_valeur, index_evenement_legende) {
|
| 80 |
// des fois le graphique fait des arrondis de valeurs dont on ne peut plus relier
|
103 |
// des fois le graphique fait des arrondis de valeurs dont on ne peut plus relier
|
| 81 |
// la valeur du graphique a sa date, dans ce cas là on prend la plus proche du tableau
|
104 |
// la valeur du graphique a sa date, dans ce cas là on prend la plus proche du tableau
|
| 82 |
var index_valeur_formate = parseFloat(index_valeur).toFixed(7);
|
105 |
var index_valeur_formate = parseFloat(index_valeur).toFixed(7);
|
| 83 |
var text_hover = legende_points[index_evenement_legende]["'"+index_valeur_formate+"'"];
|
106 |
var text_hover = legende_points[index_evenement_legende]["'"+index_valeur_formate+"'"];
|
| 84 |
if(typeof text_hover == "undefined") {
|
107 |
if(typeof text_hover == "undefined") {
|
| 85 |
index_valeur_f = parseFloat(index_valeur);
|
108 |
index_valeur_f = parseFloat(index_valeur);
|
| 86 |
index_valeur = legende_points_index[index_evenement_legende].reduce(function(prev, curr) {
|
109 |
index_valeur = legende_points_index[index_evenement_legende].reduce(function(prev, curr) {
|
| 87 |
return (Math.abs(curr - index_valeur_f) < Math.abs(prev - index_valeur_f) ? curr : prev);
|
110 |
return (Math.abs(curr - index_valeur_f) < Math.abs(prev - index_valeur_f) ? curr : prev);
|
| 88 |
});
|
111 |
});
|
| 89 |
text_hover = legende_points[index_evenement_legende]["'"+index_valeur+"'"];
|
112 |
text_hover = legende_points[index_evenement_legende]["'"+index_valeur+"'"];
|
| 90 |
}
|
113 |
}
|
| 91 |
|
114 |
|
| 92 |
return text_hover;
|
115 |
return text_hover;
|
| 93 |
}
|
116 |
}
|
| 94 |
|
117 |
|
| 95 |
function creerCopieTooltip($original, index_evenement_legende) {
|
118 |
function creerCopieTooltip($original, index_evenement_legende) {
|
| 96 |
var $clone = $original.clone(true);
|
119 |
var $clone = $original.clone(true);
|
| 97 |
var text_hover = renvoyerDatePourIndexNumerique($original.data('unformatted'), index_evenement_legende)
|
120 |
var text_hover = renvoyerDatePourIndexNumerique($original.data('unformatted'), index_evenement_legende)
|
| 98 |
|
121 |
|
| 99 |
$clone.html(text_hover);
|
122 |
$clone.html(text_hover);
|
| 100 |
$clone.data('unformatted', text_hover);
|
123 |
$clone.data('unformatted', text_hover);
|
| 101 |
$clone.attr('data-unformatted', text_hover);
|
124 |
$clone.attr('data-unformatted', text_hover);
|
| 102 |
$clone.css('visibility', 'visible');
|
125 |
$clone.css('visibility', 'visible');
|
| 103 |
$clone.css('width', '100%');
|
126 |
$clone.css('width', '100%');
|
| 104 |
$clone.css('font-size', '11px');
|
127 |
$clone.css('font-size', '11px');
|
| 105 |
|
128 |
|
| 106 |
return $clone;
|
129 |
return $clone;
|
| 107 |
}
|
130 |
}
|
| 108 |
|
131 |
|
| 109 |
$(document).ready(function() {
|
132 |
$(document).ready(function() {
|
| 110 |
|
133 |
|
| 111 |
$('#selecteur_liste_especes').change(function(e) {
|
134 |
$('#selecteur_liste_especes').change(function(e) {
|
| 112 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
135 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
| 113 |
Plotly.purge(conteneur_graphique);
|
136 |
Plotly.purge(conteneur_graphique);
|
| 114 |
obtenirDonneesPhasesPhenologiques($(this).val(), $('#selecteur_annees').val());
|
137 |
obtenirDonneesPhasesPhenologiques($(this).val(), $('#selecteur_annees').val());
|
| 115 |
});
|
138 |
});
|
| 116 |
|
139 |
|
| 117 |
$('#selecteur_annees').change(function(e) {
|
140 |
$('#selecteur_annees').change(function(e) {
|
| 118 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
141 |
var conteneur_graphique = document.getElementById('conteneur-graphique');
|
| 119 |
Plotly.purge(conteneur_graphique);
|
142 |
Plotly.purge(conteneur_graphique);
|
| 120 |
|
143 |
|
| 121 |
if($('#selecteur_liste_especes').val() != "0") {
|
144 |
if($('#selecteur_liste_especes').val() != "0") {
|
| 122 |
obtenirDonneesPhasesPhenologiques($('#selecteur_liste_especes').val(), $(this).val());
|
145 |
obtenirDonneesPhasesPhenologiques($('#selecteur_liste_especes').val(), $(this).val());
|
| 123 |
}
|
146 |
}
|
| 124 |
});
|
147 |
});
|
| - |
|
148 |
|
| - |
|
149 |
if(espece_defaut != null) {
|
| - |
|
150 |
obtenirDonneesPhasesPhenologiques(espece_defaut, annee_defaut);
|
| - |
|
151 |
}
|
| 125 |
|
152 |
|
| 126 |
});
|
153 |
});
|