Composant · Données

SolidGaugeChart

Stable

Anneau de progression plein : la piste de fond est recouverte d'un arc rempli proportionnel à value. Distinct du GaugeChart à aiguille, il met en avant un ratio d'avancement. Les seuils (thresholds) teintent l'arc rempli selon la zone atteinte, et la valeur est affichée au centre.

Exemples

Deux anneaux : progression simple en pourcentage et disponibilité SLA teintée par seuils (vert au-delà de 80 %).

Anneaux de progression

Progression: 68% (min 0, max 100)

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

Voir le code (Svelte)

<div class="solid-gauge-demo-row">
  <SolidGaugeChart value={68} label="Progression" format="percent" size={200} />
  <SolidGaugeChart
    value={91}
    label="Disponibilité SLA"
    unit="%"
    thresholds={[{"value":0,"tone":"error"},{"value":60,"tone":"warning"},{"value":80,"tone":"success"}]}
    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`	`SolidGaugeThreshold[]`	–	Seuils triés par value croissante : la zone atteinte teinte l'arc rempli.
`innerRadius`	`number`	`0.72`	Rayon intérieur de l'anneau, en fraction du rayon (0..1).
`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.
`startAngle`	`number`	`180`	Angle de départ en degrés (0 = est, sens horaire).
`endAngle`	`number`	`360`	Angle de fin en degrés.

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

Tokens CSS

Variable CSS	Description
`--st-semantic-surface-subtle`	Couleur de la piste de fond.
`--st-semantic-action-primary`	Couleur de l'arc rempli sans seuils.
`--st-semantic-text-primary`	Couleur du texte de la valeur centrale.
`--st-semantic-feedback-success` / `warning` / `error`	Couleurs des zones de seuil sémantiques.
`--st-semantic-data-category1…8`	Couleurs des zones de seuil catégorielles.