Project

General

Profile

Actions

Feature #6599

closed

Amélioration des graphiques

Added by Nicolas Eysseric over 6 years ago. Updated about 6 years ago.

Status:
Closed
Priority:
High
Category:
Statistiques
Start date:
03/13/2015
Due date:
% Done:

100%

Estimated time:
Livraison en TEST:
Livraison en PROD:

Description

Les graphiques des statistiques sont vieillissants.
De plus, ils sont statiques et ne permettent aucune interaction.
Pour finir, ils sont générés côté serveur alors que des plugins Javascript séduisants existent...

L'objectif de cette évolution est de remplacer les graphiques actuels par des graphiques plus modernes.


Files

01_line_chart.png (24.4 KB) 01_line_chart.png Yohann Chastagnier, 11/06/2015 03:07 PM
00_bar_chart.png (11.8 KB) 00_bar_chart.png Yohann Chastagnier, 11/06/2015 03:07 PM
02_pie_chart.png (32.7 KB) 02_pie_chart.png Yohann Chastagnier, 11/06/2015 03:11 PM
03_mouse_over.png (13.9 KB) 03_mouse_over.png Yohann Chastagnier, 11/06/2015 03:23 PM
04_mouse_over_element.png (16.3 KB) 04_mouse_over_element.png Yohann Chastagnier, 11/06/2015 03:29 PM
05_download_as_image_button.png (18.2 KB) 05_download_as_image_button.png Yohann Chastagnier, 11/06/2015 03:33 PM
06_download_as_image.png (59.9 KB) 06_download_as_image.png Yohann Chastagnier, 11/06/2015 03:40 PM
07_navigation.png (17.6 KB) 07_navigation.png Yohann Chastagnier, 11/06/2015 03:52 PM
Actions #1

Updated by Nicolas Eysseric over 6 years ago

  • Category set to Statistiques
  • Status changed from New to In progress...
  • Assignee set to Nicolas Eysseric
  • Target version set to Version 5.15
Actions #2

Updated by Nicolas Eysseric about 6 years ago

  • Status changed from In progress... to Assigned
  • Assignee changed from Nicolas Eysseric to Yohann Chastagnier
  • % Done changed from 0 to 50
Actions #3

Updated by Nicolas Eysseric about 6 years ago

  • Status changed from Assigned to In progress...
Actions #4

Updated by Yohann Chastagnier about 6 years ago

Une API permettant de présenter des graphiques a été mise en place.
Cette dernière est maintenant utilisée par le module des statistiques accessible depuis l'onglet Statistiques dans la partie administration.

Les graphiques

Cette API permet aujourd'hui de réaliser 3 types de graphiques.

Un graphique barre, permettant de présenter des données dans le temps :

Un graphique ligne, permettant lui aussi de présenter des données dans le temps :

Et enfin, un graphique camembert qui permet de représenter les données par des portions :

Chacun des graphiques intègre les mêmes principes suivants :
  • lorsque le curseur de la souris est au dessus de la zone du graphique, l'arrière plan se grise légèrement et un bouton apparaît (ici en haut à droite)

  • lorsque le curseur de la souris est au dessus d'un élément du graphique représentant une donnée, cet élément se met en surbrillance et une petite infobulle apparaît à proximité du curseur de la souris pour indiquer le détail de cette donnée

  • le bouton qui apparaît, lorsque le curseur de la souris survole la zone du graphique, permet de télécharger le graphique sous la forme d'une image. Une aide apparaît lorsque le curseur est au dessus bouton

Un exemple de téléchargement depuis le module des statistiques (les différents éléments qui composent le graphique sont bien tous présents, titre, libellés, légende, etc.) :

  • il est également possible de définir une action sur le clique d'un élément du graphique. Lorsqu'une action est définie et est possible pour un élément, la mention Cliquer pour consulter le détail apparaît dans l'infobulle. Dans le module statistique, par exemple, le clique sur une portion d'un camembert représentant une donnée d'un espace permet de se diriger sur des statistiques plus détaillées de l'espace.

Concernant le graphique camembert, il est paramétré par défaut pour agréger toutes les données qui sont inférieures ou égales au seuil de 3%. Le résultat de cette agrégation se retrouve systématiquement dans la catégorie Autre.
Un graphique, celui qui apparaît ci-dessus au niveau des explications sur le téléchargement d'un graphique, illustre cette catégorie. Ici, l'agrégation de toutes les données inférieure à 3% représente tout de même une part de 39%.
Cette agrégation permet de ne pas dégrader l'affichage du camembert avec une multitude de données dont le poids unitaire est négligeable.

Pour finir, un fichier de paramètres SILVERPEAS_HOME/properties/org/silverpeas/chart/chart.properties a été mis en place. Il propose deux paramètres :
  • chart.pie.colors.jsarray : la palette de couleur qui est utilisée dans la cas de la présentation d'un graphique de type camembert. La valeur renseignée doit correspondre à un tableau javascript composé de codes couleur CSS. Par défaut : ["#008cd6", "#7cb63e", "#eb9b0f", "#f53333", "#cf1a4d", "#7d2a70", "#144476", "#458277", "#dc776f", "#7d5a5a", "#777777", "#000000"]
  • chart.pie.combine.threshold : le seuil en dessous duquel les données d'un camembert sont agrégées pour ne pas polluer l'affichage de ce dernier avec des données unitaires négligeables. Par défaut 0.03 (c'est à dire 3%)

Le module des statistiques

Toutes les pages qui présentent des graphiques ont été revues pour utiliser la nouvelle API.
Aussi, pour rendre ce module plus dynamique, les critères de date ou de plage de date par défaut des différentes pages ont été redéfinis et les graphiques sont immédiatement calculés dès l'arrivée de l'utilisateur sur la page.
Lorsque les critères présentent une date (mois/année), cette dernière est par défaut égale au mois qui précéde celui de la date du jour.
Lorsque les critères présentent une plage de dates, la date de fin est par défaut égale au mois qui précéde celui de la date du jour, et la date de début est égale à la date de fin moins 1 an.

Compatibilité des navigateurs WEB

Les versions suivantes des navigateurs WEB permettent d'utiliser ce nouveau mécanisme :
Chrome 7+
Firefox 4+
Internet Explorer 9+

Pour les développeurs

Exemple de génération d'un graphique de données dans le temps

Initialisation en java :

PeriodChart periodChart = PeriodChart.fromTitle("Un exemple de graphique ligne/barre");
periodChart.forX(Period.from(/[la date d'un mois]/, PeriodType.month)).add(26);
periodChart.forX(Period.from(/[la date d'un autre mois]/, PeriodType.month)).add(38);
periodChart.forX(Period.from(/[la date d'un autre mois]/, PeriodType.month)).add(75);

Dans une JSP :

...
<%@ taglib tagdir="/WEB-INF/tags/silverpeas/util" prefix="viewTags" %>
...
<c:set var="periodChart" value="${requestScope.periodChart}"/>
...
<!-- Pour présenter un graphique ligne (présentation par défaut) -->
<viewTags:displayChart chart="${periodChart}"/>
...
<!-- Pour présenter un graphique barre -->
<viewTags:displayChart chart="${periodChart}" displayAsBars="true"/>
...

Exemple de génération d'un graphique camembert

Initialisation en java :

PieChart pieChart = PieChart.fromTitle("Un exemple de graphique camembert");
pieChart.add("Portion 1", 26);
pieChart.add("Portion 2", 38);
pieChart.add("Portion 3", 75);

Dans une JSP :

...
<%@ taglib tagdir="/WEB-INF/tags/silverpeas/util" prefix="viewTags" %>
...
<c:set var="pieChart" value="${requestScope.pieChart}"/>
...
<viewTags:displayChart chart="${pieChart}"/>
...

Une page de demo a été créée : /demo/chart/index.jsp

Intégration

https://github.com/Silverpeas/Silverpeas-Core/pull/644

Actions #5

Updated by Miguel Moquillon about 6 years ago

  • Status changed from Resolved to Closed

Intégré en 5.15. En attente d'un PR pour la V6

Actions #6

Updated by Miguel Moquillon about 6 years ago

  • Status changed from Closed to V6 pending
Actions #7

Updated by Miguel Moquillon about 6 years ago

  • Status changed from V6 pending to Closed
Actions

Also available in: Atom PDF