progrès

components/fili-info.riot

@@ -1,6 +1,21 @@
 <fili-info>
     <div class="box p-1 m-2">
-
+        <h1 class="title is-4 m-2"><a>BUT</a>  /  <a>BUT - Production</a>  /  <a>Informatique</a></h1>
+        <div class="box mt-2" style="background-color: #EAEAEA; margin: auto; width: 60%;">
+            <p>Moyenne des admis<span class="is-pulled-right">19.3</span></p>
+            <p>Nombre de formations<span class="is-pulled-right">5</span></p>
+            <p>Capacité<span class="is-pulled-right">90</span></p>
+            <p>Sélectivité</p>
+        </div>
+        <div class="m-4">
+            <line-graph style="height: 6rem;"></line-graph>
+        </div>
+        <div class="m-4">
+            <line-graph style="height: 6rem;"></line-graph>
+        </div>
+        <div class="m-4">
+            <line-graph style="height: 6rem;"></line-graph>
+        </div>
     </div>
 
     <script>

components/line-graph.riot

@@ -1,6 +1,6 @@
 <line-graph>
 
-    <div style="height: inherit; width: inherit; padding: inherit; margin: inherit;">
+    <div style="height: inherit; width: inherit;">
         <canvas style="height: 100%; width: 100%;">
         </canvas>
     </div>
@@ -25,10 +25,17 @@
                 cx.clearRect(0, 0, width, height)
                 if (!data) return;
 
+                cx.fillStyle = "#707070"
+                cx.font = "15px Arial"
+                cx.fillText("This is an example title", width / 2, 10)
+                cx.font = "10px Arial"
+                cx.translate(0, 20)
+
                 let total = data.reduce((total, current) => total + current.value, 0)
 
                 let curr = 0
                 let counter = 0
+                let legendWidth = 0
                 for (let field of data) {
                     let start = curr + spacing
                     let barWidth = field.value / total * width - spacing * 2
@@ -46,6 +53,22 @@
 
                     curr += field.value / total * width
                     counter++
+
+                    legendWidth += cx.measureText(field.name).width + 25 + 15 // += textWidth + squareWidth + margin
+                }
+
+                cx.textAlign = "left"
+                legendWidth -= 15 //On enlève la dernière marge
+                cx.translate(width / 2 - legendWidth / 2, height / 4 + 20)
+
+                counter = 0
+                for (let field of data) {
+                    cx.fillStyle = this.colors[counter]
+                    cx.fillRect(0, 0, 25, 25)
+                    cx.fillStyle = "#707070"
+                    cx.fillText(field.name, 30, 12.5)
+                    cx.translate(cx.measureText(field.name).width + 25 + 15, 0)
+                    counter++
                 }
             },
 
@@ -86,6 +109,12 @@
                 canvas.height = canvas.clientHeight
 
                 this.updateCanvas()
+                new ResizeObserver(this.updateCanvas).observe(canvas)
+            },
+
+            onUpdated(props, state) {
+                console.log("boop")
+                this.updateCanvas()
             }
         }
     </script>

components/main-controller.riot

@@ -1,6 +1,9 @@
 <main-controller>
     <div class="columns">
 		<div class="column is-one-third">
+            <div class="box p-2 m-2">
+                <img src="../resources/logo-parcoursup.svg"/>
+            </div>
 			<search></search>
 		</div>
 
@@ -14,7 +17,7 @@
 
     <script>
         export default {
-            
+
         }
     </script>
 

components/school-info.riot

@@ -1,7 +1,7 @@
 <school-info>
     <div if={state.enabled} style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;">
         <div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF">
-            <button onclick={closeWindow}>X</button>
+            <button class="delete is-medium" onclick={closeWindow}>X</button>
             <p>
                 <h2></h2>
             </p>