dsfr-data-join

dsfr-data-join joint deux sources de donnees sur une cle pivot pour produire un dataset enrichi. Supporte les jointures inner, left, right et full.

Reference API complete (attributs, types de jointure, methodes)

dsfr-data-source + dsfr-data-join + dsfr-data-query

dsfr-data-source recupere les donnees depuis une API. dsfr-data-join croise deux sources sur une cle commune pour enrichir les donnees. dsfr-data-query filtre, groupe et trie le resultat. Tous sont des composants invisibles qui se chainent via le systeme d'evenements.

Population vs Budget — left join, 2 series

Deux sources croisees sur code. Le graphique affiche deux series : population (source A) et budget (source B) cote a cote. Tester dans le Playground 

<!-- Source A : population (en milliers) -->
<dsfr-data-source id="pop"
  data='[
    {"code":"75","region":"Ile-de-France","population":12263},
    {"code":"13","region":"PACA","population":5099},
    {"code":"35","region":"Bretagne","population":3395},
    {"code":"14","region":"Normandie","population":3304}
  ]'>
</dsfr-data-source>

<!-- Source B : budget (en M EUR) -->
<dsfr-data-source id="budget"
  data='[
    {"code":"75","budget":5200},
    {"code":"13","budget":2100},
    {"code":"35","budget":1500},
    {"code":"14","budget":1400}
  ]'>
</dsfr-data-source>

<!-- Jointure sur le code region -->
<dsfr-data-join id="enriched"
  left="pop" right="budget"
  on="code" type="left">
</dsfr-data-join>

<!-- 2 series : population (source A) + budget (source B) -->
<dsfr-data-chart source="enriched" type="bar"
  label-field="region"
  value-field="population"
  value-fields="budget"
  title="Population (milliers) vs Budget (M EUR)">
</dsfr-data-chart>

Recettes vs Depenses — inner join + tri

Inner join suivi d'un tri. Deux series comparees cote a cote. La Normandie est exclue car absente de la source depenses. Tester dans le Playground 

<!-- Source A : recettes (5 regions) -->
<dsfr-data-source id="recettes"
  data='[
    {"code":"75","region":"Ile-de-France","recettes":8500},
    {"code":"13","region":"PACA","recettes":3200},
    {"code":"35","region":"Bretagne","recettes":2100},
    {"code":"14","region":"Normandie","recettes":1800},
    {"code":"44","region":"Pays de la Loire","recettes":2800}
  ]'>
</dsfr-data-source>

<!-- Source B : depenses (4 regions, pas de Normandie) -->
<dsfr-data-source id="depenses"
  data='[
    {"code":"75","depenses":7200},
    {"code":"13","depenses":3500},
    {"code":"35","depenses":1900},
    {"code":"44","depenses":2600}
  ]'>
</dsfr-data-source>

<!-- Inner join : exclut la Normandie -->
<dsfr-data-join id="merged"
  left="recettes" right="depenses"
  on="code" type="inner">
</dsfr-data-join>

<!-- Tri par recettes decroissantes -->
<dsfr-data-query id="sorted"
  source="merged"
  order-by="recettes:desc">
</dsfr-data-query>

<!-- 2 series : recettes vs depenses -->
<dsfr-data-chart source="sorted" type="bar"
  label-field="region"
  value-field="recettes"
  value-fields="depenses"
  title="Recettes vs Depenses (M EUR)">
</dsfr-data-chart>