Commencement line-graph.riot, on remplace les appels de search par ceux de PAPI

components/line-graph.riot

@@ -0,0 +1,92 @@
+<line-graph>
+
+    <div style="height: inherit;">
+        <canvas style="height: 100%; width: 100%;">
+        </canvas>
+    </div>
+
+    <script>
+        export default {
+
+            updateCanvas() {
+                let canvas = this.$("canvas")
+                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 data = this.state.data
+                
+                cx.clearRect(0, 0, width, height)
+                if (!data) return;
+
+                let total = data.reduce((total, current) => total + current.value, 0)
+
+                let curr = 0
+                let counter = 0
+                for (let field of data) {
+                    let start = curr + spacing
+                    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.fillRect(start, 0, barWidth, height / 3)
+                    
+                    cx.fillStyle = "#FFFFFF"
+                    if (cx.measureText(text).width < barWidth) {
+                        cx.fillText(text, start + barWidth / 2, height / 6)
+                    } else if (cx.measureText("...").width < barWidth) {
+                        cx.fillText("...", start + barWidth / 2, height / 6)
+                    }
+
+                    curr += field.value / total * width
+                    counter++
+                }
+            },
+
+            onMounted() {
+                this.colors = [
+                    "#003F5C",
+                    "#2F4B7C",
+                    "#665191",
+                    "#A05195",
+                    "#D45087"
+                ]
+
+                this.state.data = [
+                    {
+                        name: "P",
+                        value: 100
+                    },
+                    {
+                        name: "AB",
+                        value: 200
+                    },
+                    {
+                        name: "B",
+                        value: 150
+                    },
+                    {
+                        name: "TB",
+                        value: 50
+                    },
+                    {
+                        name: "TBF",
+                        value: 50
+                    },
+                ]
+
+                let canvas = this.$("canvas")
+                canvas.width = canvas.clientWidth
+                canvas.height = canvas.clientHeight
+
+                this.updateCanvas()
+            }
+        }
+    </script>
+</line-graph>

components/search.riot

@@ -12,19 +12,24 @@
 		</div>
     </label>
     <script>
+        import PAPI from '../javascript/parcoursup-link.js'
 
         const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`
 
         async function fetchFiliere(state) {
             if (state.sousfili){
-                var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${state.sousfili}`)
+                return PAPI.fetchSpecialites(state.sousfili)
+                //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${state.sousfili}`)
             } else if (state.fili&&!state.sousfili){
-                var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${state.fili}`)
+                return PAPI.fetchFiliere(state.fili)
+                //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${state.fili}`)
             } else if (!state.fili&&!state.sousfili){
-                var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`)
+                return PAPI.fetchFilieres()
+                //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`)
             }
-            let result  = await request.json()
+            
-            return result["facet_groups"][0]["facets"]
+            //let result  = await request.json()
+            //return result["facet_groups"][0]["facets"]
         }
 
         export default function search(){

index.html

@@ -13,6 +13,7 @@
 
 	<body>
 		<search></search>
+		<line-graph style="height: 90px;"></line-graph>
 		<!--<script>
 			riot.compile().then(() => {
 				riot.mount('search', {

javascript/components/search.js

@@ -1,158 +0,0 @@
-const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`;
-async function fetchFiliere(state) {
-  if (state.sousfili) {
-    await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${sousfiliere}`);
-  } else if (state.fili & !state.sousfili) {
-    await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`);
-  } else if (!state.fili & !state.sousfili) {
-    await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`);
-  } else {
-    console.log("ta verif elle pue");
-  }
-  let result = await request.json();
-  return result["facet_groups"][0]["facets"];
-}
-var search = {
-  css: null,
-  exports: function search() {
-    return {
-      onBeforeMount(props, state) {
-        // initial state
-        this.state = {
-          placeholder: "Formation",
-          items: null,
-          allitems: null,
-          fili: null,
-          sousfili: null
-        };
-        fetchFiliere(this.state).then(response => {
-          this.update({
-            items: response,
-            allitems: response
-          });
-        });
-      },
-      searchF(e) {
-        let responseFiltered = [];
-        this.state.allitems.forEach(formation => {
-          if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
-            responseFiltered.push(formation);
-          }
-        });
-        this.update({
-          items: responseFiltered
-        });
-      },
-      filter(fili) {
-        console.log("filter! " + fili);
-        if (this.state.placeholder === "Filière de formation") {
-          this.update({
-            placeholder: "Filière de formation détaillée",
-            sousfili: fili
-          });
-          fetchFiliere(this.state).then(response => {
-            this.update({
-              allitems: response,
-              items: response
-            });
-          });
-          console.log(this.state.items);
-        } else if (this.state.placeholder = "Formation") {
-          this.update({
-            placeholder: "Filière de formation",
-            fili: fili
-          });
-          fetchFiliere(this.state).then(response => {
-            this.update({
-              allitems: response,
-              items: response
-            });
-            console.log(this.state.items);
-          });
-        }
-      },
-      back() {
-        console.log("back");
-        if (this.state.placeholder === "Filière de formation") {
-          this.update({
-            placeholder: "Formation",
-            fili: null
-          });
-          fetchFiliere(state).then(response => {
-            this.update({
-              allitems: response,
-              items: response
-            });
-          });
-          console.log(this.state.items);
-        } else if (this.state.placeholder = "Filière de formation détaillée") {
-          this.update({
-            placeholder: "Filière de formation",
-            sousfili: null
-          });
-          fetchFiliere(this.state).then(response => {
-            this.update({
-              allitems: response,
-              items: response
-            });
-            console.log(this.state.items);
-          });
-        }
-      }
-    };
-  },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr0="expr0" type="input"/><button expr1="expr1"><</button><div id="list-formations"><ul><li expr2="expr2"></li></ul></div></label>', [{
-    redundantAttribute: 'expr0',
-    selector: '[expr0]',
-    expressions: [{
-      type: expressionTypes.EVENT,
-      name: 'onkeydown',
-      evaluate: _scope => _scope.searchF
-    }, {
-      type: expressionTypes.ATTRIBUTE,
-      name: 'placeholder',
-      evaluate: _scope => _scope.state.placeholder
-    }]
-  }, {
-    redundantAttribute: 'expr1',
-    selector: '[expr1]',
-    expressions: [{
-      type: expressionTypes.EVENT,
-      name: 'onclick',
-      evaluate: _scope => _scope.back
-    }]
-  }, {
-    type: bindingTypes.EACH,
-    getKey: null,
-    condition: null,
-    template: template('<span expr3="expr3"> </span><span expr4="expr4"> </span>', [{
-      redundantAttribute: 'expr3',
-      selector: '[expr3]',
-      expressions: [{
-        type: expressionTypes.TEXT,
-        childNodeIndex: 0,
-        evaluate: _scope => _scope.item.name
-      }, {
-        type: expressionTypes.EVENT,
-        name: 'onclick',
-        evaluate: _scope => () => _scope.filter(_scope.item.name)
-      }]
-    }, {
-      redundantAttribute: 'expr4',
-      selector: '[expr4]',
-      expressions: [{
-        type: expressionTypes.TEXT,
-        childNodeIndex: 0,
-        evaluate: _scope => _scope.item.count
-      }]
-    }]),
-    redundantAttribute: 'expr2',
-    selector: '[expr2]',
-    itemName: 'item',
-    indexName: null,
-    evaluate: _scope => _scope.state.items
-  }]),
-  name: 'search'
-};
-
-export { search as default };

javascript/line-graph.js

@@ -0,0 +1,65 @@
+var lineGraph = {
+  css: null,
+  exports: {
+    updateCanvas() {
+      let canvas = this.$("canvas");
+      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 data = this.state.data;
+      cx.clearRect(0, 0, width, height);
+      if (!data) return;
+      let total = data.reduce((total, current) => total + current.value, 0);
+      let curr = 0;
+      let counter = 0;
+      for (let field of data) {
+        let start = curr + spacing;
+        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.fillRect(start, 0, barWidth, height / 3);
+        cx.fillStyle = "#FFFFFF";
+        if (cx.measureText(text).width < barWidth) {
+          cx.fillText(text, start + barWidth / 2, height / 6);
+        } else if (cx.measureText("...").width < barWidth) {
+          cx.fillText("...", start + barWidth / 2, height / 6);
+        }
+        curr += field.value / total * width;
+        counter++;
+      }
+    },
+    onMounted() {
+      this.colors = ["#003F5C", "#2F4B7C", "#665191", "#A05195", "#D45087"];
+      this.state.data = [{
+        name: "P",
+        value: 100
+      }, {
+        name: "AB",
+        value: 200
+      }, {
+        name: "B",
+        value: 150
+      }, {
+        name: "TB",
+        value: 50
+      }, {
+        name: "TBF",
+        value: 50
+      }];
+      let canvas = this.$("canvas");
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+      this.updateCanvas();
+    }
+  },
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
+  name: 'line-graph'
+};
+
+export { lineGraph as default };

javascript/parcoursup-link.js

@@ -22,6 +22,13 @@ class PAPI {
 
         return result["facet_groups"][0]["facets"]
     }
+
+    static async fetchSpecialites(specialite) {
+        let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${specialite}`)
+        let result  = await request.json()
+
+        return result["facet_groups"][0]["facets"]
+    }
 }
 
 export default PAPI

javascript/search.js

@@ -1,19 +1,45 @@
-const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`;
+/*
-async function fetchFiliere0() {
+    Parcoursup API (PAPI)
-  let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`);
+    Comprend un set de wrapper afin d'accéder plus aisément aux informations de l'API parcoursup
+*/
+
+class PAPI {
+  static dataset = "fr-esr-parcoursup";
+  static timezone = "Europe%2FBerlin";
+  static searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=${PAPI.dataset}&timezone=${PAPI.timezone}`;
+  static async fetchFilieres() {
+    let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=fili`);
     let result = await request.json();
     return result["facet_groups"][0]["facets"];
   }
-async function fetchFiliere1(filiere) {
+  static async fetchFiliere(filiere) {
-  let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`);
+    let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`);
     let result = await request.json();
     return result["facet_groups"][0]["facets"];
   }
-async function fetchFiliere2(sousfiliere) {
+  static async fetchSpecialites(specialite) {
-  let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${sousfiliere}`);
+    let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${specialite}`);
     let result = await request.json();
     return result["facet_groups"][0]["facets"];
   }
+}
+
+async function fetchFiliere(state) {
+  if (state.sousfili) {
+    return PAPI.fetchSpecialites(state.sousfili);
+    //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${state.sousfili}`)
+  } else if (state.fili && !state.sousfili) {
+    return PAPI.fetchFiliere(state.fili);
+    //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${state.fili}`)
+  } else if (!state.fili && !state.sousfili) {
+    return PAPI.fetchFilieres();
+    //var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`)
+  }
+
+  //let result  = await request.json()
+  //return result["facet_groups"][0]["facets"]
+}
+
 var search = {
   css: null,
   exports: function search() {
@@ -24,9 +50,10 @@ var search = {
           placeholder: "Formation",
           items: null,
           allitems: null,
-          fili: null
+          fili: null,
+          sousfili: null
         };
-        fetchFiliere0().then(response => {
+        fetchFiliere(this.state).then(response => {
           this.update({
             items: response,
             allitems: response
@@ -49,34 +76,47 @@ var search = {
         if (this.state.placeholder === "Filière de formation") {
           this.update({
             placeholder: "Filière de formation détaillée",
-            fili: fili
+            sousfili: fili
           });
-          fetchFiliere2(this.state.fili).then(response => {
-            this.update({
-              allitems: response,
-              items: response
-            });
-          });
-          console.log(this.state.items);
         } else if (this.state.placeholder = "Formation") {
           this.update({
             placeholder: "Filière de formation",
             fili: fili
           });
-          fetchFiliere1(this.state.fili).then(response => {
+        }
+        fetchFiliere(this.state).then(response => {
           this.update({
             allitems: response,
             items: response
           });
           console.log(this.state.items);
         });
+      },
+      back() {
+        console.log("back");
+        if (this.state.placeholder === "Filière de formation") {
+          this.update({
+            placeholder: "Formation",
+            fili: null
+          });
+        } else if (this.state.placeholder = "Filière de formation détaillée") {
+          this.update({
+            placeholder: "Filière de formation",
+            sousfili: null
+          });
         }
+        fetchFiliere(this.state).then(response => {
+          this.update({
+            allitems: response,
+            items: response
+          });
+        });
       }
     };
   },
-  template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr36="expr36" type="input"/><div id="list-formations"><ul><li expr37="expr37"></li></ul></div></label>', [{
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr0="expr0" type="input"/><button expr1="expr1"><</button><div id="list-formations"><ul><li expr2="expr2"></li></ul></div></label>', [{
-    redundantAttribute: 'expr36',
+    redundantAttribute: 'expr0',
-    selector: '[expr36]',
+    selector: '[expr0]',
     expressions: [{
       type: expressionTypes.EVENT,
       name: 'onkeydown',
@@ -86,13 +126,21 @@ var search = {
       name: 'placeholder',
       evaluate: _scope => _scope.state.placeholder
     }]
+  }, {
+    redundantAttribute: 'expr1',
+    selector: '[expr1]',
+    expressions: [{
+      type: expressionTypes.EVENT,
+      name: 'onclick',
+      evaluate: _scope => _scope.back
+    }]
   }, {
     type: bindingTypes.EACH,
     getKey: null,
     condition: null,
-    template: template('<span expr38="expr38"> </span><span expr39="expr39"> </span>', [{
+    template: template('<span expr3="expr3"> </span><span expr4="expr4"> </span>', [{
-      redundantAttribute: 'expr38',
+      redundantAttribute: 'expr3',
-      selector: '[expr38]',
+      selector: '[expr3]',
       expressions: [{
         type: expressionTypes.TEXT,
         childNodeIndex: 0,
@@ -103,16 +151,16 @@ var search = {
         evaluate: _scope => () => _scope.filter(_scope.item.name)
       }]
     }, {
-      redundantAttribute: 'expr39',
+      redundantAttribute: 'expr4',
-      selector: '[expr39]',
+      selector: '[expr4]',
       expressions: [{
         type: expressionTypes.TEXT,
         childNodeIndex: 0,
         evaluate: _scope => _scope.item.count
       }]
     }]),
-    redundantAttribute: 'expr37',
+    redundantAttribute: 'expr2',
-    selector: '[expr37]',
+    selector: '[expr2]',
     itemName: 'item',
     indexName: null,
     evaluate: _scope => _scope.state.items

loader.js

@@ -3,10 +3,13 @@
 */
 
 import SchoolInfo from './javascript/school-info.js'
+import LineGraph from './javascript/line-graph.js'
 import Search from './javascript/search.js'
 
 riot.register("school-info", SchoolInfo)
+riot.register("line-graph", LineGraph)
 riot.register("search", Search)
 
 riot.mount("school-info")
+riot.mount("line-graph")
 riot.mount("search")