Update index.html

71b99d88 · Raphael Marius Grund · 2e0dd521 · 71b99d88
Commit 71b99d88 authored 3 years ago by Raphael Marius Grund
--- a/public/index.html
+++ b/public/index.html
 <!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>

+<!-- 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>