core&ui: add problem stat (#798)

Co-authored-by: undefined <i@undefined.moe>

packages/ui-default/locales/zh.yaml

@@ -708,6 +708,10 @@ problem.import.input_format: '## 输入格式'
 problem.import.limit_and_hint: '## 限制'
 problem.import.output_format: '## 输出格式'
 problem.import.problem_description: '## 题目描述'
+problem.stats.sort.date: 提交时间
+problem.stats.sort.length: 代码长度
+problem.stats.sort.memory: 内存占用
+problem.stats.sort.time: 运行时间
 Problems Sets: 题库
 Problems: 题目
 Processing...: 处理中...

packages/ui-default/pages/problem_detail.page.jsx

@@ -1,4 +1,3 @@
-import { getScoreColor } from '@hydrooj/utils/lib/status';
 import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';
@@ -101,7 +100,7 @@ class ProblemPageExtender {
   }
 }
 
-const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homework_detail_problem'], async (pagename) => {
+const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homework_detail_problem'], async () => {
   let reactLoaded = false;
   let renderReact = null;
   let unmountReact = null;
@@ -306,57 +305,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     $('.outer-loader-container').hide();
   }
 
-  async function initChart() {
-    if (!Object.keys(UiContext.pdoc.stats || {}).length) {
-      $('#submission-status-placeholder').parent().hide();
-      return;
-    }
-    const echarts = await import('echarts');
-    const $status = document.getElementById('submission-status-placeholder');
-    const statusChart = echarts.init($status);
-    statusChart.setOption({
-      tooltip: { trigger: 'item' },
-      series: [
-        {
-          name: 'Submissions',
-          type: 'pie',
-          radius: '70%',
-          label: { show: false },
-          labelLine: { show: false },
-          data: [
-            { value: UiContext.pdoc.stats.TLE, name: 'TLE' },
-            { value: UiContext.pdoc.stats.AC, name: 'AC' },
-            { value: UiContext.pdoc.stats.MLE, name: 'MLE' },
-            { value: UiContext.pdoc.stats.WA, name: 'WA' },
-            { value: UiContext.pdoc.stats.RE, name: 'RE' },
-            { value: UiContext.pdoc.stats.CE, name: 'CE' },
-          ],
-        },
-      ],
-    });
-    const $score = document.getElementById('submission-score-placeholder');
-    const x = Array.from({ length: 101 }, (v, i) => i).filter((i) => UiContext.pdoc.stats[`s${i}`]);
-    const scoreChart = echarts.init($score);
-    scoreChart.setOption({
-      tooltip: { trigger: 'item' },
-      xAxis: { data: x },
-      yAxis: {},
-      series: [{
-        data: x.map((i) => ({
-          value: UiContext.pdoc.stats[`s${i}`],
-          itemStyle: { color: getScoreColor(i) },
-        })),
-        type: 'bar',
-      }],
-    });
-
-    window.onresize = function () {
-      statusChart.resize();
-      scoreChart.resize();
-    };
-    if (UiContext.pdoc.config?.type === 'objective') $($status).hide();
-  }
-
   $(document).on('click', '[name="problem-sidebar__open-scratchpad"]', (ev) => {
     enterScratchpadMode();
     ev.preventDefault();
@@ -380,7 +328,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   });
   $('[name="problem-sidebar__download"]').on('click', handleClickDownloadProblem);
   if (UiContext.pdoc.config?.type === 'objective') loadObjective();
-  if (pagename !== 'contest_detail_problem') initChart();
 });
 
 export default page;

packages/ui-default/pages/problem_statistics.page.styl

@@ -0,0 +1,14 @@
+.page--problem_statistics
+  .col--status
+    width: rem(80px)
+
+  .col--submit-at
+    width: rem(160px)
+    text-align: center
+
+  .col--time, .col--memory, .col--lang, .col--code
+    width: rem(85px)
+    text-align: center
+
+  .col--status, .col--submit-by, .col--code
+    border-right: 1px solid $table-border-color

packages/ui-default/pages/problem_statistics.page.ts

@@ -0,0 +1,69 @@
+import { getScoreColor } from '@hydrooj/utils/lib/status';
+import $ from 'jquery';
+import { NamedPage } from 'vj/misc/Page';
+import { getAvailableLangs, tpl } from 'vj/utils';
+
+const page = new NamedPage('problem_statistics', () => {
+  async function initChart() {
+    if (!Object.keys(UiContext.pdoc.stats || {}).length) {
+      $('#submission-status-placeholder').parent().hide();
+      return;
+    }
+    const echarts = await import('echarts');
+    const $status = document.getElementById('submission-status-placeholder');
+    const statusChart = echarts.init($status);
+    statusChart.setOption({
+      tooltip: { trigger: 'item' },
+      series: [
+        {
+          name: 'Submissions',
+          type: 'pie',
+          radius: '70%',
+          label: { show: false },
+          labelLine: { show: false },
+          data: [
+            { value: UiContext.pdoc.stats.TLE, name: 'TLE' },
+            { value: UiContext.pdoc.stats.AC, name: 'AC' },
+            { value: UiContext.pdoc.stats.MLE, name: 'MLE' },
+            { value: UiContext.pdoc.stats.WA, name: 'WA' },
+            { value: UiContext.pdoc.stats.RE, name: 'RE' },
+            { value: UiContext.pdoc.stats.CE, name: 'CE' },
+          ],
+        },
+      ],
+    });
+    const $score = document.getElementById('submission-score-placeholder');
+    const x = Array.from({ length: 101 }, (v, i) => i).filter((i) => UiContext.pdoc.stats[`s${i}`]);
+    const scoreChart = echarts.init($score);
+    scoreChart.setOption({
+      tooltip: { trigger: 'item' },
+      xAxis: { data: x },
+      yAxis: {},
+      series: [{
+        data: x.map((i) => ({
+          value: UiContext.pdoc.stats[`s${i}`],
+          itemStyle: { color: getScoreColor(i) },
+        })),
+        type: 'bar',
+      }],
+    });
+
+    window.onresize = function () {
+      statusChart.resize();
+      scoreChart.resize();
+    };
+    if (UiContext.pdoc.config?.type === 'objective') $($status).hide();
+  }
+
+  const availableLangs = getAvailableLangs(UiContext.pdoc.config.langs);
+  Object.keys(availableLangs).map(
+    (i) => ($('select[name="lang"]').append(tpl`<option value="${i}" key="${i}">${availableLangs[i].display}</option>`)));
+  const lang = new URL(window.location.href).searchParams.get('lang');
+  if (lang) $('select[name="lang"]').val(lang);
+  initChart();
+  $('[name="filter-form"] select').on('change', () => {
+    $('[name="filter-form"]').trigger('submit');
+  });
+});
+
+export default page;

packages/ui-default/templates/partials/problem_sidebar_normal.html

@@ -78,6 +78,9 @@
       <li class="menu__item"><a class="menu__link{% if page_name == 'problem_files' %} active{% endif %}" href="{{ url('problem_files', pid=pdoc.pid|default(pdoc.docId)) }}">
         <span class="icon icon-file"></span> {{ _('Files') }}
       </a></li>
+      <li class="menu__item"><a class="menu__link{% if page_name == 'problem_statistics' %} active{% endif %}" href="{{ url('problem_statistics', pid=pdoc.pid|default(pdoc.docId)) }}">
+        <span class="icon icon-statistics"></span> {{ _('Statistics') }}
+      </a></li>
     {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
       <li class="menu__seperator"></li>
       <li class="menu__item"><a class="menu__link{% if page_name == 'problem_edit' %} active{% endif %}" href="{{ url('problem_edit', pid=pdoc.pid|default(pdoc.docId)) }}">
@@ -112,14 +115,6 @@
   </div>
   {% include "partials/problem-sidebar-information.html" %}
 </div>
-{% elif page_name != 'contest_detail_problem' and page_name != 'problem_config' %}
-<div class="section side nojs--hide">
-  <div class="section__header">
-    <h1 class="section__title">{{ _('Statistics') }}</h1>
-  </div>
-  <div id="submission-status-placeholder" style="width: 100%; height:230px"></div>
-  <div id="submission-score-placeholder" style="width: 100%; height:230px"></div>
-</div>
 {% endif %}
 {% if page_name == 'problem_detail' and (tdocs.length or ctdocs.length or htdocs.length) %}
 <div class="section side">

packages/ui-default/templates/problem_statistics.html

@@ -0,0 +1,96 @@
+{% import "components/user.html" as user with context %}
+{% import "components/problem.html" as problem with context %}
+{% import "components/nothing.html" as nothing with context %}
+{% extends "layout/basic.html" %}
+{% block content %}
+{{ set(UiContext, 'pdoc', pdoc) }}
+<div class="row">
+  <div class="medium-9 columns">
+    <div class="section nojs--hide">
+      <div class="section__header">
+        <h1 class="section__title">{{ _('Statistics') }}</h1>
+      </div>
+      <div class="row">
+        <div class="medium-6 columns" id="submission-status-placeholder" style="height:230px"></div>
+        <div class="medium-6 columns" id="submission-score-placeholder" style="height:230px"></div>
+      </div>
+    </div>
+    <div class="section">
+      <div class="section__header">
+        <h1 class="section__title">{{ _('Submission Statistics') }}</h1>
+        <div class="section__tools">
+          <form method="get" class="filter-form" name="filter-form">
+            {{ _('Show') }}:
+            <select class="inline compact select" name="sort">
+              {%- for g in types -%}
+                <option value="{{ g }}"{% if sort == g %} selected{% endif %}>{{ _('problem.stats.sort.'+g) }}</option>
+              {%- endfor -%}
+            </select>
+            <select class="inline compact select" name="direction">
+              <option value="1"{% if direction == 1 %} selected{% endif %}>ASC</option>
+              <option value="-1"{% if direction == -1 %} selected{% endif %}>DESC</option>
+            </select>
+            <select class="inline compact select" name="lang">
+                <option value="">{{ _('All Languages') }}</option>
+              </select>
+            <button type="submit" class="compact button">
+              {{ _('Search') }}
+            </button>
+          </form>
+        </div>
+      </div>
+      <div class="section__body no-padding">
+        {% if not rsdocs|length %}
+        {{ nothing.render('Oh, there is no submission!') }}
+        {% else %}
+        <table class="data-table record_main__table">
+          <colgroup>
+            <col class="col--status">
+            <col class="col--submit-by">
+            <col class="col--time">
+            <col class="col--memory">
+            <col class="col--lang">
+            <col class="col--code">
+            <col class="col--submit-at">
+          </colgroup>
+          <thead>
+            <tr>
+              <th class="col--status record-status--border">{{ _('Status') }}</th>
+              <th class="col--submit-by">{{ _('Submit By') }}</th>
+              <th class="col--time">{{ _('Time') }}</th>
+              <th class="col--memory">{{ _('Memory') }}</th>
+              <th class="col--lang">{{ _('Language') }}</th>
+              <th class="col--code">{{ _('Code') }}</th>
+              <th class="col--submit-at">{{ _('Submit At') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+          {%- for rsdoc in rsdocs -%}
+            <tr data-rid="{{ rsdoc['_id'] }}">
+              <td class="col--status record-status--border pass">
+                <div class="col--status__text">
+                  <span class="icon record-status--icon pass"></span>
+                  <a href="{{ url('record_detail', rid=rsdoc._id) }}" class="record-status--text pass">AC</a>
+                </div>
+              </td>
+              <td class="col--submit-by">{{ user.render_inline(udict[rsdoc['uid']], badge=false) }}</td>
+              <td class="col--time">{% if rsdoc['time'] %}{% if [STATUS.STATUS_TIME_LIMIT_EXCEEDED, STATUS.STATUS_MEMORY_LIMIT_EXCEEDED, STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED].includes(rsdoc['status']) %}&ge;{% endif %}{{ rsdoc.time|round|int }}ms{% else %}-{% endif %}</td>
+              <td class="col--memory">{% if rsdoc['memory'] %}{% if [STATUS.STATUS_TIME_LIMIT_EXCEEDED, STATUS.STATUS_MEMORY_LIMIT_EXCEEDED, STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED].includes(rsdoc['status']) %}&ge;{% endif %}{{ size(rsdoc.memory, 1024) }}{% else %}-{% endif %}</td>
+              <td class="col--lang">{{ model.setting.langs[rsdoc['lang']].display }}</td>
+              <td class="col--code">{{ size(rsdoc.code) }}</td>
+              <td class="col--submit-at">{{ datetimeSpan(rsdoc['_id'], false)|safe }}</td>
+            </tr>
+          {%- endfor -%}
+          </tbody>
+        </table>
+        {{ paginator.render(page, pcount, add_qs=('direction=' + direction + ('&sort=' + sort if sort else ''))) }}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  <div class="medium-3 columns">
+    {% include "partials/problem_sidebar.html" %}
+  </div>
+</div>
+
+{% endblock %}

packages/ui-default/templates/record_detail.html

@@ -80,10 +80,10 @@
             <dd>{{ model.setting.langs[rdoc.lang].display }}</dd>
           {% endif %}
           <dt>{{ _('Submit At') }}</dt>
-          <dd>{{ datetimeSpan(rdoc._id)|safe }}</dd>
+          <dd>{{ datetimeSpan(rdoc._id, false)|safe }}</dd>
           {% if rdoc.judgeAt %}
             <dt>{{ _('Judged At') }}</dt>
-            <dd>{{ datetimeSpan(rdoc.judgeAt)|safe }}</dd>
+            <dd>{{ datetimeSpan(rdoc.judgeAt, false)|safe }}</dd>
           {% endif %}
           {% if judge_udoc %}
             <dt>{{ _('Judged By') }}</dt>