République
française
dsfr-data
Documentation — Web Components DSFR pour la dataviz
Composant de jointure multi-sources. Joint deux jeux de données sur une ou plusieurs clés 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 données, les joint en memoire, puis redistribue le resultat via le systeme d'événements.
Voir les exemples live dans le Guide utilisateur
<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) ──────┘| Attribut | Type | Format / Valeurs | Description |
|---|---|---|---|
id | String | id="enriched" | Identifiant unique (requis). Les composants aval l'utilisent pour s'abonner aux données jointes. |
left | String | left="id-source-a" | ID de la source gauche — source principale (requis) |
right | String | right="id-source-b" | ID de la source droite (requis) |
on | String | Voir formats ci-dessous | Clé(s) de jointure (requis) |
type | String | inner | left | right | full | Type de jointure. Défaut : left |
prefix-left | String | prefix-left="pop_" | Prefixe pour les champs gauche en cas de collision. Défaut : vide |
prefix-right | String | prefix-right="budget_" | Prefixe pour les champs droite en cas de collision. Défaut : right_ |
onQuand le champ porte le même nom dans les deux sources :
on="code_dept"
Quand le champ a un nom different dans chaque source (gauche=droite) :
on="dept_code=code"
Jointure sur plusieurs champs (separes par virgule) :
on="annee,code_region" on="annee, dept_code=code"
| Type | Description | Equivalent SQL |
|---|---|---|
inner | Seuls les enregistrements presents dans les deux sources | INNER JOIN |
left | Tous les enregistrements gauche ; champs droite a null si absent | LEFT JOIN |
right | Tous les enregistrements droite ; champs gauche a null si absent | RIGHT JOIN |
full | Union de tous les enregistrements ; null pour les champs manquants | FULL OUTER JOIN |
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>
Apres la jointure, un <dsfr-data-query> peut agréger et trier les données 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>
Quand le champ de jointure n'a pas le même 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>
Le composant emet les mêmes événements que <dsfr-data-source> :
dsfr-data-loaded : Données jointes disponiblesdsfr-data-loading : En attente d'une ou plusieurs sourcesdsfr-data-error : Erreur d'une source ou de la jointure| Méthode | Retour | Description |
|---|---|---|
getData() | Array | Retourne les données jointes actuelles |
isLoading() | Boolean | Indique si le composant attend encore des données |
getError() | Error | null | Retourne l'erreur eventuelle |
Collisions de noms : Si un champ existe dans les deux sources avec le même nom
(hors clé de jointure), le prefix-right est applique au champ droit (défaut : right_).
Definissez prefix-left pour prefixer aussi les champs gauche.
Relations 1-N : Si plusieurs enregistrements de la source droite correspondent a une clé de la source gauche, autant de lignes sont generees (comportement SQL standard).
Recalcul automatique : Si l'une des sources emet de nouvelles données (rechargement, filtre, pagination), la jointure est recalculee automatiquement.