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