From 0994f93061606d15d2cb7ea3f2fd7ce4773b6569 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Sun, 12 Dec 2021 01:56:07 +0000
Subject: [PATCH] Add percent to folder showcase stats.

---
 client/src/components/user/UGPTStatShowcase.tsx | 8 +++++---
 client/src/util/misc.ts                         | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/user/UGPTStatShowcase.tsx b/client/src/components/user/UGPTStatShowcase.tsx
index 454972672..a61dcc96d 100644
--- a/client/src/components/user/UGPTStatShowcase.tsx
+++ b/client/src/components/user/UGPTStatShowcase.tsx
@@ -25,7 +25,7 @@ import { UGPTPreferenceStatsReturn } from "types/api-returns";
 import { GamePT } from "types/react";
 import { Playtype } from "types/tachi";
 import { APIFetchV1 } from "util/api";
-import { UppercaseFirst } from "util/misc";
+import { ToPercent, UppercaseFirst } from "util/misc";
 import UGPTStatContainer from "./UGPTStatContainer";
 import UGPTStatCreator from "./UGPTStatCreator";
 
@@ -431,8 +431,10 @@ export function StatDisplay({
 					</h5>
 					<h4>
 						{result.value}
-						{/* @ts-expect-error temp */}
-						<small className="text-muted">/{result.outOf}</small>
+						<small className="text-muted">
+							{/* @ts-expect-error This property definitely exists.*/}
+							{/* */}/{result.outOf} ({ToPercent(result.value, result.outOf)})
+						</small>
 					</h4>
 
 					{user && user.id !== reqUser.id && (
diff --git a/client/src/util/misc.ts b/client/src/util/misc.ts
index fefb8d715..7a61ee2d0 100644
--- a/client/src/util/misc.ts
+++ b/client/src/util/misc.ts
@@ -197,3 +197,6 @@ export function HistorySafeGoBack(history: ReturnType<typeof useHistory>) {
 	// history.goBack();
 	// }
 }
+export function ToPercent(n1: number, n2: number) {
+	return `${((100 * n1) / n2).toFixed(2)}%`;
+}