From c1ddbd9205bc14849d99a4388df520b5baa5c3d7 Mon Sep 17 00:00:00 2001
From: Bilal <bilal@boudjemline.fr>
Date: Fri, 10 Mar 2023 16:54:11 +0100
Subject: [PATCH] $

---
 src/components/global/api/View.js             |   7 +-
 .../generalytics/generalysticsfragment.riot   | 129 ++++++
 .../global/generalytics/generalytics.riot     | 396 +-----------------
 src/pages/home.riot                           |   3 +
 4 files changed, 156 insertions(+), 379 deletions(-)
 create mode 100644 src/components/global/generalytics/generalysticsfragment.riot

diff --git a/src/components/global/api/View.js b/src/components/global/api/View.js
index e9afada..cffe84e 100644
--- a/src/components/global/api/View.js
+++ b/src/components/global/api/View.js
@@ -35,13 +35,13 @@ export default class View {
                     this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
                 }
 
-                this.zone.appendChild(elem)
-
                 riot.mount(elem, {
                     name: e.name,
                     count: e.count,
                     idd: `menu0-${e.name}`
                 }, "selectorfragment")
+
+                this.zone.appendChild(elem)
             })
         }
 
@@ -55,12 +55,13 @@ export default class View {
     renderPath(path) {
         this.path.innerHTML = ""
         let elem = document.createElement("locfragment")
-        this.path.appendChild(elem)
 
         riot.mount(elem, {
             msg: path.filter(Boolean).join(" ► ")
         }, "locfragment")
 
+        this.path.appendChild(elem)
+
         log("Loc->View",  `Chemin change ${path}`)
     }
 
diff --git a/src/components/global/generalytics/generalysticsfragment.riot b/src/components/global/generalytics/generalysticsfragment.riot
new file mode 100644
index 0000000..f213a8c
--- /dev/null
+++ b/src/components/global/generalytics/generalysticsfragment.riot
@@ -0,0 +1,129 @@
+<!--
+    Composant servant a faire les progressbar dans #left
+-->
+
+<generalysticsfragment>
+    <style>
+        #generalysticsfragment {
+            display: flex;
+            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;
+            font-weight: bold;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-percent
+        #woman, #man {
+            padding: 5px;
+            text-align: center;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-percent
+        #woman {
+            border-top-left-radius: 14px;
+            border-bottom-left-radius: 14px;
+            background: mediumpurple;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-percent
+        #man {
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-legend {
+            width: 100%;
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: center;
+            align-items: center;
+            gap: 2vw;
+            margin-top: 1vw;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-legend
+        #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-legend-container-h
+        #generalysticsfragment-legend-h {
+            background: royalblue;
+        }
+
+        #generalysticsfragment
+        #generalysticsfragment-legend
+        #generalysticsfragment-legend-container-f
+        #generalysticsfragment-legend-f {
+            background: mediumpurple;
+        }
+    </style>
+
+    <div id="generalysticsfragment">
+        <div id="generalysticsfragment-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-legend">
+            <div id="generalysticsfragment-legend-container-h">
+                <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>
+
+        </div>
+    </div>
+
+    <script>
+        export default {
+            props: [
+                "manPercent",
+                "womanPercent",
+                "hstyle",
+                "fstyle"
+            ]
+        }
+    </script>
+</generalysticsfragment>
\ No newline at end of file
diff --git a/src/components/global/generalytics/generalytics.riot b/src/components/global/generalytics/generalytics.riot
index 0d9fd20..23dbdbc 100644
--- a/src/components/global/generalytics/generalytics.riot
+++ b/src/components/global/generalytics/generalytics.riot
@@ -9,385 +9,29 @@
             padding: 1vw;
             overflow: auto;
         }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-glob {
-            color: white;
-            display: flex;
-            flex-direction: column;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-glob
-        .generalytics-stat-atom {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-glob
-        .generalytics-stat-atom
-        #generalytics-stat-progress {
-            width: 40vw;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender, #generalytics-stat-bac, #generalytics-stat-mention {
-            text-align: center;
-            color: white;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender-progressbar-container, #generalytics-stat-bac-progressbar-container, #generalytics-stat-mention-progressbar-container {
-            padding: 10px;
-            display: flex;
-            width: 100%;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender-legend, #generalytics-stat-bac-legend, #generalytics-stat-mention-legend {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            gap: 3%;
-            align-items: center;
-        }
-
-        /*
-        * A PARTIR DE LA FAUT AUTOMATISER (C'est juste pour chopper le model)
-        */
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender
-        #generalytics-stat-gender-progressbar-container
-        .generalytics-stat-gender-progressbar-h {
-            border-top-right-radius: 1vw;
-            border-bottom-right-radius: 1vw;
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender
-        #generalytics-stat-gender-progressbar-container
-        .generalytics-stat-gender-progressbar-f {
-            border-top-left-radius: 1vw;
-            border-bottom-left-radius: 1vw;
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-progressbar-container
-        .generalytics-stat-bac-progressbar-gen {
-            border-top-left-radius: 1vw;
-            border-bottom-left-radius: 1vw;
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-progressbar-container
-        .generalytics-stat-bac-progressbar-tech {
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-progressbar-container
-        .generalytics-stat-bac-progressbar-pro {
-            background: green;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-progressbar-container
-        .generalytics-stat-bac-progressbar-aut {
-            border-top-right-radius: 1vw;
-            border-bottom-right-radius: 1vw;
-            background: saddlebrown;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-progressbar-container
-        .generalytics-stat-mention-progressbar-r {
-            border-top-left-radius: 1vw;
-            border-bottom-left-radius: 1vw;
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-progressbar-container
-        .generalytics-stat-mention-progressbar-ab {
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-progressbar-container
-        .generalytics-stat-mention-progressbar-b {
-            background: green;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-progressbar-container
-        .generalytics-stat-mention-progressbar-tb {
-            background: saddlebrown;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-progressbar-container
-        .generalytics-stat-mention-progressbar-tbf {
-            border-top-right-radius: 1vw;
-            border-bottom-right-radius: 1vw;
-            background: darkred;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        .generalytics-stat-legend-square {
-            width: 2vw;
-            height: 2vw;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender
-        #generalytics-stat-gender-legend
-        #generalytics-stat-gender-legend-h
-        .generalytics-stat-legend-square {
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-gender
-        #generalytics-stat-gender-legend
-        #generalytics-stat-gender-legend-f
-        .generalytics-stat-legend-square {
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-legend
-        #generalytics-stat-bac-legend-gen
-        .generalytics-stat-legend-square {
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-legend
-        #generalytics-stat-bac-legend-tech
-        .generalytics-stat-legend-square {
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-legend
-        #generalytics-stat-bac-legend-pro
-        .generalytics-stat-legend-square {
-            background: green;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-bac
-        #generalytics-stat-bac-legend
-        #generalytics-stat-bac-legend-autre
-        .generalytics-stat-legend-square {
-            background: saddlebrown;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-legend
-        #generalytics-stat-mention-legend-r
-        .generalytics-stat-legend-square {
-            background: purple;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-legend
-        #generalytics-stat-mention-legend-ab
-        .generalytics-stat-legend-square {
-            background: royalblue;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-legend
-        #generalytics-stat-mention-legend-b
-        .generalytics-stat-legend-square {
-            background: green;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-legend
-        #generalytics-stat-mention-legend-tb
-        .generalytics-stat-legend-square {
-            background: saddlebrown;
-        }
-
-        #generalytics
-        #generalytics-stat-container
-        #generalytics-stat-mention
-        #generalytics-stat-mention-legend
-        #generalytics-stat-mention-legend-tbf
-        .generalytics-stat-legend-square {
-            background: darkred;
-        }
     </style>
 
     <div id="generalytics">
-        <div id="generalytics-stat-container">
-            <div id="generalytics-stat-glob" >
-                <div class="generalytics-stat-atom">
-                    <span>Moyenne</span>
-                    <span>342</span>
-                </div>
-
-                <div class="generalytics-stat-atom">
-                    <span>Nb formations</span>
-                    <span>49</span>
-                </div>
-
-                <div class="generalytics-stat-atom">
-                    <span>Capacite</span>
-                    <span>38</span>
-                </div>
-
-                <div class="generalytics-stat-atom">
-                    <span>Selectivite (50%)</span>
-                    <progress id="generalytics-stat-progress" max="100" min="40" value="50"/>
-                </div>
-            </div>
-
-            <div id="generalytics-stat-gender">
-                <span>Repartition par genre</span>
-
-                <div id="generalytics-stat-gender-progressbar-container">
-                    <span class="generalytics-stat-gender-progressbar-f" style="width: 15%;">15% (F)</span>
-                    <span class="generalytics-stat-gender-progressbar-h" style="width: 85%;">85% (H)</span>
-                </div>
-
-                <div id="generalytics-stat-gender-legend">
-                    <div id="generalytics-stat-gender-legend-f">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>F</span>
-                    </div>
-
-                    <div id="generalytics-stat-gender-legend-h">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>H</span>
-                    </div>
-                </div>
-            </div>
-
-            <div id="generalytics-stat-bac">
-                <span>Repartition par bac</span>
-
-                <div id="generalytics-stat-bac-progressbar-container">
-                    <span class="generalytics-stat-bac-progressbar-gen" style="width: 20%;">20% (Gen.)</span>
-                    <span class="generalytics-stat-bac-progressbar-tech" style="width: 30%;">30% (Tech.)</span>
-                    <span class="generalytics-stat-bac-progressbar-pro" style="width: 25%;">25% (Pro.)</span>
-                    <span class="generalytics-stat-bac-progressbar-aut" style="width: 25%;">0% (Aut.)</span>
-                </div>
-
-                <div id="generalytics-stat-bac-legend">
-                    <div id="generalytics-stat-bac-legend-gen">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>Gen</span>
-                    </div>
-
-                    <div id="generalytics-stat-bac-legend-tech">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>Techno</span>
-                    </div>
-
-                    <div id="generalytics-stat-bac-legend-pro">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>Pro</span>
-                    </div>
-
-                    <div id="generalytics-stat-bac-legend-autre">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>Aut</span>
-                    </div>
-                </div>
-            </div>
-
-            <div id="generalytics-stat-mention">
-                <span>Repartition par mention au bac</span>
-
-                <div id="generalytics-stat-mention-progressbar-container">
-                    <span class="generalytics-stat-mention-progressbar-r" style="width: 10%;">10% (R)</span>
-                    <span class="generalytics-stat-mention-progressbar-ab" style="width: 10%;">10% (AB)</span>
-                    <span class="generalytics-stat-mention-progressbar-b" style="width: 40%;">40% (B)</span>
-                    <span class="generalytics-stat-mention-progressbar-tb" style="width: 29%;">29% (TB)</span>
-                    <span class="generalytics-stat-mention-progressbar-tbf" style="width: 10%;">10% (TBF)</span>
-                </div>
-
-                <div id="generalytics-stat-mention-legend">
-                    <div id="generalytics-stat-mention-legend-r">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>R</span>
-                    </div>
-
-                    <div id="generalytics-stat-mention-legend-ab">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>AB</span>
-                    </div>
-
-                    <div id="generalytics-stat-mention-legend-b">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>B</span>
-                    </div>
-
-                    <div id="generalytics-stat-mention-legend-tb">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>TB</span>
-                    </div>
-
-                    <div id="generalytics-stat-mention-legend-tbf">
-                        <div class="generalytics-stat-legend-square"></div>
-                        <span>TBF</span>
-                    </div>
-                </div>
-            </div>
-        </div>
     </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>
\ No newline at end of file
diff --git a/src/pages/home.riot b/src/pages/home.riot
index d692702..671b006 100644
--- a/src/pages/home.riot
+++ b/src/pages/home.riot
@@ -4,7 +4,10 @@
 			position: relative;
 			display: flex;
 			flex-direction: row;
+			justify-content: center;
+			align-items: center;
 			justify-content: space-around;
+			margin-top: 2%;
 		}
 
 		#home