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.

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;
 		}

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}}

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>

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(){