Composant · Données

WindBarbChart

Stable

Barbes de vent (façon Highcharts « windbarb »). Une barbe par point le long d'un axe temporel : la hampe est orientée selon direction (en degrés, 0° = Nord) et les barbules encodent speed (en nœuds) par paliers météo standard — demi-barbule = 5 kt, barbule pleine = 10 kt, fanion = 50 kt. La couleur encode la vitesse (échelle data category1…8). Liste accessible des points hors SVG.

Exemples

8 relevés horaires : la vitesse monte jusqu'à un pic (fanion) puis redescend, la direction tourne — les barbes les plus rapides passent au ton data le plus chaud.

Profil de vent

1781416800k · 5 kt @ 0°
1781420400k · 12 kt @ 35°
1781424000k · 20 kt @ 70°
1781427600k · 35 kt @ 105°
1781431200k · 55 kt @ 140°
1781434800k · 40 kt @ 175°
1781438400k · 25 kt @ 210°
1781442000k · 10 kt @ 245°

Voir le code (Svelte)

<div class="docs-windbarb-box">
  <WindBarbChart
    label="Profil de vent"
    width={640}
    height={160}
    data={[{"at":1781416800000,"speed":5,"direction":0},{"at":1781420400000,"speed":12,"direction":35},{"at":1781424000000,"speed":20,"direction":70},{"at":1781427600000,"speed":35,"direction":105},{"at":1781431200000,"speed":55,"direction":140},{"at":1781434800000,"speed":40,"direction":175},{"at":1781438400000,"speed":25,"direction":210},{"at":1781442000000,"speed":10,"direction":245}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`WindBarbChartDatum[]`	`[]`	Points : { at, speed, direction }.
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`160`	Hauteur du viewBox SVG.
`size`	`number`	`32`	Longueur (px) de la hampe d'une barbe.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

WindBarbChartDatum = { at: number; speed: number; direction: number } : speed en nœuds, direction en degrés (0° = Nord) ; les points non finis ou à vitesse négative sont écartés.

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Couleur de l'axe temporel.
`--st-semantic-data-category1…8`	Couleur des barbes par bin de vitesse.
`--st-semantic-text-secondary`	Graduations de l'axe.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.