Add statistics pie chart to user page

models/user.js

@@ -124,14 +124,14 @@ class User extends Model {
 
   async getArticles() {
     let Article = syzoj.model('article');
-    
+
     let all = await Article.model.findAll({
       attributes: ['id', 'title', 'public_time'],
       where: {
         user_id: this.id
       }
     });
-    
+
     return all.map(x => ({
       id: x.get('id'),
       title: x.get('title'),
@@ -139,6 +139,33 @@ class User extends Model {
     }));
   }
 
+  async getStatistics() {
+    let JudgeState = syzoj.model('judge_state');
+
+    let statuses = {
+      "Accepted": ["Accepted"],
+      "Wrong Answer": ["Wrong Answer", "File Error", "Output Limit Exceeded"],
+      "Runtime Error": ["Runtime Error"],
+      "Time Limit Exceeded": ["Time Limit Exceeded"],
+      "Memory Limit Exceeded": ["Memory Limit Exceeded"],
+      "Compile Error": ["Compile Error"]
+    };
+
+    let res = {};
+    for (let status in statuses) {
+      res[status] = 0;
+      for (let s of statuses[status]) {
+        res[status] += await JudgeState.count({
+          user_id: this.id,
+          type: 0,
+          status: status
+        });
+      }
+    }
+
+    return res;
+  }
+
   async renderInformation() {
     this.information = await syzoj.utils.markdown(this.information);
   }

modules/user.js

@@ -90,8 +90,11 @@ app.get('/user/:id', async (req, res) => {
     user.articles = await user.getArticles();
     user.allowedEdit = await user.isAllowedEditBy(res.locals.user);
 
+    let statistics = await user.getStatistics();
+
     res.render('user', {
-      show_user: user
+      show_user: user,
+      statistics: statistics
     });
   } catch (e) {
     console.log(e);

views/footer.ejs

@@ -6,6 +6,7 @@
     </div>
 
 <script src="//cdn.bootcss.com/semantic-ui/2.2.6/semantic.min.js"></script>
+<script src="//cdn.bootcss.com/Chart.js/2.4.0/Chart.bundle.min.js"></script>
 <script type="text/javascript">
 $("#logout").click(function () {
     window.location.href = "/logout";

views/user.ejs

@@ -38,8 +38,8 @@
                                 <div class="ui grid">
                                     <div class="row">
                                         <div class="column">
-                                            <h4 class="ui top attached block header">用户名</h4>
-                                            <div class="ui bottom attached segment"><%= show_user.username %><% if (show_user.nameplate) { %><%- show_user.nameplate %><% } %></div>
+                                           <h4 class="ui top attached block header">用户名</h4>
+                                           <div class="ui bottom attached segment"><%= show_user.username %><% if (show_user.nameplate) { %><%- show_user.nameplate %><% } %></div>
                                         </div>
                                     </div>
                                     <div class="row">
@@ -48,10 +48,6 @@
                                             <div class="ui bottom attached segment"><%= show_user.email %></div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="eight wide column">
-                                <div class="ui grid">
                                     <div class="row">
                                         <div class="column">
                                             <h4 class="ui top attached block header">个性签名</h4>
@@ -70,6 +66,19 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="eight wide column">
+                                <div class="ui grid">
+                                  <div class="row">
+                                      <div class="column">
+                                          <h4 class="ui top attached block header">统计</h4>
+                                          <div class="ui bottom attached segment">
+                                            <div id="pie_chart_legend"></div>
+                                            <div style="width: 300px; height: 300px; margin-left: 13.5px; "><canvas style="width: 50%; " id="pie_chart"></canvas></div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
 
@@ -104,13 +113,76 @@
     </div>
 </div>
 </div>
-<% if (show_user.allowedEdit) { %>
 <script>
 $(function () {
+<% if (show_user.allowedEdit) { %>
   $('#user_card .image').dimmer({
     on: 'hover'
   });
-})
 <% } %>
+
+  var pie = new Chart(document.getElementById('pie_chart').getContext('2d'), {
+    type: 'pie',
+    data: {
+      datasets: [
+        {
+          data: [
+            <%= statistics["Accepted"] %>,
+            <%= statistics["Wrong Answer"] %>,
+            <%= statistics["Runtime Error"] %>,
+            <%= statistics["Time Limit Exceeded"] %>,
+            <%= statistics["Memory Limit Exceeded"] %>,
+            <%= statistics["Compile Error"] %>,
+          ],
+          backgroundColor: [
+            "green",
+            "red",
+            "darkorchid",
+            "sandybrown",
+            "#00b5ad",
+            "rgb(0, 68, 136)"
+          ]
+        }
+      ],
+      labels: [
+        "Accepted",
+        "Wrong Answer",
+        "Runtime Error",
+        "Time Limit Exceeded",
+        "Memory Limit Exceeded",
+        "Compile Error"
+      ]
+    },
+    options: {
+      responsive: true,
+      legend: {
+        display: false
+      },
+      legendCallback: function (chart) {
+  			var text = [];
+  			text.push('<ul style="list-style: none; padding-left: 20px; margin-top: 0; " class="' + chart.id + '-legend">');
+
+  			var data = chart.data;
+  			var datasets = data.datasets;
+  			var labels = data.labels;
+
+  			if (datasets.length) {
+  				for (var i = 0; i < datasets[0].data.length; ++i) {
+  					text.push('<li style="font-size: 12px; width: 50%; display: inline-block; color: #666; "><span style="width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; background-color: ' + datasets[0].backgroundColor[i] + '; "></span>');
+  					if (labels[i]) {
+  						text.push(labels[i]);
+  					}
+  					text.push('</li>');
+  				}
+  			}
+
+  			text.push('</ul>');
+  			return text.join('');
+  		}
+    },
+  });
+
+  document.getElementById('pie_chart_legend').innerHTML = pie.generateLegend();
+});
 </script>
 <% include footer %>