maj de la syntaxe
This commit is contained in:
@@ -203,57 +203,57 @@
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.afficherGraphiques()
|
||||
this.chargerHistorique()
|
||||
this.afficherGraphiques();
|
||||
this.chargerHistorique();
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.afficherGraphiques()
|
||||
this.afficherGraphiques();
|
||||
|
||||
if (this.state.historique.length > 0) {
|
||||
this.afficherGraphiquesHistoriques()
|
||||
this.afficherGraphiquesHistoriques();
|
||||
}
|
||||
},
|
||||
|
||||
// Retour à la liste des résultats
|
||||
retourListe() {
|
||||
this.props.onback()
|
||||
this.props.onback();
|
||||
},
|
||||
|
||||
// Limiter une valeur entre 0 et 1 pour Charts.css
|
||||
limiterValeur(val) {
|
||||
if (val === null || val === undefined || isNaN(val)) {
|
||||
return 0
|
||||
return 0;
|
||||
}
|
||||
|
||||
var v = val / 100
|
||||
var v = val / 100;
|
||||
|
||||
if (v > 1) {
|
||||
return 1
|
||||
return 1;
|
||||
}
|
||||
if (v < 0) {
|
||||
return 0
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round(v * 100) / 100
|
||||
return Math.round(v * 100) / 100;
|
||||
},
|
||||
|
||||
afficherGraphiques() {
|
||||
var f = this.props.formation
|
||||
var f = this.props.formation;
|
||||
if (!f) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
var graphBac = this.$('[ref="graphBac"]')
|
||||
var graphMentions = this.$('[ref="graphMentions"]')
|
||||
var graphProfil = this.$('[ref="graphProfil"]')
|
||||
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) {
|
||||
@@ -263,7 +263,7 @@
|
||||
{ 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) {
|
||||
@@ -271,158 +271,158 @@
|
||||
{ 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
|
||||
var f = this.props.formation;
|
||||
if (!f) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
var codUai = f.id.split('-')[0]
|
||||
var codUai = f.id.split('-')[0];
|
||||
|
||||
if (!codUai || !window.chargerHistoriqueFormation) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
this.update({ chargementHistorique: true })
|
||||
this.update({ chargementHistorique: true });
|
||||
|
||||
try {
|
||||
var historique = await window.chargerHistoriqueFormation(codUai, f.nom)
|
||||
this.update({ historique: historique, chargementHistorique: false })
|
||||
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 })
|
||||
console.error('Erreur chargement historique :', e);
|
||||
this.update({ historique: [], chargementHistorique: false });
|
||||
}
|
||||
},
|
||||
|
||||
afficherGraphiquesHistoriques() {
|
||||
var historique = this.state.historique
|
||||
var historique = this.state.historique;
|
||||
if (!historique || historique.length === 0) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
var graphTaux = this.$('[ref="graphTaux"]')
|
||||
var graphCandidats = this.$('[ref="graphCandidats"]')
|
||||
var graphMentionsHist = this.$('[ref="graphMentionsHist"]')
|
||||
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 = []
|
||||
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)
|
||||
graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee);
|
||||
}
|
||||
|
||||
// Graphique : candidats vs admis
|
||||
if (graphCandidats) {
|
||||
var maxCandidats = 0
|
||||
var maxCandidats = 0;
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
if (historique[i].candidats > maxCandidats) {
|
||||
maxCandidats = historique[i].candidats
|
||||
maxCandidats = historique[i].candidats;
|
||||
}
|
||||
}
|
||||
|
||||
var lignes = ''
|
||||
var lignes = '';
|
||||
|
||||
for (var i = 0; i < historique.length; i++) {
|
||||
var h = historique[i]
|
||||
var tailleCand = 0
|
||||
var tailleAdmis = 0
|
||||
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
|
||||
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>'
|
||||
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>'
|
||||
+ '<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>'
|
||||
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>'
|
||||
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
|
||||
tableau += '</tbody></table>';
|
||||
graphMentionsHist.innerHTML = tableau;
|
||||
}
|
||||
},
|
||||
|
||||
construireGraphiqueColonnes(elements) {
|
||||
var lignes = ''
|
||||
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
|
||||
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>'
|
||||
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>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>';
|
||||
},
|
||||
|
||||
construireGraphiqueBarres(elements) {
|
||||
var lignes = ''
|
||||
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
|
||||
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>'
|
||||
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>'
|
||||
+ '<tbody>' + lignes + '</tbody></table>';
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</detail-view>
|
||||
|
||||
Reference in New Issue
Block a user