From ffa4ab2b6c9a2380e13f1b224d35421d793f255d Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 27 Oct 2024 15:08:20 +0000
Subject: [PATCH] add PP to the acc chart for a score

---
 .../chart/player-score-accuracy-chart.tsx     | 40 ++++++++++++++-----
 .../score/score-views/score-overview.tsx      |  2 +-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx b/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
index 4879a29..afd0622 100644
--- a/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
+++ b/projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx
@@ -3,28 +3,35 @@
 import { ScoreStatsToken } from "@ssr/common/types/token/beatleader/score-stats/score-stats";
 import { formatTime } from "@ssr/common/utils/time-utils";
 import GenericChart, { DatasetConfig } from "@/components/chart/generic-chart";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type Props = {
   /**
-   * The score stats to use in the chart
+   * The score stats to use in the chart.
    */
   scoreStats: ScoreStatsToken;
+
+  /**
+   * The leaderboard to the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
 };
 
-export default function PlayerScoreAccuracyChart({ scoreStats }: Props) {
+export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Props) {
   const graph = scoreStats.scoreGraphTracker.graph;
 
-  const histories: Record<string, (number | null)[]> = {};
+  const histories: Record<string, (number | null)[]> = {
+    accuracy: [],
+    pp: [],
+  };
   const labels: string[] = [];
 
   for (let seconds = 0; seconds < graph.length; seconds++) {
     labels.push(formatTime(seconds));
-
-    const history = histories["accuracy"];
-    if (!history) {
-      histories["accuracy"] = [];
-    }
-    histories["accuracy"].push(graph[seconds] * 100);
+    const acc = graph[seconds] * 100;
+    histories["accuracy"].push(acc);
+    histories["pp"].push(scoresaberService.getPp(leaderboard.stars, acc));
   }
 
   const datasetConfig: DatasetConfig[] = [
@@ -39,7 +46,20 @@ export default function PlayerScoreAccuracyChart({ scoreStats }: Props) {
         displayName: "Accuracy",
         position: "left",
       },
-      labelFormatter: (value: number) => `${value.toFixed(2)}%`,
+      labelFormatter: (value: number) => `Accuracy: ${value.toFixed(2)}%`,
+    },
+    {
+      title: "PP",
+      field: "pp",
+      color: "#4858ff",
+      axisId: "y1",
+      axisConfig: {
+        reverse: false,
+        display: true,
+        displayName: "PP",
+        position: "right",
+      },
+      labelFormatter: (value: number) => `PP: ${value.toFixed(2)}pp`,
     },
   ];
 
diff --git a/projects/website/src/components/score/score-views/score-overview.tsx b/projects/website/src/components/score/score-views/score-overview.tsx
index 053bd48..7c041e4 100644
--- a/projects/website/src/components/score/score-views/score-overview.tsx
+++ b/projects/website/src/components/score/score-views/score-overview.tsx
@@ -38,7 +38,7 @@ export function ScoreOverview({ highlightedPlayer, scoreStats, initialPage, lead
     <>
       {scoreStats && (
         <div className="flex gap-2">
-          <PlayerScoreAccuracyChart scoreStats={scoreStats} />
+          <PlayerScoreAccuracyChart scoreStats={scoreStats} leaderboard={leaderboard} />
         </div>
       )}