$

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>