Fix graph

components/line-graph.riot

@@ -10,19 +10,28 @@
 
             updateCanvas() {
                 let canvas = this.$("canvas")
+                canvas.width = canvas.clientWidth
+                canvas.height = canvas.clientHeight
+                
                 let cx = canvas.getContext("2d")
-
-                //Default context properties
                 cx.textBaseline = "middle"
                 cx.textAlign = "center"
                 
                 let width = canvas.width
                 let height = canvas.height
-                let spacing = 1 //Controls the spacing between each horizontal elements
+                let spacing = 1
 
                 let data = this.state.data
+                let colors = [
+                    "#003F5C",
+                    "#2F4B7C",
+                    "#665191",
+                    "#A05195",
+                    "#D45087"
+                ]
                 
                 cx.clearRect(0, 0, width, height)
+                cx.resetTransform()
                 if (!data) return;
 
                 cx.fillStyle = "#707070"
@@ -41,7 +50,7 @@
                     let barWidth = field.value / total * width - spacing * 2
                     let text = `${Math.round(field.value / total * 1000) / 10}% (${field.name})`
 
-                    cx.fillStyle = this.colors[counter]
+                    cx.fillStyle = colors[counter]
                     cx.fillRect(start, 0, barWidth, height / 3)
                     
                     cx.fillStyle = "#FFFFFF"
@@ -63,7 +72,7 @@
 
                 counter = 0
                 for (let field of data) {
-                    cx.fillStyle = this.colors[counter]
+                    cx.fillStyle = colors[counter]
                     cx.fillRect(0, 0, 25, 25)
                     cx.fillStyle = "#707070"
                     cx.fillText(field.name, 30, 12.5)
@@ -72,48 +81,18 @@
                 }
             },
 
+            state: {
+                data: [],
+                title: "Example"
+            },
+
             onMounted() {
-                this.colors = [
-                    "#003F5C",
-                    "#2F4B7C",
-                    "#665191",
-                    "#A05195",
-                    "#D45087"
-                ]
-
-                this.state.data = [
-                    {
-                        name: "P",
-                        value: 52
-                    },
-                    {
-                        name: "AB",
-                        value: 43
-                    },
-                    {
-                        name: "B",
-                        value: 2
-                    },
-                    {
-                        name: "TB",
-                        value: 1
-                    },
-                    {
-                        name: "TBF",
-                        value: 0
-                    },
-                ]
-
                 let canvas = this.$("canvas")
-                canvas.width = canvas.clientWidth
-                canvas.height = canvas.clientHeight
-
                 this.updateCanvas()
                 new ResizeObserver(this.updateCanvas).observe(canvas)
             },
 
             onUpdated(props, state) {
-                console.log("boop")
                 this.updateCanvas()
             }
         }

components/main-controller.riot

@@ -1,8 +1,8 @@
 <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 class="box p-3 m-2">
+                <img class="mt-1 ml-5 mr-auto" style="margin: auto;" src="../resources/logo-parcoursup.svg"/>
             </div>
 			<search></search>
 		</div>