debut stat

css/style.css

@@ -0,0 +1 @@
+@import url(./bulam.css);

index.html

@@ -4,10 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <link rel="stylesheet" href="css/style.css">
     <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/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>

riot/app.riot

@@ -1,15 +1,29 @@
 <app>
-<choixformation isSelected={isSelected}></choixformation>
+<div class="columns">
+    <div class="column is-one-third">
+        <choixformation isSelected={isSelected}></choixformation>
+    </div>
+    
+    <div class="column">
+        <statistiqueFormation formation={state.filiere} choix={state.choix}> </statistiqueFormation>
+    </div>
+</div>
+
 <script>
   export default function todos() {
     return {
       onBeforeMount(props, state) {
         // initial state
         this.state = {
+          choix: '',
+          filiere: ''
         };
       },
-      isSelected(formation){
+      isSelected(formation, fili){
-        console.log(formation +"is selected")
+        this.update({
+          choix: formation,
+          filiere: fili
+        })
       }
     }
   }

riot/choixformation.riot

@@ -1,7 +1,6 @@
 <choixformation>
 <suiviformation formation={state.filiere} type={state.type} detail={state.detail} resetToDetail={resetToDetail} resetToFili={resetToFili} resetToType={resetToType}></suiviformation>
 
-  <div class="column is-4 m-5">
     <search-list start="start" label="Formation">
       <div class="control has-icons-left">
         <input class="input" type="search" placeholder="Formation" id="input" oninput={search} if={!state.filiere}>
@@ -70,7 +69,6 @@
         </div>
       </my-list>
     </search-list>
-  </div>
   <script>
   export default function todos() {
     return {
@@ -110,7 +108,7 @@
         if(!localStorage.getItem(`${this.state.filiere}`)){
           try {
 
-            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=form_lib_voe_acc&refine.fili=${this.state.filiere}&timezone=Europe%2FBerlin`);
+            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=form_lib_voe_acc&refine.fili=${encodeURIComponent(this.state.filiere)}&timezone=Europe%2FBerlin`);
             rep = await rep.json();
             localStorage.setItem(`${this.state.filiere}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
               this.update({
@@ -129,8 +127,9 @@
       async getDetails() {
         if(!localStorage.getItem(`${this.state.type}`)){
           try {
+          
 
-            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${this.state.type}&timezone=Europe%2FBerlin`);
+            let rep = await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${encodeURIComponent(this.state.type)}&timezone=Europe%2FBerlin`);
             rep = await rep.json();
             localStorage.setItem(`${this.state.type}`, JSON.stringify(rep["facet_groups"][0]["facets"]))
               this.update({
@@ -170,7 +169,7 @@
         this.update({
           detail: e.target.id
         })
-        this.props.isSelected(e.target.id)
+        this.props.isSelected(this.state.detail, this.state.type)
       },
 
       search(e){

riot/statistiqueFormation.riot

@@ -0,0 +1,189 @@
+<statistiqueFormation>
+<div class="box p-5 my-5" if={isPossible(props.formation, props.choix)}>
+
+    <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>Nombre de formations : <span class="is-pulled-right">80</span></p>
+        <p>Capacité : <span class="is-pulled-right">122</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">
+                    <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>
+                        </div>
+                        <div class="column pl-0">
+                            <progress max="100" class="progress is-warning" value="54"></progress>
+                        </div>
+                    </div>
+                </progress-bar>
+            </div>
+        </div>
+    </div>
+    
+
+    <bar-chart label="Répartition par genre">
+        <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;">
+                <p class="has-text-centered m-1 has-text-white is-unselectable">52%</p>
+                </div>
+                <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:48%;background-color:#f95d6a;">
+                <p class="has-text-centered m-1 has-text-white is-unselectable">48%</p>
+                </div>
+            </div>
+            <div class="columns is-mobile is-justify-content-center">
+                <div class="column is-narrow">
+                <span class="icon-text">
+                    <span class="icon" title="Femme" style="background-color:#003f5c"></span>
+                    <span class="is-unselectable">F</span>
+                </span>
+                </div>
+                <div class="column is-narrow">
+                <span class="icon-text">
+                    <span class="icon" title="Homme" style="background-color:#f95d6a"></span>
+                    <span class="is-unselectable">H</span>
+                </span>
+                </div>
+            </div>
+            </div>
+        </div>
+    </bar-chart>
+
+
+    <bar-chart label="Répartition par bac">
+        <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:51%;background-color:#003f5c;">
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">51%</p>
+                    </div>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:49%;background-color:#2f4b7c;">
+                        <p class="has-text-centered m-1 has-text-white is-unselectable">49%</p>
+                    </div>
+                    <div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:1%;background-color:#665191;">
+                        <p class="has-text-centered m-1  is-unselectable">1%</p>
+                    </div>
+                </div>
+                <div class="columns is-mobile is-justify-content-center">
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Général" style="background-color:#003f5c"></span>
+                            <span class="is-unselectable">Gen</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Technologique" style="background-color:#2f4b7c"></span>
+                            <span class="is-unselectable">Tech</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Professionnel" style="background-color:#665191"></span>
+                            <span class="is-unselectable">Pro</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Autre" style="background-color:#a05195"></span>
+                            <span class="is-unselectable">Aut</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </bar-chart>
+
+    <bar-chart label="Répartition par mention au bac">
+        <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>
+                    <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>
+                    <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>
+                    <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>
+                </div>
+                <div class="columns is-mobile is-justify-content-center">
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Passable" style="background-color:#003f5c"></span>
+                            <span class="is-unselectable">P</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Assez Bien" style="background-color:#2f4b7c"></span>
+                            <span class="is-unselectable">AB</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Bien" style="background-color:#665191"></span>
+                            <span class="is-unselectable">B</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Très Bien" style="background-color:#a05195"></span>
+                            <span class="is-unselectable">TB</span>
+                        </span>
+                    </div>
+                    <div class="column is-narrow">
+                        <span class="icon-text">
+                            <span class="icon" title="Très Bien avec Félicitation du jury" style="background-color:#f95d6a"></span>
+                            <span class="is-unselectable">TBF</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </bar-chart>
+</div>
+
+<script>
+export default function todos() {
+    return {
+      onBeforeMount(props, state) {
+        // initial state
+        this.state = {
+          statistique: ''
+        };
+      },
+      isPossible(fili, formation){
+        if(fili && formation){
+            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();
+        console.log(JSON.stringify(rep))
+      }
+    }
+  }
+</script>
+</statistiqueFormation>