From 6502ab8c7d19c94e3fe497fca10ea8598d8b853e Mon Sep 17 00:00:00 2001
From: martins <clement.martins@etu.u-pec.fr>
Date: Wed, 29 Mar 2023 16:57:34 +0200
Subject: [PATCH] =?UTF-8?q?ajout=20liste=20des=20formation=20avec=20toutes?=
=?UTF-8?q?=20les=20stats=20ainsi=20que=20la=20capacite,=20les=20%=20de=20?=
=?UTF-8?q?femmes,=20r=C3=A9partition=20par=20bac=20et=20par=20mention?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +
js/model.js | 21 -------
riot/app.riot | 107 +++++++++++++++++++++++++++++++--
riot/pourcentageForma.riot | 38 ++++++++++++
riot/statistiqueFormation.riot | 72 ++++++----------------
riot/tableuFormation.riot | 103 +++++++++++++++++++++++++++++++
6 files changed, 264 insertions(+), 79 deletions(-)
delete mode 100644 js/model.js
create mode 100644 riot/pourcentageForma.riot
create mode 100644 riot/tableuFormation.riot
diff --git a/index.html b/index.html
index c8523f4..ae77e36 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,9 @@
<script src="./riot/suiviformation.riot" type="riot"></script>
<script src="./riot/choixformation.riot" type="riot"></script>
<script src="./riot/app.riot" type="riot"></script>
+ <script src="./riot/pourcentageForma.riot" type="riot"></script>
<script src="./riot/statistiqueFormation.riot" type="riot"></script>
+ <script src="./riot/tableuFormation.riot" type="riot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>S4WEB</title>
</head>
diff --git a/js/model.js b/js/model.js
deleted file mode 100644
index 2848164..0000000
--- a/js/model.js
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-async function getFiliere(search){
- try {
- let xhr=new XMLHttpRequest();
- xhr.open("get", `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&sort=tri&facet=fili&timezone=Europe%2FBerlin&q=${search}`);
- xhr.responseType = "json";
-
- xhr.onload=() =>{
- if(xhr.status == 200){
- resolbe(xhr.response)
- }else{
- PromiseRejectionEvent(xhr.statusText)
- }
- }
-
- xhr.onerror= () => PromiseRejectionEvent("Erreur Reseau");
- return xhr.send();
- } catch (error){}
- return null;
- }
diff --git a/riot/app.riot b/riot/app.riot
index 9da30c0..7ed1a47 100644
--- a/riot/app.riot
+++ b/riot/app.riot
@@ -5,7 +5,13 @@
</div>
<div class="column">
- <statistiqueFormation statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} pct_femme={state.pct_femme}> </statistiqueFormation>
+ <div class="box p-5 my-5" if={state.statistique!=''}>
+ <pourcentageForma statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} capacite={state.capacite}></pourcentageForma>
+ <statistiqueFormation pct_femme={state.pct_femme} repartitionBac={state.pct_Bac} repartitionMention={state.repartitionMention}></statistiqueFormation>
+ </div>
+ <div class="box p-5 my-5" if={state.statistique!=''}>
+ <tableuFormation records={state.statistique.records}></tableuFormation>
+ </div>
</div>
</div>
@@ -18,7 +24,10 @@
statistique: '',
selectivite: '',
moyenne: '',
- pct_femme: ''
+ pct_femme: '',
+ pct_Bac: '',
+ capacite: '',
+ repartitionMention: ''
};
},
@@ -31,7 +40,10 @@
statistique: '',
selectivite: '',
moyenne: '',
- pct_femme: ''
+ pct_femme: '',
+ pct_Bac: '',
+ capacite: '',
+ repartitionMention: ''
})
},
@@ -64,7 +76,7 @@
}, 0);
this.update({
- selectivite: Math.round(gen/total)-1
+ selectivite: Math.round(gen/total)
})
},
@@ -144,10 +156,97 @@
})
},
+ getRepartitionBac(records){
+
+ let general=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_bg){
+ accumulateur += (valeurCourante.fields.acc_bg)
+ }
+ return accumulateur;
+ }, 0);
+
+ let pro=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_bp){
+ accumulateur += (valeurCourante.fields.acc_bp)
+ }
+ return accumulateur;
+ }, 0);
+
+ let tecno=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_bt){
+ accumulateur += (valeurCourante.fields.acc_bt)
+ }
+ return accumulateur;
+ }, 0);
+
+ let total=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_neobac){
+ accumulateur += (valeurCourante.fields.acc_neobac)
+ }
+ if(valeurCourante.fields.acc_at){
+ accumulateur += (valeurCourante.fields.acc_at)
+ }
+ return accumulateur;
+ }, 0);
+
+ let autre=total - (general+tecno+pro);
+
+ this.update({
+ capacite: Math.round(total/records.length),
+ pct_Bac: new Array(Math.round(general/total*100), Math.round(tecno/total*100), Math.round(pro/total*100), Math.round(autre/total*100))
+ })
+ },
+
+ getRepartitionMention(records){
+
+ let sans=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_sansmention){
+ accumulateur += (valeurCourante.fields.acc_sansmention)
+ }
+ return accumulateur;
+ }, 0);
+
+ let assez=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_ab){
+ accumulateur += (valeurCourante.fields.acc_ab)
+ }
+ return accumulateur;
+ }, 0);
+
+ let bien=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_b){
+ accumulateur += (valeurCourante.fields.acc_b)
+ }
+ return accumulateur;
+ }, 0);
+
+ let tres=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_tb){
+ accumulateur += (valeurCourante.fields.acc_tb)
+ }
+ return accumulateur;
+ }, 0);
+
+ let felicitation=records.reduce(function (accumulateur, valeurCourante) {
+ if(valeurCourante.fields.acc_tbf){
+ accumulateur += (valeurCourante.fields.acc_tbf)
+ }
+ return accumulateur;
+ }, 0);
+
+ let total=sans+assez+bien+tres+felicitation;
+
+ this.update({
+ repartitionMention: new Array(Math.round(sans/total*100), Math.round(assez/total*100), Math.round(bien/total*100), Math.round(tres/total*100), Math.round(felicitation/total*100))
+ })
+ },
+
calcule(){
this.getSelectivite(this.state.statistique.records)
this.getMoyenne(this.state.statistique.records)
this.getPctFemme(this.state.statistique.records)
+ this.getRepartitionBac(this.state.statistique.records)
+ this.getRepartitionMention(this.state.statistique.records)
},
}
diff --git a/riot/pourcentageForma.riot b/riot/pourcentageForma.riot
new file mode 100644
index 0000000..32dab24
--- /dev/null
+++ b/riot/pourcentageForma.riot
@@ -0,0 +1,38 @@
+<pourcentageForma>
+ <div class="recap box has-background-light has-text-weight-normal">
+ <p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
+ <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
+ <p>Capacité : <span class="is-pulled-right" if={props.capacite}>{props.capacite}</span></p>
+ <div class="is-flex m-0">
+ <p class="column is-5 p-0">Sélectivité :</p>
+ <div class="column p-0">
+ <progress-bar select={props.getSelectivite} if={props.selectivite}>
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-narrow pr-1">
+ <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
+ </div>
+ <div class="column pl-0">
+ <progress class="progress is-info" value="{100-props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
+ <progress class="progress is-success" value="{100-props.selectivite}" max="100" if={props.selectivite >= 50 && props.selectivite < 75}>{props.selectivite}%</progress>
+ <progress class="progress is-warning" value="{100-props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>
+ <progress class="progress is-danger" value="{100-props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
+ </div>
+ </div>
+ </progress-bar>
+ </div>
+ </div>
+ </div>
+ <script>
+ export default function todos() {
+ return {
+ onBeforeMount(props, state) {
+ // initial state
+ this.state = {
+ };
+ }
+ }
+ }
+
+ </script>
+
+</pourcentageForma>
\ No newline at end of file
diff --git a/riot/statistiqueFormation.riot b/riot/statistiqueFormation.riot
index e619e24..c2c9c12 100644
--- a/riot/statistiqueFormation.riot
+++ b/riot/statistiqueFormation.riot
@@ -1,30 +1,4 @@
<statistiqueFormation>
-<div class="box p-5 my-5" if={props.statistique} onload={load()} unload={reset()}>
-
- <div class="recap box has-background-light has-text-weight-normal">
- <p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
- <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
- <p>Capacité : <span class="is-pulled-right"></span></p>
- <div class="is-flex m-0">
- <p class="column is-5 p-0">Sélectivité :</p>
- <div class="column p-0">
- <progress-bar select={props.getSelectivite} if={props.selectivite}>
- <div class="columns is-mobile is-vcentered">
- <div class="column is-narrow pr-1">
- <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
- </div>
- <div class="column pl-0">
- <progress class="progress is-info" value="{props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
- <progress class="progress is-success" value="{props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>
- <progress class="progress is-warning" value="{props.selectivite}" max="100" if={props.selectivite > 50 && props.selectivite < 75}>{props.selectivite}%</progress>
- <progress class="progress is-danger" value="{props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
- </div>
- </div>
- </progress-bar>
- </div>
- </div>
- </div>
-
<bar-chart label="Répartition par genre" if={props.pct_femme}>
<div class="bar-chart block m-5">
@@ -59,24 +33,24 @@
</bar-chart>
- <bar-chart label="Répartition par bac">
+ <bar-chart label="Répartition par bac" if={props.repartitionBac}>
<div class="bar-chart block m-5">
<div class="has-text-centered block is-size-5">
<h2 class="is-unselectable">Répartition par bac</h2>
</div>
<div class="is-size-7">
<div class="columns is-mobile is-vcentered">
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#003f5c;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[0]}%;background-color:#003f5c;" if={props.repartitionBac[0] >0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[0]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#2f4b7c;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[1]}%;background-color:#2f4b7c;" if={props.repartitionBac[1] >0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[1]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#665191;">
- <p class="has-text-centered m-1 is-unselectable">%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[2]}%;background-color:#665191;" if={props.repartitionBac[2] >0}>
+ <p class="has-text-centered m-1 is-unselectable">{props.repartitionBac[2]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#a05195;">
- <p class="has-text-centered m-1 is-unselectable">%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[3]}%;background-color:#a05195;" if={props.repartitionBac[3] >0}>
+ <p class="has-text-centered m-1 is-unselectable">{props.repartitionBac[3]}%</p>
</div>
</div>
<div class="columns is-mobile is-justify-content-center">
@@ -109,24 +83,24 @@
</div>
</bar-chart>
- <bar-chart label="Répartition par mention au bac">
+ <bar-chart label="Répartition par mention au bac" if={props.repartitionMention}>
<div class="bar-chart block m-5">
<div class="has-text-centered block is-size-5">
<h2 class="is-unselectable">Répartition par mention au bac</h2>
</div>
<div class="is-size-7">
<div class="columns is-mobile is-vcentered">
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:28%;background-color:#003f5c;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">28%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[0]}%;background-color:#003f5c;"if={props.repartitionMention[0] > 0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[0]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:45%;background-color:#2f4b7c;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">45%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[1]}%;background-color:#2f4b7c;" if={props.repartitionMention[1] > 0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[1]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:24%;background-color:#665191;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">24%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[2]}%;background-color:#665191;" if={props.repartitionMention[2] > 0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[2]}%</p>
</div>
- <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:4%;background-color:#a05195;">
- <p class="has-text-centered m-1 has-text-white is-unselectable">4%</p>
+ <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[3]}%;background-color:#a05195;" if={props.repartitionMention[3] > 0}>
+ <p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[3]}%</p>
</div>
</div>
<div class="columns is-mobile is-justify-content-center">
@@ -164,7 +138,6 @@
</div>
</div>
</bar-chart>
-</div>
<script>
export default function todos() {
@@ -172,16 +145,7 @@ export default function todos() {
onBeforeMount(props, state) {
// initial state
this.state = {
- pct_femme: ''
};
- },
-
- load(){
- },
-
-
-
- reset(){
}
}
diff --git a/riot/tableuFormation.riot b/riot/tableuFormation.riot
new file mode 100644
index 0000000..fd7715d
--- /dev/null
+++ b/riot/tableuFormation.riot
@@ -0,0 +1,103 @@
+<tableuFormation>
+<div class="scrollable" style="overflow-x: auto">
+ <my-table>
+ <div class="field is-grouped is-grouped-multiline">
+ </div>
+ <table class="table is-fullwidth is-hoverable tableFixHead">
+ <thead>
+ <tr>
+ <th class="has-text-link">Nom
+ <span class="is-clickable">
+ <span class="icon">
+ <i class="fas fa-sort"></i>
+ </span>
+ </span>
+ </th>
+ <th class="has-text-link">Ville
+ <span class="is-clickable">
+ <span class="icon">
+ <i class="fas fa-sort"></i>
+ </span>
+ </span>
+ </th>
+ <th class="has-text-link">Dpt
+ <span class="is-clickable">
+ <span class="icon">
+ <i class="fas fa-sort"></i>
+ </span>
+ </span>
+ </th>
+ <th class="has-text-link">Moyenne
+ <span class="is-clickable">
+ <span class="icon">
+ <i class="fas fa-sort"></i>
+ </span>
+ </span>
+ </th>
+ <th class="has-text-link">Selectivité
+ <span class="is-clickable">
+ <span class="icon">
+ <i class="fas fa-sort"></i>
+ </span>
+ </span>
+ </th>
+ </tr>
+ </thead>
+ <tbody each={item in props.records}>
+ <tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;">
+ <td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td><progress-bar select="{getSelectivite(item)}">
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-narrow pr-1"><p class="has-text-right has-text-weight-bold">{getSelectivite(item)}%</p></div>
+ <div class="column pl-0">
+ <progress class="progress is-info" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 75}> {getSelectivite(item)}%</progress>
+ <progress class="progress is-success" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 50 && getSelectivite(item) < 75}>{getSelectivite(item)}%</progress>
+ <progress class="progress is-warning" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) > 25 && getSelectivite(item) < 50}>{getSelectivite(item)}%</progress>
+ <progress class="progress is-danger" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) <= 25}>{getSelectivite(item)}%</progress>
+ </div></div></progress-bar></td>
+ </tr>
+ </tbody>
+ </table>
+ </my-table>
+</div>
+<script>
+
+
+export default function todos() {
+ return {
+ onBeforeMount(props, state) {
+ // initial state
+ this.state = {
+ };
+ },
+
+ getMoyenne(item){
+
+ let sans=item.fields.acc_sansmention
+ let assez=item.fields.acc_ab
+ let bien=item.fields.acc_b
+ let tres=item.fields.acc_tb
+ let felicitation=item.fields.acc_tbf
+
+ let total=sans+assez+bien+felicitation;
+
+ sans=sans*10;
+ assez=assez*12
+ bien=bien*14
+ tres=tres*16
+ felicitation=felicitation*18
+
+ console.log(sans+" "+assez+" "+bien+" "+tres+" "+felicitation)
+
+ return Math.round((sans+assez+bien+felicitation)/total*100)/100
+ },
+
+ getSelectivite(item){
+ return item.fields.taux_acces_ens;
+ }
+
+ }
+
+}
+</script>
+
+</tableuFormation>
\ No newline at end of file