Subversion Repositories Sites.obs-saisons.fr

Rev

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