429 lines
14 KiB
Plaintext
429 lines
14 KiB
Plaintext
<detail-view>
|
|
<div if={ props.formation } class="detail-page">
|
|
<h2>Formation</h2>
|
|
<h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
|
|
<div class="formation-meta">
|
|
<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>{ props.formation.contrat }</p>
|
|
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
|
</div>
|
|
|
|
<div class="detail-grid">
|
|
<div>
|
|
<h2>Phase principale d'admission</h2>
|
|
<table class="detail-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Bac</th>
|
|
<th>Voeux</th>
|
|
<th>Classés</th>
|
|
<th>Propositions</th>
|
|
<th>Acceptés</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Gén</td>
|
|
<td>{ props.formation.voePPGeneral }</td>
|
|
<td>{ props.formation.classesPPGeneral }</td>
|
|
<td>{ props.formation.propositionsPPGeneral }</td>
|
|
<td>{ props.formation.acceptesPPGeneral }</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Techno</td>
|
|
<td>{ props.formation.voePPTechno }</td>
|
|
<td>{ props.formation.classesPPTechno }</td>
|
|
<td>{ props.formation.propositionsPPTechno }</td>
|
|
<td>{ props.formation.acceptesPPTechno }</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pro</td>
|
|
<td>{ props.formation.voePPPro }</td>
|
|
<td>{ props.formation.classesPPPro }</td>
|
|
<td>{ props.formation.propositionsPPPro }</td>
|
|
<td>{ props.formation.acceptesPPPro }</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Autres</td>
|
|
<td>{ props.formation.voePPAutres }</td>
|
|
<td>{ props.formation.classesPPAutres }</td>
|
|
<td>{ props.formation.propositionsPPAutres }</td>
|
|
<td>{ props.formation.acceptesPPAutres }</td>
|
|
</tr>
|
|
<tr class="total-row">
|
|
<td>Total</td>
|
|
<td>{ props.formation.voePPTotal }</td>
|
|
<td>{ props.formation.classesPPTotal }</td>
|
|
<td>{ props.formation.propositionsPPTotal }</td>
|
|
<td>{ props.formation.acceptesPPTotal }</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="timeline-box">
|
|
<h3>Vitesse de remplissage</h3>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<b>Ouverture 30 mai</b><br />
|
|
{ props.formation.pctDebutPhase }%
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<b>16 juin</b><br />
|
|
{ props.formation.pctDateBac }%
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<b>11 juillet</b><br />
|
|
{ props.formation.pctFinPhase }%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Phase complémentaire d'admission</h2>
|
|
<table class="detail-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Bac</th>
|
|
<th>Voeux</th>
|
|
<th>Classés</th>
|
|
<th>Propositions</th>
|
|
<th>Acceptés</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Gén</td>
|
|
<td>{ props.formation.voePCGeneral }</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Techno</td>
|
|
<td>{ props.formation.voePCTechno }</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pro</td>
|
|
<td>{ props.formation.voePCPro }</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Autres</td>
|
|
<td>{ props.formation.voePCAutres }</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr class="total-row">
|
|
<td>Total</td>
|
|
<td>{ props.formation.voePCTotal }</td>
|
|
<td>{ props.formation.classesPCTotal }</td>
|
|
<td>{ props.formation.acceptesPCTotal }</td>
|
|
<td>{ props.formation.acceptesPCTotal }</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
|
|
|
|
<h2 class="charts-heading">Profil des admis</h2>
|
|
|
|
<div class="charts-section">
|
|
<div class="chart-wrapper">
|
|
<h3>Répartition par type de bac</h3>
|
|
<div id="chart-bac" ref="graphBac"></div>
|
|
</div>
|
|
|
|
<div class="chart-wrapper">
|
|
<h3>Mentions au bac des admis</h3>
|
|
<div id="chart-mentions" ref="graphMentions"></div>
|
|
</div>
|
|
|
|
<div class="chart-wrapper chart-full">
|
|
<h3>Profil sociologique</h3>
|
|
<div id="chart-profil" ref="graphProfil"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
|
|
|
|
<h2 class="charts-heading">Évolution depuis 2020</h2>
|
|
|
|
<div if={ state.chargementHistorique } class="message">
|
|
Chargement de l'historique...
|
|
</div>
|
|
|
|
<div if={ !state.chargementHistorique && state.historique.length === 0 } class="message">
|
|
Aucune donnée historique disponible pour cette formation.
|
|
</div>
|
|
|
|
<div class="charts-section" if={ state.historique.length > 0 }>
|
|
<div class="chart-wrapper">
|
|
<h3>Taux d'accès par année</h3>
|
|
<div id="chart-evolution-taux" ref="graphTaux"></div>
|
|
</div>
|
|
|
|
<div class="chart-wrapper">
|
|
<h3>Nombre de candidats et admis</h3>
|
|
<div id="chart-evolution-candidats" ref="graphCandidats"></div>
|
|
</div>
|
|
|
|
<div class="chart-wrapper chart-full">
|
|
<h3>Évolution des mentions au bac</h3>
|
|
<div ref="graphMentionsHist"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
state: {
|
|
historique: [],
|
|
chargementHistorique: false
|
|
},
|
|
|
|
onMounted() {
|
|
this.afficherGraphiques()
|
|
this.chargerHistorique()
|
|
},
|
|
|
|
onUpdated() {
|
|
this.afficherGraphiques()
|
|
|
|
if (this.state.historique.length > 0) {
|
|
this.afficherGraphiquesHistoriques()
|
|
}
|
|
},
|
|
|
|
// Retour à la liste des résultats
|
|
retourListe() {
|
|
this.props.onback()
|
|
},
|
|
|
|
// Limiter une valeur entre 0 et 1 pour Charts.css
|
|
limiterValeur(val) {
|
|
if (val === null || val === undefined || isNaN(val)) {
|
|
return 0
|
|
}
|
|
|
|
var v = val / 100
|
|
|
|
if (v > 1) {
|
|
return 1
|
|
}
|
|
if (v < 0) {
|
|
return 0
|
|
}
|
|
|
|
return Math.round(v * 100) / 100
|
|
},
|
|
|
|
afficherGraphiques() {
|
|
var f = this.props.formation
|
|
if (!f) {
|
|
return
|
|
}
|
|
|
|
var graphBac = this.$('[ref="graphBac"]')
|
|
var graphMentions = this.$('[ref="graphMentions"]')
|
|
var graphProfil = this.$('[ref="graphProfil"]')
|
|
|
|
if (graphBac) {
|
|
graphBac.innerHTML = this.construireGraphiqueColonnes([
|
|
{ label: 'Général', valeur: f.pctGeneral, couleur: '#3d7fff' },
|
|
{ label: 'Techno', valeur: f.pctTechno, couleur: '#f59e0b' },
|
|
{ label: 'Pro', valeur: f.pctPro, couleur: '#10b981' }
|
|
])
|
|
}
|
|
|
|
if (graphMentions) {
|
|
graphMentions.innerHTML = this.construireGraphiqueColonnes([
|
|
{ label: 'Sans', valeur: f.pctSansMention, couleur: '#94a3b8' },
|
|
{ label: 'AB', valeur: f.pctAB, couleur: '#60a5fa' },
|
|
{ label: 'Bien', valeur: f.pctB, couleur: '#34d399' },
|
|
{ label: 'TB', valeur: f.pctTB, couleur: '#fbbf24' },
|
|
{ label: 'TB Féli.', valeur: f.pctTBF, couleur: '#f472b6' }
|
|
])
|
|
}
|
|
|
|
if (graphProfil) {
|
|
graphProfil.innerHTML = this.construireGraphiqueBarres([
|
|
{ label: 'Femmes', valeur: f.pctFemmes, couleur: '#a78bfa' },
|
|
{ label: 'Boursiers', valeur: f.pctBoursiers, couleur: '#fb923c' },
|
|
{ label: 'Néo-bac', valeur: f.pctNeoBac, couleur: '#2dd4bf' }
|
|
])
|
|
}
|
|
},
|
|
|
|
async chargerHistorique() {
|
|
var f = this.props.formation
|
|
if (!f) {
|
|
return
|
|
}
|
|
|
|
var codUai = f.id.split('-')[0]
|
|
|
|
if (!codUai || !window.chargerHistoriqueFormation) {
|
|
return
|
|
}
|
|
|
|
this.update({ chargementHistorique: true })
|
|
|
|
try {
|
|
var historique = await window.chargerHistoriqueFormation(codUai, f.nom)
|
|
this.update({ historique: historique, chargementHistorique: false })
|
|
} catch (e) {
|
|
console.error('Erreur chargement historique :', e)
|
|
this.update({ historique: [], chargementHistorique: false })
|
|
}
|
|
},
|
|
|
|
afficherGraphiquesHistoriques() {
|
|
var historique = this.state.historique
|
|
if (!historique || historique.length === 0) {
|
|
return
|
|
}
|
|
|
|
var graphTaux = this.$('[ref="graphTaux"]')
|
|
var graphCandidats = this.$('[ref="graphCandidats"]')
|
|
var graphMentionsHist = this.$('[ref="graphMentionsHist"]')
|
|
|
|
// Graphique : taux d'accès par année
|
|
if (graphTaux) {
|
|
var elementsAnnee = []
|
|
|
|
for (var i = 0; i < historique.length; i++) {
|
|
elementsAnnee.push({
|
|
label: '' + historique[i].annee,
|
|
valeur: historique[i].tauxAcces,
|
|
couleur: '#1a936f'
|
|
})
|
|
}
|
|
|
|
graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee)
|
|
}
|
|
|
|
// Graphique : candidats vs admis
|
|
if (graphCandidats) {
|
|
var maxCandidats = 0
|
|
|
|
for (var i = 0; i < historique.length; i++) {
|
|
if (historique[i].candidats > maxCandidats) {
|
|
maxCandidats = historique[i].candidats
|
|
}
|
|
}
|
|
|
|
var lignes = ''
|
|
|
|
for (var i = 0; i < historique.length; i++) {
|
|
var h = historique[i]
|
|
var tailleCand = 0
|
|
var tailleAdmis = 0
|
|
|
|
if (maxCandidats > 0) {
|
|
tailleCand = Math.round((h.candidats / maxCandidats) * 100) / 100
|
|
tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100
|
|
}
|
|
|
|
lignes += '<tr>'
|
|
lignes += '<th scope="row">' + h.annee + '</th>'
|
|
lignes += '<td style="--size: ' + tailleCand + '; --color: #2a5298;">'
|
|
lignes += '<span class="data">' + h.candidats + '</span></td>'
|
|
lignes += '<td style="--size: ' + tailleAdmis + '; --color: #1a936f;">'
|
|
lignes += '<span class="data">' + h.admis + '</span></td>'
|
|
lignes += '</tr>'
|
|
}
|
|
|
|
graphCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
|
+ '<thead><tr><th scope="col">Année</th><th scope="col">Candidats</th><th scope="col">Admis</th></tr></thead>'
|
|
+ '<tbody>' + lignes + '</tbody></table>'
|
|
}
|
|
|
|
// Tableau : évolution des mentions
|
|
if (graphMentionsHist) {
|
|
var tableau = '<table class="detail-table">'
|
|
tableau += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>'
|
|
tableau += '<tbody>'
|
|
|
|
for (var i = 0; i < historique.length; i++) {
|
|
var h = historique[i]
|
|
tableau += '<tr>'
|
|
tableau += '<td><b>' + h.annee + '</b></td>'
|
|
tableau += '<td>' + h.pctSansMention + '%</td>'
|
|
tableau += '<td>' + h.pctAB + '%</td>'
|
|
tableau += '<td>' + h.pctB + '%</td>'
|
|
tableau += '<td>' + h.pctTB + '%</td>'
|
|
tableau += '<td>' + h.pctTBF + '%</td>'
|
|
tableau += '</tr>'
|
|
}
|
|
|
|
tableau += '</tbody></table>'
|
|
graphMentionsHist.innerHTML = tableau
|
|
}
|
|
},
|
|
|
|
construireGraphiqueColonnes(elements) {
|
|
var lignes = ''
|
|
|
|
for (var i = 0; i < elements.length; i++) {
|
|
var el = elements[i]
|
|
var taille = this.limiterValeur(el.valeur)
|
|
var affiche = el.valeur || 0
|
|
|
|
lignes += '<tr>'
|
|
lignes += '<th scope="row">' + el.label + '</th>'
|
|
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">'
|
|
lignes += '<span class="data">' + affiche + '%</span>'
|
|
lignes += '</td></tr>'
|
|
}
|
|
|
|
return '<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
|
|
+ '<thead><tr><th scope="col">Type</th><th scope="col">%</th></tr></thead>'
|
|
+ '<tbody>' + lignes + '</tbody></table>'
|
|
},
|
|
|
|
construireGraphiqueBarres(elements) {
|
|
var lignes = ''
|
|
|
|
for (var i = 0; i < elements.length; i++) {
|
|
var el = elements[i]
|
|
var taille = this.limiterValeur(el.valeur)
|
|
var affiche = el.valeur || 0
|
|
|
|
lignes += '<tr>'
|
|
lignes += '<th scope="row">' + el.label + '</th>'
|
|
lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">'
|
|
lignes += '<span class="data">' + affiche + '%</span>'
|
|
lignes += '</td></tr>'
|
|
}
|
|
|
|
return '<table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">'
|
|
+ '<thead><tr><th scope="col">Catégorie</th><th scope="col">%</th></tr></thead>'
|
|
+ '<tbody>' + lignes + '</tbody></table>'
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
</detail-view>
|