J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident.
Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique.
Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va
- créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données)
- déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg)
- localiser les dates de d3 avec la locale demandé
- préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données)
- executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique)
Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
- echelle axe des Y à droite (près des mesures les plus récentes)
- legende en dessous des graphes, en ligne
- Titre en fer a gauche, regroupé avec les actions de pagination
- graphe des mois depuis l'origine du site par defaut (graphe des jours inchangé sur 90jours)
- axe des X : date humainement lisible (15 janvier au lieu de 15/01/2013)
- eviter les effets de gradients sur les barres ça gene le lisibilité. On met en plein avec une très légere transparence pour ne presque pas distinguer border et background
- le gris des weekend était a peine visible sur certains ecrans, on le fonce
- la barre des changement d'année est de largeur 1 mois sur le graphe des mois
- ne pas masquer l'explication car elle n'est pas visible
- hierarchie de l'info dans le tableau des résumés
Un peu de refactoring js en utilisant closest('.graphique') au lieu d'enchainer les .parent() qui rendent le code peu robuste
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.
Matthieu Marcillaud
marcimat@rezo.net