Composant · Données

PackedBubblesChart

Documenté

PackedBubblesChart tasse des cercles dont l'aire est proportionnelle à la valeur. Le rayon suit sqrt(value) et le placement est déterministe, sans dépendance externe.

Exemples

Langages par usage

Aire ∝ valeur ; les plus grosses bulles occupent le centre.

Langages par usage

TypeScript: 120
Python: 80
Rust: 45
Go: 30
Elixir: 14

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <PackedBubblesChart
    label="Langages par usage"
    data={[{"label":"TypeScript","value":120,"tone":"category1"},{"label":"Python","value":80,"tone":"category2"},{"label":"Rust","value":45,"tone":"category3"},{"label":"Go","value":30,"tone":"category4"},{"label":"Elixir","value":14,"tone":"category5"}]}
  />
</div>

Tons explicites

Chaque bulle peut fixer son `tone` ; sinon la palette catégorielle tourne.

Tons explicites

Design: 60
Ingénierie: 90
Produit: 40

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <PackedBubblesChart
    label="Tons explicites"
    data={[{"label":"Design","value":60,"tone":"category6"},{"label":"Ingénierie","value":90,"tone":"category7"},{"label":"Produit","value":40,"tone":"category8"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`PackedBubblesChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`360`
`height`	`number`	`360`
`class`	`string`	optionnel

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

Accessibilité

`label` nomme le graphique (role=img). Chaque bulle est exposée dans une liste accessible au format « libellé : valeur ».

Notes d'usage

Les valeurs non finies ou négatives/nulles sont ignorées. Les libellés n'apparaissent que dans les bulles suffisamment grandes, avec une couleur de texte calculée par contraste.

Tokens

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