Le 30 janv. 09 à 15:26, marcimat@free.fr a commité :
Author: marcimat@free.fr
Date: Fri Jan 30 15:26:51 2009
New Revision: 26306Log:
Les vignettes et le zoom fonctionnent
Et fonctionnent en même temps que les légendes clicables...Bref, le bonheur.
+ modification de la structure du code...
Ta langue maternelle c'est le javascript ou quoi 
?
Modified:
_plugins_/_dev_/flot_stats/javascript/jquery.tflot.jsModified: _plugins_/_dev_/flot_stats/javascript/jquery.tflot.js
=====================================================================
--- _plugins_/_dev_/flot_stats/javascript/jquery.tflot.js (original)
+++ _plugins_/_dev_/flot_stats/javascript/jquery.tflot.js Fri Jan 30 15:26:51 2009
@@ -1,15 +1,25 @@
+/**
+ * Librairie tFlot pour jQuery et jQuery.flot
+ * Licence GNU/GPL - Matthieu Marcillaud
+ * Version 1.0.0
+ */
+
(function($){/**
* Deux variables a garder globalement
*
* collections : stockage de l'ensemble de toutes les valeurs de tous les graphs et leurs options
+ * collectionsActives : stockage des series actives
+ * plots : stockage des graphiques
+ * vignettes : stockage des vignettes
* idGraph : identifiant unique pour tous les graphs
*/
- var collections, id;
collections = ;
+ collectionsActives = ;
plots = ;
vignettes = ;
+ vignettesSelection = ;
idGraph = 0;/*
@@ -62,7 +72,7 @@
// .graphOverview
$(this).hide().wrap("<div class='graphique' id='graphique"+idGraph+"'></div>");
graphique = $(this).parent();
- values = $(this).tFlotParseTable({dataList:options.parse});
+ values = parseTable(this, {dataList:options.parse});
$.extend(true, values.options, options.flot);
graph = $("<div class='graphResult' style='width:" + options.width + ";height:" + options.height + ";'></div>").appendTo(graphique);
gInfo = $("<div class='graphInfo'></div>").appendTo(graphique);
@@ -106,39 +116,49 @@// en cas de moyenne glissante, on la calcule
if (options.moyenneGlissante.show) {
- values.series = $.tFlotMoyenneGlissante(values.series, options.moyenneGlissante);
+ values.series = moyenneGlissante(values.series, options.moyenneGlissante);
}// si infobulles, les ajouter
if (options.infobulle.show) {
$.extend(true, options.infobulle, {date:options.modeDate});
- $('#graphique'+idGraph).tFlotInfobulle(options.infobulle);
+ infobulle($('#graphique'+idGraph), options.infobulle);
$.extend(true, values.options, {
grid:{hoverable:true}
});
}- // stocker les valeurs
- collections.push({id:idGraph, values:values});
// dessiner
plots[idGraph] = $.plot(graph, values.series, values.options);// prevoir les actions sur les labels
- $('#graphique'+idGraph).tFlotActions();
+ if (options.legendeActions) {
+ $.extend(values.options, {legend:{container:null, show:false}});
+ actionsLegendes($('#graphique'+idGraph));
+ }// ajouter une mini vue si demandee
if (options.vignette.show) {
$("<div class='graphVignette' id='#graphVignette"+idGraph
+ "' style='width:" + options.vignette.width + ";height:"
+ options.vignette.height + ";'></div>").appendTo(gInfo);
- $('#graphique'+idGraph).tFlotVignette(values, options.vignette);
+ creerVignette($('#graphique'+idGraph), values.series, values.options, options.vignette);
+ if (options.vignette.zoom) {
+ zoomVignette($('#graphique'+idGraph));
+ }
}+ // stocker les valeurs
+ collections.push({id:idGraph, values:values}); // sources
+ collectionsActives = $.extend(true, {}, collections); // affiches
+
++idGraph;
});- }
+@@ -146,10 +166,9 @@
* Prendre une table HTML
* et calculer les donnees d'un graph jQuery.plot
*/
- $.fn.tFlotParseTable = function(settings){
- var table, series, data, labels, cpt, options, color;
- flot = series = data = labels = ;
- color=0;
+ function parseTable(table, settings){
+ var options;
+ flot = ;options = {
ticks:, // [1:"label 1", 2:"label 2"]
@@ -165,7 +184,7 @@
axe=0;
if (row) {
// dans le th de chaque tr
- $(this).find('tr:not(:first)').each(function(){
+ $(table).find('tr:not(:first)').each(function(){
$(this).find('th:first').each(function(){
options.ticks.push([++axe, $(this).text()]);
});
@@ -173,7 +192,7 @@} else {
// dans les th du premier tr
- $(this).find('tr:first th:not(:first)').each(function(){
+ $(table).find('tr:first th:not(:first)').each(function(){
options.ticks.push([++axe, $(this).text()]);
});
}
@@ -187,18 +206,18 @@
if (row) {
// si axes definis, on saute une ligne
if (axe) {
- columns = $(this).find('tr:first th:not(:first)');
+ columns = $(table).find('tr:first th:not(:first)');
} else {
- columns = $(this).find('tr:first th');
+ columns = $(table).find('tr:first th');
}
// chaque colonne est une seriefor(i=0; i<columns.length; i++){
cpt=0, data=;
- th = $(this).find('tr:first th:eq(' + (i + axe) + ')');
+ th = $(table).find('tr:first th:eq(' + (i + axe) + ')');
label = th.text();
- serieOptions = th.tFlotCssOptions();
- $(this).find('tr td:nth-child(' + (i + 1 + axe) +')').each(function(){
+ serieOptions = optionsCss(th);
+ $(table).find('tr td:nth-child(' + (i + 1 + axe) +')').each(function(){
val = parseFloat($(this).text());
data.push( [++cpt, val] );
});
@@ -211,16 +230,16 @@
} else {
// si axes definis, on saute une colonne
if (axe) {
- rows = $(this).find('tr:not(:first)');
+ rows = $(table).find('tr:not(:first)');
} else {
- rows = $(this).find('tr');
+ rows = $(table).find('tr');
}
// chaque ligne est une serie
rows.each(function(){
cpt=0, data=;
th = $(this).find('th');
label = th.text();
- serieOptions = th.tFlotCssOptions();
+ serieOptions = optionsCss(th);
// recuperer les valeurs
$(this).find('td').each(function(){
val = parseFloat($(this).text());
@@ -264,17 +283,23 @@- $.fn.tFlotCssOptions = function (){
- options = {}
+
+ /*
+ *
+ * Recuperer les options en fonctions de CSS
+ *
+ */
+ function optionsCss(element) {
+ var options = {};
// si classe 'flotLine' on met une ligne
- if ($(this).hasClass('flotLine')) {
+ if ($(element).hasClass('flotLine')) {
$.extend(true, options, {
lines:{show:true},
bars:{show:false}
});
}
// si classe 'flotFill' on met rempli
- if ($(this).hasClass('flotFill')) {
+ if ($(element).hasClass('flotFill')) {
$.extend(true, options, {
lines:{fill:true},
bars:{fill:true}
@@ -284,14 +309,69 @@
}+
+ /*
+ *
+ * calcul d'une moyenne glissante
+ *
+ */
+ function moyenneGlissante(lesSeries, settings) {
+ var options;
+ options = {
+ plage: 7,
+ texte:"Moyenne glissante",
+ }
+ $.extend(options, settings);
+
+ g = options.plage;
+ series = ;
+ $.each(lesSeries, function(i, val){
+ data = , moy = ;
+ $.each(val.data, function (j, d){
+ // ajout du nouvel element
+ // et retrait du trop vieux
+ moy.push(parseInt(d[1]));
+ if (moy.length>=g) { moy.shift();}
+
+ // calcul de la somme et ajout de la moyenne
+ for(var k=0,sum=0;k<moy.length;sum+=moy[k++]);
+ data.push([d[0], Math.round(sum/moy.length)]);
+ });
+
+ serieG = $.extend(true, {}, val, {
+ data:data,
+ label:val.label + " ("+options.texte+")",
+ lines:{
+ show:true,
+ fill:false
+ },
+ bars:{show:false}
+ });
+ series.push(val);
+ series.push(serieG);
+ });
+ // remettre les couleurs
+ color=0;
+ $.each(series, function(i, val) {
+ val.color = color++;
+ });
+ return series;
+ }
+
//
// Permettre de cacher certaines series
//
- $.fn.tFlotActions = function() {
+ function actionsLegendes(graph) {
// actions sur les items de legende
// pour masquer / afficher certaines series
// a ne charger qu'une fois par graph !!!
- $(this).find('.legendLabel a').click(function(){
+ $(graph).find('.legendLabel a').click(function(){
tr = $(this).parent().parent();
tr.toggleClass('cacher').find('.legendColorBox div').toggle();@@ -310,8 +390,14 @@
}
}
});
- $.extend(collections[pid].values.options, {legend:{container:null, show:false}});
+ collectionsActives[pid].values.series = seriesActives;
+
$.plot(master.find('.graphResult'), seriesActives, collections[pid].values.options);
+ // vignettes
+ if (master.find('.graphVignette').length) {
+ creerVignette(master, seriesActives, collections[pid].values.options);
+ }
+
});
}@@ -316,10 +402,13 @@
}+
//
- // Permettre d'afficher une miniature zoomable du tableau
+ // Afficher une miniature
//
- $.fn.tFlotVignette = function(values, settings) {
+ function creerVignette(graphique, series, optionsParents, settings) {
+ var options;
options = {
show:true,
zoom:true,
@@ -327,22 +416,36 @@
legend: { show: false },
lines: { show: true, lineWidth: 1 },
shadowSize: 0,
- xaxis: { ticks: 4},
- yaxis: { ticks: 3},- grid: { color: "#999" },
- selection: { mode: "x" }
+ grid: { color: "#999", hoverable:null },
+ selection: { mode: "x" },
+ xaxis:{min:null, max:null},
+ yaxis:{min:null, max:null},
}
};
$.extend(true, options, settings);
+ options.flot = $.extend(true, {}, optionsParents, options.flot);
+
// demarrer la vignette
- vignette = $(this).find('.graphVignette');
+ vignette = $(graphique).find('.graphVignette');
+ pid = vignette.parent().parent().attr('id').substr(9);
+ vignettes[pid] = $.plot(vignette, series, options.flot);
+
+ if (vignettesSelection[pid] !== undefined) {
+ vignettes[pid].setSelection(vignettesSelection[pid]);
+ }
+ }
+
+ //
+ // Permettre le zoom sur une miniature
+ //[... 121 lines stripped ...]
_______________________________________________
Spip-zone-commit@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-zone-commit
