Add map of France on stats page (experimental)

app/views/layouts/application.html.haml

@@ -16,6 +16,7 @@
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "dsfr.module.min.js", type: 'module'
     = javascript_include_tag "dsfr.nomodule.min.js", nomodule: true
+    = javascript_include_tag "https://d3js.org/d3.v7.min.js"
     = javascript_importmap_tags
     = favicon_link_tag "favicon/favicon.ico"
   %body

app/views/stats/index.html.haml

@@ -1,20 +1,63 @@
+.fr-grid-row.fr-grid-row--gutters
+  .fr-col-12.fr-col-md-6
+    .fr-grid-row.fr-grid-row--gutters
+      .fr-col-12
+        .stat
+          %h2 Montant total payé
+          %span.fr-display--xl= number_to_currency(@total_paid)
 
-.stat
-  %h2 Montant total payé
-  %span.fr-display--xl= number_to_currency(@total_paid)
+      .fr-col-12
+        .stat
+          %h2 Nombre total d'élèves payés
+          %span.fr-display--xl= number_with_delimiter(@total_paid_students)
 
-.stat
-  %h2 Nombre total d'élèves payés
-  %span.fr-display--xl= number_with_delimiter(@total_paid_students)
+      .fr-col-12
+        .stat
+          %h2
+            Nombre total de
+            %acronym{title: "Période de formation en milieu professionnel"} PFMPs
+            payées
+          %span.fr-display--xl= number_with_delimiter(@total_paid_pfmps)
 
-.stat
-  %h2
-    Nombre total de
-    %acronym{title: "Période de formation en milieu professionnel"} PFMPs
-    payées
-  %span.fr-display--xl= number_with_delimiter(@total_paid_pfmps)
+      .fr-col-12
+        .stat
+          %h2 Nombre de PFMPs payées par mois
+          = column_chart paid_pfmps_per_month_stats_path, label: "nombre de stages payés"
 
-.stat
-  %h2 Nombre de PFMPs payées par mois
+  .fr-col-12.fr-col-md-6
+    .stat
+      %h2 Répartition géographique des PFMPs
+      #map-container{style: "width: 100%; height: 600px;"}
 
-  = column_chart paid_pfmps_per_month_stats_path, label: "nombre de stages payés"
+:javascript
+  document.addEventListener('DOMContentLoaded', function() {
+    const width = document.getElementById('map-container').offsetWidth;
+    const height = 600;
+
+    const svg = d3.select("#map-container")
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height);
+
+    const projection = d3.geoMercator()
+      .center([2.454071, 46.279229])
+      .scale(2000)
+      .translate([width / 2, height / 2]);
+
+    const path = d3.geoPath()
+      .projection(projection);
+
+    d3.json("/data/academies.geojson").then(function(geojson) {
+      svg.selectAll("path")
+        .data(geojson.features)
+        .enter()
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "#000091")
+        .attr("stroke", "#fff")
+        .attr("stroke-width", 0.5)
+        .attr("opacity", 0.7);
+    }).catch(function(error) {
+      console.error("Error loading the geo file:", error);
+    });
+  });