Composant · Données

BoxPlotChart

Documenté

BoxPlotChart compare des distributions à partir de leurs quartiles, moustaches et valeurs atypiques. Il est utile pour suivre la dispersion sans afficher chaque observation.

Exemples

Distribution de latence

Deux groupes avec médiane, quartiles et un outlier explicite.

Distribution de latence

API: min 10, q1 20, median 28, q3 40, max 60, outliers 90
Jobs: min 15, q1 24, median 34, q3 50, max 80

Voir le code (Svelte)

<div class="chart-wrapper">
  <BoxPlotChart
    label="Distribution de latence"
    data={[{"label":"API","min":10,"q1":20,"median":28,"q3":40,"max":60,"outliers":[90],"tone":"category3"},{"label":"Jobs","min":15,"q1":24,"median":34,"q3":50,"max":80}]}
  />
</div>

Cohortes

Le ton peut signaler une série prioritaire ou une anomalie connue.

Cohortes

Starter: min 4, q1 9, median 14, q3 24, max 38
Pro: min 10, q1 22, median 35, q3 48, max 66
Enterprise: min 18, q1 32, median 46, q3 70, max 92, outliers 120

Voir le code (Svelte)

<div class="chart-wrapper">
  <BoxPlotChart
    label="Valeur par cohorte"
    data={[{"label":"Starter","min":4,"q1":9,"median":14,"q3":24,"max":38},{"label":"Pro","min":10,"q1":22,"median":35,"q3":48,"max":66,"tone":"category5"},{"label":"Enterprise","min":18,"q1":32,"median":46,"q3":70,"max":92,"outliers":[120],"tone":"category7"}]}
  />
</div>

API du composant

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

BoxPlotChartDatum = { label: string; min: number; q1: number; median: number; q3: number; max: number; outliers?: number[]; tone?: BoxPlotChartTone } · BoxPlotChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Chaque boîte est résumée dans une liste accessible avec min, q1, médiane, q3, max et outliers.

Notes d'usage

Fournissez des quartiles déjà calculés. Le composant ne trie pas les observations brutes, ce qui garde le rendu prévisible et rapide.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-border-interactive
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm