@synertech/ui 0.41.0 → 0.43.0

package/.claude/skills/use-synertech-ui/SKILL.md

@@ -160,6 +160,14 @@ import { cn } from "@synertech/ui";
 - `BulletChart` - Réalisé, objectif et plages qualitatives sur une seule ligne
 - `ChartFacets` - Petits multiples : un même graphique répété, à échelle partagée
 - `ChartScaleLegend` - La légende d'une rampe de couleur
+- `ChartFilterBar` - Les filtres en une rangée au-dessus des graphiques qu'ils cadrent
+- `ChartPeriodPicker` - La fenêtre d'un tableau de bord : préréglages nommés + calendrier
+- `WaterfallChart` - Comment on passe de A à B : chaque contribution, positive ou négative
+- `FunnelChart` - Des étapes ordonnées et leur déperdition (rampe ordinale)
+- `DumbbellChart` - Avant → après par élément, ou une plage min–max
+- `BoxPlot` - Médiane, quartiles, moustaches et valeurs aberrantes
+- `CandlestickChart` - Ouverture, haut, bas, clôture (couleurs de statut)
+- `GanttChart` - Des tâches dans le temps, avec dépendances et jalons
 
 ### Feedback & Overlays
 
@@ -628,6 +636,25 @@ const data = [
   bubble={{ key: "clients", range: [4, 18] }}
   trendLine
 />
+
+// Histogramme — `bins` lit x.key comme une mesure, la range et la compte
+<BarChart
+  data={sessions}                // [{ duration: 42 }, { duration: 118 }, ...]
+  x={{ key: "duration", label: "Durée (s)" }}
+  series={[{ key: "sessions", label: "Sessions" }]}  // nomme le COMPTE
+  bins={12}                      // ou true (auto), ou [0, 15, 30, 60, 120]
+/>
+
+// Barres + ligne — une série typée, un seul axe
+<BarChart
+  data={monthly}
+  x={{ key: "month" }}
+  series={[
+    { key: "commandes", label: "Commandes" },
+    { key: "retours", label: "Retours", type: "line" },
+  ]}
+  curve="monotone"
+/>
 ```
 
 ```tsx
@@ -654,6 +681,83 @@ const data = [
   normalize="row"              // "row" (par défaut) | "shared" → ramène l'axe des valeurs
 />
 
+// Cascade — chaque pas flotte entre le cumul avant et après lui
+<WaterfallChart
+  data={budget}                  // [{ poste, montant, jalon? }, ...]
+  x={{ key: "poste" }}
+  value="montant"
+  total="jalon"                  // ligne de contrôle dessinée depuis zéro
+  start={0}                      // cumul d'ouverture
+/>
+
+// Tunnel — étapes ORDONNÉES, donc rampe ordinale (jamais les créneaux)
+<FunnelChart
+  data={stages}                  // [{ etape, utilisateurs }, ...]
+  x={{ key: "etape" }}
+  value="utilisateurs"
+  align="center"                 // "center" (silhouette) | "left" (comparaison)
+  showConversion                 // le ratio d'un pas au suivant : le constat
+/>
+
+// Haltère — avant → après, ou une plage. L'écart EST la marque
+<DumbbellChart
+  data={satisfaction}
+  x={{ key: "service" }}
+  series={[{ key: "avant", label: "2025" }, { key: "apres", label: "2026" }]}
+  sort="gap"                     // les plus gros mouvements en tête
+/>
+
+// Boîte à moustaches — `values` (observations) ou `quantiles` (résumé)
+<BoxPlot
+  data={teams}                   // [{ equipe, durees: [12, 14, ...] }, ...]
+  x={{ key: "equipe" }}
+  values="durees"                // moustaches de Tukey + aberrations calculées
+  showMean                       // le losange : l'écart moyenne/médiane = la queue
+/>
+
+// Chandeliers — couleurs de statut + corps creux/plein, jamais la teinte seule
+<CandlestickChart
+  data={sessions}
+  x={{ key: "jour" }}
+  open="ouverture" high="haut" low="bas" close="cloture"
+/>
+
+// Planning — dates, dépendances, jalons. Ce n'est pas un `Calendar`
+<GanttChart
+  data={project}
+  x={{ key: "tache" }}
+  start="debut" end="fin"
+  id="id" dependencies="depend"  // les flèches : ce qui bloque quoi
+  progress="avancement"          // 0 à 1
+  milestone="jalon"
+  group="lot"                    // un créneau de palette par lot
+  today="2026-04-14"
+/>
+
+// Annotations — ce qui s'est passé, dessiné là où ça s'est passé
+// (`referenceLines` = un seuil sur l'axe des valeurs ; les annotations = un
+//  moment sur l'axe des catégories. Lisible sur LineChart, AreaChart, BarChart)
+<LineChart
+  data={monthly}
+  series={[{ key: "revenue" }]}
+  x={{ key: "month" }}
+  annotations={[
+    { type: "band", from: "Fév", to: "Mar", label: "Campagne" },
+    { type: "line", x: "Mai", label: "Refonte du tunnel" },
+    { type: "point", x: "Août", y: 39900, label: "Record" },
+  ]}
+/>
+
+// Trames — le canal de secours quand la teinte échoue (CVD sévère, impression
+// en niveaux de gris, forced-colors). Jamais par défaut : c'est de l'a11y
+<BarChart data={channels} series={channelSeries} x={{ key: "quarter" }} stack="stacked" patterns />
+
+// La rangée de filtres — une seule, au-dessus de TOUS les graphiques
+<ChartFilterBar actions={<Button size="sm">Exporter</Button>}>
+  <ChartPeriodPicker size="sm" value={period} onChange={setPeriod} />
+  <Select size="sm" options={regions} value={region} onValueChange={setRegion} />
+</ChartFilterBar>
+
 // Petits multiples — le domaine est calculé sur l'ensemble et imposé à chaque panneau
 <ChartFacets data={rows} by="region" values={["revenue"]} columns={3}>
   {({ data, domain, label }) => (
@@ -691,6 +795,33 @@ const data = [
 - **La rampe divergente dit un sens, pas un jugement.** « Au-dessus » n'est pas
   « bon » : un délai qui glisse est au-dessus. Le jugement appartient aux
   couleurs de statut, toujours accompagnées d'un libellé.
+- **Un `BarChart` combiné garde un seul axe.** Une série `type: "line"` partage
+  l'échelle des barres. Deux axes laissent deux mesures étrangères se croiser
+  là où le cadrage les place, ce qui se lit comme une corrélation inventée.
+- **Un histogramme ne se trie pas.** `sort`, `stack` et `diverging` sont ignorés
+  avec `bins` : les seaux ont un ordre, et le réordonner détruit la forme.
+- **Un tunnel encode une longueur, pas une surface.** Le trapèze classique
+  demande de comparer deux surfaces, ce que l'œil ne sait pas faire.
+- **Un `BoxPlot` nourri d'un résumé ne dessine aucune valeur aberrante.** Les
+  bornes de Tukey ont besoin des observations ; le composant préfère ne rien
+  affirmer plutôt qu'inventer.
+- **`DumbbellChart` et `BoxPlot` ne s'ancrent pas à zéro.** Ils se lisent à un
+  écart et à un étalement, pas à la longueur d'une marque depuis une base.
+- **`CandlestickChart` porte le sens deux fois** : couleur de statut ET corps
+  creux (hausse) contre plein (baisse). Vert contre rouge est la pire paire
+  sous déficience de vision des couleurs.
+- **`GanttChart` n'est pas un `Calendar`.** Le calendrier sélectionne une date
+  et la renvoie ; le planning se lit. Une ligne sans largeur est un jalon.
+- **Les filtres vivent dans UNE rangée, au-dessus des graphiques.** Jamais dans
+  une carte, jamais par graphique : deux panneaux filtrés séparément répondent à
+  deux questions et rien à l'écran ne le dit.
+- **Les trames ne sont jamais activées par défaut.** C'est une option
+  d'accessibilité, pas une décoration — et elles ne peignent que des identités :
+  une rampe (Heatmap, `diverging`, tunnel) encode une grandeur, ce qu'aucune
+  trame ne sait dire.
+- **Les annotations se lisent sur l'axe des catégories.** Un `BarChart`
+  horizontal les ignore, avec un avertissement : un moment placé sur une liste
+  de noms n'en est plus un.
 
 ### Cartes KPI