Add activity tab (disabled on prod) (#317)

* Add player stats * Add activity chart * Add player charts * types * Fix lock * Little tweaks * Player Stats - Activity * Update packages
cohstats · Nov 23, 2023 · 6ad1313 · 6ad1313
1 parent 15b34a5
commit 6ad1313
Show file tree

Hide file tree

Showing 17 changed files with 1,070 additions and 391 deletions.
diff --git a/__tests__/src/reddit-api.test.ts b/__tests__/src/reddit-api.test.ts
@@ -7,7 +7,7 @@ import redditResponse from "../test-assets/reddit-api-reponse.json";
 
 describe("getLatestCOH3RedditPosts", () => {
   const setupFetchStub = (data: any) => () =>
-    Promise.resolve({ json: () => Promise.resolve(data) });
+    Promise.resolve({ json: () => Promise.resolve(data), ok: true });
 
   beforeAll(() => {
     // @ts-ignore

diff --git a/__tests__/src/utils.test.ts b/__tests__/src/utils.test.ts
@@ -9,6 +9,8 @@ import {
   parseFirstIPFromString,
   cleanXForwardedFor,
   generateExpireTimeStamps,
+  calculateWinRate,
+  convertWeekDayToFullName,
 } from "../../src/utils";
 
 describe("getIconsPathOnCDN", () => {
@@ -243,3 +245,54 @@ describe("generateExpireTimeStamps", () => {
     expect(timeStampMs).toEqual(1690264800000);
   });
 });
+
+describe("calculateWinRate", () => {
+  test("should return 0 for 0 wins and 0 losses", () => {
+    expect(calculateWinRate(0, 0)).toBe(0);
+  });
+
+  test("should return 100 for 1 win and 0 losses", () => {
+    expect(calculateWinRate(1, 0)).toBe(100);
+  });
+
+  test("should return 100 for 2 wins and 0 losses", () => {
+    expect(calculateWinRate(2, 0)).toBe(100);
+  });
+
+  test("should return 100 for 1 win and 1 losses", () => {
+    expect(calculateWinRate(1, 1)).toBe(50);
+  });
+
+  test("should return 100 for 2 wins and 1 losses", () => {
+    expect(calculateWinRate(2, 1)).toBe(66.66666666666666);
+  });
+
+  test("should return 100 for 2 wins and 2 losses", () => {
+    expect(calculateWinRate(2, 2)).toBe(50);
+  });
+
+  test("should return 100 for 3 wins and 2 losses", () => {
+    expect(calculateWinRate(3, 2)).toBe(60);
+  });
+
+  test("should return 0", () => {
+    expect(calculateWinRate(0, 3)).toBe(0);
+  });
+});
+
+describe("convertWeekDayToFullName", () => {
+  test("Test correct conversion", () => {
+    expect(convertWeekDayToFullName("Mo")).toBe("Monday");
+    expect(convertWeekDayToFullName("Tu")).toBe("Tuesday");
+    expect(convertWeekDayToFullName("We")).toBe("Wednesday");
+    expect(convertWeekDayToFullName("Th")).toBe("Thursday");
+    expect(convertWeekDayToFullName("Fr")).toBe("Friday");
+    expect(convertWeekDayToFullName("Sa")).toBe("Saturday");
+    expect(convertWeekDayToFullName("Su")).toBe("Sunday");
+  });
+
+  test("Test incorrect conversion", () => {
+    expect(convertWeekDayToFullName("M")).toBe("Invalid day abbreviation");
+    expect(convertWeekDayToFullName("T")).toBe("Invalid day abbreviation");
+  });
+});
diff --git a/components/charts/charts-components-utils.ts b/components/charts/charts-components-utils.ts
@@ -1,3 +1,4 @@
+// https://github.com/plouc/nivo/blob/master/website/src/theming/theme.ts#L181-L284
 import { raceType } from "../../src/coh3/coh3-types";
 
 export const getNivoTooltipTheme = (colorScheme: "dark" | "light") => {

diff --git a/package.json b/package.json
@@ -45,14 +45,15 @@
     "@mantine/next": "6.0.21",
     "@mantine/notifications": "6.0.21",
     "@mantine/spotlight": "6.0.21",
-    "@nivo/bar": "0.83.1",
-    "@nivo/core": "0.83.1",
-    "@nivo/geo": "0.83.1",
-    "@nivo/heatmap": "0.83.1",
-    "@nivo/line": "0.83.1",
-    "@nivo/pie": "0.83.1",
-    "@sentry/nextjs": "7.80.1",
-    "@tabler/icons-react": "2.40.0",
+    "@nivo/bar": "0.84.0",
+    "@nivo/calendar": "0.84.0",
+    "@nivo/core": "0.84.0",
+    "@nivo/geo": "0.84.0",
+    "@nivo/heatmap": "0.84.0",
+    "@nivo/line": "0.84.0",
+    "@nivo/pie": "0.84.0",
+    "@sentry/nextjs": "7.81.1",
+    "@tabler/icons-react": "2.42.0",
     "chart.js": "4.4.0",
     "dayjs": "1.11.10",
     "firebase": "10.6.0",
@@ -61,32 +62,32 @@
     "json-2-csv": "5.0.1",
     "lodash": "4.17.21",
     "mantine-datatable": "6.0.5",
-    "next": "14.0.2",
+    "next": "14.0.3",
     "nprogress": "0.2.0",
-    "octokit": "3.1.1",
+    "octokit": "3.1.2",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",
     "react-dom": "18.2.0",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
-    "@edgio/cli": "7.4.1",
-    "@edgio/core": "7.4.1",
-    "@edgio/devtools": "7.4.1",
-    "@edgio/next": "7.4.1",
-    "@edgio/prefetch": "7.4.1",
-    "@edgio/react": "7.4.1",
+    "@edgio/cli": "7.4.2",
+    "@edgio/core": "7.4.2",
+    "@edgio/devtools": "7.4.2",
+    "@edgio/next": "7.4.2",
+    "@edgio/prefetch": "7.4.2",
+    "@edgio/react": "7.4.2",
     "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.1.0",
-    "@types/jest": "29.5.8",
+    "@testing-library/react": "14.1.2",
+    "@types/jest": "29.5.10",
     "@types/node": "18.18.8",
     "@types/nprogress": "0.2.3",
     "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
+    "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
-    "eslint": "8.53.0",
-    "eslint-config-next": "13.5.6",
+    "eslint": "8.54.0",
+    "eslint-config-next": "14.0.3",
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",

diff --git a/pages/players/[...playerID].tsx b/pages/players/[...playerID].tsx
@@ -1,9 +1,56 @@
 import { processPlayerInfoAPIResponse } from "../../src/players/standings";
-import { getPlayerCardInfo, getPlayerRecentMatches } from "../../src/apis/coh3stats-api";
+import {
+  getPlayerCardInfo,
+  getPlayerRecentMatches,
+  getPlayerCardStats,
+} from "../../src/apis/coh3stats-api";
 import { GetServerSideProps } from "next";
+import { getReplaysForPlayer, ProcessReplaysData } from "../../src/apis/cohdb-api";
 
 import PlayerCard from "../../screens/players";
-import { getReplaysForPlayer, ProcessReplaysData } from "../../src/apis/cohdb-api";
+import { PlayerProfileCOHStats, ProcessedCOHPlayerStats } from "../../src/coh3/coh3-types";
+
+const ProcessPlayerCardStatsData = (
+  playerStatsData: PlayerProfileCOHStats,
+): ProcessedCOHPlayerStats => {
+  const processedActivityByDate = [];
+  for (const [date, value] of Object.entries(playerStatsData.stats?.activityByDate || {})) {
+    processedActivityByDate.push({
+      day: date,
+      value: value.w - value.l,
+      wins: value.w,
+      losses: value.l,
+    });
+  }
+
+  const processedActivityByHour = [];
+  for (const [hour, value] of Object.entries(playerStatsData.stats?.activityByHour || {})) {
+    processedActivityByHour.push({
+      hour,
+      value: value.w + value.l,
+      wins: value.w,
+      losses: value.l,
+    });
+  }
+
+  const processedActivityByDayOfWeek = [];
+  for (const [dayOfWeek, value] of Object.entries(
+    playerStatsData.stats?.activityByWeekDay || {},
+  )) {
+    processedActivityByDayOfWeek.push({
+      day: dayOfWeek,
+      value: value.w + value.l,
+      wins: value.w,
+      losses: value.l,
+    });
+  }
+
+  return {
+    activityByWeekDay: processedActivityByDayOfWeek,
+    activityByDate: processedActivityByDate,
+    activityByHour: processedActivityByHour,
+  };
+};
 
 export const getServerSideProps: GetServerSideProps<any, { playerID: string }> = async ({
   params,
@@ -19,6 +66,7 @@ export const getServerSideProps: GetServerSideProps<any, { playerID: string }> =
   // const viewStandings = view === "standings";
 
   let playerData = null;
+  let playerStatsData = null;
   let playerMatchesData = null;
   let error = null;
   let replaysData = null;
@@ -30,6 +78,7 @@ export const getServerSideProps: GetServerSideProps<any, { playerID: string }> =
 
   try {
     const PromisePlayerCardData = getPlayerCardInfo(playerID, true, xff);
+    const PromisePlayerCardStatsData = getPlayerCardStats(playerID, xff);
     const PromiseReplaysData = isReplaysPage
       ? getReplaysForPlayer(playerID, start as string | undefined)
       : Promise.resolve();
@@ -38,12 +87,17 @@ export const getServerSideProps: GetServerSideProps<any, { playerID: string }> =
       ? getPlayerRecentMatches(playerID, xff)
       : Promise.resolve();
 
-    const [playerAPIData, PlayerMatchesAPIData, replaysAPIDAta] = await Promise.all([
-      PromisePlayerCardData,
-      PromisePlayerMatchesData,
-      PromiseReplaysData,
-    ]);
+    const [playerAPIData, playerCardStatsData, PlayerMatchesAPIData, replaysAPIDAta] =
+      await Promise.all([
+        PromisePlayerCardData,
+        PromisePlayerCardStatsData,
+        PromisePlayerMatchesData,
+        PromiseReplaysData,
+      ]);
 
+    playerStatsData = playerCardStatsData?.playerStats
+      ? ProcessPlayerCardStatsData(playerCardStatsData.playerStats)
+      : null;
     playerData = playerAPIData ? processPlayerInfoAPIResponse(playerAPIData) : null;
     playerMatchesData = viewPlayerMatches ? PlayerMatchesAPIData : null;
     replaysData = isReplaysPage ? ProcessReplaysData(replaysAPIDAta) : null;
@@ -54,7 +108,14 @@ export const getServerSideProps: GetServerSideProps<any, { playerID: string }> =
   }
 
   return {
-    props: { playerID, playerDataAPI: playerData, error, playerMatchesData, replaysData }, // will be passed to the page component as props
+    props: {
+      playerID,
+      playerDataAPI: playerData,
+      error,
+      playerMatchesData,
+      playerStatsData,
+      replaysData,
+    }, // will be passed to the page component as props
   };
 };
 

diff --git a/pages/tests/ssr.tsx b/pages/tests/ssr.tsx
@@ -4,11 +4,12 @@
 
 import { NextPage } from "next";
 import React from "react";
-import { doc, getDoc, getFirestore } from "firebase/firestore";
+// import { doc, getDoc, getFirestore } from "firebase/firestore";
 import { DataTable } from "mantine-datatable";
 import config from "../../config";
+import { getLatestCOH3RedditPosts } from "../../src/apis/reddit-api";
 
-const SSR: NextPage = ({ data, tableData }: any) => {
+const SSR: NextPage = ({ data, tableData, redditPosts }: any) => {
   return (
     <>
       ENV NAME |{config.getEdgioEnvName()}| IS DEV: |{`${config.isDevEnv()}`}|<br />
@@ -19,17 +20,21 @@ const SSR: NextPage = ({ data, tableData }: any) => {
         columns={[{ accessor: "name" }, { accessor: "age" }]}
         records={tableData}
       ></DataTable>
+      REDDIT DATA:
+      {JSON.stringify(redditPosts)}
     </>
   );
 };
 
 export async function getServerSideProps() {
-  const docRef = doc(getFirestore(), "tests", "document");
-  const docSnap = await getDoc(docRef);
+  // const docRef = doc(getFirestore(), "tests", "document");
+  // const docSnap = await getDoc(docRef);
+  //
+  // if (docSnap.exists()) {
+  //   console.log(docSnap.data());
+  // }
 
-  if (docSnap.exists()) {
-    console.log(docSnap.data());
-  }
+  const redditPosts = await getLatestCOH3RedditPosts();
 
   const tableData = [
     { name: " thomas", age: 4 },
@@ -38,7 +43,7 @@ export async function getServerSideProps() {
     { name: " thomas", age: 4 },
   ];
 
-  return { props: { data: docSnap.data(), tableData } };
+  return { props: { data: null, tableData, redditPosts } };
 }
 
 export default SSR;