dsfr-data-chart - Composants

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

Ce composant utilise la bibliotheque officielle DSFR Chart tout en beneficiant de la connexion automatique aux sources de données.

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` (requis)
`type`	String	Type de chart : `bar`, `line`, `pie`, `radar`, `gauge`, `scatter`, `bar-line`, `map`, `map-reg`, `map-aca`, `map-monde`
`label-field`	String	Chemin vers le champ label dans les données
`value-field`	String	Chemin vers le champ valeur dans les données
`selected-palette`	String	Palette : `default`, `categorical`, `sequential`, `divergent`
`unit-tooltip`	String	Unite affichee dans les tooltips (%, euro, etc.)
`horizontal`	Boolean	Barres horizontales (bar chart)
`stacked`	Boolean	Barres empilees (bar chart)
`fill`	Boolean	Remplissage plein (pie chart)
`code-field`	String	Champ code : departement/region (map, map-reg), nom d'academie (map-aca), code pays ISO a2/a3/num (map-monde)
`map-highlight`	String	Departements/regions a surligner
`gauge-value`	Number	Valeur de la jauge 0-100 (type gauge)
`value-field-2`	String	2e série de valeurs (bar-line)
`value-fields`	String	Series supplementaires separees par virgules
`series-field`	String	Champ "clé de série" pour données au format long/tidy : chaque valeur distincte devient une série (bar, line, radar). Prioritaire sur `value-fields`
`name`	String	Noms des séries (ex: `'["Série 1", "Série 2"]'`)
`unit-tooltip-bar`	String	Unite des barres dans les tooltips (bar-line uniquement)
`x-min` / `x-max`	String	Bornes de l'axe X
`y-min` / `y-max`	String	Bornes de l'axe Y (line, bar, scatter, bar-line). Pour `type="radar"` : bornes de l'échelle radiale — le centre est fixé à `y-min` au lieu du minimum des données ; anneaux de grille entiers si les deux bornes sont entières avec une amplitude de 1 à 10
`highlight-index`	String	Indices a mettre en avant : `"[0, 2]"`
`reference-lines`	String (JSON)	Lignes de référence (overlay) — graphiques cartésiens uniquement (line, bar, bar-line, scatter). Chaque item : `{ axis: "x"\|"y", value, label?, color?, dash?, position? }`. `axis:"x"` = ligne verticale à une catégorie/date ; `axis:"y"` = ligne horizontale à un seuil. Ex : `reference-lines='[{"axis":"x","value":"2026-02","label":"Lancement","color":"#c9191e","dash":true},{"axis":"y","value":3000,"label":"Objectif"}]'`.
`targets`	String (JSON)	Cibles / objectifs futurs (overlay) — types `line` et `bar-line` uniquement. Chaque item : `{ x (échéance, requis), value (requis), series?, label?, color? }`. L'axe X est étendu automatiquement si l'échéance dépasse les données : trait plein jusqu'au dernier point réel, trajectoire pointillée vers un losange à l'échéance, zone future grisée. Ex : `targets='[{"x":2030,"value":26,"label":"Cible 2030 : 26 %"}]'`.
`targets-zone`	String	Bande grisée + frontière pointillée réalisé/projeté (défaut `"on"`). `"off"` désactive.
`targets-legend`	String	Légende sous le graphe : `""` = libellés par défaut (« Données historiques » / « Trajectoire, cible extrapolée »), `"off"` = masquée, `'["a","b"]'` = personnalisés.

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.

Attribut	Type	Description
`databox`	Boolean	Active l'habillage DataBox DSFR
`databox-title`	String	Titre affiche dans l'en-tete (ex: "Population par region")
`databox-source`	String	Source des données (ex: "INSEE, RP 2021")
`databox-date`	String	Date des données (ex: "Mars 2024")
`databox-download`	Boolean	Bouton téléchargement CSV
`databox-screenshot`	Boolean	Bouton screenshot PNG
`databox-fullscreen`	Boolean	Bouton plein écran
`databox-trend`	String	Tendance (ex: "+5.2" ou "-3.1")
`databox-tooltip-title`	String	Titre du tooltip info
`databox-tooltip-content`	String	Contenu du tooltip info
`databox-modal-title`	String	Titre de la modale
`databox-modal-content`	String	Contenu de la modale
`databox-default-source`	String	Source par défaut dans le selecteur multi-source
`databox-actions`	String (JSON)	Actions personnalisees (ex: `'["Source officielle","Pole emploi"]'`)

Quand databox est active, dsfr-data-a11y ne doit PAS inclure table ni download (DataBox les fournit deja). Conserver uniquement description sur dsfr-data-a11y.

Types de graphiques

1. Graphique en barres verticales

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

2. Graphique en barres horizontales

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

3. Graphique en ligne

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

3b. Lignes de référence (seuil / repère)

L'attribut reference-lines superpose des repères : ligne horizontale à un seuil (axis:"y") ou verticale à une catégorie (axis:"x"), avec un libellé en pastille. Graphiques cartésiens uniquement (line, bar, bar-line, scatter).

<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>

3c. Cibles / objectifs futurs (targets)

L'attribut targets représente un objectif lointain : l'axe X est étendu jusqu'à l'échéance, une trajectoire pointillée relie le dernier point réel à un losange, la zone future est grisée et une légende « Données historiques / Trajectoire, cible extrapolée » est ajoutée. Au survol du losange, un tooltip liste les cibles de toutes les séries à cette échéance. Types line et bar-line uniquement — préférer des labels numériques (axe linéaire : l'écart 2025 → 2030 est proportionnel).

<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>

4. Diagramme circulaire (Pie)

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

5. Graphique radar

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

6. Graphique avec DataBox

<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

Fonctionnalite	dsfr-data-chart	DSFR Chart natif
Données dynamiques	Oui (via dsfr-data-source)	Non (statiques)
Rafraichissement auto	Oui	Non
Transformation données	Automatique	Manuelle
Complexite d'usage	Simple	Moyenne