Composant de jointure multi-sources. Joint deux jeux de donnees sur une ou plusieurs cles pivot pour produire un dataset enrichi. Ne fait aucun fetch HTTP : c'est un pur transformateur.

Invisible : Ce composant ne rend rien visuellement. Il attend que ses deux sources aient emis leurs donnees, les joint en memoire, puis redistribue le resultat via le systeme d'evenements.

Voir les exemples live dans le Guide utilisateur

Position dans le pipeline

<dsfr-data-join> se place entre les sources et les composants de transformation/visualisation. Il souscrit a deux <dsfr-data-source> (ou tout composant emettant dsfr-data-loaded), les joint, et emet le resultat sous son propre id.

dsfr-data-source (A)  ──────┐
                             ├──► dsfr-data-join ──► dsfr-data-query ──► dsfr-data-chart
dsfr-data-source (B)  ──────┘

Attributs

AttributTypeFormat / ValeursDescription
idStringid="enriched"Identifiant unique (requis). Les composants aval l'utilisent pour s'abonner aux donnees jointes.
leftStringleft="id-source-a"ID de la source gauche — source principale (requis)
rightStringright="id-source-b"ID de la source droite (requis)
onStringVoir formats ci-dessousCle(s) de jointure (requis)
typeStringinner | left | right | fullType de jointure. Defaut : left
prefix-leftStringprefix-left="pop_"Prefixe pour les champs gauche en cas de collision. Defaut : vide
prefix-rightStringprefix-right="budget_"Prefixe pour les champs droite en cas de collision. Defaut : right_

Format de l'attribut on

Cle commune

Quand le champ porte le meme nom dans les deux sources :

on="code_dept"

Cle de nommage different

Quand le champ a un nom different dans chaque source (gauche=droite) :

on="dept_code=code"

Multi-cle

Jointure sur plusieurs champs (separes par virgule) :

on="annee,code_region"
on="annee, dept_code=code"

Types de jointure

TypeDescriptionEquivalent SQL
innerSeuls les enregistrements presents dans les deux sourcesINNER JOIN
leftTous les enregistrements gauche ; champs droite a null si absentLEFT JOIN
rightTous les enregistrements droite ; champs gauche a null si absentRIGHT JOIN
fullUnion de tous les enregistrements ; null pour les champs manquantsFULL OUTER JOIN

Exemples

Enrichir un dataset avec des donnees d'une autre source

Jointure gauche entre un dataset de population et un dataset de budgets, sur le code departement. Voir l'exemple live

<dsfr-data-source id="pop" api-type="opendatasoft"
  dataset-id="population-dept" base-url="https://data.economie.gouv.fr">
</dsfr-data-source>

<dsfr-data-source id="budget" api-type="tabular"
  resource="abc123-budget-dept">
</dsfr-data-source>

<dsfr-data-join id="enriched"
  left="pop" right="budget"
  on="code_dept" type="left"
  prefix-right="budget_">
</dsfr-data-join>

<dsfr-data-chart source="enriched" type="bar"
  label-field="nom_dept" value-field="budget_montant">
</dsfr-data-chart>

Jointure avec transformation aval

Apres la jointure, un <dsfr-data-query> peut agreger et trier les donnees fusionnees.

<dsfr-data-join id="joined"
  left="src1" right="src2"
  on="code_region" type="inner">
</dsfr-data-join>

<dsfr-data-query id="q" source="joined"
  aggregate="population:sum:total,budget:sum:total_budget"
  group-by="nom_region" order-by="total:desc">
</dsfr-data-query>

<dsfr-data-chart source="q" type="horizontalBar"
  label-field="nom_region" value-field="total">
</dsfr-data-chart>

Cles de nommage different

Quand le champ de jointure n'a pas le meme nom dans les deux sources :

<dsfr-data-join id="merged"
  left="src-a" right="src-b"
  on="dept_code=code" type="inner">
</dsfr-data-join>

Evenements

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

Methodes publiques

MethodeRetourDescription
getData()ArrayRetourne les donnees jointes actuelles
isLoading()BooleanIndique si le composant attend encore des donnees
getError()Error | nullRetourne l'erreur eventuelle

Conseils d'utilisation

Collisions de noms : Si un champ existe dans les deux sources avec le meme nom (hors cle de jointure), le prefix-right est applique au champ droit (defaut : right_). Definissez prefix-left pour prefixer aussi les champs gauche.

Relations 1-N : Si plusieurs enregistrements de la source droite correspondent a une cle de la source gauche, autant de lignes sont generees (comportement SQL standard).

Recalcul automatique : Si l'une des sources emet de nouvelles donnees (rechargement, filtre, pagination), la jointure est recalculee automatiquement.