$

readme.md

@@ -3,7 +3,8 @@
 ### Probleme connu
 ```text
 Probleme 1 : Ingenieur, Ecole de commerce, Tout ce qui commence par "Formation"
-    Raison : Le model d'envoie de donnees ne prends pas en charge plus de 3 sections (changer les fonctions getModelDataN())
+    Raison : Le model d'envoie de donnees ne prends pas en charge le cas ou une formation = 2 sous sections 
+    (Faire des tests: donneesProchaineSection == null)
 
 Probleme 2 : Spammer peut faire bugger l'affichage du chemin
     Raison : Pas de timer ni de bloqueur (En rajouter ducoup lol)
@@ -16,7 +17,8 @@ depuis l'inspecteur, ca ne chargera plus jamais les categories
 ### IMPORTANT
 ```text
 Si ca ne s'affiche pas dans la milli seconde, pas besoin de forcer le boutton,
-faut juste attendre que le MVC receptionne les donnees.
+faut juste attendre que le MVC receptionne les donnees. Si ca persiste, supprimer le local storage
+inspecter l'element -> Application (ou stockage) -> Local Storage
 ```
 
 ### Documentation de riot : 

src/components/global/api/Controller.js

@@ -37,7 +37,7 @@ export default class Controller {
                 log("Selector->Controller",  "Action inconnue au bataillon (updateModel)")
             }
 
-            if(this.model.getTCat() != null) {
+            if(this.model.getTCat() !== null) {
                 this.getData(3).then()
                 this.getData(this.model.getCurIndex()).then()
             } else {
@@ -45,6 +45,7 @@ export default class Controller {
             }
         }
 
+        this.model.setSCat(null)
         log("Selector",  "Controller 3/3")
     }
 
@@ -71,6 +72,7 @@ export default class Controller {
         } else if(n === 3) {
             log("Selector->Controller",  "Requete de la liste des etablissements")
             this.model.getModelData3().then((res) => {
+                this.view.renderStat(res)
                 this.view.renderEtab(res)
             })
         } else {

src/components/global/api/Model.js

@@ -50,6 +50,7 @@ export default class Model {
      * */
     previousPage() {
         if(this.state.page.curIndex-1 >= 0) {
+            document.getElementById("generalytics").innerHTML = ""
             this.state.page.curIndex--
         }
     }
@@ -93,7 +94,7 @@ export default class Model {
 
     /**
      * Retourne le chemin filiaires - formations - formations detaillees
-     * @return { array[] } Le chemin.
+     * @return { array[string] } Le chemin.
      * */
     getPath() {
         return this.state.page.path
@@ -110,7 +111,7 @@ export default class Model {
 
     /**
      * Retourne la section 0 + l'enregistre dans le local storage
-     * @return { json } Le resultat.
+     * @return { array[json] | Promise } Le resultat.
      * */
     getModelData0() {
         if(!localStorage.getItem(`sec0`)) {
@@ -136,7 +137,7 @@ export default class Model {
 
     /**
      * Retourne la section 1 + l'enregistre dans le local storage
-     * @return { json } les donnees demandees en JSON
+     * @return { array[json] | Promise } les donnees demandees en JSON
      * */
     getModelData1() {
         if(!localStorage.getItem(`sec1-${this.state.page.cat}`)) {
@@ -166,7 +167,7 @@ export default class Model {
     /**
      * Retourne la section 2 + l'enregistre dans le local storage
      * PS: Generalement c'est ici que il y a possibilite de ne pas avoir de 3eme section
-     * @return { json } les donnees demandees en JSON
+     * @return { array[json] | Promise } les donnees demandees en JSON
      * */
     getModelData2() {
         if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) {
@@ -196,7 +197,7 @@ export default class Model {
 
     /**
      * Retourne la liste d'etablissement
-     * @return { json } les donnees demandees en JSON
+     * @return { array[json] | Promise } les donnees demandees en JSON
      * */
     getModelData3() {
         if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`)) {
@@ -207,7 +208,6 @@ export default class Model {
                 `&refine.${this.state.api.facet.filiaire}=${this.state.page.cat}` +
                 `&refine.${this.state.api.facet.formation}=${this.state.page.scat}` +
                 `&refine.${this.state.api.facet.spec}=${this.state.page.tcat}`
-
             console.log(link)
 
             return fetch(link)

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 { array[json] } data Donnees a afficher.
-     * @param title Titre de la section d'un menu.
+     * @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 :(")
         }
     }
 }

src/components/global/generalytics/generalysticsfragment.riot

@@ -9,29 +9,36 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            height: 15vw;
-        }
-
-        #generalysticsfragment
-        #generalysticsfragment-percent {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: row-reverse;
-            width: 100%;
             color: white;
+            text-align: center;
             font-weight: bold;
         }
 
         #generalysticsfragment
-        #generalysticsfragment-percent
+        #generalysticsfragment-gender, #generalysticsfragment-bac, #generalysticsfragment-mention {
-        #woman, #man {
+            margin-top: 2%;
-            padding: 5px;
+            width: 100%;
-            text-align: center;
         }
 
         #generalysticsfragment
-        #generalysticsfragment-percent
+        #generalysticsfragment-gender-percent, #generalysticsfragment-bac-percent, #generalysticsfragment-mention-percent  {
+            display: flex;
+            gap: 0.2vw;
+            justify-content: center;
+            align-items: center;
+            flex-direction: row-reverse;
+            width: 100%;
+            max-width: 100%;
+        }
+
+        #generalysticsfragment
+        #woman, #man, #bacgen, #bacpro, #bactechno, #bacautre, #p, #ab, #b, #tb, #tbf {
+            padding: 5px;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-gender
+        #generalysticsfragment-gender-percent
         #woman {
             border-top-left-radius: 14px;
             border-bottom-left-radius: 14px;
@@ -39,7 +46,8 @@
         }
 
         #generalysticsfragment
-        #generalysticsfragment-percent
+        #generalysticsfragment-gender
+        #generalysticsfragment-gender-percent
         #man {
             border-top-right-radius: 14px;
             border-bottom-right-radius: 14px;
@@ -47,7 +55,7 @@
         }
 
         #generalysticsfragment
-        #generalysticsfragment-legend {
+        #generalysticsfragment-gender-legend, #generalysticsfragment-bac-legend, #generalysticsfragment-mention-legend {
             width: 100%;
             display: flex;
             flex-direction: row-reverse;
@@ -58,40 +66,231 @@
         }
 
         #generalysticsfragment
-        #generalysticsfragment-legend
+        .generalysticsfragment-legend-container {
-        #generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            color: white;
-            font-weight: bold;
         }
 
         #generalysticsfragment
-        #generalysticsfragment-legend
         .generalysticsfragment-legend-square {
             width: 40px;
             height: 40px;
         }
 
         #generalysticsfragment
-        #generalysticsfragment-legend
+        #generalysticsfragment-gender
-        #generalysticsfragment-legend-container-h
+        #generalysticsfragment-gender-legend
+        .generalysticsfragment-legend-container
         #generalysticsfragment-legend-h {
             background: royalblue;
         }
 
         #generalysticsfragment
-        #generalysticsfragment-legend
+        #generalysticsfragment-gender
-        #generalysticsfragment-legend-container-f
+        #generalysticsfragment-gender-legend
+        .generalysticsfragment-legend-container
         #generalysticsfragment-legend-f {
             background: mediumpurple;
         }
-    </style>
 
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-percent
+        #bacgen {
+            border-top-left-radius: 14px;
+            border-bottom-left-radius: 14px;
+            background: mediumpurple;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-percent
+        #bacpro {
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-percent
+        #bactechno {
+            background: saddlebrown;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-percent
+        #bacautre {
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+            background: olive;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-gen {
+            background: mediumpurple;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-pro {
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-tech {
+            background: saddlebrown;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-bac
+        #generalysticsfragment-bac-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-autre {
+            background: olive;
+        }
+
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #p {
+            border-top-left-radius: 14px;
+            border-bottom-left-radius: 14px;
+            background: mediumpurple;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #ab {
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #b {
+            background: saddlebrown;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #b {
+            background: saddlebrown;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #tb {
+            background: olive;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-percent
+        #tbf {
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+            background: darkred;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-p {
+            background: mediumpurple;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-ab {
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-b {
+            background: saddlebrown;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-tb {
+            background: olive;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-mention
+        #generalysticsfragment-mention-legend
+        .generalysticsfragment-legend-container
+        #generalysticsfragment-legend-tbf {
+            background: darkred;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-gen {
+            background: #344D59;
+            padding: 1.1vw;
+            border-top-right-radius: 15px;
+            border-bottom-left-radius: 15px;
+            width:  25vw;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-gen
+        .generalysticsfragment-gen-component {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-gen
+        .generalysticsfragment-gen-component
+        #generalysticsfragment-gen-progress {
+            width: 15vw;
+        }
+
+    </style>
     <div id="generalysticsfragment">
-        <div id="generalysticsfragment-percent">
+        <div id="generalysticsfragment-gen">
+            <div class="generalysticsfragment-gen-component">
+                <span class="generalysticsfragment-gen-text">Nb formations</span>
+                <span class="generalysticsfragment-gen-text">{ this.props.nformcount }</span>
+            </div>
+
+            <div class="generalysticsfragment-gen-component">
+                <span class="generalysticsfragment-gen-text">Capacite</span>
+                <span class="generalysticsfragment-gen-text">{ this.props.capacitycount }</span>
+            </div>
+
+            <div class="generalysticsfragment-gen-component">
+                <span class="generalysticsfragment-gen-text">{ `Selectivite (${this.props.selectivitycount})%`}</span>
+                <progress id="generalysticsfragment-gen-progress" max="100" value={ this.props.selectivitycount } />
+            </div>
+        </div>
+
+        <div id="generalysticsfragment-gender">
+            <span>Repartition par genre</span>
+            <div id="generalysticsfragment-gender-percent">
                 <span style={ this.props.hstyle } id="man">
                     { this.props.manPercent } (H)
                 </span>
@@ -101,28 +300,146 @@
                 </span>
             </div>
 
-        <div id="generalysticsfragment-legend">
+            <div id="generalysticsfragment-gender-legend">
-            <div id="generalysticsfragment-legend-container-h">
+                <div class="generalysticsfragment-legend-container">
                     <div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
                     <span>H</span>
                 </div>
 
-
+                <div class="generalysticsfragment-legend-container">
-            <div id="generalysticsfragment-legend-container-f">
                     <div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
                     <span>F</span>
                 </div>
+            </div>
+        </div>
 
+        <div id="generalysticsfragment-bac">
+            <span>Repartition par bac</span>
+            <div id="generalysticsfragment-bac-percent">
+                <span style={ this.props.autrestyle } id="bacautre">
+                    { this.props.nbacautre } (Aut)
+                </span>
+
+                <span style={ this.props.techstyle } id="bactechno">
+                    { this.props.nbactech } (Tech)
+                </span>
+
+                <span style={ this.props.prostyle } id="bacpro">
+                    { this.props.nbacpro } (Pro)
+                </span>
+
+                <span style={ this.props.genstyle } id="bacgen">
+                    { this.props.nbacgen } (Gen)
+                </span>
+            </div>
+
+            <div id="generalysticsfragment-bac-legend">
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-autre" class="generalysticsfragment-legend-square"></div>
+                    <span>Aut</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-tech" class="generalysticsfragment-legend-square"></div>
+                    <span>Tech</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-pro" class="generalysticsfragment-legend-square"></div>
+                    <span>Pro</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-gen" class="generalysticsfragment-legend-square"></div>
+                    <span>Gen</span>
+                </div>
+            </div>
+        </div>
+
+        <div id="generalysticsfragment-mention">
+            <span>Repartition par mention</span>
+            <div id="generalysticsfragment-mention-percent">
+                <span style={ this.props.tbfstyle } id="tbf">
+                    { this.props.nmentiontbf } (TFB)
+                </span>
+
+                <span style={ this.props.tbstyle } id="tb">
+                    { this.props.nmentiontb } (TB)
+                </span>
+
+                <span style={ this.props.bstyle } id="b">
+                    { this.props.nmentionb } (B)
+                </span>
+
+                <span style={ this.props.abstyle } id="ab">
+                    { this.props.nmentionab } (AB)
+                </span>
+
+                <span style={ this.props.pstyle } id="p">
+                    { this.props.nmentionp } (P)
+                </span>
+            </div>
+
+            <div id="generalysticsfragment-mention-legend">
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-tbf" class="generalysticsfragment-legend-square"></div>
+                    <span>TBF</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-tb" class="generalysticsfragment-legend-square"></div>
+                    <span>TB</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-b" class="generalysticsfragment-legend-square"></div>
+                    <span>B</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-ab" class="generalysticsfragment-legend-square"></div>
+                    <span>AB</span>
+                </div>
+
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-p" class="generalysticsfragment-legend-square"></div>
+                    <span>P</span>
+                </div>
+            </div>
         </div>
     </div>
 
     <script>
         export default {
             props: [
+                "nformcount",
+                "capacitycount",
+                "selectivitycount",
+
                 "manPercent",
                 "womanPercent",
                 "hstyle",
-                "fstyle"
+                "fstyle",
+
+                "nbacgen",
+                "genstyle",
+                "nbacpro",
+                "prostyle",
+                "nbactech",
+                "techstyle",
+                "nbacautre",
+                "autrestyle",
+
+                "nmentionp",
+                "pstyle",
+                "nmentionab",
+                "abstyle",
+                "nmentionb",
+                "bstyle",
+                "nmentiontb",
+                "tbstyle",
+                "nmentiontbf",
+                "tbfstyle",
             ]
         }
     </script>

src/components/global/generalytics/generalytics.riot

@@ -14,24 +14,4 @@
     <div id="generalytics">
     </div>
 
-    <script>
-        import * as riot from "riot";
-
-        export default {
-            onMounted() {
-                const path = document.getElementById("generalytics")
-
-                let ga = document.createElement("generalysticsfragment")
-                riot.mount(ga, {
-                    manPercent: "98%",
-                    womenPercent: "2%",
-                    hstyle: "width: 90%;",
-                    fstyle: "width: 8%;"
-                }, "generalysticsfragment")
-
-                path.appendChild(ga)
-            }
-        }
-    </script>
-
 </generalytics>