Composant · Données

GaugeChart

Stable

Jauge semi-circulaire affichant une valeur sur un arc coloré par seuils. Les seuils (thresholds) définissent des bandes colorées sur la piste pour contextualiser immédiatement le niveau mesuré. La valeur et l'unité sont affichées au centre de l'arc.

Exemples

Deux jauges avec seuils inversés : disponibilité SLA (vert au-delà de 80 %) et charge CPU (rouge au-delà de 90 %).

Jauges SLA et CPU

Disponibilité SLA: 72 % (min 0, max 100)

Charge CPU: 42 % (min 0, max 100)

Voir le code (Svelte)

<div class="gauge-demo-row">
  <GaugeChart
    value={72}
    label="Disponibilité SLA"
    thresholds={[{"value":0,"tone":"error"},{"value":60,"tone":"warning"},{"value":80,"tone":"success"}]}
    unit="%"
    size={200}
  />
  <GaugeChart
    value={42}
    label="Charge CPU"
    thresholds={[{"value":0,"tone":"success"},{"value":70,"tone":"warning"},{"value":90,"tone":"error"}]}
    unit="%"
    size={200}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`value`	`number`	requis	Valeur courante de la jauge.
`min`	`number`	`0`	Valeur minimale de l'échelle.
`max`	`number`	`100`	Valeur maximale de l'échelle.
`thresholds`	`GaugeChartThreshold[]`	–	Bandes colorées triées par value croissante.
`label`	`string`	–	Description de la jauge (a11y + texte sous valeur).
`format`	`"number" \| "percent"`	`"number"`	Format de la valeur centrale.
`unit`	`string`	–	Suffixe d'unité (ignoré pour format percent).
`size`	`number`	`220`	Diamètre du SVG en pixels.
`thickness`	`number`	`22`	Épaisseur de l'arc en pixels.
`startAngle`	`number`	`180`	Angle de départ en degrés (0 = est, sens horaire).
`endAngle`	`number`	`360`	Angle de fin en degrés.

GaugeChartThreshold = { value: number; tone: GaugeChartTone } : tone ∈ neutral | info | success | warning | error | category1…8

Tokens CSS

Variable CSS	Description
`--st-component-gaugeChart-trackStroke`	Couleur de la piste de fond (défaut : border-subtle).
`--st-component-gaugeChart-valueFill`	Couleur du texte de la valeur centrale.
`--st-component-gaugeChart-labelFill`	Couleur du label sous la valeur.
`--st-semantic-feedback-success` / `warning` / `error`	Couleurs des bandes de seuil sémantiques.
`--st-semantic-data-category1…8`	Couleurs des bandes de seuil catégorielles.

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) reprend l’intégralité du contrat natif et y ajoute la liaison au DashboardStore partagé : aucune prop du natif n’est abandonnée, mais value change de sens (identifiant de mesure string agrégé depuis le store, contre nombre direct côté natif).

Charge (store)

Voir le code (Svelte)

<div class="chart-wrapper">
  <GaugeChart
    store={store}
    value="revenue"
    min={0}
    max={100}
    unit="%"
    label="Charge (store)"
  />
</div>

Prop	Type	Par défaut
`store`	`DashboardStore`	requis
`viewId`	`string`	non défini
`value`	`string`	requis (identifiant de mesure, agrégé depuis le store — pas le nombre direct du natif)
`min` / `max`	`number`	natif
`thresholds`	`GaugeChartThreshold[]`	non défini
`format` / `unit`	`GaugeChartFormat / string`	natif
`size` / `thickness`	`number`	natif
`startAngle` / `endAngle`	`number`	natif
`label`	`string`	non défini

Props du natif non reprises par la version store : aucune.