@xcpcio/board-app 0.46.3 → 0.47.0

package/src/components/rating/RatingTable.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { MultiSelect } from "vue-search-select";
+
+import type { Rating, SelectOptionItem } from "@xcpcio/core";
+
+import { Pagination } from "~/composables/pagination";
+
+interface FilterOptions {
+  organizations: string[];
+  members: string[];
+}
+
+const props = defineProps<{
+  rating: Rating,
+  pageSize?: number;
+  removeBorder?: boolean;
+}>();
+
+const rating = computed(() => props.rating);
+
+const filterOptions = ref<FilterOptions>({
+  organizations: [],
+  members: [],
+});
+
+const orgOptions = computed(() => {
+  let res = rating.value.users.map((u) => {
+    return u.organization;
+  });
+  res = Array.from(new Set(res));
+
+  return res.map((o) => {
+    return {
+      value: o,
+      text: o,
+    };
+  });
+});
+
+const orgSelectedItems = ref<Array<SelectOptionItem>>([]);
+const orgLastSelectItem = ref({});
+function orgOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  orgSelectedItems.value = selectedItems;
+  orgLastSelectItem.value = lastSelectItem;
+}
+
+// const memberOptions = computed(() => {
+//   const se = new Set();
+//   rating.value.users.forEach((u) => {
+//     return u.members.forEach((m) => {
+//       se.add(m.name);
+//     });
+//   });
+//   const res = Array.from(se);
+
+//   return res.map((o) => {
+//     return {
+//       value: o,
+//       text: o,
+//     };
+//   });
+// });
+
+// const memberSelectedItems = ref<Array<SelectOptionItem>>([]);
+// const memberLastSelectItem = ref({});
+
+// function memberOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+//   memberSelectedItems.value = selectedItems;
+//   memberLastSelectItem.value = lastSelectItem;
+// }
+
+const users = computed(() => {
+  const us = rating.value.users;
+  return us.filter((u) => {
+    const o = filterOptions.value;
+
+    if (o.organizations.length === 0
+    && o.members.length === 0) {
+      return true;
+    }
+
+    for (const org of o.organizations) {
+      if (org === u.organization) {
+        return true;
+      }
+    }
+
+    for (const member of o.members) {
+      for (const m of u.members) {
+        if (member === m.name) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  });
+});
+
+function onFilter() {
+  const newFilterOptions: FilterOptions = {
+    organizations: [],
+    members: [],
+  };
+
+  newFilterOptions.organizations = orgSelectedItems.value.map(o => o.value);
+  // newFilterOptions.members = memberSelectedItems.value.map(o => o.value);
+
+  filterOptions.value = newFilterOptions;
+}
+
+const p = ref(new Pagination());
+
+p.value.currentPage = 0;
+p.value.pageSize = props.pageSize ?? 20;
+p.value.totalSize = users.value.length;
+
+watch(users, () => {
+  p.value.totalSize = users.value.length;
+
+  if (p.value.currentPage >= p.value.totalPage) {
+    p.value.currentPage = p.value.totalPage - 1;
+  }
+});
+
+const currentUsers = computed(() => {
+  return users.value.slice(p.value.currentLeft, p.value.currentRight);
+});
+</script>
+
+<template>
+  <section>
+    <div
+      mx-auto w-full
+    >
+      <div
+        relative overflow-hidden
+        bg-white dark:bg-gray-800
+        :class="{
+          'shadow-md': props.removeBorder !== true,
+          'sm:rounded-sm': props.removeBorder !== true,
+        }"
+      >
+        <div
+          space-y-3
+          flex flex-col
+          px-4 py-3
+          lg:flex-row lg:items-center lg:justify-between
+          lg:space-x-4 lg:space-y-0
+        >
+          <div
+            flex flex-shrink-0 flex-col
+            md:flex-row md:items-center
+            lg:justify-end space-y-3
+            md:space-x-3 md:space-y-0
+          >
+            <div
+              w-108
+            >
+              <MultiSelect
+                :options="orgOptions"
+                :selected-options="orgSelectedItems"
+                placeholder="Organization"
+                @select="orgOnSelect"
+              />
+            </div>
+
+            <!-- <div
+              w-68
+            >
+              <MultiSelect
+                :options="memberOptions"
+                :selected-options="memberSelectedItems"
+                placeholder="Member"
+                @select="memberOnSelect"
+              />
+            </div> -->
+
+            <div>
+              <button
+                type="button"
+                class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+                @click="onFilter"
+              >
+                <div
+                  i-material-symbols-search
+                  mr-1 h-5 w-5
+                />
+                Filter
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="overflow-x-auto"
+        >
+          <table
+            class="w-full text-left text-sm text-gray-500 dark:text-gray-400"
+            font-medium font-mono
+          >
+            <thead
+              text-xs
+              bg-gray-50 text-gray-700
+              dark:bg-gray-700 dark:text-gray-400
+            >
+              <tr>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                  w-68
+                >
+                  Organization
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                  w-128
+                >
+                  TeamName
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                  w-68
+                >
+                  Members
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Rating
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  MaxRating
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  MinRating
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <template
+                v-for="(u, ix) in currentUsers"
+                :key="u.id"
+              >
+                <RatingUserUI
+                  :ix="ix"
+                  :rating-user="u"
+                />
+              </template>
+            </tbody>
+          </table>
+        </div>
+
+        <TablePagination
+          v-model:pagination="p"
+        />
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/rating/RatingUserUI.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { RatingUser } from "@xcpcio/core";
+import { RatingUtility } from "@xcpcio/core";
+
+import "./rating.less";
+
+const props = defineProps<{
+  ix: number,
+  ratingUser: RatingUser,
+}>();
+
+const u = computed(() => props.ratingUser);
+
+const hiddenRatingInfoModal = ref(true);
+function onClickRatingInfoModal() {
+  hiddenRatingInfoModal.value = false;
+}
+</script>
+
+<template>
+  <tr
+    class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+  >
+    <td
+      class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+    >
+      {{ u.organization }}
+    </td>
+    <td>
+      <div
+        class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+        cursor-pointer
+        :class="RatingUtility.getRatingLevelClass(u.rating)"
+        @click="onClickRatingInfoModal"
+      >
+        {{ u.name }}
+      </div>
+
+      <div>
+        <RatingInfoModal
+          v-if="!hiddenRatingInfoModal"
+          v-model:isHidden="hiddenRatingInfoModal"
+          :rating-user="u"
+        />
+      </div>
+    </td>
+    <td
+      class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+    >
+      {{ u.members.map(m => m.name.trim()).join(" ") }}
+    </td>
+    <td
+      class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+    >
+      <RatingBadge
+        :rating="u.rating"
+      />
+    </td>
+    <td
+      class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+    >
+      <RatingBadge
+        :rating="u.maxRating"
+      />
+    </td>
+    <td
+      class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+    >
+      <RatingBadge
+        :rating="u.minRating"
+      />
+    </td>
+  </tr>
+</template>

package/src/components/rating/rating.less

@@ -0,0 +1,68 @@
+.recent-actions {
+  margin: 1em;
+  font-size: 0.9em;
+}
+
+.rated-user {
+  font-family: helvetica neue, Helvetica, Arial, sans-serif;
+  text-decoration: none;
+  font-weight: 700;
+  display: inline-block;
+}
+
+.user-black {
+  color: #000;
+  font-weight: 400;
+}
+
+.user-legendary {
+  color: red;
+}
+
+.user-legendary::first-letter {
+  color: #000;
+}
+
+.legendary-user-first-letter {
+  color: #000;
+}
+
+.user-red {
+  color: red;
+}
+
+.user-fire {
+  color: red;
+}
+
+.user-yellow {
+  color: #bb0;
+}
+
+.user-violet {
+  color: #a0a;
+}
+
+.user-orange {
+  color: #ff8c00;
+}
+
+.user-blue {
+  color: blue;
+}
+
+.user-cyan {
+  color: #03a89e;
+}
+
+.user-green {
+  color: green;
+}
+
+.user-gray {
+  color: gray;
+}
+
+.user-admin {
+  color: #000;
+}

package/src/components.d.ts

@@ -35,6 +35,12 @@ declare module 'vue' {
     ProblemBlock: typeof import('./components/board/ProblemBlock.vue')['default']
     ProblemInfoModal: typeof import('./components/board/ProblemInfoModal.vue')['default']
     Progress: typeof import('./components/board/Progress.vue')['default']
+    Rating: typeof import('./components/rating/Rating.vue')['default']
+    RatingBadge: typeof import('./components/rating/RatingBadge.vue')['default']
+    RatingIndexUI: typeof import('./components/rating/RatingIndexUI.vue')['default']
+    RatingInfoModal: typeof import('./components/rating/RatingInfoModal.vue')['default']
+    RatingTable: typeof import('./components/rating/RatingTable.vue')['default']
+    RatingUserUI: typeof import('./components/rating/RatingUserUI.vue')['default']
     RightArrowIcon: typeof import('./components/icon/RightArrowIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package/src/composables/constant.ts

@@ -1,4 +1,5 @@
 export const TITLE_SUFFIX = "Board - XCPCIO";
+export const RATING_TITLE_SUFFIX = "Rating - XCPCIO";
 export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
 export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
 export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";
@@ -19,6 +20,11 @@ export const DATA_HOST = computed(() => {
   return window.DATA_HOST;
 });
 
+export const RATING_DATA_HOST = computed(() => {
+  const dataHost = DATA_HOST.value;
+  return dataHost.replace("/data/", "/rating-data/");
+});
+
 export const DATA_REGION = computed(() => {
   if (!window) {
     return "";

package/src/composables/rating.ts

@@ -0,0 +1,217 @@
+import { RatingLevelToString, RatingUtility } from "@xcpcio/core";
+import type { RatingUser } from "@xcpcio/core";
+
+interface RatingGraphData {
+  x: number;
+  y: number;
+  rank: number;
+  diffRating: string;
+  ratingTitle: string;
+  contestName: string;
+  contestTime: string;
+  teamName: string;
+  link?: string;
+}
+
+function getDiffRating(oldRating: number, newRating: number) {
+  const diff = newRating - oldRating;
+  if (newRating > oldRating) {
+    return `+${diff.toString()}`;
+  } else {
+    return diff.toString();
+  }
+}
+
+export function getRatingGraphOptions(
+  ratingUser: RatingUser,
+) {
+  const data: RatingGraphData[] = [];
+
+  {
+    let oldRating = 0;
+    for (const h of ratingUser.ratingHistories) {
+      const d: RatingGraphData = {} as RatingGraphData;
+      d.x = h.contestTime.unix() * 1000;
+      d.y = h.rating;
+      d.diffRating = getDiffRating(oldRating, h.rating);
+      d.rank = h.rank;
+      d.contestName = h.contestName;
+      d.link = `/board/${h.contestID}`;
+      d.contestTime = h.contestTime.format("YYYY-MM-DD HH:mm:ss");
+      d.teamName = h.teamName;
+      d.ratingTitle = RatingLevelToString[RatingUtility.getRatingLevel(h.rating)];
+      data.push(d);
+
+      oldRating = h.rating;
+    }
+  }
+
+  let tickPositions = [
+    1200,
+    1400,
+    1600,
+    1900,
+    2100,
+    2300,
+    2400,
+    2600,
+    3000,
+  ];
+
+  {
+    const gap = 100;
+    let minRating = Math.max(0, ratingUser.minRating - gap);
+    let maxRating = ratingUser.maxRating + gap;
+
+    for (let i = 0; i < tickPositions.length; ++i) {
+      if (tickPositions[i] > maxRating) {
+        maxRating = tickPositions[i];
+        break;
+      }
+    }
+    for (let i = tickPositions.length - 1; i >= 0; --i) {
+      if (tickPositions[i] < minRating) {
+        minRating = tickPositions[i];
+        break;
+      }
+    }
+    if (minRating < 1200) {
+      tickPositions = [minRating, ...tickPositions];
+    }
+    if (maxRating > 3000) {
+      tickPositions.push(maxRating);
+    }
+
+    tickPositions = tickPositions.filter(
+      x => x >= minRating && x <= maxRating,
+    );
+  }
+
+  const options = {
+    chart: {
+      type: "line",
+      height: "408px",
+    },
+    title: {
+      text: null,
+    },
+    xAxis: {
+      tickWidth: 0,
+      gridLineWidth: 0.4,
+      minRange: 30 * 24 * 60 * 60 * 1000,
+      type: "datetime",
+      showFirstLabel: true,
+      showLastLabel: true,
+      dateTimeLabelFormats: {
+        month: "%b %Y",
+      },
+    },
+    yAxis: {
+      showEmpty: false,
+      showFirstLabel: false,
+      showLastLabel: false,
+      tickPositions,
+      tickWidth: 0,
+      gridLineWidth: 0.6,
+      labels: {
+        enabled: true,
+        format: "{value}",
+      },
+      title: {
+        text: null,
+      },
+      plotBands: [
+        {
+          from: 0,
+          to: 1199,
+          color: "#CCCCCC",
+        },
+        {
+          from: 1200,
+          to: 1399,
+          color: "#98FA87",
+        },
+        {
+          from: 1400,
+          to: 1599,
+          color: "#90DABD",
+        },
+        {
+          from: 1600,
+          to: 1899,
+          color: "#A9ACF9",
+        },
+        {
+          from: 1900,
+          to: 2099,
+          color: "#EF91F9",
+        },
+        {
+          from: 2100,
+          to: 2299,
+          color: "#F7CD91",
+        },
+        {
+          from: 2300,
+          to: 2399,
+          color: "#F5BD67",
+        },
+        {
+          from: 2400,
+          to: 2599,
+          color: "#Ef7F7B",
+        },
+        {
+          from: 2600,
+          to: 2999,
+          color: "#EB483F",
+        },
+        {
+          from: 3000,
+          to: 0x3F3F3F3F,
+          color: "#9C1E14",
+        },
+      ],
+    },
+    credits: {
+      enabled: false,
+    },
+    plotOptions: {
+      line: {
+        color: "#ffec3d",
+        dataLabels: {
+          enabled: false,
+        },
+        enableMouseTracking: true,
+        marker: {
+          enabled: true,
+          fillColor: "#fffb8f",
+        },
+      },
+    },
+    tooltip: {
+      enabled: true,
+      headerFormat: "",
+      useHTML: true,
+      shared: true,
+      shadow: true,
+      followPointer: false,
+      followTouchMove: false,
+      pointFormat: `= {point.y} ({point.diffRating}), {point.ratingTitle}
+              <br/>Rank: {point.rank}
+              <br/>TeamName: {point.teamName}
+              <br/>ContestTime: {point.contestTime}
+              <br/><a href="{point.link}">{point.contestName}</a>
+              <br/>`,
+    },
+    series: [
+      {
+        showInLegend: false,
+        allowPointSelect: true,
+        // name: ratingUser.name,
+        data,
+      },
+    ],
+  };
+  return options;
+}

package/src/pages/rating/[...all].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const id = route.path.split("/").pop() as string;
+</script>
+
+<template>
+  <div>
+    <Rating
+      :id="id"
+    />
+  </div>
+</template>