Subversion Repositories Sites.obs-saisons.fr

Rev

Rev 333 | Rev 341 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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