Tuiles

Last modified by Aurelie Bertrand on 2026/02/26 15:31

Le flux Tuiles 1758545391901-128.png permet de visualiser un indicateur clé de suivi, affichant sa valeur et, le cas échéant, son évolution (cas d'un format alerteur).

Configurer une tuile

Après sélection du modèle de données, à la mise à jour de l'aperçu, une fenêtre s'affiche afin de vous proposer différents styles de tuile :
Tile_styles_FR.png

  1. Sélectionnez un style disponible dans la catégorie de votre choix :
    • Zone simple : une tuile avec une seule zone pour un seul indicateur
    • Zone double : une tuile avec une zone icône et une zone indicateur
    • Zone triple : une tuile avec une zone icône et deux zones indicateur
  2. Glissez-déposez la ou les mesure(s) à utiliser sur l'axe Mesure.
    • Pour une zone simple ou double, ajoutez 1 mesure.
    • Pour une zone triple, ajoutez 2 mesures.
  3. Vous pouvez appliquer un format alerteur à une mesure pour visualiser une progression par exemple.

ℹ Les objectifs ne sont pas pris en charge.

La tuile est entièrement personnalisable dans les onglets Paramètres globaux et Paramètres des zones.

Vous pouvez changer de style de tuile via le bouton Bouton Styles. Les paramètres déjà définis seront conservés.

Tile_example_3zones_FR.png

Configurer les paramètres globaux

Vous pouvez définir ici les paramètres globaux de la tuile : bordure et marge.

ParamètreDescription
Bordure
Couleur

Sélectionnez :

  • le bouton 1760954318069-209.png pour utiliser la couleur définie dans le thème; dans le cas où la couleur de la bordure est défini dans le sélecteur comme suit :

    .tileChartBackgroundObject
    {
    stroke : #fff    /*Couleur de la bordure de la tuile*/
    }
  • le bouton 1760954294839-702.png pour définir la couleur de bordure de votre choix dans le sélecteur de couleur qui s'affiche à droite.
Épaisseur (px)Permet de spécifier l'épaisseur de la bordure en pixels (1 par défaut).
Rayon (px)Permet de spécifier le rayon de courbure de la bordure en pixels.
Marges
Marge horizontale/verticale du texte (%)

Permet de spécifier une marge minimale pour la zone de texte, définie en pourcentage des dimensions de la zone (largeur, hauteur).

Marge de l'icône (%)

Permet de spécifier l'espace entre l'icône et les limites de la zone, défini en pourcentage des dimensions de la zone (largeur, hauteur).
Valeur minimale : 0%; aucun espace entre l'icône et les limites de la zone.
Valeur maximale : 50%; espace maximal, l'icône est invisible.

Configurer les paramètres des zones

Les paramètres des zones permettent de définir des paramètres spécifiques pour chaque zone.
Sélectionnez la zone à configurer (l'affichage des zones correspond à l'affichage du graphique dans l'aperçu) puis définissez les paramètres comme souhaité.

Zone_parameters2_FR.png

Zone de texte (mesure)

ParamètreDescription
Fond

Une couleur de fond est définie par défaut pour la zone.

Vous pouvez sélectionner:

  • une autre couleur dans le sélecteur de couleur Couleur
  •  ou le bouton Thème pour appliquer la couleur définie dans le thème sélectionné ( variable: --dd-tilechart-zone-text).
Valeur de la mesure
PoliceSélectionnez la police d'affichage de la valeur de la mesure dans la liste déroulante.
Taille

La taille prend la valeur Auto par défaut : dans ce cas, la taille de la police est automatiquement ajustée pour éviter que la valeur de la mesure soit tronquée.
Si la taille minimale de la police est atteinte (8 pixels), la valeur de la mesure est abrégée et remplacée par des points de suspension.

Sélectionnez une autre valeur dans la liste déroulante pour appliquer la taille d'affichage de votre choix à la valeur de la mesure.

StyleDéfinissez les styles de la valeur affichée : couleur, position, etc.
Nom de la mesure
AfficherLe nom de la mesure est affiché, par défaut, dans la zone de texte.
Désactivez le bouton si vous ne souhaitez pas l'afficher.
Position

Le nom de la mesure est affiché, par défaut, en-dessous de la valeur de la mesure (position : Bas).
Sélectionnez la position de votre choix pour le nom de la mesure dans la liste déroulante : Haut, Bas, Gauche ou Droite.

Contenu automatiqueLe texte affiché dans la zone est, par défaut, le nom de la mesure.
Désactivez le bouton si vous souhaitez entrer le texte de votre choix.
PoliceSélectionnez la police d'affichage du nom de la mesure dans la liste déroulante.
Taille

La taille prend la valeur Auto par défaut : dans ce cas, la taille de la police est automatiquement ajustée pour éviter que le nom de la mesure soit tronqué.
Si la taille minimale de la police est atteinte (8 pixels), le nom de la mesure est abrégé et remplacé par des points de suspension.

Sélectionnez une autre valeur dans la liste déroulante pour appliquer la taille d'affichage de votre choix au nom de la mesure.

StyleDéfinissez les styles de la valeur affichée : couleur, position, etc.

Zone d'icône

ParamètreDescription
Fond

Une couleur de fond est définie par défaut pour la zone.

Vous pouvez sélectionner:

  • une autre couleur dans le sélecteur de couleur Couleur
  •  ou le bouton Thème pour appliquer la couleur définie dans le thème sélectionné ( variable: --dd-tilechart-zone-icon).
Icône

Une couleur de remplissage de l'icône est définie par défaut.

Vous pouvez sélectionner:

  • une autre couleur dans le sélecteur de couleur Couleur
  • ou le bouton Thème pour appliquer la couleur native de l'icône ou la couleur issue du thème dans le cas où le sélecteur css .tileChartIcon est défini.

Modifier le thème

Consultez la page Modifier le style / thème pour plus de détails sur la configuration du thème.

Configurer des interactions

Pour savoir comment configurer des interactions, consultez la page dédiée Configurer des interactions.

Modifier l'info-bulle

Pour savoir comment modifier l'info-bulle, consultez la page dédiée Modifier l'info-bulle.