Projet

Général

Profil

Actions

Feature #6599

fermé

Amélioration des graphiques

Ajouté par Nicolas Eysseric il y a plus de 9 ans. Mis à jour il y a environ 9 ans.

Statut:
Closed
Priorité:
High
Assigné à:
Catégorie:
Statistiques
Début:
13/03/2015
Echéance:
% réalisé:

100%

Temps estimé:
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.


Fichiers

01_line_chart.png (24,4 ko) 01_line_chart.png Yohann Chastagnier, 06/11/2015 15:07
00_bar_chart.png (11,8 ko) 00_bar_chart.png Yohann Chastagnier, 06/11/2015 15:07
02_pie_chart.png (32,7 ko) 02_pie_chart.png Yohann Chastagnier, 06/11/2015 15:11
03_mouse_over.png (13,9 ko) 03_mouse_over.png Yohann Chastagnier, 06/11/2015 15:23
04_mouse_over_element.png (16,3 ko) 04_mouse_over_element.png Yohann Chastagnier, 06/11/2015 15:29
05_download_as_image_button.png (18,2 ko) 05_download_as_image_button.png Yohann Chastagnier, 06/11/2015 15:33
06_download_as_image.png (59,9 ko) 06_download_as_image.png Yohann Chastagnier, 06/11/2015 15:40
07_navigation.png (17,6 ko) 07_navigation.png Yohann Chastagnier, 06/11/2015 15:52

Mis à jour par Nicolas Eysseric il y a plus de 9 ans

  • Catégorie mis à Statistiques
  • Statut changé de New à In progress...
  • Assigné à mis à Nicolas Eysseric
  • Version cible mis à Version 5.15

Mis à jour par Nicolas Eysseric il y a environ 9 ans

  • Statut changé de In progress... à Assigned
  • Assigné à changé de Nicolas Eysseric à Yohann Chastagnier
  • % réalisé changé de 0 à 50

Mis à jour par Nicolas Eysseric il y a environ 9 ans

  • Statut changé de Assigned à In progress...

Mis à jour par Yohann Chastagnier il y a environ 9 ans

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

Mis à jour par Miguel Moquillon il y a environ 9 ans

  • Statut changé de Resolved à Closed

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

Mis à jour par Miguel Moquillon il y a environ 9 ans

  • Statut changé de Closed à V6 pending

Mis à jour par Miguel Moquillon il y a environ 9 ans

  • Statut changé de V6 pending à Closed
Actions

Formats disponibles : Atom PDF