Paramétrage d'un rapport

Créé par Pierre-Yves HEMERY, Modifié le Mer, 20 Mai à 12:35 H par Pierre-Yves HEMERY

Introduction

Les rapports dans atimeüs sont entièrement paramétrés.

Les rapports par défaut ne sont pas modifiables, mais vous pouvez les dupliquer pour ensuite les modifier.

On commence par définir la mise en page générale du rapport, puis on ajoute des blocs d'affichage pour chaque indicateur souhaité.

La liste des indicateurs disponibles n'est pas paramétrable, il faut passer par le support pour en ajouter un nouveau. Pour la consulter, vous pouvez ouvrir le lien https://mon_instance.atimeus.app/admin/indicators .

La liste des rapports se configure dans le menu Configuration > Avancée > Rapports.

Vous pouvez notamment :

Gérer les catégories de rapports
Renommer les rapports
Ordonner les rapports
Gérer l'affichage d'un rapport : masquer, afficher pour tous, restreindre à un groupe d'utilisateurs

Mise en page

Un rapport est affiché comme une grille CSS :

columnConfig définit les colonnes et leurs largeurs (`grid-template-columns`)
rowConfig définit les lignes et leurs hauteurs (`grid-template-rows`)

Et chaque indicateur est positionné dans la grille avec columnStart | columnEnd | rowStart | rowEnd.

Comment lire les positions ?
Les valeurs Start et End représentent des lignes de grille CSS.

Avec columnStart = 1 et columnEnd = 2, l'indicateur occupe 1 colonne.

Avec columnStart = 1 et columnEnd = 4, l'indicateur occupe 3 colonnes.

Exemple :

columnConfig = "1fr 1fr 1fr"
rowConfig = "120px 250px 250px 250px"
Dans ce cas, on a une grille de 3 colonnes et 4 lignes :
- un KPI en rowStart=1, rowEnd=1, columnStart=1, columnEnd=2 est placé dans la cellule en haut à gauche
- un graphique en rowStart=2, rowEnd=2, columnStart=1, columnEnd=4 prend toute la largeur de la ligne 2
- ...

KPI (Indicateur clé)

Affiche une valeur synthétique (taux, montant, nombre...).

Propriété	Valeurs possibles	Description
type	number, percentage, currency, currencyFull	Type de valeur
title	Texte	Titre du bloc
text	Texte	Texte affiché après la valeur
align	right, left	Alignement

Graphique

Affiche une ou plusieurs séries de valeurs en graphique (barres, lignes, camembert...).

On commence par ajouter une indicateur Graphique à la grille CSS.

Propriété	Valeurs possibles	Description
title	Texte libre	Titre du graphique
showLegend	true, false	Affiche la légende
legendPosition	top, right, bottom, left	Position de la légende
legendAlign		Alignement de la légende
horizontal	true, false	Orientation horizontale (barres)
stacked	true, false	Empilement des indicateurs (barres)

Puis on lui ajoute des indicateurs.

Propriété	Valeurs possibles	Description
title	Texte libre	Titre de l'indicateur (si non présent)
type	bar, line, pie, doughnut	Type de données (barre, ligne, camembert, doughnut)
valueType	number, percentage, currency, currencyFull	Type de valeur
order	Nombre	Ordre
dataLabelEnabled	true, false	Afficher la valeur en label sur le graphique
dataLabelAlign	top, right, bottom, left	Alignement du label
dataLabelAnchor	center, start, end	Ancrage du label
showGrid	true, false	Afficher la grille
axisMin	Nombre	Valeur minimum de l'axe
axisMax	Nombre	Valeur maximum de l'axe
axisOpposite	true, false	Inverser l'axe

La représentation s'adapte au type de donnée : série ou non.

Tableau

Affiche un tableau de données.

Propriété	Valeurs possibles	Description
config	JSON	Configuration du tableau (cf. ci-dessous)
title	Texte	Titre
maxHeight	Nombre	Hauteur maximale

Le contenu du tableau est défini dans un tableau JSON avec une entrée par colonne :

Propriété	Valeurs possibles	Description
prop	Texte	Nom du champ dans les données
label	Texte	En-tête de colonne
valueType	number, currency, currencyFull, percentage, text	Type de valeur (optionnel, par défaut text)
summaryType	sum, avg, count	Type d'agrégat (optionnel)
sortable	true, false	Colonne triable (optionnel, par défaut false)
width	Nombre ou texte	Largeur de la colonne (optionnel, valeur de CSS : 100px, min-content, auto...)
internalLink	Texte	Lien interne
internalLinkParameters	Tableau de textes	Nom des champs pour mapper les paramètres du lien interne
currencyField	Texte	Nom du champ contenant le code devise
ranges	[{ min, max, color }]	Mise en couleur conditionnelle
customEditorOptions	Objet	Options avancées pour l'édition

Exemple :

[
{
    "prop":"Project",
    "label":"Projet",
    "sortable":true,
    "internalLink":"/admin/projects/{0}",
    "internalLinkParameters":["ProjectId"]
},
{
    "prop":"Division",
    "label":"Division",
    "sortable":true,
    "width":"100"
},
{
    "prop":"InvoiceTotal",
    "label":"Fact. Total",
    "sortable":true,
    "valueType":"currencyFull",
    "width":"min-content",
    "summaryType":"sum"
}
]

// affiche la valeur en color (vert) si elle est entre min et max
"ranges":[{"min": -0.01,"max": 0.01, "color": "#0f0"}]} ]

// affiche la valeur en color (rouge) si elle est négative
"ranges": [{"max": 0, "color": "#f00"}]

// affiche la valeur en rouge/vert selon la valeur du champ Target, en dessous/au dessus
"customEditorOptions": {"type": "p-threshold", "target": "Target"}

// affiche la valeur en rouge/orange/vert si elle est en dessous de target1, entre target1 et target2, au dessus de target2
"customEditorOptions": {"type": "p-threshold-2", "target1": "0.9", "target2": "1"}

Tableau avec séries

Affiche un tableau avec plusieurs séries de données (par mois, par catégorie).

On commence par ajouter un indicateur Tableau avec séries à la grille CSS.

Propriété	Valeurs possibles	Description
title	Texte	Titre
nameColumnWidth	Nombre ou texte	Largeur de la colonne entête

Puis on lui ajoute un indicateur de type série.