show no data if data is missing instead of showing 0

projects/common/src/types/player/impl/scoresaber-player.ts

@@ -165,7 +165,7 @@ export async function getScoreSaberPlayerFromToken(
    * @param daysAgo the amount of days ago to get the stat for
    * @return the change
    */
-  const getChange = (statType: "rank" | "countryRank" | "pp", daysAgo: number = 1): number => {
+  const getChange = (statType: "rank" | "countryRank" | "pp", daysAgo: number = 1): number | undefined => {
     const todayStats = statisticHistory[todayDate];
     let otherDate: string | undefined;
 
@@ -184,19 +184,19 @@ export async function getScoreSaberPlayerFromToken(
       otherDate = formatDateMinimal(date);
     }
     if (!otherDate) {
-      return 0;
+      return undefined;
     }
 
     const otherStats = statisticHistory[otherDate];
     const hasChange = !!(todayStats && otherStats);
     if (!hasChange) {
-      return 0;
+      return undefined;
     }
 
     const statToday = todayStats[`${statType}`];
     const statOther = otherStats[`${statType}`];
     if (!statToday || !statOther) {
-      return 0;
+      return undefined;
     }
 
     return (statToday - statOther) * (statType == "pp" ? 1 : -1);

projects/website/src/components/player/player-header.tsx

@@ -48,20 +48,24 @@ const renderChange = (player: ScoreSaberPlayer, type: "rank" | "countryRank" | "
   const monthlyStat = monthlyStats?.[type];
 
   const renderChange = (value: number | undefined, timeFrame: "daily" | "weekly" | "monthly") => {
-    if (value == undefined) {
-      return "Missing Data";
-    }
-    const format = (value: number) => {
+    const format = (value: number | undefined) => {
       if (value == 0) {
         return 0;
       }
+      if (value == undefined) {
+        return "No Data";
+      }
       return type == "pp" ? formatPp(value) + "pp" : formatNumberWithCommas(value);
     };
 
     return (
       <p>
         {capitalizeFirstLetter(timeFrame)} Change:{" "}
-        <span className={`${value >= 0 ? (value == 0 ? "" : "text-green-500") : "text-red-500"}`}>{format(value)}</span>
+        <span
+          className={`${value == undefined ? "" : value >= 0 ? (value == 0 ? "" : "text-green-500") : "text-red-500"}`}
+        >
+          {format(value)}
+        </span>
       </p>
     );
   };