52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
|
|
|
interface CategoryItem {
|
|
name: string;
|
|
count: number;
|
|
percentage: number;
|
|
}
|
|
|
|
interface DeviceAnalyticsProps {
|
|
data: DeviceAnalyticsType;
|
|
}
|
|
|
|
export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
|
|
const renderCategory = (items: CategoryItem[], title: string) => (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
|
|
<div className="space-y-4">
|
|
{items.map((item, index) => (
|
|
<div key={index}>
|
|
<div className="flex justify-between text-sm text-gray-600 mb-1">
|
|
<span>{item.name}</span>
|
|
<span>{item.percentage.toFixed(1)}% ({item.count})</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full"
|
|
style={{ width: `${item.percentage}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Prepare device types data
|
|
const deviceItems = data.deviceTypes.map(item => ({
|
|
name: item.type || 'Unknown',
|
|
count: item.count,
|
|
percentage: item.percentage
|
|
}));
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{renderCategory(deviceItems, 'Device Types')}
|
|
{renderCategory(data.browsers, 'Browsers')}
|
|
{renderCategory(data.operatingSystems, 'Operating Systems')}
|
|
</div>
|
|
);
|
|
}
|