From 753cf67823adfcdc43645a10e4ea25d4b77eb21d Mon Sep 17 00:00:00 2001
From: "pro.boooooo" <pro.boudjemline@gmail.com>
Date: Tue, 7 Mar 2023 21:51:35 +0100
Subject: [PATCH] $

---
 src/app.riot                                  |   1 -
 .../global/generalytics/generalytics.riot     | 106 +++++++++++++++++-
 .../global/localisationpath/loc.riot          |   6 +
 src/components/global/selector/selector.riot  |   7 +-
 src/index.html                                |   2 +-
 src/pages/home.riot                           |  41 +++----
 6 files changed, 128 insertions(+), 35 deletions(-)

diff --git a/src/app.riot b/src/app.riot
index aa55dba..35650ec 100644
--- a/src/app.riot
+++ b/src/app.riot
@@ -56,7 +56,6 @@
 
     <style>
         :host {
-            padding: 6%;
             background: #B8CBD0;
             min-height: 100vh;
         }
diff --git a/src/components/global/generalytics/generalytics.riot b/src/components/global/generalytics/generalytics.riot
index dec8db3..94b6494 100644
--- a/src/components/global/generalytics/generalytics.riot
+++ b/src/components/global/generalytics/generalytics.riot
@@ -1,3 +1,107 @@
 <generalytics>
-    <p>gen</p>
+    <style>
+        #generalytics {
+            width: 60vw;
+            height: auto;
+            overflow: auto;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-glob {
+            padding: 20px;
+            background: red;
+            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 {
+            text-align: center;
+            background: blue;
+            color: white;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        .generalytics-gender-progress {
+
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender-m, #generalytics-stat-gender-f {
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #generalytics
+        #generalytics-stat-container
+        #generalytics-stat-gender
+        .generalytics-gender-progress {
+            background-color: #000;
+        }
+    </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-m">
+                    <span>Homme</span>
+                    <progress class="generalytics-gender-progress" max="100" min="40" value="80"/>
+                </div>
+
+                <div id="generalytics-stat-gender-f">
+                    <span>Femme</span>
+                    <progress class="generalytics-gender-progress" max="100" min="40" value="20"/>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </generalytics>
\ No newline at end of file
diff --git a/src/components/global/localisationpath/loc.riot b/src/components/global/localisationpath/loc.riot
index a136dab..478f4be 100644
--- a/src/components/global/localisationpath/loc.riot
+++ b/src/components/global/localisationpath/loc.riot
@@ -1,3 +1,9 @@
 <loc>
+    <script>
+        import * as riot from 'riot';
+    </script>
+
+    <style>
+    </style>
     <p>BUT - PRODUCTION - Informatique</p>
 </loc>
\ No newline at end of file
diff --git a/src/components/global/selector/selector.riot b/src/components/global/selector/selector.riot
index 89a17dc..b1e2bc8 100644
--- a/src/components/global/selector/selector.riot
+++ b/src/components/global/selector/selector.riot
@@ -1,13 +1,9 @@
 <selector>
     <style>
         #selector {
-            width: 500px;
+            width: 20vw;
             height: auto;
             max-height: 700px;
-            padding: 20px;
-            box-shadow: 0px 0px 9px 1px black;
-            background: #7A90A4;
-            border-radius: 10px;
             overflow: auto;
         }
 
@@ -20,6 +16,7 @@
             justify-content: space-between;
             position: relative;
             min-height: 100px;
+            gap: 3%;
         }
 
         #selector
diff --git a/src/index.html b/src/index.html
index 8a9b02f..51f5f79 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,9 +12,9 @@
         <style>
             #root {
                 display: flex;
+                flex-direction: row;
                 justify-content: center;
                 align-items: center;
-                flex-direction: row;
             }
         </style>
 
diff --git a/src/pages/home.riot b/src/pages/home.riot
index 7b722d6..5b3c63a 100644
--- a/src/pages/home.riot
+++ b/src/pages/home.riot
@@ -1,49 +1,36 @@
 <home>
 	<style>
 		#main-container {
+			position: relative;
 			display: flex;
 			flex-direction: row;
-			justify-content: center;
-			align-items: center;
-			gap: 10%;
+			justify-content: space-around;
 		}
 
 		#main-container
-		#left
-		generalytics {
-			margin-bottom: 5%;
-		}
-
-		#main-container
-		#left
-		generalytics, etablanalytics {
-			display: flex;
-			flex-direction: column;
-			width: 525px;
-			height: 300px;
+		#right, #left generalytics, #left etablanalytics {
 			padding: 20px;
 			box-shadow: 0px 0px 9px 1px black;
 			background: #7A90A4;
 			border-radius: 10px;
-
 		}
 
 		#main-container
-		#top
-		loc {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 200px;
-			height: 10px;
+		#right {
+			align-self: flex-start;
 		}
+
+		#main-container
+		#left {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-self: center;
+		}
+
 	</style>
 
 	<div id="main-container">
-		<div id="top">
-			<loc />
-		</div>
-
 		<div id="right">
 			<selector />
 		</div>