FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restyle statistics tab — stat cards, charts, recent sessions table

Browse Source
This commit is contained in:
Fran Jurmanović
2026-03-21 21:27:18 +01:00
parent 374899e839
commit 9d240c3a80
6 changed files with 63 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/statistics/DailyActivityChart.tsx
View File

@@ -29,8 +29,8 @@ export function DailyActivityChart({ data }: DailyActivityChartProps) {
{
label: 'Sessions',
data: data.map((item) => item.sessionsCount),
backgroundColor: 'rgba(59, 130, 246, 0.8)',
borderColor: 'rgb(59, 130, 246)',
backgroundColor: '#3fb950',
borderColor: '#3fb950',
borderWidth: 1
}
]
@@ -43,27 +43,27 @@ export function DailyActivityChart({ data }: DailyActivityChartProps) {
legend: {
position: 'top' as const,
labels: {
color: '#e5e7eb'
color: '#e6edf3'
}
}
},
scales: {
x: {
ticks: {
color: '#9ca3af'
color: '#8b949e'
},
grid: {
color: '#374151'
color: '#21262d'
}
},
y: {
beginAtZero: true,
ticks: {
color: '#9ca3af',
color: '#8b949e',
stepSize: 1
},
grid: {
color: '#374151'
color: '#21262d'
}
}
}

14
src/components/statistics/PlayerCountChart.tsx
View File

@@ -43,8 +43,8 @@ export function PlayerCountChart({ data }: PlayerCountChartProps) {
x: new Date(point.timestamp),
y: point.count
})),
borderColor: 'rgb(59, 130, 246)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderColor: '#58a6ff',
backgroundColor: '#58a6ff1a',
tension: 0.4
}
]
@@ -57,7 +57,7 @@ export function PlayerCountChart({ data }: PlayerCountChartProps) {
legend: {
position: 'top' as const,
labels: {
color: '#e5e7eb'
color: '#e6edf3'
}
}
},
@@ -68,20 +68,20 @@ export function PlayerCountChart({ data }: PlayerCountChartProps) {
unit: 'hour' as const
},
ticks: {
color: '#9ca3af'
color: '#8b949e'
},
grid: {
color: '#374151'
color: '#21262d'
}
},
y: {
beginAtZero: true,
ticks: {
color: '#9ca3af',
color: '#8b949e',
stepSize: 1
},
grid: {
color: '#374151'
color: '#21262d'
}
}
}

41
src/components/statistics/RecentSessions.tsx
View File

@@ -29,51 +29,52 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
if (sessions.length === 0) {
return (
<div className="py-8 text-center">
<div className="mb-2 text-4xl">📊</div>
<p className="text-gray-400">No recent sessions found</p>
</div>
<div className="px-4 py-8 text-center text-sm text-gh-muted">No recent sessions found</div>
);
}
return (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-700">
<table className="min-w-full">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<tr className="border-b border-gh-border-muted bg-gh-base">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Type
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Track
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Duration
</th>
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gh-subtle">
Players
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
<tbody>
{sessions.map((session) => (
<tr key={session.id} className="transition-colors hover:bg-gray-700">
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<tr key={session.id} className="border-b border-gh-border-muted transition-colors hover:bg-gh-hover last:border-0">
<td className="px-4 py-3 text-sm text-gh-muted">
{formatDate(session.date)}
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<span className="inline-flex items-center rounded-full bg-blue-900 px-2.5 py-0.5 text-xs font-medium text-blue-300">
{session.type}
<td className="px-4 py-3">
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
session.type === 'R' ? 'bg-gh-green-bg text-gh-green' :
session.type === 'Q' ? 'bg-gh-yellow-bg text-gh-yellow' :
'bg-gh-blue-bg text-gh-blue'
}`}>
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
</span>
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">{session.track}</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<td className="px-4 py-3 text-sm text-gh-secondary">{session.track}</td>
<td className="px-4 py-3 text-sm text-gh-muted">
{formatDuration(session.duration)}
</td>
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
<td className="px-4 py-3 text-sm text-gh-secondary">
{session.players}
</td>
</tr>

12
src/components/statistics/SessionTypesChart.tsx
View File

@@ -15,12 +15,10 @@ interface SessionTypesChartProps {
}
const colors = [
'#3b82f6', // blue
'#10b981', // emerald
'#f59e0b', // amber
'#ef4444', // red
'#8b5cf6', // violet
'#06b6d4' // cyan
'#3fb950', // gh-green
'#58a6ff', // gh-blue
'#f78166', // gh-red
'#d29922' // gh-yellow
];
export function SessionTypesChart({ data }: SessionTypesChartProps) {
@@ -43,7 +41,7 @@ export function SessionTypesChart({ data }: SessionTypesChartProps) {
legend: {
position: 'bottom' as const,
labels: {
color: '#e5e7eb',
color: '#e6edf3',
padding: 20
}
},

14
src/components/statistics/StatCard.tsx
View File

@@ -6,16 +6,12 @@ interface StatCardProps {
export function StatCard({ title, value, icon }: StatCardProps) {
return (
<div className="rounded-lg bg-gray-800 p-6">
<div className="flex items-center">
<div className="flex-shrink-0">
<span className="text-3xl">{icon}</span>
</div>
<div className="ml-4">
<div className="text-2xl font-semibold text-white">{value}</div>
<div className="text-sm text-gray-400">{title}</div>
</div>
<div className="rounded-lg border border-gh-border bg-gh-canvas p-4">
<div className="mb-1 flex items-center gap-2">
<span className="text-base">{icon}</span>
<span className="text-xs text-gh-muted">{title}</span>
</div>
<div className="text-2xl font-bold text-gh-primary">{value}</div>
</div>
);
}

36
src/components/statistics/StatisticsDashboard.tsx
View File

@@ -14,17 +14,18 @@ interface StatisticsDashboardProps {
export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
if (!stats) {
return (
<div className="py-12 text-center">
<div className="mb-4 text-6xl">📊</div>
<h3 className="mb-2 text-xl font-semibold text-white">No Statistics Available</h3>
<p className="text-gray-400">No data found for the selected date range.</p>
<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="space-y-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
<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"
@@ -39,27 +40,26 @@ export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
<StatCard title="Peak Players" value={stats.peakPlayers ?? 0} icon="🔥" />
</div>
{/* Charts */}
<div className="grid grid-cols-12 gap-4">
<div className="col-span-9 rounded-lg bg-gray-800 p-6">
<h3 className="mb-4 text-lg font-medium text-white">Player Count Over Time</h3>
{/* 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="col-span-3 rounded-lg bg-gray-800 p-6">
<h3 className="mb-4 text-lg font-medium text-white">Session Types</h3>
<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 bg-gray-800 p-6">
<h3 className="mb-4 text-lg font-medium text-white">Daily Activity</h3>
<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="rounded-lg bg-gray-800 p-6">
<h3 className="mb-4 text-lg font-medium text-white">Recent Sessions</h3>
{/* 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>