add PP to the acc chart for a score

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 acc = graph[seconds] * 100;
-    const history = histories["accuracy"];
+    histories["accuracy"].push(acc);
-    if (!history) {
+    histories["pp"].push(scoresaberService.getPp(leaderboard.stars, acc));
-      histories["accuracy"] = [];
-    }
-    histories["accuracy"].push(graph[seconds] * 100);
   }
 
   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`,
     },
   ];
 

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>
       )}