Présentation de l’addin diagramme de Gantt #
Cet addin permet la réalisation de diagramme de Gantt dans vos tableaux de bord. Un diagramme de Gantt est un outil permettant la visualisation dans le temps de différentes activités ou tâches. La colonne d’ordonnée (Y) représente la tâche ou l’activité que l’on veut visualiser et l’abscisse (X) représente le temps passé.
Utilisation du diagramme de Gantt #
Vous pouvez ajouter le diagramme de Gantt sur vos tableaux de bords à partir de BiBOARD Studio
Une fois installé, ce composant additionnel ce trouve dans la catégorie « Dates » comme indiqué dans l’image ci-dessous
Paramétrage du composant #
Pour fonctionner le composant diagramme a besoin d’une configuration minimale :
3 paramètres sont obligatoires au bon fonctionnement du composant et 2 autres optionnels.
Tous ces paramètres sont regroupés dans la partie paramétrage du composant diagramme de Gantt :
Propriétés > Sélection des colonnes
Paramètres obligatoires #
Date de début #
La date de début précise la colonne dans votre source de données servant de date de début aux éléments (tâches) de votre diagramme de Gantt. Cette colonne doit forcément être au format date sinon elle ne sera pas disponible à la sélection.
NB : Le format DateTime est aussi accepté, permettant d’avoir des diagrammes heure par heure.
Date de fin #
La date de fin précise la colonne dans votre source de données servant de date de fin à tous les éléments de votre diagramme de Gantt. Cette colonne doit forcément être au format date sinon elle ne sera pas disponible à la sélection.
NB : Le format DateTime est aussi accepté, permettant d’avoir des diagrammes heure par heure.
Colonne de regroupement (Ordonnée) #
Cette colonne détermine le titre principal du regroupement de tâches (axe Y du diagramme).
Prenons l’exemple d’un projet de construction d’immeuble : Je souhaite afficher la liste des tâches effectuées par chaque corps de métier. Je paramètre alors le nom du corps de métier comme champ de regroupement.
Paramètres optionnels #
Colonne couleur #
Si vous souhaitez définir précisément la couleur de chaque tâche, il suffira de définir la colonne de votre Datasource contenant la couleur.
Le format de couleur peut être sous toutes les formes acceptés par une feuille de style CSS (couleur nommée (green, yellow, blue,…) , formats : RGB et RGBA, hexadécimal et les couleurs prédéfinies). Si l’une des couleurs n’est pas dans un format valide une couleur par défaut sera sélectionnée au hasard à la place.
Info Bulle / Tooltip #
Ce paramètre permet de spécifier la colonne utilisée pour afficher les infobulles (au survol des tâches) du diagramme de Gantt. Dans l’exemple d’un suivi de planning par employé on pourrait définir que l’information affichée au survol est le nom de la tâche réalisée par l’employé.
Champs de référence pour les liens sortants #
Dans le cas où le diagramme de Gantt est utilisé en temps que source de lien, ce paramètre permet de spécifier la colonne de la source de données à utiliser.
Champs de tri #
Colonne utilisée pour effectuer un tri sur le jeu de données utilisé dans le diagramme de Gantt
Type de tri #
Permet de définir si le tri effectué sur le champs de tri est fait dans l’ordre croissant et décroissant. Remarque : L’ordre croissant correspond à une lecture de bas en haut, selon l’axe des ordonnées du diagramme.
NB : L’application du tri dépendra du type de la colonne ‘champs de tri’, des divergences peuvent intervenir entre des colonnes d’entiers et des colonnes de chaîne de caractères.
Afficher la barre de scroll #
Cette case à cocher permet d’indiquer si l’on veut une barre de scroll permettant de zoomer sur le diagramme de Gantt ou non. Pratique notamment quand beaucoup de données sont affichées.
Gestion des couleurs pour le composant #
Les couleurs peuvent être gérées de 3 manières dans ce diagramme de Gantt :
Elles peuvent être gérées par une colonne de la source de données spécifiant la couleur pour chaque élément (partie : paramètre colonne couleur). Encore une fois si la valeur de la couleur n’est pas conventionnelle une couleur par défaut sera choisi à la place
Elles peuvent être définies dans un fichier XML avec la liste des couleurs pouvant être appliquées au composant. Ce fichier se trouve dans le fichier où est installée votre instance BiBOARD puis suivant le chemin suivant : Web\resources\themes\BBSkinAuto\Gantt et s’intitule MapColors.xml, ce fichier se présente sous la forme suivante :
Pour définir la liste des couleurs il suffit de créer des balises XML semblables à celles présentées ci-dessus c’est à dire :
<Color id= »(optionnel) »>Ma couleur en héxadécimal</Color>
et les intégrer à la liste des couleur délimités par les balises suivantes :
<Colors> Mes couleurs ici</Colors>.
Ensuite le thème Skin Auto devra être appliqué au composant diagramme de Gantt ou au style général de l’application afin que les couleurs soient belles et bien appliquées :
Sélection du style automatique pour le composant GanttOn définit 3 couleurs différentes dans un format différent dans noter fichier MapColors.xml:
Définition de 3 couleurs hexadécimal, nommée et rgb pour mon diagramme de gantt
Visualisation du résultat avec les couleurs définies.
Sinon elles sont générées automatiquement par le composant et choisies au hasard parmi une liste de couleur équivalente au nombre d’éléments affichés comme ci-dessous :
