🔄 refactor: move chart plotting code to a separate directory for cleaner code

Author: baoliay2008

client/src/components/charts/ContestsUserNumStackedArea.jsx

@@ -2,7 +2,7 @@ import ReactEcharts from "echarts-for-react";
 
 const ContestsUserNumStackedArea = ({ contests }) => {
   contests.sort((a, b) => new Date(a.startTime) - new Date(b.startTime));
-  console.log(contests);
+  // console.log(contests);
   const titles = contests.map((contest) =>
     contest.title.replace(/eekly Contest /g, "")
   );

client/src/components/charts/QuestionFinishedChart.jsx

@@ -0,0 +1,113 @@
+import ReactEcharts from "echarts-for-react";
+
+const QuestionFinishedChart = ({ questionsRaw }) => {
+  // console.log("QuestionFinishedChart questionsRaw=", questionsRaw);
+  const questions = [...questionsRaw].sort((a, b) =>
+    a.credit === b.credit ? a.qi - b.qi : a.credit - b.credit
+  );
+
+  const real_time_count = [["Minute", "Question", "Count"]];
+  for (let i = 1; i <= questions.length; i++) {
+    for (let j = 1; j <= questions[0].real_time_count?.length; j++) {
+      real_time_count.push([
+        j,
+        `Q${i}`,
+        questions[i - 1].real_time_count[j - 1],
+      ]);
+    }
+  }
+
+  const questionsId = ["Q1", "Q2", "Q3", "Q4"];
+  const datasetWithFilters = [];
+  const seriesList = [];
+
+  questionsId.forEach((id) => {
+    const datasetId = "dataset_" + id;
+    datasetWithFilters.push({
+      id: datasetId,
+      fromDatasetId: "dataset_raw",
+      transform: {
+        type: "filter",
+        config: {
+          and: [{ dimension: "Question", "=": id }],
+        },
+      },
+    });
+    seriesList.push({
+      type: "line",
+      datasetId: datasetId,
+      showSymbol: false,
+      name: id,
+      endLabel: {
+        show: true,
+        formatter: function (params) {
+          return params.value[1] + ": " + params.value[2];
+        },
+      },
+      labelLayout: {
+        moveOverlap: "shiftY",
+      },
+      emphasis: {
+        focus: "series",
+      },
+      encode: {
+        x: "Minute",
+        y: "Count",
+        label: ["Question", "Count"],
+        itemName: "Minute",
+        tooltip: ["Count"],
+      },
+    });
+  });
+
+  const option = {
+    animation: true,
+    animationDuration: 10000,
+    dataset: [
+      {
+        id: "dataset_raw",
+        source: real_time_count,
+      },
+      ...datasetWithFilters,
+    ],
+    title: {
+      text: "Question Finished Count",
+      x: "center",
+    },
+    tooltip: {
+      order: "valueDesc",
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      name: "Minute",
+    },
+    yAxis: {
+      name: "Accepted",
+      // axisLabel: {
+      //   rotate: 45,
+      //   margin: 1
+      // }
+    },
+    grid: {
+      left: "70em",
+      right: "70em",
+    },
+    series: seriesList,
+  };
+
+  // console.log("question option= ", option);
+  return (
+    <ReactEcharts
+      option={option}
+      // theme="dark"
+      // lazyUpdate={true}
+      // opts={{renderer: "svg"}}
+      style={{
+        height: "25em",
+      }}
+    />
+  );
+};
+
+export default QuestionFinishedChart;

client/src/components/charts/RealTimeRankChart.jsx

@@ -0,0 +1,105 @@
+import ReactEcharts from "echarts-for-react";
+
+const RealTimeRankChart = ({ user, rankList }) => {
+  if (!rankList) return null;
+
+  const realTimeRank = [["Minute", "Username", "Rank"]];
+  for (let j = 1; j <= rankList.length; j++) {
+    realTimeRank.push([j, user.username, rankList[j - 1]]);
+  }
+
+  const users = [user.username];
+  const datasetWithFilters = [];
+  const seriesList = [];
+
+  // console.log("users", users);
+  // console.log("realTimeRank", realTimeRank);
+
+  users.forEach((username) => {
+    const datasetId = "dataset_" + username;
+    datasetWithFilters.push({
+      id: datasetId,
+      fromDatasetId: "dataset_raw",
+      transform: {
+        type: "filter",
+        config: {
+          and: [{ dimension: "Username", "=": username }],
+        },
+      },
+    });
+    seriesList.push({
+      type: "line",
+      datasetId: datasetId,
+      showSymbol: false,
+      name: username,
+      endLabel: {
+        show: true,
+        formatter: function (params) {
+          return params.value[1] + ": " + params.value[2];
+        },
+      },
+      labelLayout: {
+        moveOverlap: "shiftY",
+      },
+      emphasis: {
+        focus: "series",
+      },
+      encode: {
+        x: "Minute",
+        y: "Rank",
+        label: ["Username", "Rank"],
+        itemName: "Minute",
+        tooltip: ["Rank"],
+      },
+    });
+  });
+
+  const option = {
+    animationDuration: 10000,
+    dataset: [
+      {
+        id: "dataset_raw",
+        source: realTimeRank,
+      },
+      ...datasetWithFilters,
+    ],
+    title: {
+      text: "User Real Time Rank",
+      x: "center",
+    },
+    tooltip: {
+      order: "valueDesc",
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      name: "Minute",
+    },
+    yAxis: {
+      name: "Rank",
+      axisLabel: {
+        rotate: 45,
+        margin: 1,
+      },
+    },
+    grid: {
+      // left:"70em",
+      right: "70em",
+    },
+    series: seriesList,
+  };
+
+  // console.log("realTimeRank option=", option);
+
+  return (
+    <ReactEcharts
+      option={option}
+      // theme="dark"
+      // lazyUpdate={true}
+      // opts={{renderer: "svg"}}
+      style={{ height: "25em" }}
+    />
+  );
+};
+
+export default RealTimeRankChart;