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>