Reglage des prblms de la carte

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>
-    <p><b>Bac technologique :</b> { props.formation.pctTechno }%</p>
-    <p><b>Bac professionnel :</b> { props.formation.pctPro }%</p>
+<div class="chart-container">
+  <div class="chart-title">Répartition des bacs</div>
+
+  <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++) {
-          const f = this.props.results[i]
+        for (let i = 0; i < results.length; 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)