ajout des elements
This commit is contained in:
@@ -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>
|
||||
@@ -153,127 +146,49 @@
|
||||
<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="chartBac"></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="chartMentions"></div>
|
||||
</div>
|
||||
|
||||
<!-- Graphique 3 : Profil sociologique (barres horizontales, pleine largeur) -->
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Profil sociologique</h3>
|
||||
<div id="chart-profil" ref="chartProfil"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- ===================== ÉVOLUTION HISTORIQUE ===================== -->
|
||||
|
||||
<h2 class="charts-heading">Évolution depuis 2020</h2>
|
||||
|
||||
<div if={ state.loadingHistory } class="message">
|
||||
Chargement de l'historique...
|
||||
</div>
|
||||
|
||||
<div if={ !state.loadingHistory && state.history.length === 0 } class="message">
|
||||
Aucune donnée historique disponible pour cette formation.
|
||||
</div>
|
||||
|
||||
<div class="charts-section" if={ state.history.length > 0 }>
|
||||
<div class="chart-wrapper">
|
||||
<h3>Taux d'accès par année</h3>
|
||||
<div id="chart-evolution-taux" ref="chartTaux"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper">
|
||||
<h3>Nombre de candidats et admis</h3>
|
||||
<div id="chart-evolution-candidats" ref="chartCandidats"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrapper chart-full">
|
||||
<h3>Évolution des mentions au bac</h3>
|
||||
<div ref="chartMentionsHist"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick={ () => props.onback() } class="btn-retour">Retour à la liste</button>
|
||||
@@ -281,12 +196,191 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
state: {
|
||||
history: [],
|
||||
loadingHistory: false
|
||||
},
|
||||
|
||||
safe(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
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.renderCharts()
|
||||
this.loadHistory()
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.renderCharts()
|
||||
if (this.state.history.length > 0) {
|
||||
this.renderHistoryCharts()
|
||||
}
|
||||
},
|
||||
|
||||
renderCharts() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
|
||||
var chartBac = this.$('[ref="chartBac"]')
|
||||
var chartMentions = this.$('[ref="chartMentions"]')
|
||||
var chartProfil = this.$('[ref="chartProfil"]')
|
||||
|
||||
if (chartBac) {
|
||||
chartBac.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Général', value: f.pctGeneral, color: '#3d7fff' },
|
||||
{ label: 'Techno', value: f.pctTechno, color: '#f59e0b' },
|
||||
{ label: 'Pro', value: f.pctPro, color: '#10b981' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartMentions) {
|
||||
chartMentions.innerHTML = this.buildColumnChart([
|
||||
{ label: 'Sans', value: f.pctSansMention, color: '#94a3b8' },
|
||||
{ label: 'AB', value: f.pctAB, color: '#60a5fa' },
|
||||
{ label: 'Bien', value: f.pctB, color: '#34d399' },
|
||||
{ label: 'TB', value: f.pctTB, color: '#fbbf24' },
|
||||
{ label: 'TB Féli.', value: f.pctTBF, color: '#f472b6' }
|
||||
])
|
||||
}
|
||||
|
||||
if (chartProfil) {
|
||||
chartProfil.innerHTML = this.buildBarChart([
|
||||
{ label: 'Femmes', value: f.pctFemmes, color: '#a78bfa' },
|
||||
{ label: 'Boursiers', value: f.pctBoursiers, color: '#fb923c' },
|
||||
{ label: 'Néo-bac', value: f.pctNeoBac, color: '#2dd4bf' }
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
async loadHistory() {
|
||||
var f = this.props.formation
|
||||
if (!f) return
|
||||
|
||||
// Extraire le cod_uai de l'id (format: codUai-nomFormation)
|
||||
var codUai = f.id.split('-')[0]
|
||||
|
||||
if (!codUai || !window.fetchFormationHistory) return
|
||||
|
||||
this.update({ loadingHistory: true })
|
||||
|
||||
try {
|
||||
var history = await window.fetchFormationHistory(codUai, f.nom)
|
||||
this.update({ history: history, loadingHistory: false })
|
||||
} catch (e) {
|
||||
console.error('Erreur historique:', e)
|
||||
this.update({ history: [], loadingHistory: false })
|
||||
}
|
||||
},
|
||||
|
||||
renderHistoryCharts() {
|
||||
var hist = this.state.history
|
||||
if (!hist || hist.length === 0) return
|
||||
|
||||
var chartTaux = this.$('[ref="chartTaux"]')
|
||||
var chartCandidats = this.$('[ref="chartCandidats"]')
|
||||
var chartMentionsHist = this.$('[ref="chartMentionsHist"]')
|
||||
|
||||
// Graphique : taux d'accès par année
|
||||
if (chartTaux) {
|
||||
var items = []
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
items.push({
|
||||
label: '' + hist[i].annee,
|
||||
value: hist[i].tauxAcces,
|
||||
color: '#1a936f'
|
||||
})
|
||||
}
|
||||
chartTaux.innerHTML = this.buildColumnChart(items)
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis (normalisé sur le max)
|
||||
if (chartCandidats) {
|
||||
var maxCandidats = 0
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
if (hist[i].candidats > maxCandidats) maxCandidats = hist[i].candidats
|
||||
}
|
||||
|
||||
var rows = ''
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
var sizeCand = maxCandidats > 0 ? Math.round((h.candidats / maxCandidats) * 100) / 100 : 0
|
||||
var sizeAdmis = maxCandidats > 0 ? Math.round((h.admis / maxCandidats) * 100) / 100 : 0
|
||||
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + h.annee + '</th>'
|
||||
rows += '<td style="--size: ' + sizeCand + '; --color: #2a5298;">'
|
||||
rows += '<span class="data">' + h.candidats + '</span></td>'
|
||||
rows += '<td style="--size: ' + sizeAdmis + '; --color: #1a936f;">'
|
||||
rows += '<span class="data">' + h.admis + '</span></td>'
|
||||
rows += '</tr>'
|
||||
}
|
||||
|
||||
chartCandidats.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>' + rows + '</tbody></table>'
|
||||
}
|
||||
|
||||
// Tableau : évolution des mentions
|
||||
if (chartMentionsHist) {
|
||||
var table = '<table class="detail-table">'
|
||||
table += '<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>'
|
||||
table += '<tbody>'
|
||||
|
||||
for (var i = 0; i < hist.length; i++) {
|
||||
var h = hist[i]
|
||||
table += '<tr>'
|
||||
table += '<td><b>' + h.annee + '</b></td>'
|
||||
table += '<td>' + h.pctSansMention + '%</td>'
|
||||
table += '<td>' + h.pctAB + '%</td>'
|
||||
table += '<td>' + h.pctB + '%</td>'
|
||||
table += '<td>' + h.pctTB + '%</td>'
|
||||
table += '<td>' + h.pctTBF + '%</td>'
|
||||
table += '</tr>'
|
||||
}
|
||||
|
||||
table += '</tbody></table>'
|
||||
chartMentionsHist.innerHTML = table
|
||||
}
|
||||
},
|
||||
|
||||
buildColumnChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</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>' + rows + '</tbody></table>'
|
||||
},
|
||||
|
||||
buildBarChart(items) {
|
||||
var rows = ''
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i]
|
||||
var val = this.safe(item.value)
|
||||
var display = item.value || 0
|
||||
rows += '<tr>'
|
||||
rows += '<th scope="row">' + item.label + '</th>'
|
||||
rows += '<td style="--size: ' + val + '; --color: ' + item.color + ';">'
|
||||
rows += '<span class="data">' + display + '%</span>'
|
||||
rows += '</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>' + rows + '</tbody></table>'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user