1"use client";
2
3import React from "react";
4import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
5
6interface ChartDataPoint {
7 time: string;
8 visitors: number;
9}
10
11interface CountryData {
12 flag: string;
13 name: string;
14 count: number;
15}
16
17const chartData: ChartDataPoint[] = [
18 { time: "17:04", visitors: 2 },
19 { time: "17:05", visitors: 2 },
20 { time: "17:06", visitors: 2 },
21 { time: "17:07", visitors: 3 },
22 { time: "17:08", visitors: 0 },
23 { time: "17:09", visitors: 1 },
24 { time: "17:10", visitors: 2 },
25 { time: "17:11", visitors: 1 },
26 { time: "17:12", visitors: 3 },
27 { time: "17:13", visitors: 3 },
28 { time: "17:14", visitors: 2 },
29 { time: "17:15", visitors: 1 },
30 { time: "17:16", visitors: 0 },
31 { time: "17:17", visitors: 2 },
32 { time: "17:18", visitors: 1 },
33 { time: "17:19", visitors: 0 },
34 { time: "17:20", visitors: 1 },
35 { time: "17:21", visitors: 0 },
36 { time: "17:22", visitors: 4 },
37 { time: "17:23", visitors: 3 },
38 { time: "17:24", visitors: 3 },
39 { time: "17:25", visitors: 2 },
40 { time: "17:26", visitors: 2 },
41 { time: "17:27", visitors: 2 },
42 { time: "17:28", visitors: 5 },
43 { time: "17:29", visitors: 1 },
44 { time: "17:30", visitors: 4 },
45 { time: "17:31", visitors: 1 },
46 { time: "17:32", visitors: 5 },
47 { time: "17:33", visitors: 1 },
48];
49
50const countries: CountryData[] = [
51 { flag: "🇬🇧", name: "United Kingdom", count: 6 },
52 { flag: "🇫🇷", name: "France", count: 6 },
53 { flag: "🇩🇪", name: "Germany", count: 5 },
54];
55
56interface TooltipProps {
57 active?: boolean;
58 payload?: Array<{
59 value: number;
60 }>;
61}
62
63const CustomTooltip = ({ active, payload }: TooltipProps) => {
64 if (active && payload && payload.length) {
65 return (
66 <div className="bg-gray-800 rounded-md px-3 py-2 shadow-xl border border-gray-700">
67 <div className="flex items-center gap-2">
68 <div className="w-2 h-2 rounded-sm bg-blue-500"></div>
69 <span className="text-xs text-gray-300">Visitors</span>
70 <span className="text-sm font-semibold text-white ml-2">
71 {payload[0].value}
72 </span>
73 </div>
74 </div>
75 );
76 }
77 return null;
78};
79
80export default function AnalyticsChartWidget() {
81 const totalUsers = chartData.reduce((sum, d) => sum + d.visitors, 0);
82
83 return (
84 <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4">
85 <div className="w-full max-w-xs bg-white rounded-xl border border-gray-200 p-6 animate-in fade-in duration-500">
86 <div className="flex flex-col gap-4">
87 {/* Header Section */}
88 <div className="space-y-2">
89 <div
90 className="font-medium uppercase tracking-wider opacity-50"
91 style={{ fontSize: "12px" }}
92 >
93 Users in Last 30 Minutes
94 </div>
95 <div className="flex items-center gap-3">
96 <div className="font-extrabold" style={{ fontSize: "25.2px" }}>
97 {totalUsers}
98 </div>
99 <span className="relative inline-flex h-2 w-2">
100 <span
101 className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500"
102 style={{
103 opacity: 0.75,
104 }}
105 ></span>
106 <span
107 className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"
108 ></span>
109 </span>
110 </div>
111 </div>
112
113 {/* Chart Section */}
114 <div className="h-[130px] w-full">
115 <ResponsiveContainer width="100%" height="100%">
116 <BarChart data={chartData}>
117 <XAxis
118 dataKey="time"
119 stroke="#666"
120 strokeWidth={0.5}
121 opacity={0.5}
122 tick={{ fontSize: 8.24, opacity: 0.5, fill: "#666" }}
123 tickLine={false}
124 axisLine={{ opacity: 0.5 }}
125 interval={6}
126 />
127 <Tooltip content={<CustomTooltip />} cursor={false} />
128 <Bar
129 dataKey="visitors"
130 fill="#3b82f6"
131 radius={[2, 2, 0, 0]}
132 maxBarSize={7}
133 />
134 </BarChart>
135 </ResponsiveContainer>
136 </div>
137
138 {/* Country Section */}
139 <div className="space-y-2">
140 <div
141 className="font-medium uppercase tracking-wider opacity-50"
142 style={{ fontSize: "12px" }}
143 >
144 Country
145 </div>
146 <div className="space-y-1" style={{ fontSize: "14px" }}>
147 {countries.map((country, index) => (
148 <div key={index} className="flex items-center gap-3">
149 <span className="scale-110">{country.flag}</span>
150 <span className="truncate">{country.name}</span>
151 <span className="ml-auto">{country.count}</span>
152 </div>
153 ))}
154 </div>
155 </div>
156 </div>
157 </div>
158 </div>
159 );
160}
161