add daily scores set tracking

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

@@ -1,14 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
-import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import {
+  BarElement,
+  CategoryScale,
+  Chart,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
 import { Line } from "react-chartjs-2";
 import { useIsMobile } from "@/hooks/use-is-mobile";
-import { formatDateMinimal, getDaysAgoDate, parseDate } from "@ssr/common/utils/time-utils";
+import { formatDateMinimal, getDaysAgo, getDaysAgoDate, parseDate } from "@ssr/common/utils/time-utils";
 
-Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend);
 
 export type AxisPosition = "left" | "right";
+export type DatasetDisplayType = "line" | "bar";
 
 export type Axis = {
   id?: string;
@@ -33,6 +44,7 @@ export type Dataset = {
   lineTension: number;
   spanGaps: boolean;
   yAxisID: string;
+  type?: DatasetDisplayType;
 };
 
 export type DatasetConfig = {
@@ -48,6 +60,7 @@ export type DatasetConfig = {
     position: AxisPosition;
     valueFormatter?: (value: number) => string; // Added precision option here
   };
+  type?: DatasetDisplayType;
   labelFormatter: (value: number) => string;
 };
 
@@ -80,7 +93,13 @@ const generateAxis = (
   reverse,
 });
 
-const generateDataset = (label: string, data: (number | null)[], borderColor: string, yAxisID: string): Dataset => ({
+const generateDataset = (
+  label: string,
+  data: (number | null)[],
+  borderColor: string,
+  yAxisID: string,
+  type?: DatasetDisplayType
+): Dataset => ({
   label,
   data,
   borderColor,
@@ -88,6 +107,10 @@ const generateDataset = (label: string, data: (number | null)[], borderColor: st
   lineTension: 0.5,
   spanGaps: false,
   yAxisID,
+  type,
+  ...(type === "bar" && {
+    backgroundColor: borderColor,
+  }),
 });
 
 export default function GenericChart({ labels, datasetConfig, histories }: ChartProps) {
@@ -130,7 +153,7 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
           config.axisConfig.valueFormatter
         );
 
-        return generateDataset(config.title, historyArray, config.color, config.axisId);
+        return generateDataset(config.title, historyArray, config.color, config.axisId, config.type || "line");
       }
 
       return null;
@@ -149,12 +172,10 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
         callbacks: {
           title(context: any) {
             const date = labels[context[0].dataIndex];
-            const currentDate = new Date();
-            const differenceInTime = currentDate.getTime() - new Date(date).getTime();
-            const differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24)) - 1;
+            const differenceInDays = getDaysAgo(date);
             let formattedDate: string;
             if (differenceInDays === 0) {
-              formattedDate = "Today";
+              formattedDate = "Now";
             } else if (differenceInDays === 1) {
               formattedDate = "Yesterday";
             } else {
@@ -174,17 +195,18 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
   };
 
   const formattedLabels = labels.map(date => {
-    if (formatDateMinimal(getDaysAgoDate(0)) === formatDateMinimal(date)) {
+    const formattedDate = formatDateMinimal(date);
+    if (formatDateMinimal(getDaysAgoDate(0)) === formattedDate) {
       return "Now";
     }
-    if (formatDateMinimal(getDaysAgoDate(1)) === formatDateMinimal(date)) {
+    if (formatDateMinimal(getDaysAgoDate(1)) === formattedDate) {
       return "Yesterday";
     }
 
-    return formatDateMinimal(date);
+    return formattedDate;
   });
 
-  const data = { labels: formattedLabels, datasets };
+  const data: any = { labels: formattedLabels, datasets };
 
   return (
     <div className="block h-[360px] w-full relative">

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

@@ -29,13 +29,14 @@ export default function GenericPlayerChart({ player, datasetConfig }: Props) {
   }
 
   const histories: Record<string, (number | null)[]> = {};
-  // Initialize histories for each dataset
+  const historyDays = 50;
+
+  // Initialize histories for each dataset with null values for all days
   datasetConfig.forEach(config => {
-    histories[config.field] = [];
+    histories[config.field] = Array(historyDays).fill(null);
   });
 
   const labels: Date[] = [];
-  const historyDays = 50;
 
   // Sort the statistic entries by date
   const statisticEntries = Object.entries(player.statisticHistory).sort(
@@ -49,9 +50,7 @@ export default function GenericPlayerChart({ player, datasetConfig }: Props) {
   for (let dayAgo = historyDays - 1; dayAgo >= 0; dayAgo--) {
     const targetDate = new Date();
     targetDate.setDate(today.getDate() - dayAgo);
-
-    // Find if there's a matching entry for this date
-    let matchedEntry = false;
+    labels.push(targetDate); // Push the target date to labels
 
     // Check if currentHistoryIndex is within bounds of statisticEntries
     if (currentHistoryIndex < statisticEntries.length) {
@@ -61,20 +60,12 @@ export default function GenericPlayerChart({ player, datasetConfig }: Props) {
       // If the entry date matches the target date, use this entry
       if (entryDate.toDateString() === targetDate.toDateString()) {
         datasetConfig.forEach(config => {
-          histories[config.field].push(getValueFromHistory(history, config.field) ?? null);
+          // Use the correct index for histories
+          histories[config.field][historyDays - 1 - dayAgo] = getValueFromHistory(history, config.field) ?? null;
         });
         currentHistoryIndex++;
-        matchedEntry = true;
       }
     }
-
-    // If no matching entry, fill the current day with null
-    if (!matchedEntry) {
-      datasetConfig.forEach(config => {
-        histories[config.field].push(null);
-      });
-    }
-    labels.push(targetDate);
   }
 
   // Render the chart with collected data

projects/website/src/components/player/chart/player-ranking-chart.tsx

@@ -59,6 +59,34 @@ const datasetConfig: DatasetConfig[] = [
     },
     labelFormatter: (value: number) => `PP ${formatNumberWithCommas(value)}pp`,
   },
+  {
+    title: "Ranked Scores",
+    field: "scores.rankedScores",
+    color: "#ffae4d",
+    axisId: "y3",
+    axisConfig: {
+      reverse: false,
+      display: false,
+      displayName: "Ranked Scores",
+      position: "left",
+    },
+    type: "bar",
+    labelFormatter: (value: number) => `Ranked Scores ${formatNumberWithCommas(value)}`,
+  },
+  {
+    title: "Unranked Scores",
+    field: "scores.unrankedScores",
+    color: "#616161",
+    axisId: "y3",
+    axisConfig: {
+      reverse: false,
+      display: false,
+      displayName: "Unranked Scores",
+      position: "left",
+    },
+    type: "bar",
+    labelFormatter: (value: number) => `Unranked Scores ${formatNumberWithCommas(value)}`,
+  },
 ];
 
 export default function PlayerRankingChart({ player }: Props) {