Support for country rank graph

src/adapters/akatsuki-api/profileHistory.ts

@@ -1,16 +1,55 @@
 import axios from "axios"
 import { GameMode } from "../../gameModes"
-import { captureRejectionSymbol } from "events"
-import { UNSAFE_useRouteId } from "react-router-dom"
+
+export enum ProfileHistoryType {
+  GlobalRank = "global_rank",
+  CountryRank = "country_rank",
+  PP = "pp",
+}
+
+const getCaptureType = (historyType: ProfileHistoryType): string => {
+  switch (historyType) {
+    case ProfileHistoryType.GlobalRank:
+      return "rank"
+    case ProfileHistoryType.CountryRank:
+      return "rank"
+    case ProfileHistoryType.PP:
+      return "pp"
+    default:
+      throw new Error("Invalid capture type")
+  }
+}
+
+const getCaptureValue = (
+  requestCapture: any,
+  historyType: ProfileHistoryType
+): number => {
+  switch (historyType) {
+    case ProfileHistoryType.GlobalRank:
+      return requestCapture.overall
+    case ProfileHistoryType.CountryRank:
+      return requestCapture.country
+    case ProfileHistoryType.PP:
+      return requestCapture.pp
+    default:
+      throw new Error("Invalid capture type")
+  }
+}
 
 interface ProfileHistoryRequest {
-  type: "rank" | "pp"
+  // TODO: this abstraction does not match that of the
+  // profile-history-service backend, but we do so to
+  // increase functionality. We should migrate to new
+  // APIs on the backend to allow this flexibility.
+  // TODO: what about multiple params in one chart?
+  type: ProfileHistoryType
+
   userId: number
   akatsukiMode: GameMode // NOTE: includes rx/ap
 }
+
 export interface ProfileHistoryCapture {
-  overall: number
-  country: number
+  value: number
   capturedAt: Date
 }
 
@@ -29,18 +68,18 @@ export const fetchUserProfileHistory = async (
 ): Promise<ProfileHistoryResponse> => {
   try {
     const response = await profileHistoryApiInstance.get(
-      `/v1/profile-history/${request.type}`,
+      `/v1/profile-history/${getCaptureType(request.type)}`,
       {
         params: {
           user_id: request.userId,
           mode: request.akatsukiMode,
         },
       }
     )
+
     return {
       captures: response.data.data.captures.map((capture: any) => ({
-        overall: capture.overall,
-        country: capture.country,
+        value: getCaptureValue(capture, request.type),
         capturedAt: new Date(capture.captured_at),
       })),
       mode: response.data.data.mode,

src/components/UserProfileHistoryGraph.tsx

@@ -3,8 +3,9 @@ import { AxisOptions, Chart, Datum, Series } from "react-charts"
 import { GameMode, RelaxMode } from "../gameModes"
 import {
   fetchUserProfileHistory,
-  ProfileHistoryCapture,
+  ProfileHistoryType,
   ProfileHistoryResponse,
+  ProfileHistoryCapture,
 } from "../adapters/akatsuki-api/profileHistory"
 import { Alert } from "@mui/material"
 
@@ -15,7 +16,7 @@ export const UserProfileHistoryGraph = ({
   relaxMode,
 }: {
   userId: number
-  type: "rank" | "pp"
+  type: ProfileHistoryType
   gameMode: GameMode
   relaxMode: RelaxMode
 }) => {
@@ -28,7 +29,7 @@ export const UserProfileHistoryGraph = ({
     ;(async () => {
       try {
         const response = await fetchUserProfileHistory({
-          type: type,
+          type,
           userId,
           akatsukiMode: gameMode + relaxMode * 4,
         })
@@ -48,7 +49,7 @@ export const UserProfileHistoryGraph = ({
         ? profileHistoryResponse.captures.map(
             (capture: ProfileHistoryCapture) => ({
               date: capture.capturedAt,
-              performance: capture.overall,
+              value: capture.value,
             })
           )
         : [],
@@ -71,7 +72,7 @@ export const UserProfileHistoryGraph = ({
   >(
     () => [
       {
-        getValue: (datum) => datum.performance,
+        getValue: (datum) => datum.value,
         elementType: "line",
         scaleType: "linear",
       },

src/pages/ProfilePage.tsx

@@ -15,6 +15,7 @@ import { UserProfileHistoryGraph } from "../components/UserProfileHistoryGraph"
 import { UserProfileStats } from "../components/UserProfileStats"
 import { UserProfileScores } from "../components/UserProfileScores"
 import { userIsOnline } from "../adapters/bancho"
+import { ProfileHistoryType } from "../adapters/akatsuki-api/profileHistory"
 
 const modeToStatsIndex = (
   mode: GameMode
@@ -40,9 +41,8 @@ export const ProfilePage = () => {
   const [error, setError] = useState("")
 
   const [userProfile, setUserProfile] = useState<UserFullResponse | null>(null)
-  const [profileHistoryType, setProfileHistoryType] = useState<"rank" | "pp">(
-    "rank"
-  )
+  const [profileHistoryType, setProfileHistoryType] =
+    useState<ProfileHistoryType>(ProfileHistoryType.GlobalRank)
   const [isOnline, setIsOnline] = useState(false)
 
   const [gameMode, setGameMode] = useState(GameMode.Standard)
@@ -178,17 +178,35 @@ export const ProfilePage = () => {
               <Stack direction="row" justifyContent="end" spacing={1}>
                 <Button
                   variant={
-                    profileHistoryType === "rank" ? "contained" : "outlined"
+                    profileHistoryType === ProfileHistoryType.GlobalRank
+                      ? "contained"
+                      : "outlined"
+                  }
+                  onClick={() =>
+                    setProfileHistoryType(ProfileHistoryType.GlobalRank)
+                  }
+                >
+                  Global Rank
+                </Button>
+                <Button
+                  variant={
+                    profileHistoryType === ProfileHistoryType.CountryRank
+                      ? "contained"
+                      : "outlined"
+                  }
+                  onClick={() =>
+                    setProfileHistoryType(ProfileHistoryType.CountryRank)
                   }
-                  onClick={() => setProfileHistoryType("rank")}
                 >
-                  Rank
+                  Country Rank
                 </Button>
                 <Button
                   variant={
-                    profileHistoryType === "pp" ? "contained" : "outlined"
+                    profileHistoryType === ProfileHistoryType.PP
+                      ? "contained"
+                      : "outlined"
                   }
-                  onClick={() => setProfileHistoryType("pp")}
+                  onClick={() => setProfileHistoryType(ProfileHistoryType.PP)}
                 >
                   PP
                 </Button>