diff --git a/css/_global.scss b/css/_global.scss deleted file mode 100644 index 20b5612ce318e2d12ad1f46e984eeea45cd5a32e..0000000000000000000000000000000000000000 --- a/css/_global.scss +++ /dev/null @@ -1,16 +0,0 @@ -* { - 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-vis.css similarity index 54% rename from css/graph.css rename to css/graph-vis.css index 454e58e9d6df5d1b20fdac0b6023657f5be86904..1422bdc978f12753f884e0a11eab2ca44601bf5b 100644 --- a/css/graph.css +++ b/css/graph-vis.css @@ -1,19 +1,4 @@ -* { - box-sizing: border-box; -} - -body { - position: relative; - z-index: 0; - text-align: center; - background-color: #f5f5f5; - font-size: 18px; - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - background-color: #2D2B54; -} +@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); .graph { display: flex; @@ -24,6 +9,7 @@ body { height: 100%; background-color: unset; } + .graph-container { position: relative; display: flex; @@ -31,12 +17,12 @@ body { justify-content: center; width: 100%; height: 100%; - padding: 100px; } + .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 +35,8 @@ body { width: 40px; border-radius: 5px; 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 +46,55 @@ 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); + 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: 0; + position: absolute; + height: 300px; + width: 1px; + transform-origin: center; + background-color: salmon; + 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; @@ -115,4 +149,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 0000000000000000000000000000000000000000..dced87d610200e6943fe339f9f0572a8e7e30ebb --- /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 54% rename from css/graph.scss rename to css/graph-vis.scss index fc89286608b52fe89f4e47802b5bfa22b57895e6..36b012cfa0db51e920885f7bf6f367124baa8dce 100644 --- a/css/graph.scss +++ b/css/graph-vis.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,64 @@ 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); + 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: 0; + position: absolute; + height: 300px; + width: 1px; + transform-origin: center; + background-color: salmon; + 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/css/graph.css.map b/css/graph.css.map deleted file mode 100644 index 93fdc001a571fdcd2df670e91f7910546c4b2358..0000000000000000000000000000000000000000 --- a/css/graph.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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/documentation-graphVis.md b/documentation-graphVis.md new file mode 100644 index 0000000000000000000000000000000000000000..88786f05ae4a63d4136b9e1e001c34570919b3c8 --- /dev/null +++ b/documentation-graphVis.md @@ -0,0 +1,93 @@ +Librarie maison créée avec un ⤠de ðŸ‘ï¸ par Grégoire + +# Dev en cours : +- [ ] Changement du css des points +- [ ] Affichage des marqueurs complets +- [ ] Fix marqueurs size +- [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 + +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>` 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 + +## Structure des fichiers et du code en HTML +```html +<!-- Container HTML à placer avant l'appel de la lib --> +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- 1. CSS a mettre dans le head --> + <link rel="stylesheet" type="text/css" href="PATH-TO-CSS/graph-vis.css"/> +</head> +<body> + <!-- 2. Container HTML à placer dans le body --> + <div class="graph-container"> + <div class="graph"></div> + </div> + + <!-- 3. Appel de la librarie après le container HTML --> + <script src="PATH-TO-LIB/graph-visualisation.js"></script> +</body> + +``` + +# 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 ou undefined si pas de données + percent: 50 + } + ] + }, + ], + } +]; +``` + +## (Dev en cours) Ajout de marqueurs (Claim et Validation) + +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 diff --git a/graph-visualisation.js b/graph-visualisation.js index 8cecfa5c9157b9ab4ee6df22c6f821f13d298c05..aaadaaba69356504f006f02dd7a3aa30f18c6f6c 100644 --- a/graph-visualisation.js +++ b/graph-visualisation.js @@ -1,39 +1,64 @@ const graphVis = { + data: [], - refreshData: function () { + markers: [], + + setMarker: function (timestamp, label = '', type = 'claim') { + graphVis.markers.push({ + date: timestamp, + type: type, + label: label + }); + }, + + existMarker: function (timestamp) { + const test = graphVis.markers.find(function (item) { + return timestamp === item.date; + }); + return test !== undefined; + }, + + 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)); - }); - } 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."; - } + 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); + getAngleRange: function (angleArray) { + //console.log(angleArray); const max = angleArray.reduce(function (max, current) { return (current > max) ? current : max; }, angleArray[0]); @@ -57,27 +82,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); }, @@ -86,7 +100,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,33 +111,36 @@ 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.markers) graphVis.addMarker(radius, angleInPercent, angleRange); } }, - addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false) { - - if (rescaleOptions) { - angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); - } - console.log(angle); + addPoint: function (value = 100, angle, radiusInPercent, rescaleOptions = false, colorClass = false, date = '') { + 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); }, @@ -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"); @@ -177,22 +195,35 @@ 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"); + + 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.classList.add("graph-label"); + label.classList.add("fade-in"); + label.innerHTML = content; + label.setAttribute("title", content); + graph.append(label); + }, - 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)"); - } + addMarker: function (radius, angle, rescaleOptions = false) { + + if (rescaleOptions) angle = graphVis.rescaleRange(angle, rescaleOptions.fromMin, rescaleOptions.fromMax); + console.log("Add marker: " + radius + " / " + angle); - label.setAttribute("title", country); - graph.append(label); */ + let graph = graphVis.getGraph(); + let marker = document.createElement("div"); + 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"); + marker.setAttribute("title", "Apparition de la fake new"); + graph.append(marker); }, /** @@ -201,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; @@ -213,9 +244,6 @@ const graphVis = { }; -//TODO: hover value, couleurs, indicator de fake news - - /** * ---------- INIT ------------------------ */ @@ -228,11 +256,22 @@ function getRandomInt(min, max) { function testGraph() { + graphVis.setMarker('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 !== 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 !== 30) 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 +283,7 @@ function testGraph() { }, { name: "Masque porté quotodiennement", - data: data + data: data2 }, ], }, @@ -254,16 +293,20 @@ function testGraph() { function testGraph2() { + graphVis.setMarker('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 !== 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) { - 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)}); } graphVis.data = [ @@ -277,6 +320,16 @@ function testGraph2() { }, ], }, + { + flagURL: "images/flag-france.svg", + country: "France â¤ï¸", + indicators: [ + { + name: "Masque porté quotodiennement", + data: data2 + }, + ], + }, { flagURL: "images/flag-france.svg", country: "France â¤ï¸", diff --git a/index.html b/index.html index e5050bffd657dd89df236302d23ed0488425fe78..753d074b501d42f04f6724085c75e6a1f6db73c5 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,14 +45,20 @@ <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="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> @@ -67,8 +74,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/res/arrow-down.svg b/res/arrow-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..90e69142ab7260231d3088897c607f2e1b6480b7 --- /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 aeab5d38e0f4b7ae10bab19fddebfcc819c94bdc..1cb4d6a5775d5d432a1cf676576870d13533caa3 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,19 +1,16 @@ @import url(https://fonts.googleapis.com/css?family=Roboto); -@font-face { - -} - /* MAIN APP CONTAINERS */ body { overflow: hidden; - background-color: #2D2B54; - font-family: 'Roboto'; + background-color: #20214f; color : #f5f5f5; width: 100vw; height: 100vh; margin : auto auto auto auto; + font-family: "Open Sans", sans-serif; + text-overflow: "..."; } .app-container { @@ -31,19 +28,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; - padding: 20px; - margin : 1em 1em 1em 1em; + border-radius: 5px; + padding: 0 0 0 0 !important; + 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 { @@ -67,71 +80,193 @@ 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 { + display: block !important; + padding: 0 0 0 0; + margin: 0 0 0 0; + background-color: #18183B; } -/* RIGHT SIDE SEARCH PARAMETERS */ +.covid-indicators-list > ul { + display: none; +} -.right-side-search-parameters { - width: 15vw; +.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; + background-color: #30304f; + border-bottom: 2px solid #4b4b71; + box-sizing: border-box; + display: block; +} + +.covid-sublist-container > li > input { + 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: auto; + display: none; } -.covid-sublist-container { - padding-left: 10px; +.input[type=checkbox]:before { + opacity: 0; } -.available-countries-list { - list-style-type: none; - padding-left: 10px; +.not-checked-logo { + height: 3vh; + margin: auto 0 auto 0; + opacity: 0; +} +.checked-logo { + height: 3vh; + margin: auto 0 auto 0; + opacity: 1; } -/* BOTTOM SEARCH PARAMETERS */ +.input[type=checkbox]:hover ~ div { + background-color: #30304f; +} -.bottom-parameters { +.input[type=checkbox]:checked ~ div { + background-color: #30304f; +} + + +/* DATA VISUALIZATION CONTAINERS */ + +.data-visualization-container { + width: 60vw; + height: 80vh; +} + +/* RIGHT SIDE SEARCH PARAMETERS */ + +.right-side-search-parameters { display: flex; flex-direction: column; + width: 20vw; + height: 80vh; + overflow: hidden; +} + +.right-side-search-parameters>div{ + background-color: #18183B; + border-radius: 5px; + margin: 0.75em 0.75em 0.75em 0.75em; + box-shadow: 2px 2px 5px black; +} - margin: 3em 3em 3em 3em; +/* LEGEND */ +.legend { + height: 5vh; } -.daterange-slider { - color :#f5f5f5 !important; +/* COUNTRIES LIST */ +.countries-list { + height: 65vh; + overflow-y: scroll; } -.jsr_slider::before { - background-color : #6266b2 !important; +.available-countries-list { + list-style-type: none; + padding: 0 0 0 0; + margin: 0 0 0 0; } -.jsr_rail { - background-color: #18183B !important; +.available-countries-list > li { + width: 100%; + height: 5.5vh; + border-bottom: 2px solid #4b4b71;; + box-sizing: border-box; + display: flex; + flex-direction: row; } -.jsr_bar { - background-color: #f5f5f5 !important; +.available-countries-list > li > input { + opacity: 0; } -.jsr_label { - background-color : #6266b2 !important; - color : #f5f5f5; +.available-countries-list > li > label { + display: inline-block; + font-size: 14px; + margin: auto 0 auto 0; + width: 80%; +} + +/* 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 4afe5898c3781b25ab5292054e33cdcc22761c8e..4b6068b65c98d19492e595370387ee742d655e37 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 98edad05557d75faead540bfcde2c5480692a9a2..b2d05a9db98d1bf6f139462f51af82dca95d8363 100644 --- a/src/css/search_window.css +++ b/src/css/search_window.css @@ -1,9 +1,6 @@ /* WINDOW */ -.body { - overflow: hidden; -} - +/*link*/ a:link { color: #18183B; } @@ -19,8 +16,6 @@ a:hover { } .search-window { - overflow-x: hidden; - overflow-y: hidden; position: fixed; top: 0%; left: 0%; @@ -33,6 +28,7 @@ a:hover { background-color: black; opacity: 1; + font-family: "Open Sans", sans-serif; } /* CLOSE BUTTON */ @@ -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,24 +146,29 @@ input[type=text]{ color: white; } +/* CONTAINER RESULT */ + .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; } +/* PUBLISHER CONTAINER */ + .news-publisher-container { flex-direction: row; color: #18183B; width: 100%; height: 10%; display: flex; - font-size: xx-small; + font-size: xx-small !important; } .news-publisher-label { @@ -171,23 +176,30 @@ input[type=text]{ padding: 0; } +/* TITLE */ + .news-title { margin: 0; padding: 1% 0 0 0; - font-size: small; + font-size: small !important; + overflow: hidden; + height: 4.5vh; } +/* DATES CONTAINER */ + .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 +213,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%; @@ -212,6 +224,8 @@ input[type=text]{ padding: 0.5% 0 0 0; } +/* BOTTOM ELEMENT */ + .news-elements-container { display: flex; flex-direction: row; @@ -226,15 +240,19 @@ 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; } +/* 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 8138679f2b5d936fab2814f578d3b92dd93fd83c..fa983be0a2342c64143d156392b63c74cddf9211 100644 --- a/src/js/cwsod_api/build_country_list.js +++ b/src/js/cwsod_api/build_country_list.js @@ -15,19 +15,27 @@ 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])); // flag.setAttribute('alt', el.country); // flag.setAttribute('width', '40px'); - list_item.appendChild(label); 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 37cc10462b64fddd29ed9d2f999ca2945d7fc9c7..81b3a70eada5eb2afe2b46fc98652688d37b8897 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.value = indic.indicator; + checkbox.id = indic.indicator; checkbox.name = indic.indicator; + checkbox.onclick = onClickCheckbox; - list_element.appendChild(label_checkbox); 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 bb05c85c24f73fac95b3b541d7f41253c9e1f54a..37410310b3e317b0870be99720f8884df55eeabe 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 diff --git a/visualisation.html b/visualisation.html index e189653d2b8cee31c3827fffadc4d8cde93a8b27..dc4fcc273b4e734cfd8e3de968a5b98a81dab1cc 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;