Skip to content

GitLab

Commit 9c428ee7 authored by Magnus Holm Brunbjerg's avatar Magnus Holm Brunbjerg
Browse files

Issues handling

parent c88e4b95
Hide whitespace changes
Inline Side-by-side
src/public/js/main.js deleted 100644 → 0
View file @ c88e4b95
'use strict'
/* global fetch Handlebars Chart */
let myChartCtx = document.querySelector('#myChart')
function getData () {
fetch(`http://10.122.6.21:3000/api/experiments/bdce27fa-718a-11e9-9695-d07e350e43bd/issues`, {
method: 'get',
headers: {
'Accept': 'application/json'
} }).then((response) => {
response.json().then((data) => {
// Clear chart before reloading.
myChartCtx = document.getElementById('myChart').getContext('2d')
makeMyChart(data)
})
})
}
// Retrieve data.
function makeMyData (data) {
const labels = []
const issues = []
let counter
let usedSteps = []
for (let i of data) {
// Iterate and group data
if (!usedSteps.includes(i.step)) {
for (let j of data) {
if (i.step === j.step) {
counter++
}
}
labels.push(i.step)
issues.push(counter)
counter = 0
usedSteps.add(i.step)
}
}
return { labels, issues }
}
function makeMyChart (data) {
const myData = makeMyData(data)
let myChart = new Chart(myChartCtx, {
type: 'bar',
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
}]
}
}
})
}
getData()
src/views/issues.hbs
View file @ 9c428ee7
<div style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
\ No newline at end of file
<h1>Problemer</h1>
{{#if issues}}
<div style="position: relative; height:40vh; width:80vw">
<canvas id="issues-chart"></canvas>
</div>
<script src="/js/Chart.min.js"></script>
<script>
const chartCtx = document.querySelector('#issues-chart')
function makeData (data) {
const labels = []
const issues = []
let stepCounter = {}
for (let i = 0; i < data.length; i++) {
const step = data[i].step
if (!stepCounter[step]) {
stepCounter[step] = 1
} else {
stepCounter[step] = stepCounter[step] += 1
}
}
for (let step in stepCounter) {
issues.push(stepCounter[step])
labels.push(step)
}
return { labels, issues }
}
function makeChart (data) {
const dataset = makeData(data)
let chart = new Chart(chartCtx, {
type: 'bar',
data: {
labels: dataset.labels,
datasets: [{
label: 'Problemer',
data: dataset.issues,
backgroundColor: 'gold'
}]
},
options: {
title: {
display: true,
text: 'Help Indicator'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
})
}
const dataset = [{{#each issues}}{ id: '{{this.id}}', experiment_id: '{{this.experiment_id}}', hardware_id: '{{this.hardware_id}}', step: {{this.step}}, start_time: '{{this.start_time}}', end_time: '{{this.end_time}}' }{{#unless @last}}, {{/unless}}{{/each}}]
makeChart(dataset)
</script>
{{else}}
<p>Det ser ud til at der ikke var nogen problemer under eksperimentets forløb.</p>
{{/if}}
\ No newline at end of file
src/views/layouts/main.hbs
View file @ 9c428ee7
......@@ -3,8 +3,6 @@
<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>
......
src/views/partials/nav.hbs
View file @ 9c428ee7
<nav class="nav-content">
<a href="/" class="nav-item">Forside</a>
<a href="/experiments" class="nav-item">Eksperimenter</a>
<a href="/issues" class="nav-item">Problemer</a>
</nav>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment