72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { GeoData } from '@/app/api/types';
|
|
|
|
interface GeoAnalyticsProps {
|
|
data: GeoData[];
|
|
}
|
|
|
|
export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
|
|
// 安全地格式化数字
|
|
const formatNumber = (value: number | undefined | null): string => {
|
|
if (value === undefined || value === null) return '0';
|
|
return value.toLocaleString();
|
|
};
|
|
|
|
// 安全地格式化百分比
|
|
const formatPercent = (value: number | undefined | null): string => {
|
|
if (value === undefined || value === null) return '0';
|
|
return value.toFixed(1);
|
|
};
|
|
|
|
const sortedData = [...data].sort((a, b) => (b.visits || 0) - (a.visits || 0));
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Location
|
|
</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Visits
|
|
</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Unique Visitors
|
|
</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
% of Total
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{sortedData.map((item, index) => (
|
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{item.location || 'Unknown'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatNumber(item.visits)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatNumber(item.visitors)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<div className="flex items-center">
|
|
<div className="w-24 bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full"
|
|
style={{ width: `${item.percentage || 0}%` }}
|
|
/>
|
|
</div>
|
|
<span className="ml-2">{formatPercent(item.percentage)}%</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|