progrès

javascript/fili-info.js

@@ -1,7 +1,31 @@
 var filiInfo = {
   css: null,
   exports: null,
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div class="box p-1 m-2"></div>', []),
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<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 expr249="expr249" style="height: 6rem;"></line-graph></div><div class="m-4"><line-graph expr250="expr250" style="height: 6rem;"></line-graph></div><div class="m-4"><line-graph expr251="expr251" style="height: 6rem;"></line-graph></div></div>', [{
+    type: bindingTypes.TAG,
+    getComponent: getComponent,
+    evaluate: _scope => 'line-graph',
+    slots: [],
+    attributes: [],
+    redundantAttribute: 'expr249',
+    selector: '[expr249]'
+  }, {
+    type: bindingTypes.TAG,
+    getComponent: getComponent,
+    evaluate: _scope => 'line-graph',
+    slots: [],
+    attributes: [],
+    redundantAttribute: 'expr250',
+    selector: '[expr250]'
+  }, {
+    type: bindingTypes.TAG,
+    getComponent: getComponent,
+    evaluate: _scope => 'line-graph',
+    slots: [],
+    attributes: [],
+    redundantAttribute: 'expr251',
+    selector: '[expr251]'
+  }]),
   name: 'fili-info'
 };
 

javascript/line-graph.js

@@ -15,9 +15,15 @@ var lineGraph = {
       let data = this.state.data;
       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;
@@ -32,6 +38,20 @@ var lineGraph = {
         }
         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++;
       }
     },
     onMounted() {
@@ -56,9 +76,14 @@ var lineGraph = {
       canvas.width = canvas.clientWidth;
       canvas.height = canvas.clientHeight;
       this.updateCanvas();
+      new ResizeObserver(this.updateCanvas).observe(canvas);
+    },
+    onUpdated(props, state) {
+      console.log("boop");
+      this.updateCanvas();
     }
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit; width: inherit; padding: inherit; margin: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit; width: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
   name: 'line-graph'
 };
 

javascript/main-controller.js

@@ -1,38 +1,38 @@
 var mainController = {
   css: null,
   exports: {},
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div class="columns"><div class="column is-one-third"><search expr19="expr19"></search></div><div class="column"><fili-info expr20="expr20"></fili-info><school expr21="expr21"></school></div></div><school-info expr22="expr22"></school-info>', [{
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div class="columns"><div class="column is-one-third"><div class="box p-2 m-2"><img src="../resources/logo-parcoursup.svg"/></div><search expr41="expr41"></search></div><div class="column"><fili-info expr42="expr42"></fili-info><school expr43="expr43"></school></div></div><school-info expr44="expr44"></school-info>', [{
     type: bindingTypes.TAG,
     getComponent: getComponent,
     evaluate: _scope => 'search',
     slots: [],
     attributes: [],
-    redundantAttribute: 'expr19',
-    selector: '[expr19]'
+    redundantAttribute: 'expr41',
+    selector: '[expr41]'
   }, {
     type: bindingTypes.TAG,
     getComponent: getComponent,
     evaluate: _scope => 'fili-info',
     slots: [],
     attributes: [],
-    redundantAttribute: 'expr20',
-    selector: '[expr20]'
+    redundantAttribute: 'expr42',
+    selector: '[expr42]'
   }, {
     type: bindingTypes.TAG,
     getComponent: getComponent,
     evaluate: _scope => 'school',
     slots: [],
     attributes: [],
-    redundantAttribute: 'expr21',
-    selector: '[expr21]'
+    redundantAttribute: 'expr43',
+    selector: '[expr43]'
   }, {
     type: bindingTypes.TAG,
     getComponent: getComponent,
     evaluate: _scope => 'school-info',
     slots: [],
     attributes: [],
-    redundantAttribute: 'expr22',
-    selector: '[expr22]'
+    redundantAttribute: 'expr44',
+    selector: '[expr44]'
   }]),
   name: 'main-controller'
 };

javascript/school-info.js

@@ -10,14 +10,14 @@ var schoolInfo = {
       this.update();
     }
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div expr16="expr16" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;"></div>', [{
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div expr26="expr26" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;"></div>', [{
     type: bindingTypes.IF,
     evaluate: _scope => _scope.state.enabled,
-    redundantAttribute: 'expr16',
-    selector: '[expr16]',
-    template: template('<div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF"><button expr17="expr17">X</button><p><h2></h2></p><line-graph expr18="expr18" style="height: 90px; margin: 10px;"></line-graph></div>', [{
-      redundantAttribute: 'expr17',
-      selector: '[expr17]',
+    redundantAttribute: 'expr26',
+    selector: '[expr26]',
+    template: template('<div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF"><button expr27="expr27" class="delete is-medium">X</button><p><h2></h2></p><line-graph expr28="expr28" style="height: 90px; margin: 10px;"></line-graph></div>', [{
+      redundantAttribute: 'expr27',
+      selector: '[expr27]',
       expressions: [{
         type: expressionTypes.EVENT,
         name: 'onclick',
@@ -29,8 +29,8 @@ var schoolInfo = {
       evaluate: _scope => 'line-graph',
       slots: [],
       attributes: [],
-      redundantAttribute: 'expr18',
-      selector: '[expr18]'
+      redundantAttribute: 'expr28',
+      selector: '[expr28]'
     }])
   }]),
   name: 'school-info'