dsfr-data-chart - Composants

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

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

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` (requis)
`type`	String	Type de chart : `bar`, `line`, `pie`, `radar`, `gauge`, `scatter`
`label-field`	String	Chemin vers le champ label dans les donnees
`value-field`	String	Chemin vers le champ valeur dans les donnees
`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)
`map-highlight`	String	Departements/regions a surligner
`gauge-value`	Number	Valeur de la jauge 0-100 (type gauge)
`value-field-2`	String	2e serie de valeurs (bar-line)
`value-fields`	String	Series supplementaires separees par virgules
`highlight-index`	String	Indices a mettre en avant : `"[0, 2]"`

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, telechargement CSV, plein ecran, 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 donnees (ex: "INSEE, RP 2021")
`databox-date`	String	Date des donnees (ex: "Mars 2024")
`databox-download`	Boolean	Bouton telechargement CSV
`databox-screenshot`	Boolean	Bouton screenshot PNG
`databox-fullscreen`	Boolean	Bouton plein ecran
`databox-trend`	String	Tendance (ex: "+5.2" ou "-3.1")

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>

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">
</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
Donnees dynamiques	Oui (via dsfr-data-source)	Non (statiques)
Rafraichissement auto	Oui	Non
Transformation donnees	Automatique	Manuelle
Complexite d'usage	Simple	Moyenne