Générateur de rapport : Différence entre versions

De Documentation ISIOS
Aller à : navigation, rechercher
(Intégration d'un graphique Chart.js)
(Créer ou éditer un rapport)
 
(14 révisions intermédiaires par le même utilisateur non affichées)
Ligne 4 : Ligne 4 :
  
 
== Accès à l'outil et navigation ==
 
== Accès à l'outil et navigation ==
 +
  
 
=== Permissions requises ===
 
=== Permissions requises ===
 +
  
 
Section à compléter.
 
Section à compléter.
 +
  
 
=== Créer ou éditer un rapport ===
 
=== 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.  
+
 
 +
À partir du tableau de bord, 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 ===
 
=== 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".
 
À 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 ==
 
== Création / édition d'un rapport ==
 +
 +
 
=== Importation des données à partir d'une liste ===
 
=== 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.  
 
Les données d'un rapport sont importées à l'aide du système de listes d'Isios.  
  
Ligne 27 : Ligne 37 :
 
#Dans la colonne "Item map as JSON", inscrivez la liste des champs que vous souhaitez utiliser dans votre rapport.
 
#Dans la colonne "Item map as JSON", inscrivez la liste des champs que vous souhaitez utiliser dans votre rapport.
  
=== Sources de données ralationelles ===
+
 
 +
=== Sources de données relationnelles ===
 +
 
 +
 
 
Il est possible des jeux de données relationnels à plusieurs niveaux en suivant les étapes suivantes:
 
Il est possible des jeux de données relationnels à plusieurs niveaux en suivant les étapes suivantes:
  
Ligne 35 : Ligne 48 :
 
#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 "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.
 
#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 ==
 
== 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.
+
 
 +
 
 +
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 librairie 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.
 
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":
 
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))
 
console.log(JSON.stringify(this.data.my_dataset))
 +
  
 
Il est possible de visualiser le résultat en générant le rapport.
 
Il est possible de visualiser le résultat en générant le rapport.
 +
  
 
== Insertion de html dans les rapports ==
 
== 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:
 
Le html est inséré dans les rapports à l'aide de jQuery. L'exemple suivant insère un tableau dans le rapport:
Ligne 56 : Ligne 78 :
  
 
var myThead = jQuery("<thead>").appendTo(myTable);
 
var myThead = jQuery("<thead>").appendTo(myTable);
 +
  
 
== Ajout de CSS ==
 
== Ajout de CSS ==
 +
  
 
Du CSS peut être ajouté au rapport à l'aide du champ "CSS".  
 
Du CSS peut être ajouté au rapport à l'aide du champ "CSS".  
Ligne 63 : Ligne 87 :
  
 
== Intégration d'un graphique Chart.js ==
 
== Intégration d'un graphique Chart.js ==
 +
  
 
Pour intégrer un graphique Chart.js, veuillez suivre les étapes suivantes:
 
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 graphique à pointe de tarte:
+
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:
  
 +
{| class="wikitable" style='width: 100%;
 +
|
 
DATA_CHARTS.myGraph = {
 
DATA_CHARTS.myGraph = {
 
   labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
 
   labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
Ligne 78 : Ligne 105 :
 
   ]
 
   ]
 
};
 
};
 +
|}
  
 
2. Dans la fenêtre "Configuration de l'affichage", insérer un élément de type "canvas" qui servira de "placeholder" au graphique:
 
2. Dans la fenêtre "Configuration de l'affichage", insérer un élément de type "canvas" qui servira de "placeholder" au graphique:
Ligne 83 : Ligne 111 :
 
jQuery('<canvas>').attr('id', 'myGraph').appendTo(this);
 
jQuery('<canvas>').attr('id', 'myGraph').appendTo(this);
  
3. Dans la section "Charts", cliquez sur "ajouter", et sélectionnez le type de graphique désiré.
+
3. Dans la section "Charts", cliquez sur "ajouter", et sélectionnez le type de graphique désiré.<br>
4. Inscrire le nom de l'objet de données du graphique dans la colonne "Index from data" (myGraph dans notre exemple).
+
4. Inscrire le nom de l'objet de données du graphique dans la colonne "Index from data" (myGraph dans notre exemple).<br>
 
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:
 
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:
  
 +
{| class="wikitable" style='width: 100%;
 +
|
 
{
 
{
 
     "type": "pie",
 
     "type": "pie",
Ligne 106 : Ligne 136 :
 
     }
 
     }
 
}
 
}
 +
|}
  
 
Note: l'attribut "data" sera inséré automatiquement dans l'objet de configuration par le générateur de rapport.
 
Note: l'attribut "data" sera inséré automatiquement dans l'objet de configuration par le générateur de rapport.

Version actuelle datée du 20 décembre 2021 à 09:45


Accès à l'outil et navigation

Permissions requises

Section à compléter.


Créer ou éditer un rapport

À partir du tableau de bord, 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.

  1. Dans la section "Source de données", cliquez sur "Ajouter"
  2. Sélectionnez la source des données à l'aide du menu déroulant.
  3. 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?".
  4. Dans la colonne "Index into data", inscrivez le nom que vous voulez attribuer à votre jeu de données.
  5. Dans la colonne "Item map as JSON", inscrivez la liste des champs que vous souhaitez utiliser dans votre rapport.


Sources de données relationnelles

Il est possible des jeux de données relationnels à plusieurs niveaux en suivant les étapes suivantes:

  1. Ajoutez d'abord un jeu de données parent en suivant les étapes mentionnées plus haut.
  2. Ajoutez le jeu de donnée enfant en suivant les étape 1 et 2.
  3. Sélectionnez le jeu de donnée parent à l'aide du menu déroulant de la colonne "Parent".
  4. 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.
  5. 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 librairie 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.