Composant · Visualisation

Sparkline

Stable

Mini-graphique en ligne, sans axes ni libellés, conçu pour s’insérer dans une phrase, une cellule de table ou une carte de métrique. Tons sémantiques neutral/success/warning/error et remplissage d’aire optionnel.

Exemples

En ligne dans une phrase

Le Sparkline s’aligne sur la ligne de texte (`vertical-align: middle`).

En ligne dans une phrase

Consommation de tokens en hausse, et latence en baisse.

Voir le code (Svelte)

<p class="inline-demo">
  Consommation de tokens 
  <Sparkline
    data={[12,18,14,22,19,28,34]}
    tone="success"
    label="Tendance à la hausse sur 7 jours"
  />
   en hausse, et latence 
  <Sparkline
    data={[48,44,46,38,30,26,21]}
    tone="error"
    label="Tendance à la baisse sur 7 jours"
  />
   en baisse.
</p>

Tons

`tone` mappe sur les couleurs de feedback du thème.

Tons

neutral success warning error

Voir le code (Svelte)

<div class="tone-row">
  <span>
    <code>neutral</code>
     
    <Sparkline data={[30,42,35,50,38,44,41]} tone="neutral" label="neutral" />
  </span>
  <span>
    <code>success</code>
     
    <Sparkline data={[12,18,14,22,19,28,34]} tone="success" label="success" />
  </span>
  <span>
    <code>warning</code>
     
    <Sparkline data={[30,42,35,50,38,44,41]} tone="warning" label="warning" />
  </span>
  <span>
    <code>error</code>
     
    <Sparkline data={[48,44,46,38,30,26,21]} tone="error" label="error" />
  </span>
</div>

Avec aire

`area` ajoute un remplissage léger sous la courbe.

Avec aire

Voir le code (Svelte)

<div class="tone-row">
  <Sparkline
    data={[12,18,14,22,19,28,34]}
    tone="success"
    area
    width={160}
    height={40}
    strokeWidth={2}
    label="Tendance avec aire remplie"
  />
</div>

Cartes de métrique

Cas d’usage typique : une tendance hebdomadaire sous un chiffre clé.

Cartes de métrique

Tokens consommés8,2k

Latence moyenne412 ms

Taux de réussite98,4 %

Voir le code (Svelte)

<div class="card-row">
  <div class="metric-card">
    <span class="metric-label">Tokens consommés</span>
    <span class="metric-value">8,2k</span>
    <Sparkline
      data={[12,18,14,22,19,28,34]}
      tone="success"
      width={140}
      height={32}
      area
      label="Tokens consommés: Cette semaine"
    />
  </div>
  <div class="metric-card">
    <span class="metric-label">Latence moyenne</span>
    <span class="metric-value">412 ms</span>
    <Sparkline
      data={[48,44,46,38,30,26,21]}
      tone="warning"
      width={140}
      height={32}
      area
      label="Latence moyenne: Cette semaine"
    />
  </div>
  <div class="metric-card">
    <span class="metric-label">Taux de réussite</span>
    <span class="metric-value">98,4 %</span>
    <Sparkline
      data={[30,42,35,50,38,44,41]}
      tone="neutral"
      width={140}
      height={32}
      label="Taux de réussite: Cette semaine"
    />
  </div>
</div>

API

Prop	Type	Default
`data`	`number[]`	requis
`width`	`number`	`120`
`height`	`number`	`28`
`tone`	`"neutral" \| "success" \| "warning" \| "error"`	`"neutral"`
`strokeWidth`	`number`	`1.5`
`area`	`boolean`	`false`
`label`	`string`	optionnel
`class`	`string`	optionnel

Notes d’usage

Le conteneur a `role="img"`. Fournissez `label` pour décrire la tendance aux lecteurs d’écran ; le SVG interne est alors masqué (`aria-hidden`).

`data` est un tableau de nombres bruts, normalisé automatiquement sur l’amplitude min/max. Pas d’interaction ni d’infobulle : c’est une visualisation purement décorative/indicative.

Tokens utilisés

--st-component-sparkline-neutralStroke
--st-component-sparkline-successStroke
--st-component-sparkline-warningStroke
--st-component-sparkline-errorStroke
--st-semantic-text-secondary
--st-semantic-feedback-success
--st-semantic-feedback-warning
--st-semantic-feedback-error