Skip to content

feat: compléments DSFR Chart 2.1 — playground, docs, visibilité (#402) #405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmatge merged 2 commits into from
Jul 16, 2026
Merged

feat: compléments DSFR Chart 2.1 — playground, docs, visibilité (#402) #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af62811
docs: complète l'audit DSFR Chart 2.1 — types grist, USER-GUIDE, dépr…
bmatge Jul 16, 2026
f67e06f
feat(playground): exemples DSFR Chart 2.1 + visibilité GitHub/npm (#402)
bmatge Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apps/playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
<option value="kpi-barometre">KPI baromètre — titre + évolution (Plan Électrification)</option>
<option value="chart-reference-lines">Ligne + repères — Immatriculations VE</option>
<option value="chart-targets">Ligne + cibles 2030 — Énergies fossiles</option>
<option value="unpivot-series-line">Unpivot + séries — Production par filière</option>
<option value="direct-datalist">Tableau — Maires de France (server-side)</option>
</optgroup>
<optgroup label="Pagination serveur">
Expand Down Expand Up @@ -90,8 +91,13 @@
<option value="server-side-tabular-tri">Tri serveur — Communes (Tabular)</option>
<option value="server-facets-display">Facettes serveur + normalize — Industrie (ODS)</option>
</optgroup>
<optgroup label="Carte du monde (dsfr-data-world-map)">
<option value="direct-worldmap">Carte — PIB par pays</option>
<optgroup label="Cartes DSFR Chart 2.1 (level)">
<option value="direct-map-reg">Carte régions — Population</option>
<option value="direct-map-aca">Carte académies — Effectifs élèves</option>
<option value="direct-map-monde">Carte monde — PIB par pays</option>
</optgroup>
<optgroup label="Carte du monde (dsfr-data-world-map, déprécié)">
<option value="direct-worldmap">Carte — PIB par pays (zoom continent)</option>
</optgroup>
<optgroup label="Carte interactive (dsfr-data-map)">
<option value="map-markers-cluster">Carte — 5000 CT avec clustering + panneau</option>
Expand Down
185 changes: 183 additions & 2 deletions apps/playground/src/examples/examples-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,52 @@ export const examples: Record<string, string> = {
</dsfr-data-chart>
</div>`,

'unpivot-series-line': `<!--
Unpivot + series-field — donnees "wide" → tidy → multi-séries
Pipeline : dsfr-data-source (colonnes par annee) → dsfr-data-unpivot → dsfr-data-chart
Chaque valeur distincte de series-field devient une série du graphique
-->

<div class="fr-container fr-my-4w">
<h2>Production annuelle par filiere (TWh)</h2>
<p class="fr-text--sm fr-text--light">
Données illustratives au format "wide" (une colonne par annee), depliees en format long
</p>

<dsfr-data-source id="wide"
data='[
{"filiere":"Nucleaire","a2022":279,"a2023":320,"a2024":361},
{"filiere":"Hydraulique","a2022":49,"a2023":58,"a2024":74},
{"filiere":"Eolien","a2022":38,"a2023":50,"a2024":45},
{"filiere":"Solaire","a2022":18,"a2023":21,"a2024":24}
]'>
</dsfr-data-source>

<dsfr-data-unpivot id="tidy" source="wide"
id-cols="filiere"
value-cols-pattern="a{YYYY}"
var-name="annee" var-format="{YYYY}"
value-name="twh">
</dsfr-data-unpivot>

<dsfr-data-chart source="tidy"
type="line"
label-field="annee"
value-field="twh"
series-field="filiere"
unit-tooltip=" TWh"
selected-palette="categorical">
</dsfr-data-chart>

<div class="fr-callout fr-mt-4w">
<p class="fr-callout__text">
<strong>dsfr-data-unpivot</strong> deplie les colonnes <code>a2022..a2024</code> en lignes
<code>{filiere, annee, twh}</code> ; <strong>series-field="filiere"</strong> transforme chaque
filiere en série. Une nouvelle colonne d'annee est prise en compte sans changer la config.
</p>
</div>
</div>`,

'direct-datalist': `<!--
Tableau — Maires de France (pagination serveur)
Mode : dsfr-data-source (api-type="tabular", server-side) → dsfr-data-list
Expand Down Expand Up @@ -1363,6 +1409,140 @@ export const examples: Record<string, string> = {
// CARTE DU MONDE — dsfr-data-source → dsfr-data-world-map
// =====================================================================

// =====================================================================
// CARTES DSFR CHART 2.1 — dsfr-data-chart type="map-reg|map-aca|map-monde"
// API cartes unifiee <map-chart level> (DSFR Chart >= 2.1) — #402
// =====================================================================

'direct-map-reg': `<!--
Carte regionale nationale — dsfr-data-chart type="map-reg"
Mode direct : dsfr-data-source (données inline) → dsfr-data-chart
Cles = codes region INSEE (level="reg", DSFR Chart 2.1)
-->

<div class="fr-container fr-my-4w">
<h2>Population par region (millions)</h2>
<p class="fr-text--sm fr-text--light">
Données embarquees — Source : INSEE, estimations 2024 (arrondies)
</p>

<dsfr-data-source id="data"
data='[
{"code":"11","pop":12.4},{"code":"84","pop":8.2},{"code":"93","pop":5.2},
{"code":"75","pop":6.1},{"code":"76","pop":6.1},{"code":"32","pop":6.0},
{"code":"44","pop":5.6},{"code":"52","pop":3.9},{"code":"53","pop":3.4},
{"code":"28","pop":3.3},{"code":"27","pop":2.8},{"code":"24","pop":2.6},
{"code":"94","pop":0.35}
]'>
</dsfr-data-source>

<dsfr-data-chart source="data"
type="map-reg"
code-field="code"
value-field="pop"
name="Population (M)"
unit-tooltip=" M hab."
selected-palette="sequentialAscending">
</dsfr-data-chart>

<div class="fr-callout fr-mt-4w">
<p class="fr-callout__text">
<strong>type="map-reg"</strong> : carte nationale des regions via
<code>&lt;map-chart level="reg"&gt;</code> (DSFR Chart 2.1). Les cles de données
sont les codes region INSEE (<code>11</code>, <code>84</code>...).
</p>
</div>
</div>`,

'direct-map-aca': `<!--
Carte des academies — dsfr-data-chart type="map-aca"
Mode direct : dsfr-data-source (données inline) → dsfr-data-chart
Cles = noms d'academie en MAJUSCULES (level="aca", DSFR Chart 2.1)
-->

<div class="fr-container fr-my-4w">
<h2>Effectifs eleves par academie (milliers)</h2>
<p class="fr-text--sm fr-text--light">
Données illustratives — ordres de grandeur MENJ
</p>

<dsfr-data-source id="data"
data='[
{"aca":"VERSAILLES","n":1120},{"aca":"CRETEIL","n":980},{"aca":"LILLE","n":810},
{"aca":"LYON","n":640},{"aca":"NANTES","n":600},{"aca":"TOULOUSE","n":520},
{"aca":"BORDEAUX","n":560},{"aca":"RENNES","n":540},{"aca":"MONTPELLIER","n":480},
{"aca":"AIX-MARSEILLE","n":500},{"aca":"STRASBOURG","n":320},{"aca":"PARIS","n":300},
{"aca":"NICE","n":330},{"aca":"NANCY-METZ","n":370},{"aca":"ORLEANS-TOURS","n":410}
]'>
</dsfr-data-source>

<dsfr-data-chart source="data"
type="map-aca"
code-field="aca"
value-field="n"
name="Eleves (k)"
unit-tooltip=" k eleves"
selected-palette="sequentialAscending">
</dsfr-data-chart>

<div class="fr-callout fr-mt-4w">
<p class="fr-callout__text">
<strong>type="map-aca"</strong> : carte des academies via
<code>&lt;map-chart level="aca"&gt;</code> (DSFR Chart 2.1). Les cles de données
sont les noms d'academie en majuscules (<code>PARIS</code>, <code>LYON</code>...).
</p>
</div>
</div>`,

'direct-map-monde': `<!--
Carte mondiale — dsfr-data-chart type="map-monde"
Mode direct : dsfr-data-source (données inline) → dsfr-data-chart
Cles = codes pays ISO 3166-1 : alpha-2, alpha-3 OU numeriques
(convertis automatiquement en alpha-2 — level="monde", DSFR Chart 2.1)
-->

<div class="fr-container fr-my-4w">
<h2>PIB par pays (milliards USD)</h2>
<p class="fr-text--sm fr-text--light">
Données embarquees — Source : Banque mondiale (extrait).
Les codes melangent volontairement alpha-3 (USA), alpha-2 (CN) et numerique (250)
pour illustrer la conversion automatique.
</p>

<dsfr-data-source id="data"
data='[
{"code":"USA","pib":25462},{"code":"CN","pib":17963},{"code":"JPN","pib":4231},
{"code":"276","pib":4072},{"code":"GB","pib":3070},{"code":"IND","pib":3385},
{"code":"250","pib":2783},{"code":"IT","pib":2010},{"code":"CAN","pib":2139},
{"code":"KR","pib":1665},{"code":"BRA","pib":1920},{"code":"AU","pib":1675},
{"code":"MX","pib":1293},{"code":"ESP","pib":1397},{"code":"ID","pib":1319},
{"code":"SAU","pib":1108},{"code":"NL","pib":991},{"code":"TR","pib":906},
{"code":"CHE","pib":818},{"code":"PL","pib":688},{"code":"SE","pib":586},
{"code":"BEL","pib":578},{"code":"NO","pib":579},{"code":"AR","pib":632},
{"code":"NGA","pib":477},{"code":"AT","pib":471},{"code":"ZA","pib":405},
{"code":"THA","pib":495},{"code":"EG","pib":476},{"code":"DK","pib":395}
]'>
</dsfr-data-source>

<dsfr-data-chart source="data"
type="map-monde"
code-field="code"
value-field="pib"
name="PIB"
unit-tooltip=" Mds USD"
selected-palette="sequentialAscending">
</dsfr-data-chart>

<div class="fr-callout fr-mt-4w">
<p class="fr-callout__text">
<strong>type="map-monde"</strong> : carte mondiale native via
<code>&lt;map-chart level="monde"&gt;</code> (DSFR Chart 2.1) — remplace
<code>dsfr-data-world-map</code> (deprecie). Les codes alpha-3 et numeriques
sont convertis automatiquement en alpha-2.
</p>
</div>
</div>`,

'direct-worldmap': `<!--
Carte du monde — PIB par pays (données embarquees)
Mode direct : dsfr-data-source (données inline) → dsfr-data-world-map
Expand Down Expand Up @@ -1408,8 +1588,9 @@ export const examples: Record<string, string> = {

<div class="fr-callout fr-mt-4w">
<p class="fr-callout__text">
<strong>dsfr-data-world-map</strong> : carte du monde choropleth avec zoom interactif par continent.
Cliquer sur un pays pour zoomer sur son continent, cliquer a nouveau pour revenir a la vue monde.
<strong>dsfr-data-world-map</strong> (deprecie) : carte du monde choropleth avec zoom interactif
par continent. Preferer <code>dsfr-data-chart type="map-monde"</code> (DSFR Chart 2.1) sauf besoin
du zoom continent — retrait prevu a la prochaine version majeure.
</p>
</div>
</div>`,
Expand Down
9 changes: 9 additions & 0 deletions docs/USER-GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,15 @@ Les donnees de la source sont transmises directement au composant de visualisati
</dsfr-data-chart>
```

Quatre decoupages de carte sont disponibles (API cartes unifiee [DSFR Chart](https://github.com/GouvernementFR/dsfr-chart) 2.1) :

| `type` | Decoupage | Cles attendues (`code-field`) |
|--------|-----------|-------------------------------|
| `map` | Departements | Code INSEE (`01`-`95`, `2A`, `2B`, `971`-`976`) |
| `map-reg` | Regions | Code region INSEE (`11`, `84`...) |
| `map-aca` | Academies | Nom en majuscules (`PARIS`, `LYON`...) |
| `map-monde` | Monde | Code pays ISO 3166-1 (alpha-2 `FR`, alpha-3 `FRA` ou numerique `250` — convertis automatiquement) |

#### KPI — Indicateurs Industrie du futur

```html
Expand Down
81 changes: 48 additions & 33 deletions e2e/playground-examples.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@ test.beforeAll(() => {
mkdirSync(SCREENSHOT_DIR, { recursive: true });
});

// Le tour guide (product-tour) demarre automatiquement sur un profil vierge et
// son overlay intercepte les clics (#run-btn) → on le desactive globalement
// avant le chargement de chaque page.
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
window.localStorage.setItem('dsfr-data-tours', JSON.stringify({ disabled: true, tours: {} }));
});
});

// ===================================================================
// Structural tests
// ===================================================================
Expand Down Expand Up @@ -52,49 +61,53 @@ test.describe('Playground — structure', () => {
/** Map of example keys to their expected main visual widget tag */
const EXAMPLES: Record<string, { widget: string; usesApi: boolean }> = {
// Direct
'direct-bar': { widget: 'dsfr-data-chart', usesApi: true },
'direct-kpi': { widget: 'dsfr-data-kpi', usesApi: true },
'direct-datalist': { widget: 'dsfr-data-list', usesApi: true },
'direct-bar': { widget: 'dsfr-data-chart', usesApi: true },
'direct-kpi': { widget: 'dsfr-data-kpi', usesApi: true },
'direct-datalist': { widget: 'dsfr-data-list', usesApi: true },
// Pagination serveur
'server-paginate-datalist': { widget: 'dsfr-data-list', usesApi: true },
'server-paginate-display': { widget: 'dsfr-data-display', usesApi: true },
'paginate-kpi-global': { widget: 'dsfr-data-list', usesApi: true },
'server-paginate-datalist': { widget: 'dsfr-data-list', usesApi: true },
'server-paginate-display': { widget: 'dsfr-data-display', usesApi: true },
'paginate-kpi-global': { widget: 'dsfr-data-list', usesApi: true },
// Query
'query-bar': { widget: 'dsfr-data-chart', usesApi: true },
'query-pie': { widget: 'dsfr-data-chart', usesApi: true },
'query-map': { widget: 'dsfr-data-chart', usesApi: true },
'query-bar': { widget: 'dsfr-data-chart', usesApi: true },
'query-pie': { widget: 'dsfr-data-chart', usesApi: true },
'query-map': { widget: 'dsfr-data-chart', usesApi: true },
// Normalize
'normalize-bar': { widget: 'dsfr-data-chart', usesApi: true },
'normalize-pie': { widget: 'dsfr-data-chart', usesApi: true },
'normalize-datalist': { widget: 'dsfr-data-list', usesApi: true },
'normalize-bar': { widget: 'dsfr-data-chart', usesApi: true },
'normalize-pie': { widget: 'dsfr-data-chart', usesApi: true },
'normalize-datalist': { widget: 'dsfr-data-list', usesApi: true },
// Display
'direct-display': { widget: 'dsfr-data-display', usesApi: true },
'query-display': { widget: 'dsfr-data-display', usesApi: true },
'normalize-display': { widget: 'dsfr-data-display', usesApi: true },
'direct-display': { widget: 'dsfr-data-display', usesApi: true },
'query-display': { widget: 'dsfr-data-display', usesApi: true },
'normalize-display': { widget: 'dsfr-data-display', usesApi: true },
// Search
'search-datalist': { widget: 'dsfr-data-list', usesApi: true },
'search-display': { widget: 'dsfr-data-display', usesApi: true },
'search-kpi-chart': { widget: 'dsfr-data-chart', usesApi: true },
'search-datalist': { widget: 'dsfr-data-list', usesApi: true },
'search-display': { widget: 'dsfr-data-display', usesApi: true },
'search-kpi-chart': { widget: 'dsfr-data-chart', usesApi: true },
// Facets
'facets-datalist': { widget: 'dsfr-data-list', usesApi: true },
'facets-bar': { widget: 'dsfr-data-chart', usesApi: true },
'facets-map': { widget: 'dsfr-data-chart', usesApi: true },
'facets-datalist': { widget: 'dsfr-data-list', usesApi: true },
'facets-bar': { widget: 'dsfr-data-chart', usesApi: true },
'facets-map': { widget: 'dsfr-data-chart', usesApi: true },
// Server-side
'server-side-ods': { widget: 'dsfr-data-display', usesApi: true },
'server-side-tabular-tri': { widget: 'dsfr-data-list', usesApi: true },
'server-facets-display': { widget: 'dsfr-data-display', usesApi: true },
'server-side-ods': { widget: 'dsfr-data-display', usesApi: true },
'server-side-tabular-tri': { widget: 'dsfr-data-list', usesApi: true },
'server-facets-display': { widget: 'dsfr-data-display', usesApi: true },
// Databox
'direct-bar-databox': { widget: 'dsfr-data-chart', usesApi: true },
'direct-line-databox': { widget: 'dsfr-data-chart', usesApi: true },
'direct-bar-databox': { widget: 'dsfr-data-chart', usesApi: true },
'direct-line-databox': { widget: 'dsfr-data-chart', usesApi: true },
// Join
'join-basic': { widget: 'dsfr-data-chart', usesApi: false },
'join-query': { widget: 'dsfr-data-chart', usesApi: false },
'join-basic': { widget: 'dsfr-data-chart', usesApi: false },
'join-query': { widget: 'dsfr-data-chart', usesApi: false },
// World map (inline data)
'direct-worldmap': { widget: 'dsfr-data-world-map', usesApi: false },
'direct-map-reg': { widget: 'dsfr-data-chart', usesApi: false },
'direct-map-aca': { widget: 'dsfr-data-chart', usesApi: false },
'direct-map-monde': { widget: 'dsfr-data-chart', usesApi: false },
'unpivot-series-line': { widget: 'dsfr-data-chart', usesApi: false },
'direct-worldmap': { widget: 'dsfr-data-world-map', usesApi: false },
// Map (Leaflet)
'map-markers-cluster': { widget: 'dsfr-data-map', usesApi: false },
'map-circles-proportional': { widget: 'dsfr-data-map', usesApi: false },
'map-multi-layer': { widget: 'dsfr-data-map', usesApi: false },
'map-markers-cluster': { widget: 'dsfr-data-map', usesApi: false },
'map-circles-proportional': { widget: 'dsfr-data-map', usesApi: false },
'map-multi-layer': { widget: 'dsfr-data-map', usesApi: false },
};

test.describe('Playground — examples', () => {
Expand Down Expand Up @@ -132,7 +145,9 @@ test.describe('Playground — examples', () => {
if (usesApi) {
// Soft-fail for API-dependent examples (network may be slow/unavailable)
if (sourceCount === 0) {
console.warn(`[WARN] ${key}: dsfr-data-source not found in iframe (API may be unavailable)`);
console.warn(
`[WARN] ${key}: dsfr-data-source not found in iframe (API may be unavailable)`
);
}
if (widgetCount === 0) {
console.warn(`[WARN] ${key}: ${widget} not found in iframe (API may be unavailable)`);
Expand Down
10 changes: 10 additions & 0 deletions guide/guide-exemples-world-map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,16 @@ <h1><i class="fr-mr-1w"></i>Dashboard Commerce - API Huwise</h1>
et <code>dsfr-data-source</code> avec agregation server-side OpenDataSoft.
</p>

<div class="fr-callout fr-callout--brown-caramel fr-mt-2w">
<p class="fr-callout__title">Composant déprécié</p>
<p class="fr-callout__text">
Depuis <a href="https://github.com/GouvernementFR/dsfr-chart" target="_blank" rel="noopener">DSFR Chart</a> 2.1,
préférez <code>&lt;dsfr-data-chart type="map-monde"&gt;</code> (carte mondiale native, sans bundle
supplémentaire). <code>dsfr-data-world-map</code> sera retiré dans une prochaine version majeure —
cette page reste utile si le zoom continent interactif est requis.
</p>
</div>

<div class="fr-callout fr-callout--blue-france fr-mt-2w">
<p class="fr-callout__text">
<strong>dsfr-data-world-map :</strong> Ce composant affiche une carte choropleth
Expand Down
4 changes: 3 additions & 1 deletion guide/guide-grist-widgets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,10 @@ <h3>Types de visualisation</h3>
<tr><td><code>scatter</code></td><td>Nuage de points</td></tr>
<tr><td><code>gauge</code></td><td>Jauge de progression</td></tr>
<tr><td><code>bar-line</code></td><td>Barres + lignes combines</td></tr>
<tr><td rowspan="2">Cartes</td><td><code>map</code></td><td>Carte de France par departements</td></tr>
<tr><td rowspan="4">Cartes</td><td><code>map</code></td><td>Carte de France par departements</td></tr>
<tr><td><code>map-reg</code></td><td>Carte de France par regions</td></tr>
<tr><td><code>map-aca</code></td><td>Carte de France par academies (noms en majuscules)</td></tr>
<tr><td><code>map-monde</code></td><td>Carte mondiale par pays (codes ISO 3166-1)</td></tr>
<tr><td>KPI</td><td><code>kpi</code></td><td>Indicateur cle de performance (valeur agregee)</td></tr>
</tbody>
</table>
Expand Down
Loading
Loading