$

2023-03-11 06:34:46 +01:00
parent c1ddbd9205
commit a9ea7148d3
6 changed files with 563 additions and 76 deletions
--- a/src/components/global/api/Controller.js
+++ b/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 {
--- a/src/components/global/api/Model.js
+++ b/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)
--- a/src/components/global/api/View.js
+++ b/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 :(")
        }
    }
 }
--- a/src/components/global/generalytics/generalysticsfragment.riot
+++ b/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
-        #woman, #man {
-            padding: 5px;
-            text-align: center;
+        #generalysticsfragment-gender, #generalysticsfragment-bac, #generalysticsfragment-mention {
+            margin-top: 2%;
+            width: 100%;
        }

        #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,71 +66,380 @@
        }

        #generalysticsfragment
-        #generalysticsfragment-legend
-        #generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
+        .generalysticsfragment-legend-container {
            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-legend-container-h
+        #generalysticsfragment-gender
+        #generalysticsfragment-gender-legend
+        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-h {
            background: royalblue;
        }

        #generalysticsfragment
-        #generalysticsfragment-legend
-        #generalysticsfragment-legend-container-f
+        #generalysticsfragment-gender
+        #generalysticsfragment-gender-legend
+        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-f {
            background: mediumpurple;
        }
+
+        #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">
-            <span style={ this.props.hstyle } id="man">
-                { this.props.manPercent } (H)
-            </span>
+        <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>

-            <span style={ this.props.fstyle } id="woman">
-                { this.props.womenPercent } (F)
-            </span>
+            <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-legend">
-            <div id="generalysticsfragment-legend-container-h">
-                <div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
-                <span>H</span>
+        <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>
+
+                    <span style={ this.props.fstyle } id="woman">
+                    { this.props.womenPercent } (F)
+                </span>
            </div>

+            <div id="generalysticsfragment-gender-legend">
+                <div class="generalysticsfragment-legend-container">
+                    <div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
+                    <span>H</span>
+                </div>

-            <div id="generalysticsfragment-legend-container-f">
-                <div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
-                <span>F</span>
+                <div class="generalysticsfragment-legend-container">
+                    <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>
--- a/src/components/global/generalytics/generalytics.riot
+++ b/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>