1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import {
Chart,
Colors,
LineController,
LineElement,
LinearScale,
PointElement,
TimeScale,
Tooltip,
} from 'chart.js'
import 'chartjs-adapter-date-fns';
Chart.register(
Colors,
LineController,
LineElement,
LinearScale,
PointElement,
TimeScale,
Tooltip,
);
document.addEventListener('DOMContentLoaded', async () => {
const chartCanvas = document.getElementById('chart');
const quizId = chartCanvas.dataset.quizId;
const apiUrl = `${process.env.ALBATROSS_BASE_PATH}/api/quizzes/${quizId}/chart`;
const apiResult = await fetch(apiUrl).then(res => res.json());
if (apiResult.error) {
return;
}
const stats = apiResult.stats;
// Filter best scores.
for (const s of stats) {
const bestScores = [];
for (const score of s.scores) {
if (bestScores.length === 0 || bestScores[bestScores.length - 1].code_size > score.code_size) {
bestScores.push(score);
}
}
s.scores = bestScores;
}
new Chart(
chartCanvas,
{
type: 'line',
data: {
datasets: stats.map(s => ({
label: `${s.user.name}${s.user.is_admin ? ' (staff)' : ''}`,
data: s.scores.map(row => ({ x: row.submitted_at * 1000, y: row.code_size })),
}))
},
options: {
scales: {
x: {
type: 'time',
time: {
parsing: false,
display: false,
unit: 'day',
tooltipFormat: 'yyyy-MM-dd HH:mm:ss',
displayFormats: {
day: 'yyyy-MM-dd',
},
},
title: {
display: true,
text: '提出日時',
},
},
y: {
title: {
display: true,
text: 'コードサイズ (byte)',
},
},
},
},
},
);
});
|
