Add weekly progress to dashboard visualization

backend/app/dashboard/static/base.css

@@ -0,0 +1,11 @@
+#headers>* {
+    margin: 0.2rem;
+}
+
+#headers {
+    width: 99%;
+}
+
+.error-msg {
+    color: red;
+}

backend/app/dashboard/static/base.js

@@ -0,0 +1,8 @@
+function courseChanged(select) {
+    let newValue = select.value;
+    let baseURL = window.location.href.split("/");
+    if (baseURL.length > 5)
+        baseURL = baseURL.slice(0, -1)
+    baseURL = baseURL.join("/");
+    window.location = `${baseURL}/${newValue}`;
+}

backend/app/dashboard/static/dashboard-progress-weekly.js

@@ -0,0 +1,170 @@
+
+async function updateFilter() {
+  let student = selectStudent.value;
+  let week_label = selectWeek.value;
+  let courseClass = selectClass.value;
+  let week = weekData[week_label];
+  let student_value;
+  await fetch(`${activeCourse}/${courseClass}/${student}/${week}`).then(async (response) => {
+    const data = await response.json();
+    createExercisesTable(data.exercises);
+    createTagChart(data);
+    createInfo(data);
+    student_value = data["total"];
+
+  });
+
+  await fetch(`${activeCourse}/${courseClass}/${week}`).then(async (response) => {
+    const data = await response.json();
+    createHistogram(data, student_value);
+  });
+
+
+}
+function createInfo(data) {
+  let dash = document.getElementById("data");
+  dash.style.visibility = "visible";
+
+  let name = document.getElementById("name");
+  name.innerHTML = selectStudent.value;
+
+  let week = document.getElementById("week");
+  week.innerHTML = selectWeek.value;
+
+  let total = document.getElementById("total");
+  total.innerHTML = data["total"]
+
+  let avg = document.getElementById("avg");
+  avg.innerHTML = Math.round(data["average_points"] * 100) + "%";
+}
+
+function createHistogram(data, student_value) {
+
+  if (histChart != null)
+    histChart.destroy();
+
+  let keys = Object.keys(data);
+  const colors = Array(keys.length).fill("#808080");
+  student_value = parseInt(Math.ceil(student_value / 5)) * 5
+  let index = keys.indexOf(String(student_value));
+  if (index == -1)
+    colors[colors.length - 1] = "#0000FF";
+  else
+    colors[index] = "#0000FF";
+
+  histChart = new Chart("hist", {
+    type: "bar",
+    data: {
+      labels: Object.keys(data),
+      datasets: [{
+        label: "Histogram",
+        data: Object.values(data),
+        backgroundColor: colors,
+      }]
+    },
+    options: {
+      responsive: false,
+      maintainAspectRatio: false,
+    }
+  });
+}
+
+function createTagChart(data) {
+  if (tagChart != null)
+    tagChart.destroy();
+
+  tagChart = new Chart("chart", {
+    type: "pie",
+    data: {
+      labels: Object.keys(data.tags),
+      datasets: [{
+        data: Object.values(data.tags)
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+    }
+  });
+}
+
+function createExercisesTable(data) {
+  let dataAsArray = Object.values(data);
+
+  if (table != null) {
+    table.updateSettings({
+      data: dataAsArray
+    })
+    return;
+  }
+  let table_div = document.getElementById("table");
+  table = new Handsontable(table_div, {
+    data: dataAsArray,
+    colHeaders: ["Slug", "Max points", "Submissions"],
+    licenseKey: "non-commercial-and-evaluation", // for non-commercial use only
+  });
+}
+
+function getClassSelect() {
+  return document.getElementById("select-class");
+}
+
+function getCurrentStudents() {
+  const classSelect = getClassSelect();
+  const selectedClass = courseClasses[classSelect.selectedIndex];
+  return selectedClass.students;
+}
+
+function updateStudents() {
+  clearData();
+  let student_datalist = document.getElementById("students");
+  student_datalist.innerHTML = "";
+  let currentStudents = getCurrentStudents();
+  currentStudents.forEach(item => {
+    let option = document.createElement("option");
+    option.value = item;
+    student_datalist.appendChild(option)
+  })
+
+}
+function clearData() {
+  document.getElementById("data").style.visibility = "hidden";
+  selectStudent.value = "";
+}
+
+var activeCourse;
+var selectStudent;
+var selectWeek;
+var weekData;
+var exercise_div;
+var tagChart;
+var histChart;
+var table;
+var courseClasses;
+var selectClass;
+
+document.addEventListener("DOMContentLoaded", function () {
+
+  let activeButton = document.getElementById("weekly");
+  selectClass = document.getElementById("select-class");
+  courseClasses = selectClass.getAttribute("data-classes");
+  activeButton.className += " active";
+  activeCourse = document.getElementById("select-course").value;
+  selectStudent = document.getElementById("select-student");
+  selectWeek = document.getElementById("select-week");
+  exercise_div = document.getElementById("exercise-data");
+  weekData = selectWeek.getAttribute("data-week");
+  weekData = weekData.replace(/'/g, '"');
+  courseClasses = courseClasses.replace(/'/g, '"');
+  courseClasses = JSON.parse(courseClasses);
+  courseClasses.forEach((courseClass) => {
+    courseClass.students = new Set(courseClass.students);
+  });
+
+
+  weekData = JSON.parse(weekData);
+  selectStudent.onchange = updateFilter;
+  selectWeek.onchange = updateFilter;
+  selectClass.onchange = updateStudents;
+
+});

backend/app/dashboard/static/dashboard-progress.js

@@ -42,7 +42,6 @@ function createHandsontable(data, columns_list) {
 
 function updateHandsontable(data, columns_list) {
   data = filterStudentsInClass(data);
-
   ret = generateMatrix(data, columns_list)
   usernames = ret[0]
   zvals = ret[1]
@@ -113,7 +112,6 @@ function updateFilter() {
 function updateTableContent() {
   const clonedData = structuredClone(data);
   const clonedColumns = structuredClone(columns);
-
   let filteredColumns = ["Name"];
   exerciseList = [];
   if (tags.size == 0) {
@@ -171,7 +169,7 @@ function generateMatrix(tableData, columns){
         if (idx >= 0){
           studentvals[idx] = val[1]
         }
-      }  
+      }
     });
     zvals.push(studentvals)
   });
@@ -264,4 +262,10 @@ function toggleVisibility() {
     chart.style.display = "";
     document.querySelector('[data-title="Autoscale"]').click()
   }
-} 
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  let active_button = document.getElementById("semester");
+  active_button.className += " active";
+});

backend/app/dashboard/static/progress-table-weekly.css

@@ -0,0 +1,29 @@
+.chart {
+    width: 20rem;
+    height: 20rem;
+}
+
+#data {
+    visibility: hidden;
+    height: 12rem;
+    display: flexbox;
+}
+
+.card {
+    width: 10rem;
+    height: 7rem;
+}
+
+.cards {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+#data>* {
+    margin: 0.2rem;
+}
+
+#exercise-data {
+    display: flex;
+    justify-content: space-evenly;
+}

backend/app/dashboard/static/progress-table.css

@@ -2,10 +2,6 @@ main {
   margin: 1.5em 1em 4em;
 }
 
-.error-msg {
-  color: red;
-}
-
 .filterset {
   display: flex;
   gap: 2em;
@@ -35,4 +31,4 @@ input {
 #select-tag {
   width: fit-content;
   height: fit-content;
-}
+}

backend/app/dashboard/templates/dashboard/base.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+<html>
+
+<head>
+
+    <script src="{% static '/base.js' %}"></script>
+    <link rel="stylesheet" href="{% static '/base.css' %}">
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <script 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" />
+
+    {% block head-content %} {% endblock %}
+
+
+</head>
+
+<body>
+    <div id="headers">
+        {% block base-header %}
+            <h1 class="h1">Dashboard</h1>
+
+
+            <select id="select-course" class="form-select" list="courses" onchange="courseChanged(this)">
+                <datalist id="courses">{% for course in courses %}
+                    {% if course.name == activeCourse %}
+                        <option selected="selected">{{ course.name }} </option>
+                    {% else %}
+                        <option>{{ course.name }} </option>
+                    {% endif %}
+                {% endfor %}
+                </datalist>
+            </select>
+
+            <div class="btn-group">
+                <a href="/dashboard/instructor/{{ activeCourse }}" id="semester" class="btn btn-primary"
+                    aria-current="page">Semester</a>
+                <a href="/dashboard/instructor/weekly/{{ activeCourse }}" id="weekly" class="btn btn-primary">Weekly</a>
+            </div>
+
+            {% if course_classes|length == 0 %}
+                <p class="error-msg">This course has no related classes. Create at least one class using Django Admin.</p>
+            {% else %}
+                <div class="filterset">
+                    <div class="filter">
+                        <label for="select-class">Class</label>
+                        <select id="select-class" data-classes="{{ course_classes | safe }}"
+                        {% if course_classes|length == 1 %}
+                            disabled
+                        {% endif %}>
+                            {% for course_class in course_classes %}
+                            <option value="{{ course_class.name }}">{{ course_class.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+            </div>
+            {% block specific-header %} {% endblock %}
+            {% endif %}
+        {% endblock %}
+    </div>
+    <div id="data">
+        {% block data %} {% endblock %}
+    </div>
+
+</body>
+
+</html>