From deacd0dfc195bca41af631114804d29937337cd8 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Wed, 17 Jan 2024 02:11:31 +0900 Subject: . --- services/app/assets/chart.js | 72 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 services/app/assets/chart.js (limited to 'services/app/assets/chart.js') diff --git a/services/app/assets/chart.js b/services/app/assets/chart.js new file mode 100644 index 0000000..dab6cbf --- /dev/null +++ b/services/app/assets/chart.js @@ -0,0 +1,72 @@ +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; + + 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)', + }, + }, + }, + }, + }, + ); +}); -- cgit v1.2.3-70-g09d2