ui: 优化资源加载

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "2.28.27",
+    "version": "2.28.29",
     "bin": "bin/hydrooj.js",
     "main": "dist/loader.js",
     "typings": "dist/loader.d.ts",

packages/hydrooj/src/model/builtin.ts

@@ -57,7 +57,7 @@ export const PERM = {
     PERM_DELETE_DISCUSSION: 1n << 32n,
     PERM_DELETE_DISCUSSION_SELF: 1n << 33n,
     PERM_REPLY_DISCUSSION: 1n << 34n,
-    PERM_ADD_REACTION: 1 << 62n,
+    PERM_ADD_REACTION: 1n << 62n,
     PERM_EDIT_DISCUSSION_REPLY_SELF: 1n << 36n,
     PERM_DELETE_DISCUSSION_REPLY: 1n << 38n,
     PERM_DELETE_DISCUSSION_REPLY_SELF: 1n << 39n,

packages/hydrooj/src/service/server.ts

@@ -445,7 +445,7 @@ export class Handler extends HandlerCommon {
             disposition: null,
         };
         this.UiContext = cloneDeep(UiContextBase);
-        this.UiContext.cdn_prefix = system.get('server.cdn');
+        if (!process.env.DEV) this.UiContext.cdn_prefix = system.get('server.cdn');
         this.session = {};
         const [xff, xhost] = system.getMany(['server.xff', 'server.xhost']);
         if (xff) this.request.ip = this.request.headers[xff.toLowerCase()] || this.request.ip;

packages/ui-default/backendlib/template.js

@@ -112,7 +112,7 @@ nunjucks.runtime.memberLookup = function memberLookup(obj, val) {
 };
 const env = new Nunjucks();
 env.addGlobal('static_url', (assetName) => {
-  const cdnPrefix = global.Hydro.model.system.get('server.cdn');
+  const cdnPrefix = process.env.DEV ? '/' : global.Hydro.model.system.get('server.cdn');
   if (global.Hydro.ui.manifest[assetName]) {
     return `${cdnPrefix}${global.Hydro.ui.manifest[assetName]}`;
   }

packages/ui-default/build/config/gulp.js

@@ -2,7 +2,6 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable import/no-extraneous-dependencies */
 import _ from 'lodash';
-import moment from 'moment';
 import gulp from 'gulp';
 import log from 'fancy-log';
 import chalk from 'chalk';
@@ -16,7 +15,7 @@ import vjTouch from '../plugins/gulpTouch';
 
 let isInWatchMode = false;
 export const tasks = {};
-const iconTimestamp = moment.utc([2020, 0, 1, 0, 0, 0, 0]).unix();
+const iconTimestamp = 1577836800; // 2020-1-1
 
 function handleWatchChange(name, r = 300) {
   return _.debounce((ev) => {

packages/ui-default/build/config/webpack.js

@@ -71,7 +71,7 @@ export default function (env = {}) {
 
   const config = {
     bail: true,
-    mode: env.production ? 'production' : 'development',
+    mode: (env.production || env.measure) ? 'production' : 'development',
     profile: true,
     context: root(),
     entry: {
@@ -127,7 +127,6 @@ export default function (env = {}) {
         minSize: 80000,
         maxAsyncRequests: 15,
         maxInitialRequests: 10,
-        chunks: 'all',
       },
       moduleIds: env.production ? 'size' : 'named',
       chunkIds: env.production ? 'size' : 'named',
@@ -169,12 +168,10 @@ export default function (env = {}) {
           NODE_ENV: env.production ? '"production"' : '"debug"',
         },
       }),
-      ...env.production
+      ...(env.production || env.measure)
         ? [
           new OptimizeCssAssetsPlugin(),
-          new webpack.optimize.ModuleConcatenationPlugin(),
           new webpack.LoaderOptionsPlugin({ minimize: true }),
-          new webpack.HashedModuleIdsPlugin(),
         ]
         : [],
       new webpack.LoaderOptionsPlugin({

packages/ui-default/components/calendar/index.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import moment from 'moment';
+import moment from 'dayjs';
 import tpl from 'vj/utils/tpl';
 
 export default class Calendar {

packages/ui-default/components/highlighter/highlighter.page.js

@@ -5,37 +5,38 @@ import tpl from 'vj/utils/tpl';
 import i18n from 'vj/utils/i18n';
 
 const highlighterPage = new AutoloadPage('highlighterPage', async () => {
-  const [{ default: prismjs }, [success, format]] = await Promise.all([
+  Promise.all([
     import('./prismjs'),
     UserContext.formatCode ? load() : [true, null],
-  ]);
+  ]).then(([{ default: prismjs }, [success, format]]) => {
-  if (!success) Notification.error(`Astyle load fail: ${format}`);
+    if (!success) Notification.error(`Astyle load fail: ${format}`);
-  function runHighlight($container) {
+    function runHighlight($container) {
-    prismjs.highlightBlocks($container, success ? format : null);
+      prismjs.highlightBlocks($container, success ? format : null);
-    $container.find('pre code').get().forEach((code) => {
+      $container.find('pre code').get().forEach((code) => {
-      const $code = $(code);
+        const $code = $(code);
-      const $root = $code.parent().parent();
+        const $root = $code.parent().parent();
-      const language = ($(code).attr('class') || '').trim();
+        const language = ($(code).attr('class') || '').trim();
-      const m = language.match(/language-([a-z0-9]+)/);
+        const m = language.match(/language-([a-z0-9]+)/);
-      if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
+        if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
-        const id = +m[1].substr(5, m[1].length - 5);
+          const id = +m[1].substr(5, m[1].length - 5);
-        if (Number.isSafeInteger(id)) {
+          if (Number.isSafeInteger(id)) {
-          const $output = $container.find(`pre.language-output${id}`);
+            const $output = $container.find(`pre.language-output${id}`);
-          if ($output.length) {
+            if ($output.length) {
-            const $c = $(document.createElement('div')).addClass('row');
+              const $c = $(document.createElement('div')).addClass('row');
-            $root.after($c);
+              $root.after($c);
-            $root.prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
+              $root.prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
-              .addClass('medium-6 columns sample').appendTo($c);
+                .addClass('medium-6 columns sample').appendTo($c);
-            $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
+              $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
-              .addClass('medium-6 columns sample').appendTo($c);
+                .addClass('medium-6 columns sample').appendTo($c);
+            }
           }
         }
-      }
+      });
-    });
+    }
-  }
 
-  runHighlight($('body'));
+    runHighlight($('body'));
-  $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
+    $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
+  });
 });
 
 export default highlighterPage;

packages/ui-default/components/katex/katex.page.js

@@ -1,7 +1,7 @@
 import { AutoloadPage } from 'vj/misc/Page';
 
 const katexPage = new AutoloadPage('katexPage', () => {
-  import('katex/dist/contrib/auto-render.min.js').then(({ default: katex }) => {
+  import('katex/contrib/auto-render/auto-render').then(({ default: katex }) => {
     function runKatex($containers) {
       $containers.get().forEach((container) => katex(container));
     }

packages/ui-default/components/menu/menu-heading.page.js

@@ -1,5 +1,4 @@
 import { AutoloadPage } from 'vj/misc/Page';
-
 import tpl from 'vj/utils/tpl';
 
 const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
+import moment from 'dayjs';
 import 'jquery-scroll-lock';
 import 'jquery.easing';
 import i18n from 'vj/utils/i18n';

packages/ui-default/components/navigation/navigation.page.js

@@ -12,9 +12,7 @@ function handleNavLogoutClick(ev) {
 }
 
 const navigationPage = new AutoloadPage('navigationPage', () => {
-  if (!document.getElementById('panel') || !document.getElementById('menu')) {
+  if (!document.getElementById('panel') || !document.getElementById('menu')) return;
-    return;
-  }
 
   $(document).on('click', '[name="nav_logout"]', handleNavLogoutClick);
 

packages/ui-default/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
+import moment from 'dayjs';
 import _ from 'lodash';
 
 import substitute from 'vj/utils/substitute';

packages/ui-default/components/signin/signInDialog.page.js

@@ -12,13 +12,9 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   // don't show quick login dialog if in mobile
   if ($('[name="nav_login"]').length > 0) {
     // nav
-    $('[name="nav_login"]').click((ev) => {
+    $('[name="nav_login"]').on('click', (ev) => {
-      if (isBelow(responsiveCutoff.mobile)) {
+      if (isBelow(responsiveCutoff.mobile)) return;
-        return;
+      if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
-      }
-      if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
-        return;
-      }
       signInDialog.show();
       ev.preventDefault();
     });

packages/ui-default/components/smoothscroll/smoothscroll.page.js

@@ -1,5 +1,4 @@
 import 'jquery.easing';
-
 import { AutoloadPage } from 'vj/misc/Page';
 
 const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
@@ -8,13 +7,9 @@ const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
   const OFFSET_HEIGHT = 10 + ($('.nav').height() || 0);
 
   function scrollIfAnchor(href, pushToHistory) {
-    if (!ANCHOR_REGEX.test(href)) {
+    if (!ANCHOR_REGEX.test(href)) return false;
-      return false;
-    }
     const match = document.getElementById(href.slice(1));
-    if (!match) {
+    if (!match) return false;
-      return false;
-    }
     const rect = match.getBoundingClientRect();
     const anchorOffset = window.pageYOffset + rect.top - OFFSET_HEIGHT;
     $('html,body').animate({ scrollTop: anchorOffset }, 200, 'easeOutCubic');
@@ -29,16 +24,12 @@ const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
   }
 
   function delegateAnchors(e) {
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
-      return;
-    }
     const elem = e.target;
     if (
       elem.nodeName === 'A'
       && scrollIfAnchor(elem.getAttribute('href'), true)
-    ) {
+    ) e.preventDefault();
-      e.preventDefault();
-    }
   }
 
   $(document).on('vjPageFullyInitialized', () => {

packages/ui-default/components/tooltip/tooltip.page.js

@@ -14,9 +14,7 @@ function getClosestTooltipElement(element) {
 const tooltipPage = new AutoloadPage('tooltipPage', () => {
   $(document).on('mouseover', (e) => {
     const element = getClosestTooltipElement(e.target);
-    if (!element) {
+    if (!element) return;
-      return;
-    }
     const $element = $(element);
     const options = {};
     if ($element.attr('data-tooltip-pos')) {

packages/ui-default/entry.js

@@ -5,4 +5,17 @@ window.Hydro = {
   node_modules: {},
 };
 
+console.log(
+  '%c%s%c%s',
+  'color:red;font-size:24px;',
+  '   Welcome to\n',
+  'color:blue;font-weight:bold;', `\
+    __  __          __         
+   / / / /_  ______/ /________ 
+  / /_/ / / / / __  / ___/ __ \\
+ / __  / /_/ / /_/ / /  / /_/ /
+/_/ /_/\\__, /\\__,_/_/   \\____/ 
+      /____/                   
+`
+);
 import('./hydro');

packages/ui-default/hydro.js

@@ -1,6 +1,7 @@
 import './modules';
 import 'jquery.transit';
 import _ from 'lodash';
+import Notification from 'vj/components/notification';
 import PageLoader from 'vj/misc/PageLoader';
 import delay from 'vj/utils/delay';
 import base64 from 'vj/utils/base64';
@@ -54,18 +55,13 @@ async function load() {
   ];
   // eslint-disable-next-line no-restricted-syntax
   for (const { page, func, type } of loadSequence) {
-    if (typeof func !== 'function') {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(`The '${type}Loading' function of '${page.name}' is not callable`);
-      }
-      continue;
-    }
     if (process.env.NODE_ENV !== 'production') {
       console.time(`${page.name}: ${type}Loading`);
     }
     try {
       await func(currentPageName);
     } catch (e) {
+      Notification.warn(`Failed to call '${type}Loading' of ${page.name}`);
       console.error(`Failed to call '${type}Loading' of ${page.name}\n${e.stack}`);
     }
     if (process.env.NODE_ENV !== 'production') {
@@ -83,9 +79,7 @@ async function load() {
   }
   await delay(500);
   // eslint-disable-next-line no-restricted-syntax
-  for (const { $element } of sections) {
+  for (const { $element } of sections) $element.trigger('vjLayout');
-    $element.trigger('vjLayout');
-  }
   $(document).trigger('vjPageFullyInitialized');
 }
 

packages/ui-default/package.json

@@ -1,32 +1,33 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.11.13",
+  "version": "4.11.14",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
   "repository": "https://github.com/hydro-dev/Hydro.git",
   "preferUnplugged": true,
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
+    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.3",
+    "@babel/core": "^7.14.5",
-    "@babel/eslint-parser": "7.14.4",
+    "@babel/eslint-parser": "7.14.5",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-export-namespace-from": "^7.14.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-    "@babel/plugin-proposal-function-sent": "^7.12.13",
+    "@babel/plugin-proposal-function-sent": "^7.14.5",
-    "@babel/plugin-proposal-json-strings": "^7.14.2",
+    "@babel/plugin-proposal-json-strings": "^7.14.5",
-    "@babel/plugin-proposal-numeric-separator": "^7.14.2",
+    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
-    "@babel/plugin-proposal-throw-expressions": "^7.12.13",
+    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.4",
+    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-react": "^7.14.5",
-    "@babel/register": "^7.13.16",
+    "@babel/register": "^7.14.5",
-    "@babel/runtime-corejs3": "^7.14.0",
+    "@babel/runtime-corejs3": "^7.14.5",
     "@blueprintjs/core": "^3.45.0",
     "@blueprintjs/icons": "^3.26.1",
     "@blueprintjs/select": "^3.16.4",
     "@hydrooj/utils": "^1.0.20",
+    "@types/katex": "^0.11.0",
     "@undefined-moe/monaco-yaml": "^2.5.0",
     "ansi_up": "^5.0.1",
     "autoprefixer": "^9.8.6",
@@ -38,6 +39,7 @@
     "clipboard": "^2.0.8",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^4.3.0",
+    "dayjs": "^1.10.5",
     "diff-dom": "^4.2.2",
     "echarts": "^5.1.2",
     "emojify.js": "^1.1.0",
@@ -64,7 +66,6 @@
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
     "mini-css-extract-plugin": "^1.6.0",
-    "moment": "^2.29.1",
     "monaco-editor": "^0.24.0",
     "monaco-editor-webpack-plugin": "^3.1.0",
     "nanoid": "^3.1.23",

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

@@ -1,12 +1,9 @@
 import yaml from 'js-yaml';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
-import * as echarts from 'echarts';
 import { NamedPage } from 'vj/misc/Page';
-import { ActionDialog } from 'vj/components/dialog';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
-import base64 from 'vj/utils/base64';
 
 class ProblemPageExtender {
   constructor() {
@@ -208,6 +205,53 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     } catch (e) { }
   }
 
+  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' },
+            { value: UiContext.pdoc.stats.SE, name: 'SE' },
+            { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
+          ],
+        },
+      ],
+    });
+    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',
+      }],
+    });
+  }
+
   $(document).on('click', '[name="problem-sidebar__open-scratchpad"]', (ev) => {
     enterScratchpadMode();
     ev.preventDefault();
@@ -222,50 +266,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   });
   $('[name="problem-sidebar__download').on('click', handleClickDownloadProblem);
   if (UiContext.pdoc.config?.type === 'subjective') loadSubjective();
-
+  if (pagename !== 'contest_detail_problem') initChart();
-  if (pagename === 'contest_detail_problem') return;
-  if (!Object.keys(UiContext.pdoc.stats || {}).length) {
-    $('#submission-status-placeholder').parent().hide();
-    return;
-  }
-  const $status = document.getElementById('submission-status-placeholder');
-  const statusChart = echarts.init($status);
-  statusChart.setOption({
-    tooltip: { trigger: 'item' },
-    series: [
-      {
-        name: 'Submissions',
-        type: 'pie',
-        radius: [10, 70],
-        roseType: 'radius',
-        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' },
-          { value: UiContext.pdoc.stats.SE, name: 'SE' },
-          { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
-        ],
-      },
-    ],
-  });
-  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',
-    }],
-  });
 });
 
 export default page;

packages/ui-default/pages/problem_main.page.js

@@ -16,11 +16,8 @@ const dirtyCategories = [];
 const selections = [];
 
 function setDomSelected($dom, selected) {
-  if (selected) {
+  if (selected) $dom.addClass('selected');
-    $dom.addClass('selected');
+  else $dom.removeClass('selected');
-  } else {
-    $dom.removeClass('selected');
-  }
 }
 
 async function updateSelection(sendRequest = true) {
@@ -113,9 +110,7 @@ function buildCategoryFilter() {
     }
   });
   $(document).on('click', '.widget--category-filter__category-tag', (ev) => {
-    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
+    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
-      return;
-    }
     const category = $(ev.currentTarget).text();
     const treeItem = categories[category];
     // the effect should be cancelSelect if it is shown as selected when clicking
@@ -135,9 +130,7 @@ function buildCategoryFilter() {
     ev.preventDefault();
   });
   $(document).on('click', '.widget--category-filter__subcategory-tag', (ev) => {
-    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
+    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
-      return;
-    }
     const subcategory = $(ev.currentTarget).text();
     const category = $(ev.currentTarget).attr('data-category');
     const treeItem = categories[category].children[subcategory];
@@ -151,12 +144,8 @@ function buildCategoryFilter() {
 function parseCategorySelection() {
   UiContext.currentCategory.split(' ').forEach((cline) => {
     const [category, subcategory] = cline.split(',');
-    if (!categories[category]) {
+    if (!categories[category]) return;
-      return;
+    if (subcategory && !categories[category].children[subcategory]) return;
-    }
-    if (subcategory && !categories[category].children[subcategory]) {
-      return;
-    }
     if (!subcategory) {
       categories[category].select = true;
       dirtyCategories.push({ type: 'category', category });

packages/ui-default/pages/user_detail.page.js

@@ -1,27 +1,16 @@
 import Clipboard from 'clipboard';
-import * as echarts from 'echarts';
+import * as timeago from 'timeago.js';
-import moment from 'moment-timezone';
 import { NamedPage } from 'vj/misc/Page';
 import substitute from 'vj/utils/substitute';
 import Notification from 'vj/components/notification';
 import i18n from 'vj/utils/i18n';
 import base64 from 'vj/utils/base64';
 
-const page = new NamedPage('user_detail', async () => {
+async function initChart() {
-  $('[name="profile_contact_copy"]').get().forEach((el) => {
-    const data = $(el).attr('data-content');
-    const decoded = base64.decode(data);
-    const clip = new Clipboard(el, { text: () => decoded });
-    clip.on('success', () => {
-      Notification.success(substitute(i18n('"{data}" copied to clipboard!'), { data: decoded }), 2000);
-    });
-    clip.on('error', () => {
-      Notification.error(substitute(i18n('Copy "{data}" failed :('), { data: decoded }));
-    });
-  });
   const history = UiContext.udoc?.ratingHistory || [];
   while (history.length > 30) history.shift();
   while (history.length < 30) history.unshift(1500);
+  const echarts = await import('echarts');
   const $dom = document.getElementById('rating-placeholder');
   const chart = echarts.init($dom, undefined);
   chart.setOption({
@@ -35,7 +24,7 @@ const page = new NamedPage('user_detail', async () => {
       right: '1%',
       bottom: '10%',
     },
-    xAxis: { data: history.map((x, i) => moment().add(-30 + i, 'days').fromNow()) },
+    xAxis: { data: history.map((x, i) => timeago.format(new Date().getTime() + (-30 + i) * 1000 * 3600 * 24, i18n('timeago_locale'))) },
     yAxis: { type: 'value', scale: true },
     toolbox: {
       right: 10,
@@ -47,31 +36,29 @@ const page = new NamedPage('user_detail', async () => {
     visualMap: {
       show: false,
       pieces: [{
-        lte: 1000,
+        lte: 2000,
         color: '#AC3B2A',
       }, {
-        gt: 1000,
+        gt: 2000,
-        lte: 1200,
+        lte: 4000,
         color: '#AA069F',
       }, {
-        gt: 1200,
+        gt: 4000,
-        lte: 1400,
+        lte: 7000,
         color: '#FD0100',
       }, {
-        gt: 1400,
+        gt: 7000,
-        lte: 1600,
+        lte: 12000,
         color: '#FC7D02',
       }, {
-        gt: 1600,
+        gt: 12000,
-        lte: 1900,
+        lte: 18000,
         color: '#FBDB0F',
       }, {
-        gt: 1900,
+        gt: 18000,
         color: '#93CE07',
       }],
-      outOfRange: {
+      outOfRange: { color: '#999' },
-        color: '#999',
-      },
     },
     series: {
       name: 'Rating',
@@ -79,6 +66,21 @@ const page = new NamedPage('user_detail', async () => {
       data: history.map((i) => Math.floor(i)),
     },
   });
+}
+
+const page = new NamedPage('user_detail', () => {
+  $('[name="profile_contact_copy"]').get().forEach((el) => {
+    const data = $(el).attr('data-content');
+    const decoded = base64.decode(data);
+    const clip = new Clipboard(el, { text: () => decoded });
+    clip.on('success', () => {
+      Notification.success(substitute(i18n('"{data}" copied to clipboard!'), { data: decoded }), 2000);
+    });
+    clip.on('error', () => {
+      Notification.error(substitute(i18n('Copy "{data}" failed :('), { data: decoded }));
+    });
+  });
+  initChart();
 });
 
 export default page;

packages/ui-default/templates/layout/html5.html

@@ -48,7 +48,7 @@
   </script>
   <script type="text/javascript" src="{{ ('/locale/{0}.js'.format(handler.translate('__id'))) }}"></script>
   <script type="text/javascript" src="/ui-constants.js"></script>
-  <script type="module" src="{{ static_url('hydro.js') }}"></script>
+  <script type="text/javascript" src="{{ static_url('hydro.js') }}"></script>
   {% endif %}
 </body>
 </html>

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hydrooj/utils",
-    "version": "1.0.20",
+    "version": "1.0.21",
     "description": "hydrooj utils",
     "main": "package.json",
     "repository": "https://github.com/hydro-dev/Hydro.git",
@@ -12,7 +12,7 @@
         "js-yaml": "^4.1.0",
         "moment": "^2.29.1",
         "mongodb": "^3.6.9",
-        "systeminformation": "^5.7.4"
+        "systeminformation": "^5.7.6"
     },
     "devDependencies": {
         "@types/fs-extra": "^9.0.11",