Wrapper qui connecte les graphiques officiels DSFR Chart au systeme dsfr-data-source pour une alimentation dynamique des données.

Attributs

En attente d'un filtre

Sur une page d'exploration, l'amont peut porter require-where (<dsfr-data-source> ou <dsfr-data-query>) et ne rien émettre tant qu'aucun filtre n'est posé. Le graphique rend alors le texte de idle-message (« Choisissez un filtre pour afficher les données » par défaut) plutôt qu'un cadre vide : aucune requête n'a été faite, ce n'est pas un jeu de résultats vide. Le mécanisme est décrit sur dsfr-data-source.

Couleur fixée par modalité

selected-palette attribue les couleurs dans l'ordre des séries : la même modalité change de couleur dès que le filtrage change l'ordre. Quand une modalité porte une convention (le réalisé en bleu, l'objectif en rouge, un parti politique, un niveau d'alerte), color-map la fixe.

<dsfr-data-chart
  source="budget"
  type="line"
  label-field="mois"
  value-fields="realise,objectif"
  color-map="realise:#000091, objectif:#E1000F">
</dsfr-data-chart>

La modalité est un nom de série pour les courbes et les barres, un libellé de l'axe pour les parts d'un camembert. Les modalités non citées gardent la couleur de la palette : on ne fixe que ce qui doit l'être. Sans effet sur les cartes choroplèthes (type="map" et ses variantes), dont le dégradé est piloté par selected-palette. La même grammaire existe sur dsfr-data-map-layer.

Résumé des cartes

Une carte (type="map" et ses variantes) affiche sous son titre une valeur de synthèse. Par défaut, c'est la moyenne non pondérée des valeurs dessinées : chaque territoire pèse autant, quelle que soit sa taille. Pour un taux, ce n'est pas le taux national. La moyenne des taux de personnels des collèges par département vaut 4,27 %, le taux national 5,6 %. Sur un indicateur homogène, l'écart est faible et passe inaperçu ; sur un indicateur dispersé, il atteint le quart de la valeur, et rien à l'écran ne distingue les deux cas.

<!-- Taux national : moyenne des taux pondérée par l'effectif -->
<dsfr-data-chart
  source="personnels"
  type="map"
  code-field="code_dep"
  value-field="taux_personnels"
  map-summary-weight="nb_eleves">
</dsfr-data-chart>

Choisir l'effectif qui a servi de dénominateur au taux : pondérer un taux par élève par le nombre d'élèves rend exactement le rapport des deux sommes. Quand la valeur nationale est publiée par ailleurs et fait autorité, map-summary-value la reprend telle quelle. Seules les lignes dessinées entrent dans le calcul : une ligne au code géographique invalide ne pèse pas.

map-summary choisit le mode de synthèse, et la première question d'une carte thématique le décide : volume ou taux. Un volume s'additionne (map-summary="sum") — la moyenne d'un nombre de licenciés par département n'est pas un chiffre lisible, et une valeur écrite à la main dans map-summary-value cesse d'être juste au premier filtre. Un taux se pondère (map-summary="weighted"). map-summary="none" retire le chiffre quand l'indicateur ne se résume pas en un nombre — l'en-tête « en France » appartient à DSFR Chart et reste affiché.

<!-- Carte de volumes : le résumé est le total, et il suit les filtres -->
<dsfr-data-chart
  source="licences"
  type="map"
  code-field="code_dep"
  value-field="nb_licences"
  map-summary="sum">
</dsfr-data-chart>

Une somme suppose une partition : chaque territoire compté une fois. Deux lignes portant le même code sont additionnées toutes les deux alors que la carte n'en dessine qu'une — un avertissement console le signale, et il faut agréger en amont (dsfr-data-query group-by="code_dep"). Un mode inconnu, ou weighted sans map-summary-weight, est une erreur de configuration : aucun résumé n'est affiché plutôt qu'un chiffre de repli qui aurait l'air juste.

Le résumé porte sur la colonne value-field telle qu'elle arrive. L'arrondi au centième que la carte applique pour se dessiner ne compte pas — le calcul repart des lignes source. Mais un arrondi posé en amont (dsfr-data-normalize round="champ:1", le réflexe pour une infobulle lisible) réécrit la colonne dans la donnée : la pondération porte alors sur des valeurs arrondies, et le taux national est faux de peu — donc invisible. Mesuré sur les 101 départements d'une fédération sportive : 4,5331 au lieu de 4,5368. map-summary-field désigne la colonne de calcul, distincte de celle qu'on affiche.

<!-- Afficher l'arrondi, calculer sur la valeur brute -->
<dsfr-data-normalize id="n" source="licences"
  compute="lics_pop_aff = round(lics_pop, 1)"></dsfr-data-normalize>
<dsfr-data-chart
  source="n"
  type="map"
  code-field="code_dep"
  value-field="lics_pop_aff"
  map-summary-weight="pop"
  map-summary-field="lics_pop">
</dsfr-data-chart>

Un champ de calcul qu'aucune ligne dessinée ne porte en numérique est une erreur de configuration : aucun résumé n'est affiché, jamais un repli silencieux sur la colonne affichée — qui serait exactement le chiffre faux que l'attribut existe pour éviter.

Attributs DataBox

L'attribut databox active l'habillage DataBox DSFR autour du graphique : cadre editorial avec titre, source, date, switch chart/tableau integre, screenshot PNG, téléchargement CSV, plein écran, tendance.

Événements : le composant n'émet pas d'événement custom ; il participe au data-bridge en consommateur (abonnement à la source, états loading/erreur/vide rendus dans le wrapper).

Types de graphiques

type accepte bar, line, pie, radar, gauge, scatter, bar-line et les quatre cartes choroplèthes map (départements), map-reg (régions), map-aca (académies) et map-monde. Les quatre variantes de carte sont des valeurs de type, pas des composants : elles n'ont pas de page propre et sont documentées dans Graphiques — map-chart, avec les clés géographiques attendues par chacune.

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

<dsfr-data-chart
  source="sites"
  type="bar"
  label-field="ministere"
  value-field="score_rgaa"
  horizontal="true">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="line"
  label-field="nom"
  value-field="score_dsfr"
  unit-tooltip="%">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="line"
  label-field="nom"
  value-field="score_dsfr"
  reference-lines='[{"axis":"y","value":80,"label":"Objectif","color":"#c9191e"}]'>
</dsfr-data-chart>

<dsfr-data-chart
  source="fossiles"
  type="line"
  label-field="annee"
  value-field="part"
  unit-tooltip=" %"
  targets='[{"x":"2030","value":26,"label":"Cible 2030 : 26 %"}]'>
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="pie"
  label-field="ministere"
  value-field="score_rgaa"
  selected-palette="categorical">
</dsfr-data-chart>

<dsfr-data-chart
  source="sites"
  type="radar"
  label-field="ministere"
  value-field="score_rgaa"
  y-min="0"
  y-max="100">
</dsfr-data-chart>

<dsfr-data-chart id="chart" source="data" type="bar"
  label-field="ministere" value-field="score_moyen"
  databox
  databox-title="Score RGAA moyen par ministere"
  databox-source="Referentiel RGAA"
  databox-date="2024"
  databox-download
  databox-screenshot>
</dsfr-data-chart>
<!-- Avec DataBox : pas de table ni download sur a11y -->
<dsfr-data-a11y for="chart" source="data"
  description="Ce graphique montre le score RGAA moyen par ministere.">
</dsfr-data-a11y>

Comparaison : dsfr-data-chart vs DSFR Chart natif