dsfr-data-unpivot - Composants

Composant de bascule « wide » vers « tidy ». Deplie un tableau ou une dimension (souvent le temps) est encodee dans les NOMS de colonnes (c2023_01, c2023_02...) en une observation par ligne. Ne fait aucun fetch HTTP : c'est un pur transformateur, l'inverse exact d'un pivot.

Invisible : Ce composant ne rend rien visuellement. Il ecoute une source, bascule ses colonnes en lignes, puis redistribue le resultat via le systeme d'evenements. La valeur reste brute : le typage est delegue a <dsfr-data-normalize> (numeric-auto) en aval.

Le probleme resolu

Un tableur saisi a la main est souvent « wide » : une colonne par periode.

Indicateurs           | Sous_theme           | c2023_01 | c2023_02 | ... | c2026_04
Immatriculations VE   | Vehicule Particulier | 14904    | 19965    | ... | 36542

Le pipeline dsfr-data suppose un format « tidy » (une observation par ligne) :

Indicateurs           | Sous_theme           | mois    | valeur
Immatriculations VE   | Vehicule Particulier | 2023-01 | 14904
Immatriculations VE   | Vehicule Particulier | 2023-02 | 19965

<dsfr-data-unpivot> effectue cette bascule de maniere declarative, sans JavaScript.

Position dans le pipeline

dsfr-data-source (wide) ──► dsfr-data-unpivot ──► dsfr-data-normalize ──► dsfr-data-query ──► dsfr-data-chart

Attributs

Attribut	Type	Format / Valeurs	Description
`id`	String	`id="tidy"`	Identifiant unique de la sortie (requis). Les composants aval s'y abonnent.
`source`	String	`source="grist_wide"`	ID de la source amont a deplier (requis)
`id-cols`	String	`id-cols="Indicateurs, Sous_theme"`	Colonnes conservees telles quelles sur chaque ligne (virgule-separees)
`value-cols`	String	`value-cols="janv, fevr, mars"`	Liste explicite des colonnes a deplier. Exclusif avec `value-cols-pattern`
`value-cols-pattern`	String	`value-cols-pattern="c{YYYY}_{MM}"`	Motif des colonnes a deplier (voir tokens ci-dessous)
`var-name`	String	`var-name="mois"`	Nom de la nouvelle colonne « variable » (cle depliee). Defaut : `variable`
`var-format`	String	`var-format="{YYYY}-{MM}"`	Reformatage de la cle via les tokens du motif (`c2023_01` → `2023-01`)
`value-name`	String	`value-name="valeur"`	Nom de la nouvelle colonne « valeur ». Defaut : `value`
`drop-empty`	Boolean	`drop-empty`	Ne pas emettre de ligne quand la cellule depliee est vide / null

Tokens du motif `value-cols-pattern`

Les placeholders {TOKEN} capturent une partie du nom de colonne. Le motif est ancre (debut a fin).

Token	Largeur	Exemple
`YYYY`	4 chiffres	`2023`
`YY` / `MM` / `DD` / `HH`	2 chiffres	`01`
`Q`	1 chiffre	`4`
`{nom}` (generique)	un segment	`region`

Exemples

Tableur electromobilite « wide » vers courbe temporelle

La table Grist a une colonne par mois (c2023_01...). On la bascule en tidy, on type les valeurs, et on trace une courbe — sans une ligne de JavaScript.

<dsfr-data-source id="grist_wide" api-type="grist"
  base-url="https://grist.numerique.gouv.fr" doc-id="..." table="Plan_Elec">
</dsfr-data-source>

<dsfr-data-unpivot id="tidy" source="grist_wide"
  id-cols="Indicateurs, Sous_theme"
  value-cols-pattern="c{YYYY}_{MM}"
  var-name="mois" var-format="{YYYY}-{MM}"
  value-name="valeur">
</dsfr-data-unpivot>

<dsfr-data-normalize id="prep" source="tidy" numeric-auto></dsfr-data-normalize>

<dsfr-data-query id="ve" source="prep"
  where="Indicateurs = 'Nombre immatriculations VE'" order-by="mois:asc">
</dsfr-data-query>

<dsfr-data-chart source="ve" type="line"
  label-field="mois" value-field="valeur">
</dsfr-data-chart>

Cle de serie composite + multi-courbes (avec `compute` et `series-field`)

Quand l'identite d'une serie est repartie sur plusieurs colonnes (ici Indicateurs + Sous_theme), l'attribut compute de <dsfr-data-normalize> les recolle en une cle unique. Le series-field de <dsfr-data-chart> transforme alors cette cle tidy en une courbe par serie — sans une ligne de JavaScript.

<dsfr-data-normalize id="prep" source="tidy"
  numeric-auto
  compute="groupe = Indicateurs + ' / ' + Sous_theme">
</dsfr-data-normalize>

<dsfr-data-chart source="prep" type="line"
  label-field="mois" series-field="groupe" value-field="valeur">
</dsfr-data-chart>

Alternative pour une seule serie : filtrer via <dsfr-data-query where="groupe = '...'">.

Liste explicite de colonnes

Quand les colonnes ne suivent pas de motif, on les liste explicitement :

<dsfr-data-unpivot id="tidy" source="src"
  id-cols="produit"
  value-cols="janvier, fevrier, mars"
  var-name="mois" value-name="ventes">
</dsfr-data-unpivot>

Evenements

Le composant emet les memes evenements que <dsfr-data-source> :

dsfr-data-loaded : Donnees depliees disponibles
dsfr-data-loading : En attente de la source
dsfr-data-error : Erreur de la source ou du depivotage

Methodes publiques

Methode	Retour	Description
`getData()`	Array	Retourne les donnees depliees actuelles

Conseils d'utilisation

Schema evolutif : un nouveau mois (nouvelle colonne c2026_05) est depliee automatiquement par value-cols-pattern, sans modifier le HTML.

Typage delegue : la valeur reste une chaine. Placez un <dsfr-data-normalize numeric-auto> en aval — il gere deja la virgule decimale francaise (0,26) et les espaces de milliers.

Recalcul automatique : si la source emet de nouvelles donnees (rechargement, filtre, pagination), le depivotage est recalcule automatiquement.