From 2900c2b4fbea9053635ead04e0ea9f443811e9ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sun, 25 Apr 2021 17:41:53 +0200 Subject: [PATCH 01/28] add circle pts rings + need to fix see todo --- css/_global.scss | 16 ++++ css/graph.css | 60 +++++++++++++++ css/graph.css.map | 1 + css/graph.scss | 49 ++++++++++++ graph-visualisation.js | 150 +++++++++++++++++++++++++++++++++++++ images/flag-groeinland.svg | 14 ++++ visualisation.html | 29 +++++++ 7 files changed, 319 insertions(+) create mode 100644 css/_global.scss create mode 100644 css/graph.css create mode 100644 css/graph.css.map create mode 100644 css/graph.scss create mode 100644 graph-visualisation.js create mode 100644 images/flag-groeinland.svg create mode 100644 visualisation.html diff --git a/css/_global.scss b/css/_global.scss new file mode 100644 index 0000000..20b5612 --- /dev/null +++ b/css/_global.scss @@ -0,0 +1,16 @@ +* { + box-sizing: border-box; +} + +body { + position: relative; + z-index: 0; + text-align: center; + background-color: white; + font-size: 18px; + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + background-color: blue; +} diff --git a/css/graph.css b/css/graph.css new file mode 100644 index 0000000..619c480 --- /dev/null +++ b/css/graph.css @@ -0,0 +1,60 @@ +* { + box-sizing: border-box; +} + +body { + position: relative; + z-index: 0; + text-align: center; + background-color: white; + font-size: 18px; + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + background-color: blue; +} + +.graph { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100%; + height: 100%; + background-color: unset; +} +.graph-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 100px; +} +.graph-ring { + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 100%; + width: 80%; + height: 80%; +} +.graph-flag { + display: inline-block; + position: absolute; + height: 30px; + width: 46px; + border-radius: 3px; + background-color: greenyellow; + background-image: url("../images/flag-groeinland.svg"); +} +.graph-point { + position: absolute; + height: 15px; + width: 15px; + border-radius: 100%; + background-color: greenyellow; +} + +/*# sourceMappingURL=graph.css.map */ diff --git a/css/graph.css.map b/css/graph.css.map new file mode 100644 index 0000000..f87191c --- /dev/null +++ b/css/graph.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss new file mode 100644 index 0000000..e69fda9 --- /dev/null +++ b/css/graph.scss @@ -0,0 +1,49 @@ +@import "global"; + +.graph { + + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100%; + height: 100%; + background-color: unset; + + + &-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 100px; + } + + &-ring { + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 100%; + width: 80%; + height: 80%; + } + + &-flag { + display: inline-block; + position: absolute; + height: 30px; + width: 46px; + border-radius: 3px; + background-color: greenyellow; + background-image: url("../images/flag-groeinland.svg"); + } + + &-point { + position: absolute; + height: 15px; + width: 15px; + border-radius: 100%; + background-color: greenyellow; + } +} \ No newline at end of file diff --git a/graph-visualisation.js b/graph-visualisation.js new file mode 100644 index 0000000..91932ca --- /dev/null +++ b/graph-visualisation.js @@ -0,0 +1,150 @@ +function getGraphContainerSize() { + let graph = document.querySelector(".graph-container"); + let style = window.getComputedStyle(graph); + let width = graph.offsetWidth - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)); + let height = graph.offsetHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); + + return { + height: height, + width: width, + ratio: height / width + }; +} + +function getGraphSize() { + let graph = document.querySelector(".graph"); + let width = graph.offsetWidth; + let height = graph.offsetHeight; + + return { + height: height, + width: width, + ratio: height / width + }; +} + +function getClientDimensions() { + + let height = document.body ? document.body.clientHeight : window.innerHeight; + let width = document.body ? document.body.clientWidth : window.innerWidth; + + return { + height: height, + width: width, + ratio: height / width + }; +} + +function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; +} + +function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} + +function degreeToRadian(deg) { + return deg * (Math.PI / 180); +} + +function getGraph() { + return document.querySelector(".graph"); +} + +function rescaleRange(numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { + return destinationMin + ((numberToRescale - initScaleMin) * (destinationMax - destinationMin)) / (initScaleMax - initScaleMin); +} + +function addPoint(value = 100, angle, radiusInPercent) { + + angle = rescaleRange(angle); + console.log(angle); + + //TODO: Rescale le shift en fonction de la taille des points + let pointPos = getCoordinates(angle, radiusInPercent); + let parent = getGraph(); + let pt = document.createElement('div'); + pt.classList.add("graph-point"); + pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px;'); + parent.appendChild(pt); +} + +function getCoordinates(angleInPercent, radiusInPercent, shiftX = 7, shiftY = 7) { + + // In pixels + let graphDimensions = getGraphSize(); + + // division by 200 because /100 for the percent then by 2 for the conversion fom the diameter to the radius + let radius = (graphDimensions.height * radiusInPercent) / 200; + let angle = degreeToRadian(180 - (angleInPercent * 3.6)); + let posX = radius * Math.sin(angle); + let posY = radius * Math.cos(angle) / graphDimensions.ratio; + + // recenter pts on the middle of the graph + posX += (graphDimensions.width / 2) - shiftX; + posY += (graphDimensions.height / 2) - shiftY; + + return {posX: posX, posY: posY}; +} + +function addRing(size = 80, flag = '') { + + let graph = getGraph(); + let ring = document.createElement("div"); + ring.classList.add("graph-ring"); + ring.setAttribute("style", "height: " + size + "%; width: " + size + "%;"); + graph.append(ring); +} + +function addFlag(country = 'france', radius = 50) { + let graph = getGraph(); + //TODO: POURQUOI ? div/2 marche pas pour le shiftX + let flagPos = getCoordinates(1, radius, 46 / 1.5, 30 / 2); + let flag = document.createElement("div"); + flag.classList.add("graph-flag"); + flag.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); + graph.append(flag); +} + + +/** + * @desc Use to make the graph squared at any time, and simplify the placement + * @return void + */ +function resizeGraphContainer() { + let dimensions = getGraphContainerSize(); + let minDim = 0; + + if (dimensions.height > dimensions.width) minDim = dimensions.width; + else minDim = dimensions.height; + + let graph = getGraph(); + graph.setAttribute('style', 'height: ' + minDim + 'px; width:' + minDim + 'px;'); + console.log("resize to " + minDim); +} + +/** + * ---------- INIT ------------------------ + */ + +window.addEventListener('resize', resizeGraphContainer); +resizeGraphContainer(); + +for (let i = 0; i <= 100; i += 10) { + addPoint(100, i, 75); +} + +for (let i = 0; i <= 100; i += 2) { + addPoint(100, i, 65); +} + +for (let i = 0; i <= 100; i += 1) { + addPoint(100, i, 55); +} + +addRing(75, 'france'); +addRing(65, 'france'); +addRing(55, 'france'); +addFlag('france', 75); diff --git a/images/flag-groeinland.svg b/images/flag-groeinland.svg new file mode 100644 index 0000000..a5ce9cb --- /dev/null +++ b/images/flag-groeinland.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 900 600" style="enable-background:new 0 0 900 600;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#FFFFFF;} + .st1{fill:#D00C33;} +</style> +<g> + <rect class="st0" width="900" height="600"/> + <path class="st1" d="M0,300h900v300H0V300z M150,300c0,110.5,89.5,200,200,200s200-89.5,200-200s-89.5-200-200-200 + S150,189.5,150,300"/> +</g> +</svg> diff --git a/visualisation.html b/visualisation.html new file mode 100644 index 0000000..0afea5a --- /dev/null +++ b/visualisation.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Hey salut</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <link rel="stylesheet" type="text/css" href="css/graph.css"/> + <style> + .random-pos { + transition: all 1s ease-in-out; + border-radius: 50%; + height: 10px; + } + + .section-full { + overflow: hidden; + } + </style> +</head> +<body> + +<div class="graph-container"> + <div class="graph"></div> +</div> + +<script src="graph-visualisation.js"></script> + +</body> +</html> \ No newline at end of file -- GitLab From fd6ef685c7e0ae6277f9882bb8d1fbde45a30e07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Mon, 26 Apr 2021 14:49:29 +0200 Subject: [PATCH 02/28] add circle pts rings + need to fix see todo --- graph-visualisation.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/graph-visualisation.js b/graph-visualisation.js index 91932ca..7407f89 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -132,15 +132,15 @@ function resizeGraphContainer() { window.addEventListener('resize', resizeGraphContainer); resizeGraphContainer(); -for (let i = 0; i <= 100; i += 10) { +for (let i = 0; i <= 100; i += 5) { addPoint(100, i, 75); } -for (let i = 0; i <= 100; i += 2) { +for (let i = 0; i <= 100; i += 10) { addPoint(100, i, 65); } -for (let i = 0; i <= 100; i += 1) { +for (let i = 0; i <= 100; i += 3) { addPoint(100, i, 55); } -- GitLab From 61c70e335aa14fba84de670fd46ee901d94497f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Mon, 26 Apr 2021 19:52:39 +0200 Subject: [PATCH 03/28] add scale on points, and various choices + need fix the scale range system --- css/graph.css | 54 ++++++++++- css/graph.css.map | 2 +- css/graph.scss | 54 ++++++++++- graph-visualisation.js | 205 ++++++++++++++++++++++++++++++++++++----- images/flag-france.svg | 15 +++ visualisation.html | 3 +- 6 files changed, 302 insertions(+), 31 deletions(-) create mode 100644 images/flag-france.svg diff --git a/css/graph.css b/css/graph.css index 619c480..ae4c480 100644 --- a/css/graph.css +++ b/css/graph.css @@ -34,6 +34,7 @@ body { padding: 100px; } .graph-ring { + z-index: 0; position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100%; @@ -41,20 +42,67 @@ body { height: 80%; } .graph-flag { + z-index: 2; display: inline-block; position: absolute; height: 30px; width: 46px; border-radius: 3px; - background-color: greenyellow; + background-color: unset; background-image: url("../images/flag-groeinland.svg"); + box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5); } .graph-point { + z-index: 1; position: absolute; - height: 15px; - width: 15px; + height: 20px; + width: 20px; border-radius: 100%; background-color: greenyellow; + box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); +} + +.fade-in { + opacity: 0; + -moz-animation: 0.7s linear forwards 0s fadein; + -webkit-animation: 0.7s linear forwards 0s fadein; + animation: 0.7s linear forwards 0s fadein; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-moz-keyframes fadein { + /* sur Firefox */ + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes fadein { + /* sur Safari et Chrome */ + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-o-keyframes fadein { + /* sur Opera */ + from { + opacity: 0; + } + to { + opacity: 1; + } } /*# sourceMappingURL=graph.css.map */ diff --git a/css/graph.css.map b/css/graph.css.map index f87191c..095b9e0 100644 --- a/css/graph.css.map +++ b/css/graph.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"graph.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss index e69fda9..ec2c7c7 100644 --- a/css/graph.scss +++ b/css/graph.scss @@ -22,6 +22,7 @@ } &-ring { + z-index: 0; position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100%; @@ -30,20 +31,67 @@ } &-flag { + z-index: 2; display: inline-block; position: absolute; height: 30px; width: 46px; border-radius: 3px; - background-color: greenyellow; + background-color: unset; background-image: url("../images/flag-groeinland.svg"); + box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } &-point { + z-index: 1; position: absolute; - height: 15px; - width: 15px; + height: 20px; + width: 20px; border-radius: 100%; background-color: greenyellow; + box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5); + } +} + +.fade-in { + opacity: 0; + -moz-animation: .7s linear forwards 0s fadein; + -webkit-animation: .7s linear forwards 0s fadein; + animation: .7s linear forwards 0s fadein; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-moz-keyframes fadein { /* sur Firefox */ + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-webkit-keyframes fadein { /* sur Safari et Chrome */ + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-o-keyframes fadein { /* sur Opera */ + from { + opacity: 0; + } + to { + opacity: 1; } } \ No newline at end of file diff --git a/graph-visualisation.js b/graph-visualisation.js index 7407f89..2b0a881 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -1,3 +1,66 @@ +const graphVis = { + data: [ + { + flagURL: "images/flag-groeinland.svg", + country: "Groeinland â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: [] + }, + ], + }, + ], +}; + +function refreshData() { + + getGraph().innerHTML = ""; + + if (graphVis.data.length === 1) { + + console.log("DISPlAY - 1 pays"); + + // Si un seul pays alors on affiche les indicateurs + + let data = graphVis.data[0]; + addFlag(0, data.flagURL, data.country); + + data.indicators.forEach(function (indicator, index) { + let radius = 85 - 15 * index; + let angle = 0; + addRing(radius); + + for (let i = 0, item; item = indicator.data[i]; i++) { + angle = ((i + 1) / indicator.data.length) * 100; + console.log("OnCountry - Angle: " + angle); + addPoint(item.percent, angle, radius, {fromMin: 4.0, fromMax: 100.0}); + } + + }); + + } else if (graphVis.data.length >= 2) { + console.log("DISPlAY - au moins 2pays"); + // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays + graphVis.data.forEach(function (country, index) { + let radius = 85 - 15 * index; + let angle = 0; + addFlag(radius, country.flagURL, country.country); + addRing(radius); + + for (let i = 0, item; item = country.indicators[0].data[i]; i++) { + angle = ((i + 1) / country.indicators[0].data.length) * 100; + console.log("2MoreCOuntry - Angle: " + angle); + addPoint(item.percent, angle, radius); + } + }); + + } else { + //reaction par defaut + console.log("display default"); + } +} + function getGraphContainerSize() { let graph = document.querySelector(".graph-container"); let style = window.getComputedStyle(graph); @@ -54,20 +117,28 @@ function getGraph() { } function rescaleRange(numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { - return destinationMin + ((numberToRescale - initScaleMin) * (destinationMax - destinationMin)) / (initScaleMax - initScaleMin); + numberToRescale = parseFloat(numberToRescale); + initScaleMin = parseFloat(initScaleMin); + initScaleMax = parseFloat(initScaleMax); + destinationMin = parseFloat(destinationMin); + destinationMax = parseFloat(destinationMax); + return destinationMin + (((numberToRescale - initScaleMin) * (destinationMax - destinationMin)) / (initScaleMax - initScaleMin)); } -function addPoint(value = 100, angle, radiusInPercent) { +function addPoint(value = 100, angle, radiusInPercent, rescaleOptions = false) { - angle = rescaleRange(angle); + if (rescaleOptions) { + angle = rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax, 4, 96); + } console.log(angle); - //TODO: Rescale le shift en fonction de la taille des points - let pointPos = getCoordinates(angle, radiusInPercent); + let pointSize = (parseFloat(value) / 100.0) * 20.0; + let pointPos = getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0); let parent = getGraph(); let pt = document.createElement('div'); pt.classList.add("graph-point"); - pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px;'); + pt.classList.add("fade-in"); + pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;'); parent.appendChild(pt); } @@ -89,25 +160,56 @@ function getCoordinates(angleInPercent, radiusInPercent, shiftX = 7, shiftY = 7) return {posX: posX, posY: posY}; } -function addRing(size = 80, flag = '') { +function addRing(size = 80) { let graph = getGraph(); let ring = document.createElement("div"); ring.classList.add("graph-ring"); + ring.classList.add("fade-in"); ring.setAttribute("style", "height: " + size + "%; width: " + size + "%;"); graph.append(ring); } -function addFlag(country = 'france', radius = 50) { +function addFlag(radius = 0, flagURL = '', country = '') { + let graph = getGraph(); - //TODO: POURQUOI ? div/2 marche pas pour le shiftX - let flagPos = getCoordinates(1, radius, 46 / 1.5, 30 / 2); + let flag = document.createElement("div"); flag.classList.add("graph-flag"); - flag.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); + flag.classList.add("fade-in"); + + if (radius !== 0) { + //TODO: POURQUOI ? div/2 marche pas pour le shiftX + let flagPos = getCoordinates(1, radius, 46 / 2, 30 / 2); + flag.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px; background-image:url(\"" + flagURL + "\");"); + } else { + flag.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); + } + + flag.setAttribute("title", country); graph.append(flag); } +function addLabel(radius = 0, content) { + + let graph = getGraph(); + + let label = document.createElement("div"); + label.classList.add("graph-flag"); + label.classList.add("fade-in"); + + if (radius !== 0) { + //TODO: POURQUOI ? div/2 marche pas pour le shiftX + let flagPos = getCoordinates(1, radius, 46 / 2, 30 / 2); + label.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); + } else { + label.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); + } + + label.setAttribute("title", country); + graph.append(label); +} + /** * @desc Use to make the graph squared at any time, and simplify the placement @@ -122,29 +224,86 @@ function resizeGraphContainer() { let graph = getGraph(); graph.setAttribute('style', 'height: ' + minDim + 'px; width:' + minDim + 'px;'); - console.log("resize to " + minDim); + //console.log("resize to " + minDim); } /** * ---------- INIT ------------------------ */ -window.addEventListener('resize', resizeGraphContainer); -resizeGraphContainer(); -for (let i = 0; i <= 100; i += 5) { - addPoint(100, i, 75); +function testGraph() { + + let data = []; + + for (let i = 0; i <= 100; i += 5) { + data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + } + graphVis.data = [ + { + flagURL: "images/flag-groeinland.svg", + country: "Groeinland â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: data + }, + { + name: "Masque porté quotodiennement", + data: data + }, + ], + }, + ]; + refreshData(); } -for (let i = 0; i <= 100; i += 10) { - addPoint(100, i, 65); +function testGraph2() { + + let data = []; + + for (let i = 0; i <= 100; i += 5) { + data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + } + + let data2 = []; + + for (let i = 0; i <= 100; i += 2) { + data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + } + + graphVis.data = [ + { + flagURL: "images/flag-groeinland.svg", + country: "Groeinland â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: data + }, + ], + }, + { + flagURL: "images/flag-france.svg", + country: "France â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: data2 + }, + ], + } + ]; + refreshData(); } -for (let i = 0; i <= 100; i += 3) { - addPoint(100, i, 55); -} +window.addEventListener('resize', resizeGraphContainer); +window.addEventListener('resize', refreshData); +resizeGraphContainer(); +refreshData(); + -addRing(75, 'france'); +/* addRing(75, 'france'); addRing(65, 'france'); addRing(55, 'france'); -addFlag('france', 75); +addFlag('france', 75); */ \ No newline at end of file diff --git a/images/flag-france.svg b/images/flag-france.svg new file mode 100644 index 0000000..146def5 --- /dev/null +++ b/images/flag-france.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 900 600" style="enable-background:new 0 0 900 600;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#ED2939;} + .st1{fill:#FFFFFF;} + .st2{fill:#002395;} +</style> +<g> + <rect class="st0" width="900" height="600"/> + <rect class="st1" width="600" height="600"/> + <rect class="st2" width="300" height="600"/> +</g> +</svg> diff --git a/visualisation.html b/visualisation.html index 0afea5a..e189653 100644 --- a/visualisation.html +++ b/visualisation.html @@ -18,7 +18,8 @@ </style> </head> <body> - +<button onclick="testGraph()">TEST</button> +<button onclick="testGraph2()">TEST MULTIPLE</button> <div class="graph-container"> <div class="graph"></div> </div> -- GitLab From 6e558cca55f675b7d92c680a698df54af34dcdcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Tue, 27 Apr 2021 16:50:50 +0200 Subject: [PATCH 04/28] fixed range of angle for first display method --- css/graph.css | 9 +++++---- css/graph.css.map | 2 +- css/graph.scss | 9 +++++---- graph-visualisation.js | 41 ++++++++++++++++++++++++++++++++++------- 4 files changed, 45 insertions(+), 16 deletions(-) diff --git a/css/graph.css b/css/graph.css index ae4c480..928bbc8 100644 --- a/css/graph.css +++ b/css/graph.css @@ -46,11 +46,12 @@ body { display: inline-block; position: absolute; height: 30px; - width: 46px; - border-radius: 3px; + width: 40px; + border-radius: 0; background-color: unset; background-image: url("../images/flag-groeinland.svg"); - box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5); + background-size: 100% 100%; + box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); } .graph-point { z-index: 1; @@ -59,7 +60,7 @@ body { width: 20px; border-radius: 100%; background-color: greenyellow; - box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); + box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); } .fade-in { diff --git a/css/graph.css.map b/css/graph.css.map index 095b9e0..072e8d2 100644 --- a/css/graph.css.map +++ b/css/graph.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss index ec2c7c7..ad0141c 100644 --- a/css/graph.scss +++ b/css/graph.scss @@ -35,11 +35,12 @@ display: inline-block; position: absolute; height: 30px; - width: 46px; - border-radius: 3px; + width: 40px; + border-radius: 0; background-color: unset; background-image: url("../images/flag-groeinland.svg"); - box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); + background-size: 100% 100%; + box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); } &-point { @@ -49,7 +50,7 @@ width: 20px; border-radius: 100%; background-color: greenyellow; - box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5); + box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); } } diff --git a/graph-visualisation.js b/graph-visualisation.js index 2b0a881..6294354 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -13,6 +13,8 @@ const graphVis = { ], }; +//TODO: flag 4:3, range fix, hover value, couleurs, indicator de fake news + function refreshData() { getGraph().innerHTML = ""; @@ -31,10 +33,14 @@ function refreshData() { let angle = 0; addRing(radius); + let angleRange = getAngleRange(indicator.data.map(function (indicatorValue, index, array) { + return getAngle(index, array.length); + })); + for (let i = 0, item; item = indicator.data[i]; i++) { - angle = ((i + 1) / indicator.data.length) * 100; + angle = getAngle(i, indicator.data.length); console.log("OnCountry - Angle: " + angle); - addPoint(item.percent, angle, radius, {fromMin: 4.0, fromMax: 100.0}); + addPoint(item.percent, angle, radius, angleRange); } }); @@ -49,7 +55,7 @@ function refreshData() { addRing(radius); for (let i = 0, item; item = country.indicators[0].data[i]; i++) { - angle = ((i + 1) / country.indicators[0].data.length) * 100; + angle = getAngle(i, country.indicators[0].data.length); console.log("2MoreCOuntry - Angle: " + angle); addPoint(item.percent, angle, radius); } @@ -61,6 +67,30 @@ function refreshData() { } } +function getAngleRange(angleArray) { + + console.log(angleArray); + + const max = angleArray.reduce(function (max, current) { + return (current > max) ? current : max; + }, angleArray[0]); + + const min = angleArray.reduce(function (min, current) { + return (current < min) ? current : min; + }, angleArray[0]); + + console.log(min, max); + + return { + fromMin: min, + fromMax: max + }; +} + +function getAngle(index, arrayLength) { + return (parseFloat(index + 1) / parseFloat(arrayLength)) * 100.0; +} + function getGraphContainerSize() { let graph = document.querySelector(".graph-container"); let style = window.getComputedStyle(graph); @@ -104,10 +134,6 @@ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } -function getRandomArbitrary(min, max) { - return Math.random() * (max - min) + min; -} - function degreeToRadian(deg) { return deg * (Math.PI / 180); } @@ -116,6 +142,7 @@ function getGraph() { return document.querySelector(".graph"); } + function rescaleRange(numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { numberToRescale = parseFloat(numberToRescale); initScaleMin = parseFloat(initScaleMin); -- GitLab From 9a1757332fa7d5b17ea3f133116f5ccfdef26502 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Tue, 27 Apr 2021 17:38:21 +0200 Subject: [PATCH 05/28] cleaning code & adding color classes --- css/graph.css | 15 +- css/graph.css.map | 2 +- css/graph.scss | 18 +- graph-visualisation.js | 461 +++++++++++++++++++---------------------- 4 files changed, 239 insertions(+), 257 deletions(-) diff --git a/css/graph.css b/css/graph.css index 928bbc8..d3ded3d 100644 --- a/css/graph.css +++ b/css/graph.css @@ -43,15 +43,15 @@ body { } .graph-flag { z-index: 2; - display: inline-block; position: absolute; + display: inline-block; height: 30px; width: 40px; border-radius: 0; - background-color: unset; - background-image: url("../images/flag-groeinland.svg"); + background-color: red; background-size: 100% 100%; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); + line-height: 0; } .graph-point { z-index: 1; @@ -62,6 +62,15 @@ body { background-color: greenyellow; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); } +.graph-bg-1 { + background-color: #aa4fff; +} +.graph-bg-2 { + background-color: coral; +} +.graph-bg-3 { + background-color: #2387fa; +} .fade-in { opacity: 0; diff --git a/css/graph.css.map b/css/graph.css.map index 072e8d2..93fdc00 100644 --- a/css/graph.css.map +++ b/css/graph.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss index ad0141c..fc89286 100644 --- a/css/graph.scss +++ b/css/graph.scss @@ -32,15 +32,15 @@ &-flag { z-index: 2; - display: inline-block; position: absolute; + display: inline-block; height: 30px; width: 40px; border-radius: 0; - background-color: unset; - background-image: url("../images/flag-groeinland.svg"); + background-color: red; background-size: 100% 100%; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); + line-height: 0; } &-point { @@ -52,6 +52,18 @@ background-color: greenyellow; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); } + + &-bg-1 { + background-color: #aa4fff; + } + + &-bg-2 { + background-color: coral; + } + + &-bg-3 { + background-color: #2387fa; + } } .fade-in { diff --git a/graph-visualisation.js b/graph-visualisation.js index 6294354..8cecfa5 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -1,132 +1,224 @@ const graphVis = { - data: [ - { - flagURL: "images/flag-groeinland.svg", - country: "Groeinland â¤ï¸", - indicators: [ - { - name: "Masque porté quotodiennement", - data: [] - }, - ], - }, - ], -}; - -//TODO: flag 4:3, range fix, hover value, couleurs, indicator de fake news - -function refreshData() { - - getGraph().innerHTML = ""; - - if (graphVis.data.length === 1) { - - console.log("DISPlAY - 1 pays"); - - // Si un seul pays alors on affiche les indicateurs - - let data = graphVis.data[0]; - addFlag(0, data.flagURL, data.country); - - data.indicators.forEach(function (indicator, index) { - let radius = 85 - 15 * index; - let angle = 0; - addRing(radius); - - let angleRange = getAngleRange(indicator.data.map(function (indicatorValue, index, array) { - return getAngle(index, array.length); - })); - - for (let i = 0, item; item = indicator.data[i]; i++) { - angle = getAngle(i, indicator.data.length); - console.log("OnCountry - Angle: " + angle); - addPoint(item.percent, angle, radius, angleRange); - } - - }); - - } else if (graphVis.data.length >= 2) { - console.log("DISPlAY - au moins 2pays"); - // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays - graphVis.data.forEach(function (country, index) { - let radius = 85 - 15 * index; - let angle = 0; - addFlag(radius, country.flagURL, country.country); - addRing(radius); + data: [], + refreshData: function () { + + //Clear the graph before render + graphVis.getGraph().innerHTML = ""; + + if (graphVis.data.length === 1) { + console.log("DISPlAY - 1 pays"); + // Si un seul pays alors on affiche les indicateurs + let data = graphVis.data[0]; + graphVis.addFlag(-1, data.flagURL, data.country); + data.indicators.forEach(function (indicator, index) { + let radius = 85 - 15 * index; + graphVis.addRing(radius); + graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1)); + }); + } else if (graphVis.data.length >= 2) { + console.log("DISPlAY - au moins 2pays"); + // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays + graphVis.data.forEach(function (country, index) { + let radius = 85 - 15 * index; + graphVis.addFlag(radius, country.flagURL, country.country); + graphVis.addRing(radius); + graphVis.addIndicators(country.indicators[0], radius, "graph-bg-1"); + }); + } else { + //reaction par defaut + console.log("display default"); + graphVis.getGraph().innerHTML = "Veuillez selectioner plus de paramètres."; + } + }, + getAngleRange: function (angleArray) { + + console.log(angleArray); + + const max = angleArray.reduce(function (max, current) { + return (current > max) ? current : max; + }, angleArray[0]); + + const min = angleArray.reduce(function (min, current) { + return (current < min) ? current : min; + }, angleArray[0]); + + console.log(min, max); + + return { + fromMin: min, + fromMax: max + }; + }, + getAngle: function (index, arrayLength) { + return (parseFloat(index + 1) / parseFloat(arrayLength)) * 100.0; + }, + getGraphContainerSize: function () { + let graph = document.querySelector(".graph-container"); + let style = window.getComputedStyle(graph); + let width = graph.offsetWidth - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)); + let height = graph.offsetHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); + + return { + height: height, + width: width, + ratio: height / width + }; + }, + + getGraphSize: function () { + let graph = document.querySelector(".graph"); + let width = graph.offsetWidth; + let height = graph.offsetHeight; + + return { + height: height, + width: width, + ratio: height / width + }; + }, + + + degreeToRadian: function (deg) { + return deg * (Math.PI / 180); + }, + + getGraph: function () { + return document.querySelector(".graph"); + }, + + rescaleRange: function (numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { + numberToRescale = parseFloat(numberToRescale); + initScaleMin = parseFloat(initScaleMin); + initScaleMax = parseFloat(initScaleMax); + destinationMin = parseFloat(destinationMin); + destinationMax = parseFloat(destinationMax); + return destinationMin + (((numberToRescale - initScaleMin) * (destinationMax - destinationMin)) / (initScaleMax - initScaleMin)); + }, + + addIndicators: function (indicator, radius, colorClass = false) { + + let angle = 0; + let angleRange = graphVis.getAngleRange(indicator.data.map(function (indicatorValue, index, array) { + return graphVis.getAngle(index, array.length); + })); + + for (let i = 0, item; item = indicator.data[i]; i++) { + angle = graphVis.getAngle(i, indicator.data.length); + console.log("OnCountry - Angle: " + angle); + graphVis.addPoint(item.percent, angle, radius, angleRange, colorClass); + } + }, - for (let i = 0, item; item = country.indicators[0].data[i]; i++) { - angle = getAngle(i, country.indicators[0].data.length); - console.log("2MoreCOuntry - Angle: " + angle); - addPoint(item.percent, angle, radius); - } - }); + addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false) { - } else { - //reaction par defaut - console.log("display default"); - } -} + if (rescaleOptions) { + angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); + } + console.log(angle); + + let pointSize = (parseFloat(value) / 100.0) * 20.0; + let pointPos = graphVis.getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0); + let parent = graphVis.getGraph(); + let pt = document.createElement('div'); + pt.classList.add("graph-point"); + pt.classList.add("fade-in"); + if (colorClass) pt.classList.add(colorClass); + pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;'); + parent.appendChild(pt); + }, + + getCoordinates: function (angleInPercent, radiusInPercent, shiftX = 7, shiftY = 7) { + + // In pixels + let graphDimensions = graphVis.getGraphSize(); + + // division by 200 because /100 for the percent then by 2 for the conversion fom the diameter to the radius + let radius = (graphDimensions.height * radiusInPercent) / 200; + let angle = graphVis.degreeToRadian(180 - (angleInPercent * 3.6)); + let posX = radius * Math.sin(angle); + let posY = radius * Math.cos(angle) / graphDimensions.ratio; + + // recenter pts on the middle of the graph + posX += (graphDimensions.width / 2) - shiftX; + posY += (graphDimensions.height / 2) - shiftY; + + return {posX: posX, posY: posY}; + }, + + addRing: function (size = 80) { + + let graph = graphVis.getGraph(); + let ring = document.createElement("div"); + ring.classList.add("graph-ring"); + ring.classList.add("fade-in"); + ring.setAttribute("style", "height: " + size + "%; width: " + size + "%;"); + graph.append(ring); + }, + + addFlag: function (radius = -1, flagURL = '', country = '') { + + let graph = graphVis.getGraph(); + + let flag = document.createElement("div"); + flag.classList.add("graph-flag"); + flag.classList.add("fade-in"); + + if (radius > 0) { + //TODO: POURQUOI ? div/2 marche pas pour le shiftX + let flagPos = graphVis.getCoordinates(1, radius, 40, 15); + flag.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px; background-image:url(\"" + flagURL + "\");"); + } else { + flag.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); + } -function getAngleRange(angleArray) { + flag.setAttribute("title", country); + graph.append(flag); + }, - console.log(angleArray); + addLabel: function (radius = 0, content) { - const max = angleArray.reduce(function (max, current) { - return (current > max) ? current : max; - }, angleArray[0]); + /* let graph = graphVis.getGraph(); - const min = angleArray.reduce(function (min, current) { - return (current < min) ? current : min; - }, angleArray[0]); + let label = document.createElement("div"); + label.classList.add("graph-flag"); + label.classList.add("fade-in"); - console.log(min, max); + if (radius !== 0) { + //TODO: FLAG PLACEMENT & shift DONT WORK + let flagPos = graphVis.getCoordinates(0, radius, 20, 15); + label.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); + } else { + label.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); + } - return { - fromMin: min, - fromMax: max - }; -} + label.setAttribute("title", country); + graph.append(label); */ + }, -function getAngle(index, arrayLength) { - return (parseFloat(index + 1) / parseFloat(arrayLength)) * 100.0; -} + /** + * @desc Use to make the graph squared at any time, and simplify the placement + * @return void + */ + resizeGraphContainer: function () { + let dimensions = graphVis.getGraphContainerSize(); + let minDim = 0; -function getGraphContainerSize() { - let graph = document.querySelector(".graph-container"); - let style = window.getComputedStyle(graph); - let width = graph.offsetWidth - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)); - let height = graph.offsetHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); - - return { - height: height, - width: width, - ratio: height / width - }; -} + if (dimensions.height > dimensions.width) minDim = dimensions.width; + else minDim = dimensions.height; -function getGraphSize() { - let graph = document.querySelector(".graph"); - let width = graph.offsetWidth; - let height = graph.offsetHeight; + let graph = graphVis.getGraph(); + graph.setAttribute('style', 'height: ' + minDim + 'px; width:' + minDim + 'px;'); + //console.log("resize to " + minDim); + }, - return { - height: height, - width: width, - ratio: height / width - }; -} +}; -function getClientDimensions() { +//TODO: hover value, couleurs, indicator de fake news - let height = document.body ? document.body.clientHeight : window.innerHeight; - let width = document.body ? document.body.clientWidth : window.innerWidth; - return { - height: height, - width: width, - ratio: height / width - }; -} +/** + * ---------- INIT ------------------------ + */ function getRandomInt(min, max) { min = Math.ceil(min); @@ -134,131 +226,6 @@ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } -function degreeToRadian(deg) { - return deg * (Math.PI / 180); -} - -function getGraph() { - return document.querySelector(".graph"); -} - - -function rescaleRange(numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { - numberToRescale = parseFloat(numberToRescale); - initScaleMin = parseFloat(initScaleMin); - initScaleMax = parseFloat(initScaleMax); - destinationMin = parseFloat(destinationMin); - destinationMax = parseFloat(destinationMax); - return destinationMin + (((numberToRescale - initScaleMin) * (destinationMax - destinationMin)) / (initScaleMax - initScaleMin)); -} - -function addPoint(value = 100, angle, radiusInPercent, rescaleOptions = false) { - - if (rescaleOptions) { - angle = rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax, 4, 96); - } - console.log(angle); - - let pointSize = (parseFloat(value) / 100.0) * 20.0; - let pointPos = getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0); - let parent = getGraph(); - let pt = document.createElement('div'); - pt.classList.add("graph-point"); - pt.classList.add("fade-in"); - pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;'); - parent.appendChild(pt); -} - -function getCoordinates(angleInPercent, radiusInPercent, shiftX = 7, shiftY = 7) { - - // In pixels - let graphDimensions = getGraphSize(); - - // division by 200 because /100 for the percent then by 2 for the conversion fom the diameter to the radius - let radius = (graphDimensions.height * radiusInPercent) / 200; - let angle = degreeToRadian(180 - (angleInPercent * 3.6)); - let posX = radius * Math.sin(angle); - let posY = radius * Math.cos(angle) / graphDimensions.ratio; - - // recenter pts on the middle of the graph - posX += (graphDimensions.width / 2) - shiftX; - posY += (graphDimensions.height / 2) - shiftY; - - return {posX: posX, posY: posY}; -} - -function addRing(size = 80) { - - let graph = getGraph(); - let ring = document.createElement("div"); - ring.classList.add("graph-ring"); - ring.classList.add("fade-in"); - ring.setAttribute("style", "height: " + size + "%; width: " + size + "%;"); - graph.append(ring); -} - -function addFlag(radius = 0, flagURL = '', country = '') { - - let graph = getGraph(); - - let flag = document.createElement("div"); - flag.classList.add("graph-flag"); - flag.classList.add("fade-in"); - - if (radius !== 0) { - //TODO: POURQUOI ? div/2 marche pas pour le shiftX - let flagPos = getCoordinates(1, radius, 46 / 2, 30 / 2); - flag.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px; background-image:url(\"" + flagURL + "\");"); - } else { - flag.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); - } - - flag.setAttribute("title", country); - graph.append(flag); -} - -function addLabel(radius = 0, content) { - - let graph = getGraph(); - - let label = document.createElement("div"); - label.classList.add("graph-flag"); - label.classList.add("fade-in"); - - if (radius !== 0) { - //TODO: POURQUOI ? div/2 marche pas pour le shiftX - let flagPos = getCoordinates(1, radius, 46 / 2, 30 / 2); - label.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); - } else { - label.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); - } - - label.setAttribute("title", country); - graph.append(label); -} - - -/** - * @desc Use to make the graph squared at any time, and simplify the placement - * @return void - */ -function resizeGraphContainer() { - let dimensions = getGraphContainerSize(); - let minDim = 0; - - if (dimensions.height > dimensions.width) minDim = dimensions.width; - else minDim = dimensions.height; - - let graph = getGraph(); - graph.setAttribute('style', 'height: ' + minDim + 'px; width:' + minDim + 'px;'); - //console.log("resize to " + minDim); -} - -/** - * ---------- INIT ------------------------ - */ - - function testGraph() { let data = []; @@ -282,7 +249,7 @@ function testGraph() { ], }, ]; - refreshData(); + graphVis.refreshData(); } function testGraph2() { @@ -321,16 +288,10 @@ function testGraph2() { ], } ]; - refreshData(); + graphVis.refreshData(); } -window.addEventListener('resize', resizeGraphContainer); -window.addEventListener('resize', refreshData); -resizeGraphContainer(); -refreshData(); - - -/* addRing(75, 'france'); -addRing(65, 'france'); -addRing(55, 'france'); -addFlag('france', 75); */ \ No newline at end of file +window.addEventListener('resize', graphVis.resizeGraphContainer); +window.addEventListener('resize', graphVis.refreshData); +graphVis.resizeGraphContainer(); +graphVis.refreshData(); \ No newline at end of file -- GitLab From 0ef50f5235e2cc42911b545d85396dc1f88f0021 Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Wed, 28 Apr 2021 16:13:03 +0200 Subject: [PATCH 06/28] premier css --- css/graph.css | 6 ++-- src/css/index.css | 70 +++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 65 insertions(+), 11 deletions(-) diff --git a/css/graph.css b/css/graph.css index d3ded3d..454e58e 100644 --- a/css/graph.css +++ b/css/graph.css @@ -6,13 +6,13 @@ body { position: relative; z-index: 0; text-align: center; - background-color: white; + background-color: #f5f5f5; font-size: 18px; margin: 0; padding: 0; width: 100%; height: 100vh; - background-color: blue; + background-color: #2D2B54; } .graph { @@ -47,7 +47,7 @@ body { display: inline-block; height: 30px; width: 40px; - border-radius: 0; + border-radius: 5px; background-color: red; background-size: 100% 100%; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); diff --git a/src/css/index.css b/src/css/index.css index f1bd5b2..ecc61f8 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,14 +1,22 @@ @import url(https://fonts.googleapis.com/css?family=Roboto); +@font-face { + +} + /* MAIN APP CONTAINERS */ body { + background-color: #2D2B54; font-family: 'Roboto'; + color : #f5f5f5; + margin : auto auto auto auto; } .main-part { display: flex; flex-direction: row; + margin : 2em 2em 2em 2em; } /* LEFT SIDE SEARCH PARAMETERS */ @@ -17,15 +25,32 @@ body { display: flex; flex-direction: column; - width: 30vw; + width: 20vw; } .left-side-search-parameters > div { - margin: 25px 0 0 0; - - background-color: rgb(196, 171, 247); + background-color:#18183B; border-radius: 10px; padding: 20px; + margin : 1em 1em 1em 1em; +} + +.search-bar-input { + margin : 1em 1em 1em 1em; +} + +.language-selector { + margin : 1em 1em 1em 1em; +} + +.search-bar-button { + background-color:#6266b2; + border-style: none; + color : #f5f5f5; + margin : 0.5em auto auto auto; + width : 8em; + height: 3em; + border-radius: 5px; } .news-container { @@ -69,11 +94,40 @@ body { display: flex; flex-direction: column; - margin: 0 auto; - width: 75vw; + margin: 3em 3em 3em 3em; +} + +.daterange-slider { + color :#f5f5f5 !important; +} + +.jsr_slider::before { + background-color : #6266b2 !important; +} + +.jsr_rail { + background-color: #18183B !important; +} + +.jsr_bar { + background-color: #f5f5f5 !important; +} + +.jsr_label { + background-color : #6266b2 !important; + color : #f5f5f5; +} + +canvas { + margin : 1em auto auto auto !important; } .visualize-btn { - margin-top: 25px; - background-color: aqua; + background-color:#6266b2; + border-style: none; + color : #f5f5f5; + margin : 1em auto auto auto; + width : 8em; + height: 3em; + border-radius: 5px; } \ No newline at end of file -- GitLab From e8d95ab2b42608cf4d88f41499388da9ee4c0576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Fri, 30 Apr 2021 18:11:42 +0200 Subject: [PATCH 07/28] starting marker, need to fix position and angle --- css/_global.scss | 6 ++- css/graph.css | 42 ++++++++++++++++---- css/graph.css.map | 2 +- css/graph.scss | 40 ++++++++++++++++--- graph-visualisation.js | 87 ++++++++++++++++++++++++++++++------------ 5 files changed, 138 insertions(+), 39 deletions(-) diff --git a/css/_global.scss b/css/_global.scss index 20b5612..3946287 100644 --- a/css/_global.scss +++ b/css/_global.scss @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); + * { box-sizing: border-box; } @@ -6,11 +8,11 @@ body { position: relative; z-index: 0; text-align: center; - background-color: white; font-size: 18px; margin: 0; padding: 0; width: 100%; height: 100vh; - background-color: blue; + background-color: #2b2d54; + font-family: 'Open Sans', sans-serif; } diff --git a/css/graph.css b/css/graph.css index d3ded3d..24526ee 100644 --- a/css/graph.css +++ b/css/graph.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); * { box-sizing: border-box; } @@ -6,13 +7,13 @@ body { position: relative; z-index: 0; text-align: center; - background-color: white; font-size: 18px; margin: 0; padding: 0; width: 100%; height: 100vh; - background-color: blue; + background-color: #2b2d54; + font-family: "Open Sans", sans-serif; } .graph { @@ -31,12 +32,12 @@ body { justify-content: center; width: 100%; height: 100%; - padding: 100px; + padding: 50px; } .graph-ring { z-index: 0; position: absolute; - border: 1px solid rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100%; width: 80%; height: 80%; @@ -49,8 +50,8 @@ body { width: 40px; border-radius: 0; background-color: red; - background-size: 100% 100%; - box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); + background-size: cover; + box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.5); line-height: 0; } .graph-point { @@ -60,7 +61,34 @@ body { width: 20px; border-radius: 100%; background-color: greenyellow; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3); +} +.graph-marker { + z-index: 2; + position: absolute; + height: 2px; + width: 2px; + transform-origin: center; + background-color: red; + display: inline-block; + line-height: 0; +} +.graph-label { + z-index: 2; + position: absolute; + display: inline-block; + max-width: 250px; + font-size: 1em; + color: white; +} +.graph-label-small { + z-index: 2; + position: absolute; + display: inline-block; + width: 100px; + height: 50px; + font-size: 0.7em; + color: white; } .graph-bg-1 { background-color: #aa4fff; diff --git a/css/graph.css.map b/css/graph.css.map index 93fdc00..586af90 100644 --- a/css/graph.css.map +++ b/css/graph.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACZF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss index fc89286..1560901 100644 --- a/css/graph.scss +++ b/css/graph.scss @@ -18,13 +18,13 @@ justify-content: center; width: 100%; height: 100%; - padding: 100px; + padding: 50px; } &-ring { z-index: 0; position: absolute; - border: 1px solid rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100%; width: 80%; height: 80%; @@ -38,8 +38,8 @@ width: 40px; border-radius: 0; background-color: red; - background-size: 100% 100%; - box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5); + background-size: cover; + box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.5); line-height: 0; } @@ -50,7 +50,37 @@ width: 20px; border-radius: 100%; background-color: greenyellow; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3); + } + + &-marker { + z-index: 2; + position: absolute; + height: 2px; + width: 2px; + transform-origin: center; + background-color: red; + display: inline-block; + line-height: 0; + } + + &-label { + z-index: 2; + position: absolute; + display: inline-block; + max-width: 250px; + font-size: 1em; + color: white; + } + + &-label-small { + z-index: 2; + position: absolute; + display: inline-block; + width: 100px; + height: 50px; + font-size: 0.7em; + color: white; } &-bg-1 { diff --git a/graph-visualisation.js b/graph-visualisation.js index 8cecfa5..937f28e 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -1,5 +1,12 @@ const graphVis = { + data: [], + + markerDate: 0, + + setMarkerDate: function (dateTimestamp) { + graphVis.markerDate = dateTimestamp; + }, refreshData: function () { //Clear the graph before render @@ -14,10 +21,12 @@ const graphVis = { let radius = 85 - 15 * index; graphVis.addRing(radius); graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1)); + graphVis.addLabel(radius, indicator.name); }); } else if (graphVis.data.length >= 2) { console.log("DISPlAY - au moins 2pays"); // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays + graphVis.addLabel(-1, graphVis.data[0].indicators[0].name); graphVis.data.forEach(function (country, index) { let radius = 85 - 15 * index; graphVis.addFlag(radius, country.flagURL, country.country); @@ -32,8 +41,7 @@ const graphVis = { }, getAngleRange: function (angleArray) { - console.log(angleArray); - + //console.log(angleArray); const max = angleArray.reduce(function (max, current) { return (current > max) ? current : max; }, angleArray[0]); @@ -86,7 +94,7 @@ const graphVis = { return document.querySelector(".graph"); }, - rescaleRange: function (numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 4, destinationMax = 96) { + rescaleRange: function (numberToRescale, initScaleMin = 0, initScaleMax = 100, destinationMin = 5, destinationMax = 95) { numberToRescale = parseFloat(numberToRescale); initScaleMin = parseFloat(initScaleMin); initScaleMax = parseFloat(initScaleMax); @@ -97,24 +105,25 @@ const graphVis = { addIndicators: function (indicator, radius, colorClass = false) { - let angle = 0; + let angleInPercent = 0; let angleRange = graphVis.getAngleRange(indicator.data.map(function (indicatorValue, index, array) { return graphVis.getAngle(index, array.length); })); for (let i = 0, item; item = indicator.data[i]; i++) { - angle = graphVis.getAngle(i, indicator.data.length); - console.log("OnCountry - Angle: " + angle); - graphVis.addPoint(item.percent, angle, radius, angleRange, colorClass); + angleInPercent = graphVis.getAngle(i, indicator.data.length); + //console.log("OnCountry - Angle: " + angle); + graphVis.addPoint(item.percent, angleInPercent, radius, angleRange, colorClass, item.date); + if (item.date === graphVis.markerDate) graphVis.addMarker(radius, angleInPercent); } }, - addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false) { + addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false, date = '') { if (rescaleOptions) { angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); } - console.log(angle); + //console.log(angle); let pointSize = (parseFloat(value) / 100.0) * 20.0; let pointPos = graphVis.getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0); @@ -124,6 +133,7 @@ const graphVis = { pt.classList.add("fade-in"); if (colorClass) pt.classList.add(colorClass); pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;'); + pt.setAttribute("title", value + "% le " + date); parent.appendChild(pt); }, @@ -177,22 +187,36 @@ const graphVis = { addLabel: function (radius = 0, content) { - /* let graph = graphVis.getGraph(); - + let graph = graphVis.getGraph(); let label = document.createElement("div"); - label.classList.add("graph-flag"); - label.classList.add("fade-in"); - if (radius !== 0) { - //TODO: FLAG PLACEMENT & shift DONT WORK - let flagPos = graphVis.getCoordinates(0, radius, 20, 15); - label.setAttribute("style", "top: " + flagPos.posY + "px; left: " + flagPos.posX + "px;"); + if (radius > 0) { + let labelPos = graphVis.getCoordinates(0, radius, 50, 25); + label.setAttribute("style", "top: " + labelPos.posY + "px; left: " + labelPos.posX + "px;"); + label.classList.add("graph-label-small"); } else { - label.setAttribute("style", "background-image:url(\"" + flagURL + "\"); transform: scale(2)"); + label.classList.add("graph-label"); } - label.setAttribute("title", country); - graph.append(label); */ + label.classList.add("fade-in"); + label.innerHTML = content; + label.setAttribute("title", content); + graph.append(label); + }, + + addMarker: function (radius, angle) { + // if a marker is already in place don't add one + if (document.querySelector('.graph-marker')) return; + console.log("Add marker: " + radius + " / " + angle); + + let graph = graphVis.getGraph(); + let marker = document.createElement("div"); + let markerPos = graphVis.getCoordinates(angle, radius, 1, 1); + marker.setAttribute("style", "top: " + markerPos.posY + "px; left: " + markerPos.posX + "px; transform: rotate(" + angle * 3.6 + "deg);"); + marker.classList.add("graph-marker"); + marker.classList.add("fade-in"); + marker.setAttribute("title", "Apparition de la fake new"); + graph.append(marker); }, /** @@ -228,11 +252,22 @@ function getRandomInt(min, max) { function testGraph() { + graphVis.setMarkerDate('2010-10-10'); + let data = []; for (let i = 0; i <= 100; i += 5) { - data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 36) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); + } + + let data2 = []; + + for (let i = 0; i <= 100; i += 2) { + if (i !== 36) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } + graphVis.data = [ { flagURL: "images/flag-groeinland.svg", @@ -244,7 +279,7 @@ function testGraph() { }, { name: "Masque porté quotodiennement", - data: data + data: data2 }, ], }, @@ -254,16 +289,20 @@ function testGraph() { function testGraph2() { + graphVis.setMarkerDate('2010-10-10'); + let data = []; for (let i = 0; i <= 100; i += 5) { - data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 36) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } let data2 = []; for (let i = 0; i <= 100; i += 2) { - data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 36) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } graphVis.data = [ -- GitLab From 4091f4e7c5b3e61b401ef16ba124eaf28247b0b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Fri, 30 Apr 2021 19:00:29 +0200 Subject: [PATCH 08/28] marker fixed, need to improve the point label hover --- css/graph.css | 29 ++++++++++++++++++--- css/graph.css.map | 2 +- css/graph.scss | 35 +++++++++++++++++++++++--- graph-visualisation.js | 57 ++++++++++++++++++++++-------------------- 4 files changed, 87 insertions(+), 36 deletions(-) diff --git a/css/graph.css b/css/graph.css index 24526ee..ee407f1 100644 --- a/css/graph.css +++ b/css/graph.css @@ -62,14 +62,35 @@ body { border-radius: 100%; background-color: greenyellow; box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3); + transform: scale(1); +} +.graph-point:hover { + transform: scale(1.5); + box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.5); +} +.graph-point:hover .graph-point-label { + display: inline-block; +} +.graph-point-label { + display: none; + position: absolute; + top: -25px; + left: -25px; + padding: 5px 10px; + border-radius: 3px; + box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3); + background-color: #16172b; + color: white; + font-size: 10px; + white-space: nowrap; } .graph-marker { - z-index: 2; + z-index: 0; position: absolute; - height: 2px; - width: 2px; + height: 300px; + width: 1px; transform-origin: center; - background-color: red; + background-color: salmon; display: inline-block; line-height: 0; } diff --git a/css/graph.css.map b/css/graph.css.map index 586af90..d2ba7ac 100644 --- a/css/graph.css.map +++ b/css/graph.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph.scss index 1560901..36b012c 100644 --- a/css/graph.scss +++ b/css/graph.scss @@ -51,15 +51,41 @@ border-radius: 100%; background-color: greenyellow; box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.3); + transform: scale(1); + + &:hover { + transform: scale(1.5); + box-shadow: 0px 0px 5px 0 rgba(255, 255, 255, 0.5); + + .graph-point-label { + display: inline-block; + } + } + + &-label { + display: none; + position: absolute; + top: -25px; + left: -25px; + padding: 5px 10px; + border-radius: 3px; + box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3); + background-color: #16172b; + color: white; + font-size: 10px; + white-space: nowrap; + } + } + &-marker { - z-index: 2; + z-index: 0; position: absolute; - height: 2px; - width: 2px; + height: 300px; + width: 1px; transform-origin: center; - background-color: red; + background-color: salmon; display: inline-block; line-height: 0; } @@ -73,6 +99,7 @@ color: white; } + &-label-small { z-index: 2; position: absolute; diff --git a/graph-visualisation.js b/graph-visualisation.js index 937f28e..383451d 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -65,27 +65,16 @@ const graphVis = { let style = window.getComputedStyle(graph); let width = graph.offsetWidth - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)); let height = graph.offsetHeight - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); - - return { - height: height, - width: width, - ratio: height / width - }; + return {height: height, width: width, ratio: height / width}; }, getGraphSize: function () { let graph = document.querySelector(".graph"); let width = graph.offsetWidth; let height = graph.offsetHeight; - - return { - height: height, - width: width, - ratio: height / width - }; + return {height: height, width: width, ratio: height / width}; }, - degreeToRadian: function (deg) { return deg * (Math.PI / 180); }, @@ -114,26 +103,27 @@ const graphVis = { angleInPercent = graphVis.getAngle(i, indicator.data.length); //console.log("OnCountry - Angle: " + angle); graphVis.addPoint(item.percent, angleInPercent, radius, angleRange, colorClass, item.date); - if (item.date === graphVis.markerDate) graphVis.addMarker(radius, angleInPercent); + if (item.date === graphVis.markerDate) graphVis.addMarker(radius, angleInPercent, angleRange); } }, addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false, date = '') { - if (rescaleOptions) { - angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); - } + if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); //console.log(angle); - let pointSize = (parseFloat(value) / 100.0) * 20.0; let pointPos = graphVis.getCoordinates(angle, radiusInPercent, pointSize / 2.0, pointSize / 2.0); let parent = graphVis.getGraph(); let pt = document.createElement('div'); pt.classList.add("graph-point"); pt.classList.add("fade-in"); - if (colorClass) pt.classList.add(colorClass); + if (colorClass !== false) pt.classList.add(colorClass); pt.setAttribute('style', 'top: ' + pointPos.posY + 'px; left: ' + pointPos.posX + 'px; height:' + pointSize + 'px; width:' + pointSize + 'px; animation-delay: ' + (angle / 100) + 's;'); pt.setAttribute("title", value + "% le " + date); + let inner = document.createElement('div'); + inner.classList.add('graph-point-label'); + inner.innerHTML = value + "% le " + date; + pt.append(inner); parent.appendChild(pt); }, @@ -194,9 +184,9 @@ const graphVis = { let labelPos = graphVis.getCoordinates(0, radius, 50, 25); label.setAttribute("style", "top: " + labelPos.posY + "px; left: " + labelPos.posX + "px;"); label.classList.add("graph-label-small"); - } else { + } else label.classList.add("graph-label"); - } + label.classList.add("fade-in"); label.innerHTML = content; @@ -204,14 +194,17 @@ const graphVis = { graph.append(label); }, - addMarker: function (radius, angle) { + addMarker: function (radius, angle, rescaleOptions = false) { // if a marker is already in place don't add one if (document.querySelector('.graph-marker')) return; + + let originAngle = angle * 3.6; + if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); console.log("Add marker: " + radius + " / " + angle); let graph = graphVis.getGraph(); let marker = document.createElement("div"); - let markerPos = graphVis.getCoordinates(angle, radius, 1, 1); + let markerPos = graphVis.getCoordinates(angle, radius, 1.0, 150.0); marker.setAttribute("style", "top: " + markerPos.posY + "px; left: " + markerPos.posX + "px; transform: rotate(" + angle * 3.6 + "deg);"); marker.classList.add("graph-marker"); marker.classList.add("fade-in"); @@ -257,14 +250,14 @@ function testGraph() { let data = []; for (let i = 0; i <= 100; i += 5) { - if (i !== 36) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 50) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } let data2 = []; for (let i = 0; i <= 100; i += 2) { - if (i !== 36) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 30) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } @@ -294,14 +287,14 @@ function testGraph2() { let data = []; for (let i = 0; i <= 100; i += 5) { - if (i !== 36) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 80) data.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); else data.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } let data2 = []; for (let i = 0; i <= 100; i += 2) { - if (i !== 36) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); + if (i !== 80) data2.push({date: "2016-20-36", percent: getRandomInt(0, 100)}); else data2.push({date: "2010-10-10", percent: getRandomInt(0, 100)}); } @@ -316,6 +309,16 @@ function testGraph2() { }, ], }, + { + flagURL: "images/flag-france.svg", + country: "France â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: data2 + }, + ], + }, { flagURL: "images/flag-france.svg", country: "France â¤ï¸", -- GitLab From 80ab09770e6a1ba79b6b25487d6e7f40ae6619dd Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Fri, 7 May 2021 21:18:20 +0200 Subject: [PATCH 09/28] page recherche --- src/css/index.css | 12 +- src/css/search_window.css | 195 ++++++++++++++++++++--- src/js/gfct_api/manage_search_results.js | 16 +- 3 files changed, 190 insertions(+), 33 deletions(-) diff --git a/src/css/index.css b/src/css/index.css index 69f4903..aeab5d3 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -7,13 +7,19 @@ /* MAIN APP CONTAINERS */ body { + overflow: hidden; background-color: #2D2B54; - margin: 0; font-family: 'Roboto'; color : #f5f5f5; + width: 100vw; + height: 100vh; margin : auto auto auto auto; } +.app-container { + overflow: hidden; +} + .main-part { display: flex; flex-direction: row; @@ -36,10 +42,6 @@ body { margin : 1em 1em 1em 1em; } -.search-bar-input { - margin : 1em 1em 1em 1em; -} - .language-selector { margin : 1em 1em 1em 1em; } diff --git a/src/css/search_window.css b/src/css/search_window.css index ab15c9f..5489c98 100644 --- a/src/css/search_window.css +++ b/src/css/search_window.css @@ -1,16 +1,39 @@ /* WINDOW */ +.body { + overflow: hidden; +} + +a:link { + color: #3e4188; +} + +/* visited link */ +a:visited { + color: #18183B; +} + +/* mouse over link */ +a:hover { + color: #18183B; +} + + .search-window { - display: flex; - flex-direction: column; + overflow-x: hidden; + overflow-y: hidden; position: fixed; + top: 0%; + left: 0%; z-index: 10; - left: 0; - right: 0; - width: 100vw; - height: 100vh; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; overflow: hidden; - background-color: rgb(0, 0, 0, 0.95); + + background-color: black; + opacity: 1; } /* CLOSE BUTTON */ @@ -18,8 +41,14 @@ .close-button-search-window { position: absolute; width: 100px; - top: 30px; - right: 30px; + top: 80px; + right: 10vw; + height: 40px; + border-radius: 8px; + border: none; + background-color: #6266b2; + color: white; + } /* SEARCH BAR */ @@ -30,14 +59,14 @@ margin: 120px auto 50px auto; align-items: center; justify-content: center; - - width: 50%; + outline: none; + width: 60%; } .search-bar > div { display: flex; flex-direction: column; - margin: 10px 20px; + padding : 10px; } .search-bar > div > label { @@ -49,8 +78,27 @@ width: 90%; } +input[type=text]{ + margin : 0 0 0 0; + caret-color : #6266b2; + padding : 15px; + border-radius: 8px; + border:none; +} + .search-bar-language-input { - width: 10%; + width: 80px; +} + +.language-selector { + background-color: white; + appearance:none; + cursor : pointer; + margin : 0 0 0 0; + padding : 15px; + border-radius: 8px; + border:none; + overflow: hidden; } /* SEARCH RESULTS */ @@ -58,16 +106,15 @@ .gfct-search-results-container { display: flex; flex-direction: column; + width: 60%; + margin: 0 auto 0 auto; } .gfct-search-results { display: none; flex-direction: column; - margin: 0 auto 0 auto; - padding: 10px; - width: 80vw; - height: 60vh; overflow-y: auto; + overflow-x: hidden; background-color: rgba(30, 30, 30, 0.3); border-radius: 5px; } @@ -78,16 +125,118 @@ justify-content: center; } -.search-results-row > div { - margin: 6px; -} - .more-results-btn { display: none; - margin: 25px auto; - width: 200px; + margin: 5vh auto; + width: 150px; + height: 40px; + border-radius: 8px; + border: none; + background-color: #6266b2; + color: white; } .search-results-error-message { color: white; } + +.news-container { + flex-direction: column; + margin: 10px; + background-color: #6266b2; + width: 17.5vw; + height: 12vh; + border-radius: 4px; + box-shadow: 10px 5px black; + padding: 15px 20px 15px 20px; +} + +.news-publisher-container { + flex-direction: row; + color: #3e4188; + width: 100%; + height: 10%; + display: flex; + font-size: xx-small; +} + +.news-publisher-label { + margin: 0; + padding: 0; +} + +.news-title { + margin: 0; + padding: 5px 0 0 0; + font-size: small; +} + +.news-dates-container { + display: flex; + flex-direction: row; + font-size: xx-small; + color: #3e4188; +} + +.news-claim-date-container{ + display: flex; + flex-direction: row; + font-size: xx-small; + color: #3e4188; + width: 50%; + height: 70%; +} + +.claim-date{ + margin:0; + padding:5px 10px 0 0; +} + +.news-review-date-container{ + display: flex; + flex-direction: row; + font-size: xx-small; + color: #3e4188; + width: 50%; + height: 70%; +} + +.news-review-date { + margin:0; + padding:5px 10px 0 0; +} + +.news-elements-container { + display: flex; + flex-direction: row; +} + +.news-left-elements-container { + display: flex; + flex-direction: column; + width: 80%; +} + +.news-review-rating { + margin: 0; + padding: 0 0 0 0; + font-size: small; +} + +.news-review-view-article { + margin:0; + padding:5px 0 0 0; + font-size: xx-small; +} + +.article-button-select{ + margin: 0; + padding: 0 10px 0 0; + color:white; + background-color: #6266b2; + border-color: white; + border-radius: 4px; + height: 30px; + width: 100px; + border-style: solid; +} diff --git a/src/js/gfct_api/manage_search_results.js b/src/js/gfct_api/manage_search_results.js index 4c9defb..26342f7 100644 --- a/src/js/gfct_api/manage_search_results.js +++ b/src/js/gfct_api/manage_search_results.js @@ -95,25 +95,31 @@ const buildNews = (claim, button = 'select') => { dates_container.appendChild(review_date_container); news_container.appendChild(dates_container); + const element_container = document.createElement('div'); + element_container.className = 'news-elements-container'; + news_container.appendChild(element_container); + const element_left_container = document.createElement('div'); + element_left_container.className = 'news-left-elements-container'; + element_container.appendChild(element_left_container); // rating const rating = document.createElement('p'); rating.className = 'news-review-rating'; rating.innerHTML = claim.claimReview[0].publisher.name + ' rating : ' + claim.claimReview[0].textualRating; - news_container.appendChild(rating); + element_left_container.appendChild(rating); // view article const view_article = document.createElement('a'); view_article.className = 'news-review-view-article'; view_article.innerHTML = 'View article'; view_article.setAttribute('href', claim.claimReview[0].url); view_article.setAttribute('target', 'blank'); - news_container.appendChild(view_article); + element_left_container.appendChild(view_article); if(button === 'select') { // select article button const select_article = document.createElement('button'); - select_article.className = 'article-button select'; + select_article.className = 'article-button-select'; select_article.innerHTML = 'Select'; select_article.setAttribute('onClick', 'handleOnClickSelectButton(this.parentNode)'); - news_container.appendChild(select_article); + element_container.appendChild(select_article); } if(button === 'change') { // change article button @@ -121,7 +127,7 @@ const buildNews = (claim, button = 'select') => { change_article.className = 'article-button change'; change_article.innerHTML = 'Change'; change_article.setAttribute('onClick', 'handleOnClickChangeButton()'); - news_container.appendChild(change_article); + element_container.appendChild(change_article); } } else { -- GitLab From 8bd768e16e8811c7b4adcaa07ccd896c88998ca6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 14:33:28 +0200 Subject: [PATCH 10/28] adding doc and starting improving modifications on the libs --- graph-visualisation.js | 95 +++++++++++++++++++++++------------------- graphVis-lib.md | 61 +++++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 42 deletions(-) create mode 100644 graphVis-lib.md diff --git a/graph-visualisation.js b/graph-visualisation.js index 383451d..65dad53 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -2,43 +2,60 @@ const graphVis = { data: [], - markerDate: 0, + markers: [], + + setMarker: function (timestamp, label = '', type = 'claim') { + graphVis.markers.push({ + date: timestamp, + type: type, + label: label + }); + }, - setMarkerDate: function (dateTimestamp) { - graphVis.markerDate = dateTimestamp; + existMarker: function (timestamp) { + const test = graphVis.markers.find(function (item) { + return timestamp === item.date; + }); + return test !== undefined; }, - refreshData: function () { + refreshData: function () { //Clear the graph before render graphVis.getGraph().innerHTML = ""; + if (graphVis.data.length === 1) graphVis.renderSoloCountry(); + else if (graphVis.data.length >= 2) graphVis.renderMultipleCountries(); + else graphVis.renderDefault(); + }, - if (graphVis.data.length === 1) { - console.log("DISPlAY - 1 pays"); - // Si un seul pays alors on affiche les indicateurs - let data = graphVis.data[0]; - graphVis.addFlag(-1, data.flagURL, data.country); - data.indicators.forEach(function (indicator, index) { - let radius = 85 - 15 * index; - graphVis.addRing(radius); - graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1)); - graphVis.addLabel(radius, indicator.name); - }); - } else if (graphVis.data.length >= 2) { - console.log("DISPlAY - au moins 2pays"); - // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays - graphVis.addLabel(-1, graphVis.data[0].indicators[0].name); - graphVis.data.forEach(function (country, index) { - let radius = 85 - 15 * index; - graphVis.addFlag(radius, country.flagURL, country.country); - graphVis.addRing(radius); - graphVis.addIndicators(country.indicators[0], radius, "graph-bg-1"); - }); - } else { - //reaction par defaut - console.log("display default"); - graphVis.getGraph().innerHTML = "Veuillez selectioner plus de paramètres."; - } + renderSoloCountry: function () { + console.log("DISPlAY - 1 pays"); + // Si un seul pays alors on affiche les indicateurs + let data = graphVis.data[0]; + graphVis.addFlag(-1, data.flagURL, data.country); + data.indicators.forEach(function (indicator, index) { + let radius = 85 - 15 * index; + graphVis.addRing(radius); + graphVis.addIndicators(indicator, radius, "graph-bg-" + (index + 1)); + graphVis.addLabel(radius, indicator.name); + }); + }, + renderMultipleCountries: function () { + console.log("DISPlAY - au moins 2pays"); + // si il y a au moins 2 pays on les affiche et uniquement un seul indicateur par pays + graphVis.addLabel(-1, graphVis.data[0].indicators[0].name); + graphVis.data.forEach(function (country, index) { + let radius = 85 - 15 * index; + graphVis.addFlag(radius, country.flagURL, country.country); + graphVis.addRing(radius); + graphVis.addIndicators(country.indicators[0], radius, "graph-bg-1"); + }); }, + renderDefault: function () { + //reaction par defaut + console.log("display default"); + graphVis.getGraph().innerHTML = "Veuillez selectioner plus de paramètres."; + }, + getAngleRange: function (angleArray) { //console.log(angleArray); @@ -103,7 +120,7 @@ const graphVis = { angleInPercent = graphVis.getAngle(i, indicator.data.length); //console.log("OnCountry - Angle: " + angle); graphVis.addPoint(item.percent, angleInPercent, radius, angleRange, colorClass, item.date); - if (item.date === graphVis.markerDate) graphVis.addMarker(radius, angleInPercent, angleRange); + if (item.date === graphVis.markers) graphVis.addMarker(radius, angleInPercent, angleRange); } }, @@ -157,8 +174,9 @@ const graphVis = { addFlag: function (radius = -1, flagURL = '', country = '') { - let graph = graphVis.getGraph(); + // If the radius is -1 then the flag is placed in the middle of the visualisation + let graph = graphVis.getGraph(); let flag = document.createElement("div"); flag.classList.add("graph-flag"); flag.classList.add("fade-in"); @@ -187,7 +205,6 @@ const graphVis = { } else label.classList.add("graph-label"); - label.classList.add("fade-in"); label.innerHTML = content; label.setAttribute("title", content); @@ -195,10 +212,7 @@ const graphVis = { }, addMarker: function (radius, angle, rescaleOptions = false) { - // if a marker is already in place don't add one - if (document.querySelector('.graph-marker')) return; - let originAngle = angle * 3.6; if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); console.log("Add marker: " + radius + " / " + angle); @@ -218,7 +232,7 @@ const graphVis = { */ resizeGraphContainer: function () { let dimensions = graphVis.getGraphContainerSize(); - let minDim = 0; + let minDim; if (dimensions.height > dimensions.width) minDim = dimensions.width; else minDim = dimensions.height; @@ -230,9 +244,6 @@ const graphVis = { }; -//TODO: hover value, couleurs, indicator de fake news - - /** * ---------- INIT ------------------------ */ @@ -245,7 +256,7 @@ function getRandomInt(min, max) { function testGraph() { - graphVis.setMarkerDate('2010-10-10'); + graphVis.setMarker('2010-10-10'); let data = []; @@ -282,7 +293,7 @@ function testGraph() { function testGraph2() { - graphVis.setMarkerDate('2010-10-10'); + graphVis.setMarker('2010-10-10'); let data = []; diff --git a/graphVis-lib.md b/graphVis-lib.md new file mode 100644 index 0000000..6ec3ad1 --- /dev/null +++ b/graphVis-lib.md @@ -0,0 +1,61 @@ +Librarie maison crée avec le â¤ï¸ par Grégoire + +# 1. Installation + +Placer la librarie Javascipt GraphVis dans le document HTML **avant l'appel de celle-ci** et **après l'apparition de son +container HTML** + +```html +<!-- Container HTML à placer avant l'appel de la lib --> +<div class="graph-container"> + <div class="graph"></div> +</div> +<!-- Appel de la librarie après le container HTML --> +<script src="PATH-TO-THE-LIB/graph-visualisation.js"></script> +``` + +# 2. Utilisation & subtilités + +## Données du graph + +Les données doivent être définis grâce à la propriété `graphVis.data` et avec le format suivant : + +```javascript + graphVis.data = [ + // Un objet par pays + { + flagURL: "PathToTheFlagImage", + country: "NameOfTheCountryï¸", + //Liste des indicateurs un par objet + indicators: [ + { + name: "Masque porté quotodiennement", + data: [ + { + //date au format timestamp + date: 1519211809934, + // pourcentage entre 0 et 100 + percent: 50 + } + ] + }, + ], + } +]; +``` + +## Ajout de marqueurs (Claim et Validation de la fake news) + +Les marqueurs sont de types `{ 'claim', 'valid'}` + +```javascript +graphVis.setMarker(timestamp, label = '', type = 'claim'); +``` + +## Mise à jour du graph + +La mise à jour du graphique est lancé par : + +```javascript +graphVis.refreshData(); +``` \ No newline at end of file -- GitLab From 011874c4ab0c172d497465b04b138d9048b4fda4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 14:44:52 +0200 Subject: [PATCH 11/28] updating doc with exemples and files name of the lib --- css/{graph.css => graph-vis.css} | 2 +- css/graph-vis.css.map | 1 + css/{graph.scss => graph-vis.scss} | 0 css/graph.css.map | 1 - graphVis-lib.md | 32 +++++++++++++++++++++++------- visualisation.html | 2 +- 6 files changed, 28 insertions(+), 10 deletions(-) rename css/{graph.css => graph-vis.css} (98%) create mode 100644 css/graph-vis.css.map rename css/{graph.scss => graph-vis.scss} (100%) delete mode 100644 css/graph.css.map diff --git a/css/graph.css b/css/graph-vis.css similarity index 98% rename from css/graph.css rename to css/graph-vis.css index ee407f1..1849772 100644 --- a/css/graph.css +++ b/css/graph-vis.css @@ -164,4 +164,4 @@ body { } } -/*# sourceMappingURL=graph.css.map */ +/*# sourceMappingURL=graph-vis.css.map */ diff --git a/css/graph-vis.css.map b/css/graph-vis.css.map new file mode 100644 index 0000000..dced87d --- /dev/null +++ b/css/graph-vis.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["_global.scss","graph-vis.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph-vis.css"} \ No newline at end of file diff --git a/css/graph.scss b/css/graph-vis.scss similarity index 100% rename from css/graph.scss rename to css/graph-vis.scss diff --git a/css/graph.css.map b/css/graph.css.map deleted file mode 100644 index d2ba7ac..0000000 --- a/css/graph.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["_global.scss","graph.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;AAAyB;EACvB;IACE;;EAEF;IACE;;;AAIJ;AAA4B;EAC1B;IACE;;EAEF;IACE;;;AAIJ;AAAuB;EACrB;IACE;;EAEF;IACE","file":"graph.css"} \ No newline at end of file diff --git a/graphVis-lib.md b/graphVis-lib.md index 6ec3ad1..be416a3 100644 --- a/graphVis-lib.md +++ b/graphVis-lib.md @@ -2,16 +2,34 @@ Librarie maison crée avec le â¤ï¸ par Grégoire # 1. Installation -Placer la librarie Javascipt GraphVis dans le document HTML **avant l'appel de celle-ci** et **après l'apparition de son -container HTML** +La librarie est composée de 3 élements : +- Un fichier CSS `graph-vis.css` à importer dans le head +- Du code HMTL à rajouter dans le `<body>` +- Un Fichier Javascript `graph-visualisation.js` à placer **avant l'appel de la librairie** + +Le container va prendre automatiquement l'espace disponible autour de lui. +disponible + +## Exemple de code ```html <!-- Container HTML à placer avant l'appel de la lib --> -<div class="graph-container"> - <div class="graph"></div> -</div> -<!-- Appel de la librarie après le container HTML --> -<script src="PATH-TO-THE-LIB/graph-visualisation.js"></script> +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- CSS a mettre dans le head --> + <link rel="stylesheet" type="text/css" href="PATH-TO-CSS/graph-vis.css"/> +</head> +<body> + <!-- Container HTML à placer dans le body --> + <div class="graph-container"> + <div class="graph"></div> + </div> + + <!-- Appel de la librarie après le container HTML --> + <script src="PATH-TO-LIB/graph-visualisation.js"></script> +</body> + ``` # 2. Utilisation & subtilités diff --git a/visualisation.html b/visualisation.html index e189653..dc4fcc2 100644 --- a/visualisation.html +++ b/visualisation.html @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <title>Hey salut</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <link rel="stylesheet" type="text/css" href="css/graph.css"/> + <link rel="stylesheet" type="text/css" href="css/graph-vis.css"/> <style> .random-pos { transition: all 1s ease-in-out; -- GitLab From 545818ec484f3d8a7bd8157d13e66e7730773e40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 15:03:16 +0200 Subject: [PATCH 12/28] updating task list --- graphVis-lib.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/graphVis-lib.md b/graphVis-lib.md index be416a3..d2b25bd 100644 --- a/graphVis-lib.md +++ b/graphVis-lib.md @@ -1,5 +1,13 @@ Librarie maison crée avec le â¤ï¸ par Grégoire +# Dev en cours : +- [ ] Changement du css des points +- [ ] Affichage des marqueurs complets +- [ ] Fix marqueurs size +- [ ] Fix css colors points with Judi +- [ ] Fix css colors markeurs with Judi +- [ ] Marker = Picto ? + # 1. Installation La librarie est composée de 3 élements : @@ -62,7 +70,7 @@ Les données doivent être définis grâce à la propriété `graphVis.data` et ]; ``` -## Ajout de marqueurs (Claim et Validation de la fake news) +## (Dev en cours) Ajout de marqueurs (Claim et Validation) Les marqueurs sont de types `{ 'claim', 'valid'}` -- GitLab From 9bde1ba2baff421b0504790b54935a8054796bd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 15:20:31 +0200 Subject: [PATCH 13/28] updating task list --- graph-visualisation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graph-visualisation.js b/graph-visualisation.js index 65dad53..aaadaab 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -120,7 +120,7 @@ const graphVis = { angleInPercent = graphVis.getAngle(i, indicator.data.length); //console.log("OnCountry - Angle: " + angle); graphVis.addPoint(item.percent, angleInPercent, radius, angleRange, colorClass, item.date); - if (item.date === graphVis.markers) graphVis.addMarker(radius, angleInPercent, angleRange); + //if (item.date === graphVis.markers) graphVis.addMarker(radius, angleInPercent, angleRange); } }, -- GitLab From 19eea1eaa912177d364103e18c5ef208b5902a53 Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Sat, 8 May 2021 17:19:35 +0200 Subject: [PATCH 14/28] logo page recherche et scroll --- res/checkmark.svg | 12 +++++++++++- res/error.svg | 13 ++++++++++++- src/css/search_window.css | 26 ++++++++++++++++---------- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/res/checkmark.svg b/res/checkmark.svg index 4a71572..08c493d 100644 --- a/res/checkmark.svg +++ b/res/checkmark.svg @@ -1 +1,11 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg> \ No newline at end of file +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:none;} + .st1{fill:#00AA14;} +</style> +<path class="st0" d="M0,0h24v24H0V0z"/> +<path class="st1" d="M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z"/> +</svg> diff --git a/res/error.svg b/res/error.svg index 5d4e432..97eb6ee 100644 --- a/res/error.svg +++ b/res/error.svg @@ -1 +1,12 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg> \ No newline at end of file +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> +<style type="text/css"> + .st0{display:none;fill:none;} + .st1{fill:#E0860E;} +</style> +<path class="st0" d="M0,0h24v24H0V0z"/> +<path class="st1" d="M11,15h2v2h-2V15z M11,7h2v6h-2V7z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z + M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z"/> +</svg> diff --git a/src/css/search_window.css b/src/css/search_window.css index 5489c98..98edad0 100644 --- a/src/css/search_window.css +++ b/src/css/search_window.css @@ -5,7 +5,7 @@ } a:link { - color: #3e4188; + color: #18183B; } /* visited link */ @@ -17,7 +17,6 @@ a:visited { a:hover { color: #18183B; } - .search-window { overflow-x: hidden; @@ -84,6 +83,12 @@ input[type=text]{ padding : 15px; border-radius: 8px; border:none; + outline: none; +} + + +.input[type=text]:focus { + outline:none; } .search-bar-language-input { @@ -113,10 +118,11 @@ input[type=text]{ .gfct-search-results { display: none; flex-direction: column; - overflow-y: auto; + overflow-y: scroll; overflow-x: hidden; background-color: rgba(30, 30, 30, 0.3); border-radius: 5px; + height: 53vh; } .search-results-row { @@ -153,7 +159,7 @@ input[type=text]{ .news-publisher-container { flex-direction: row; - color: #3e4188; + color: #18183B; width: 100%; height: 10%; display: flex; @@ -167,7 +173,7 @@ input[type=text]{ .news-title { margin: 0; - padding: 5px 0 0 0; + padding: 1% 0 0 0; font-size: small; } @@ -175,35 +181,35 @@ input[type=text]{ display: flex; flex-direction: row; font-size: xx-small; - color: #3e4188; + color: #18183B; } .news-claim-date-container{ display: flex; flex-direction: row; font-size: xx-small; - color: #3e4188; + color:#18183B; width: 50%; height: 70%; } .claim-date{ margin:0; - padding:5px 10px 0 0; + padding: 0.5% 0 0 0; } .news-review-date-container{ display: flex; flex-direction: row; font-size: xx-small; - color: #3e4188; + color: #18183B; width: 50%; height: 70%; } .news-review-date { margin:0; - padding:5px 10px 0 0; + padding: 0.5% 0 0 0; } .news-elements-container { -- GitLab From cd92b7fda1946b855c759a6b01507f1a9f329043 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 17:28:20 +0200 Subject: [PATCH 15/28] updating doc --- graphVis-lib.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/graphVis-lib.md b/graphVis-lib.md index d2b25bd..e7e2872 100644 --- a/graphVis-lib.md +++ b/graphVis-lib.md @@ -10,31 +10,31 @@ Librarie maison crée avec le â¤ï¸ par Grégoire # 1. Installation -La librarie est composée de 3 élements : +La librarie est composée de 3 élements (voir exemple de code pour plus de compréhension): -- Un fichier CSS `graph-vis.css` à importer dans le head -- Du code HMTL à rajouter dans le `<body>` -- Un Fichier Javascript `graph-visualisation.js` à placer **avant l'appel de la librairie** +- Un fichier CSS `graph-vis.css` à importer dans le `<head>` +- Du code HMTL à rajouter dans le `<body>` avant l'import du fichier JS +- Un Fichier Javascript `graph-visualisation.js` à placer **avant son appel en javascript** Le container va prendre automatiquement l'espace disponible autour de lui. disponible -## Exemple de code +## Structure des fichiers et du code en HTML ```html <!-- Container HTML à placer avant l'appel de la lib --> <!DOCTYPE html> <html lang="en"> <head> - <!-- CSS a mettre dans le head --> + <!-- 1. CSS a mettre dans le head --> <link rel="stylesheet" type="text/css" href="PATH-TO-CSS/graph-vis.css"/> </head> <body> - <!-- Container HTML à placer dans le body --> + <!-- 2. Container HTML à placer dans le body --> <div class="graph-container"> <div class="graph"></div> </div> - <!-- Appel de la librarie après le container HTML --> + <!-- 3. Appel de la librarie après le container HTML --> <script src="PATH-TO-LIB/graph-visualisation.js"></script> </body> -- GitLab From ab0d2b6749a88a7b1ce94d784371248c41096827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 17:33:20 +0200 Subject: [PATCH 16/28] updating emoji --- graphVis-lib.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graphVis-lib.md b/graphVis-lib.md index e7e2872..0bc49f9 100644 --- a/graphVis-lib.md +++ b/graphVis-lib.md @@ -1,4 +1,4 @@ -Librarie maison crée avec le â¤ï¸ par Grégoire +Librarie maison crée avec un ⤠de ðŸ‘ï¸ par Grégoire # Dev en cours : - [ ] Changement du css des points -- GitLab From e4e2574378a0eba69bbd5d81c16911c36b931954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 17:35:05 +0200 Subject: [PATCH 17/28] updating file name --- graphVis-lib.md => documentation-graphVis.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename graphVis-lib.md => documentation-graphVis.md (100%) diff --git a/graphVis-lib.md b/documentation-graphVis.md similarity index 100% rename from graphVis-lib.md rename to documentation-graphVis.md -- GitLab From c88b78e2e5cd4d23282678bd1579b7d5b0a15dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sat, 8 May 2021 17:36:29 +0200 Subject: [PATCH 18/28] updating file name --- documentation-graphVis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation-graphVis.md b/documentation-graphVis.md index 0bc49f9..2827a66 100644 --- a/documentation-graphVis.md +++ b/documentation-graphVis.md @@ -1,4 +1,4 @@ -Librarie maison crée avec un ⤠de ðŸ‘ï¸ par Grégoire +Librarie maison créée avec un ⤠de ðŸ‘ï¸ par Grégoire # Dev en cours : - [ ] Changement du css des points -- GitLab From 20257456265d82b1324c7c8bdd06320cb555ec18 Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Sun, 9 May 2021 11:43:45 +0200 Subject: [PATCH 19/28] =?UTF-8?q?=F0=9F=9A=A7=20format=20data=20for=20grap?= =?UTF-8?q?Vis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 +- {css => lib/graphVis/css}/_global.scss | 0 {css => lib/graphVis/css}/graph-vis.css | 0 {css => lib/graphVis/css}/graph-vis.css.map | 0 {css => lib/graphVis/css}/graph-vis.scss | 0 .../graphVis/graph-visualisation.js | 0 .../graphVis/images}/flag-france.svg | 0 .../graphVis/images}/flag-groeinland.svg | 0 src/js/cwsod_api/build_country_list.js | 1 + src/js/cwsod_api/build_indicators_list.js | 1 + src/js/cwsod_api/cwsodAPI.js | 8 ++ src/js/cwsod_api/indicators.json | 7 ++ src/js/cwsod_api/search.js | 99 ++++++++++++++----- src/js/fp_api/fpAPI.js | 6 ++ src/js/main.js | 2 + 15 files changed, 108 insertions(+), 24 deletions(-) rename {css => lib/graphVis/css}/_global.scss (100%) rename {css => lib/graphVis/css}/graph-vis.css (100%) rename {css => lib/graphVis/css}/graph-vis.css.map (100%) rename {css => lib/graphVis/css}/graph-vis.scss (100%) rename graph-visualisation.js => lib/graphVis/graph-visualisation.js (100%) rename {images => lib/graphVis/images}/flag-france.svg (100%) rename {images => lib/graphVis/images}/flag-groeinland.svg (100%) diff --git a/index.html b/index.html index e5050bf..80a0209 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ <link rel="stylesheet" href="src/css/index.css"> <link rel="stylesheet" href="src/css/search_window.css"> <link rel="stylesheet" href="src/css/jsr_lib_styles.css"> + <link rel="stylesheet" type="text/css" href="lib/graphVis/css/graph-vis.css"/> </head> <body> <div class="app-container"> @@ -44,7 +45,11 @@ <div class="covid-indicators-list"></div> </div> - <div class="data-visualization-container"></div> + <div class="data-visualization-container"> + <div class="graph-container"> + <div class="graph"></div> + </div> + </div> <div class="right-side-search-parameters"> <div class="countries-list"></div> @@ -56,6 +61,7 @@ </div> </div> + <script src="lib/graphVis/graph-visualisation.js"></script> <script src="https://unpkg.com/mm-jsr/build/index.js"></script> <script type="text/javascript" src="src/js/cwsod_api/build_indicators_list.js"></script> <script type="text/javascript" src="src/js/cwsod_api/build_country_list.js"></script> diff --git a/css/_global.scss b/lib/graphVis/css/_global.scss similarity index 100% rename from css/_global.scss rename to lib/graphVis/css/_global.scss diff --git a/css/graph-vis.css b/lib/graphVis/css/graph-vis.css similarity index 100% rename from css/graph-vis.css rename to lib/graphVis/css/graph-vis.css diff --git a/css/graph-vis.css.map b/lib/graphVis/css/graph-vis.css.map similarity index 100% rename from css/graph-vis.css.map rename to lib/graphVis/css/graph-vis.css.map diff --git a/css/graph-vis.scss b/lib/graphVis/css/graph-vis.scss similarity index 100% rename from css/graph-vis.scss rename to lib/graphVis/css/graph-vis.scss diff --git a/graph-visualisation.js b/lib/graphVis/graph-visualisation.js similarity index 100% rename from graph-visualisation.js rename to lib/graphVis/graph-visualisation.js diff --git a/images/flag-france.svg b/lib/graphVis/images/flag-france.svg similarity index 100% rename from images/flag-france.svg rename to lib/graphVis/images/flag-france.svg diff --git a/images/flag-groeinland.svg b/lib/graphVis/images/flag-groeinland.svg similarity index 100% rename from images/flag-groeinland.svg rename to lib/graphVis/images/flag-groeinland.svg diff --git a/src/js/cwsod_api/build_country_list.js b/src/js/cwsod_api/build_country_list.js index 8138679..ae87b75 100644 --- a/src/js/cwsod_api/build_country_list.js +++ b/src/js/cwsod_api/build_country_list.js @@ -20,6 +20,7 @@ const buildCountryList = (countries, country_codes) => { checkbox.type = 'checkbox'; checkbox.value = el.country; checkbox.name = el.country; + checkbox.setAttribute('onclick', 'handleOnClickVisualize()'); // country flag // const flag = document.createElement('img'); // flag.setAttribute('src', fpAPI.getFlagUrl(country_codes[el.country])); diff --git a/src/js/cwsod_api/build_indicators_list.js b/src/js/cwsod_api/build_indicators_list.js index 37cc104..70a5622 100644 --- a/src/js/cwsod_api/build_indicators_list.js +++ b/src/js/cwsod_api/build_indicators_list.js @@ -22,6 +22,7 @@ const buildIndicatorsList = (indicators) => { checkbox.type = 'checkbox'; checkbox.value = indic.indicator; checkbox.name = indic.indicator; + checkbox.setAttribute('onclick', 'handleOnClickVisualize()'); list_element.appendChild(label_checkbox); list_element.appendChild(checkbox); diff --git a/src/js/cwsod_api/cwsodAPI.js b/src/js/cwsod_api/cwsodAPI.js index 4c97a78..a4ec10b 100644 --- a/src/js/cwsod_api/cwsodAPI.js +++ b/src/js/cwsod_api/cwsodAPI.js @@ -17,6 +17,14 @@ class cwsodAPI { .catch((error) => console.log(error)); }; + static getIndicDataByIndicId = (id) => { + for(let category of this.indicators) + for(let indicator of category.indicators) + if(indicator.indicator === id) + return { data: { indicator: indicator }, error: null }; + return { data: null, error: {id: 1, message: "No indicator found for id: " + id } }; + }; + // static getCategories = async () => { // /* ----- WARNING ----- */ // // This is an old version of getting the indicators (before 2021-05-06) diff --git a/src/js/cwsod_api/indicators.json b/src/js/cwsod_api/indicators.json index da99f3a..ac97030 100644 --- a/src/js/cwsod_api/indicators.json +++ b/src/js/cwsod_api/indicators.json @@ -4,16 +4,19 @@ "indicators": [ { + "special_name": "cli", "indicator": "covid", "name": "covid", "description": "Respondents that have reported COVID-like illness (CLI). COVID-like illness: fever, along with cough, shortness of breath, or difficulty breathing." }, { + "special_name": "ili", "indicator": "flu", "name": "flu", "description": "Respondents that have reported Influenza-like illness (ILI). Influenza-like illness: fever, along with cough or sore throat." }, { + "special_name": "anos", "indicator": "anosmia", "name": "anosmia", "description": "Respondents reporting anosmia (loss of smell or taste)." @@ -94,11 +97,13 @@ "indicators": [ { + "special_name": "mc", "indicator": "mask", "name": "mask", "description": "Respondents who wore a mask all the time or most of the time when in public." }, { + "special_name": "dc", "indicator": "contact", "name": "contact", "description": "Respondents that have reported having had direct contact (longer than 1 minute) with people not staying with them." @@ -160,6 +165,7 @@ "indicators": [ { + "special_name": "hf", "indicator": "finance", "name": "worried about finance", "description": "Respondents who are very worried or somewhat worried about themselves and their household’s finances." @@ -171,6 +177,7 @@ "indicators": [ { + "special_name": "vu", "indicator": "vaccine_acpt", "name": "vaccine acceptance", "description": "Respondents definitely or probably choosing to get vaccinated if a COVID-19 vaccine was offered to them." diff --git a/src/js/cwsod_api/search.js b/src/js/cwsod_api/search.js index 5ed5f5c..6bb8bf9 100644 --- a/src/js/cwsod_api/search.js +++ b/src/js/cwsod_api/search.js @@ -1,42 +1,95 @@ -const handleOnClickVisualize = async (event, button) => { +const handleOnClickVisualize = (event, button) => { const sel_indics = getSelectedIndicators(document.querySelector('.covid-indicators-list')); const sel_countries = getSelectedCountries(document.querySelector('.available-countries-list')); const sel_daterange = getSelectedDateRange(document.querySelector('.daterange-slider')); const daterange = sel_daterange[0] + '-' + sel_daterange[1]; + getData(sel_indics, sel_countries, daterange) + .then((response) => console.log(response)) + .catch((error) => console.log(error)); +} + +const getData = async (sel_indics, sel_countries, daterange) => { if(sel_indics.length === 0 && sel_countries.length === 0) console.log('You must select at least one country and one indicator'); - else if(sel_indics.length === 1 && sel_countries.length > 0) - console.log(await getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily')); - else if(sel_indics.length > 0 && sel_countries.length === 1) - console.log(await getDataOneCountryMultipleIndicators(sel_indics, sel_countries[0], daterange, 'daily')); + else if(sel_indics.length === 1 && sel_countries.length > 0) { + const data = getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily'); + return formatDataToGraphVis(data); + } + else if(sel_indics.length > 0 && sel_countries.length === 1) { + return getDataOneCountryMultipleIndicators(sel_indics, sel_countries[0], daterange, 'daily') + .then((response) => formatDataToGraphVis([response])) + .catch((error) => console.log(error)); + } else console.log('Too much data selected. Please select one country and several indicators or the opposite'); + return null; } -const getDataMultpileCountriesOneIndicator = async (indicator, countries, daterange, type) => { - let result = []; - await countries.forEach(async (country) => { - const data = await cwsodAPI.getDataOnIndicator({ indicator, country, daterange, type }); - if(data.data.length === 0) - result.push({ country: country, data: null, error: { message: 'No data available' } }); - else - result.push({ country: country, data: data.data, error: null }); - }); +const formatDataToGraphVis = (data) => data.map((country) => { + console.log(country); + return { + flagURL: (fpAPI.getFlagUrlByCountryName(country.country)).data.url, + country: country.country, + indicators: formatIndicatorsToGraphVis(country.data) + } +}); + +const formatIndicatorsToGraphVis = (data) => data.map((indicator) => { + const indic_data = ((cwsodAPI.getIndicDataByIndicId(indicator.indicator)).error === null) + ? (cwsodAPI.getIndicDataByIndicId(indicator.indicator)).data.indicator + : { name: undefined, special_name: undefined }; + const result = { + name: indic_data.name, + data: indicator.data.map((info) => { + return { + date: surveyDateToTimestamp(info.survey_date), + percent: info[(indic_data.special_name !== undefined) + ? 'percent_' + indic_data.special_name + : 'pct_' + indic_data.indicator] + } + }) + }; return result; -} +}); + +const surveyDateToTimestamp = (survey_date) => + (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); + -const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type) => { - let result = { country: country, data: [] }; - await indicators.forEach( async (indicator) => { - const data = await cwsodAPI.getDataOnIndicator({ indicator, country, daterange, type }); - if(data.data.length === 0) - result.data.push({ indicator: indicator, data: null, error: { message: 'No data available' } }); - else - result.data.push({ indicator: indicator, data: data.data, error: null }); +const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type) => { + let result = []; + countries.forEach((country) => { + cwsodAPI.getDataOnIndicator({ indicator, country, daterange, type }) + .then((response) => { + console.log('HEY'); + if(response.data.length === 0) + result.push({ country: country, data: null, error: { message: 'No data available' } }); + else + result.push({ country: country, data: response.data, error: null }); + }) + .catch((error) => console.log(error)); }); + console.log('DEJA ?!'); return result; } +const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type, result = { country: country, data: [] }, iterator = { current_id: 0, max_id: indicators.length - 1 }) => + cwsodAPI.getDataOnIndicator({ indicator: indicators[iterator.current_id], country, daterange, type }) + .then((response) => { + result.data.push( + (response.data.length > 0) + ? { indicator: indicators[iterator.current_id], data: response.data, error: null } + : { indicator: indicators[iterator.current_id], data: null, error: { message: 'No data available' } } + ) + console.log(iterator); + if(iterator.current_id === iterator.max_id) + return result + else { + iterator.current_id++; + return getDataOneCountryMultipleIndicators(indicators, country, daterange, type, result, iterator); + } + }) + const getSelectedIndicators = (list_container) => Object.entries(list_container.children) .filter((el) => el[1].nodeName === 'UL') diff --git a/src/js/fp_api/fpAPI.js b/src/js/fp_api/fpAPI.js index 2ffbefa..86823ce 100644 --- a/src/js/fp_api/fpAPI.js +++ b/src/js/fp_api/fpAPI.js @@ -1,5 +1,6 @@ class fpAPI { + static country_codes; // Because there are several countries that are named differently // flag_api_name: cwsod_api_name static name_differencies = { @@ -26,4 +27,9 @@ class fpAPI { static getFlagUrl = (country_code) => 'https://flagcdn.com/256x192/' + country_code + '.png'; + static getFlagUrlByCountryName = (name) => + (fpAPI.country_codes[name] !== undefined && fpAPI.country_codes[name] !== null) + ? { data: { url: this.getFlagUrl(fpAPI.country_codes[name]) }, error: null } + : { data: null, error: { code: 1, message: 'No flag available for: ' + name } }; + }; \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index bb05c85..bbb6d0b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -3,6 +3,7 @@ const red_log = 'background-color: #a60000; font-weight: bold; color: white;'; const GFCT_API = 'gfct_api'; const CWSOD_API = 'cwsod_api'; let keys = null; +let results = null; const getLocalFile = (url) => { let xmlhttp = new XMLHttpRequest(); @@ -19,6 +20,7 @@ const onPageLoad = async () => { buildIndicatorsList(cwsodAPI.indicators); buildCountryList(await cwsodAPI.getAvailableCountries()); document.querySelector('.selected-article').appendChild(buildNews(null)); + fpAPI.country_codes = await fpAPI.getCountryCodes(); }; const cleanContainer = (container) => { -- GitLab From 6336299e6c604eb274b6b4f25272ea58f4b21106 Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Sun, 9 May 2021 15:10:48 +0200 Subject: [PATCH 20/28] =?UTF-8?q?=F0=9F=9A=A7=20format=20data=20for=20grap?= =?UTF-8?q?hVis:=20seems=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/cwsod_api/search.js | 56 +++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/js/cwsod_api/search.js b/src/js/cwsod_api/search.js index 6bb8bf9..69b8fdd 100644 --- a/src/js/cwsod_api/search.js +++ b/src/js/cwsod_api/search.js @@ -3,30 +3,30 @@ const handleOnClickVisualize = (event, button) => { const sel_countries = getSelectedCountries(document.querySelector('.available-countries-list')); const sel_daterange = getSelectedDateRange(document.querySelector('.daterange-slider')); const daterange = sel_daterange[0] + '-' + sel_daterange[1]; - getData(sel_indics, sel_countries, daterange) - .then((response) => console.log(response)) - .catch((error) => console.log(error)); + if(!(sel_indics.length === 1 && sel_countries.length > 0) & !(sel_indics.length > 0 && sel_countries.length === 1)) + console.log('Wrong selection'); + else + getData(sel_indics, sel_countries, daterange) + .then((response) => { graphVis.data = response; console.log(response) }) + .then(() => { graphVis.refreshData(); }) + .catch((error) => console.log(error)); } const getData = async (sel_indics, sel_countries, daterange) => { - if(sel_indics.length === 0 && sel_countries.length === 0) - console.log('You must select at least one country and one indicator'); - else if(sel_indics.length === 1 && sel_countries.length > 0) { - const data = getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily'); - return formatDataToGraphVis(data); + if(sel_indics.length === 1 && sel_countries.length > 0) { + return getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily') + .then((response) => formatDataToGraphVis(response)) + .catch((error) => console.log(error)); } else if(sel_indics.length > 0 && sel_countries.length === 1) { return getDataOneCountryMultipleIndicators(sel_indics, sel_countries[0], daterange, 'daily') .then((response) => formatDataToGraphVis([response])) .catch((error) => console.log(error)); } - else - console.log('Too much data selected. Please select one country and several indicators or the opposite'); return null; } const formatDataToGraphVis = (data) => data.map((country) => { - console.log(country); return { flagURL: (fpAPI.getFlagUrlByCountryName(country.country)).data.url, country: country.country, @@ -35,6 +35,7 @@ const formatDataToGraphVis = (data) => data.map((country) => { }); const formatIndicatorsToGraphVis = (data) => data.map((indicator) => { + console.log(indicator); const indic_data = ((cwsodAPI.getIndicDataByIndicId(indicator.indicator)).error === null) ? (cwsodAPI.getIndicDataByIndicId(indicator.indicator)).data.indicator : { name: undefined, special_name: undefined }; @@ -43,7 +44,7 @@ const formatIndicatorsToGraphVis = (data) => data.map((indicator) => { data: indicator.data.map((info) => { return { date: surveyDateToTimestamp(info.survey_date), - percent: info[(indic_data.special_name !== undefined) + percent: 100 * info[(indic_data.special_name !== undefined) ? 'percent_' + indic_data.special_name : 'pct_' + indic_data.indicator] } @@ -56,22 +57,22 @@ const surveyDateToTimestamp = (survey_date) => (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); -const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type) => { - let result = []; - countries.forEach((country) => { - cwsodAPI.getDataOnIndicator({ indicator, country, daterange, type }) - .then((response) => { - console.log('HEY'); - if(response.data.length === 0) - result.push({ country: country, data: null, error: { message: 'No data available' } }); - else - result.push({ country: country, data: response.data, error: null }); - }) - .catch((error) => console.log(error)); +const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type, result = [], iterator = { current_id: 0, max_id: countries.length - 1 }) => + cwsodAPI.getDataOnIndicator({ indicator, country: countries[iterator.current_id], daterange, type }) + .then((response) => { + console.log(response) + result.push( + (response.data.length > 0) + ? { country: countries[iterator.current_id], data: [{ indicator: indicator, data: response.data, error: null }] } + : { country: countries[iterator.current_id], data: [{indicator: indicator, data: null, error: { message: 'No data available' } }] } + ) + if(iterator.current_id === iterator.max_id) + return result + else { + iterator.current_id++; + return getDataMultpileCountriesOneIndicator(indicator, countries, daterange, type, result, iterator); + } }); - console.log('DEJA ?!'); - return result; -} const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type, result = { country: country, data: [] }, iterator = { current_id: 0, max_id: indicators.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator: indicators[iterator.current_id], country, daterange, type }) @@ -81,7 +82,6 @@ const getDataOneCountryMultipleIndicators = async (indicators, country, daterang ? { indicator: indicators[iterator.current_id], data: response.data, error: null } : { indicator: indicators[iterator.current_id], data: null, error: { message: 'No data available' } } ) - console.log(iterator); if(iterator.current_id === iterator.max_id) return result else { -- GitLab From e29d8ca7a3a94a31e76ab070b958547dbc0f329a Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Sun, 9 May 2021 16:30:34 +0200 Subject: [PATCH 21/28] =?UTF-8?q?=F0=9F=90=9B=20=20format=20data=20for=20g?= =?UTF-8?q?raphVis=20fixed=20errors=20no=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + src/js/cwsod_api/search.js | 99 +++++++++++++++----------------------- src/js/main.js | 1 - src/js/visualize.js | 45 +++++++++++++++++ 4 files changed, 84 insertions(+), 62 deletions(-) create mode 100644 src/js/visualize.js diff --git a/index.html b/index.html index 80a0209..153e183 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,7 @@ <script type="text/javascript" src="src/js/cwsod_api/cwsodAPI.js"></script> <script type="text/javascript" src="src/js/gfct_api/load_google_client.js"></script> <script type="text/javascript" src="src/js/fp_api/fpAPI.js"></script> + <script type="text/javascript" src="src/js/visualize.js"></script> <script type="text/javascript" src="src/js/main.js" onload="onPageLoad()"></script> <script type="text/javascript" onload="loadGoogleClient()" src="https://apis.google.com/js/api.js"></script> diff --git a/src/js/cwsod_api/search.js b/src/js/cwsod_api/search.js index 69b8fdd..0934164 100644 --- a/src/js/cwsod_api/search.js +++ b/src/js/cwsod_api/search.js @@ -1,17 +1,3 @@ -const handleOnClickVisualize = (event, button) => { - const sel_indics = getSelectedIndicators(document.querySelector('.covid-indicators-list')); - const sel_countries = getSelectedCountries(document.querySelector('.available-countries-list')); - const sel_daterange = getSelectedDateRange(document.querySelector('.daterange-slider')); - const daterange = sel_daterange[0] + '-' + sel_daterange[1]; - if(!(sel_indics.length === 1 && sel_countries.length > 0) & !(sel_indics.length > 0 && sel_countries.length === 1)) - console.log('Wrong selection'); - else - getData(sel_indics, sel_countries, daterange) - .then((response) => { graphVis.data = response; console.log(response) }) - .then(() => { graphVis.refreshData(); }) - .catch((error) => console.log(error)); -} - const getData = async (sel_indics, sel_countries, daterange) => { if(sel_indics.length === 1 && sel_countries.length > 0) { return getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily') @@ -25,44 +11,12 @@ const getData = async (sel_indics, sel_countries, daterange) => { } return null; } - -const formatDataToGraphVis = (data) => data.map((country) => { - return { - flagURL: (fpAPI.getFlagUrlByCountryName(country.country)).data.url, - country: country.country, - indicators: formatIndicatorsToGraphVis(country.data) - } -}); - -const formatIndicatorsToGraphVis = (data) => data.map((indicator) => { - console.log(indicator); - const indic_data = ((cwsodAPI.getIndicDataByIndicId(indicator.indicator)).error === null) - ? (cwsodAPI.getIndicDataByIndicId(indicator.indicator)).data.indicator - : { name: undefined, special_name: undefined }; - const result = { - name: indic_data.name, - data: indicator.data.map((info) => { - return { - date: surveyDateToTimestamp(info.survey_date), - percent: 100 * info[(indic_data.special_name !== undefined) - ? 'percent_' + indic_data.special_name - : 'pct_' + indic_data.indicator] - } - }) - }; - return result; -}); - -const surveyDateToTimestamp = (survey_date) => - (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); - const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type, result = [], iterator = { current_id: 0, max_id: countries.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator, country: countries[iterator.current_id], daterange, type }) .then((response) => { - console.log(response) result.push( - (response.data.length > 0) + (response.data !== undefined && response.data !== null && response.data.length > 0) ? { country: countries[iterator.current_id], data: [{ indicator: indicator, data: response.data, error: null }] } : { country: countries[iterator.current_id], data: [{indicator: indicator, data: null, error: { message: 'No data available' } }] } ) @@ -77,8 +31,8 @@ const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, t const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type, result = { country: country, data: [] }, iterator = { current_id: 0, max_id: indicators.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator: indicators[iterator.current_id], country, daterange, type }) .then((response) => { - result.data.push( - (response.data.length > 0) + result.data.push( + (response.data !== undefined && response.data !== null && response.data.length > 0) ? { indicator: indicators[iterator.current_id], data: response.data, error: null } : { indicator: indicators[iterator.current_id], data: null, error: { message: 'No data available' } } ) @@ -88,18 +42,41 @@ const getDataOneCountryMultipleIndicators = async (indicators, country, daterang iterator.current_id++; return getDataOneCountryMultipleIndicators(indicators, country, daterange, type, result, iterator); } + }); + + +const formatDataToGraphVis = (data) => (data !== undefined && data !== null) +? data.map((country) => { + const flag_url = fpAPI.getFlagUrlByCountryName(country.country); + return { + flagURL: (flag_url.error === null) ? flag_url.data.url : undefined, + country: (country.country !== undefined) ? country.country : undefined, + indicators: formatIndicatorsToGraphVis(country.data) + } +}) +: [ { error: { message: 'No data available' } } ] + +const formatIndicatorsToGraphVis = (data) => (data !== null && data !== undefined) + ? data.map((indicator) => { + const indic_data = ((cwsodAPI.getIndicDataByIndicId(indicator.indicator)).error === null) + ? (cwsodAPI.getIndicDataByIndicId(indicator.indicator)).data.indicator + : { name: undefined, special_name: undefined }; + return { + name: indic_data.name, + data: (indicator.error === null) + ? indicator.data.map((info) => { + return { + date: surveyDateToTimestamp(info.survey_date), + percent: 100 * info[(indic_data.special_name !== undefined) + ? 'percent_' + indic_data.special_name + : 'pct_' + indic_data.indicator] + } + }) + : [ { error: indicator.error } ] + }; }) + : [ { error: { message: 'No data available' } } ] -const getSelectedIndicators = (list_container) => - Object.entries(list_container.children) - .filter((el) => el[1].nodeName === 'UL') - .map((ul) => Object.entries(ul[1].children).map((li) => li[1].children[1])) - .reduce((tab, inputs) => tab.concat(inputs), []) - .filter((checkbox) => checkbox.checked) - .map((checkbox) => checkbox.value); +const surveyDateToTimestamp = (survey_date) => + (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); -const getSelectedCountries = (list_container) => - Object.entries(list_container.children) - .map((li) => li[1].children[1]) - .filter((checkbox) => checkbox.checked) - .map((checkbox) => checkbox.value); \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index bbb6d0b..d78e0dd 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -3,7 +3,6 @@ const red_log = 'background-color: #a60000; font-weight: bold; color: white;'; const GFCT_API = 'gfct_api'; const CWSOD_API = 'cwsod_api'; let keys = null; -let results = null; const getLocalFile = (url) => { let xmlhttp = new XMLHttpRequest(); diff --git a/src/js/visualize.js b/src/js/visualize.js new file mode 100644 index 0000000..7badf13 --- /dev/null +++ b/src/js/visualize.js @@ -0,0 +1,45 @@ +let generateDataVisTimer = null; + +const handleOnClickVisualize = (event, button) => { + const sel_indics = getSelectedIndicators(document.querySelector('.covid-indicators-list')); + const sel_countries = getSelectedCountries(document.querySelector('.available-countries-list')); + const sel_daterange = getSelectedDateRange(document.querySelector('.daterange-slider')); + const daterange = sel_daterange[0] + '-' + sel_daterange[1]; + generateDataVisualization(sel_indics, sel_countries, daterange); +} + +const generateDataVisualization = (sel_indics, sel_countries, daterange) => { + const timeout_duration_visualization = 5000; + const timeout_duration_clean = 1000; + console.log('TIMER STOP') + clearTimeout(generateDataVisTimer); + if((sel_indics.length === 1 && sel_countries.length > 0) || (sel_indics.length > 0 && sel_countries.length === 1)) { + console.log('TIMER GO') + generateDataVisTimer = setTimeout(() => + getData(sel_indics, sel_countries, daterange) + .then((response) => { graphVis.data = response; console.log(response) }) + .then(() => { graphVis.refreshData(); }) + .catch((error) => console.log(error)), timeout_duration_visualization + ); + } + else { + generateDataVisTimer = setTimeout(() => { + graphVis.data = []; + graphVis.refreshData(); + }, timeout_duration_clean); + } +} + +const getSelectedIndicators = (list_container) => + Object.entries(list_container.children) + .filter((el) => el[1].nodeName === 'UL') + .map((ul) => Object.entries(ul[1].children).map((li) => li[1].children[1])) + .reduce((tab, inputs) => tab.concat(inputs), []) + .filter((checkbox) => checkbox.checked) + .map((checkbox) => checkbox.value); + +const getSelectedCountries = (list_container) => + Object.entries(list_container.children) + .map((li) => li[1].children[1]) + .filter((checkbox) => checkbox.checked) + .map((checkbox) => checkbox.value); \ No newline at end of file -- GitLab From 4e6074f4048aa4e4ac09ca20f8ef696a605f9759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Petitalot?= <perso@gregoirep.com> Date: Sun, 9 May 2021 17:03:30 +0200 Subject: [PATCH 22/28] updating list task and doc --- documentation-graphVis.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/documentation-graphVis.md b/documentation-graphVis.md index 2827a66..88786f0 100644 --- a/documentation-graphVis.md +++ b/documentation-graphVis.md @@ -4,9 +4,15 @@ Librarie maison créée avec un ⤠de ðŸ‘ï¸ par Grégoire - [ ] Changement du css des points - [ ] Affichage des marqueurs complets - [ ] Fix marqueurs size -- [ ] Fix css colors points with Judi -- [ ] Fix css colors markeurs with Judi -- [ ] Marker = Picto ? +- [x] Fix css colors points with Judi +- [x] Fix css colors markeurs with Judi +- [x] Marker = Picto ? +- [ ] change markeur box shadow to dark one +- [ ] SI indicateurs vide pas de pts +- [ ] Trouver astuce valeur de points hover +- [ ] si undefined pas afficher le pt +- [ ] minimum si le pt est à zero +- [ ] # 1. Installation @@ -60,7 +66,7 @@ Les données doivent être définis grâce à la propriété `graphVis.data` et { //date au format timestamp date: 1519211809934, - // pourcentage entre 0 et 100 + // pourcentage entre 0 et 100 ou undefined si pas de données percent: 50 } ] -- GitLab From 6b6aa95b545b65d98331ee417609250e43cd4710 Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Sun, 9 May 2021 21:00:28 +0200 Subject: [PATCH 23/28] detail recherche --- css/_global.scss | 18 ------------------ css/graph-vis.css | 16 ---------------- index.html | 9 +++++++-- src/css/index.css | 1 - src/css/search_window.css | 26 ++++++++++++++++---------- 5 files changed, 23 insertions(+), 47 deletions(-) delete mode 100644 css/_global.scss diff --git a/css/_global.scss b/css/_global.scss deleted file mode 100644 index 3946287..0000000 --- a/css/_global.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); - -* { - box-sizing: border-box; -} - -body { - position: relative; - z-index: 0; - text-align: center; - font-size: 18px; - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - background-color: #2b2d54; - font-family: 'Open Sans', sans-serif; -} diff --git a/css/graph-vis.css b/css/graph-vis.css index 0153290..676e5dd 100644 --- a/css/graph-vis.css +++ b/css/graph-vis.css @@ -1,20 +1,4 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); -* { - box-sizing: border-box; -} - -body { - position: relative; - z-index: 0; - text-align: center; - font-size: 18px; - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - background-color: #2b2d54; - font-family: "Open Sans", sans-serif; -} .graph { display: flex; diff --git a/index.html b/index.html index e5050bf..47dd0af 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ <link rel="stylesheet" href="src/css/index.css"> <link rel="stylesheet" href="src/css/search_window.css"> <link rel="stylesheet" href="src/css/jsr_lib_styles.css"> + <link rel="stylesheet" href="css/graph-vis.css"> </head> <body> <div class="app-container"> @@ -44,7 +45,11 @@ <div class="covid-indicators-list"></div> </div> - <div class="data-visualization-container"></div> + <div class="data-visualization-container"> + <div class="graph-container"> + <div class="graph"></div> + </div> + </div> <div class="right-side-search-parameters"> <div class="countries-list"></div> @@ -67,8 +72,8 @@ <script type="text/javascript" src="src/js/cwsod_api/cwsodAPI.js"></script> <script type="text/javascript" src="src/js/gfct_api/load_google_client.js"></script> <script type="text/javascript" src="src/js/fp_api/fpAPI.js"></script> + <script type="text/javascript" src="graph-visualisation.js"></script> <script type="text/javascript" src="src/js/main.js" onload="onPageLoad()"></script> - <script type="text/javascript" onload="loadGoogleClient()" src="https://apis.google.com/js/api.js"></script> </body> diff --git a/src/css/index.css b/src/css/index.css index aeab5d3..3a130bf 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -9,7 +9,6 @@ body { overflow: hidden; background-color: #2D2B54; - font-family: 'Roboto'; color : #f5f5f5; width: 100vw; height: 100vh; diff --git a/src/css/search_window.css b/src/css/search_window.css index 98edad0..e4b9bb1 100644 --- a/src/css/search_window.css +++ b/src/css/search_window.css @@ -2,6 +2,7 @@ .body { overflow: hidden; + font-family: "Open Sans", sans-serif; } a:link { @@ -19,8 +20,6 @@ a:hover { } .search-window { - overflow-x: hidden; - overflow-y: hidden; position: fixed; top: 0%; left: 0%; @@ -33,6 +32,7 @@ a:hover { background-color: black; opacity: 1; + font-family: "Open Sans", sans-serif; } /* CLOSE BUTTON */ @@ -147,11 +147,12 @@ input[type=text]{ } .news-container { + display:flex; flex-direction: column; margin: 10px; background-color: #6266b2; width: 17.5vw; - height: 12vh; + height: 15vh; border-radius: 4px; box-shadow: 10px 5px black; padding: 15px 20px 15px 20px; @@ -163,7 +164,7 @@ input[type=text]{ width: 100%; height: 10%; display: flex; - font-size: xx-small; + font-size: xx-small !important; } .news-publisher-label { @@ -174,20 +175,23 @@ input[type=text]{ .news-title { margin: 0; padding: 1% 0 0 0; - font-size: small; + font-size: small !important; + overflow: hidden; + height: 5vh; } .news-dates-container { display: flex; flex-direction: row; - font-size: xx-small; + font-size: xx-small !important; color: #18183B; + height: 15%; } .news-claim-date-container{ display: flex; flex-direction: row; - font-size: xx-small; + font-size: xx-small !important; color:#18183B; width: 50%; height: 70%; @@ -201,7 +205,7 @@ input[type=text]{ .news-review-date-container{ display: flex; flex-direction: row; - font-size: xx-small; + font-size: xx-small !important; color: #18183B; width: 50%; height: 70%; @@ -226,13 +230,15 @@ input[type=text]{ .news-review-rating { margin: 0; padding: 0 0 0 0; - font-size: small; + font-size: small !important; + overflow: hidden; + height: 4vh; } .news-review-view-article { margin:0; padding:5px 0 0 0; - font-size: xx-small; + font-size: xx-small !important; } .article-button-select{ -- GitLab From 7ec2aeae0334a1c7d2e80cb97761084b03b73808 Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Mon, 10 May 2021 08:31:20 +0200 Subject: [PATCH 24/28] =?UTF-8?q?=F0=9F=9A=A7=20date=20stuffing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/cwsod_api/search.js | 46 ++++++++++++++++++++++++-------------- src/js/visualize.js | 8 +++---- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/js/cwsod_api/search.js b/src/js/cwsod_api/search.js index 0934164..8fc5ead 100644 --- a/src/js/cwsod_api/search.js +++ b/src/js/cwsod_api/search.js @@ -1,4 +1,4 @@ -const getData = async (sel_indics, sel_countries, daterange) => { +const getVisualizationData = async (sel_indics, sel_countries, daterange) => { if(sel_indics.length === 1 && sel_countries.length > 0) { return getDataMultpileCountriesOneIndicator(sel_indics[0], sel_countries, daterange, 'daily') .then((response) => formatDataToGraphVis(response)) @@ -12,13 +12,14 @@ const getData = async (sel_indics, sel_countries, daterange) => { return null; } -const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type, result = [], iterator = { current_id: 0, max_id: countries.length - 1 }) => +const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, type, + result = [], iterator = { current_id: 0, max_id: countries.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator, country: countries[iterator.current_id], daterange, type }) .then((response) => { result.push( (response.data !== undefined && response.data !== null && response.data.length > 0) - ? { country: countries[iterator.current_id], data: [{ indicator: indicator, data: response.data, error: null }] } - : { country: countries[iterator.current_id], data: [{indicator: indicator, data: null, error: { message: 'No data available' } }] } + ? { country: countries[iterator.current_id], data: [{ indicator: indicator, data: dateStuffing(response.data, indicator), error: null }] } + : { country: countries[iterator.current_id], data: [{ indicator: indicator, data: null, error: { message: 'No data available' } }] } ) if(iterator.current_id === iterator.max_id) return result @@ -28,12 +29,13 @@ const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, t } }); -const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type, result = { country: country, data: [] }, iterator = { current_id: 0, max_id: indicators.length - 1 }) => +const getDataOneCountryMultipleIndicators = async (indicators, country, daterange, type, + result = { country: country, data: [] }, iterator = { current_id: 0, max_id: indicators.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator: indicators[iterator.current_id], country, daterange, type }) .then((response) => { result.data.push( (response.data !== undefined && response.data !== null && response.data.length > 0) - ? { indicator: indicators[iterator.current_id], data: response.data, error: null } + ? { indicator: indicators[iterator.current_id], data: dateStuffing(response.data, indicators[iterator.current_id]), error: null } : { indicator: indicators[iterator.current_id], data: null, error: { message: 'No data available' } } ) if(iterator.current_id === iterator.max_id) @@ -46,15 +48,15 @@ const getDataOneCountryMultipleIndicators = async (indicators, country, daterang const formatDataToGraphVis = (data) => (data !== undefined && data !== null) -? data.map((country) => { - const flag_url = fpAPI.getFlagUrlByCountryName(country.country); - return { - flagURL: (flag_url.error === null) ? flag_url.data.url : undefined, - country: (country.country !== undefined) ? country.country : undefined, - indicators: formatIndicatorsToGraphVis(country.data) - } -}) -: [ { error: { message: 'No data available' } } ] + ? data.map((country) => { + const flag_url = fpAPI.getFlagUrlByCountryName(country.country); + return { + flagURL: (flag_url.error === null) ? flag_url.data.url : undefined, + country: (country.country !== undefined) ? country.country : undefined, + indicators: formatIndicatorsToGraphVis(country.data) + } + }) + : [ { error: { message: 'No data available' } } ] const formatIndicatorsToGraphVis = (data) => (data !== null && data !== undefined) ? data.map((indicator) => { @@ -72,11 +74,21 @@ const formatIndicatorsToGraphVis = (data) => (data !== null && data !== undefine : 'pct_' + indic_data.indicator] } }) - : [ { error: indicator.error } ] + : [] }; }) : [ { error: { message: 'No data available' } } ] -const surveyDateToTimestamp = (survey_date) => +const surveyDateToTimestamp = (survey_date) => (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); +const dateStuffing = (data, indicator) => { + console.log(data, indicator); + const dates = getSelectedDateRange().map((date) => surveyDateToTimestamp(date)); + console.log(dates, new Date(2021, 04, 12)); + for(let d = dates[0]; d < dates[1]; d += 1000 * 60 * 60 * 24) { + console.log((new Date(d))); + } + return data; +} + diff --git a/src/js/visualize.js b/src/js/visualize.js index 7badf13..a8b1dc0 100644 --- a/src/js/visualize.js +++ b/src/js/visualize.js @@ -16,10 +16,10 @@ const generateDataVisualization = (sel_indics, sel_countries, daterange) => { if((sel_indics.length === 1 && sel_countries.length > 0) || (sel_indics.length > 0 && sel_countries.length === 1)) { console.log('TIMER GO') generateDataVisTimer = setTimeout(() => - getData(sel_indics, sel_countries, daterange) - .then((response) => { graphVis.data = response; console.log(response) }) - .then(() => { graphVis.refreshData(); }) - .catch((error) => console.log(error)), timeout_duration_visualization + getVisualizationData(sel_indics, sel_countries, daterange) + .then((response) => { graphVis.data = response; console.log(response) }) + .then(() => { graphVis.refreshData(); }) + .catch((error) => console.log(error)), timeout_duration_visualization ); } else { -- GitLab From 68fa5d9447dbb49b23dfa01e1e86b1106752bd94 Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Mon, 10 May 2021 15:38:29 +0200 Subject: [PATCH 25/28] style page principale --- css/graph-vis.css | 3 +- index.html | 2 + src/css/index.css | 141 +++++++++++++++------- src/css/jsr_lib_styles.css | 16 +-- src/css/search_window.css | 24 +++- src/js/cwsod_api/build_country_list.js | 2 +- src/js/cwsod_api/build_indicators_list.js | 4 +- 7 files changed, 132 insertions(+), 60 deletions(-) diff --git a/css/graph-vis.css b/css/graph-vis.css index 676e5dd..1422bdc 100644 --- a/css/graph-vis.css +++ b/css/graph-vis.css @@ -9,6 +9,7 @@ height: 100%; background-color: unset; } + .graph-container { position: relative; display: flex; @@ -16,8 +17,8 @@ justify-content: center; width: 100%; height: 100%; - padding: 50px; } + .graph-ring { z-index: 0; position: absolute; diff --git a/index.html b/index.html index 47dd0af..753d074 100644 --- a/index.html +++ b/index.html @@ -52,11 +52,13 @@ </div> <div class="right-side-search-parameters"> + <div class="legend"></div> <div class="countries-list"></div> </div> </div> <div class="bottom-parameters"> + <button class="play-slowly">Play slowly</button> <div class="daterange-slider"></div> </div> </div> diff --git a/src/css/index.css b/src/css/index.css index 3a130bf..4cb2c3f 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,18 +1,15 @@ @import url(https://fonts.googleapis.com/css?family=Roboto); -@font-face { - -} - /* MAIN APP CONTAINERS */ body { overflow: hidden; - background-color: #2D2B54; + background-color: #20214f; color : #f5f5f5; width: 100vw; height: 100vh; margin : auto auto auto auto; + font-family: "Open Sans", sans-serif; } .app-container { @@ -30,19 +27,35 @@ body { .left-side-search-parameters{ display: flex; flex-direction: column; - width: 20vw; + height: 80vh; + overflow: hidden; } .left-side-search-parameters > div { background-color:#18183B; - border-radius: 10px; + border-radius: 5px; padding: 20px; - margin : 1em 1em 1em 1em; + margin: 0.75em 0.75em 0.75em 0.75em; + box-shadow: 2px 2px 7.5px black; +} + +/* SELECTED ARTICLE */ +.selected-article{ + height: 20vh; } -.language-selector { - margin : 1em 1em 1em 1em; +.selected-article > .news-container { + background-color: #18183B; + box-shadow: none ! important; + box-shadow: none !important; + display: flex; + flex-direction: column; + margin: 0; + width: auto; + height: auto; + border-radius: 4px; + padding: 0 0 0 0; } .search-bar-button { @@ -66,71 +79,113 @@ body { border-radius: 5px; } -/* DATA VISUALIZATION CONTAINERS */ +/* COVID INDICATOR */ +.covid-indicators-list{ + height: 50vh; + overflow-y: scroll; + background-color: #191725 !important; + padding: 20px 0 0 0 !important; +} -.data-visualization-container { - width: 55vw; +.covid-sublist-container { + padding: 0 0 0 0; + background-color: #18183B; } -/* RIGHT SIDE SEARCH PARAMETERS */ +.covid-sublist-container > li { + width: 100%; + height: 5vh; + border-bottom: 2px solid #30304f; + box-sizing: border-box; + display: block; +} -.right-side-search-parameters { - width: 15vw; +.covid-sublist-container > li > input { + opacity: 1; } .covid-indicators-list > ul { list-style-type: none; + height: 60vh; } -.covid-sublist-container { - padding-left: 10px; +.input[type=checkbox]:before { + opacity: 0; } -.available-countries-list { - list-style-type: none; - padding-left: 10px; +.input[type=checkbox]:hover ~ div { + background-color: #30304f; } -/* BOTTOM SEARCH PARAMETERS */ +.input[type=checkbox]:checked ~ div { + background-color: #30304f; +} -.bottom-parameters { + +/* DATA VISUALIZATION CONTAINERS */ + +.data-visualization-container { + width: 60vw; + height: 80vh; +} + +/* RIGHT SIDE SEARCH PARAMETERS */ + +.right-side-search-parameters { display: flex; flex-direction: column; - - margin: 3em 3em 3em 3em; + width: 20vw; + height: 80vh; + overflow: hidden; } -.daterange-slider { - color :#f5f5f5 !important; +.right-side-search-parameters>div{ + background-color: #18183B; + border-radius: 5px; + padding: 20px; + margin: 0.75em 0.75em 0.75em 0.75em; + box-shadow: 2px 2px 5px black; } -.jsr_slider::before { - background-color : #6266b2 !important; +/* LEGEND */ +.legend { + height: 5vh; } -.jsr_rail { - background-color: #18183B !important; +/* COUNTRIES LIST */ +.countries-list { + height: 65vh; + overflow-y: scroll; } -.jsr_bar { - background-color: #f5f5f5 !important; +.available-countries-list { + list-style-type: none; + padding-left: 10px; } -.jsr_label { - background-color : #6266b2 !important; - color : #f5f5f5; +/* BOTTOM SEARCH PARAMETERS */ + +.bottom-parameters { + display: flex; + flex-direction: row; + + margin: 3em auto 3em auto; + width: 75vw; } canvas { margin : 1em auto auto auto !important; } -.visualize-btn { - background-color:#6266b2; +.play-slowly { + position: fixed; + bottom: 5vh; + left: 4vw; + background-color: #6266b2; border-style: none; - color : #f5f5f5; - margin : 1em auto auto auto; - width : 8em; - height: 3em; - border-radius: 5px; + color: #f5f5f5; + margin: 1em auto auto auto; + width: 8em; + height: 2em; + border-radius: 3px; } diff --git a/src/css/jsr_lib_styles.css b/src/css/jsr_lib_styles.css index 4afe589..4b6068b 100644 --- a/src/css/jsr_lib_styles.css +++ b/src/css/jsr_lib_styles.css @@ -28,7 +28,7 @@ .jsr_rail { height: 5px; - background: #444; + background-color: #18183B !important; } .jsr_slider { @@ -38,8 +38,9 @@ transform: translate(-50%, -50%); - width: 25px; - height: 25px; + width: 15px; + height: 15px; + border-radius: 50px; cursor: col-resize; transition: background 0.1s ease-in-out; @@ -47,6 +48,7 @@ outline: 0; z-index: 3; + background-color: #6266b2; } .jsr_slider:focus { @@ -61,8 +63,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - background: #999; border-radius: 50%; + background-color : #6266b2 !important; } .jsr_slider:focus::before { @@ -74,7 +76,6 @@ top: calc(10px + 5px + 15px / 1.5); transform: translateX(-50%); padding: 0.2em 0.4em; - background: #444; color: #fff; font-size: 0.9em; white-space: nowrap; @@ -82,6 +83,7 @@ z-index: 2; cursor: col-resize; opacity: 1; + background-color : #6266b2 !important; } .jsr_label.is-hidden { @@ -92,10 +94,10 @@ .jsr_bar { position: absolute; height: 5px; - background-color: #999; z-index: 2; cursor: move; top: 10px; + background-color: #f5f5f5 !important; } .jsr_limit { @@ -109,7 +111,7 @@ .jsr_grid { margin-top: 5px; - width: 100%; + width: 75vw; } .jsr_lockscreen { diff --git a/src/css/search_window.css b/src/css/search_window.css index e4b9bb1..b2d05a9 100644 --- a/src/css/search_window.css +++ b/src/css/search_window.css @@ -1,10 +1,6 @@ /* WINDOW */ -.body { - overflow: hidden; - font-family: "Open Sans", sans-serif; -} - +/*link*/ a:link { color: #18183B; } @@ -95,6 +91,8 @@ input[type=text]{ width: 80px; } +/* LANGUAGE SELECTOR */ + .language-selector { background-color: white; appearance:none; @@ -131,6 +129,8 @@ input[type=text]{ justify-content: center; } +/* MORE RESULTS BTN */ + .more-results-btn { display: none; margin: 5vh auto; @@ -146,6 +146,8 @@ input[type=text]{ color: white; } +/* CONTAINER RESULT */ + .news-container { display:flex; flex-direction: column; @@ -158,6 +160,8 @@ input[type=text]{ padding: 15px 20px 15px 20px; } +/* PUBLISHER CONTAINER */ + .news-publisher-container { flex-direction: row; color: #18183B; @@ -172,14 +176,18 @@ input[type=text]{ padding: 0; } +/* TITLE */ + .news-title { margin: 0; padding: 1% 0 0 0; font-size: small !important; overflow: hidden; - height: 5vh; + height: 4.5vh; } +/* DATES CONTAINER */ + .news-dates-container { display: flex; flex-direction: row; @@ -216,6 +224,8 @@ input[type=text]{ padding: 0.5% 0 0 0; } +/* BOTTOM ELEMENT */ + .news-elements-container { display: flex; flex-direction: row; @@ -241,6 +251,8 @@ input[type=text]{ font-size: xx-small !important; } +/* SELECT BTN */ + .article-button-select{ margin: 0; padding: 0 10px 0 0; diff --git a/src/js/cwsod_api/build_country_list.js b/src/js/cwsod_api/build_country_list.js index 8138679..eb2817d 100644 --- a/src/js/cwsod_api/build_country_list.js +++ b/src/js/cwsod_api/build_country_list.js @@ -26,8 +26,8 @@ const buildCountryList = (countries, country_codes) => { // flag.setAttribute('alt', el.country); // flag.setAttribute('width', '40px'); - list_item.appendChild(label); list_item.appendChild(checkbox); + list_item.appendChild(label); // list_item.appendChild(flag); ordered_list.appendChild(list_item); }); diff --git a/src/js/cwsod_api/build_indicators_list.js b/src/js/cwsod_api/build_indicators_list.js index 37cc104..29c8125 100644 --- a/src/js/cwsod_api/build_indicators_list.js +++ b/src/js/cwsod_api/build_indicators_list.js @@ -20,11 +20,11 @@ const buildIndicatorsList = (indicators) => { // checkbox const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; - checkbox.value = indic.indicator; + checkbox.id = indic.indicator; checkbox.name = indic.indicator; - list_element.appendChild(label_checkbox); list_element.appendChild(checkbox); + list_element.appendChild(label_checkbox); return list_element; }); indicators.forEach((indic) => {sublist_container.appendChild(indic);}); -- GitLab From 9865d52c277db85e8bc04bdf6acbe5614b3fcef0 Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Tue, 11 May 2021 08:52:58 +0200 Subject: [PATCH 26/28] =?UTF-8?q?=F0=9F=9A=A7=20format=20data=20for=20grap?= =?UTF-8?q?hVis:=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/cwsod_api/date_range_slider.js | 4 +-- src/js/cwsod_api/search.js | 44 +++++++++++++++++++++------ 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/js/cwsod_api/date_range_slider.js b/src/js/cwsod_api/date_range_slider.js index 9381ec6..d0e3a63 100644 --- a/src/js/cwsod_api/date_range_slider.js +++ b/src/js/cwsod_api/date_range_slider.js @@ -1,11 +1,11 @@ // Find JSR documentation here : https://soanvig.github.io/mm-jsr/api/index.html -const formatDate = (timestamp) => { +const formatDate = (timestamp, sep = '-') => { const date = new Date(timestamp); const day = ('0' + date.getUTCDate()).slice(-2); const month = ('0' + (date.getUTCMonth() + 1)).slice(-2); const year = date.getUTCFullYear(); - return year + '-' + month + '-' + day; + return year + sep + month + sep + day; }; const daterange_slider = new JSR({ diff --git a/src/js/cwsod_api/search.js b/src/js/cwsod_api/search.js index 8fc5ead..aa48b32 100644 --- a/src/js/cwsod_api/search.js +++ b/src/js/cwsod_api/search.js @@ -16,7 +16,7 @@ const getDataMultpileCountriesOneIndicator = (indicator, countries, daterange, t result = [], iterator = { current_id: 0, max_id: countries.length - 1 }) => cwsodAPI.getDataOnIndicator({ indicator, country: countries[iterator.current_id], daterange, type }) .then((response) => { - result.push( + result.push( (response.data !== undefined && response.data !== null && response.data.length > 0) ? { country: countries[iterator.current_id], data: [{ indicator: indicator, data: dateStuffing(response.data, indicator), error: null }] } : { country: countries[iterator.current_id], data: [{ indicator: indicator, data: null, error: { message: 'No data available' } }] } @@ -67,11 +67,10 @@ const formatIndicatorsToGraphVis = (data) => (data !== null && data !== undefine name: indic_data.name, data: (indicator.error === null) ? indicator.data.map((info) => { + const percent = info[(indic_data.special_name !== undefined) ? 'percent_' + indic_data.special_name : 'pct_' + indic_data.indicator] return { date: surveyDateToTimestamp(info.survey_date), - percent: 100 * info[(indic_data.special_name !== undefined) - ? 'percent_' + indic_data.special_name - : 'pct_' + indic_data.indicator] + percent: (percent !== undefined) ? Math.trunc(100 * percent) : undefined } }) : [] @@ -79,15 +78,40 @@ const formatIndicatorsToGraphVis = (data) => (data !== null && data !== undefine }) : [ { error: { message: 'No data available' } } ] -const surveyDateToTimestamp = (survey_date) => - (new Date(survey_date.slice(0, 4), survey_date.slice(4, 6), survey_date.slice(6, 8))).getTime(); +const surveyDateToTimestamp = (survey_date) => { + const year = survey_date.slice(0, 4); + const month = ('0' + (parseInt(survey_date.slice(4, 6)) - 1)).slice(-2); + const day = ('0' + (parseInt(survey_date.slice(6, 8)) + 1)).slice(-2); + return (new Date(year, month, day)).getTime(); +} const dateStuffing = (data, indicator) => { - console.log(data, indicator); + let indic_data = cwsodAPI.getIndicDataByIndicId(indicator); + indic_data = (indic_data.error === null) ? indic_data.data.indicator : { special_name: undefined, name: indicator }; const dates = getSelectedDateRange().map((date) => surveyDateToTimestamp(date)); - console.log(dates, new Date(2021, 04, 12)); - for(let d = dates[0]; d < dates[1]; d += 1000 * 60 * 60 * 24) { - console.log((new Date(d))); + const step = 1000 * 60 * 60 * 24; // one day in milliseconds + const number_of_days = Math.ceil(1 + (dates[1] - dates[0]) / step); + + if(data.length !== number_of_days) { + let old_data_index = 0; + const new_data = new Array(number_of_days).fill(null).map((date, index) => formatDate(dates[0] + index * step, '')) + return new_data.map((date) => { + const current_old_data = data.find((element) => element.survey_date === date); + if(current_old_data !== undefined) { + old_data_index++; + return JSON.parse(JSON.stringify(data[old_data_index - 1])); + } + else { + const new_date = JSON.parse(JSON.stringify(data[0])); + new_date[((indic_data.special_name !== undefined) ? indic_data.special_name : indic_data.indicator) + '_se'] = undefined; + new_date[((indic_data.special_name !== undefined) ? indic_data.special_name : indic_data.indicator) + '_se_unw'] = undefined; + new_date[(indic_data.special_name !== undefined) ? 'percent_' + indic_data.special_name : 'pct_' + indic_data.indicator] = undefined; + new_date[(indic_data.special_name !== undefined) ? 'percent_' + indic_data.special_name + '_unw' : 'pct_' + indic_data.indicator + '_unw'] = undefined; + new_date.sample_size = undefined; + new_date.survey_date = date; + return new_date; + } + }); } return data; } -- GitLab From 4d5cdf107a6b02c3f942c2ddbfd2f2a9f63f3c1d Mon Sep 17 00:00:00 2001 From: Felix <felix.olart56@gmail.com> Date: Tue, 11 May 2021 09:15:33 +0200 Subject: [PATCH 27/28] =?UTF-8?q?=F0=9F=9A=A7=20daterange=20slider=20trigg?= =?UTF-8?q?ers=20refresh?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/cwsod_api/date_range_slider.js | 6 ++++++ src/js/fp_api/fpAPI.js | 2 +- src/js/visualize.js | 8 ++++---- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/js/cwsod_api/date_range_slider.js b/src/js/cwsod_api/date_range_slider.js index d0e3a63..59c0cd1 100644 --- a/src/js/cwsod_api/date_range_slider.js +++ b/src/js/cwsod_api/date_range_slider.js @@ -25,6 +25,12 @@ const daterange_slider = new JSR({ } }); +let choose_value_daterange_timeout = null; +daterange_slider.onValueChange(() => { + clearTimeout(choose_value_daterange_timeout); + choose_value_daterange_timeout = setTimeout(() => handleOnClickVisualize(), 1000); +}); + const getSelectedDateRange = () => daterange_slider.engine.stateProcessor.state.values.map((value) => formatDate(value.real).split('-').reduce((daterange, date) => daterange + date)); \ No newline at end of file diff --git a/src/js/fp_api/fpAPI.js b/src/js/fp_api/fpAPI.js index 86823ce..0206ec6 100644 --- a/src/js/fp_api/fpAPI.js +++ b/src/js/fp_api/fpAPI.js @@ -7,7 +7,7 @@ class fpAPI { 'Czechia': 'Czech Republic', "Côte d'Ivoire (Ivory Coast)": "Côte d'Ivoire", 'Puerto Rico': 'Puerto Rico, U.S.', - 'United States': 'United States of America', + 'United States': 'United States of America', } static getCountryCodes = async () => { diff --git a/src/js/visualize.js b/src/js/visualize.js index a8b1dc0..5e584af 100644 --- a/src/js/visualize.js +++ b/src/js/visualize.js @@ -1,4 +1,4 @@ -let generateDataVisTimer = null; +let generate_data_vis_timer = null; const handleOnClickVisualize = (event, button) => { const sel_indics = getSelectedIndicators(document.querySelector('.covid-indicators-list')); @@ -12,10 +12,10 @@ const generateDataVisualization = (sel_indics, sel_countries, daterange) => { const timeout_duration_visualization = 5000; const timeout_duration_clean = 1000; console.log('TIMER STOP') - clearTimeout(generateDataVisTimer); + clearTimeout(generate_data_vis_timer); if((sel_indics.length === 1 && sel_countries.length > 0) || (sel_indics.length > 0 && sel_countries.length === 1)) { console.log('TIMER GO') - generateDataVisTimer = setTimeout(() => + generate_data_vis_timer = setTimeout(() => getVisualizationData(sel_indics, sel_countries, daterange) .then((response) => { graphVis.data = response; console.log(response) }) .then(() => { graphVis.refreshData(); }) @@ -23,7 +23,7 @@ const generateDataVisualization = (sel_indics, sel_countries, daterange) => { ); } else { - generateDataVisTimer = setTimeout(() => { + generate_data_vis_timer = setTimeout(() => { graphVis.data = []; graphVis.refreshData(); }, timeout_duration_clean); -- GitLab From 1446c0022390b044575f4f11375d8fca094bd7b4 Mon Sep 17 00:00:00 2001 From: Judicaelle6 <judicaelle.six@gmail.com> Date: Wed, 12 May 2021 20:23:01 +0200 Subject: [PATCH 28/28] mise en page checkbox --- res/arrow-down.svg | 14 ++++ src/css/index.css | 95 +++++++++++++++++++++-- src/js/cwsod_api/build_country_list.js | 15 ++++ src/js/cwsod_api/build_indicators_list.js | 39 +++++++++- src/js/main.js | 3 +- 5 files changed, 154 insertions(+), 12 deletions(-) create mode 100644 res/arrow-down.svg diff --git a/res/arrow-down.svg b/res/arrow-down.svg new file mode 100644 index 0000000..90e6914 --- /dev/null +++ b/res/arrow-down.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="451.8px" height="451.8px" viewBox="0 0 451.8 451.8" style="enable-background:new 0 0 451.8 451.8;" xml:space="preserve" + > +<style type="text/css"> + .st0{fill:#6266B2;} +</style> +<g> + <path class="st0" d="M225.9,354.7c-8.1,0-16.2-3.1-22.4-9.3L9.3,151.2c-12.4-12.4-12.4-32.4,0-44.8c12.4-12.4,32.4-12.4,44.7,0 + l171.9,171.9l171.9-171.9c12.4-12.4,32.4-12.4,44.7,0c12.4,12.4,12.4,32.4,0,44.8L248.3,345.4C242.1,351.6,234,354.7,225.9,354.7z" + /> +</g> +</svg> diff --git a/src/css/index.css b/src/css/index.css index 4cb2c3f..1cb4d6a 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -10,6 +10,7 @@ body { height: 100vh; margin : auto auto auto auto; font-family: "Open Sans", sans-serif; + text-overflow: "..."; } .app-container { @@ -35,7 +36,7 @@ body { .left-side-search-parameters > div { background-color:#18183B; border-radius: 5px; - padding: 20px; + padding: 0 0 0 0 !important; margin: 0.75em 0.75em 0.75em 0.75em; box-shadow: 2px 2px 7.5px black; } @@ -88,31 +89,91 @@ body { } .covid-sublist-container { + display: block !important; padding: 0 0 0 0; + margin: 0 0 0 0; background-color: #18183B; } +.covid-indicators-list > ul { + display: none; +} + +.label-container { + width: 100%; + height: 6vh; + border-bottom: 6px solid #18183b; + display: flex; + flex-direction: row; +} + +.label-container > label { + display: inline-block; + height: 50%; + width: 60%; + padding: 4% 4% 4% 10%; +} + +.logo-dropdown { + height: 50%; + margin: 0 auto 0 auto; + padding: 4% 4% 4% 4%; +} + +.rotated-img { + -webkit-transform: rotate(180deg); +} + .covid-sublist-container > li { + width: 100%; + height: 5.5vh; + border-bottom: 2px solid #4b4b71;; + box-sizing: border-box; + display: flex; + flex-direction: row; +} + +.covid-sublist-container-checked { width: 100%; height: 5vh; - border-bottom: 2px solid #30304f; + background-color: #30304f; + border-bottom: 2px solid #4b4b71; box-sizing: border-box; display: block; } .covid-sublist-container > li > input { - opacity: 1; + opacity: 0; +} + +.covid-sublist-container > li > label { + display: inline-block; + font-size: 14px; + margin: auto 0 auto 0; + width: 80%; } .covid-indicators-list > ul { list-style-type: none; - height: 60vh; + height: auto; + display: none; } .input[type=checkbox]:before { opacity: 0; } +.not-checked-logo { + height: 3vh; + margin: auto 0 auto 0; + opacity: 0; +} +.checked-logo { + height: 3vh; + margin: auto 0 auto 0; + opacity: 1; +} + .input[type=checkbox]:hover ~ div { background-color: #30304f; } @@ -142,7 +203,6 @@ body { .right-side-search-parameters>div{ background-color: #18183B; border-radius: 5px; - padding: 20px; margin: 0.75em 0.75em 0.75em 0.75em; box-shadow: 2px 2px 5px black; } @@ -159,8 +219,29 @@ body { } .available-countries-list { - list-style-type: none; - padding-left: 10px; + list-style-type: none; + padding: 0 0 0 0; + margin: 0 0 0 0; +} + +.available-countries-list > li { + width: 100%; + height: 5.5vh; + border-bottom: 2px solid #4b4b71;; + box-sizing: border-box; + display: flex; + flex-direction: row; +} + +.available-countries-list > li > input { + opacity: 0; +} + +.available-countries-list > li > label { + display: inline-block; + font-size: 14px; + margin: auto 0 auto 0; + width: 80%; } /* BOTTOM SEARCH PARAMETERS */ diff --git a/src/js/cwsod_api/build_country_list.js b/src/js/cwsod_api/build_country_list.js index eb2817d..fa983be 100644 --- a/src/js/cwsod_api/build_country_list.js +++ b/src/js/cwsod_api/build_country_list.js @@ -15,11 +15,18 @@ const buildCountryList = (countries, country_codes) => { const label = document.createElement('label'); label.setAttribute('for', el.country); label.innerHTML = el.country; + // Logo checkbox + const logo_checkbox = document.createElement('img'); + logo_checkbox.className = 'not-checked-logo'; + logo_checkbox.alt = 'Checked'; + logo_checkbox.src = 'res/checkmark.svg'; // checkbox const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; + checkbox.id = el.country; checkbox.value = el.country; checkbox.name = el.country; + checkbox.onclick = onClickCheckbox; // country flag // const flag = document.createElement('img'); // flag.setAttribute('src', fpAPI.getFlagUrl(country_codes[el.country])); @@ -27,6 +34,7 @@ const buildCountryList = (countries, country_codes) => { // flag.setAttribute('width', '40px'); list_item.appendChild(checkbox); + list_item.appendChild(logo_checkbox); list_item.appendChild(label); // list_item.appendChild(flag); ordered_list.appendChild(list_item); @@ -39,4 +47,11 @@ const buildCountryList = (countries, country_codes) => { main_container.appendChild(error_message); } +} + +function onClickCheckbox(){ + const parent = this.parentElement; + parent.classList.toggle("covid-sublist-container-checked"); + const checked_logo = parent.firstChild.nextSibling; + checked_logo.classList.toggle("checked-logo"); } \ No newline at end of file diff --git a/src/js/cwsod_api/build_indicators_list.js b/src/js/cwsod_api/build_indicators_list.js index 29c8125..81b3a70 100644 --- a/src/js/cwsod_api/build_indicators_list.js +++ b/src/js/cwsod_api/build_indicators_list.js @@ -3,12 +3,24 @@ const buildIndicatorsList = (indicators) => { indicators.map((set_of_indics) => { // sublist container const sublist_container = document.createElement('ul'); - sublist_container.className = 'covid-sublist-container'; sublist_container.name = set_of_indics.category; + // Label container + const label_container = document.createElement('div'); + label_container.className = 'label-container'; + label_container.onclick = onClickDropDown; // label sublist const label_sublist = document.createElement('label'); label_sublist.setAttribute('for', set_of_indics.category); label_sublist.innerHTML = set_of_indics.category; + // dropdown logo + const logo_dropdown = document.createElement('img'); + logo_dropdown.className = 'logo-dropdown'; + logo_dropdown.alt = 'dropdown'; + logo_dropdown.src = 'res/arrow-down.svg'; + + + label_container.appendChild(label_sublist); + label_container.appendChild(logo_dropdown); // list items const indicators = set_of_indics.indicators.map((indic) => { // list item @@ -17,21 +29,42 @@ const buildIndicatorsList = (indicators) => { const label_checkbox = document.createElement('label') label_checkbox.setAttribute('for', indic.indicator); label_checkbox.innerHTML = indic.name[0].toUpperCase() + indic.name.slice(1); + // Logo checkbox + const logo_checkbox = document.createElement('img'); + logo_checkbox.className = 'not-checked-logo'; + logo_checkbox.alt = 'Checked'; + logo_checkbox.src = 'res/checkmark.svg'; // checkbox const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = indic.indicator; checkbox.name = indic.indicator; + checkbox.onclick = onClickCheckbox; list_element.appendChild(checkbox); + list_element.appendChild(logo_checkbox); list_element.appendChild(label_checkbox); return list_element; }); indicators.forEach((indic) => {sublist_container.appendChild(indic);}); - return {container: sublist_container, label: label_sublist}; + return {container: sublist_container, label: label_container}; }) .forEach((sublist) => { main_container.appendChild(sublist.label); main_container.appendChild(sublist.container); }); -}; \ No newline at end of file +}; + +function onClickCheckbox(){ + const parent = this.parentElement; + parent.classList.toggle("covid-sublist-container-checked"); + const checked_logo = parent.firstChild.nextSibling; + checked_logo.classList.toggle("checked-logo"); +} + +function onClickDropDown(){ + this.firstChild.nextSibling.classList.toggle('rotated-img'); + const sibling = this.nextSibling; + sibling.classList.toggle('covid-sublist-container'); + +} \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index bb05c85..3741031 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -24,5 +24,4 @@ const onPageLoad = async () => { const cleanContainer = (container) => { while(container.firstChild) container.removeChild(container.firstChild); -}; - +}; \ No newline at end of file -- GitLab