fix(client): platinum rounding and graph truncation (#1324)

client/src/components/charts/GekichumaiScoreChart.tsx

@@ -211,7 +211,7 @@ export default function GekichumaiScoreChart({
 
 	const gradientId = type === "Score" ? difficulty : type;
 
-	data.length = Math.min(data.length, duration + 1);
+	data[0].data.length = Math.min(data[0].data.length, duration + 1);
 
 	const commonProps: Omit<LineSvgProps, "data"> = {
 		margin: { top: 30, bottom: 50, left: 50, right: 50 },
@@ -262,8 +262,8 @@ export default function GekichumaiScoreChart({
 					tooltip={(d: PointTooltipProps) => (
 						<ChartTooltip>
 							{typeof d.point.data.y === "number" && d.point.data.y < 970_000
-								? "< 970,000 "
-								: d.point.data.yFormatted}
+								? "< 970,000"
+								: d.point.data.yFormatted}{" "}
 							@ {formatTime(d.point.data.x)}
 						</ChartTooltip>
 					)}
@@ -287,8 +287,8 @@ export default function GekichumaiScoreChart({
 					tooltip={(d: PointTooltipProps) => (
 						<ChartTooltip>
 							{typeof d.point.data.y === "number" && d.point.data.y < 990_000
-								? "< 990,000 "
-								: d.point.data.yFormatted}
+								? "< 990,000"
+								: d.point.data.yFormatted}{" "}
 							@ {formatTime(d.point.data.x)}
 						</ChartTooltip>
 					)}

client/src/components/tables/cells/OngekiPlatinumCell.tsx

@@ -34,12 +34,19 @@ export default function OngekiPlatinumCell({
 	maxPlatScore: integer;
 	stars: number;
 }) {
-	const percentage = Math.round((platinumScore * 10000.0) / maxPlatScore) / 100.0;
+	const percentage = (platinumScore / maxPlatScore) * 100;
 
 	return (
 		<td>
 			<div className="d-flex flex-column">
-				<strong>{percentage.toFixed(2)}%</strong>
+				<strong>
+					{percentage.toLocaleString("en-US", {
+						minimumFractionDigits: 2,
+						maximumFractionDigits: 2,
+						roundingMode: "trunc",
+					} as Intl.NumberFormatOptions)}
+					%
+				</strong>
 				<StarField stars={stars} compact={false} />
 				<small className="text-body-secondary">
 					[{platinumScore}/{maxPlatScore}]