GanttChart

Exemples

Planning de projet

Quatre tâches réparties en deux lots (Étude, Build). Chaque barre démarre à son `start` et s'étend jusqu'à `end` ; le trait pointillé rouge repère le jour courant.

<div class="chart-wrapper">
  <GanttChart
    label="Planning projet : semaines"
    data={[{"task":"Cadrage","start":0,"end":3,"category":"Étude"},{"task":"Conception","start":3,"end":8,"category":"Étude"},{"task":"Développement","start":6,"end":16,"category":"Build"},{"task":"Recette","start":14,"end":20,"category":"Build"}]}
    marker={10}
  />
</div>

API du composant

GanttChartTask = { task: string; start: number; end: number; category?: string }

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque tâche expose `tâche → start → end` dans une liste accessible hors SVG ; la légende des catégories est une vraie liste HTML.

Notes d'usage

`start` et `end` sont des positions numériques sur un même axe (jours, semaines, index). Le composant normalise les bornes inversées (`start ≤ end`), ignore les tâches non finies ou sans libellé, et tronque les libellés longs à gauche.

Tokens

• --st-semantic-data-category1 … --st-semantic-data-category8
• --st-semantic-feedback-error
• --st-semantic-border-subtle
• --st-semantic-text-secondary
• --st-semantic-surface-inverse
• --st-semantic-text-inverse
• --st-radius-sm

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive les barres d’un DashboardStore partagé : task, start et end désignent les champs de ligne, le reste du contrat est inchangé.

<div class="chart-wrapper">
  <GanttChart
    store={store}
    viewId="store"
    task="task"
    start="start"
    end="end"
    label="Planning (store)"
  />
</div>

Props du natif non reprises par la version store : data (dérivé du store via task / start / end).