Commit df6a58dc authored by Magnus Holm Brunbjerg's avatar Magnus Holm Brunbjerg
Browse files

Compare

parent 13e77614
......@@ -201,23 +201,67 @@ app.route('/experiments/:id')
app.route('/compare')
.get((req, res, next) => {
// Load experiments list
fetch(`${api}/experiments`, standardGet)
.then((response) => {
if (response.status === 200) { return response.json() }
})
.then((experiments) => {
for (let i = 0; i < experiments.length; i++) {
experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
}
res.render('compare', {
meta: {
title: 'Eksperimenter',
style: ['experiments']
},
experiments: experiments
if (req.query.ids) {
const ids = req.query.ids
// Load all experiments from db
fetch(`${api}/experiments`, standardGet)
.then((response) => {
if (response.status === 200) { return response.json() }
})
})
.then((experimentsList) => {
let experiments = []
for (let i = 0; i < ids.length; i++) {
for (let n = 0; n < experimentsList.length; n++) {
if (ids[i] === experimentsList[n].id) {
experiments[i] = experimentsList[n]
}
}
}
for (let i = 0; i < experiments.length; i++) {
experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
}
let issues = []
let requestList = []
for (let i = 0; i < ids.length; i++) {
requestList[i] = fetch(`${api}/experiments/${ids[i]}/issues`, standardGet).then((response) => { if (response.status === 200) { return response.json() } })
}
Promise.all(requestList)
.then((response) => {
for (let i = 0; i < response.length; i++) {
issues[i] = response[i]
}
})
.then(() => {
console.log(experiments)
console.log(issues)
res.render('issCompare', {
meta: {
title: 'Sammenligning af problemer'
},
issues: issues,
experiments: experiments
})
})
})
} else {
// Load experiments list
fetch(`${api}/experiments`, standardGet)
.then((response) => {
if (response.status === 200) { return response.json() }
})
.then((experiments) => {
for (let i = 0; i < experiments.length; i++) {
experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
}
res.render('compare', {
meta: {
title: 'Sammenlign forsøg',
style: ['experiments']
},
experiments: experiments
})
})
}
})
// 404 handling, keep at bottom
......
const chartCtx = document.querySelector('#issues-chart')
function makeData (data) {
const labels = []
const issues = []
let labels = []
let issues = []
let avgTime = []
const avgTime = []
let totalStepTime = {}
let issueCounter = {}
......@@ -27,7 +28,7 @@ function makeData (data) {
for (let step in issueCounter) {
issues.push(issueCounter[step])
avgTime.push((totalStepTime[step] / issueCounter[step]) / 60000)
labels.push(step)
labels.push(`Trin ${step}`)
}
return { labels, issues, avgTime }
}
......@@ -40,16 +41,15 @@ function makeChart (data) {
data: {
labels: dataset.labels,
datasets: [{
label: 'Antal problemer',
data: dataset.issues,
backgroundColor: 'gold'
}, {
label: 'Gennemsnitlig tid (Min)',
data: dataset.avgTime,
type: 'line',
backgroundColor: '#113657',
fill: false,
hidden: true
fill: false
}, {
label: 'Antal problemer',
data: dataset.issues,
backgroundColor: 'gold'
}]
},
......
function redirect () {
// Get all compare checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]')
// Get ids of all checked compare checkboxes
let ids = []
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
ids.push(checkboxes[i].value)
}
}
// Create comparison query
let compareQuery = ''
for (let i = 0; i < ids.length; i++) {
if (i !== 0) {
compareQuery += '&'
}
compareQuery += `ids[]=${ids[i]}`
}
// Redirect to comparrison if compare query exist and there are at least 2 ids
if (compareQuery && ids.length >= 2) {
const host = window.location.host
window.location.href = `http://${host}/compare?${compareQuery}`
}
}
const chartCtx = document.querySelector('#issues-chart')
function randomColor () {
const letters = '0123456789ABCDEF'.split('')
let color = '#'
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
return color
}
function makeData (data) {
let labels = []
let issues = []
let avgStepTime = []
// Process each experiment individually
for (let i = 0; i < data.length; i++) {
issues[i] = []
avgStepTime[i] = []
const dataset = data[i]
let issueCounter = []
let totalStepTime = []
// Process each issue in the experiment
for (let n = 0; n < dataset.length; n++) {
const step = dataset[n].step
const startTime = new Date(dataset[n].start_time)
const endTime = new Date(dataset[n].end_time)
// Ensure labels up to and including max step of the experiment exist
if (step >= labels.length) {
for (let m = labels.length; m <= step; m++) {
labels[m] = `Trin ${m}`
}
}
// Add to issue counter and total time
if (step >= issueCounter.length) {
for (let m = issueCounter.length; m <= step; m++) {
issueCounter[m] = 0
totalStepTime[m] = 0
}
issueCounter[step]++
totalStepTime[step] += endTime - startTime
} else {
issueCounter[step]++
totalStepTime[step] += endTime - startTime
}
}
// Add the processes experiment data to the
for (let n = 0; n < issueCounter.length; n++) {
issues[i].push(issueCounter[n])
avgStepTime[i].push((totalStepTime[n] / issueCounter[n]) / 60000)
}
}
return { labels, issues, avgStepTime }
}
function makeChart (issueData, experimentNames) {
const data = makeData(issueData)
console.log(data)
let chartDatasets = []
let colors = []
for (let i = 0; i < experimentNames.length; i++) {
colors[i] = randomColor()
}
for (let i = 0; i < data.avgStepTime.length; i++) {
chartDatasets.push({
label: `${experimentNames[i]} - Tid`,
data: data.avgStepTime[i],
backgroundColor: colors[i],
type: 'line',
fill: false
})
}
for (let i = 0; i < data.issues.length; i++) {
chartDatasets.push({
label: `${experimentNames[i]} - Problemer`,
data: data.issues[i],
backgroundColor: colors[i]
})
}
let chart = new Chart(chartCtx, {
type: 'bar',
data: {
labels: data.labels,
datasets: chartDatasets
},
options: {
responsive: true
}
})
}
......@@ -17,7 +17,7 @@
.experiment a {
text-decoration: none;
color: #ffffff;
color: #000000;
}
.experiment-header {
......@@ -33,5 +33,5 @@
.experiment-information span {
margin: 0px -5px;
padding: 0px 20px;
border-top: 2px solid var(--secondary-color);
border-top: 2px solid #ffffff;
}
\ No newline at end of file
<h1>Sammenlign</h1>
<table>
<thead>
<tr>
<th>Valgt</th>
<th>Navn</th>
<th>Lærer</th>
<th>Start tidspunkt</th>
<th>Slut tidspunkt</th>
</tr>
</thead>
<tbody>
<h1>Eksperimenter</h1>
{{#if experiments}}
<button onclick="redirect()">Sammenlign</button>
<ul class="experiments-list">
{{#each experiments}}
<tr>
<td><input type="checkbox" name="compare" id="compare"></td>
<td><a href="/experiments/{{this.id}}">{{this.name}}</a></td>
<td>{{this.user_name}}</td>
<td>{{this.start_time}}</td>
<td>{{this.end_time}}</td>
</tr>
<li class="experiment">
<label for="compare{{@index}}">
<div class="experiment-header">
<input type="checkbox" name="compare" id="compare{{@index}}" value="{{this.id}}">
<span>{{this.name}}</span>
</div>
<div class="experiment-information">
<span>{{this.user_name}}</span>
<span>{{this.start_time}}</span>
</div>
</label>
</li>
{{/each}}
</tbody>
</table>
<button type="submit">Sammenlign</button>
\ No newline at end of file
</ul>
<button onclick="redirect()">Sammenlign</button>
<script src="/js/compare.js"></script>
{{else}}
<p>Det ser desværre ud til at der ikke er nogen eksperimenter at sammenligne.</p>
{{/if}}
\ No newline at end of file
<h1>Sammenligning af eksperimenterne:</h1>
<h2>{{#each experiments}}{{#if @first}}{{this.name}}{{else if @last}} & {{this.name}}{{else}}, {{this.name}}{{/if}}{{/each}}</h2>
{{#if issues}}
<div style="position: relative; height:38vh; width:78vw">
<canvas id="issues-chart"></canvas>
</div>
<script src="/js/Chart.min.js"></script>
<script src="/js/compareChart.js"></script>
<script>
let data = []
let expNames = []
{{#each issues}}
data[{{@index}}] = [{{#each this}}{ 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}}]
{{/each}}
{{#each experiments}}
expNames[{{@index}}] = "{{{this.name}}}"
{{/each}}
makeChart(data, expNames)
</script>
{{else}}
<br><br><br><br>
<p>Det ser ud til at der ikke var nogen problemer under eksperimentets forløb.</p>
{{/if}}
\ 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