Composant visuel intermediaire qui affiche des filtres interactifs (facettes) bases sur les valeurs categoriques des donnees.

Visuel et intermediaire : Ce composant affiche des controles de filtre ET redistribue les donnees filtrees aux composants en aval via le systeme d'evenements.

Position dans le pipeline

dsfr-data-source → dsfr-data-normalize → dsfr-data-facets → dsfr-data-chart / dsfr-data-list

Normaliser avant dsfr-data-facets permet d'avoir des valeurs propres et coherentes dans les filtres (pas de doublons dus aux espaces ou casses differentes).

Cas d'usage

Attributs

AttributTypeDefautDescription
idString-Requis. Identifiant de la sortie (donnees filtrees).
sourceString""Requis. ID de la source a ecouter.
fieldsString""Champs a exposer comme facettes (virgule-separes). Vide = auto-detection.
labelsString""Labels custom : "field:Label | field2:Label 2"
max-valuesNumber6Nb de valeurs visibles par facette avant "Voir plus".
disjunctiveString""Champs en mode multi-selection OU (virgule-separes).
sortString"count"Tri des valeurs : count, -count, alpha, -alpha.
searchableString""Champs avec barre de recherche (virgule-separes).
hide-emptyBooleanfalseMasquer les facettes avec une seule valeur.
displayString""Mode d'affichage par facette : "field:select | field2:multiselect". Modes : checkbox (defaut), select, multiselect, radio.
hide-countsBooleanfalseMasquer les compteurs a cote de chaque valeur de facette.
colsString""Colonnage DSFR des facettes. Global : "6" (2 par ligne), "4" (3 par ligne). Par facette : "region:4 | type:6" (defaut fr-col-6 pour les non-specifies).
server-facetsBooleanfalseDeleguer le calcul des facettes au serveur via l'adapter (ODS, Grist). L'attribut fields est requis (pas d'auto-detection).
static-valuesString""Valeurs de facettes pre-calculees (JSON). Affiche les valeurs sans les calculer depuis les donnees, les selections envoient des commandes WHERE a la source. Ex : '{"sexe":["F","M"]}'. Les compteurs sont masques automatiquement.

Logique de filtrage : au sein d'une facette, les selections sont en OU (afficher Paris ou Lyon). Entre facettes differentes, c'est du ET (region = PACA ET type = Commune). Les compteurs se recalculent dynamiquement.

Modes d'affichage :
checkbox (defaut) : checkboxes DSFR dans un fieldset ouvert.
select : liste deroulante DSFR native, selection exclusive.
multiselect : dropdown DSFR avec checkboxes, recherche, "Tout selectionner/deselectionner".
radio : dropdown DSFR avec radio buttons, recherche, selection exclusive.
Le mode select/radio est automatiquement exclusif, multiselect automatiquement disjonctif.

Facettes server-side : Avec une source api-type="opendatasoft" et l'attribut server-side, les valeurs des facettes et les compteurs sont calcules directement par l'API (pas de telechargement complet des donnees). Les exemples ci-dessous utilisent le dataset Prix du controle technique (~133 000 enregistrements) de data.economie.gouv.fr.

Exemple 1 : tableau filtrable avec facettes server-side

Les facettes Region (multiselect), Type de vehicule (select) et Energie (radio) filtrent le tableau des prix du controle technique avec colonnage DSFR (cols="4").

Code

<dsfr-data-source id="src"
  api-type="opendatasoft"
  base-url="https://data.economie.gouv.fr"
  dataset-id="prix-controle-technique"
  server-side
  page-size="10">
</dsfr-data-source>

<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region, cat_vehicule_libelle, cat_energie_libelle"
  labels="nom_region:Region | cat_vehicule_libelle:Type de vehicule | cat_energie_libelle:Energie"
  display="nom_region:multiselect | cat_vehicule_libelle:select | cat_energie_libelle:radio"
  cols="4">
</dsfr-data-facets>

<dsfr-data-list source="filtered"
  colonnes="cct_commune, nom_departement, cat_vehicule_libelle, cat_energie_libelle, prix_visite"
  server-tri
  pagination="10">
</dsfr-data-list>

Exemple 2 : graphique filtre par region

La facette Region en mode multiselect filtre les donnees, puis dsfr-data-query agrege le prix moyen du controle technique par departement pour le graphique en barres.

Code

<dsfr-data-source id="src" api-type="opendatasoft"
  base-url="https://data.economie.gouv.fr"
  dataset-id="prix-controle-technique">
</dsfr-data-source>

<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region"
  labels="nom_region:Region"
  display="nom_region:multiselect"
  sort="alpha">
</dsfr-data-facets>

<dsfr-data-query id="stats" source="filtered"
  group-by="nom_departement"
  aggregate="prix_visite:avg:Prix_moyen"
  order-by="Prix_moyen:desc"
  limit="15">
</dsfr-data-query>

<dsfr-data-chart source="stats" type="bar"
  label-field="nom_departement"
  value-field="Prix_moyen"
  selected-palette="categorical">
</dsfr-data-chart>

Exemple 3 : KPI + carte filtres par region

Un meme dsfr-data-facets alimente a la fois des KPI et une carte. Selectionner des regions met a jour simultanement les indicateurs et la carte departementale.

Code

<dsfr-data-source id="src" api-type="opendatasoft"
  base-url="https://data.economie.gouv.fr"
  dataset-id="prix-controle-technique">
</dsfr-data-source>

<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region"
  labels="nom_region:Region"
  display="nom_region:multiselect"
  sort="alpha">
</dsfr-data-facets>

<!-- KPI sur les donnees filtrees -->
<dsfr-data-kpi source="filtered" valeur="count" label="Centres" format="nombre"></dsfr-data-kpi>
<dsfr-data-kpi source="filtered" valeur="avg:prix_visite" label="Prix moyen" format="euros"></dsfr-data-kpi>

<!-- Carte sur les donnees filtrees et agregees -->
<dsfr-data-query id="stats" source="filtered"
  group-by="code_departement"
  aggregate="prix_visite:avg:prix_moyen">
</dsfr-data-query>

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

Exemple 4 : les 4 modes d'affichage

Quatre facettes avec des modes differents : radio pour l'Energie (dropdown avec radio buttons, selection exclusive), multiselect pour la Region (dropdown avec checkboxes, recherche et "Tout selectionner"), select pour le Type de vehicule (liste deroulante native DSFR), et checkbox (defaut) pour le Departement.

Code

<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="cat_energie_libelle, nom_region, cat_vehicule_libelle, nom_departement"
  labels="cat_energie_libelle:Energie | nom_region:Region | cat_vehicule_libelle:Type | nom_departement:Departement"
  display="cat_energie_libelle:radio | nom_region:multiselect | cat_vehicule_libelle:select"
  max-values="6">
</dsfr-data-facets>

<dsfr-data-list source="filtered"
  colonnes="cct_commune, nom_departement, cat_vehicule_libelle, prix_visite"
  pagination="5">
</dsfr-data-list>

Exemple 5 : masquer les compteurs

L'attribut hide-counts masque les compteurs a cote de chaque valeur de facette, pour un affichage plus epure.

Code

<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region, cat_vehicule_libelle"
  labels="nom_region:Region | cat_vehicule_libelle:Type de vehicule"
  display="nom_region:multiselect | cat_vehicule_libelle:select"
  hide-counts
  cols="6">
</dsfr-data-facets>

Exemple 6 : colonnage DSFR des facettes

L'attribut cols permet de controler la largeur de chaque facette dans la grille DSFR. Ici, Region occupe la moitie (col-6), Type de vehicule un tiers (col-4) et Energie toute la largeur (col-12).

Code

<!-- Colonnage par facette -->
<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region, cat_vehicule_libelle, cat_energie_libelle"
  labels="nom_region:Region | cat_vehicule_libelle:Type | cat_energie_libelle:Energie"
  display="nom_region:multiselect | cat_vehicule_libelle:select"
  cols="nom_region:6 | cat_vehicule_libelle:4 | cat_energie_libelle:12"
  max-values="8">
</dsfr-data-facets>

<!-- Colonnage global (toutes les facettes en col-6) -->
<dsfr-data-facets id="filtered" source="src"
  server-facets
  fields="nom_region, cat_vehicule_libelle, cat_energie_libelle"
  cols="6">
</dsfr-data-facets>