68 lines
2.4 KiB
TypeScript
Executable File
68 lines
2.4 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import type { StateHistoryStats } from '@/lib/schemas/statistics';
|
|
import { PlayerCountChart } from './PlayerCountChart';
|
|
import { SessionTypesChart } from './SessionTypesChart';
|
|
import { DailyActivityChart } from './DailyActivityChart';
|
|
import { StatCard } from './StatCard';
|
|
import { RecentSessions } from './RecentSessions';
|
|
|
|
interface StatisticsDashboardProps {
|
|
stats: StateHistoryStats;
|
|
}
|
|
|
|
export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
|
|
if (!stats) {
|
|
return (
|
|
<div className="py-16 text-center">
|
|
<div className="mb-3 text-5xl">📊</div>
|
|
<h3 className="mb-1 text-base font-semibold text-gh-primary">No Statistics Available</h3>
|
|
<p className="text-sm text-gh-muted">No data found for the selected date range.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{/* 4 stat cards */}
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
<StatCard title="Total Sessions" value={stats.totalSessions ?? 0} icon="🏁" />
|
|
<StatCard
|
|
title="Total Playtime"
|
|
value={`${Math.round(stats.totalPlaytime ?? 0 / 60)}h`}
|
|
icon="⏱️"
|
|
/>
|
|
<StatCard
|
|
title="Average Players"
|
|
value={(stats.averagePlayers ?? 0).toFixed(1)}
|
|
icon="👥"
|
|
/>
|
|
<StatCard title="Peak Players" value={stats.peakPlayers ?? 0} icon="🔥" />
|
|
</div>
|
|
|
|
{/* Charts row */}
|
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
|
<div className="lg:col-span-2 rounded-lg border border-gh-border bg-gh-canvas p-4">
|
|
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Player Count Over Time</h3>
|
|
<PlayerCountChart data={stats.playerCountOverTime ?? []} />
|
|
</div>
|
|
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
|
|
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Session Types</h3>
|
|
<SessionTypesChart data={stats.sessionTypes ?? []} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
|
|
<h3 className="mb-3 text-sm font-semibold text-gh-primary">Daily Activity</h3>
|
|
<DailyActivityChart data={stats.dailyActivity ?? []} />
|
|
</div>
|
|
|
|
{/* Recent sessions */}
|
|
<div className="overflow-hidden rounded-lg border border-gh-border bg-gh-canvas">
|
|
<div className="border-b border-gh-border-muted px-4 py-3 text-sm font-semibold text-gh-primary">Recent Sessions</div>
|
|
<RecentSessions sessions={stats.recentSessions ?? []} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|