$

src/components/global/api/View.js

@@ -6,6 +6,7 @@ export default class View {
         this.title = document.getElementById("selector-top-title")
         this.zone = document.getElementById("selector-list-zone")
         this.path = document.getElementById("loc")
+        this.stat = document.getElementById("generalytics")
         this.etab = document.getElementById("etablanalytics-list")
         this.btn = document.getElementById("selector-top-btn")
         this.btn.onclick = () => {
@@ -21,8 +22,8 @@ export default class View {
      *     <a>Tous les noms des formations par section</a>
      *     <span>Combien de formations dispo ?</span>
      * </li>
-     * @param data Donnees a afficher.
-     * @param title Titre de la section d'un menu.
+     * @param { array[json] } data Donnees a afficher.
+     * @param { string } title Titre de la section d'un menu.
      * */
     renderMenu(title, data) {
         this.title.innerText = title
@@ -50,7 +51,7 @@ export default class View {
 
     /**
      * Pour afficher en haut a gauche le chemin courant.
-     * @param { string[] } path Chemin courant.
+     * @param { array[string] } path Chemin courant.
      * */
     renderPath(path) {
         this.path.innerHTML = ""
@@ -67,7 +68,7 @@ export default class View {
 
     /**
      * Pour afficher en bas a gauche la liste.
-     * @param { json } data La liste des etablissements.
+     * @param { array[json] } data La liste des etablissements.
      * */
     renderEtab(data) {
         this.etab.innerHTML =
@@ -86,6 +87,9 @@ export default class View {
             let moy = "null"
             let selection = "null"
 
+            /**
+             * TODO: Transformer ca en composant riot (GALERE MAX)
+             * */
             let tr = document.createElement("tr")
 
             let td1 = document.createElement("td")
@@ -113,6 +117,188 @@ export default class View {
         })
     }
 
+    /**
+     * Envoyer dans l'encadrer avec les stats les graphiques
+     * @param { array[json] } data Les donnees pour calcule
+     * */
+    renderStat(data) {
+        this.stat.innerHTML = ""
+        let elem = document.createElement("generalysticsfragment")
+
+        /**
+         * Pour calculer le pourcentage en fonction du genre
+         * @param { array[json] } data
+         * @return {{ capacitycount: int, nformcount: int, selectivitycount: int }}
+         * */
+        const genStat = (data) => {
+            let nbformation = data.length
+
+            let totcapacity = 0
+            let capacity = 0
+
+
+            let totselectivity = 0
+            let selectivity = 0
+
+            data.forEach((e) => {
+                console.log(e.fields.select_form)
+                if(e.fields.select_form === "formation sélective") {
+                    totselectivity++
+                    selectivity++
+                } else {
+                    totselectivity++
+                }
+
+                totcapacity++
+                capacity += e.fields.capa_fin
+            })
+
+            let moyform = nbformation
+            let moycap = Math.round(capacity / totcapacity)
+            let moyselectivity = Math.round(selectivity / totselectivity)
+
+            console.log(capacity + " " + totcapacity +"\n" + selectivity + " " + totselectivity)
+            console.log(moyform + "\n" + moycap + "\n" + moyselectivity)
+
+            return {
+                capacitycount: moycap,
+                nformcount: moyform,
+                selectivitycount: moyselectivity
+            }
+        }
+
+        /**
+         * Pour calculer le pourcentage en fonction du genre
+         * @param { array[json] } data
+         * @return {{ man: string, woman: string }}
+         * */
+        const genderStat = (data) => {
+            let tot = 0
+            let woman = 0
+
+            data.forEach((e) => {
+                woman += e.fields.acc_tot_f
+                tot += e.fields.acc_tot
+            })
+
+            let man = tot - woman
+            let moywomen = Math.round(100 * woman / tot)
+            let moyman = Math.round(100 * man / tot)
+
+            return {
+                man: `${moyman}%`,
+                woman: `${moywomen}%`
+            }
+        }
+
+        /**
+         * Pour calculer le pourcentage en fonction du type de bac obtenu
+         * @param { array[json] } data
+         * @return {{ gen: string, tech: string, pro: string, autre: string}}
+         * */
+        const bacStat = (data) => {
+            let gen = 0
+            let pro = 0
+            let tech = 0
+            let autre = 0
+
+            data.forEach((e) => {
+                gen += e.fields.acc_bg
+                pro += e.fields.acc_bp
+                tech += e.fields.acc_bt
+                autre += e.fields.acc_at
+            })
+
+            let tot = gen + pro + tech + autre
+            let moygen = Math.round(100 * gen / tot)
+            let moytech = Math.round(100 * tech / tot)
+            let moypro = Math.round(100 * pro / tot)
+            let moyautre = Math.round(100 * autre / tot)
+
+            return {
+                gen: `${moygen}%`,
+                tech: `${moytech}%`,
+                pro: `${moypro}%`,
+                autre: `${moyautre}%`
+            }
+        }
+
+        /**
+         * Pour calculer le pourcentage en fonction de la mention au bac
+         * @param { array[json] } data
+         * @return {{ gen: string, tech: string, pro: string, autre: string}}
+         * */
+        const mentionStat = (data) => {
+            let p = 0
+            let ab = 0
+            let b = 0
+            let tb = 0
+            let tbf = 0
+
+            data.forEach((e) => {
+                p += e.fields.acc_sansmention
+                ab += e.fields.acc_ab
+                b += e.fields.acc_b
+                tb += e.fields.acc_tb
+                tbf += e.fields.acc_tbf
+            })
+
+            let tot = p + ab + b + tb + tbf
+            let moyp = Math.round(100 * p / tot)
+            let moyab = Math.round(100 * ab / tot)
+            let moyb = Math.round(100 * b / tot)
+            let moytb = Math.round(100 * tb / tot)
+            let moytbf = Math.round(100 * tbf / tot)
+
+            return {
+                p: `${moyp}%`,
+                b: `${moyb}%`,
+                ab: `${moyab}%`,
+                tb: `${moytb}%`,
+                tbf: `${moytbf}%`
+            }
+        }
+
+        let gender = genderStat(data)
+        let bac = bacStat(data)
+        let mention = mentionStat(data)
+        let gen = genStat(data)
+
+        if(data.length > 0) {
+            riot.mount(elem, {
+                capacitycount: gen.capacitycount,
+                nformcount: gen.nformcount,
+                selectivitycount: gen.selectivitycount,
+                manPercent: gender.man,
+                hstyle: `width: ${parseInt(gender.man.split("%")[0]) > 10 ? gender.man : `23%`};`,
+                womenPercent: gender.woman,
+                fstyle: `width: ${parseInt(gender.woman.split("%")[0]) > 10 ? gender.woman : `23%`};`,
+                nbacgen: bac.gen,
+                genstyle: `width: ${parseInt(bac.gen.split("%")[0]) > 10 ? bac.gen : `23%` };`,
+                nbacpro: bac.pro,
+                prostyle: `width: ${parseInt(bac.pro.split("%")[0]) > 10 ? bac.pro : `23%` };`,
+                nbactech: bac.tech,
+                techstyle: `width: ${parseInt(bac.tech.split("%")[0]) > 10 ? bac.tech : `23%` };`,
+                nbacautre: bac.autre,
+                autrestyle: `width: ${parseInt(bac.autre.split("%")[0]) > 10 ? bac.autre : `23%` };`,
+                nmentionp: mention.p,
+                pstyle: `width: ${parseInt(mention.p.split("%")[0]) > 10 ? bac.autre : `23%` };`,
+                nmentionb: mention.b,
+                bstyle: `width: ${parseInt(mention.b.split("%")[0]) > 10 ? bac.autre : `23%` };`,
+                nmentionab: mention.ab,
+                abstyle: `width: ${parseInt(mention.ab.split("%")[0]) > 10 ? bac.autre : `23%` };`,
+                nmentiontb: mention.tb,
+                tbstyle: `width: ${parseInt(mention.tb.split("%")[0]) > 10 ? bac.autre : `23%` };`,
+                nmentiontbf: mention.tbf,
+                tbfstyle: `width: ${parseInt(mention.tbf.split("%")[0]) > 10 ? bac.autre : `23%` };`
+
+            }, "generalysticsfragment")
+
+            this.stat.appendChild(elem)
+        }
+    }
+
+
     /**
      * Envoyer dans le controlleur tous les events fait.
      * @param { string } selection Ce qu'on va utiliser pour le &refine.
@@ -122,7 +308,7 @@ export default class View {
         if(direction) {
             window.updateModel(selection, direction)
         } else {
-            log("Selector->View",  "Mince, le menu ne veut pas s'ouvrir :(")
+            log("Selector->View",  "Mince, le menu ne veut pas se remplir :(")
         }
     }
 }