Browse Source

Les prévisions affichées...

Ce n'est pas simple : Flot superpose les graphiques les uns sur les autres de sorte que les prévisions qui arrivent en dernier passent par dessus la courbe des visites du jour, empêchant de les lire. On déplace donc en javascript les prévisions pour les passer dans la première colonne ; ainsi, les visites du jours seront par dessus.

On change la librairie tFlot pour s'appuyer sur .data() et pouvoir transmettre des couleurs aux graphiques.
svn/root/tags/plugins/statistiques/0.3.2
marcimat@rezo.net 12 years ago
parent
commit
3b83e5fc55
  1. 38
      javascript/jquery.tflot.js
  2. 4
      prive/squelettes/inclure/stats-visites-jours.html
  3. 4
      prive/squelettes/inclure/stats-visites-mois.html
  4. 16
      prive/stats/visites.html

38
javascript/jquery.tflot.js

@ -1,7 +1,7 @@
/**
* Librairie tFlot pour jQuery et jQuery.flot
* Licence GNU/GPL - Matthieu Marcillaud
* Version 1.3.0
* Version 1.4.0
*/
(function($){
@ -63,6 +63,7 @@
container:null,
labelFormatter:null
},
bars: {fill:false},
yaxis: { min: 0 },
selection: { mode: "x" }
}
@ -194,7 +195,7 @@
barWidth: 0.9,
align: "center",
show:true,
fill:true
fill:false
},
lines: {
show:false,
@ -299,7 +300,10 @@
color=0;
$.each(flot, function(i, serie) {
serie = $.extend(true, {}, options.defaultSerie, {color: color++}, serie);
if (!serie.color) {
serie.color = color++;
}
serie = $.extend(true, {}, options.defaultSerie, serie);
flot[i] = serie;
});
@ -321,23 +325,29 @@
*/
function optionsCss(element) {
var options = {};
// si classe 'flotLine' on met une ligne
if ($(element).hasClass('flotLine')) {
$element = $(element);
if ($element.data('serie') == 'line') {
$.extend(true, options, {
lines:{show:true},
bars:{show:false},
points:{show:false}
});
}
if ($(element).hasClass('flotBar')) {
if ($element.data('serie') == 'bar') {
$.extend(true, options, {
lines:{show:false},
bars:{show:true},
points:{show:false}
});
}
// si classe 'flotFill' on met rempli
if ($(element).hasClass('flotFill')) {
if ($element.data('serie') == 'lineBar') {
$.extend(true, options, {
lines:{show:true,steps:true},
bars:{show:false},
points:{show:false}
});
}
if ($element.data('fill')) {
$.extend(true, options, {
lines:{
fill:true,
@ -349,6 +359,9 @@
}
});
}
if (color = $element.data('color')) {
options.color = color;
}
return options;
}
@ -367,7 +380,11 @@
g = options.plage;
series = [];
color = 0;
$.each(lesSeries, function(i, val){
// recuperer le numero de couleur max
color = ParseInt(Math.max(color,val.color));
data = [], moy = [];
$.each(val.data, function (j, d){
// ajout du nouvel element
@ -393,9 +410,10 @@
series.push(serieG);
});
// remettre les couleurs
color=0;
$.each(series, function(i, val) {
val.color = color++;
if (!val.color) {
val.color = color++;
}
});
return series;
}

4
prive/squelettes/inclure/stats-visites-jours.html

@ -72,14 +72,16 @@
<th><:date|trim{':'}|trim:></th>
<th class='valeur'><:info_visites|trim{':'}|trim:></th>
<th class='moyenne'><:info_moyenne|trim{':'}|trim:></th>
<th class='prevision'><:info_previsions|trim{':'}|trim:></th>
</tr>
</thead>
<tbody>
<BOUCLE_statsj(DATA){source stats_visites,jour,#ENV{duree,90},#ENV{id_article}}>
<tr class="c_[(#CLE|affdate{l}|substr{0,3})][(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)c_today]">
<th title="[(#CLE|affdate{'Y-m-d'})]">[(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|?{<:info_aujourdhui:>,#CLE|affdate_jourcourt})]</th>
<td class="val">#VALEUR{visites}[<em>(<span>(#VALEUR{prevision})</span>)</em>]</td>
<td class="val">#VALEUR{visites}</td>
<td class="mean">#VALEUR{moyenne}</td>
<td class="prev">#VALEUR{prevision}</td>
</tr>
#SET{max,#GET{max}|max{#VALEUR{visites}}}
#SET{moy,#VALEUR{moyenne}}

4
prive/squelettes/inclure/stats-visites-mois.html

@ -22,14 +22,16 @@
<th><:date|trim{':'}|trim:></th>
<th class='valeur'><:info_visites|trim{':'}|trim:></th>
<th class='moyenne'><:info_moyenne|trim{':'}|trim:></th>
<th class='prevision'><:info_previsions|trim{':'}|trim:></th>
</tr>
</thead>
<tbody>
<BOUCLE_statsm(DATA){source stats_visites,mois,#ENV{duree,365},#ENV{id_article}}>
<tr class="c_[(#CLE|affdate{l}|substr{0,3})][(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)c_today]">
<th title="[(#CLE|affdate{'Y-m-01'})]">[(#CLE|affdate_mois_annee)]</th>
<td class="val">#VALEUR{visites}[<em>(<span>(#VALEUR{prevision})</span>)</em>]</td>
<td class="val">#VALEUR{visites}</td>
<td class="mean">[(#VALEUR{moyenne}|round)]</td>
<td class="prev">[(#VALEUR{prevision})]</td>
</tr>
</BOUCLE_statsm>
</tbody>

16
prive/stats/visites.html

@ -18,8 +18,18 @@ function trace_stats_table(table, classes, options) {
.wrap("<div class='" + classes + "'></div>");
// mettre les visites avec un fond colore pour le graphique
$table.find("thead th:eq(1)").addClass('flotFill').addClass('flotBar');
$table.find("thead th:eq(2)").addClass('flotLine');
$table.find("thead th:eq(1)").data({fill: true, serie: 'bar', color: '#FFD845'});
$table.find("thead th:eq(2)").data({serie: 'line', color: '#7FC4FF'});
$table.find("thead th:eq(3)").data({fill: true, serie: 'bar', color: '#A9DD3A'});
// mettre les previsions en premier
// (pour que les autres graph passent par dessus)
$table.find('thead tr th:first-child').after(function(){
return $(this).parent().find('th:eq(3)').detach();
});
$table.find('tbody tr th:first-child').after(function(){
return $(this).parent().find('td:last-child').detach();
});
params = {
legendeExterne:true,
@ -58,7 +68,7 @@ function trace_stats_table(table, classes, options) {
infobulle:{show:true}
}
$table.tFlot($.extend(true, params, options));
$table.tFlot($.extend(true, {}, params, options));
}
function trace_stats(){

Loading…
Cancel
Save