From c0b826099626a5d29469ae7640e54b64f04f265c Mon Sep 17 00:00:00 2001 From: horville Date: Tue, 28 Mar 2023 16:52:53 +0200 Subject: [PATCH] Fix graph --- components/line-graph.riot | 59 ++---- components/main-controller.riot | 4 +- index.html | 3 +- javascript/fili-info.js | 14 +- javascript/line-graph.js | 37 ++-- javascript/main-controller.js | 18 +- javascript/school-info.js | 16 +- javascript/search.js | 28 +-- resources/logo-parcoursup.svg | 308 ++++++++++++++++++++++++++------ 9 files changed, 322 insertions(+), 165 deletions(-) diff --git a/components/line-graph.riot b/components/line-graph.riot index f528d67..054cc50 100644 --- a/components/line-graph.riot +++ b/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() } } diff --git a/components/main-controller.riot b/components/main-controller.riot index 6f743ef..d071877 100644 --- a/components/main-controller.riot +++ b/components/main-controller.riot @@ -1,8 +1,8 @@
-
- +
+
diff --git a/index.html b/index.html index 96f743b..8733e35 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,8 @@ - + + diff --git a/javascript/fili-info.js b/javascript/fili-info.js index 7e773b5..0467335 100644 --- a/javascript/fili-info.js +++ b/javascript/fili-info.js @@ -1,30 +1,30 @@ var filiInfo = { css: null, exports: null, - template: (template, expressionTypes, bindingTypes, getComponent) => template('

BUT / BUT - Production / Informatique

Moyenne des admis19.3

Nombre de formations5

Capacité90

Sélectivité

', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('

BUT / BUT - Production / Informatique

Moyenne des admis19.3

Nombre de formations5

Capacité90

Sélectivité

', [{ type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr249', - selector: '[expr249]' + redundantAttribute: 'expr0', + selector: '[expr0]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr250', - selector: '[expr250]' + redundantAttribute: 'expr1', + selector: '[expr1]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr251', - selector: '[expr251]' + redundantAttribute: 'expr2', + selector: '[expr2]' }]), name: 'fili-info' }; diff --git a/javascript/line-graph.js b/javascript/line-graph.js index e05258a..40fad73 100644 --- a/javascript/line-graph.js +++ b/javascript/line-graph.js @@ -3,17 +3,18 @@ var lineGraph = { exports: { 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"; cx.font = "15px Arial"; @@ -28,7 +29,7 @@ var lineGraph = { 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.fillStyle = colors[counter]; cx.fillRect(start, 0, barWidth, height / 3); cx.fillStyle = "#FFFFFF"; if (cx.measureText(text).width < barWidth) { @@ -46,7 +47,7 @@ var lineGraph = { cx.translate(width / 2 - legendWidth / 2, height / 4 + 20); 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); @@ -54,32 +55,16 @@ var lineGraph = { counter++; } }, + 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(); } }, diff --git a/javascript/main-controller.js b/javascript/main-controller.js index f025896..38ac6db 100644 --- a/javascript/main-controller.js +++ b/javascript/main-controller.js @@ -1,38 +1,38 @@ var mainController = { css: null, exports: {}, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'search', slots: [], attributes: [], - redundantAttribute: 'expr41', - selector: '[expr41]' + redundantAttribute: 'expr12', + selector: '[expr12]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'fili-info', slots: [], attributes: [], - redundantAttribute: 'expr42', - selector: '[expr42]' + redundantAttribute: 'expr13', + selector: '[expr13]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'school', slots: [], attributes: [], - redundantAttribute: 'expr43', - selector: '[expr43]' + redundantAttribute: 'expr14', + selector: '[expr14]' }, { type: bindingTypes.TAG, getComponent: getComponent, evaluate: _scope => 'school-info', slots: [], attributes: [], - redundantAttribute: 'expr44', - selector: '[expr44]' + redundantAttribute: 'expr15', + selector: '[expr15]' }]), name: 'main-controller' }; diff --git a/javascript/school-info.js b/javascript/school-info.js index a3274ed..4fc807d 100644 --- a/javascript/school-info.js +++ b/javascript/school-info.js @@ -10,14 +10,14 @@ var schoolInfo = { this.update(); } }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ type: bindingTypes.IF, evaluate: _scope => _scope.state.enabled, - redundantAttribute: 'expr26', - selector: '[expr26]', - template: template('

', [{ - redundantAttribute: 'expr27', - selector: '[expr27]', + redundantAttribute: 'expr3', + selector: '[expr3]', + template: template('

', [{ + redundantAttribute: 'expr4', + selector: '[expr4]', expressions: [{ type: expressionTypes.EVENT, name: 'onclick', @@ -29,8 +29,8 @@ var schoolInfo = { evaluate: _scope => 'line-graph', slots: [], attributes: [], - redundantAttribute: 'expr28', - selector: '[expr28]' + redundantAttribute: 'expr5', + selector: '[expr5]' }]) }]), name: 'school-info' diff --git a/javascript/search.js b/javascript/search.js index a53ed62..00c8a77 100644 --- a/javascript/search.js +++ b/javascript/search.js @@ -114,9 +114,9 @@ var search = { } }; }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ - redundantAttribute: 'expr3', - selector: '[expr3]', + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', [{ + redundantAttribute: 'expr6', + selector: '[expr6]', expressions: [{ type: expressionTypes.EVENT, name: 'onkeydown', @@ -127,8 +127,8 @@ var search = { evaluate: _scope => _scope.state.placeholder }] }, { - redundantAttribute: 'expr4', - selector: '[expr4]', + redundantAttribute: 'expr7', + selector: '[expr7]', expressions: [{ type: expressionTypes.EVENT, name: 'onclick', @@ -138,33 +138,33 @@ var search = { type: bindingTypes.EACH, getKey: null, condition: null, - template: template('', [{ - redundantAttribute: 'expr6', - selector: '[expr6]', + template: template('', [{ + redundantAttribute: 'expr9', + selector: '[expr9]', expressions: [{ type: expressionTypes.EVENT, name: 'onclick', evaluate: _scope => () => _scope.filter(_scope.item.name) }] }, { - redundantAttribute: 'expr7', - selector: '[expr7]', + redundantAttribute: 'expr10', + selector: '[expr10]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.item.name }] }, { - redundantAttribute: 'expr8', - selector: '[expr8]', + redundantAttribute: 'expr11', + selector: '[expr11]', expressions: [{ type: expressionTypes.TEXT, childNodeIndex: 0, evaluate: _scope => _scope.item.count }] }]), - redundantAttribute: 'expr5', - selector: '[expr5]', + redundantAttribute: 'expr8', + selector: '[expr8]', itemName: 'item', indexName: null, evaluate: _scope => _scope.state.items diff --git a/resources/logo-parcoursup.svg b/resources/logo-parcoursup.svg index adeaf9a..21086f8 100644 --- a/resources/logo-parcoursup.svg +++ b/resources/logo-parcoursup.svg @@ -1,67 +1,259 @@ - + - -