dsfr-data-context — dashboard à filtre commun

dsfr-data-context orchestre des filtres transverses multi-sources : un seul jeu de contrôles d'UI pilote toutes les vues d'un dashboard. Ici, les rappels de produits RappelConso (DGCCRF) : une liste et un graphique partagent les mêmes filtres catégorie + période, sans une ligne de JavaScript.

Opt-in : sans contexte, chaque dsfr-data-source reste un pipeline autonome. On ne pose le contexte que pour un dashboard multi-vues. Les filtres se combinent en AND (un whereKey stable par filtre) et url-sync permet de partager un lien déjà filtré.

Démo — RappelConso filtré

Catégorie de produit

Mois de publication

N derniers jours

Derniers rappels

Rappels par sous-catégorie

Le code

<!-- 1. Contrôles d'UI natifs (aucune contrainte de structure) -->
<select id="ctx-categorie">...</select>
<input type="month" id="ctx-mois">
<input type="number" id="ctx-jours">

<!-- 2. Le contexte : qui écoute quoi, vers quelles sources -->
<dsfr-data-context id="ctx-rappel" sources="src-rappel-liste src-rappel-graph" url-sync>
  <dsfr-data-context-filter field="categorie_produit" label="Catégorie"
    operator="eq" ui="ctx-categorie"></dsfr-data-context-filter>
  <dsfr-data-context-filter field="date_publication" label="Mois"
    operator="month-of" ui="ctx-mois"></dsfr-data-context-filter>
  <dsfr-data-context-filter field="date_publication" label="Période"
    operator="last-n-days" ui="ctx-jours"></dsfr-data-context-filter>
</dsfr-data-context>

<!-- 3. Récap des filtres actifs (chaque tag est supprimable) -->
<dsfr-data-context-tags for="ctx-rappel"></dsfr-data-context-tags>

<!-- 4. Les vues : des pipelines source → affichage ordinaires -->
<dsfr-data-source id="src-rappel-liste" api-type="opendatasoft" ... server-side></dsfr-data-source>
<dsfr-data-list source="src-rappel-liste" ...></dsfr-data-list>

<dsfr-data-source id="src-rappel-graph" api-type="opendatasoft" ... group-by="..." server-side></dsfr-data-source>
<dsfr-data-chart source="src-rappel-graph" ...></dsfr-data-chart>

Points clés

AND systématique : catégorie + mois se cumulent ; deux filtres sur date_publication restent deux émetteurs distincts (plage = intersection).
Dialectes automatiques : la clause est traduite en ODSQL pour OpenDataSoft, en colon pour Tabular/Grist — le même HTML marche sur les deux.
url-sync : l'état des filtres vit dans l'URL (?categorie_produit=Jouets&date_publication=2026-05) → rechargement et partage de lien. Les bornes dynamiques sérialisent l'intention (« 90 »), jamais les dates résolues.
apply-to (non utilisé ici) : restreint un filtre à un sous-ensemble des sources.

Spécification complète de dsfr-data-context