This commit is contained in:
2026-03-21 13:47:09 +01:00
parent bd20abb745
commit da383237f6
8 changed files with 650 additions and 520 deletions
+64 -54
View File
@@ -1,34 +1,35 @@
export function buildURL(query, limit = 20, offset = 0, filters = {}) {
let url =
"https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?"
// Construire l'URL de requête vers l'API Parcoursup
export function construireURL(requete, limite = 20, decalage = 0, filtres = {}) {
url += "limit=" + limit
url += "&offset=" + offset
var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records?"
url += "limit=" + limite
url += "&offset=" + decalage
var conditions = []
if (query && query.trim() !== "") {
conditions.push("search(lib_for_voe_ins, '" + query + "')")
if (requete && requete.trim() !== "") {
conditions.push("search(lib_for_voe_ins, '" + requete + "')")
}
if (filters.filiere && filters.filiere !== "") {
conditions.push("fili='" + filters.filiere + "'")
if (filtres.filiere && filtres.filiere !== "") {
conditions.push("fili='" + filtres.filiere + "'")
}
if (filters.selectivite && filters.selectivite !== "") {
conditions.push("select_form='" + filters.selectivite + "'")
if (filtres.selectivite && filtres.selectivite !== "") {
conditions.push("select_form='" + filtres.selectivite + "'")
}
if (filters.region && filters.region !== "") {
conditions.push("region_etab_aff='" + filters.region + "'")
if (filtres.region && filtres.region !== "") {
conditions.push("region_etab_aff='" + filtres.region + "'")
}
if (filters.tauxMin && filters.tauxMin > 0) {
conditions.push("taux_acces_ens>=" + filters.tauxMin)
if (filtres.tauxMin && filtres.tauxMin > 0) {
conditions.push("taux_acces_ens>=" + filtres.tauxMin)
}
if (filters.tauxMax && filters.tauxMax < 100) {
conditions.push("taux_acces_ens<=" + filters.tauxMax)
if (filtres.tauxMax && filtres.tauxMax < 100) {
conditions.push("taux_acces_ens<=" + filtres.tauxMax)
}
if (conditions.length > 0) {
@@ -38,19 +39,23 @@ export function buildURL(query, limit = 20, offset = 0, filters = {}) {
return url
}
export async function fetchFormations(query, limit = 20, offset = 0, filters = {}) {
const url = buildURL(query, limit, offset, filters)
const response = await fetch(url)
// Charger les formations depuis l'API Parcoursup
export async function chargerFormations(requete, limite = 20, decalage = 0, filtres = {}) {
if (!response.ok) {
var url = construireURL(requete, limite, decalage, filtres)
var reponse = await fetch(url)
if (!reponse.ok) {
throw new Error("Erreur HTTP")
}
return await response.json()
return await reponse.json()
}
export async function fetchFormationHistory(codUai, nomFormation) {
var datasets = {
// Charger l'historique d'une formation sur plusieurs années
export async function chargerHistoriqueFormation(codUai, nomFormation) {
var jeuDeDonnees = {
2020: "fr-esr-parcoursup_2020",
2021: "fr-esr-parcoursup_2021",
2022: "fr-esr-parcoursup_2022",
@@ -59,54 +64,59 @@ export async function fetchFormationHistory(codUai, nomFormation) {
2025: "fr-esr-parcoursup"
}
var history = []
var searchName = nomFormation.substring(0, 40).replace(/'/g, "\\'")
var years = [2020, 2021, 2022, 2023, 2024, 2025]
var historique = []
var nomCourt = nomFormation.substring(0, 40).replace(/'/g, "\\'")
var annees = [2020, 2021, 2022, 2023, 2024, 2025]
for (var i = 0; i < years.length; i++) {
var year = years[i]
var dataset = datasets[year]
for (var i = 0; i < annees.length; i++) {
var annee = annees[i]
var dataset = jeuDeDonnees[annee]
try {
var url = "https://data.enseignementsup-recherche.gouv.fr/api/explore/v2.1/catalog/datasets/"
+ dataset + "/records?"
+ "limit=5"
+ "&where=cod_uai%3D'" + codUai + "' AND search(lib_for_voe_ins, '" + searchName + "')"
+ "&where=cod_uai%3D'" + codUai + "' AND search(lib_for_voe_ins, '" + nomCourt + "')"
+ "&select=cod_uai,lib_for_voe_ins,voe_tot,acc_tot,pct_sansmention,pct_ab,pct_b,pct_tb,pct_tbf,pct_bg,pct_bt,pct_bp"
var response = await fetch(url)
var reponse = await fetch(url)
if (response.ok) {
var data = await response.json()
if (reponse.ok) {
if (data.results && data.results.length > 0) {
var r = data.results[0]
var taux = 0
var donnees = await reponse.json()
if (r.voe_tot && r.voe_tot > 0) {
taux = Math.round((r.acc_tot / r.voe_tot) * 100)
if (donnees.results && donnees.results.length > 0) {
var ligne = donnees.results[0]
var taux = 0
if (ligne.voe_tot && ligne.voe_tot > 0) {
taux = Math.round((ligne.acc_tot / ligne.voe_tot) * 100)
}
history.push({
annee: year,
tauxAcces: taux,
candidats: r.voe_tot || 0,
admis: r.acc_tot || 0,
pctSansMention: r.pct_sansmention || 0,
pctAB: r.pct_ab || 0,
pctB: r.pct_b || 0,
pctTB: r.pct_tb || 0,
pctTBF: r.pct_tbf || 0,
pctGeneral: r.pct_bg || 0,
pctTechno: r.pct_bt || 0,
pctPro: r.pct_bp || 0
historique.push({
annee: annee,
tauxAcces: taux,
candidats: ligne.voe_tot || 0,
admis: ligne.acc_tot || 0,
pctSansMention: ligne.pct_sansmention || 0,
pctAB: ligne.pct_ab || 0,
pctB: ligne.pct_b || 0,
pctTB: ligne.pct_tb || 0,
pctTBF: ligne.pct_tbf || 0,
pctGeneral: ligne.pct_bg || 0,
pctTechno: ligne.pct_bt || 0,
pctPro: ligne.pct_bp || 0
})
}
}
} catch (e) {
console.warn("Erreur pour " + year + ":", e)
console.warn("Erreur pour l'année " + annee + " :", e)
}
}
return history
return historique
}
+204 -142
View File
File diff suppressed because it is too large Load Diff
+55 -54
View File
@@ -2,37 +2,37 @@
<!-- Bouton connexion dans le header (utilisateur non connecté) -->
<div class="auth-header-btn" if={ !props.user }>
<button class="btn btn-auth" onclick={ openModal }>
<span class="auth-icon">👤</span> Connexion
<button class="btn btn-auth" onclick={ ouvrirModale }>
<span class="auth-icon"></span> Connexion
</button>
</div>
<!-- Email + bouton déconnexion dans le header (utilisateur connecté) -->
<div class="auth-user-info" if={ props.user }>
<span class="auth-email">{ props.user.email }</span>
<button class="btn btn-auth-logout" onclick={ handleLogout }>Déconnexion</button>
<button class="btn btn-auth-logout" onclick={ seDeconnecter }>Déconnexion</button>
</div>
<!-- Modale d'authentification -->
<div class="auth-modal-overlay" if={ state.open } onclick={ closeOnOverlay }>
<div class="auth-modal-overlay" if={ state.visible } onclick={ cliquerFond }>
<div class="auth-modal">
<button class="auth-modal-close" onclick={ closeModal }>✕</button>
<button class="auth-modal-close" onclick={ fermerModale }>✕</button>
<h2 class="auth-modal-title">{ state.titre }</h2>
<!-- Onglets Connexion / Inscription -->
<div class="auth-tabs">
<button class={ state.classBtnLogin } onclick={ switchToLogin }>
<button class={ state.classBtnConnexion } onclick={ afficherConnexion }>
Connexion
</button>
<button class={ state.classBtnRegister } onclick={ switchToRegister }>
<button class={ state.classBtnInscription } onclick={ afficherInscription }>
Inscription
</button>
</div>
<!-- Formulaire -->
<form onsubmit={ handleSubmit } class="auth-form">
<form onsubmit={ validerFormulaire } class="auth-form">
<div class="auth-field">
<label>Adresse e-mail</label>
@@ -56,11 +56,11 @@
</div>
<!-- Message d'erreur -->
<div class="auth-error" if={ state.error }>
{ state.error }
<div class="auth-error" if={ state.erreur }>
{ state.erreur }
</div>
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.chargement }>
{ state.labelBouton }
</button>
@@ -72,93 +72,94 @@
export default {
state: {
open: false,
mode: 'login',
loading: false,
error: null,
titre: 'Connexion',
labelBouton: 'Se connecter',
classBtnLogin: 'auth-tab active',
classBtnRegister: 'auth-tab'
visible: false,
mode: 'connexion',
chargement: false,
erreur: null,
titre: 'Connexion',
labelBouton: 'Se connecter',
classBtnConnexion: 'auth-tab active',
classBtnInscription: 'auth-tab'
},
openModal() {
this.update({ open: true, error: null })
ouvrirModale() {
this.update({ visible: true, erreur: null })
},
closeModal() {
this.update({ open: false, error: null })
fermerModale() {
this.update({ visible: false, erreur: null })
},
closeOnOverlay(e) {
// Fermer si l'utilisateur clique en dehors de la modale
cliquerFond(e) {
if (e.target === e.currentTarget) {
this.closeModal()
this.fermerModale()
}
},
switchToLogin() {
afficherConnexion() {
this.update({
mode: 'login',
error: null,
titre: 'Connexion',
labelBouton: 'Se connecter',
classBtnLogin: 'auth-tab active',
classBtnRegister: 'auth-tab'
mode: 'connexion',
erreur: null,
titre: 'Connexion',
labelBouton: 'Se connecter',
classBtnConnexion: 'auth-tab active',
classBtnInscription: 'auth-tab'
})
},
switchToRegister() {
afficherInscription() {
this.update({
mode: 'register',
error: null,
titre: 'Créer un compte',
labelBouton: 'Créer le compte',
classBtnLogin: 'auth-tab',
classBtnRegister: 'auth-tab active'
mode: 'inscription',
erreur: null,
titre: 'Créer un compte',
labelBouton: 'Créer le compte',
classBtnConnexion: 'auth-tab',
classBtnInscription: 'auth-tab active'
})
},
async handleSubmit(e) {
async validerFormulaire(e) {
e.preventDefault()
var email = e.target.email.value.trim()
var password = e.target.password.value
var services = window.firebaseServices
var email = e.target.email.value.trim()
var password = e.target.password.value
var services = window.firebaseServices
this.update({ loading: true, error: null })
this.update({ chargement: true, erreur: null })
try {
if (this.state.mode === 'register') {
if (this.state.mode === 'inscription') {
await services.createAccount(email, password)
} else {
await services.login(email, password)
}
this.update({ open: false, loading: false })
this.update({ visible: false, chargement: false })
this.props.onauth && this.props.onauth()
} catch (err) {
var message = 'Une erreur est survenue.'
var messageErreur = 'Une erreur est survenue.'
if (err.code === 'auth/email-already-in-use') {
message = 'Cet e-mail est déjà utilisé.'
messageErreur = 'Cet e-mail est déjà utilisé.'
} else if (err.code === 'auth/invalid-email') {
message = 'Adresse e-mail invalide.'
messageErreur = 'Adresse e-mail invalide.'
} else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
message = 'E-mail ou mot de passe incorrect.'
messageErreur = 'E-mail ou mot de passe incorrect.'
} else if (err.code === 'auth/weak-password') {
message = 'Le mot de passe doit faire au moins 6 caractères.'
messageErreur = 'Le mot de passe doit faire au moins 6 caractères.'
} else if (err.code === 'auth/user-not-found') {
message = 'Aucun compte trouvé avec cet e-mail.'
messageErreur = 'Aucun compte trouvé avec cet e-mail.'
}
this.update({ loading: false, error: message })
this.update({ chargement: false, erreur: messageErreur })
}
},
async handleLogout() {
async seDeconnecter() {
try {
await window.firebaseServices.logout()
this.props.onlogout && this.props.onlogout()
+170 -139
View File
@@ -141,257 +141,288 @@
</tbody>
</table>
<!-- ===================== GRAPHIQUES CHARTS.CSS ===================== -->
<!-- ==================== 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="chartBac"></div>
<div id="chart-bac" ref="graphBac"></div>
</div>
<div class="chart-wrapper">
<h3>Mentions au bac des admis</h3>
<div id="chart-mentions" ref="chartMentions"></div>
<div id="chart-mentions" ref="graphMentions"></div>
</div>
<div class="chart-wrapper chart-full">
<h3>Profil sociologique</h3>
<div id="chart-profil" ref="chartProfil"></div>
<div id="chart-profil" ref="graphProfil"></div>
</div>
</div>
<!-- ===================== ÉVOLUTION HISTORIQUE ===================== -->
<!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
<h2 class="charts-heading">Évolution depuis 2020</h2>
<div if={ state.loadingHistory } class="message">
<div if={ state.chargementHistorique } class="message">
Chargement de l'historique...
</div>
<div if={ !state.loadingHistory && state.history.length === 0 } class="message">
<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.history.length > 0 }>
<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="chartTaux"></div>
<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="chartCandidats"></div>
<div id="chart-evolution-candidats" ref="graphCandidats"></div>
</div>
<div class="chart-wrapper chart-full">
<h3>Évolution des mentions au bac</h3>
<div ref="chartMentionsHist"></div>
<div ref="graphMentionsHist"></div>
</div>
</div>
<button onclick={ goBack } class="btn-retour">Retour à la liste</button>
<button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
</div>
<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
state: {
historique: [],
chargementHistorique: false
},
onMounted() {
this.renderCharts()
this.loadHistory()
this.afficherGraphiques()
this.chargerHistorique()
},
onUpdated() {
this.renderCharts()
if (this.state.history.length > 0) {
this.renderHistoryCharts()
this.afficherGraphiques()
if (this.state.historique.length > 0) {
this.afficherGraphiquesHistoriques()
}
},
// Retour à la liste des résultats
goBack() {
retourListe() {
this.props.onback()
},
renderCharts() {
// 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
if (!f) {
return
}
var chartBac = this.$('[ref="chartBac"]')
var chartMentions = this.$('[ref="chartMentions"]')
var chartProfil = this.$('[ref="chartProfil"]')
var graphBac = this.$('[ref="graphBac"]')
var graphMentions = this.$('[ref="graphMentions"]')
var graphProfil = this.$('[ref="graphProfil"]')
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 (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 (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 (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 (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' }
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 loadHistory() {
async chargerHistorique() {
var f = this.props.formation
if (!f) return
if (!f) {
return
}
// Extraire le cod_uai de l'id (format: codUai-nomFormation)
var codUai = f.id.split('-')[0]
if (!codUai || !window.fetchFormationHistory) return
if (!codUai || !window.chargerHistoriqueFormation) {
return
}
this.update({ loadingHistory: true })
this.update({ chargementHistorique: true })
try {
var history = await window.fetchFormationHistory(codUai, f.nom)
this.update({ history: history, loadingHistory: false })
var historique = await window.chargerHistoriqueFormation(codUai, f.nom)
this.update({ historique: historique, chargementHistorique: false })
} catch (e) {
console.error('Erreur historique:', e)
this.update({ history: [], loadingHistory: false })
console.error('Erreur chargement historique :', e)
this.update({ historique: [], chargementHistorique: 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)
afficherGraphiquesHistoriques() {
var historique = this.state.historique
if (!historique || historique.length === 0) {
return
}
// 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 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'
})
}
var rows = ''
for (var i = 0; i < hist.length; i++) {
var h = hist[i]
var sizeCand = 0
var sizeAdmis = 0
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) {
sizeCand = Math.round((h.candidats / maxCandidats) * 100) / 100
sizeAdmis = Math.round((h.admis / maxCandidats) * 100) / 100
tailleCand = Math.round((h.candidats / maxCandidats) * 100) / 100
tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100
}
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>'
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>'
}
chartCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
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>' + rows + '</tbody></table>'
+ '<tbody>' + lignes + '</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>'
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 < 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>'
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>'
}
table += '</tbody></table>'
chartMentionsHist.innerHTML = table
tableau += '</tbody></table>'
graphMentionsHist.innerHTML = tableau
}
},
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>'
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>' + rows + '</tbody></table>'
+ '<tbody>' + lignes + '</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>'
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>' + rows + '</tbody></table>'
+ '<tbody>' + lignes + '</tbody></table>'
}
}
</script>
</detail-view>
+54 -46
View File
@@ -1,112 +1,120 @@
<map-view>
<div class="map-box">
<h3>Carte des formations</h3>
<div class="map" ref="map"></div>
<div class="map" ref="carte"></div>
</div>
<script>
export default {
onMounted() {
var mapElement = this.$('div[ref="map"]')
this.map = L.map(mapElement).setView([46.8, 2.5], 6)
onMounted() {
var divCarte = this.$('div[ref="carte"]')
this.carte = L.map(divCarte).setView([46.8, 2.5], 6)
this.groupeMarqueurs = L.layerGroup().addTo(this.carte)
this.marqueursIndex = {}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(this.map)
}).addTo(this.carte)
this.markersLayer = L.layerGroup().addTo(this.map)
this.markersById = {}
this.refreshMarkers()
this.afficherMarqueurs()
var self = this
var composant = this
setTimeout(function() {
if (self.map) self.map.invalidateSize()
if (composant.carte) {
composant.carte.invalidateSize()
}
}, 200)
setTimeout(function() {
if (self.map) self.map.invalidateSize()
if (composant.carte) {
composant.carte.invalidateSize()
}
}, 500)
window.mapFocus = function(id) {
self.focusFormation(id)
composant.centrerSurFormation(id)
}
},
onUpdated() {
this.refreshMarkers()
this.afficherMarqueurs()
var self = this
var composant = this
if (this.map) {
if (this.carte) {
setTimeout(function() {
self.map.invalidateSize()
composant.carte.invalidateSize()
}, 100)
setTimeout(function() {
self.map.invalidateSize()
composant.carte.invalidateSize()
}, 300)
}
},
onBeforeUnmount() {
if (this.map) {
this.map.remove()
this.map = null
if (this.carte) {
this.carte.remove()
this.carte = null
}
window.mapFocus = null
},
refreshMarkers() {
if (!this.map || !this.markersLayer) {
afficherMarqueurs() {
if (!this.carte || !this.groupeMarqueurs) {
return
}
this.markersLayer.clearLayers()
this.markersById = {}
this.groupeMarqueurs.clearLayers()
this.marqueursIndex = {}
var points = []
var results = this.props.results || []
var coordonnees = []
var formations = this.props.results || []
for (var i = 0; i < results.length; i++) {
var f = results[i]
for (var i = 0; i < formations.length; i++) {
var f = formations[i]
if (f.latitude != null && f.longitude != null) {
var marker = L.marker([f.latitude, f.longitude])
marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
marker.addTo(this.markersLayer)
var marqueur = L.marker([f.latitude, f.longitude])
marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
marqueur.addTo(this.groupeMarqueurs)
this.markersById[f.id] = marker
points.push([f.latitude, f.longitude])
this.marqueursIndex[f.id] = marqueur
coordonnees.push([f.latitude, f.longitude])
}
}
if (points.length > 0) {
this.map.fitBounds(points, { padding: [20, 20] })
if (coordonnees.length > 0) {
this.carte.fitBounds(coordonnees, { padding: [20, 20] })
} else {
this.map.setView([46.8, 2.5], 6)
this.carte.setView([46.8, 2.5], 6)
}
},
focusFormation(id) {
var marker = this.markersById[id]
centrerSurFormation(id) {
var marqueur = this.marqueursIndex[id]
if (marker && this.map) {
var mapEl = this.$('div[ref="map"]')
if (mapEl) {
mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
if (marqueur && this.carte) {
var divCarte = this.$('div[ref="carte"]')
if (divCarte) {
divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
var self = this
var composant = this
setTimeout(function() {
self.map.invalidateSize()
self.map.setView(marker.getLatLng(), 13, { animate: true })
marker.openPopup()
composant.carte.invalidateSize()
composant.carte.setView(marqueur.getLatLng(), 13, { animate: true })
marqueur.openPopup()
}, 400)
}
}
}
</script>
</map-view>
+27 -11
View File
@@ -1,5 +1,6 @@
<result-list>
<div class="results">
<div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
Aucun résultat trouvé
</div>
@@ -8,26 +9,41 @@
Chargement...
</div>
<div each={ (f, i) in props.results } key={ f.id } class="card">
<h3>{ f.nom }</h3>
<p><b>Établissement :</b> { f.etablissement }</p>
<p><b>Ville :</b> { f.ville } ({ f.departement })</p>
<p><b>Filière :</b> { f.filiere }</p>
<p><b>Taux d'accès :</b> { f.tauxAcces }%</p>
<div each={ (formation, index) in props.results } key={ formation.id } class="card">
<h3>{ formation.nom }</h3>
<p><b>Établissement :</b> { formation.etablissement }</p>
<p><b>Ville :</b> { formation.ville } ({ formation.departement })</p>
<p><b>Filière :</b> { formation.filiere }</p>
<p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
<button onclick={ () => props.ondetail(i) }>Voir détail</button>
<button onclick={ () => props.onselect(i) }>Ajouter à la sélection</button>
<button onclick={ () => locateOnMap(f) } if={ f.latitude != null }>Localiser</button>
<button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
<button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
<button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
</div>
</div>
<script>
export default {
locateOnMap(f) {
// Déclencher l'affichage du détail d'une formation
afficherDetail(index) {
this.props.ondetail(index)
},
// Ajouter une formation à la sélection
ajouterALaSelection(index) {
this.props.onselect(index)
},
// Centrer la carte sur la formation
localiserSurCarte(formation) {
if (window.mapFocus) {
window.mapFocus(f.id)
window.mapFocus(formation.id)
}
}
}
</script>
</result-list>
+71 -69
View File
@@ -1,95 +1,97 @@
export function createFormation(raw) {
// Créer un objet formation à partir des données brutes de l'API
export function creerFormation(brut) {
var taux = 0
var latitude = null
var longitude = null
if (raw.voe_tot && raw.voe_tot > 0) {
taux = Math.round((raw.acc_tot / raw.voe_tot) * 100)
if (brut.voe_tot && brut.voe_tot > 0) {
taux = Math.round((brut.acc_tot / brut.voe_tot) * 100)
}
if (raw.g_olocalisation_des_formations) {
latitude = raw.g_olocalisation_des_formations.lat
longitude = raw.g_olocalisation_des_formations.lon
if (brut.g_olocalisation_des_formations) {
latitude = brut.g_olocalisation_des_formations.lat
longitude = brut.g_olocalisation_des_formations.lon
}
return {
id: raw.cod_uai + "-" + raw.lib_for_voe_ins,
id: brut.cod_uai + "-" + brut.lib_for_voe_ins,
nom: raw.lib_for_voe_ins,
etablissement: raw.g_ea_lib_vx,
ville: raw.ville_etab,
departement: raw.dep,
departementLib: raw.dep_lib,
region: raw.region_etab_aff,
academie: raw.acad_mies,
contrat: raw.contrat_etab,
nom: brut.lib_for_voe_ins,
etablissement: brut.g_ea_lib_vx,
ville: brut.ville_etab,
departement: brut.dep,
departementLib: brut.dep_lib,
region: brut.region_etab_aff,
academie: brut.acad_mies,
contrat: brut.contrat_etab,
filiere: raw.fili,
selectivite: raw.select_form,
filiere: brut.fili,
selectivite: brut.select_form,
capacite: raw.capa_fin,
candidats: raw.voe_tot,
admis: raw.acc_tot,
tauxAcces: taux,
capacite: brut.capa_fin,
candidats: brut.voe_tot,
admis: brut.acc_tot,
tauxAcces: taux,
latitude: latitude,
longitude: longitude,
latitude: latitude,
longitude: longitude,
pctFemmes: raw.pct_f,
pctBoursiers: raw.pct_bours,
pctNeoBac: raw.pct_neobac,
pctFemmes: brut.pct_f,
pctBoursiers: brut.pct_bours,
pctNeoBac: brut.pct_neobac,
pctGeneral: raw.pct_bg,
pctTechno: raw.pct_bt,
pctPro: raw.pct_bp,
pctGeneral: brut.pct_bg,
pctTechno: brut.pct_bt,
pctPro: brut.pct_bp,
pctSansMention: raw.pct_sansmention,
pctAB: raw.pct_ab,
pctB: raw.pct_b,
pctTB: raw.pct_tb,
pctTBF: raw.pct_tbf,
pctSansMention: brut.pct_sansmention,
pctAB: brut.pct_ab,
pctB: brut.pct_b,
pctTB: brut.pct_tb,
pctTBF: brut.pct_tbf,
pctDebutPhase: raw.pct_acc_debutpp,
pctDateBac: raw.pct_acc_datebac,
pctFinPhase: raw.pct_acc_finpp,
pctDebutPhase: brut.pct_acc_debutpp,
pctDateBac: brut.pct_acc_datebac,
pctFinPhase: brut.pct_acc_finpp,
admisDebutPhase: raw.acc_debutpp,
admisDateBac: raw.acc_datebac,
admisFinPhase: raw.acc_finpp,
admisDebutPhase: brut.acc_debutpp,
admisDateBac: brut.acc_datebac,
admisFinPhase: brut.acc_finpp,
// phase principale
voePPGeneral: raw.nb_voe_pp_bg,
voePPTechno: raw.nb_voe_pp_bt,
voePPPro: raw.nb_voe_pp_bp,
voePPAutres: raw.nb_voe_pp_at,
voePPTotal: raw.nb_voe_pp,
// Phase principale
voePPGeneral: brut.nb_voe_pp_bg,
voePPTechno: brut.nb_voe_pp_bt,
voePPPro: brut.nb_voe_pp_bp,
voePPAutres: brut.nb_voe_pp_at,
voePPTotal: brut.nb_voe_pp,
classesPPGeneral: raw.nb_cla_pp_bg,
classesPPTechno: raw.nb_cla_pp_bt,
classesPPPro: raw.nb_cla_pp_bp,
classesPPAutres: raw.nb_cla_pp_at,
classesPPTotal: raw.nb_cla_pp,
classesPPGeneral: brut.nb_cla_pp_bg,
classesPPTechno: brut.nb_cla_pp_bt,
classesPPPro: brut.nb_cla_pp_bp,
classesPPAutres: brut.nb_cla_pp_at,
classesPPTotal: brut.nb_cla_pp,
propositionsPPGeneral: raw.prop_tot_bg,
propositionsPPTechno: raw.prop_tot_bt,
propositionsPPPro: raw.prop_tot_bp,
propositionsPPAutres: raw.prop_tot_at,
propositionsPPTotal: raw.prop_tot,
propositionsPPGeneral: brut.prop_tot_bg,
propositionsPPTechno: brut.prop_tot_bt,
propositionsPPPro: brut.prop_tot_bp,
propositionsPPAutres: brut.prop_tot_at,
propositionsPPTotal: brut.prop_tot,
acceptesPPGeneral: raw.acc_bg,
acceptesPPTechno: raw.acc_bt,
acceptesPPPro: raw.acc_bp,
acceptesPPAutres: raw.acc_at,
acceptesPPTotal: raw.acc_pp,
acceptesPPGeneral: brut.acc_bg,
acceptesPPTechno: brut.acc_bt,
acceptesPPPro: brut.acc_bp,
acceptesPPAutres: brut.acc_at,
acceptesPPTotal: brut.acc_pp,
// phase complémentaire
voePCGeneral: raw.nb_voe_pc_bg,
voePCTechno: raw.nb_voe_pc_bt,
voePCPro: raw.nb_voe_pc_bp,
voePCAutres: raw.nb_voe_pc_at,
voePCTotal: raw.nb_voe_pc,
// Phase complémentaire
voePCGeneral: brut.nb_voe_pc_bg,
voePCTechno: brut.nb_voe_pc_bt,
voePCPro: brut.nb_voe_pc_bp,
voePCAutres: brut.nb_voe_pc_at,
voePCTotal: brut.nb_voe_pc,
classesPCTotal: raw.nb_cla_pc,
acceptesPCTotal: raw.acc_pc
classesPCTotal: brut.nb_cla_pc,
acceptesPCTotal: brut.acc_pc
}
}
+5 -5
View File
@@ -23,8 +23,8 @@
<script src="./app.riot" type="riot"></script>
<script type="module">
import { fetchFormations, fetchFormationHistory } from './api.js'
import { createFormation } from './formation.js'
import { chargerFormations, chargerHistoriqueFormation } from './api.js'
import { creerFormation } from './formation.js'
import {
auth,
db,
@@ -36,9 +36,9 @@
loadUserData
} from './firebase.js'
window.fetchFormations = fetchFormations
window.createFormation = createFormation
window.fetchFormationHistory = fetchFormationHistory
window.chargerFormations = chargerFormations
window.creerFormation = creerFormation
window.chargerHistoriqueFormation = chargerHistoriqueFormation
window.firebaseServices = {
auth,