WebSVN – Sites.obs-saisons.fr – Diff – /trunk/applications/graphiques/js/calendrier-evenements.js


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) {
    var donnees_dispos = !jQuery.isEmptyObject(e);
    if(donnees_dispos) {
      dessinerGraphiquePhasesPhenologiques(e, annee);
    }
 
    $('.aucune-donnee').toggleClass('hide', donnees_dispos);
    $('.conteneur-graphique').toggleClass('hide', !donnees_dispos);
	});
}
 
 
var legende_points = {};
var legende_points_index = {};
function dessinerGraphiquePhasesPhenologiques(data, annee) {
 
  var traces = new Array();
  var nb_evenements = 0;
  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("'", ''));
      });
 
      nb_evenements++;
  }
 
  var titre = 'Espèce '+obtenirNomEspeceSelectionnee();
  if(annee == "0") {
    titre += '<br /> Toutes les années';
  } else {
    titre += '<br /> Année '+obtenirAnneeSelectionnee();
  }
 
  var layout = {
    title: titre,
    xaxis: {
	    title: '',
      autorange: true,
			autoticks: false,
      hoverformat: '.7f',
			tickvals: [1,2,3,4,5,6,7,8,9,10,11,12],
    	ticktext: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
	  },
    // pour la légende apparaisse en bas du graphique afin de ne pas gâcher
    // presque un tiers de l'espace de la page
    legend:{
      xanchor:"center",
      yanchor:"top",
      y:-0.3,
      x:0.5
    },
    yaxis: {
      tickangle: (nb_evenements == 1 ? -90 : 0),
    }
    legend: false
  };
 
  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() {
 
    // certains label contiennent du texte qui ne doit pas être changé
    // par exemple si un point tombe pile sur un début de mois
    // le nom du mois doit rester affiché
    if(isNaN($(this).data('unformatted'))) {
      $(this).css('visibility', 'visible');
      $(this).css('width', '100%');
      return true;
    }
 
    var $label_axe_y = $(this).parent().find(":contains("+axeY+")");
    if($label_axe_y.length != 0) {
      $label_axe_y.css('z-index', -99999);
      $label_axe_y.hide();
    }
    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);
    obtenirDonneesPhasesPhenologiques($(this).val(), $('#selecteur_annees').val());
  });
 
  $('#selecteur_annees').change(function(e) {
    var conteneur_graphique = document.getElementById('conteneur-graphique');
    Plotly.purge(conteneur_graphique);
 
    if($('#selecteur_liste_especes').val() != "0") {
      obtenirDonneesPhasesPhenologiques($('#selecteur_liste_especes').val(), $(this).val());
    }
  });
 
  if(espece_defaut != null) {
    obtenirDonneesPhasesPhenologiques(espece_defaut, annee_defaut);
  }
 
});

Subversion Repositories Sites.obs-saisons.fr

(root)/trunk/applications/graphiques/js/calendrier-evenements.js – Rev 341 → 344

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