Générateur de rapport : Différence entre versions
(→Intégration d'un graphique Chart.js) |
|||
Ligne 69 : | Ligne 69 : | ||
{| class="wikitable" style='width: 100%; | {| class="wikitable" style='width: 100%; | ||
| | | | ||
− | + | DATA_CHARTS.myGraph = { | |
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'], | labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'], | ||
datasets: [ | datasets: [ | ||
Ligne 78 : | Ligne 78 : | ||
} | } | ||
] | ] | ||
− | }; | + | }; |
|} | |} | ||
Version du 9 décembre 2021 à 16:55
Sommaire
Permissions requises
Section à compléter.
Créer ou éditer un rapport
À partir du menu principal d'ISIOS, allez à la section "Configuration of reports and dashbords". Cliquez sur "nouveau" pour créer un rapport ou cliquez sur le titre d'un des rapport existant pour le modifier.
Générer / visualiser un rapport existant
À partir du menu principal, cliquez sur "Générateur de rapport". Vous pouvez ensuite sélectionner le rapport désiré à l'aide du menu déroulant situé dans l'encadré "Filtres".
Création / édition d'un rapport
Importation des données à partir d'une liste
Les données d'un rapport sont importées à l'aide du système de listes d'Isios.
- Dans la section "Source de données", cliquez sur "Ajouter"
- Sélectionnez la source des données à l'aide du menu déroulant.
- Sélectionner le filtre a appliquer sur la source de données en cliquant sur "Select filters with list...". Sélectionnez le ou les filtres désirez, puis faites "Ok". Répondez oui à la fenêtre "Are you sure you select these filters" et "Would you like to update the headers for this dataset as well?".
- Dans la colonne "Index into data", inscrivez le nom que vous voulez attribuer à votre jeu de données.
- Dans la colonne "Item map as JSON", inscrivez la liste des champs que vous souhaitez utiliser dans votre rapport.
Sources de données relationelles
Il est possible des jeux de données relationnels à plusieurs niveaux en suivant les étapes suivantes:
- Ajoutez d'abord un jeu de données parent en suivant les étapes mentionnées plus haut.
- Ajoutez le jeu de donnée enfant en suivant les étape 1 et 2.
- Sélectionnez le jeu de donnée parent à l'aide du menu déroulant de la colonne "Parent".
- Dans la colonne "Index into parent", inscrivez le nom de votre choix pour le jeu de données enfant. Un attribut de ce nom sera attribué à chaque élément du jeu de données parent.
- Dans la colonne "Key of parent", inscrivez le nom de la clé étrangère (foreign key) qui relie les données parent aux données enfant. Par exemple, la clé étrangère qui relie une tâche à une ressource est id_rh.
Traitement des données
Une fois le ou les jeux de données créés, il possible de les traiter en JavaScript (JS). La version de JS présentement utilisée pour le générateur de rapports est ECMAScript 5. La librarie jQuery est également disponible.
Les jeux de données sont accessibles en tant qu'attributs de l'objet this.data. Par exemple, un jeu de données nommé "projects" sera reféré par this.data.projects. Les jeux de données sont des objets JavaScript standards.
Il est possible de manipuler les données des rapport en insérant du JS dans la fenêtre "Traitement des données". À tout moment, vous pouvez visualiser le contenu des variables en utilisant console.log(variable). Par exemple, vous pouvez visualiser un jeu de données en insérant le snippet suivant dans le champs "Traitement des données":
console.log(JSON.stringify(this.data.my_dataset))
Il est possible de visualiser le résultat en générant le rapport.
Insertion de html dans les rapports
Le html est inséré dans les rapports à l'aide de jQuery. L'exemple suivant insère un tableau dans le rapport:
var myTable = jQuery("
").addClass('dataTable').appendTo(this); Un thead pourra être inséré dans le tableau de la manière suivante: var myThead = jQuery("<thead>").appendTo(myTable);Ajout de CSS
Du CSS peut être ajouté au rapport à l'aide du champ "CSS".
Intégration d'un graphique Chart.js
Pour intégrer un graphique Chart.js, veuillez suivre les étapes suivantes:
1. Attacher l'objet de données du graphique à DATA_CHARTS. L'exemple suivant est un objet de données pour un graphique à pointe de tarte:
DATA_CHARTS.myGraph = { labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'], datasets: [ { label: 'Dataset 1', data: [30,21,100,85,203], backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue'] } ] }; |
2. Dans la fenêtre "Configuration de l'affichage", insérer un élément de type "canvas" qui servira de "placeholder" au graphique:
jQuery('<canvas>').attr('id', 'myGraph').appendTo(this);
3. Dans la section "Charts", cliquez sur "ajouter", et sélectionnez le type de graphique désiré.
4. Inscrire le nom de l'objet de données du graphique dans la colonne "Index from data" (myGraph dans notre exemple).
5. Dans le champ "Configuration as JSON", insérer une configuration de graphique en format JSON. Voici un exemple de configuration pour un graphique à pointe de tarte:
{ {
"type": "pie", "options": { "responsive": true, "plugins": { "legend": { "position": "top" }, "title": { "display": true, "text": "Graphique à pointe de tarte" } } }
} }
Note: l'attribut "data" sera inséré automatiquement dans l'objet de configuration par le générateur de rapport.