fix Analyse
This commit is contained in:
nadja
181
frontend/src/pages/Analytics.jsx
Normal file
181
frontend/src/pages/Analytics.jsx
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useAuth } from '../context/AuthContext';
|
||||||
|
import {
|
||||||
|
fetchAnalyticsOverview, fetchAnalyticsPageviews,
|
||||||
|
fetchAnalyticsUsers, fetchAnalyticsActivity
|
||||||
|
} from '../api';
|
||||||
|
|
||||||
|
function BarChart({ data, height = 200 }) {
|
||||||
|
if (!data.length) return <p className="text-gray-400 text-sm">Keine Daten vorhanden</p>;
|
||||||
|
const max = Math.max(...data.map(d => d.count), 1);
|
||||||
|
return (
|
||||||
|
<div className="flex items-end gap-1" style={{ height }}>
|
||||||
|
{data.map((d, i) => (
|
||||||
|
<div key={i} className="flex-1 flex flex-col items-center gap-1">
|
||||||
|
<span className="text-xs text-gray-500">{d.count}</span>
|
||||||
|
<div
|
||||||
|
className="w-full bg-blue-500 rounded-t"
|
||||||
|
style={{ height: `${(d.count / max) * (height - 30)}px`, minHeight: d.count > 0 ? '4px' : '0' }}
|
||||||
|
title={`${d.date}: ${d.count}`}
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-gray-400" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontSize: '10px' }}>
|
||||||
|
{d.date.slice(5)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({ label, value, color = 'blue' }) {
|
||||||
|
const colors = {
|
||||||
|
blue: 'text-blue-600',
|
||||||
|
green: 'text-green-600',
|
||||||
|
orange: 'text-orange-500',
|
||||||
|
red: 'text-red-600',
|
||||||
|
purple: 'text-purple-600',
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||||
|
<p className="text-sm text-gray-500">{label}</p>
|
||||||
|
<p className={`text-3xl font-bold ${colors[color]}`}>{value}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const EVENT_LABELS = {
|
||||||
|
page_view: 'Seitenaufruf',
|
||||||
|
recipe_created: 'Rezept erstellt',
|
||||||
|
recipe_updated: 'Rezept bearbeitet',
|
||||||
|
recipe_deleted: 'Rezept gelöscht',
|
||||||
|
user_login: 'Login',
|
||||||
|
user_register: 'Registrierung',
|
||||||
|
};
|
||||||
|
|
||||||
|
const EVENT_COLORS = {
|
||||||
|
page_view: 'bg-blue-100 text-blue-700',
|
||||||
|
recipe_created: 'bg-green-100 text-green-700',
|
||||||
|
recipe_updated: 'bg-yellow-100 text-yellow-700',
|
||||||
|
recipe_deleted: 'bg-red-100 text-red-700',
|
||||||
|
user_login: 'bg-purple-100 text-purple-700',
|
||||||
|
user_register: 'bg-indigo-100 text-indigo-700',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Analytics() {
|
||||||
|
const { token } = useAuth();
|
||||||
|
const [overview, setOverview] = useState(null);
|
||||||
|
const [pageviews, setPageviews] = useState([]);
|
||||||
|
const [users, setUsers] = useState([]);
|
||||||
|
const [activity, setActivity] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
load();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
try {
|
||||||
|
const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
|
||||||
|
const [ov, pv, us, act] = await Promise.all([
|
||||||
|
fetchAnalyticsOverview(token),
|
||||||
|
fetchAnalyticsPageviews(token, thirtyDaysAgo),
|
||||||
|
fetchAnalyticsUsers(token),
|
||||||
|
fetchAnalyticsActivity(token),
|
||||||
|
]);
|
||||||
|
setOverview(ov);
|
||||||
|
setPageviews(pv);
|
||||||
|
setUsers(us);
|
||||||
|
setActivity(act);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Analytics Fehler:', e);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center py-12 text-gray-400">Laden...</div>;
|
||||||
|
if (!overview) return <div className="text-center py-12 text-gray-400">Fehler beim Laden der Analytics-Daten.</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto space-y-8">
|
||||||
|
<h1 className="text-2xl font-bold">Analytics Dashboard</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
|
||||||
|
<StatCard label="Pageviews heute" value={overview.pageviews.today} color="blue" />
|
||||||
|
<StatCard label="Pageviews gestern" value={overview.pageviews.yesterday} color="blue" />
|
||||||
|
<StatCard label="Pageviews 7 Tage" value={overview.pageviews.week} color="purple" />
|
||||||
|
<StatCard label="Aktive User heute" value={overview.activeUsers.today} color="green" />
|
||||||
|
<StatCard label="Rezepte erstellt" value={overview.recipes.created} color="green" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
<StatCard label="Rezepte bearbeitet" value={overview.recipes.updated} color="orange" />
|
||||||
|
<StatCard label="Rezepte gelöscht" value={overview.recipes.deleted} color="red" />
|
||||||
|
<StatCard label="Logins gesamt" value={overview.logins} color="purple" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||||
|
<h2 className="text-lg font-semibold mb-4">Pageviews (letzte 30 Tage)</h2>
|
||||||
|
<BarChart data={pageviews} height={220} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||||
|
<h2 className="text-lg font-semibold mb-4">Aktivste User</h2>
|
||||||
|
{users.length === 0 ? (
|
||||||
|
<p className="text-gray-400 text-sm">Keine Daten vorhanden.</p>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-gray-200">
|
||||||
|
<th className="text-left py-2 font-medium text-gray-500">User</th>
|
||||||
|
<th className="text-right py-2 font-medium text-gray-500">Logins</th>
|
||||||
|
<th className="text-right py-2 font-medium text-gray-500">Erstellt</th>
|
||||||
|
<th className="text-right py-2 font-medium text-gray-500">Bearbeitet</th>
|
||||||
|
<th className="text-right py-2 font-medium text-gray-500">Gesamt</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{users.map(u => (
|
||||||
|
<tr key={u.user_id} className="border-b border-gray-100">
|
||||||
|
<td className="py-2 font-medium">{u.username}</td>
|
||||||
|
<td className="py-2 text-right">{u.logins}</td>
|
||||||
|
<td className="py-2 text-right">{u.recipes_created}</td>
|
||||||
|
<td className="py-2 text-right">{u.recipes_updated}</td>
|
||||||
|
<td className="py-2 text-right font-semibold">{u.total_events}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||||
|
<h2 className="text-lg font-semibold mb-4">Letzte Aktivitäten</h2>
|
||||||
|
{activity.length === 0 ? (
|
||||||
|
<p className="text-gray-400 text-sm">Keine Aktivitäten vorhanden.</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||||
|
{activity.map(e => (
|
||||||
|
<div key={e.id} className="flex items-center gap-3 text-sm py-1 border-b border-gray-50">
|
||||||
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${EVENT_COLORS[e.type] || 'bg-gray-100 text-gray-600'}`}>
|
||||||
|
{EVENT_LABELS[e.type] || e.type}
|
||||||
|
</span>
|
||||||
|
<span className="flex-1 text-gray-600">
|
||||||
|
{e.username || 'Anonym'}
|
||||||
|
{e.path && <span className="text-gray-400 ml-1">{e.path}</span>}
|
||||||
|
{e.recipe_name && <span className="text-gray-400 ml-1">"{e.recipe_name}"</span>}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400 whitespace-nowrap">
|
||||||
|
{new Date(e.timestamp).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user