dsfr-data-source

dsfr-data-source recupere les donnees d'une API REST et les redistribue aux composants en aval. Ici les donnees sont transmises directement au composant de visualisation, sans transformation intermediaire.

Barres — Taux de taxe fonciere par commune

Graphique en barres affichant les taux de taxe fonciere de 15 communes. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="fiscalite-locale-des-particuliers"
  base-url="https://data.economie.gouv.fr"
  limit="15"></dsfr-data-source>

<dsfr-data-chart source="data" type="bar"
  label-field="libcom" value-field="taux_global_tfb"
  unit-tooltip="%" selected-palette="categorical">
</dsfr-data-chart>

Courbe — Beneficiaires Industrie du futur

Courbe du nombre de beneficiaires par departement. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"
  limit="20"></dsfr-data-source>

<dsfr-data-chart source="data" type="line"
  label-field="nom_departement" value-field="nombre_beneficiaires">
</dsfr-data-chart>

Camembert — Poids demographique

Diagramme circulaire du poids demographique par commune. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="fiscalite-locale-des-particuliers"
  base-url="https://data.economie.gouv.fr"
  limit="8"></dsfr-data-source>

<dsfr-data-chart source="data" type="pie"
  label-field="libcom" value-field="mpoid">
</dsfr-data-chart>

Radar — Beneficiaires par region

Graphique radar montrant le profil des beneficiaires. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"
  limit="6"></dsfr-data-source>

<dsfr-data-chart source="data" type="radar"
  label-field="nom_region" value-field="nombre_beneficiaires">
</dsfr-data-chart>

Jauge — Taux de taxe fonciere

Jauge affichant le taux de taxe fonciere d'une commune (1 enregistrement). Le taux TFB varie typiquement entre 30 et 55%. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="fiscalite-locale-des-particuliers"
  base-url="https://data.economie.gouv.fr"
  limit="1"></dsfr-data-source>

<dsfr-data-chart source="data" type="gauge"
  value-field="taux_global_tfb">
</dsfr-data-chart>

Nuage — Investissement vs participation

Nuage de points croisant investissement et participation de l'Etat. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"></dsfr-data-source>

<dsfr-data-chart source="data" type="scatter"
  label-field="montant_investissement"
  value-field="montant_participation_etat">
</dsfr-data-chart>

Barres + ligne — Investissements

Combine barres (investissement) et ligne (participation Etat) via value-field-2. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"
  limit="15"></dsfr-data-source>

<dsfr-data-chart source="data" type="bar-line"
  label-field="nom_departement"
  value-field="montant_investissement"
  value-field-2="montant_participation_etat"
  name='["Investissement", "Participation Etat"]'>
</dsfr-data-chart>

Carte — Beneficiaires par departement

Carte de France coloree par nombre de beneficiaires, via code-field. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"></dsfr-data-source>

<dsfr-data-chart source="data" type="map"
  code-field="code_departement" value-field="nombre_beneficiaires"
  selected-palette="sequentialAscending">
</dsfr-data-chart>

KPI — Indicateurs Industrie du futur

Quatre indicateurs cles calcules directement depuis les donnees brutes. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="industrie-du-futur"
  base-url="https://data.economie.gouv.fr"></dsfr-data-source>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;">
  <dsfr-data-kpi source="data" valeur="sum:nombre_beneficiaires"
    label="Total beneficiaires" format="nombre"></dsfr-data-kpi>
  <dsfr-data-kpi source="data" valeur="avg:nombre_beneficiaires"
    label="Moyenne" format="decimal"></dsfr-data-kpi>
  <dsfr-data-kpi source="data" valeur="max:montant_investissement"
    label="Investissement max" format="euro" couleur="vert"></dsfr-data-kpi>
  <dsfr-data-kpi source="data" valeur="count"
    label="Enregistrements" format="nombre"></dsfr-data-kpi>
</div>

Tableau — Rappels de produits (ODS server-side)

Tableau interactif avec recherche, tri serveur et pagination serveur. Utilise le dataset RappelConso (data.economie.gouv.fr). Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="rappelconso-v2-gtin-trie"
  base-url="https://data.economie.gouv.fr"
  server-side page-size="10"
  order-by="date_publication:desc"></dsfr-data-source>

<dsfr-data-list source="data"
  colonnes="modeles_ou_references:Produit, categorie_produit:Categorie, marque_produit:Marque, date_publication:Date"
  server-tri
  pagination="10" export="csv">
</dsfr-data-list>

Registre de cles API (api-key-ref)

Plutot que d'ecrire les tokens dans les attributs HTML, declarez-les dans un registre global window.DSFR_DATA_KEYS et referencez-les par nom. La cle est injectee comme header Authorization a chaque requete.

API authentifiee via registre de cles

La cle API n'apparait dans aucun attribut HTML du composant. Fonctionne avec les deux modes (URL brute et adapter).

<!-- 1. Declarer les cles une seule fois -->
<script>
  window.DSFR_DATA_KEYS = {
    tmdb: 'Bearer eyJhbGci...',
    monapi: 'Token abc123'
  };
</script>

<!-- 2. Utiliser api-key-ref au lieu de headers -->
<dsfr-data-source id="films"
  url="https://api.themoviedb.org/3/movie/popular"
  api-key-ref="tmdb"
  transform="results">
</dsfr-data-source>

<dsfr-data-chart source="films" type="bar"
  label-field="title" value-field="vote_average">
</dsfr-data-chart>

Avantage : un seul bloc <script> pour toutes vos cles. Le markup reste propre et copiable sans risque de fuite de token. Compatible avec le mode URL brute et le mode adapter.

Pagination serveur

Avec l'attribut paginate, dsfr-data-source active la pagination cote serveur : chaque changement de page declenche un nouvel appel API. Cela permet de naviguer dans des datasets de plusieurs dizaines de milliers d'enregistrements sans tout charger en memoire.

Tableau pagine cote serveur — Rappels de produits

La pagination est geree par l'API ODS : cliquer sur "page 2" appelle la page suivante cote serveur. Tester dans le Playground

Chargement...

<dsfr-data-source id="data" api-type="opendatasoft"
  dataset-id="rappelconso-v2-gtin-trie"
  base-url="https://data.economie.gouv.fr"
  server-side page-size="20"
  order-by="date_publication:desc">
</dsfr-data-source>

<dsfr-data-list source="data"
  colonnes="modeles_ou_references:Produit, categorie_produit:Categorie, marque_produit:Marque, date_publication:Date"
  server-tri
  pagination="20">
</dsfr-data-list>