Adding new visualization option for student progress (#89)

insper-education · Aug 29, 2023 · 9b89dcf · 9b89dcf
1 parent 297332d
commit 9b89dcf
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 2 deletions.
diff --git 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}<br> Aluno: %{y}<br> Nota: %{z}<extra></extra>',
+      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()
+  }
+} 
diff --git a/backend/app/dashboard/templates/dashboard/instructor-progress.html b/backend/app/dashboard/templates/dashboard/instructor-progress.html
@@ -7,6 +7,8 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
 
+    <script type="text/javascript" src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
+
     <script src="{% static '/dashboard-progress.js' %}"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
 
@@ -40,13 +42,16 @@ <h1>Class Progress</h1>
               {% endfor %}
             </datalist>
           </div>
+          <button onclick="toggleVisibility()" class="btn btn-secondary">Alternar visualização</button>
         </div>
         {% endif %}
 
       <div id="tags-list">
       </div>
 
       <div id="table" data-columns="{{ columns | safe }}" data-data="{{ data | safe }}" data-tags="{{ tags | safe }}" data-classes="{{ course_classes | safe }}"></div>
+
+      <div id='chart' style="display: none;" data-columns="{{ columns | safe }}" data-data="{{ data | safe }}" data-tags="{{ tags | safe }}"><!-- Plotly chart will be drawn inside this DIV --></div>
     </main>
   </body>
 </html>
diff --git 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,