✨ feat: add visualization for the number of contest entrants in the last ten contests

Author: baoliay2008

api/routers/contests.py

@@ -1,4 +1,4 @@
-from datetime import datetime
+from datetime import datetime, timedelta
 from typing import List, Optional
 
 from fastapi import APIRouter, Request
@@ -31,6 +31,8 @@ async def contests_user_num_last_ten(
     """
     records = (
         await Contest.find(
+            # In any situation, there must have been more than 10 contests in the last 60 days
+            Contest.startTime > datetime.utcnow() - timedelta(days=60),
             Contest.user_num_us >= 0,
             Contest.user_num_cn >= 0,
             projection_model=ResultOfContestsUserNum,

client/src/components/Footer.jsx

@@ -7,7 +7,7 @@ const Footer = () => {
       <div>
         <span className="footer-title">LCCN Predictor</span>
         <a
-          href="https://twitter.com/intent/tweet?text=lccn.lbao.site%20Leetcode%20weekly%20and%20biweekly%20contest%20rating%20predictor%20@l__bao"
+          href="https://twitter.com/intent/tweet?text=lccn.lbao.site%20Leetcode%20weekly%20and%20biweekly%20contest%20rating%20predictor"
           target="_blank"
           rel="noreferrer noopener"
         >

client/src/components/charts/ContestsUserNumStackedArea.jsx

@@ -0,0 +1,103 @@
+import ReactEcharts from "echarts-for-react";
+
+const ContestsUserNumStackedArea = ({ contests }) => {
+  contests.sort((a, b) => new Date(a.startTime) - new Date(b.startTime));
+  console.log(contests);
+  const titles = contests.map((contest) =>
+    contest.title.replace(/eekly Contest /g, "")
+  );
+  const usNums = contests.map((contest) => contest.user_num_us);
+  const cnNums = contests.map((contest) => contest.user_num_cn);
+  const option = {
+    title: {
+      text: "Number of Contest Entrants",
+      x: "center",
+    },
+    color: ["#ee6666", "#5470c6"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
+    },
+    legend: {
+      data: ["US", "CN"],
+      left: "80%",
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        name: "Contest",
+        // axisLabel: {
+        //     rotate: 75,
+        //   },
+        data: titles,
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "User Count",
+      },
+    ],
+    series: [
+      {
+        name: "CN",
+        type: "line",
+        stack: "Total",
+        label: {
+          show: true,
+          position: "top",
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: cnNums,
+      },
+      {
+        name: "US",
+        type: "line",
+        stack: "Total",
+        label: {
+          show: true,
+          position: "top",
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: usNums,
+      },
+    ],
+  };
+
+  return (
+    <ReactEcharts
+      option={option}
+      // theme="dark"
+      // lazyUpdate={true}
+      // opts={{renderer: "svg"}}
+      // style={{
+      //     height: "25em",
+      // }}
+    />
+  );
+};
+
+export default ContestsUserNumStackedArea;

client/src/pages/Contests/ContestsUserNum.jsx

@@ -0,0 +1,20 @@
+import ContestsUserNumStackedArea from "../../components/charts/ContestsUserNumStackedArea.jsx";
+import useSWR from "swr";
+import { baseUrl } from "../../data/constants.js";
+
+const ContestsUserNum = () => {
+  const { data: contests } = useSWR(
+    `${baseUrl}/contests/user-num-last-ten`,
+    (url) => fetch(url).then((r) => r.json()),
+    { revalidateOnFocus: false }
+  );
+  return (
+    contests && (
+      <div className="container mx-auto text-center w-8/9">
+        <ContestsUserNumStackedArea contests={contests} />
+      </div>
+    )
+  );
+};
+
+export default ContestsUserNum;

client/src/pages/Predicted/PredictedContests.jsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import useSWR from "swr";
 import Pagination from "../../components/Pagination";
 import { baseUrl } from "../../data/constants";
+import ContestsUserNum from "../Contests/ContestsUserNum";
 
 const ContestsTable = ({ contests }) => {
   return (
@@ -123,6 +124,7 @@ const PredictedContest = () => {
 
   return (
     <>
+      <ContestsUserNum />
       {contests ? <ContestsTable contests={contests} /> : undefined}
       <Pagination
         totalCount={totalCount}