Merge branch 'dev' into time-filter-fix

Author: ajnye

tcf_website/static/course/javascript/course_data.js

@@ -1,7 +1,6 @@
 let barConfig;
 let pieConfig;
 let myChart;
-let totalSum;
 const ctx = document.getElementById("myChart");
 
 function togglePieChart() {
@@ -57,9 +56,6 @@ const loadData = (data) => {
     dfw,
   ];
 
-  // Calculate total number of students
-  totalSum = grades_data.reduce((total, num) => total + num, 0);
-
   // Create default pie chart
   /* eslint-enable camelcase */
   createChart(grades_data);
@@ -241,33 +237,46 @@ const createChart = (gradesData) => {
       },
     },
   };
+  // eslint-disable-next-line no-new,no-undef
+  Chart.register(ChartDataLabels);
 
-  // Generate configuration for Pie Chart
   pieConfig = {
     type: "doughnut",
     data: chartData,
     options: {
       maintainAspectRatio: false,
-      tooltips: {
-        callbacks: {
-          label: function (tooltipItem, data) {
-            const dataset = data.datasets[0];
-            const percent = Math.round(
-              (dataset.data[tooltipItem.index] / totalSum) * 100,
-            );
-            let label = data.labels[tooltipItem.index];
-            if (tooltipItem.index === 9) {
-              label = "D/F/Withdraw";
-            }
-            return label + ": " + percent + "%";
-          },
-        },
-        displayColors: false,
-      },
       plugins: {
         legend: {
           display: false,
         },
+        datalabels: {
+          color: "#fff",
+          formatter: (value, context) => {
+            const dataset = context.chart.data.datasets[0];
+            const total = dataset.data.reduce((acc, num) => acc + num, 0);
+            const percentage = (value / total) * 100;
+            return percentage > 5
+              ? context.chart.data.labels[context.dataIndex]
+              : "";
+          },
+          font: {
+            size: 14,
+          },
+          anchor: "center",
+          align: "center",
+        },
+        tooltip: {
+          callbacks: {
+            label: function (tooltipItem) {
+              const dataset = tooltipItem.dataset;
+              const total = dataset.data.reduce((acc, num) => acc + num, 0);
+              const value = dataset.data[tooltipItem.dataIndex];
+              const percent = ((value / total) * 100).toFixed(1);
+              return `${value} (${percent}%)`;
+            },
+          },
+          displayColors: false,
+        },
         labels: {
           // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
           render: "label",

tcf_website/templates/course/course_professor.html

@@ -321,8 +321,8 @@ <h3 class="reviews-heading mb-0 mt-1 mr-4">{{ num_reviews }} {% if num_reviews =
 
     <!-- For grade data -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script type="module"
-            src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
+
     <script type="module" src="{% static 'course/javascript/course_data.js' %}"></script>
     <script type="module">
         // Run loaddata function from above script