yolou/public-html2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Maj

Browse Source
This commit is contained in:
Seri-Khane YOLOU
2026-03-30 14:54:53 +02:00
parent 71773df0ee
commit bd24e921a7
16 changed files with 1240 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files
parcoursup/components/detail-view.riot
+258 -123
View File
@@ -1,9 +1,7 @@
<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>
@@ -15,7 +13,6 @@
<div class="detail-grid">
<div>
<h2>Phase principale d'admission</h2>
<table class="detail-table">
<thead>
<tr>
@@ -68,7 +65,6 @@
<div class="timeline-box">
<h3>Vitesse de remplissage</h3>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
@@ -77,7 +73,6 @@
{ props.formation.pctDebutPhase }%
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div>
@@ -85,7 +80,6 @@
{ props.formation.pctDateBac }%
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div>
@@ -98,7 +92,6 @@
</div>
<h2>Phase complémentaire d'admission</h2>
<table class="detail-table">
<thead>
<tr>
@@ -148,146 +141,288 @@
</tbody>
</table>
<!-- ===================== GRAPHIQUES CHARTS.CSS ===================== -->
<!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
<h2 class="charts-heading">Profil des admis</h2>
<div class="charts-section">
<!-- Graphique 1 : Répartition par type de bac -->
<div class="chart-wrapper">
<h3>Répartition par type de bac</h3>
<div id="chart-bac">
<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">Pourcentage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Général</th>
<td style="--size: { safe(props.formation.pctGeneral) }; --color: #3d7fff;">
<span class="data">{ props.formation.pctGeneral || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">Techno</th>
<td style="--size: { safe(props.formation.pctTechno) }; --color: #f59e0b;">
<span class="data">{ props.formation.pctTechno || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">Pro</th>
<td style="--size: { safe(props.formation.pctPro) }; --color: #10b981;">
<span class="data">{ props.formation.pctPro || 0 }%</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="chart-bac" ref="graphBac"></div>
</div>
<!-- Graphique 2 : Mentions au bac -->
<div class="chart-wrapper">
<h3>Mentions au bac des admis</h3>
<div id="chart-mentions">
<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
<thead>
<tr>
<th scope="col">Mention</th>
<th scope="col">Pourcentage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sans</th>
<td style="--size: { safe(props.formation.pctSansMention) }; --color: #94a3b8;">
<span class="data">{ props.formation.pctSansMention || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">AB</th>
<td style="--size: { safe(props.formation.pctAB) }; --color: #60a5fa;">
<span class="data">{ props.formation.pctAB || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">Bien</th>
<td style="--size: { safe(props.formation.pctB) }; --color: #34d399;">
<span class="data">{ props.formation.pctB || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">TB</th>
<td style="--size: { safe(props.formation.pctTB) }; --color: #fbbf24;">
<span class="data">{ props.formation.pctTB || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">TB Féli.</th>
<td style="--size: { safe(props.formation.pctTBF) }; --color: #f472b6;">
<span class="data">{ props.formation.pctTBF || 0 }%</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="chart-mentions" ref="graphMentions"></div>
</div>
<!-- Graphique 3 : Profil sociologique (barres horizontales, pleine largeur) -->
<div class="chart-wrapper chart-full">
<h3>Profil sociologique</h3>
<div id="chart-profil">
<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">Pourcentage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Femmes</th>
<td style="--size: { safe(props.formation.pctFemmes) }; --color: #a78bfa;">
<span class="data">{ props.formation.pctFemmes || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">Boursiers</th>
<td style="--size: { safe(props.formation.pctBoursiers) }; --color: #fb923c;">
<span class="data">{ props.formation.pctBoursiers || 0 }%</span>
</td>
</tr>
<tr>
<th scope="row">Néo-bac</th>
<td style="--size: { safe(props.formation.pctNeoBac) }; --color: #2dd4bf;">
<span class="data">{ props.formation.pctNeoBac || 0 }%</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="chart-profil" ref="graphProfil"></div>
</div>
</div>
<button onclick={ () => props.onback() } class="btn-retour">Retour à la liste</button>
<!-- ==================== É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 {
safe(val) {
if (val === null || val === undefined || isNaN(val)) return 0
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
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>