Composant · Données

ViolinChart

Documenté

ViolinChart trace la densité de distribution de chaque catégorie sous forme de violon symétrique (miroir gauche/droite). L'échelle Y est commune à toutes les catégories pour permettre la comparaison.

Exemples

Comparaison de distributions

Un violon par catégorie ; la largeur reflète la densité de points à chaque hauteur.

Comparaison de distributions

API: 10 points, min 10, median 21, max 33
Jobs: 8 points, min 5, median 11.5, max 40

Voir le code (Svelte)

<div class="chart-wrapper">
  <ViolinChart
    label="Distribution de latence"
    data={[{"label":"API","values":[10,12,14,18,20,22,28,30,31,33]},{"label":"Jobs","values":[5,8,9,11,12,15,18,40],"tone":"category4"}]}
  />
</div>

Sans quartiles

`quartiles={false}` masque la boîte q1–q3 et le trait médian pour ne garder que la forme.

Sans quartiles

A: 9 points, min 1, median 3, max 5
B: 7 points, min 2, median 6, max 10

Voir le code (Svelte)

<div class="chart-wrapper">
  <ViolinChart
    label="Forme seule"
    quartiles={false}
    data={[{"label":"A","values":[1,2,2,3,3,3,4,4,5]},{"label":"B","values":[2,4,6,6,6,8,10],"tone":"category6"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ViolinChartDatum[]`	requis
`label`	`string`	requis
`bins`	`number`	`20`
`quartiles`	`boolean`	`true`
`width`	`number`	`480`
`height`	`number`	`280`
`class`	`string`	optionnel

ViolinChartDatum = { label: string; values: number[]; tone?: ViolinChartTone } · ViolinChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique (role=img). Chaque catégorie est résumée (n points, min/médiane/max) dans une liste accessible hors SVG.

Notes d'usage

La densité utilise un histogramme (~20 bins) normalisé par violon : on compare des FORMES, pas des volumes. Les valeurs non finies sont exclues ; une catégorie vide est ignorée.

Tokens

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