From 71b99d883c6d6808dc0b75f52f1d96836509b2d1 Mon Sep 17 00:00:00 2001
From: Raphael Marius Grund <raphael.grund@rwth-aachen.de>
Date: Fri, 5 Nov 2021 21:21:57 +0100
Subject: [PATCH] Update index.html
---
public/index.html | 171 ++++++++++++++++++++++++++++++++++++++++------
1 file changed, 150 insertions(+), 21 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6652c7d..f587464 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,23 +1,152 @@
<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Plain HTML site using GitLab Pages</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="navbar">
- <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
- <a href="https://gitlab.com/pages/plain-html/">Repository</a>
- <a href="https://gitlab.com/pages/">Other Examples</a>
- </div>
-
- <h1>Hello World!</h1>
-
- <p>
- This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
- </p>
- </body>
-</html>
+<meta charset="utf-8">
+<!-- Load d3.js -->
+<script src="https://d3js.org/d3.v6.js"></script>
+
+<!-- Create a div where the graph will take place -->
+<div id="my_dataviz"></div>
+
+<label>
+ Start:-
+ <input type="number" id="start">
+</label>
+<label>
+ End:
+ <input type="number" id="end">
+</label>
+<button id="send">Send</button>
+<div id="colors"></div>
+
+<script>
+ const urlParams = new URLSearchParams(window.location.search);
+ d3.select("#send").on("click", () => {
+ urlParams.set("start",document.getElementById("start").value)
+ urlParams.set("end",document.getElementById("start").value)
+ window.location.search = urlParams
+ })
+
+ document.getElementById("start").value = urlParams.get("start") || 5
+ document.getElementById("end").value = urlParams.get("end") || 5
+
+
+ // set the dimensions and margins of the graph
+ const margin = {top: 30, right: 30, bottom: 30, left: 45},
+ width = 450 - margin.left - margin.right,
+ height = 450 - margin.top - margin.bottom;
+
+ // append the svg object to the body of the page
+ const svg = d3.select("#my_dataviz")
+ .append("svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform", `translate(${margin.left},${margin.top})`);
+
+ // create a tooltip
+ // create a tooltip
+ const tooltip = d3.select("#my_dataviz")
+ .append("div")
+ .style("opacity", 0)
+ .attr("class", "tooltip")
+ .style("background-color", "white")
+ .style("border", "solid")
+ .style("border-width", "1px")
+ .style("margin", "2em")
+ .style("padding", "5px")
+ .style("position", "absolute")
+
+ // Three function that change the tooltip when user hover / move / leave a cell
+ const mouseover = function(event,d) {
+ tooltip.style("opacity", 1)
+ }
+ const mousemove = function(event,d) {
+ tooltip
+ .html(`Participant: ${d.current}`)
+ .style("left", (event.x) + "px")
+ .style("top", (event.y) + "px")
+ }
+ const mouseleave = function(d) {
+ tooltip.style("opacity", 0)
+ }
+
+ // Build color scale
+ var myColor = d3.scaleSequential()
+ .interpolator(d3[urlParams.get("colors") || "interpolateYlGnBu"])
+ .domain([0,12])
+
+ Object.keys(d3).forEach(key => {
+ if(key.startsWith("interpolate")) {
+ try {
+ if (d3[key]().startsWith("rgb"))
+ d3.select("#colors")
+ .append("div")
+ .html(key)
+ .on("mousedown", () => {
+ urlParams.set("colors", key)
+ window.location.search = urlParams
+ })
+ }catch (e){}
+ }
+ })
+
+
+ //Read the data
+ let dataStart = new Date()
+ dataStart.setHours(0,0,0,0)
+ dataStart.setDate(dataStart.getDate() - (Number.parseInt(urlParams.get("start")) || 5))
+ let dataEnd = new Date()
+ dataEnd.setHours(0,0,0,0)
+ dataEnd.setDate(dataEnd.getDate() + (Number.parseInt(urlParams.get("end")) || 5))
+
+ d3.json(`https://backend.dr-plano.com/courses_dates?id=108189856&start=${dataStart.getTime()}&end=${dataEnd.getTime()}`).then( function(data) {
+ data = data.map(d => {return {
+ start: new Date(d.dateList[0].start),
+ end: new Date(d.dateList[0].start),
+ current: d.currentCourseParticipantCount,
+ max: d.maxCourseParticipantCount,
+ x: function () { return this.start.toJSON().split('T')[0].substr(5)},
+ y: function () {
+ let h = this.start.getHours()
+ let m = this.start.getMinutes()
+ if (h < 10)
+ h = "0"+h;
+ if (m < 10)
+ m = "0"+m;
+ return h +":"+ m},
+ }})
+
+ const myGroups = data.map(d => d.x()).sort()
+ const myVars = data.map(d => d.y()).sort().reverse()
+
+ // Build X scales and axis:
+ const x = d3.scaleBand()
+ .range([ 0, width ])
+ .domain(myGroups)
+ .padding(0.01);
+ svg.append("g")
+ .attr("transform", `translate(0, ${height})`)
+ .call(d3.axisBottom(x))
+
+ // Build X scales and axis:
+ const y = d3.scaleBand()
+ .range([ height, 0 ])
+ .domain(myVars)
+ .padding(0.01);
+ svg.append("g")
+ .call(d3.axisLeft(y));
+
+ svg.selectAll()
+ .data(data, function(d) {return d.x()+':'+d.y();})
+ .join("rect")
+ .attr("x", function(d) { return x(d.x()) })
+ .attr("y", function(d) { return y(d.y())})
+ .attr("width", x.bandwidth() )
+ .attr("height", y.bandwidth() )
+ .style("fill", function(d) { return myColor(d.current)} )
+ .on("mouseover", mouseover)
+ .on("mousemove", mousemove)
+ .on("mouseleave", mouseleave)
+
+ })
+</script>
--
GitLab