Reglage des prblms de la carte

parcoursup/app.riot

@@ -33,6 +33,7 @@
         hasSearched: false,
         results: [],
         selected: null
+        selectedFormations: []
       },
 
       async launchSearch(query) {
@@ -73,6 +74,24 @@
         })
       },
 
+      addToSelection(index) {
+        const formation = this.state.results[index]
+        const selection = [...this.state.selectedFormations]
+
+        let exists = false
+
+         for (let i = 0; i < selection.length; i++) {
+    if (selection[i].id === formation.id) {
+      exists = true
+    }
+  }
+
+  if (!exists) {
+    selection.push(formation)
+    this.update({ selectedFormations: selection })
+  }
+},
+
       backToList() {
         this.update({
           selected: null

parcoursup/components/detail-view.riot

@@ -22,30 +22,68 @@
     <hr>
 
     <h3>Profil des admis</h3>
-    <p><b>Femmes :</b> { props.formation.pctFemmes }%</p>
-    <p><b>Boursiers :</b> { props.formation.pctBoursiers }%</p>
-    <p><b>Néo-bacheliers :</b> { props.formation.pctNeoBac }%</p>
 
-    <p><b>Bac général :</b> { props.formation.pctGeneral }%</p>
+<div class="chart-container">
-    <p><b>Bac technologique :</b> { props.formation.pctTechno }%</p>
+  <div class="chart-title">Répartition des bacs</div>
-    <p><b>Bac professionnel :</b> { props.formation.pctPro }%</p>
+
+  <table class="charts-css bar show-labels">
+    <tbody>
+      <tr>
+        <th>Général</th>
+        <td style="--size: { props.formation.pctGeneral / 100 }">
+          { props.formation.pctGeneral }%
+        </td>
+      </tr>
+      <tr>
+        <th>Technologique</th>
+        <td style="--size: { props.formation.pctTechno / 100 }">
+          { props.formation.pctTechno }%
+        </td>
+      </tr>
+      <tr>
+        <th>Professionnel</th>
+        <td style="--size: { props.formation.pctPro / 100 }">
+          { props.formation.pctPro }%
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
     <hr>
 
     <h3>Mentions au bac</h3>
-    <p><b>Sans mention :</b> { props.formation.pctSansMention }%</p>
-    <p><b>Assez bien :</b> { props.formation.pctAB }%</p>
-    <p><b>Bien :</b> { props.formation.pctB }%</p>
-    <p><b>Très bien :</b> { props.formation.pctTB }%</p>
-    <p><b>Très bien avec félicitations :</b> { props.formation.pctTBF }%</p>
-
-    <hr>
-
-    <h3>Phase principale</h3>
-    <p><b>Début de phase :</b> { props.formation.pctDebutPhase }% ({ props.formation.admisDebutPhase } admis)</p>
-    <p><b>Date du bac :</b> { props.formation.pctDateBac }% ({ props.formation.admisDateBac } admis)</p>
-    <p><b>Fin de phase :</b> { props.formation.pctFinPhase }% ({ props.formation.admisFinPhase } admis)</p>
 
+<div class="chart-container">
+  <table class="charts-css bar show-labels">
+    <tbody>
+      <tr>
+        <th>Sans mention</th>
+        <td style="--size: { props.formation.pctSansMention / 100 }">
+          { props.formation.pctSansMention }%
+        </td>
+      </tr>
+      <tr>
+        <th>AB</th>
+        <td style="--size: { props.formation.pctAB / 100 }">
+          { props.formation.pctAB }%
+        </td>
+      </tr>
+      <tr>
+        <th>B</th>
+        <td style="--size: { props.formation.pctB / 100 }">
+          { props.formation.pctB }%
+        </td>
+      </tr>
+      <tr>
+        <th>TB</th>
+        <td style="--size: { props.formation.pctTB / 100 }">
+          { props.formation.pctTB }%
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
     <button onclick={ () => props.onback() }>Retour</button>
   </div>
 </detail-view>

parcoursup/components/map-view.riot

@@ -1,13 +1,15 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div id="map"></div>
+    <div class="map" ref="map"></div>
   </div>
 
   <script>
     export default {
       onMounted() {
-        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+        const mapElement = this.$('div[ref="map"]')
+
+        this.map = L.map(mapElement).setView([46.8, 2.5], 6)
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; OpenStreetMap contributors'
@@ -15,10 +17,28 @@
 
         this.markersLayer = L.layerGroup().addTo(this.map)
         this.refreshMarkers()
+
+        // important : Leaflet calcule parfois mal la taille au montage
+        setTimeout(() => {
+          this.map.invalidateSize()
+        }, 100)
       },
 
       onUpdated() {
         this.refreshMarkers()
+
+        if (this.map) {
+          setTimeout(() => {
+            this.map.invalidateSize()
+          }, 50)
+        }
+      },
+
+      onBeforeUnmount() {
+        if (this.map) {
+          this.map.remove()
+          this.map = null
+        }
       },
 
       refreshMarkers() {
@@ -29,11 +49,12 @@
         this.markersLayer.clearLayers()
 
         const points = []
+        const results = this.props.results || []
 
-        for (let i = 0; i < this.props.results.length; i++) {
+        for (let i = 0; i < results.length; i++) {
-          const f = this.props.results[i]
+          const f = results[i]
 
-          if (f.latitude && f.longitude) {
+          if (f.latitude != null && f.longitude != null) {
             const marker = L.marker([f.latitude, f.longitude])
             marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
             marker.addTo(this.markersLayer)

parcoursup/index.html

@@ -6,13 +6,11 @@
     <title>Parcoursup Riot</title>
   
     <link rel="stylesheet" href="./style.css" />
-    <link
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-    />
   
     <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  
   </head>
 <body>
   <app></app>

parcoursup/style.css

@@ -85,13 +85,10 @@ body {
   }
   
   .map-box {
-    border: 1px solid #d8d8d8;
+    overflow: hidden;
-    background: white;
-    border-radius: 8px;
-    padding: 12px;
   }
   
-  #map {
+  .map {
     height: 420px;
     width: 100%;
     border-radius: 6px;
@@ -104,6 +101,15 @@ body {
     border-radius: 8px;
   }
 
+  .chart-container {
+    margin-top: 15px;
+  }
+  
+  .chart-title {
+    margin: 10px 0;
+    font-weight: bold;
+  }
+  
   @media (min-width: 900px) {
     .layout {
       grid-template-columns: 1.2fr 1fr;