From 8eb961e8428c9efcf0e707d584929f9eaf99b2d2 Mon Sep 17 00:00:00 2001 From: Marcio Fernando Stabile Junior Date: Tue, 29 Aug 2023 07:24:47 -0300 Subject: [PATCH 1/3] Adding new visualization option for student progress --- .../dashboard/static/dashboard-progress.js | 76 +++++++++++++++++++ .../dashboard/instructor-progress.html | 5 ++ backend/app/dashboard/views.py | 10 ++- 3 files changed, 89 insertions(+), 2 deletions(-) diff --git a/backend/app/dashboard/static/dashboard-progress.js b/backend/app/dashboard/static/dashboard-progress.js index 5ff7aab..9b83f48 100644 --- a/backend/app/dashboard/static/dashboard-progress.js +++ b/backend/app/dashboard/static/dashboard-progress.js @@ -43,6 +43,12 @@ function createHandsontable(data, columns_list) { function updateHandsontable(data, columns_list) { data = filterStudentsInClass(data); + ret = generateMatrix(data, columns_list) + zvals = ret[1] + data_h[0]['x'] = columns_list.slice(1); + data_h[0]['z'] = zvals; + Plotly.redraw('chart'); + let dataSchema = getDataSchema(columns_list); hot.updateSettings({ data: data, @@ -142,6 +148,29 @@ function generateTagView() { }); } +function generateMatrix(tableData, columns){ + nulls = new Array(columns.length-1).fill(null) + zvals = [] + usernames = [] + tableData.forEach(row => { + studentvals = [...nulls] + Object.entries(row).forEach((val) => { + if (val[0] == "Name") { + usernames.push(val[1]) + } + else{ + idx = columns.indexOf(val[0])-1 + if (idx >= 0){ + studentvals[idx] = val[1] + } + } + }); + zvals.push(studentvals) + }); + console.log(usernames) + return [usernames.reverse(), zvals.reverse()] +} + var tags = new Set(); var table; var columns; @@ -180,4 +209,51 @@ document.addEventListener("DOMContentLoaded", function () { tableData = structuredClone(data); createHandsontable(tableData, columns); + + ret = generateMatrix(tableData, columns) + usernames = ret[0] + zvals = ret[1] + data_h = [ + { + x: columns.slice(1), + y: usernames, + z: zvals, + type: 'heatmap', + hovertemplate : 'Exercício: %{x}
Aluno: %{y}
Nota: %{z}', + colorscale:[[0.0, "red"], [0.1, "red"], + [0.1, "orange"], [1, "orange"], + [1, "green"], [1.00, "green"]], + showscale:false, + xgap:0.5, + ygap:0.5, + } + ]; + + var layout = { + margin: { + t: 50, + r: 50, + b: 0, + l: 150 + }, + xaxis: {showticklabels: false, ticks: "", side:"top"}, + showlegend: false, + height: usernames.length * 20, + autosize: true + }; + + Plotly.newPlot('chart', data_h, layout); }); + +function toggleVisibility() { + var table = document.getElementById("table"); + var chart = document.getElementById("chart"); + if (table.style.display === "none") { + table.style.display = ""; + chart.style.display = "none"; + } else { + table.style.display = "none"; + chart.style.display = ""; + document.querySelector('[data-title="Autoscale"]').click() + } +} \ No newline at end of file diff --git a/backend/app/dashboard/templates/dashboard/instructor-progress.html b/backend/app/dashboard/templates/dashboard/instructor-progress.html index d77d040..c7aa9cd 100644 --- a/backend/app/dashboard/templates/dashboard/instructor-progress.html +++ b/backend/app/dashboard/templates/dashboard/instructor-progress.html @@ -7,6 +7,8 @@ + + @@ -40,6 +42,7 @@

Class Progress

{% endfor %} + {% endif %} @@ -47,6 +50,8 @@

Class Progress

+ + diff --git a/backend/app/dashboard/views.py b/backend/app/dashboard/views.py index 2222759..c4f327d 100644 --- a/backend/app/dashboard/views.py +++ b/backend/app/dashboard/views.py @@ -73,10 +73,16 @@ def students_progress(request, course_name): "Name": answer['author__username']}) data[answer['author__username']][answer['exercise__slug'] ] = round(answer['max_points'], 1) - columns_with_list = [*["Name"], *list(columns)] + sorted_columns = sorted(list(columns)) + columns_with_list = [*["Name"], *sorted_columns] + + data_list = sorted(list(data.values()), key=lambda d: d['Name'].lower()) + for d in data_list: + print(d["Name"]) + return render(request, 'dashboard/instructor-progress.html', { - 'data': list(data.values()), + 'data': data_list, 'columns': columns_with_list, 'tags': tag_obj, 'course_classes': course_classes_list, From 8844674b3326295da72967f91edbe655f32dedfe Mon Sep 17 00:00:00 2001 From: Marcio Fernando Stabile Junior Date: Tue, 29 Aug 2023 15:38:32 -0300 Subject: [PATCH 2/3] Fixing username list --- backend/app/dashboard/static/dashboard-progress.js | 10 ++++++---- .../templates/dashboard/instructor-progress.html | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/backend/app/dashboard/static/dashboard-progress.js b/backend/app/dashboard/static/dashboard-progress.js index 9b83f48..37cc88d 100644 --- a/backend/app/dashboard/static/dashboard-progress.js +++ b/backend/app/dashboard/static/dashboard-progress.js @@ -42,10 +42,12 @@ function createHandsontable(data, columns_list) { function updateHandsontable(data, columns_list) { data = filterStudentsInClass(data); - + ret = generateMatrix(data, columns_list) + usernames = ret[0] zvals = ret[1] data_h[0]['x'] = columns_list.slice(1); + data_h[0]['y'] = usernames; data_h[0]['z'] = zvals; Plotly.redraw('chart'); @@ -167,7 +169,6 @@ function generateMatrix(tableData, columns){ }); zvals.push(studentvals) }); - console.log(usernames) return [usernames.reverse(), zvals.reverse()] } @@ -210,7 +211,8 @@ document.addEventListener("DOMContentLoaded", function () { createHandsontable(tableData, columns); - ret = generateMatrix(tableData, columns) + data = filterStudentsInClass(tableData); + ret = generateMatrix(data, columns) usernames = ret[0] zvals = ret[1] data_h = [ @@ -238,7 +240,7 @@ document.addEventListener("DOMContentLoaded", function () { }, xaxis: {showticklabels: false, ticks: "", side:"top"}, showlegend: false, - height: usernames.length * 20, + height: Math.max(400, usernames.length * 25), autosize: true }; diff --git a/backend/app/dashboard/templates/dashboard/instructor-progress.html b/backend/app/dashboard/templates/dashboard/instructor-progress.html index c7aa9cd..5c06963 100644 --- a/backend/app/dashboard/templates/dashboard/instructor-progress.html +++ b/backend/app/dashboard/templates/dashboard/instructor-progress.html @@ -42,7 +42,7 @@

Class Progress

{% endfor %} - + {% endif %} From cc585298ce50029c940cb84d0fe951574e501fb4 Mon Sep 17 00:00:00 2001 From: Marcio Fernando Stabile Junior Date: Tue, 29 Aug 2023 16:57:30 -0300 Subject: [PATCH 3/3] removing conflict --- backend/app/dashboard/static/dashboard-progress.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/backend/app/dashboard/static/dashboard-progress.js b/backend/app/dashboard/static/dashboard-progress.js index ae54fdb..79ae0aa 100644 --- a/backend/app/dashboard/static/dashboard-progress.js +++ b/backend/app/dashboard/static/dashboard-progress.js @@ -217,12 +217,8 @@ document.addEventListener("DOMContentLoaded", function () { createHandsontable(tableData, columns); -<<<<<<< HEAD data = filterStudentsInClass(tableData); ret = generateMatrix(data, columns) -======= - ret = generateMatrix(tableData, columns) ->>>>>>> main usernames = ret[0] zvals = ret[1] data_h = [ @@ -250,11 +246,7 @@ document.addEventListener("DOMContentLoaded", function () { }, xaxis: {showticklabels: false, ticks: "", side:"top"}, showlegend: false, -<<<<<<< HEAD height: Math.max(400, usernames.length * 25), -======= - height: usernames.length * 20, ->>>>>>> main autosize: true };