Merge pull request #980 from thecourseforum/issue-652-mobile-pie-chart

Issue 652: Made fixes to pie chart, updated chart.js version

Author: hari-gajjala

doc/dev.md

@@ -8,7 +8,7 @@ Run the following command in a POSIX-compliant shell (i.e. Windows users - use G
 
 Replace `<install_dir>` with where you'd like to clone the script.
 
-*TODO*: correct branch to main/dev when merged
+_TODO_: correct branch to main/dev when merged
 
 ```console
 curl -fL 'https://raw.githubusercontent.com/thecourseforum/theCourseForum2/refs/heads/master/scripts/setup.sh' | sh -s -- <install_dir>

tcf_website/static/course/course_professor.css

@@ -51,9 +51,10 @@
 }
 
 .chart-container {
-  width: 90%;
-  height: 90%;
   position: relative;
+  margin-top: none;
+  height: 80vh;
+  width: 80vw;
 }
 
 .chart-button {
@@ -129,6 +130,16 @@
   flex-direction: column;
 }
 
+.top-center {
+  position: absolute;
+  top: 10px;
+  left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
 .gpa-text {
   color: #384676;
   font-size: 28px;
@@ -178,10 +189,6 @@
 }
 
 @media (max-width: 1100px) {
-  .chart-container {
-    max-width: 600px;
-  }
-
   .grades-ratings-container {
     flex-direction: column;
     height: 650px;
@@ -252,9 +259,6 @@
     height: 50%;
   }
 
-  .chart-container {
-    width: 175px;
-  }
   .ratings-container {
     height: 50%;
   }

tcf_website/static/course/javascript/course_data.js

@@ -8,7 +8,7 @@ function togglePieChart() {
   if (myChart) {
     myChart.destroy();
   }
-  document.getElementById("canvas-parent").style.width = "290px";
+  pieConfig.options.plugins.legend.display = false;
   // eslint-disable-next-line no-new,no-undef
   myChart = new Chart(ctx, pieConfig);
 }
@@ -17,7 +17,7 @@ function toggleBarChart() {
   if (myChart) {
     myChart.destroy();
   }
-  document.getElementById("canvas-parent").style.width = "95%";
+  barConfig.options.plugins.legend.display = false;
   // eslint-disable-next-line no-new,no-undef
   myChart = new Chart(ctx, barConfig);
 }
@@ -26,11 +26,13 @@ $(".pieToBar").click(function () {
   if (document.getElementById("toggle-btn").value === "bar") {
     toggleBarChart();
     document.getElementById("chart-label").className = "bottom-center";
+    document.getElementById("grades-container").style.paddingBottom = "3em";
     document.getElementById("toggle-btn").innerHTML = "Pie";
     document.getElementById("toggle-btn").value = "pie";
   } else {
     togglePieChart();
     document.getElementById("chart-label").className = "absolute-center";
+    document.getElementById("grades-container").style.paddingBottom = "0em";
     document.getElementById("toggle-btn").innerHTML = "Bar";
     document.getElementById("toggle-btn").value = "bar";
   }
@@ -176,9 +178,6 @@ const createChart = (gradesData) => {
         },
       },
       responsive: true,
-      legend: {
-        display: false,
-      },
       scales: {
         xAxes: [
           {
@@ -206,6 +205,9 @@ const createChart = (gradesData) => {
         ],
       },
       plugins: {
+        legend: {
+          display: false,
+        },
         labels: {
           // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
           render: "value",
@@ -242,12 +244,10 @@ const createChart = (gradesData) => {
 
   // Generate configuration for Pie Chart
   pieConfig = {
-    type: "pie",
+    type: "doughnut",
     data: chartData,
     options: {
-      cutoutPercentage: 65,
-      responsive: true,
-      aspectRatio: 1,
+      maintainAspectRatio: false,
       tooltips: {
         callbacks: {
           label: function (tooltipItem, data) {
@@ -264,10 +264,10 @@ const createChart = (gradesData) => {
         },
         displayColors: false,
       },
-      legend: {
-        display: false,
-      },
       plugins: {
+        legend: {
+          display: false,
+        },
         labels: {
           // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
           render: "label",

tcf_website/templates/course/course_professor.html

@@ -5,7 +5,7 @@
 
 {% block styles %}
     <link rel="stylesheet" href="{% static 'course/course_professor.css' %}"/>
-    <link rel="stylesheet" href="{% static 'icons/icons .css' %}"/>
+    <link rel="stylesheet" href="{% static 'icons/icons.css' %}"/>
 {% endblock %}
 
 {% block content %}
@@ -184,10 +184,8 @@ <h2 class="mr-md-3">{{ course.title }}</h2>
                         </div>
                     </div>
                 </div>
-                <div class="grades-container">
-                    <div class="chart-container d-flex align-items-center justify-content-center">
-                        <div id="canvas-parent"><canvas id="myChart"></canvas></div>
-                    </div>
+                <div id="grades-container" class="grades-container">
+                    <canvas id="myChart"></canvas>
                     <div class="absolute-center" id="chart-label">
                         <p class="gpa-text"> No grades found <i class="fa fa-frown-open fa-fw"></i></p>
                         <p class="students-text"> &mdash; Students</p>
@@ -322,7 +320,7 @@ <h3 class="reviews-heading mb-0 mt-1 mr-4">{{ reviews|length }} {% if reviews|le
     </script>
 
     <!-- For grade data -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+    <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 type="module" src="{% static 'course/javascript/course_data.js' %}"></script>