Passer au contenu principal
Créer un composant d'un tableau de bord
Mis à jour il y a plus de 2 semaines

Pré-requis

Accéder à IndaBoard depuis le portail io-base.

Accéder à la page de visualisation d'un tableau de bord.

Les composants

Un tableau de bord est un ensemble de composants, disposés sur une grille.

Plusieurs types de composants sont disponibles :

  • graphique

  • graphique empilé

  • diagramme circulaire

  • graphique X/Y

  • compteur

  • tableau

  • métrique

  • texte

  • intégrale

Pour ajouter un composant, cliquer sur l'icône en haut à droite.

La liste des composants disponibles s'affiche. Choisissez le composant que vous voulez créer.

Création d'un composant Graphique

Propriétés

Pour créer un composant graphique, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • la période des données concernée

Remarque : la case Verrouiller permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Courbes

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Rechercher une métrique.

La fenêtre habituelle de recherche d'une métrique de io-base s'ouvre.

Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par méta-données, soit par nom de métrique. Lorsque vous avez trouvé les bonnes métriques, cliquer sur le bouton permettant de les ajouter. Les métriques apparaissent dans le tableau de droite.

Vous pouvez supprimer les métriques du tableau de droite en vous servant de l'icône de suppression.

Remarque : pour un composant graphique, il est possible d'ajouter plusieurs métriques.

Pour valider la sélection, cliquer sur "Sélectionner".

Une prévisualisation du graphique s'affiche sur la droite.

Vous pouvez paramétrer un certain nombre de détails sur les courbes :

  • le nom de la courbe (qui changera dans la légende) :

    Pour ce faire, dans la colonne Actions, cliquer sur le bouton encadré ci-dessous :

    La section "Options" devient visible, et contient le champ "Nom d'affichage". Vous pouvez alors saisir le nom que vous souhaitez :

  • le type d’agrégation utilisé :

  • la couleur utilisée :

  • le type de graphique (histogramme, courbe ou nuage de point) :

Vous pouvez aussi indiquer si vous souhaitez que les courbes apparaissent en escalier (droites de valeur en valeur) ou interpolées.

Chaque courbe peut être dupliquée. Pour ce faire, dans la colonne Actions, cliquer sur le bouton encadré ci-dessous :

  • afficher ou masquer la légende : un bouton est mis à votre disposition pour vous permettre de choisir d'afficher ou non la légende dans vos graphiques :

Échelles

À partir du tableau Échelles, vous pouvez saisir des valeurs minimales et maximales de visibilité de votre graphique, ainsi que le pas à appliquer pour les graduations. A chaque modification, le graphique se met à jour sur le côté droit pour visualiser les changements.

Seuils

Enfin, il est possible de définir un ou plusieurs seuils. (horizontal ou vertical, avec légende, couleur, et si il doit apparaître en trait continu ou en pointillé).

Pour ce faire, cliquer sur le bouton "Nouveau seuil" :

Des champs de configuration apparaissent pour vous permettre de définir le nouveau seuil.

Commencer par sélectionner l'axe pour lequel vous souhaitez créer un seuil.

Nommer votre seuil :

Puis, indiquer la position où vous souhaitez voir apparaître le libellé du seuil sur votre graphique :

  • au début :

  • au milieu :

  • à la fin :

Vous pouvez ensuite paramétrer la définition de votre seuil en cliquant sur le bouton représentant le seuil :

Indiquer :

  • ligne continue ou pointillée :

  • position du seuil : à l'horizontal ou à la verticale

  • valeur du seuil : valeur où sera tracée la droite du seuil

    Exemple ci-dessous avec la valeur "60" :

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer en haut à droite de l'écran, pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant Compteur

Propriétés

Pour créer un composant compteur, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • une valeur minimale (valeur de départ du compteur) et une valeur maximale (valeur de fin du compteur)

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

  • le nombre de décimales à afficher sur la valeur du compteur

Métrique

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Rechercher une métrique.

La fenêtre habituelle de recherche d'une métrique dans io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

La métrique apparaît dans le tableau de droite.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Remarque : pour un composant compteur, il n'est possible d'ajouter qu'une seule métrique.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du compteur s'affiche sur la droite.

Vous pouvez paramétrer un certain nombre de détails sur le compteur :

  • le type d’agrégation utilisé

  • la couleur utilisée

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant Tableau

Propriétés

Pour créer un composant tableau, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • le nombre de décimales des valeurs affichées

  • le nombre d'éléments qui apparaîtront par page dans le tableau (nombre de lignes du tableau)

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

Métriques

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Rechercher une métrique.

La fenêtre habituelle de recherche d'une métrique dans io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

Les métriques apparaissent dans le tableau de droite.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Remarque : pour un composant tableau, il est possible d'ajouter plusieurs métriques.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du tableau s'affiche sur la droite.

Vous pouvez paramétrer un certain nombre de détails sur le tableau :

  • le nom de la métrique (qui changera dans la première colonne du tableau)

  • le type d’agrégation utilisé

Chaque ligne peut être dupliquée.

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant Métrique

Propriétés

Pour créer un composant métrique, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • le nombre de décimales des valeurs affichées

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

Métrique

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Rechercher une métrique.

La fenêtre habituelle de recherche d'une métrique dans Io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

La métrique apparaît dans le tableau de droite.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Remarque : pour un composant métrique, il est possible d'ajouter une seule métrique.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du tableau s'affiche sur la droite.

Vous pouvez paramétrer un certain nombre de détails sur le tableau :

  • le type d’agrégation utilisé

  • la couleur utilisée

Il vous est également possible de remplacer la métrique sélectionnée, en utilisant le bouton "Remplacer", dans la colonne Actions :

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant graphique empilé

Configuration

Pour créer un composant graphique empilé, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

  • le type de graphique empilé : barres empilées ou aires empilées

  • l'agrégation à appliquer aux graphiques et la durée de référence :

    Par exemple, si on souhaite avoir la moyenne des valeurs toutes les heures, on sélectionne l'agrégation "AVG" et on indique 1h en durée :

Métrique

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Ajouter une métrique.

La fenêtre habituelle de recherche d'une métrique dans Io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

La métrique apparaît dans le tableau de droite.

Remarque : pour un composant graphique empilé, il est possible d'ajouter plusieurs métriques.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du tableau s'affiche sur la droite.

Vous pouvez paramétrer la couleur utilisée pour l'affichage des graphes :

Chaque courbe peut être dupliquée. Pour ce faire, dans la colonne Actions, cliquer sur le bouton encadré ci-dessous :

Vous pouvez également saisir des valeurs minimales et maximales de visibilité de votre graphique, ainsi que le pas à appliquer pour les graduations. À chaque modification, le graphique se met à jour sur le côté droit pour visualiser les changements.

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant diagramme circulaire

Configuration

Pour créer un composant diagramme circulaire, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

  • l'agrégation à appliquer aux valeurs :

    Par exemple, si on souhaite avoir la moyenne des valeurs d'une métrique, on sélectionne l'agrégation "AVG" :

Métrique

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Ajouter une métrique.

La fenêtre habituelle de recherche d'une métrique dans Io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

La métrique apparaît dans le tableau de droite.

Remarque : pour un composant diagramme circulaire, il est possible d'ajouter plusieurs métriques.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du tableau s'affiche sur la droite.

Vous pouvez paramétrer la couleur utilisée pour l'affichage des diagrammes circulaires :

Chaque métrique peut être dupliquée. Pour ce faire, dans la colonne Actions, cliquer sur le bouton encadré ci-dessous :

Une fois la totalité des paramétrages terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant graphique X/Y

Configuration

Pour créer un composant graphique X/Y, vous devez commencer par saisir les informations générales du composant :

  • un titre

  • une description (facultatif)

  • la période des données concernée

Le bouton "Verrouiller" permet de forcer l'application de la période sélectionnée pour ce composant, dans le cas où une période est choisie pour l'ensemble du tableau de bord.

Dès lors que vous cliquez sur "Verrouiller", les champs de sélection de la période deviennent actifs pour vous permettre de sélectionner la période à appliquer à votre composant.

Remarque : Si un composant n'est pas verrouillé, il prendra la période sélectionnée pour l'ensemble du tableau de bord.

  • filtre des données :

    • nuage de points

    • dernière valeur

  • l'agrégation à appliquer aux graphiques et la durée de référence :

    Par exemple, si on souhaite avoir la moyenne des valeurs toutes les heures, on sélectionne l'agrégation "AVG" et on indique 1h en durée :

Métrique

Une fois les informations générales saisies, vous pouvez sélectionner les métriques à utiliser, en cliquant sur le bouton Ajouter une métrique.

La fenêtre habituelle de recherche d'une métrique dans Io-base s'ouvre. Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par métadonnées, soit par nom de métrique. Lorsque vous avez trouvé la bonne métrique, cliquer sur le bouton "+".

La métrique apparaît dans le tableau de droite.

Vous pouvez supprimer la métrique du tableau de droite en vous servant des icônes de suppression.

Remarque : Vous devez sélectionner 2 métriques pour le composant graphique XY.

Pour valider la sélection, cliquer sur Enregistrer.

Une prévisualisation du graphique s'affiche sur la droite.

Il vous est possible de paramétrer plusieurs éléments dans le graphique :

  • la taille des points affichés :

Par exemple si on a 5, on a des points :

Et si on saisit 10, les points deviennent davantage volumineux :

Ensuite, pour chacune des métriques, vous pouvez également saisir des valeurs minimales et maximales de visibilité de votre graphique, ainsi que le pas à appliquer pour les graduations. À chaque modification, le graphique se met à jour sur le côté droit pour visualiser les changements.

Il vous est possible d'inverser les métriques en ordonnées / abscisses dans le graphique, pour ce faire cliquer sur le bouton encadré ci-dessous :

Abaques

Cette fonctionnalité vous permet de représenter sur votre graphique des équations mathématiques liées à des processus spécifiques. En utilisant une variable correspondant aux valeurs de l'axe des abscisses, vous pouvez modéliser des relations mathématiques et visualiser clairement les tendances propres à vos processus.

Pour ajouter un abaque, cliquer sur "Nouvel abaque".

Différents champs de configuration apparaissent.

Commencez par renseigner l'équation de la droite que vous souhaitez afficher dans le graphique.

Pour construire votre équation, vous devez utiliser une variable

Syntaxe : pour indiquer la variable dans votre équation, représentant la valeur des abscisses, saisir "x".

On a donc par exemple l'équation 2*x.

Renseignez un label à votre variable :

Ensuite, cliquer sur l'icône représentant votre droite, pour la paramétrer :

Vous pouvez alors configurer :

  • le style de courbe : continue ou en pointillée

  • la valeur min et max que doit prendre votre variable x (valeur des abscisses)

    Par exemple, si vous saisissez min = 0 et max = 10, la courbe de 2*x sera tracée pour l'intervalle de x [0;10]

  • la taille de la courbe : permet de définir l'épaisseur de la droite sur le graphique

  • la couleur de la courbe :

  • le style de l'aire : vous pouvez choisir d'afficher ou non l'aire sous la courbe, vers le haut ou vers le bas

Une fois ces paramètres renseignés, la courbe de l'équation s'affiche :

Une fois la totalité du paramétrage terminée, vous pouvez cliquer sur Enregistrer pour sauvegarder et faire apparaître votre composant dans le tableau de bord.

Création d'un composant texte

Il vous est également possible de créer un composant "texte".

Ce composant vous permet d'enrichir vos tableaux de bord avec un texte et/ou des liens.

Structurer votre texte

Appliquer un style de titre

Vous pouvez appliquer trois styles différents à votre texte :

  • Heading 1 : titre

  • Heading 2 : sous-titre

  • Normal

Dans la barre d'outils, sélectionner le style souhaité :

Le texte sélectionné sera ainsi mis en forme en fonction du style choisi :

Créer des listes

Vous avez la possibilité de créer des listes numérotées ou à points, en utilisant les boutons encadrés ci-dessous :

Liste numérotée :

Liste à points :

Mise en forme du texte

D'autres fonctionnalités sont disponibles pour mettre en forme votre texte.

Vous pouvez ainsi :

  • mettre le texte en gras :

  • mettre le texte en italique :

  • souligner le texte :

  • barrer le texte :

  • modifier la couleur du texte :

Ajouter un lien hypertexte

Il vous est possible d'ajouter un lien dans votre texte.

Sélectionner la partie du texte dans laquelle vous voulez ajouter un lien.

Dans la barre d'édition, cliquer sur le bouton encadré ci-dessous :

Dans la zone de saisie qui apparaît, renseigner le lien vers la page souhaitée, puis cliquer sur "Save" :

Votre lien est créé :

À droite de l'écran, vous pouvez visualiser le rendu de votre composant.

Une fois que le rendu correspond à vos attentes, cliquez sur Enregistrer, en haut à droite de votre écran.

Votre composant est créé et apparaît dans le tableau de bord.

Supprimer la mise en forme appliquée

Il vous est possible de supprimer les modifications apportées à la mise en forme de votre texte, en cliquant sur le bouton encadré ci-dessous :

La mise en forme établie disparaît et laisse place à la mise en forme par défaut :

Création d'un composant intégrale

Le composant "intégrale" vous permet de calculer et de visualiser le cumul des valeurs d’une métrique, comme une consommation ou un débit, sur une période donnée.

Pour illustrer son fonctionnement, prenons l’exemple d’une consommation électrique mesurée en temps réel. Nous souhaitons calculer la consommation électrique quotidienne, puis la convertir en euros pour déterminer son côut.

Informations générales

Commencez par renseigner les informations générales nécessaires pour configurer le composant :

  • Titre : Donnez un titre à votre composant

  • Description (facultatif) : Ajoutez des détails pour préciser le contexte du composant.

  • Période des données : Définissez la période sur laquelle le cumul sera calculé.

Remarque : La case Verrouiller permet d’appliquer la période sélectionnée uniquement à ce composant, même si une période différente est définie pour l’ensemble du tableau de bord.

Choix du mode de représentation

Déterminez comment le cumul sera affiché :

  • Une valeur simple représentant le cumul sur la période sélectionnée.

  • Un histogramme permettant de visualiser l’évolution du cumul sur la période sélectionnée.

Pour ce faire, placez le curseur ci-dessous vers le paramètre valeur ou histogramme :

Choix de la métrique

Vous pouvez maintenant sélectionner la métrique à utiliser, en cliquant sur le bouton Rechercher une métrique.

La fenêtre habituelle de recherche d'une métrique de io-base s'ouvre.

Plusieurs onglets permettent une recherche soit à partir de l'arborescence, soit par méta-données, soit par nom de métrique. Une fois la métrique souhaitée trouvée, cliquez sur le bouton permettant de les ajouter. Les métriques apparaissent dans le tableau de droite.

Vous pouvez supprimer les métriques du tableau de droite en vous servant de l'icône de suppression.

Remarque : Pour un composant intégrale, il n’est possible d’ajouter qu’une seule métrique.

Pour valider la sélection, cliquer sur "Sélectionner".

Une prévisualisation du graphique s'affiche sur la droite.

Pour valider la sélection, cliquer sur "Sélectionner".

Une prévisualisation du composant s'affiche sur la droite.

Unité de temps pour l'intégration

Vous devez ensuite renseigner l'unité de temps pour l'intégration.

Ce paramètre définit l’intervalle sur lequel les données seront agrégées ou intégrées pour produire une mesure cumulée. Cette unité est essentielle car elle détermine comment les données brutes sont regroupées et utilisées pour calculer des volumes ou totaux sur une période donnée.

Par exemple, si vous saisissez “1h”, l’intégration calcule le cumul des mesures instantanées sur des tranches horaires. Cela signifie que chaque valeur de cumul est basée sur les données collectées pendant une heure.

Ajouter un Coefficient

Un coefficient peut être appliqué au résultat pour obtenir un cumul ajusté selon vos besoins.

  • Avec notre exemple : Si l'on souhaite convertir la consommation en euros, on peut appliquer un coefficient correspondant au prix unitaire d’un kWh d’électricité (ex. : 0,15 €/kWh).

Vous pouvez spécifier le coefficient de deux manières :

  • Une valeur fixe : Par exemple, un prix constant de 0,15 €/kWh.

  • Une métrique : Une métrique de conversion peut être utilisée si le prix varie dans le temps.

    Remarque : la valeur multiplicatrice retenue sera la moyenne des valeurs renvoyées par la métrique dans la période.

Modifier l'unité

Vous pouvez modifier l'unité affichée sur le graphique.

Dans notre exemple, on veut exprimer les données en euros.

Pour ce faire, il suffit d'aller au champ "unité" et saisir l'unité de notre choix :

Une fois l'ensemble des champs configurés, cliquez sur "Enregistrer" :

Votre composant apparaît dans le tableau de bord :

Modifiez la période sélectionnée pour mettre à jour votre composant :

Remarque : Voici à quoi ressemble l'affichage sous forme d'histogramme :

Avez-vous trouvé la réponse à votre question ?