Render problem list stats with ajax

judge/views/submission.py

@@ -1,4 +1,3 @@
-import json
 import os.path
 from operator import attrgetter
 
@@ -455,15 +454,7 @@ class SubmissionsListBase(DiggPaginatorMixin, TitleMixin, ListView):
         context["selected_languages"] = self.selected_languages_key
         context["all_statuses"] = self.get_searchable_status_codes()
         context["selected_statuses"] = self.selected_statuses
-
+        context["can_show_result_data"] = not self.in_hidden_subtasks_contest()
-        if not self.in_hidden_subtasks_contest():
-            context["results_json"] = mark_safe(json.dumps(self.get_result_data()))
-            context["results_colors_json"] = mark_safe(
-                json.dumps(settings.DMOJ_STATS_SUBMISSION_RESULT_COLORS)
-            )
-        else:
-            context["results_json"] = None
-
         context["page_suffix"] = suffix = (
             ("?" + self.request.GET.urlencode()) if self.request.GET else ""
         )
@@ -509,7 +500,15 @@ class SubmissionsListBase(DiggPaginatorMixin, TitleMixin, ListView):
             self.include_frozen = True
 
         if "results" in request.GET:
-            return JsonResponse(self.get_result_data())
+            response = {}
+            if not self.in_hidden_subtasks_contest():
+                response["results_json"] = self.get_result_data()
+                response[
+                    "results_colors_json"
+                ] = settings.DMOJ_STATS_SUBMISSION_RESULT_COLORS
+            else:
+                response["results_json"] = None
+            return JsonResponse(response)
 
         return super(SubmissionsListBase, self).get(request, *args, **kwargs)
 

templates/submission/list.html

@@ -26,9 +26,6 @@
         window.show_problem = 0;
       {% endif %}
     {% endif %}
-    {% if results_json %}
-      window.results_json = {{ results_json }};
-    {% endif %}
   </script>
 
   {% compress js %}
@@ -52,6 +49,47 @@
 
     <script src="{{ static('libs/chart.js/Chart.js') }}"></script>
     <script type="text/javascript">
+      var chart = null;
+
+      function stats_graph(raw_data) {
+        var colors = window.results_colors_json;
+
+        var ctx = $('#status-graph').find('canvas')[0].getContext('2d');
+        var font = $('body').css('font-family');
+        if (chart !== null) {
+          chart.destroy();
+        }
+        chart = new Chart(ctx, {
+          type: 'pie',
+          data: {
+            datasets: [{
+              data: raw_data.categories.map(function(entry) {
+                return entry.count;
+              }),
+              backgroundColor: raw_data.categories.map(function(entry) {
+                return colors[entry.code];
+              }),
+            }],
+            labels: raw_data.categories.map(function(entry) {
+              return entry.name;
+            }),
+          },
+          options: {
+            animation: false,
+            scaleFontFamily: font,
+            tooltips: {
+              titleFontFamily: font,
+              bodyFontFamily: font,
+            },
+            legend: {
+              display: false,
+            },
+          },
+        });
+
+        $('#total-submission-count').text(raw_data.total);
+      }
+
       $(function () {
         var info_float = $('.info-float');
         var container = $('#content-right');
@@ -90,49 +128,17 @@
       });
 
       // Draw the statistics graph.
-      {% if results_json %}
+      {% if can_show_result_data %}
         $(function () {
-          var chart = null;
+          let currentUrl = window.location.href;
-          function stats_graph(raw_data) {
+          let separator = currentUrl.includes('?') ? '&' : '?';
-            var colors = {{ results_colors_json }};
+          let newUrl = currentUrl + separator + 'results=1';
-
+          $.get(newUrl, function(data) {
-            var ctx = $('#status-graph').find('canvas')[0].getContext('2d');
+            window.results_json = data.results_json;
-            var font = $('body').css('font-family');
+            window.results_colors_json = data.results_colors_json;
-            if (chart !== null) {
-              chart.destroy();
-            }
-            chart = new Chart(ctx, {
-              type: 'pie',
-              data: {
-                datasets: [{
-                  data: raw_data.categories.map(function(entry) {
-                    return entry.count;
-                  }),
-                  backgroundColor: raw_data.categories.map(function(entry) {
-                    return colors[entry.code];
-                  }),
-                }],
-                labels: raw_data.categories.map(function(entry) {
-                  return entry.name;
-                }),
-              },
-              options: {
-                animation: false,
-                scaleFontFamily: font,
-                tooltips: {
-                  titleFontFamily: font,
-                  bodyFontFamily: font,
-                },
-                legend: {
-                  display: false,
-                },
-              },
-            });
-
-            $('#total-submission-count').text(raw_data.total);
-          }
             stats_graph(window.results_json);
           });
+        });
       {% endif %}
     </script>
   {% endcompress %}
@@ -320,7 +326,6 @@
 {% endblock %}
 
 {% block right_sidebar %}
-  {% if results_json %}
   <div class="right-sidebar">
     <div class="submission">
       <div class="sidebox">
@@ -351,6 +356,7 @@
           </form>
         </div>
       </div>
+      {% if can_show_result_data %}
         <div class="sidebox">
           <div id="statistics-table">
             <h3 class="colored-text"><i class="fa fa-pie-chart"></i>{{ _('Statistics') }}</h3>
@@ -364,9 +370,9 @@
             </div>
           </div>
         </div>
-      </div>
-    </div>
       {% endif %}
+    </div>
+  </div>
 {% endblock %}
 
 {% block left_sidebar %}