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
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 (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.{esm,umd}.js | Tout-en-un | ~107 Ko | ~150 Ko |
dsfr-data-world-map (deprecie depuis la v0.13, epic #402) est retire : utiliser <dsfr-data-chart type="map-monde"> (API cartes unifiee DSFR Chart 2.1).
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, Studio 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
Tout chiffre affiche a un controle. Au-dela des tests unitaires, la bibliotheque est verifiee
numeriquement contre un oracle independant : une seconde implementation, ecrite a part et
qui n'importe rien de la lib, repart des lignes brutes et recalcule en tableaux nus ce que la page
affiche — KPI, graphiques, cartes, tableaux, exports. Un ecart a la precision affichee est un echec,
et chaque controle a ete vu en echec sur un defaut injecte. Deux modes : deterministe sur
fixtures, bloquant sur chaque PR (npm run verif), et vivant contre les vraies API
(npm run verif:live). Le detail — doctrine, grammaire d'un controle, preuves de mutation — est
dans tools/oracle/README.md.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
