Composant · Données

ParetoChart

Documenté

ParetoChart combine des barres triées par valeur décroissante et une courbe cumulée en pourcentage sur un second axe. Il met en évidence le principe « 80/20 » : la minorité des causes qui produit la majorité des effets.

Exemples

Causes d'incidents

Les premières catégories cumulent l'essentiel des incidents.

Causes d'incidents

Réseau: 45 (45% cumulé)
Déploiement: 30 (75% cumulé)
Base de données: 15 (90% cumulé)
Tiers: 7 (97% cumulé)
Autre: 3 (100% cumulé)

Voir le code (Svelte)

<div class="chart-wrapper">
  <ParetoChart
    label="Causes d'incidents"
    data={[{"label":"Réseau","value":45,"tone":"category1"},{"label":"Déploiement","value":30,"tone":"category2"},{"label":"Base de données","value":15,"tone":"category3"},{"label":"Tiers","value":7,"tone":"category4"},{"label":"Autre","value":3,"tone":"category5"}]}
  />
</div>

Défauts qualité

La courbe cumulée aide à fixer le seuil d'action prioritaire.

Défauts qualité

Rayures: 120 (41.4% cumulé)
Assemblage: 80 (69.0% cumulé)
Peinture: 50 (86.2% cumulé)
Emballage: 28 (95.9% cumulé)
Étiquetage: 12 (100% cumulé)

Voir le code (Svelte)

<div class="chart-wrapper">
  <ParetoChart
    label="Défauts qualité"
    data={[{"label":"Rayures","value":120,"tone":"category1"},{"label":"Assemblage","value":80,"tone":"category2"},{"label":"Peinture","value":50,"tone":"category3"},{"label":"Emballage","value":28,"tone":"category4"},{"label":"Étiquetage","value":12,"tone":"category5"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ParetoChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

ParetoChartDatum = { label: string; value: number; tone?: ParetoChartTone } · ParetoChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque barre est résumée dans une liste accessible avec sa valeur ; les données sont triées par valeur décroissante.

Notes d'usage

Fournissez des valeurs brutes : le composant trie lui-même et calcule le cumul en pourcentage. Conservez un nombre raisonnable de catégories pour garder la lecture claire.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-border-interactive
--st-semantic-text-secondary
--st-semantic-text-primary