Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

re-add days ago to the chart
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee 2024-10-21 07:04:39 +01:00
parent fad22274fd
commit b9587feb9e
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
projects/website/src/components/chart/generic-chart.tsx
View File

@ -4,7 +4,7 @@
import { Chart, registerables } from "chart.js"; import { Chart, registerables } from "chart.js";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { useIsMobile } from "@/hooks/use-is-mobile"; 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(...registerables); Chart.register(...registerables);
@ -171,22 +171,47 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
position: "top", position: "top",
labels: { labels: {
color: "white", color: "white",
// Filter out datasets where showLegend is false
filter: (legendItem: any, chartData: any) => { filter: (legendItem: any, chartData: any) => {
// Access showLegend from chartData.datasets
const dataset = chartData.datasets[legendItem.datasetIndex]; const dataset = chartData.datasets[legendItem.datasetIndex];
return dataset.showLegend !== false; // Only show if showLegend is not false return dataset.showLegend !== false;
},
},
},
tooltip: {
callbacks: {
title(context: any) {
const value = labels[context[0].dataIndex];
if (typeof value === "string") {
return value;
}
const date = value as Date;
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) ?? "";
}, },
}, },
}, },
}, },
}; };
const formattedLabels = labels.map(date => { const formattedLabels = labels.map(value => {
if (typeof date === "string") { if (typeof value === "string") {
return date; return value;
} }
const formattedDate = formatDateMinimal(date); const formattedDate = formatDateMinimal(value);
if (formatDateMinimal(getDaysAgoDate(0)) === formattedDate) { if (formatDateMinimal(getDaysAgoDate(0)) === formattedDate) {
return "Now"; return "Now";
} }