test

85c7b118 · William Damgaard Lauritzen · fc6968c0 · 85c7b118 · 85c7b118 · 85c7b118
Commit 85c7b118 authored May 13, 2019 by William Damgaard Lauritzen
--- a/src/public/js/main.js
+++ b/src/public/js/main.js
+'use strict'
+/* global fetch Handlebars Chart */
+
+let myChartCtx = document.querySelector('#myChart')
+
+// Load page on startup.
+updateChart()
+
+setInterval(function () {
+  updateChart()
+}, 10000)
+
+function updateChart () {
+  fetch('/api/experiments/bdce27fa-718a-11e9-9695-d07e350e43bd/issues', {
+    method: 'get',
+    headers: {
+      'Accept': 'application/json'
+    } }).then((response) => {
+    response.json().then((data) => {
+      // Clear chart before reloading.
+      document.getElementById('chart-container').innerHTML = ''
+      document.getElementById('chart-container').innerHTML = '<canvas id="myChart"></canvas>'
+      myChartCtx = document.getElementById('myChart').getContext('2d')
+      makeMyChart(data)
+    })
+  })
+}
+
+// Retrieve data.
+function makeMyData (data) {
+  const labels = []
+  const issues = []
+  let counter
+  let usedstep
+  for (let i of data) {
+    // Iterate and group data
+    if (i.step !== usedstep) {
+      counter = 0
+      usedstep = i.step
+      labels.push(i.step)
+      for (let j of data) {
+        if (usedstep === j.step) {
+          counter++
+        }
+      }
+      issues.push(counter)
+    }
+  }
+  return { labels, issues }
+}
+
+function makeMyChart (data) {
+  const myData = makeMyData(data)
+  const myChart = new Chart(myChartCtx, {
+    type: 'horizontalBar',
+    data: {
+      labels: myData.labels,
+      datasets: [{
+        label: 'Issues',
+        data: myData.issues,
+        backgroundColor: 'gold'
+      }]
+    },
+    options: {
+      title: {
+        display: true,
+        text: 'Help Indicator'
+      },
+      responsive: true,
+      scales: {
+        xAxes: [{
+          stacked: true
+        }],
+        yAxes: [{
+          stacked: true
+        }]
+      }
+    }
+  })
+}
--- a/src/views/issues.hbs
+++ b/src/views/issues.hbs
+  <div style="position: relative; height:40vh; width:80vw">
+    <canvas id="myChart"></canvas>
+  </div>
\ No newline at end of file
--- a/src/views/layouts/main.hbs
+++ b/src/views/layouts/main.hbs
@@ -3,6 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/style/main.css">
+    <script src="js/Chart.min.js"></script>
+    <script defer src="js/main.js"></script>
    <title>{{meta.title}}</title>
 </head>
 <body>