68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
|
import { Chart, PieController, ArcElement, Tooltip, Legend } from 'chart.js';
|
|
|
|
interface DeviceAnalyticsProps {
|
|
data: DeviceAnalyticsType;
|
|
}
|
|
|
|
function StatCard({ title, items }: { title: string; items: { name: string; count: number; percentage: number }[] }) {
|
|
// 安全地格式化数字
|
|
const formatNumber = (value: number | string | undefined | null): string => {
|
|
if (value === undefined || value === null) return '0';
|
|
return typeof value === 'number' ? value.toLocaleString() : String(value);
|
|
};
|
|
|
|
// 安全地格式化百分比
|
|
const formatPercent = (value: number | undefined | null): string => {
|
|
if (value === undefined || value === null) return '0';
|
|
return value.toFixed(1);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 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 dark:text-gray-400 mb-1">
|
|
<span>{item.name || 'Unknown'}</span>
|
|
<span>{formatNumber(item.count)} ({formatPercent(item.percentage)}%)</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-500 h-2 rounded-full"
|
|
style={{ width: `${item.percentage || 0}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<StatCard
|
|
title="Device Types"
|
|
items={(data.deviceTypes || []).map(item => ({
|
|
name: item.type ? (item.type.charAt(0).toUpperCase() + item.type.slice(1)) : 'Unknown',
|
|
count: item.count,
|
|
percentage: item.percentage
|
|
}))}
|
|
/>
|
|
<StatCard
|
|
title="Browsers"
|
|
items={data.browsers || []}
|
|
/>
|
|
<StatCard
|
|
title="Operating Systems"
|
|
items={data.operatingSystems || []}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|