dsfr-data

Web Components de dataviz (Lit) pour sites gouvernementaux francais, conformes au Systeme de design de l'Etat (DSFR). Connectez vos sources (Huwise/ODS, Tabular, Grist, INSEE Melodi…), composez votre pipeline en balises <dsfr-data-*>, et exportez du HTML pret a integrer.

<dsfr-data-source id="src" api-type="opendatasoft"
  base-url="https://data.economie.gouv.fr" dataset-id="industrie-du-futur" limit="100">
</dsfr-data-source>

<dsfr-data-query id="q" source="src"
  group-by="nom_region" aggregate="nombre_beneficiaires:sum:total" order-by="total:desc">
</dsfr-data-query>

<dsfr-data-chart source="q" type="bar"
  label-field="nom_region" value-field="total" titre="Beneficiaires par region">
</dsfr-data-chart>

Demo interactive et reference complete des composants : bmatge.github.io/dsfr-data/specs

---

Selon votre profil

Vous etes…	Vous voulez…	Allez ici
Integrateur / developpeur web	Coller un widget DSFR sur votre page	Installation ci-dessous + specifications interactives
Utilisateur metier / non-tech	Generer un graphique sans coder via le Builder	Guide utilisateur (parcours interactifs + exemples live)
Operateur / ops	Heberger votre instance dsfr-data	Guide de deploiement
Contributeur	Contribuer au code, comprendre l'architecture	Guide de contribution + Architecture
Decideur / acheteur	Positionnement produit, comparatifs, cibles	Fiche produit
RSSI / equipe securite	Politique de signalement, baseline SCA/DAST	Politique de securite

Installation

CDN (sans build)

Prerequis : le projet doit utiliser le DSFR et DSFR Chart.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/[email protected]/dist/dsfr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/[email protected]/dist/DSFRChart/DSFRChart.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@gouvfr/[email protected]/dist/DSFRChart/DSFRChart.js"></script>
<script src="https://unpkg.com/dsfr-data/dist/dsfr-data.core.umd.js"></script>

npm

npm install dsfr-data

import 'dsfr-data';

Bundles disponibles

Bundle	Contenu	gzip
dsfr-data.core.{esm,umd}.js	Tous les composants sauf cartes (inclut dsfr-data-join)	~61 Ko
dsfr-data.world-map.{esm,umd}.js	dsfr-data-world-map (d3-geo, topojson)	~31 Ko
dsfr-data.map.{esm,umd}.js	dsfr-data-map + dsfr-data-map-layer (Leaflet lazy)	~33 Ko
dsfr-data.{esm,umd}.js	Tout-en-un	~97 Ko

La specification exhaustive de chaque composant (attributs, valeurs, exemples interactifs) est sur bmatge.github.io/dsfr-data/specs — c'est la source de verite.

Heberger votre instance

Le repo embarque une webapp d'edition (Builder, Builder IA, Sources, Playground, Dashboard, Monitoring…) deployable via Docker en deux modes :

• Statique (nginx + localStorage) — usage individuel.
• Serveur (nginx + Express + MariaDB) — multi-utilisateurs, auth JWT, partages, audit.

La procedure complete (Traefik, DNS, secrets, migrations, sauvegarde, diagnostic, validation post-deploiement, checklist securite) est dans docs/DEPLOYMENT.md. La section Configuration self-hosted detaille les 4 scenarios supportes (reference, proxy d'entreprise, reverse externe pour les /*-proxy/, app interne + widgets publics) avec le contrat exhaustif des chemins de proxying.

Developpement rapide

git clone https://github.com/bmatge/dsfr-data.git
cd dsfr-data
npm install
npm run dev           # Vite dev server (port 5173)
npm run test:run      # Tests Vitest
npm run build:all     # Build lib + apps

Pour le detail du monorepo, des conventions, du workflow de release Changesets et de la baseline securite : voir docs/CONTRIBUTING.md.

Documentation

• Specifications interactives des composants
• Guide utilisateur — parcours interactifs + exemples live (HTML)
• Guide utilisateur (markdown) — meme contenu en markdown, navigable depuis GitHub
• Architecture — pipeline, adapters, bundles, build
• Guide de deploiement — Docker, 4 scenarios self-hosted, validation
• Contribuer — monorepo, conventions, release Changesets
• Fiche produit — positionnement, comparatif, cibles
• Politique de securite + baseline — signalement, pipeline CI/CD, defenses

Credits

• Les graphiques et cartes sont rendus par DSFR Chart (@gouvfr/dsfr-chart), la bibliotheque officielle de datavisualisation de l'Etat — merci a ses mainteneurs. dsfr-data se concentre sur la couche donnees (sources, requetes, transformations) et delegue le rendu graphique a DSFR Chart, dont il suit les evolutions (API cartes unifiee level depuis la 2.1).
• Le design et les composants d'interface suivent le Systeme de design de l'Etat (DSFR).
• Dependances tierces detaillees : THIRD-PARTY-LICENSES.

Licence

MIT.