re-enable player rank chart and fix country flags

src/components/country-flag.tsx

@@ -8,7 +8,7 @@ export default function CountryFlag({ code, size = 24 }: Props) {
     // eslint-disable-next-line @next/next/no-img-element
     <img
       alt="Player Country"
-      src={`/assets/flags/${code}.png`}
+      src={`/assets/flags/${code.toLowerCase()}.png`}
       width={size * 2}
       height={size}
       className={`w-[${size * 2}px] h-[${size}px] object-contain`}

src/components/player/player-data.tsx

@@ -7,6 +7,7 @@ import { ScoreSort } from "@/common/service/score-sort";
 import { useQuery } from "@tanstack/react-query";
 import Mini from "../ranking/mini";
 import PlayerHeader from "./player-header";
+import PlayerRankChart from "./player-rank-chart";
 import PlayerScores from "./player-scores";
 
 const REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes
@@ -34,7 +35,11 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
     <div className="flex gap-2">
       <article className="flex flex-col gap-2">
         <PlayerHeader player={player} />
-        {!player.inactive && <>{/* <PlayerRankChart player={player} /> */}</>}
+        {!player.inactive && (
+          <>
+            <PlayerRankChart player={player} />
+          </>
+        )}
         <PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} />
       </article>
       <aside className="w-[500px] hidden xl:flex flex-col gap-2">

src/components/player/player-rank-chart.tsx

@@ -3,28 +3,11 @@
 
 import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
 import { formatNumberWithCommas } from "@/common/number-utils";
-import {
-  CategoryScale,
-  Chart,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-  Tooltip,
-} from "chart.js";
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
 import { Line } from "react-chartjs-2";
 import Card from "../card";
 
-Chart.register(
-  LinearScale,
-  CategoryScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-);
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
 
 export const options: any = {
   maintainAspectRatio: false,
@@ -122,7 +105,7 @@ export default function PlayerRankChart({ player }: Props) {
   };
 
   return (
-    <Card className="h-96">
+    <Card className="h-96 w-full">
       <Line className="w-fit" options={options} data={data} />
     </Card>
   );