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"
  databox databox-title="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/dsfr@1.14.4/dist/dsfr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr-chart@2.1.1/dist/DSFRChart/DSFRChart.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr-chart@2.1.1/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 (ESM)	gzip (UMD)
dsfr-data.core.{esm,umd}.js	Tous les composants sauf cartes (inclut dsfr-data-join)	~70 Ko	~63 Ko
dsfr-data.map.{esm,umd}.js	dsfr-data-map + map-layer + map-popup + map-inset + map-timeline (Leaflet charge dynamiquement : chunks separes en ESM, inclus en UMD)	~35 Ko	~85 Ko
dsfr-data.world-map.{esm,umd}.js	dsfr-data-world-map (d3-geo, topojson) — deprecie, remplace par <dsfr-data-chart type="map-monde">	~30 Ko	~27 Ko
dsfr-data.{esm,umd}.js	Tout-en-un	~107 Ko	~150 Ko

dsfr-data-world-map est deprecie depuis la v0.13 (epic #402) au profit de <dsfr-data-chart type="map-monde"> (API cartes unifiee DSFR Chart 2.1). Retrait prevu au prochain major.

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 carto, Builder IA, Sources, Playground, Dashboard, Favoris, Pipeline helper, Grist widgets, Monitoring, Admin) 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.

Application desktop (retirée)

La cible desktop Tauri est retirée depuis la v0.17 (ADR-070, issue #403) : le produit est web-first (npm + CDN + instance chartsbuilder.miweb.run). Les binaires historiques (macOS/Linux/Windows) restent téléchargeables sur les releases GitHub jusqu'à v0.16.0.

Licence

Licence MIT — comme le DSFR et DSFR Chart.