@synertech/ui 0.42.0 → 0.43.0

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

@@ -160,6 +160,8 @@ 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
@@ -732,6 +734,30 @@ const data = [
   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 }) => (
@@ -786,6 +812,16 @@ const data = [
   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