Composant · Données

StepLineChart

Documenté

StepLineChart visualise une valeur qui reste stable jusqu'au prochain seuil: paliers de capacité, quotas, états de stock, prix ou SLA. Le rendu suit le contrat LineChart, sans lissage ni aire.

Exemples

Rétention hebdomadaire

Série ordinale où chaque palier conserve sa valeur jusqu'à la semaine suivante.

Rétention hebdomadaire

S1: 92
S2: 88
S3: 91
S4: 85
S5: 89

Voir le code (Svelte)

<div class="chart-wrapper">
  <StepLineChart
    data={[{"x":"S1","y":92},{"x":"S2","y":88},{"x":"S3","y":91},{"x":"S4","y":85},{"x":"S5","y":89}]}
    label="Rétention hebdomadaire"
    tone="category4"
    width={520}
    height={260}
  />
</div>

Latence par seuil horaire

Quand tous les `x` sont numériques, l'axe X utilise une échelle linéaire.

Latence par seuil horaire

0: 180
4: 160
8: 240
12: 210
16: 260
20: 190

Voir le code (Svelte)

<div class="chart-wrapper">
  <StepLineChart
    data={[{"x":0,"y":180},{"x":4,"y":160},{"x":8,"y":240},{"x":12,"y":210},{"x":16,"y":260},{"x":20,"y":190}]}
    label="Latence p95 (ms)"
    tone="category6"
    width={520}
    height={260}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`StepLineChartDatum[]`	requis
`label`	`string`	requis
`tone`	`StepLineChartTone`	`"category1"`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

StepLineChartDatum = { x: number | string; y: number } · StepLineChartTone = "category1" | ... | "category8"

Accessibilité

`label` alimente le conteneur `role="img"`. Le SVG reste décoratif (`aria-hidden`) et les couples `x : y` sont exposés dans une liste accessible hors SVG.

Notes d'usage

Utilise StepLineChart quand la valeur change à un seuil explicite. Pour une tendance interpolée entre points, garde LineChart.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-component-stepLineChart-gridStroke
--st-component-stepLineChart-axisStroke
--st-component-stepLineChart-labelColor
--st-component-stepLineChart-tooltipBackground
--st-component-stepLineChart-tooltipText
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm