Added histogram page

This commit is contained in:
Thomas Forgione 2018-11-15 17:19:13 +01:00
parent 6ce17cefc5
commit bdca489e62
No known key found for this signature in database
GPG Key ID: 203DAEA747F48F41
7 changed files with 164 additions and 4 deletions

View File

@ -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")

View File

@ -20,6 +20,7 @@ block content
.col-2 .col-2
#result #result
block mistake
p. p.
If you think there is a mistake in this table, feel free to If you think there is a mistake in this table, feel free to
<a href="mailto:thomas@forgione.fr">send me a mail</a> <a href="mailto:thomas@forgione.fr">send me a mail</a>

View File

@ -5,4 +5,6 @@ module.exports = [
url('/total-by-course/', 'totalByCourse', 'totalByCourse'), url('/total-by-course/', 'totalByCourse', 'totalByCourse'),
url('/total-table', 'totalTable', 'totalTable'), url('/total-table', 'totalTable', 'totalTable'),
url('/total-table-by-course', 'totalTableByCourse', 'totalTableByCourse'), url('/total-table-by-course', 'totalTableByCourse', 'totalTableByCourse'),
url('/histogram', 'histogram', 'histogram'),
url('/histogram-data', 'histogramData', 'histogramData'),
] ]

View File

@ -3,6 +3,14 @@ const cal = require('calendar');
const redirectIfNotLogged = require('auth/views').redirectIfNotLogged; const redirectIfNotLogged = require('auth/views').redirectIfNotLogged;
const getUrl = require('create-url').getUrl; 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) { function computeUserTable(user, callback) {
let result = {}; let result = {};
@ -134,3 +142,54 @@ module.exports.totalTableByCourse = function(req, res, render, next) {
render('totalTableByCourse.pug'); 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));
});
}

10
static/chart/Chart.min.js vendored Normal file

File diff suppressed because one or more lines are too long

75
static/js/histogram.js Normal file
View File

@ -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();

View File

@ -31,6 +31,8 @@ html
a.nav-link(href=getUrl("total")) Total a.nav-link(href=getUrl("total")) Total
li.nav-item li.nav-item
a.nav-link(href=getUrl("totalByCourse")) Total by course a.nav-link(href=getUrl("totalByCourse")) Total by course
li.nav-item
a.nav-link(href=getUrl("histogram")) Histogram
ul.navbar-nav.ml-auto ul.navbar-nav.ml-auto
if session.user === undefined if session.user === undefined
li.nav-item li.nav-item