Dans cette page :
La vue Tableau de bord est construite à partir d’une imbrication de widgets dans la page. Ils présentent des graphiques de données dont la source peut être :
Pour se connecter à des données provenant d’un web service, il est nécessaire que ce dernier renvoie une réponse payload au format JSON dont les paramètres seront variables selon le type de widget à alimenter.
Il est important de noter que seuls certains widgets permettent d’exposer des données externes, pour l’instant, tels que :
Le widget Nombre permet d’afficher un score avec sa variation et potentiellement un graphique de valeur par date.
Si plusieurs widgets nombre doivent être présentés dans la vue, la réponse payload pourra contenir l’ensemble des informations par type de widget souhaité. Dans ce cas, lors de la configuration de chaque widget, le paramétrage sera fait de telle sorte qu’il appelle les bonnes informations dans la réponse payload renvoyée.
L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :
| Information affichée | Attribut | Paramètres de l’attribut | Obligatoire | Exemple |
|---|---|---|---|---|
| Titre du widget | title | "title":"Score de sécurité", | ||
| Date de début du graphique (date et heure) | startDate | "startDate":"2024-12-20T00:00:00Z" | ||
| Date de fin du graphique (date et heure) | endDate | "endDate":"2025-03-30T00:00:00Z” | ||
| Bouton d’aide permettant d’accéder à une doc en ligne | help | text : Libellé de l’aide en info bulle | ||
| URL : URL d’accès à l’aide en ligne | "help":{"text":"Aide ici", | |||
| "URL":"https://madocURL"}, | ||||
| Sous-titre du widget | subtitle | "subtitle":"Incidents cette semaine", | ||
| URL pointée au clic sur le widget | onClickURL | "onClickURL":"http://example.com", | ||
| Alignement des informations dans le widget | align (par défaut left) | "align":"left" | ||
| Valeur du nombre | value | x et différente de 0 | "value":”59” | |
| Unité du nombre | unit | "unit":"%", | ||
| URL de l’image | imageUrl | |||
| Pastille de la valeur de variation avec couleur de fond | variation | text : Valeur de la pastille de variation | ||
| color : Couleur de fond de la pastille au format hexa | "variation":{"text":"-21 %", "color":"#06C350"}, | |||
| Données du graphique | valueHistory | dataset : Listes de valeurs d’historique |
exemple 2 : "valueHistory":{ "dataset":[ {"value": 50, "date": "2024-07-24T00:00:00Z"}, {"value: 60, "date": "2024-07-23T00:00:00Z"}, {"value: 30, "date": "2024-07-22T00:00:00Z"}, ], "sparklineType":"line"} |
{
"title":"Score de sécurité",
"startDate":"2024-12-20T00:00:00Z",
"endDate":"2025-03-30T00:00:00Z",
"help":{"text":"Aide ici",
"URL":"[<https://madocURL>](<https://madocurl/>)"},
"onClickURL":"http….",
"align": "left",
"value":"59",
"unit": "%",
"variation":{"text":"-21 %", "color":"#06C350"},
"valueHistory":{"dataset":[58, 25, 26, 87,25,120,25], "sparklineType":"line", "color": "#25542F"}
}
AUTRE EXEMPLE
{
"title":"Utilisateurs à risque",
"help": {"text":"Aide ici", "URL":"[<https://madocURL>](<https://madocurl/>) "},
"subtitle":"Incidents cette semaine",
"onClickURL": "http….",
"value":"17",
"variation":{"text":"-38 %", "color":"green"},
"valueHistory":{"dataset": [
{"value": 50, "date":"2024-07-24T00:00:00Z"},
{"value": 60, "date": "2024-07-23T00:00:00Z"},
{"value": 30, "date": "2024-07-22T00:00:00Z"},
], "sparklineType":"line"}
}
Le widget Courbes, comme son nom l’indique, permet d’afficher des données sous la forme de plusieurs courbes.
L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :
| Information affichée | Attribut | Paramètres de l’attribut | Obligatoire | Exemple |
|---|---|---|---|---|
| Titre du widget | title | "title": "Évolution des scores", | ||
| Bouton d’aide permettant d’accéder à une doc en ligne | help | text : Libellé de l’aide en info bulle | ||
| URL : URL d’accès à l’aide en ligne | "help": { "text": "Aide ici", "URL": "https://example.com" }, | |||
| Sous-titre du widget | subtitle | “subtitle”: “Incidents cette semaine", | ||
| Type des abscisse et ordonné du graphique | scale | par défaut {min : 0 , max : 100} | “scale”:{”min”:10, “max”:90} | |
| Visibilité des points sur la courbe | hidePoints | False par défaut | “hidePoints”: true | |
| URL pointé au clic sur le widget | onClickURL | "onClickURL": http://example.com, | ||
| Unité des valeurs du graphique | unit | “unit”: "%", | ||
| valueHeigtor | "valueHeigtor": "3", | |||
| Données des courbes | dataset | name : ****Libellé de la courbe dans la légende | ||
| hidden : Visibilité de la courbe, par défaut à False | ||||
| courbeLisse : Valeur permettant de lisser les angles de la courbe. La valeur doit être entre 0 a 1, avec par défaut 0.4 | ||||
| lineColor où la valeur de couleur attendue doit être de type hexa : Couleur de la courbe | ||||
| lineWidth : Epaisseur de la courbe | ||||
| values : Listes de valeurs de la courbe |
{
"title": "Évolution des scores",
"help": { "text": "Aide ici", "URL": "[<https://example.com>](<https://example.com/>)" },
"subtitle": "sous titre",
"scale": {min : number , max: number } // par défaut { min : 0 , max : 100 }
"hidePoints": "true" // default true
"onclickURL": "[<http://example.com>](<http://example.com/>)",
"unit": "%",
"valueHeigtor": "3",
"dataset": [
{"name": "Dataset 1", "hidden":"true", "courbeLisse" : "5"
"lineColor": "#06C350",
"lineWidth": "2",
"values": [
{ "value": 50, "date": "2024-07-24T00:00:00Z" },
{ "value": 60, "date": "2024-07-23T00:00:00Z" },
{ "value": 30, "date": "2024-07-22T00:00:00Z" }]},
{"name": "Dataset 2","lineColor": "#06C350","lineWidth": "1",
"values": [
{ "value": 40, "date": "2024-07-24T00:00:00Z" },
{ "value": 70, "date": "2024-07-23T00:00:00Z" },
{ "value": 20, "date": "2024-07-22T00:00:00Z" }]}],
"charttype": "line"
}
Le widget Graphique à barres permet d’afficher la progression de différents indicateurs sous la forme de barre horizontale.
L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :
| Information affichée | Attribut | Paramètres de l’attribut | Obligatoire | Exemple |
|---|---|---|---|---|
| Titre du widget | title | "title":"Évolution des scores", | ||
| Bouton d’aide permettant d’accéder à une doc en ligne | help | text : Libellé de l’aide en info bulle | ||
| URL : URL d’accès à l’aide en ligne | "help":{"text":"Aide ici", "URL":"https://example.com"}, | |||
| Sous-titre du widget | subtitle | "subtitle":"sous titre", | ||
| Echelle min et max de l’axe des abscisses du graphique | scale | min : Echelle min | ||
| max : Echelle max | ||||
| (par défaut min : 0 , max : 100) | "scale":{"min":0, "max":50} | |||
| Graphique avec dégradé sur les barres | isGradient | Par défaut à False | "isGradient":true | |
| Affichage de l’axe horizontal | hideScale | Pré défaut à False | “hideScale”:true | |
| URL pointée au clic sur le widget | onClickURL | "onClickURL":"http://example.com", | ||
| Données des barres de progression | valueHistory | dataset : Listes de valeurs d’historique |
isGradient** doit être true pour activer le gradientColor | "valueHistory":{"dataset":[ {"progress":50,"value":35,"barTitle":"Data","barColor":"#F9670D","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"}, {"progress":50, "value":122, "barTitle":"Identity", "barColor":"#06C350","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"}, {"progress":50, "value":122, "barTitle":"Endpoint", "barColor":"#06C350","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"} ]} | | Type de graphique | chartType | peut avoir plusieurs valeurs telles que line, progressBar, donuts, radar, verticalBar, … mais celle à utiliser pour ce graphique est évidemment “progressBar” | x | "charttype":"progressBar" |
{
"title":"Progression",
"help":{"text":"En savoir plus", "URL":"[<https://madocURL>](<https://madocurl/>)"},
"subtitle":"sous titre",
"scale":{"min":0, "max":50},
"isGradient":"true",
"hideScale":"true",
"onClickURL":"[<http://example.com>](<http://example.com/>)",
"valueHistory":{"dataset":[
{"progress":50,"value":35,"barTitle":"Data","barColor":"#F9670D","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"},
{"progress":50,"value":122,"barTitle":"Identity","barColor":"#06C350","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"},
{"progress":50,"value":122,"barTitle":"Endpoint","barColor":"#06C350","textColor":"white","textPosition":"left","gradientColor":"#FFFFFF"}
]},
"chartType":"progressBar"
}
Le widget Graphique en anneau, comme son nom l’indique, permet de représenter les données sous forme de segments circulaires disposés autour d'un centre vide, formant ainsi un anneau (ou donut).
L’alimentation de ce type de widget nécessite les informations suivantes dans la réponse Payload renvoyée :
| --- | --- | --- | --- | --- |