From 613aca0090ee9fa277da4470e23cbe8d001d5998 Mon Sep 17 00:00:00 2001
From: beerpsi <92439990+beer-psi@users.noreply.github.com>
Date: Fri, 4 Oct 2024 06:35:49 +0700
Subject: [PATCH] fix(client): use the rating formatter specified in
 tachi-common for history graphs (#1189)

* fix(client): use the rating formatter specified in tachi-common for history graph

* adjust margins so the rating numbers fit

* museca: drop decimal places from profile rating

* adjust margins again to accommodate for wacca/jubeat/gitadora

* chore: lint
---
 .../_game/_playtype/GPTLeaderboardsPage.tsx   |  6 +--
 .../games/_game/_playtype/OverviewPage.tsx    | 37 +++++++++++++++----
 .../src/components/charts/TimelineChart.tsx   |  2 +-
 common/src/config/game-support/museca.ts      |  1 +
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/client/src/app/pages/dashboard/games/_game/_playtype/GPTLeaderboardsPage.tsx b/client/src/app/pages/dashboard/games/_game/_playtype/GPTLeaderboardsPage.tsx
index 8a910a392..b9adde426 100644
--- a/client/src/app/pages/dashboard/games/_game/_playtype/GPTLeaderboardsPage.tsx
+++ b/client/src/app/pages/dashboard/games/_game/_playtype/GPTLeaderboardsPage.tsx
@@ -1,5 +1,5 @@
 import { CreateUserMap } from "util/data";
-import { ToFixedFloor, UppercaseFirst } from "util/misc";
+import { FormatGPTProfileRating, UppercaseFirst } from "util/misc";
 import { NumericSOV, StrSOV } from "util/sorts";
 import ClassBadge from "components/game/ClassBadge";
 import ScoreLeaderboard from "components/game/ScoreLeaderboard";
@@ -142,9 +142,7 @@ function ProfileLeaderboard({ game, playtype }: GamePT) {
 						).map((e) => (
 							<td key={e}>
 								{r.ratings[e]
-									? gptConfig.profileRatingAlgs[e].formatter
-										? gptConfig.profileRatingAlgs[e].formatter!(r.ratings[e]!)
-										: ToFixedFloor(r.ratings[e]!, 2)
+									? FormatGPTProfileRating(game, playtype, e, r.ratings[e]!)
 									: "No Data."}
 							</td>
 						))}
diff --git a/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx
index fd1ad86ed..7a63b5538 100644
--- a/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx
+++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx
@@ -1,5 +1,4 @@
-import { ClumpActivity } from "util/activity";
-import { ToFixedFloor, UppercaseFirst } from "util/misc";
+import { FormatGPTProfileRating, UppercaseFirst } from "util/misc";
 import { FormatDate, MillisToSince } from "util/time";
 import TimelineChart from "components/charts/TimelineChart";
 import useSetSubheader from "components/layout/header/useSetSubheader";
@@ -17,7 +16,14 @@ import SelectButton from "components/util/SelectButton";
 import { useProfileRatingAlg } from "components/util/useScoreRatingAlg";
 import { DateTime } from "luxon";
 import React, { useMemo, useState } from "react";
-import { FormatGame, GetGameConfig, GetGamePTConfig, UserGameStats } from "tachi-common";
+import {
+	FormatGame,
+	Game,
+	GetGameConfig,
+	GetGamePTConfig,
+	Playtype,
+	UserGameStats,
+} from "tachi-common";
 import { UGPTHistory } from "types/api-returns";
 import { GamePT, SetState, UGPT } from "types/react";
 import FormSelect from "react-bootstrap/FormSelect";
@@ -110,7 +116,13 @@ function UserHistory({
 
 	const currentPropValue = useMemo(() => {
 		if (mode === "rating" && rating) {
-			return data[0].ratings[rating] ? ToFixedFloor(data[0].ratings[rating]!, 2) : "N/A";
+			const ratingValue = data[0].ratings[rating];
+
+			if (!ratingValue) {
+				return "N/A";
+			}
+
+			return FormatGPTProfileRating(game, playtype, rating, ratingValue);
 		} else if (mode === "ranking") {
 			return (
 				<>
@@ -228,7 +240,7 @@ function UserHistory({
 						</div>
 					)}
 
-					<RatingTimeline {...{ data, rating }} />
+					<RatingTimeline {...{ game, playtype, data, rating }} />
 				</>
 			)}
 		</>
@@ -236,9 +248,13 @@ function UserHistory({
 }
 
 function RatingTimeline({
+	game,
+	playtype,
 	data,
 	rating,
 }: {
+	game: Game;
+	playtype: Playtype;
 	data: UGPTHistory;
 	rating: keyof UserGameStats["ratings"];
 }) {
@@ -259,12 +275,19 @@ function RatingTimeline({
 				tickSize: 5,
 				tickPadding: 5,
 				tickRotation: 0,
-				format: (y) => (y ? ToFixedFloor(y, 2) : "N/A"),
+				format: (y) => (y ? FormatGPTProfileRating(game, playtype, rating, y) : "N/A"),
 			}}
 			tooltip={(p) => (
 				<ChartTooltip>
 					<div>
-						{p.point.data.y ? ToFixedFloor(p.point.data.y as number, 2) : "N/A"}{" "}
+						{p.point.data.y
+							? FormatGPTProfileRating(
+									game,
+									playtype,
+									rating,
+									p.point.data.y as number
+							  )
+							: "N/A"}{" "}
 						{UppercaseFirst(rating)}
 					</div>
 					<small className="text-body-secondary">
diff --git a/client/src/components/charts/TimelineChart.tsx b/client/src/components/charts/TimelineChart.tsx
index 5b3d257c5..19b0057fa 100644
--- a/client/src/components/charts/TimelineChart.tsx
+++ b/client/src/components/charts/TimelineChart.tsx
@@ -40,7 +40,7 @@ export default function TimelineChart({
 		<div style={graphStyle}>
 			<ResponsiveLine
 				data={data}
-				margin={{ top: 40, bottom: 40, left: 40, right: 40 }}
+				margin={{ top: 40, bottom: 40, left: 60, right: 40 }}
 				xScale={{ type: "time", format: "%Q" }}
 				xFormat="time:%Q"
 				gridXValues={3}
diff --git a/common/src/config/game-support/museca.ts b/common/src/config/game-support/museca.ts
index 344ff53a0..0ab8a046d 100644
--- a/common/src/config/game-support/museca.ts
+++ b/common/src/config/game-support/museca.ts
@@ -70,6 +70,7 @@ export const MUSECA_SINGLE_CONF = {
 		curatorSkill: {
 			description:
 				"The sum of your best 20 Curator Skills. This is identical to how it's calculated in-game.",
+			formatter: NoDecimalPlace,
 		},
 	},