dsfr-data-query

dsfr-data-query filtre, regroupe et agrege les donnees avant de les transmettre aux composants de visualisation. Supporte group-by, aggregate, filter, order-by et limit.

Reference API complete (attributs, operateurs, methodes)

dsfr-data-source + dsfr-data-query

dsfr-data-source est le connecteur de donnees : il recupere du JSON depuis n'importe quelle API REST ou API connue (api-type="opendatasoft", tabular, grist) avec pagination automatique, proxy CORS et support headers pour les jeux prives.

dsfr-data-query est une couche de transformation pure : il ecoute une source existante et filtre, groupe, agrege et trie les donnees cote client. Il ne fetche jamais directement — il se branche toujours sur un dsfr-data-source.

Barres — Beneficiaires agreges par region

Regroupe par region et somme les beneficiaires avec group-by + aggregate. 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-query id="q" source="data"
  group-by="nom_region"
  aggregate="nombre_beneficiaires:sum:beneficiaires"
  order-by="beneficiaires:desc" limit="10">
</dsfr-data-query>

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

Variation : tri ascendant

Le meme graphique avec order-by="beneficiaires:asc" au lieu de :desc — les barres sont inversees.

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-query id="q" source="data"
  group-by="nom_region"
  aggregate="nombre_beneficiaires:sum:beneficiaires"
  order-by="beneficiaires:asc" limit="10">
</dsfr-data-query>

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

Courbe — Taux moyen TFB par region

Calcule la moyenne du taux de taxe fonciere par region. 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"></dsfr-data-source>

<dsfr-data-query id="q" source="data"
  group-by="libreg"
  aggregate="taux_global_tfb:avg:taux_moyen"
  order-by="taux_moyen:desc">
</dsfr-data-query>

<dsfr-data-chart source="q" type="line"
  label-field="libreg" value-field="taux_moyen" unit-tooltip="%">
</dsfr-data-chart>

Camembert — Rappels par categorie de produit

Compte les rappels par categorie de produit via count. Tester dans le Playground

Chargement...

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

<dsfr-data-query id="q" source="src"
  group-by="categorie_produit"
  aggregate="libelle:count:nombre"
  order-by="nombre:desc" limit="8">
</dsfr-data-query>

<dsfr-data-chart source="q" type="pie"
  label-field="categorie_produit"
  value-field="nombre">
</dsfr-data-chart>

Variation : top 4 vs top 8

Reduire limit de 8 a 4 concentre le camembert sur les categories principales.

Chargement...

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

<dsfr-data-query id="q" source="src"
  group-by="categorie_produit"
  aggregate="libelle:count:nombre"
  order-by="nombre:desc" limit="4">
</dsfr-data-query>

<dsfr-data-chart source="q" type="pie"
  label-field="categorie_produit"
  value-field="nombre">
</dsfr-data-chart>

Radar — Investissement moyen par region

Calcule l'investissement moyen par region (limite a 6 pour lisibilite). 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-query id="q" source="data"
  group-by="nom_region"
  aggregate="montant_investissement:avg:investissement"
  limit="6">
</dsfr-data-query>

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

Jauge — Taux moyen TFB regional

Calcule la moyenne du taux de taxe fonciere par region, trie par taux decroissant et affiche le plus eleve (limit=1). Les taux TFB varient de 30 a 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"></dsfr-data-source>

<dsfr-data-query id="q" source="data"
  group-by="libreg"
  aggregate="taux_global_tfb:avg:taux_moyen"
  order-by="taux_moyen:desc" limit="1">
</dsfr-data-query>

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

Nuage — TFB vs TH par departement

Double agregation : moyenne TFB (axe X) et TH (axe Y) par departement. 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"></dsfr-data-source>

<dsfr-data-query id="q" source="data"
  group-by="libdep"
  aggregate="taux_global_tfb:avg:tfb, taux_global_th:avg:th"
  limit="30">
</dsfr-data-query>

<dsfr-data-chart source="q" type="scatter"
  label-field="tfb" value-field="th">
</dsfr-data-chart>

Barres + ligne — TFB et TH par region

Barres pour le TFB moyen et ligne pour le TH moyen, combines via value-field-2. 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"></dsfr-data-source>

<dsfr-data-query id="q" source="data"
  group-by="libreg"
  aggregate="taux_global_tfb:avg:tfb, taux_global_th:avg:th"
  order-by="tfb:desc">
</dsfr-data-query>

<dsfr-data-chart source="q" type="bar-line"
  label-field="libreg" value-field="tfb" value-field-2="th"
  name='["Taxe fonciere (TFB)", "Taxe habitation (TH)"]'
  unit-tooltip="%">
</dsfr-data-chart>

Carte — Taux TFB par departement

Moyenne du taux TFB par code departement, affichee sur la carte de France. 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"></dsfr-data-source>

<dsfr-data-query id="q" source="data"
  group-by="dep"
  aggregate="taux_global_tfb:avg:taux">
</dsfr-data-query>

<dsfr-data-chart source="q" type="map"
  code-field="dep" value-field="taux"
  selected-palette="sequentialAscending">
</dsfr-data-chart>

Variation : max vs avg

Remplace avg par max dans l'agregation pour voir le taux maximal par departement au lieu de la moyenne.

Chargement...

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

<dsfr-data-query id="q" source="data"
  group-by="dep"
  aggregate="taux_global_tfb:max:taux">
</dsfr-data-query>

<dsfr-data-chart source="q" type="map"
  code-field="dep" value-field="taux"
  selected-palette="sequentialAscending">
</dsfr-data-chart>

KPI — Statistiques des rappels avec filtre

Compare le nombre total de rappels au nombre de rappels alimentaires via filter. Tester dans le Playground

Chargement...

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

<dsfr-data-query id="q-alim" source="src"
  filter="categorie_produit:contains:Aliment">
</dsfr-data-query>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
  <dsfr-data-kpi source="src" valeur="count"
    label="Total des rappels" format="nombre"></dsfr-data-kpi>
  <dsfr-data-kpi source="q-alim" valeur="count"
    label="Dont alimentaires" format="nombre" couleur="bleu"></dsfr-data-kpi>
</div>

Variation : filtres combines

Combine deux filtres avec , (logique ET) : ne garder que les rappels alimentaires contenant "lait".

Chargement...

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

<dsfr-data-query id="q-combine" source="src"
  filter="categorie_produit:contains:Aliment, sous_categorie_produit:contains:Lait">
</dsfr-data-query>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
  <dsfr-data-kpi source="src" valeur="count"
    label="Total des rappels" format="nombre"></dsfr-data-kpi>
  <dsfr-data-kpi source="q-combine" valeur="count"
    label="Alimentaires (Lait)" format="nombre" couleur="bleu"></dsfr-data-kpi>
</div>

Tableau — Rappels filtres par categorie

Filtre les rappels alimentaires et affiche le resultat dans un tableau interactif. Tester dans le Playground

Chargement...

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

<dsfr-data-query id="q" source="src"
  filter="categorie_produit:contains:Aliment">
</dsfr-data-query>

<dsfr-data-list source="q"
  colonnes="modeles_ou_references:Produit, marque_produit:Marque, sous_categorie_produit:Sous-categorie"
  recherche="true" tri="modeles_ou_references:asc" pagination="10" export="csv">
</dsfr-data-list>

Variation : operateur in pour plusieurs categories

Utilise filter="categorie_produit:in:Alimentation|Habitat" pour selectionner plusieurs categories avec le separateur |.

Chargement...

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

<dsfr-data-query id="q" source="src"
  filter="categorie_produit:in:Alimentation|Habitat">
</dsfr-data-query>

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

Multi-page ODS

Avec api-type="opendatasoft" et server-side page-size="100", dsfr-data-source charge les donnees page par page (ici 100 records) avant de transmettre a dsfr-data-query. Cela permet de faire un camembert ou un KPI sur un volume significatif de donnees.

Camembert — Rappels par categorie (dataset complet)

Charge les rappels de produits, puis compte par categorie de produit. Tester dans le Playground

Chargement...

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

<dsfr-data-query id="q" source="src"
  group-by="categorie_produit"
  aggregate="libelle:count:nombre"
  order-by="nombre:desc" limit="10">
</dsfr-data-query>

<dsfr-data-chart source="q" type="pie"
  label-field="categorie_produit"
  value-field="nombre"
  selected-palette="categorical">
</dsfr-data-chart>

Pagination serveur + KPI globaux

Quand dsfr-data-source server-side est actif, les composants en aval ne voient que la page courante. Les KPI calcules sur une seule page sont trompeurs. La solution : utiliser deux sources — une dsfr-data-source server-side pour la navigation + une dsfr-data-source avec page-size eleve pour les KPI globaux.

Double source — Navigation paginee + KPI sur un volume etendu

Le datalist navigue page par page. Les KPI calculent les statistiques globales via une seconde source ODS avec page-size plus eleve. Tester dans le Playground

Chargement...

<!-- Source 1 : pagination serveur pour la navigation -->
<dsfr-data-source id="browse" 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>

<!-- Source 2 : chargement etendu pour les KPI globaux -->
<dsfr-data-source id="stats-src" api-type="opendatasoft"
  dataset-id="rappelconso-v2-gtin-trie"
  base-url="https://data.economie.gouv.fr"
  server-side page-size="100">
</dsfr-data-source>

<dsfr-data-query id="global-stats" source="stats-src"
  aggregate="libelle:count:total">
</dsfr-data-query>

<dsfr-data-query id="global-alim" source="stats-src"
  filter="categorie_produit:contains:Aliment"
  aggregate="libelle:count:total_alim">
</dsfr-data-query>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
  <dsfr-data-kpi source="global-stats" valeur="sum:total"
    label="Total des rappels" format="nombre"></dsfr-data-kpi>
  <dsfr-data-kpi source="global-alim" valeur="sum:total_alim"
    label="Dont alimentaires" format="nombre" couleur="bleu"></dsfr-data-kpi>
</div>

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

Mode server-side

Avec server-side, dsfr-data-source ne charge qu'une page a la fois et ecoute les commandes des composants en aval (pagination, recherche, tri). C'est utile pour les gros datasets ou la recherche full-text doit etre deleguee au serveur.

Quand utiliser server-side ? En mode normal, dsfr-data-source charge tous les records disponibles. Si le dataset est volumineux, ou si vous avez besoin de recherche full-text serveur, utilisez server-side.

Recherche serveur — Rappels de produits (ODS)

Utilise dsfr-data-source server-side + dsfr-data-search server-search pour rechercher dans le dataset RappelConso. Tester dans le Playground

Chargement...

<dsfr-data-source id="q" 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-search id="s" source="q"
  server-search
  placeholder="Rechercher un produit..."
  url-search-param="q" url-sync
  count>
</dsfr-data-search>

<dsfr-data-display source="q" cols="1" pagination="10"
  url-sync url-page-param="page">
  <template>
    <div class="fr-card fr-card--horizontal fr-card--sm fr-mb-2w">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{modeles_ou_references}}</h3>
          <p class="fr-card__desc">
            <strong>{{categorie_produit}}</strong> — {{marque_produit}}<br>
            Publie le {{date_publication}}
          </p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

Tri serveur — Rappels de produits (ODS)

Utilise dsfr-data-source server-side + dsfr-data-list server-tri pour trier cote serveur. Tester dans le Playground

Chargement...

<dsfr-data-source id="q" 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="q"
  colonnes="modeles_ou_references:Produit, categorie_produit:Categorie, marque_produit:Marque, date_publication:Date"
  server-tri
  pagination="20"
  url-sync>
</dsfr-data-list>

Datasets prives (headers)

L'attribut headers permet de passer des headers HTTP (API key, Bearer token) pour acceder a des datasets prives ou proteges. Il accepte un objet JSON en chaine de caracteres. Cet attribut est disponible sur dsfr-data-source en mode opendatasoft et tabular.

Securite : les headers sont visibles dans le code source HTML. Ne les utilisez que pour des cles a acces restreint (lecture seule) ou dans des contextes proteges (intranet, applications internes).

Dataset prive ODS avec API key

Passe une apikey via dsfr-data-source headers pour acceder a un dataset prive sur une instance OpenDataSoft.

<dsfr-data-source id="src" api-type="opendatasoft"
  dataset-id="mon-dataset-prive"
  base-url="https://mon-instance.opendatasoft.com"
  headers='{"apikey":"votre-cle-api"}'>
</dsfr-data-source>

<dsfr-data-query id="q" source="src"
  group-by="region"
  aggregate="population:sum:total"
  order-by="total:desc">
</dsfr-data-query>

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