add analytics page

src/components/AnalyticsChart.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { ScoresaberPlayerCountHistory } from "@/schemas/fascinated/scoresaberPlayerCountHistory";
+import { formatTimeAgo } from "@/utils/timeUtils";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+type PlayerChartProps = {
+  className?: string;
+  playerCountHistoryData: ScoresaberPlayerCountHistory;
+};
+
+export const options: any = {
+  maintainAspectRatio: false,
+  aspectRatio: 1,
+  interaction: {
+    mode: "index",
+    intersect: false,
+  },
+  scales: {
+    y: {
+      ticks: {
+        autoSkip: true,
+        maxTicksLimit: 8,
+        stepSize: 1,
+      },
+    },
+    x: {
+      ticks: {
+        autoSkip: true,
+      },
+    },
+  },
+  elements: {
+    point: {
+      radius: 0,
+    },
+  },
+  plugins: {
+    legend: {
+      position: "top" as const,
+      labels: {
+        color: "white",
+      },
+    },
+    title: {
+      display: false,
+    },
+    tooltip: {
+      callbacks: {
+        label(context: any) {
+          switch (
+            context.dataset.label
+            // case "Rank": {
+            //   return `Rank #${formatNumber(context.parsed.y.toFixed(0))}`;
+            // }
+          ) {
+          }
+        },
+      },
+    },
+  },
+};
+
+export default function AnalyticsChart({
+  className,
+  playerCountHistoryData,
+}: PlayerChartProps) {
+  const playerCountHistory = playerCountHistoryData.history;
+
+  let labels = [];
+  for (let i = 0; i < playerCountHistory.length; i++) {
+    if (i == playerCountHistory.length - 1) {
+      labels.push("now");
+      continue;
+    }
+    labels.push(formatTimeAgo(playerCountHistory[i].time));
+  }
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        lineTension: 0.5,
+        data: playerCountHistory.map((count) => count.value),
+        label: "Active Players",
+        borderColor: "#3e95cd",
+        fill: false,
+        color: "#fff",
+      },
+    ],
+  };
+
+  return <Line className={className} options={options} data={data} />;
+}

src/components/Navbar.tsx

@@ -5,6 +5,7 @@ import useStore from "@/utils/useStore";
 import {
   CogIcon,
   MagnifyingGlassIcon,
+  ServerIcon,
   UserIcon,
 } from "@heroicons/react/20/solid";
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
@@ -95,6 +96,11 @@ export default function Navbar() {
           icon={<GlobeAltIcon height={20} width={20} />}
           href="/ranking/global/1"
         />
+        <NavbarButton
+          text="Analytics"
+          icon={<ServerIcon height={20} width={20} />}
+          href="/analytics"
+        />
 
         <div className="m-auto" />
 

src/components/player/Score.tsx

@@ -29,6 +29,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
     leaderboard.difficulty.difficulty,
   );
   const diffColor = songDifficultyToColor(diffName);
+  const accuracy = ((score.baseScore / leaderboard.maxScore) * 100).toFixed(2);
 
   return (
     // <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1fr_6fr_0.4fr_1.3fr]">
@@ -125,9 +126,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
               value={
                 !leaderboard.maxScore
                   ? formatNumber(score.baseScore)
-                  : ((score.baseScore / leaderboard.maxScore) * 100).toFixed(
-                      2,
-                    ) + "%"
+                  : accuracy + "%"
               }
             />
           </div>