Added histogram page
This commit is contained in:
parent
6ce17cefc5
commit
bdca489e62
|
@ -0,0 +1,11 @@
|
|||
extends ./total.pug
|
||||
|
||||
block mistake
|
||||
p.
|
||||
If you think there is a mistake in this histogram, feel free to <a
|
||||
href="mailto:thomas@forgione.fr">send me a mail</a> exaplaining what
|
||||
are the problem so I can fix it. Thanks!
|
||||
|
||||
block extrajs
|
||||
script(src="/static/chart/Chart.min.js")
|
||||
script(src="/static/js/histogram.js")
|
|
@ -20,6 +20,7 @@ block content
|
|||
.col-2
|
||||
#result
|
||||
|
||||
block mistake
|
||||
p.
|
||||
If you think there is a mistake in this table, feel free to
|
||||
<a href="mailto:thomas@forgione.fr">send me a mail</a>
|
||||
|
|
|
@ -5,4 +5,6 @@ module.exports = [
|
|||
url('/total-by-course/', 'totalByCourse', 'totalByCourse'),
|
||||
url('/total-table', 'totalTable', 'totalTable'),
|
||||
url('/total-table-by-course', 'totalTableByCourse', 'totalTableByCourse'),
|
||||
url('/histogram', 'histogram', 'histogram'),
|
||||
url('/histogram-data', 'histogramData', 'histogramData'),
|
||||
]
|
||||
|
|
|
@ -3,6 +3,14 @@ const cal = require('calendar');
|
|||
const redirectIfNotLogged = require('auth/views').redirectIfNotLogged;
|
||||
const getUrl = require('create-url').getUrl;
|
||||
|
||||
function compareStrings(a, b) {
|
||||
if (a < b)
|
||||
return -1;
|
||||
if (a > b)
|
||||
return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function computeUserTable(user, callback) {
|
||||
|
||||
let result = {};
|
||||
|
@ -134,3 +142,54 @@ module.exports.totalTableByCourse = function(req, res, render, next) {
|
|||
render('totalTableByCourse.pug');
|
||||
});
|
||||
}
|
||||
|
||||
module.exports.histogram = redirectIfNotLogged('histogram', function(req, res, render) {
|
||||
render('histogram.pug');
|
||||
});
|
||||
|
||||
module.exports.histogramData = function(req, res, render, next) {
|
||||
if (req.session.user === undefined) {
|
||||
res.status(404);
|
||||
|
||||
res.setHeader('Content-Type', 'text/html');
|
||||
|
||||
res.render(config.BASE_DIR + '/templates/404.pug', res.locals, function(err, result) {
|
||||
if (err)
|
||||
console.log(err);
|
||||
res.send(result);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
cal.getCalendar(req.session.user, new Date(2000, 1, 1), new Date(3000, 1, 1), (calendar) => {
|
||||
|
||||
let histogram = {};
|
||||
|
||||
for (let event of calendar.events) {
|
||||
let hours = event.startTime.getHours();
|
||||
if (hours % 2 === 0) {
|
||||
hours += 2;
|
||||
} else {
|
||||
hours += 1;
|
||||
}
|
||||
hours = hours.toString().padStart(2, '0');
|
||||
let minutes = event.startTime.getMinutes().toString().padStart(2, '0');
|
||||
let key = hours + ':' + minutes;
|
||||
|
||||
histogram[key] = histogram[key] || 0;
|
||||
histogram[key]++;
|
||||
}
|
||||
|
||||
let histogramArray = [];
|
||||
for (let key in histogram) {
|
||||
histogramArray.push({
|
||||
time: key,
|
||||
count: histogram[key],
|
||||
});
|
||||
}
|
||||
|
||||
histogramArray.sort((a, b) => compareStrings(a.time, b.time));
|
||||
res.send(JSON.stringify(histogramArray));
|
||||
});
|
||||
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,75 @@
|
|||
var loadingDiv = document.getElementById('loading');
|
||||
var errorDiv = document.getElementById('error');
|
||||
var resultDiv = document.getElementById('result');
|
||||
const timeout = 10000;
|
||||
|
||||
function getHistogram() {
|
||||
// Send XHR to totalTable
|
||||
loadingDiv.style.display = "";
|
||||
errorDiv.style.display = "none";
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.timeout = timeout;
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status === 200) {
|
||||
setData(JSON.parse(xhr.responseText));
|
||||
} else {
|
||||
setError();
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('GET', '/histogram-data', true);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function setData(data) {
|
||||
loadingDiv.style.display = "none";
|
||||
errorDiv.style.display = "none";
|
||||
|
||||
var barChartData = {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235, 1.0)',
|
||||
borderWidth: 1,
|
||||
label: 'Your lessons',
|
||||
data: [],
|
||||
}],
|
||||
};
|
||||
|
||||
for (let key in data) {
|
||||
barChartData.labels.push(data[key].time);
|
||||
barChartData.datasets[0].data.push(data[key].count);
|
||||
}
|
||||
|
||||
let canvas = document.createElement('canvas');
|
||||
let ctx = canvas.getContext('2d');
|
||||
|
||||
document.getElementById('result').appendChild(canvas);
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Histogram of times of lessons'
|
||||
}
|
||||
}
|
||||
}).update();
|
||||
|
||||
console.log(barChartData);
|
||||
}
|
||||
|
||||
function setError() {
|
||||
loadingDiv.style.display = "none";
|
||||
errorDiv.style.display = "";
|
||||
}
|
||||
|
||||
document.getElementById('tryAgain').addEventListener('click', getHistogram);
|
||||
getHistogram();
|
|
@ -31,6 +31,8 @@ html
|
|||
a.nav-link(href=getUrl("total")) Total
|
||||
li.nav-item
|
||||
a.nav-link(href=getUrl("totalByCourse")) Total by course
|
||||
li.nav-item
|
||||
a.nav-link(href=getUrl("histogram")) Histogram
|
||||
ul.navbar-nav.ml-auto
|
||||
if session.user === undefined
|
||||
li.nav-item
|
||||
|
|
Loading…
Reference in New Issue