Subversion Repositories Sites.obs-saisons.fr

Rev

Rev 330 | Rev 333 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
330 aurelien 1
function capitaliserPremiereLettre(string) {
2
    return string.charAt(0).toUpperCase() + string.slice(1);
3
}
4
 
5
function obtenirNomEspeceSelectionnee() {
6
	return $('#selecteur_liste_especes option:selected').text();
7
}
8
 
9
function obtenirAnneeSelectionnee() {
10
	return $('#selecteur_annees option:selected').text();
11
}
12
 
13
function obtenirDonneesPhasesPhenologiques(id_espece, annee) {
14
	$.get(url_jrest+'OdsExport/ExportPhasesPhenologiquesJson?espece='+id_espece+'&annee='+annee, function(e) {
15
		dessinerGraphiquePhasesPhenologiques(e, annee);
16
	});
17
}
18
 
19
 
20
var legende_points = {};
21
var legende_points_index = {};
22
function dessinerGraphiquePhasesPhenologiques(data, annee) {
23
 
24
  var traces = new Array();
25
  for (var id_evenement in data) {
26
	    if (!data.hasOwnProperty(id_evenement)) continue;
27
      var data_evenement = data[id_evenement];
28
      traces.push({
29
        x: data_evenement.x,
30
        type: 'box',
31
        name: capitaliserPremiereLettre(id_evenement),
32
      });
33
 
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) {
36
        return parseFloat(x.replace("'", ''));
37
      });
38
  }
39
 
331 aurelien 40
  var titre = 'Calendrier phénologique pour l\'espèce '+obtenirNomEspeceSelectionnee();
41
  if(annee == "0") {
42
    titre += '<br /> Toutes les années';
43
  } else {
44
    titre += '<br /> Année '+obtenirAnneeSelectionnee();
45
  }
46
 
47
 
330 aurelien 48
  var layout = {
331 aurelien 49
    title: titre,
330 aurelien 50
    xaxis: {
51
	    title: '',
52
      autorange: true,
53
			autoticks: false,
54
      hoverformat: '.7f',
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'],
57
	  }
58
  };
59
 
60
  Plotly.newPlot('conteneur-graphique', traces, layout);
61
  var graphique = document.getElementById('conteneur-graphique');
62
 
63
  graphique.on('plotly_hover', function(data) {
64
    modifierAffichageToolTips(data);
65
  });
66
 
67
}
68
 
69
function modifierAffichageToolTips(data) {
70
  var axeY = data.points[0].y;
71
  $('text.nums, text.name').css('visibility', 'hidden');
72
  $('text.nums, text.name').css('width', 0);
73
  $('text.nums').each(function() {
74
    var $text_hover_clone = creerCopieTooltip($(this), axeY);
75
    $(this).parent().append($text_hover_clone);
76
  });
77
}
78
 
79
function renvoyerDatePourIndexNumerique(index_valeur, index_evenement_legende) {
80
  // 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
82
  var index_valeur_formate = parseFloat(index_valeur).toFixed(7);
83
  var text_hover = legende_points[index_evenement_legende]["'"+index_valeur_formate+"'"];
84
  if(typeof text_hover == "undefined") {
85
    index_valeur_f = parseFloat(index_valeur);
86
    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);
88
    });
89
    text_hover = legende_points[index_evenement_legende]["'"+index_valeur+"'"];
90
  }
91
 
92
  return text_hover;
93
}
94
 
95
function creerCopieTooltip($original, index_evenement_legende) {
96
  var $clone = $original.clone(true);
97
  var text_hover = renvoyerDatePourIndexNumerique($original.data('unformatted'), index_evenement_legende)
98
 
99
  $clone.html(text_hover);
100
  $clone.data('unformatted', text_hover);
101
  $clone.attr('data-unformatted', text_hover);
102
  $clone.css('visibility', 'visible');
103
  $clone.css('width', '100%');
104
  $clone.css('font-size', '11px');
105
 
106
  return $clone;
107
}
108
 
109
$(document).ready(function() {
110
 
111
  $('#selecteur_liste_especes').change(function(e) {
112
    var conteneur_graphique = document.getElementById('conteneur-graphique');
113
    Plotly.purge(conteneur_graphique);
331 aurelien 114
    obtenirDonneesPhasesPhenologiques($(this).val(), $('#selecteur_annees').val());
330 aurelien 115
  });
116
 
117
  $('#selecteur_annees').change(function(e) {
118
    var conteneur_graphique = document.getElementById('conteneur-graphique');
119
    Plotly.purge(conteneur_graphique);
120
 
121
    if($('#selecteur_liste_especes').val() != "0") {
122
      obtenirDonneesPhasesPhenologiques($('#selecteur_liste_especes').val(), $(this).val());
123
    }
124
  });
331 aurelien 125
 
330 aurelien 126
});