@@ -102,28 +127,52 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
{name} Leaderboard
-
-
all
-
year
-
month
-
week
+
+
+
+
+
- {/* All time data */}
+ {/* Current period data */}
- {data.all.length === 0 ? (
+ {currentData?.length === 0 ? (
N/A
) : (
- {data.all[0]?.user_id || 'N/A'}
+ {currentData[0]?.user_id || 'N/A'}
)}
- {data.all.slice(0, 3).map((item: any, index: number) => (
+ {currentData?.slice(0, 3).map((item: any, index: number) => (
0 ? 'border-t border-gray-200' : ''}`}
@@ -131,7 +180,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
-
{item.value}
+
{formatValue(item.value)}
))}
@@ -140,8 +189,6 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
);
}
-
-
export default function HomePage() {
const { data: homeData, isLoading: homeLoading } = useGetHome();
const { data: docsData, isLoading: docsLoading } = useGetDocuments({ page: 1, limit: 9 });
diff --git a/frontend/src/utils/formatters.test.ts b/frontend/src/utils/formatters.test.ts
new file mode 100644
index 0000000..e17ada5
--- /dev/null
+++ b/frontend/src/utils/formatters.test.ts
@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { formatNumber, formatDuration } from './formatters';
+
+describe('formatNumber', () => {
+ it('formats zero', () => {
+ expect(formatNumber(0)).toBe('0');
+ });
+
+ it('formats small numbers', () => {
+ expect(formatNumber(5)).toBe('5.00');
+ expect(formatNumber(15)).toBe('15.0');
+ expect(formatNumber(99)).toBe('99.0');
+ });
+
+ it('formats thousands', () => {
+ expect(formatNumber(19823)).toBe('19.8k');
+ expect(formatNumber(1984)).toBe('1.98k');
+ expect(formatNumber(1000)).toBe('1.00k');
+ });
+
+ it('formats millions', () => {
+ expect(formatNumber(1500000)).toBe('1.50M');
+ expect(formatNumber(198236461)).toBe('198M');
+ expect(formatNumber(1000000)).toBe('1.00M');
+ });
+
+ it('formats large numbers', () => {
+ expect(formatNumber(1500000000)).toBe('1.50B');
+ expect(formatNumber(1500000000000)).toBe('1.50T');
+ });
+
+ it('formats negative numbers', () => {
+ expect(formatNumber(-12345)).toBe('-12.3k');
+ expect(formatNumber(-1500000)).toBe('-1.50M');
+ });
+
+ it('matches Go test cases exactly', () => {
+ expect(formatNumber(0)).toBe('0');
+ expect(formatNumber(19823)).toBe('19.8k');
+ expect(formatNumber(1500000)).toBe('1.50M');
+ expect(formatNumber(-12345)).toBe('-12.3k');
+ });
+});
+
+describe('formatDuration', () => {
+ it('formats zero as N/A', () => {
+ expect(formatDuration(0)).toBe('N/A');
+ });
+
+ it('formats seconds only', () => {
+ expect(formatDuration(5)).toBe('5s');
+ expect(formatDuration(15)).toBe('15s');
+ });
+
+ it('formats minutes and seconds', () => {
+ expect(formatDuration(60)).toBe('1m');
+ expect(formatDuration(75)).toBe('1m 15s');
+ expect(formatDuration(315)).toBe('5m 15s');
+ });
+
+ it('formats hours, minutes, and seconds', () => {
+ expect(formatDuration(3600)).toBe('1h');
+ expect(formatDuration(3665)).toBe('1h 1m 5s');
+ expect(formatDuration(3915)).toBe('1h 5m 15s');
+ });
+
+ it('formats days, hours, minutes, and seconds', () => {
+ expect(formatDuration(1928371)).toBe('22d 7h 39m 31s');
+ });
+
+ it('matches Go test cases exactly', () => {
+ expect(formatDuration(0)).toBe('N/A');
+ expect(formatDuration(22 * 24 * 60 * 60 + 7 * 60 * 60 + 39 * 60 + 31)).toBe('22d 7h 39m 31s');
+ expect(formatDuration(5 * 60 + 15)).toBe('5m 15s');
+ });
+});
diff --git a/frontend/src/utils/formatters.ts b/frontend/src/utils/formatters.ts
new file mode 100644
index 0000000..4b1bf27
--- /dev/null
+++ b/frontend/src/utils/formatters.ts
@@ -0,0 +1,72 @@
+/**
+ * FormatNumber takes a number and returns a human-readable string.
+ * For example: 19823 -> "19.8k", 1500000 -> "1.50M"
+ */
+export function formatNumber(input: number): string {
+ if (input === 0) {
+ return '0';
+ }
+
+ // Handle negative numbers
+ const negative = input < 0;
+ if (negative) {
+ input = -input;
+ }
+
+ const abbreviations = ['', 'k', 'M', 'B', 'T'];
+ const abbrevIndex = Math.floor(Math.log10(input) / 3);
+
+ // Bounds check
+ const safeIndex = Math.min(abbrevIndex, abbreviations.length - 1);
+
+ const scaledNumber = input / Math.pow(10, safeIndex * 3);
+
+ let result: string;
+ if (scaledNumber >= 100) {
+ result = `${Math.round(scaledNumber)}${abbreviations[safeIndex]}`;
+ } else if (scaledNumber >= 10) {
+ result = `${scaledNumber.toFixed(1)}${abbreviations[safeIndex]}`;
+ } else {
+ result = `${scaledNumber.toFixed(2)}${abbreviations[safeIndex]}`;
+ }
+
+ if (negative) {
+ result = `-${result}`;
+ }
+
+ return result;
+}
+
+/**
+ * FormatDuration takes duration in seconds and returns a human-readable string.
+ * For example: 1928371 seconds -> "22d 7h 39m 31s"
+ */
+export function formatDuration(seconds: number): string {
+ if (seconds === 0) {
+ return 'N/A';
+ }
+
+ const parts: string[] = [];
+
+ const days = Math.floor(seconds / (60 * 60 * 24));
+ seconds %= 60 * 60 * 24;
+ const hours = Math.floor(seconds / (60 * 60));
+ seconds %= 60 * 60;
+ const minutes = Math.floor(seconds / 60);
+ seconds %= 60;
+
+ if (days > 0) {
+ parts.push(`${days}d`);
+ }
+ if (hours > 0) {
+ parts.push(`${hours}h`);
+ }
+ if (minutes > 0) {
+ parts.push(`${minutes}m`);
+ }
+ if (seconds > 0) {
+ parts.push(`${seconds}s`);
+ }
+
+ return parts.join(' ');
+}