File size: 3,278 Bytes
6d9f36a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | import { useEffect, useState } from "react";
import { Card } from "@/components/ui/card";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { Users, Loader2 } from "lucide-react";
interface VisitorData {
timestamp: number;
count: number;
}
export function VisitorChart() {
const [data, setData] = useState<VisitorData[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchVisitorData();
const interval = setInterval(fetchVisitorData, 5 * 60 * 1000);
return () => clearInterval(interval);
}, []);
const fetchVisitorData = async () => {
try {
const res = await fetch("/api/stats/visitors");
const json = await res.json();
if (json.success) {
setData(json.data);
}
} catch (error) {
console.error("Failed to fetch visitor data:", error);
} finally {
setLoading(false);
}
};
const formatXAxis = (timestamp: number) => {
const date = new Date(timestamp);
return date.getHours().toString().padStart(2, '0') + ':00';
};
const CustomTooltip = ({ active, payload }: any) => {
if (active && payload && payload.length) {
const data = payload[0].payload;
const date = new Date(data.timestamp);
const timeStr = date.toLocaleString('en-US', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
return (
<div className="bg-black/90 border border-white/20 rounded-lg p-3 backdrop-blur-sm">
<p className="text-xs text-gray-400 mb-1">{timeStr}</p>
<p className="text-sm font-semibold text-purple-400">
{data.count} visitor{data.count !== 1 ? 's' : ''}
</p>
</div>
);
}
return null;
};
return (
<Card className="p-6 bg-white/[0.02] border-white/10">
<div className="flex items-center gap-2 mb-4">
<Users className="w-5 h-5 text-purple-400" />
<h3 className="text-lg font-semibold text-white">Visitor Activity (Last 24 Hours)</h3>
</div>
{loading ? (
<div className="h-64 flex items-center justify-center">
<Loader2 className="w-6 h-6 text-purple-400 animate-spin" />
</div>
) : (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
<XAxis
dataKey="timestamp"
tickFormatter={formatXAxis}
stroke="rgba(255,255,255,0.5)"
style={{ fontSize: '12px' }}
interval="preserveStartEnd"
/>
<YAxis
stroke="rgba(255,255,255,0.5)"
style={{ fontSize: '12px' }}
allowDecimals={false}
/>
<Tooltip content={<CustomTooltip />} />
<Line
type="monotone"
dataKey="count"
stroke="#a855f7"
strokeWidth={2}
dot={{ fill: '#a855f7', r: 3 }}
activeDot={{ r: 5 }}
/>
</LineChart>
</ResponsiveContainer>
)}
</Card>
);
} |