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(){