Composant · Données

WordCloudChart

Stable

Nuage de mots : la taille de police de chaque mot est proportionnelle à son poids. Le placement est entièrement déterministe : les mots sont triés par poids décroissant puis positionnés depuis le centre le long d'une spirale d'Archimède, en évitant tout chevauchement par boîtes englobantes. Couleurs issues de la palette catégorielle du thème, tooltip au survol et liste de valeurs accessible. Les mots qui ne rentrent pas sont omis et signalés dans la liste de valeurs.

Exemples

Thèmes les plus cités dans les retours utilisateurs. Le mot le plus fréquent (performance) domine visuellement ; les couleurs cyclent la palette catégorielle.

Thèmes les plus cités dans les retours

performance: 96
accessibilité: 78
design: 64
tokens: 52
thème: 44
svelte: 38
react: 36
vue: 34
docs: 28
charts: 24
a11y: 18
i18n: 12

Voir le code (Svelte)

<div class="chart-wrapper">
  <WordCloudChart
    label="Thèmes les plus cités dans les retours"
    data={[{"text":"performance","weight":96},{"text":"accessibilité","weight":78},{"text":"design","weight":64},{"text":"tokens","weight":52},{"text":"thème","weight":44},{"text":"svelte","weight":38},{"text":"react","weight":36},{"text":"vue","weight":34},{"text":"docs","weight":28},{"text":"charts","weight":24},{"text":"a11y","weight":18},{"text":"i18n","weight":12}]}
    width={520}
    height={320}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`WordCloudChartWord[]`	requis	Mots à placer (texte + poids).
`label`	`string`	requis	Label aria-label du graphique (a11y).
`width`	`number`	`480`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.

WordCloudChartWord = { text: string; weight: number; tone?: WordCloudChartTone }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Palette catégorielle pour la couleur des mots.
`--st-semantic-surface-inverse`	Fond du tooltip de survol.
`--st-semantic-text-inverse`	Texte du tooltip.