add leaderboard pp chart

projects/website/src/components/chart/generic-chart.tsx

@@ -4,7 +4,7 @@
 import { Chart, registerables } from "chart.js";
 import { Line } from "react-chartjs-2";
 import { useIsMobile } from "@/hooks/use-is-mobile";
-import { formatDateMinimal, getDaysAgo, getDaysAgoDate, parseDate } from "@ssr/common/utils/time-utils";
+import { formatDateMinimal, getDaysAgoDate, parseDate } from "@ssr/common/utils/time-utils";
 
 Chart.register(...registerables);
 
@@ -16,7 +16,7 @@ export type Axis = {
   position?: AxisPosition;
   display?: boolean;
   grid?: { color?: string; drawOnChartArea?: boolean };
-  title?: { display: boolean; text: string; color?: string };
+  title?: { display: boolean; text?: string; color?: string };
   ticks?: {
     stepSize?: number;
     callback?: (value: number, index: number, values: any) => string;
@@ -34,6 +34,7 @@ export type Dataset = {
   lineTension: number;
   spanGaps: boolean;
   yAxisID: string;
+  hidden?: boolean;
   type?: DatasetDisplayType;
 };
 
@@ -46,16 +47,17 @@ export type DatasetConfig = {
     reverse: boolean;
     display: boolean;
     hideOnMobile?: boolean;
-    displayName: string;
+    displayName?: string;
     position: AxisPosition;
-    valueFormatter?: (value: number) => string; // Added precision option here
+    valueFormatter?: (value: number) => string;
   };
   type?: DatasetDisplayType;
   labelFormatter: (value: number) => string;
+  showLegend?: boolean;
 };
 
 export type ChartProps = {
-  labels: Date[];
+  labels: Date[] | string[];
   datasetConfig: DatasetConfig[];
   histories: Record<string, (number | null)[]>;
 };
@@ -65,7 +67,7 @@ const generateAxis = (
   reverse: boolean,
   display: boolean,
   position: AxisPosition,
-  displayName: string,
+  displayName?: string,
   valueFormatter?: (value: number) => string
 ): Axis => ({
   id,
@@ -88,6 +90,7 @@ const generateDataset = (
   data: (number | null)[],
   borderColor: string,
   yAxisID: string,
+  showLegend: boolean = true,
   type?: DatasetDisplayType
 ): Dataset => ({
   label,
@@ -97,6 +100,7 @@ const generateDataset = (
   lineTension: 0.5,
   spanGaps: false,
   yAxisID,
+  hidden: !showLegend, // Use hidden to disable legend
   type,
   ...(type === "bar" && {
     backgroundColor: borderColor,
@@ -112,7 +116,6 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
       reverse: false,
       ticks: {
         font: (context: any) => {
-          // Make the first of the month bold
           if (parseDate(context.tick.label).getDate() === 1) {
             return {
               weight: "bold",
@@ -143,7 +146,14 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
           config.axisConfig.valueFormatter
         );
 
-        return generateDataset(config.title, historyArray, config.color, config.axisId, config.type || "line");
+        return generateDataset(
+          config.title,
+          historyArray,
+          config.color,
+          config.axisId,
+          config.showLegend !== false, // Respect showLegend property
+          config.type || "line"
+        );
       }
 
       return null;
@@ -157,27 +167,15 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
     scales: axes,
     elements: { point: { radius: 0 } },
     plugins: {
-      legend: { position: "top", labels: { color: "white" } },
-      tooltip: {
-        callbacks: {
-          title(context: any) {
-            const date = labels[context[0].dataIndex];
-            const differenceInDays = getDaysAgo(date);
-            let formattedDate: string;
-            if (differenceInDays === 0) {
-              formattedDate = "Now";
-            } else if (differenceInDays === 1) {
-              formattedDate = "Yesterday";
-            } else {
-              formattedDate = formatDateMinimal(date);
-            }
-
-            return `${formattedDate} ${differenceInDays > 0 ? `(${differenceInDays} day${differenceInDays > 1 ? "s" : ""} ago)` : ""}`;
-          },
-          label(context: any) {
-            const value = Number(context.parsed.y);
-            const config = datasetConfig.find(cfg => cfg.title === context.dataset.label);
-            return config?.labelFormatter(value) ?? "";
+      legend: {
+        position: "top",
+        labels: {
+          color: "white",
+          // Filter out datasets where showLegend is false
+          filter: (legendItem: any, chartData: any) => {
+            // Access showLegend from chartData.datasets
+            const dataset = chartData.datasets[legendItem.datasetIndex];
+            return dataset.showLegend !== false; // Only show if showLegend is not false
           },
         },
       },
@@ -185,6 +183,9 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
   };
 
   const formattedLabels = labels.map(date => {
+    if (typeof date === "string") {
+      return date;
+    }
     const formattedDate = formatDateMinimal(date);
     if (formatDateMinimal(getDaysAgoDate(0)) === formattedDate) {
       return "Now";

projects/website/src/components/leaderboard/leaderboard-data.tsx

@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
 import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
+import LeaderboardPpChart from "@/components/leaderboard/leaderboard-pp-chart";
 
 const REFRESH_INTERVAL = 1000 * 60 * 5;
 
@@ -48,17 +49,21 @@ export function LeaderboardData({ initialLeaderboard, initialScores, initialPage
     }
   }, [data]);
 
+  const leaderboard = currentLeaderboard.leaderboard;
   return (
     <main className="flex flex-col-reverse xl:flex-row w-full gap-2">
       <LeaderboardScores
-        leaderboard={currentLeaderboard.leaderboard}
+        leaderboard={leaderboard}
         initialScores={initialScores}
         initialPage={initialPage}
         leaderboardChanged={newId => setCurrentLeaderboardId(newId)}
         showDifficulties
         isLeaderboardPage
       />
-      <LeaderboardInfo leaderboard={currentLeaderboard.leaderboard} beatSaverMap={currentLeaderboard.beatsaver} />
+      <div className="flex flex-col gap-2 w-full xl:w-[500px]">
+        <LeaderboardInfo leaderboard={leaderboard} beatSaverMap={currentLeaderboard.beatsaver} />
+        {leaderboard.stars > 0 && <LeaderboardPpChart leaderboard={leaderboard} />}
+      </div>
     </main>
   );
 }

projects/website/src/components/leaderboard/leaderboard-info.tsx

@@ -21,7 +21,7 @@ type LeaderboardInfoProps = {
 
 export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoProps) {
   return (
-    <Card className="xl:w-[500px] h-fit w-full">
+    <Card className="w-full h-fit">
       <div className="flex flex-row justify-between w-full">
         <div className="flex flex-col justify-between w-full min-h-[160px]">
           {/* Song Info */}

projects/website/src/components/leaderboard/leaderboard-pp-chart.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import GenericChart, { DatasetConfig } from "@/components/chart/generic-chart";
+import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import Card from "@/components/card";
+
+type Props = {
+  /**
+   * The player the chart is for
+   */
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export default function LeaderboardPpChart({ leaderboard }: Props) {
+  const histories: Record<string, (number | null)[]> = {};
+  const labels: string[] = [];
+
+  for (let accuracy = 60; accuracy <= 100; accuracy += 0.2) {
+    const label = accuracy.toFixed(2) + "%";
+    labels.push(label);
+
+    const history = histories["pp"];
+    if (!history) {
+      histories["pp"] = [];
+    }
+    histories["pp"].push(scoresaberService.getPp(leaderboard.stars, accuracy));
+  }
+
+  const datasetConfig: DatasetConfig[] = [
+    {
+      title: "PP",
+      field: "pp",
+      color: "#3EC1D3",
+      axisId: "y",
+      axisConfig: {
+        reverse: false,
+        display: true,
+        displayName: "PP",
+        position: "left",
+      },
+      labelFormatter: (value: number) => `${value.toFixed(2)}pp`,
+    },
+  ];
+
+  return (
+    <Card className="h-64 w-full">
+      <p className="font-semibold">PP Curve</p>
+      <GenericChart labels={labels} datasetConfig={datasetConfig} histories={histories} />
+    </Card>
+  );
+}