ajout % femme et selectivité et moyenne

index.html

@@ -9,7 +9,6 @@
     <script src="./riot/choixformation.riot" type="riot"></script>
     <script src="./riot/app.riot" type="riot"></script>
     <script src="./riot/statistiqueFormation.riot" type="riot"></script>
-    <script src="./js/model.js" type="text/javascript"></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>
@@ -18,11 +17,12 @@
     <app></app>
     <script>
 
-        riot.compile().then(() => {
+    localStorage.clear()
-            riot.mount('app', {})
+
-        })
+    riot.compile().then(() => {
+        riot.mount('app', {})
+    })
 
-        localStorage.clear()
     </script>
 </body>
 </html>

riot/app.riot

@@ -1,11 +1,11 @@
 <app>
 <div class="columns">
-    <div class="column is-one-third">
+    <div class="column is-two-fifths">
-        <choixformation isSelected={isSelected}></choixformation>
+        <choixformation isSelected={isSelected} reset={reset}></choixformation>
     </div>
     
     <div class="column">
-        <statistiqueFormation formation={state.filiere} choix={state.choix}> </statistiqueFormation>
+        <statistiqueFormation statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} pct_femme={state.pct_femme}> </statistiqueFormation>
     </div>
 </div>
 
@@ -15,16 +15,141 @@
       onBeforeMount(props, state) {
         // initial state
         this.state = {
-          choix: '',
+          statistique: '',
-          filiere: ''
+          selectivite: '',
+          moyenne: '',
+          pct_femme: ''
         };
       },
-      isSelected(formation, fili){
+
+      async isSelected(detail, type){
+        this.getData(detail, type)
+      },
+
+      reset(){
         this.update({
-          choix: formation,
+          statistique: '',
-          filiere: fili
+          selectivite: '',
+          moyenne: '',
+          pct_femme: ''
         })
-      }
+      },
+
+      async getData(detail, type){
+        if(!localStorage.getItem(`${type}+${detail}`)){
+          let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=session&facet=contrat_etab&facet=cod_uai&facet=g_ea_lib_vx&facet=dep_lib&facet=region_etab_aff&facet=acad_mies&facet=ville_etab&facet=lib_for_voe_ins&facet=select_form&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&facet=detail_forma&facet=tri&facet=cod_aff_form&facet=etablissement_id_paysage&facet=composante_id_paysage&refine.form_lib_voe_acc=${encodeURIComponent(type)}&refine.fil_lib_voe_acc=${encodeURIComponent(detail)}&timezone=Europe%2FBerlin&rows=352&refine.sexe=F`);
+          rep = await rep.json();
+
+          localStorage.setItem(`${type}+${detail}`, JSON.stringify(rep))
+          this.update({
+            statistique: rep
+          })
+        }else{
+          this.update({
+            statistique: JSON.parse(localStorage.getItem(`${type}+${detail}`))
+          })
+        }
+        this.calcule()
+      },
+
+
+      getSelectivite(records){
+        let total = records.length
+        let gen = records.reduce(function (accumulateur, valeurCourante) {
+            if(valeurCourante.fields.taux_acces_ens){
+                return accumulateur + (valeurCourante.fields.taux_acces_ens)
+            }else{
+                return accumulateur
+            }
+        }, 0);
+        
+        this.update({
+            selectivite: Math.round(gen/total)-1
+        })
+      },
+
+      getMoyenne(records){
+        
+        let gen = records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tb){
+              accumulateur +=  (valeurCourante.fields.acc_tb*16)
+          }
+          if(valeurCourante.fields.acc_ab){
+              accumulateur += (valeurCourante.fields.acc_ab*12)
+          }
+          if(valeurCourante.fields.acc_b){
+              accumulateur +=  (valeurCourante.fields.acc_b*14)
+          }
+          if(valeurCourante.fields.acc_tbf){
+              accumulateur +=  (valeurCourante.fields.acc_tbf*18)
+          }
+          if(valeurCourante.fields.sansmention){
+              accumulateur += (valeurCourante.fields.sansmention*10)
+          }
+          if(valeurCourante.fields.acc_mention_nonrenseigne){
+              accumulateur += (valeurCourante.fields.acc_mention_nonrenseigne*10)
+          }
+          return accumulateur;
+        }, 0);
+
+
+        let total = records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tb){
+              accumulateur +=  (valeurCourante.fields.acc_tb)
+          }
+          if(valeurCourante.fields.acc_ab){
+              accumulateur += (valeurCourante.fields.acc_ab)
+          }
+          if(valeurCourante.fields.acc_b){
+              accumulateur +=  (valeurCourante.fields.acc_b)
+          }
+          if(valeurCourante.fields.acc_tbf){
+              accumulateur +=  (valeurCourante.fields.acc_tbf)
+          }
+          if(valeurCourante.fields.sansmention){
+              accumulateur += (valeurCourante.fields.sansmention)
+          }
+          if(valeurCourante.fields.acc_mention_nonrenseigne){
+              accumulateur += (valeurCourante.fields.acc_mention_nonrenseigne)
+          }
+          return accumulateur;
+        }, 0);
+
+        this.update({
+            moyenne: (Math.round(gen/total*100))/100
+        })
+      },
+
+      getPctFemme(records){
+        let femme=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tot_f){
+            //nombre de femme
+            accumulateur +=  (valeurCourante.fields.acc_tot_f)
+          }
+
+          return accumulateur;
+        }, 0);
+
+        let total=records.reduce(function (accumulateur, valeurCourante) {
+          if(valeurCourante.fields.acc_tot_f){
+            //nombre d'admis
+            accumulateur +=  (valeurCourante.fields.acc_tot)
+          }
+
+          return accumulateur;
+        }, 0);
+
+        this.update({
+            pct_femme: Math.round(femme/total*100)
+        })
+      },
+
+      calcule(){
+        this.getSelectivite(this.state.statistique.records)
+        this.getMoyenne(this.state.statistique.records)
+        this.getPctFemme(this.state.statistique.records)
+      },
+
     }
   }
 

riot/choixformation.riot

@@ -166,10 +166,13 @@
       },
 
       changeDetail(e){
-        this.update({
+        if(e.target.id != this.state.detail){
-          detail: e.target.id
+          this.update({
-        })
+            detail: e.target.id
-        this.props.isSelected(this.state.detail, this.state.type)
+          })
+          this.props.reset()
+          this.props.isSelected(this.state.detail, this.state.type)
+        }
       },
 
       search(e){
@@ -185,6 +188,7 @@
           type: '',
           detail: ''
         })
+        this.props.reset()
         this.getFili();
       },
 
@@ -194,6 +198,7 @@
           detail: '',
           type: ''
         })
+        this.props.reset()
         this.getType()
       },
 
@@ -202,6 +207,7 @@
           recherche: '',
           detail: ''
         })
+        this.props.reset()
       }
 
     };

riot/statistiqueFormation.riot

@@ -1,20 +1,23 @@
 <statistiqueFormation>
-<div class="box p-5 my-5" if={isPossible(props.formation, props.choix)}>
+<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">13.1</span></p>
+        <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">80</span></p>
+        <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
-        <p>Capacité : <span class="is-pulled-right">122</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="46">
+                <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">(46%)</p>
+                            <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
                         </div>
                         <div class="column pl-0">
-                            <progress max="100" class="progress is-warning" value="54"></progress>
+                            <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>
@@ -23,18 +26,18 @@
     </div>
     
 
-    <bar-chart label="Répartition par genre">
+    <bar-chart label="Répartition par genre" if={props.pct_femme}>
         <div class="bar-chart block m-5">
             <div class="has-text-centered block is-size-5">
             <h2 class="is-unselectable">Répartition par genre</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:52%;background-color:#003f5c;">
+                <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.pct_femme}%;background-color:#003f5c;">
-                <p class="has-text-centered m-1 has-text-white is-unselectable">52%</p>
+                <p class="has-text-centered m-1 has-text-white is-unselectable">{props.pct_femme}%</p>
                 </div>
-                <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:48%;background-color:#f95d6a;">
+                <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{100-props.pct_femme}%;background-color:#f95d6a;">
-                <p class="has-text-centered m-1 has-text-white is-unselectable">48%</p>
+                <p class="has-text-centered m-1 has-text-white is-unselectable">{100-props.pct_femme}%</p>
                 </div>
             </div>
             <div class="columns is-mobile is-justify-content-center">
@@ -63,14 +66,17 @@
             </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:51%;background-color:#003f5c;">
+                    <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">51%</p>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:49%;background-color:#2f4b7c;">
+                    <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">49%</p>
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
                     </div>
-                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:1%;background-color:#665191;">
+                    <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">1%</p>
+                        <p class="has-text-centered m-1  is-unselectable">%</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>
                 </div>
                 <div class="columns is-mobile is-justify-content-center">
@@ -166,24 +172,20 @@ export default function todos() {
       onBeforeMount(props, state) {
         // initial state
         this.state = {
-          statistique: ''
+            pct_femme: ''
         };
       },
-      isPossible(fili, formation){
+
-        if(fili && formation){
+      load(){
-            this.getStatistique(fili, formation)
-            return true
-        }else{
-            return false;
-        }
       },
 
-      async getStatistique(fili, formation){
+      
-        let rep=await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=session&facet=contrat_etab&facet=cod_uai&facet=g_ea_lib_vx&facet=dep_lib&facet=region_etab_aff&facet=acad_mies&facet=ville_etab&facet=lib_for_voe_ins&facet=select_form&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&facet=detail_forma&facet=tri&facet=cod_aff_form&facet=etablissement_id_paysage&facet=composante_id_paysage&refine.form_lib_voe_acc=${encodeURIComponent(fili)}&refine.fil_lib_voe_acc=${encodeURIComponent(formation)}&timezone=Europe%2FBerlin`)
+
-        rep=await rep.json();
+      reset(){
-        console.log(JSON.stringify(rep))
       }
+      
     }
+
   }
 </script>
 </statistiqueFormation>