> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/doughnut.md).

# Affichage beignet

Visualisez un relevé de capteur comme un anneau proportionnel avec l’affichage beignet dans le widget Dernières données — idéal pour les %.

<figure><img src="https://3675309505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtNQh1wBSHSaknslMdOXm%2Fuploads%2Fgit-blob-0e97f37f6f60ae86e1a713afe5d529176348e8f1%2Flast-data-doughnut.jpg?alt=media" alt="Last Data widget using the Doughnut display type"><figcaption></figcaption></figure>

L’affichage Doughnut représente la mesure sous forme d’anneau qui se remplit proportionnellement entre un minimum et un maximum que vous définissez, avec la valeur actuelle au centre. D’un coup d’œil, il répond à « où en est-on ? » — à un quart plein, presque au maximum — sans que personne ait besoin de lire le nombre.

Il convient à toute mesure qui se situe dans une plage connue : un niveau de remplissage, un pourcentage, une capacité, une valeur qui doit se trouver quelque part dans une bande de fonctionnement. Le remplissage de l’anneau rend sa position dans cette plage immédiate.

## Quand le choisir

* Une mesure avec une plage de fonctionnement définie où la proportion compte — capacité d’une cuve, charge de batterie, utilisation par rapport à une limite.
* Une tuile de tableau de bord où un opérateur doit repérer d’un coup d’œil bas / moyen / élevé, sans interpréter des chiffres.
* Partout où un pourcentage ou un ratio se lit plus clairement dans un anneau rempli que sous forme de chiffre.

Là où une mesure a un plancher et un plafond significatifs, le Doughnut la transforme en forme — laissez vos propres indicateurs suggérer où il se situe.

## Configurer un affichage Doughnut

Voici une configuration complète pour un cas réel — un anneau qui affiche la température d’un bureau et indique si elle est confortable. Un capteur de température renvoie la pièce en °C. Une température n’est pas comme une cuve — elle n’a pas de « vide » ni de « plein » naturel, donc il n’y a pas de 0 et de 100 évidents. L’anneau a quand même besoin d’un plancher et d’un plafond, donc vous choisissez une plage assez large pour contenir toutes les températures que la pièce pourrait atteindre de manière réaliste : pour une pièce d’habitation, environ de -5 °C à +40 °C. C’est un exemple : un Doughnut convient à toute mesure que vous voulez voir comme une proportion d’une plage — seuls l’appareil et les nombres changent.

1. Ouvrez le tableau de bord en mode édition et cliquez sur **Dernières données** dans le sélecteur de widgets. Le panneau des paramètres s’ouvre sur l’onglet **Source de données** onglet, sans encore aucune source de données.
2. Cliquez sur **Ajouter une source de données**. Un **Source de données 1** bloc apparaît.
3. Dans le bloc, cliquez sur **Choisir un appareil** et sélectionnez le capteur de température.
4. Cliquez sur **Ajouter une métrique**. Une ligne de métrique apparaît.
5. Dans la ligne, définissez **Type de données** sur **Télémétrie**, choisissez la mesure de température sous **Métrique de l’appareil**, puis choisissez une **Icône**.

   > **Cet affichage a besoin d’un nombre.** Le **Métrique de l’appareil** liste propose tous les types de métriques, mais une jauge se remplit sur une échelle — choisissez ici une mesure numérique ; une valeur textuelle non numérique est lue comme 0. (Pour afficher un texte ou une valeur marche/arrêt telle quelle, utilisez l’ [affichage de valeur](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/number.md).) Pour modifier la manière dont une métrique est stockée, ouvrez **Appareils → Métriques** — voir [Métriques](/kilo-docs-fr/kilo-iot-server/devices/metric-templates.md).
6. Cliquez sur **Conditions : N** pour ouvrir la fenêtre modale Conditions. Définissez une **Couleur par défaut** — la couleur à laquelle la mesure revient lorsque aucune de vos conditions ne correspond à la valeur actuelle — puis, pour chaque bande, cliquez sur **Ajouter une condition** et remplissez la ligne — saisissez un **Nom de la condition**, définissez **Type de données** sur **Nombre** (le type de données propre à la condition, et non la ligne de métrique), car une pièce d’habitation varie réalistement entre -5 °C et 40 °C, saisissez **De** -5 (la température la plus basse que vous attendriez) et **À** 40 (la plus élevée), et choisissez un **Couleur**. Vous pouvez ensuite saisir les niveaux de couleur. Par exemple :

   En partant de la température la plus froide :

   * "Trop froid" — **De** -5, **À** 15 — rouge
   * "Frais" — **De** 15, **À** 18 — jaune
   * "Confortable" — **De** 18, **À** 24 — vert
   * "Chaud" — **De** 24, **À** 28 — jaune
   * "Trop chaud" — **De** 28, **À** 40 — rouge

   Cliquez sur **Enregistrer** pour fermer la fenêtre modale.
7. Cliquez sur **Suivant** pour ouvrir l’onglet **Apparence** .
8. Saisissez un **Nom du widget** — par exemple « Température du bureau » — et une fenêtre facultative **Description**.
9. Sous **Type de widget**, choisissez **Doughnut**. Un **Plage de valeurs** section apparaît pour la métrique.
10. Définissez **Valeur min** sur **-5** et **Valeur max** sur **40** — la fenêtre que vous avez choisie pour une pièce d’habitation. L’anneau se remplit pour montrer où se situe la température actuelle dans cette plage de -5 à 40 °C, et la condition dans laquelle tombe la mesure la colore.
11. Activez **Légende des données affichées** si nécessaire, puis cliquez sur **Enregistrer**.

L’anneau affiche la température comme une position dans la plage choisie et devient vert uniquement dans la bande confortable. Les mêmes étapes conviennent à toute mesure avec un plancher et un plafond raisonnables — seuls l’appareil, la **Valeur min**/**Valeur max**, et les conditions changent. Un Doughnut mérite sa place lorsque la question est « où en est-on dans la plage ? » ; pour une température que l’on veut simplement lire, un Nombre ou une Jauge est souvent l’affichage le plus naturel.

## Exemples pratiques

**Le même capteur, une configuration complètement différente — un réfrigérateur** Un réfrigérateur utilise le *même type* de capteur de température que le bureau ci-dessus, et pourtant chaque nombre est différent — parce que la bonne plage dépend de ce que vous mesurez. La bande de sécurité d’un réfrigérateur est d’environ 0 à 5 °C, donc vous réglez l’échelle un peu plus large que cette bande, afin qu’un réfrigérateur en panne qui se réchauffe reste visible sur l’anneau : **Valeur min** **-5**, **Valeur max** **15**. Puis créez trois conditions : « Trop froid » — De -5 à 0 — bleu ; « Sûr » — De 0 à 5 — vert ; « Trop chaud » — De 5 à 15 — rouge. Matériel identique, étapes identiques — seules la plage et les bandes changent, parce que « bon » signifie quelque chose de complètement différent dans un réfrigérateur et dans un bureau. C’est là tout l’intérêt des conditions : vous décidez ce que chaque mesure signifie dans son propre contexte.

**Un niveau de remplissage** Un Doughnut convient naturellement à une cuve ou à une batterie. Un capteur de niveau dans une cuve de 5 000 litres indique le contenu en litres, donc 0 L correspond à une cuve vide et 5 000 L à une cuve pleine — **Valeur min** 0, **Valeur max** 5000 — avec des conditions vert De 3000 à 5000, jaune De 1000 à 3000, rouge De 0 à 1000. L’anneau se vide visiblement au fur et à mesure que la cuve se vide.

## Voir aussi

* [Widget Dernières données](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — Référence de configuration complète et autres types d’affichage
* [Conditions](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Règles de couleur numériques De/À pour chaque métrique
* Autres types d’affichage : [Valeur](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/number.md) · [Pie](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/pie.md) · [Jauge](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/gauge.md) · [Tube](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/tube.md) · [Radial gauge](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/radial-gauge.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.kiloiot.io/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/last-data-widget/doughnut.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
