République
française
dsfr-data
Documentation — Web Components DSFR pour la dataviz
dsfr-data est une bibliotheque de Web Components pour creer des tableaux de bord et visualisations de données conformes au Design System de l'État (DSFR). Le rendu des graphiques s'appuie sur la bibliotheque officielle DSFR Chart.
Cette bibliotheque s'articule autour de deux types de composants complementaires :
Composants developpes specifiquement pour ce projet. Ils gerent la connexion aux données, les transformations, et l'affichage d'indicateurs. Ils communiquent entre eux via un systeme de data-bridge qui permet de partager les données sans ecrire de JavaScript.
Graphiques provenant de la bibliotheque officielle
DSFR Chart.
Ces composants sont conformes RGAA et respectent la charte graphique de l'État.
Ils peuvent etre utilises directement ou via notre wrapper dsfr-data-chart
pour une alimentation dynamique.
Le pont entre les deux : Le composant <dsfr-data-chart> fait le lien
entre le systeme de données dsfr-data-source et les graphiques DSFR Chart,
permettant de creer des visualisations dynamiques alimentees par une API.
Ces composants gèrent la recuperation, la transformation et l'affichage des données.
Connecteur de données
Recupere les données depuis une API et les distribue aux autres composants.
Normalisation des données
Nettoie et normalise les données : conversion numérique, renommage, trim.
Jointure multi-sources
Joint deux sources de données sur une clé pivot pour enrichir un jeu de données.
Bascule "wide" vers "tidy"
Deplie un tableur ou le temps est dans les noms de colonnes (c2023_01...) en une observation par ligne.
Filtres a facettes
Ajoute des filtres interactifs par facettes sur les données d'une source.
Recherche textuelle
Champ de recherche DSFR qui filtre les données en amont. Se combine avec les facettes.
Affichage dynamique
Genere des cartes, tuiles ou tout motif HTML repetitif a partir d'un template et de données.
Indicateur chiffre
Affiche une valeur clé avec formatage, couleurs conditionnelles et icones.
Podium et classement
Affiche un classement sous forme de podium avec medailles, couleurs et icones personnalisables.
Wrapper graphique
Connecte les graphiques DSFR Chart au systeme de données dynamiques.
Carte interactive
Carte Leaflet multi-couches avec POI, geoshape, cercles, clustering et chargement par viewport.
Accessibilité graphique
Companion d'accessibilité unifie : tableau des données, téléchargement CSV et description textuelle.
Telemetrie declarative
Cible de telemetrie visible et retirable dans le HTML : opt-in declaratif, pendant de proxy-url.
Graphiques officiels conformes au DSFR. Utilisez-les directement ou via dsfr-data-chart pour des données dynamiques.