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,48 +128,16 @@
       });
 
       // 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) {
+            stats_graph(window.results_json);
-              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>
@@ -320,37 +326,37 @@
 {% endblock %}
 
 {% block right_sidebar %}
-  {% if results_json %}
+  <div class="right-sidebar">
-    <div class="right-sidebar">
+    <div class="submission">
-      <div class="submission">
+      <div class="sidebox">
-        <div class="sidebox">
+        <h3 class="colored-text"><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
-          <h3 class="colored-text"><i class="fa fa-search"></i>{{ _('Filter submissions') }}</h3>
+        <div class="sidebox-content">
-          <div class="sidebox-content">
+          <form id="filter-form" name="form" action="" method="get">
-            <form id="filter-form" name="form" action="" method="get">
+            <div class="filter-form-group">
-              <div class="filter-form-group">
+              <label class="bold-text margin-label" for="status"><i class="non-italics" >{{ _('Status') }}</i></label>
-                <label class="bold-text margin-label" for="status"><i class="non-italics" >{{ _('Status') }}</i></label>
+              <select id="status" name="status" multiple>
-                <select id="status" name="status" multiple>
+                {% for id, name in all_statuses %}
-                  {% for id, name in all_statuses %}
+                  <option {% if id in selected_statuses %}selected{% endif %}
-                    <option {% if id in selected_statuses %}selected{% endif %}
+                    value="{{ id }}">{{ name }}</option>
-                      value="{{ id }}">{{ name }}</option>
+                {% endfor %}
-                  {% endfor %}
+              </select>
-                </select>
+            </div>
-              </div>
+            <div class="filter-form-group">
-              <div class="filter-form-group">
+              <label class="bold-text margin-label" for="language"><i class="non-italics">{{ _('Language') }}</i></label>
-                <label class="bold-text margin-label" for="language"><i class="non-italics">{{ _('Language') }}</i></label>
+              <select id="language" name="language" multiple>
-                <select id="language" name="language" multiple>
+                {% for code, name in all_languages %}
-                  {% for code, name in all_languages %}
+                  <option {% if code in selected_languages %}selected{% endif %}
-                    <option {% if code in selected_languages %}selected{% endif %}
+                    value="{{ code }}">{{ name }}</option>
-                      value="{{ code }}">{{ name }}</option>
+                {% endfor %}
-                  {% endfor %}
+              </select>
-                </select>
+            </div>
-              </div>
+            <div class="form-submit-group" >
-              <div class="form-submit-group" >
+              <a id="go" onclick="form.submit()" class="button small">{{ _('Go') }}</a>
-                <a id="go" onclick="form.submit()" class="button small">{{ _('Go') }}</a>
+            </div>
-              </div>
+          </form>
-            </form>
-          </div>
         </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>
+      {% endif %}
     </div>
-  {% endif %}
+  </div>
 {% endblock %}
 
 {% block left_sidebar %}