public-html2/parcoursup/components/detail-view.riot

<detail-view>
  <div if={ props.formation } class="detail-card">
    <h2>{ props.formation.nom }</h2>

    <p><b>Établissement :</b> { props.formation.etablissement }</p>
    <p><b>Ville :</b> { props.formation.ville }</p>
    <p><b>Département :</b> { props.formation.departement } - { props.formation.departementLib }</p>
    <p><b>Académie :</b> { props.formation.academie }</p>
    <p><b>Région :</b> { props.formation.region }</p>
    <p><b>Contrat :</b> { props.formation.contrat }</p>

    <hr>

    <h3>Formation</h3>
    <p><b>Filière :</b> { props.formation.filiere }</p>
    <p><b>Sélectivité :</b> { props.formation.selectivite }</p>
    <p><b>Capacité :</b> { props.formation.capacite }</p>
    <p><b>Candidats :</b> { props.formation.candidats }</p>
    <p><b>Admis :</b> { props.formation.admis }</p>
    <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>

    <hr>

    <h3>Profil des admis</h3>

<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>

<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>