309 lines
11 KiB
TypeScript
309 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { fetchData } from '@/app/api/utils';
|
|
import { DeviceAnalytics } from '@/app/api/types';
|
|
import { Chart, PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale } from 'chart.js';
|
|
|
|
// 注册Chart.js组件
|
|
Chart.register(PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale);
|
|
|
|
export default function DeviceAnalyticsPage() {
|
|
const [deviceData, setDeviceData] = useState<DeviceAnalytics | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [dateRange, setDateRange] = useState({
|
|
from: new Date('2024-02-01'),
|
|
to: new Date('2025-03-05')
|
|
});
|
|
|
|
// 创建图表引用
|
|
const deviceTypesChartRef = useRef<HTMLCanvasElement>(null);
|
|
const browsersChartRef = useRef<HTMLCanvasElement>(null);
|
|
const osChartRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
// 图表实例引用
|
|
const deviceTypesChartInstance = useRef<Chart | null>(null);
|
|
const browsersChartInstance = useRef<Chart | null>(null);
|
|
const osChartInstance = useRef<Chart | null>(null);
|
|
|
|
// 颜色配置
|
|
const COLORS = {
|
|
deviceTypes: ['rgba(59, 130, 246, 0.8)', 'rgba(96, 165, 250, 0.8)', 'rgba(147, 197, 253, 0.8)', 'rgba(191, 219, 254, 0.8)', 'rgba(219, 234, 254, 0.8)'],
|
|
browsers: ['rgba(16, 185, 129, 0.8)', 'rgba(52, 211, 153, 0.8)', 'rgba(110, 231, 183, 0.8)', 'rgba(167, 243, 208, 0.8)', 'rgba(209, 250, 229, 0.8)'],
|
|
os: ['rgba(239, 68, 68, 0.8)', 'rgba(248, 113, 113, 0.8)', 'rgba(252, 165, 165, 0.8)', 'rgba(254, 202, 202, 0.8)', 'rgba(254, 226, 226, 0.8)']
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchDeviceData = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch(`/api/events/devices?startTime=${dateRange.from.toISOString().split('T')[0]}T00:00:00Z&endTime=${dateRange.to.toISOString().split('T')[0]}T23:59:59Z`);
|
|
if (!response.ok) throw new Error('Failed to fetch device data');
|
|
|
|
const data = await response.json();
|
|
setDeviceData(data.data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'An error occurred');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchDeviceData();
|
|
}, [dateRange]);
|
|
|
|
// 初始化和更新图表
|
|
useEffect(() => {
|
|
if (!deviceData || isLoading) return;
|
|
|
|
// 销毁旧的图表实例
|
|
if (deviceTypesChartInstance.current) {
|
|
deviceTypesChartInstance.current.destroy();
|
|
}
|
|
if (browsersChartInstance.current) {
|
|
browsersChartInstance.current.destroy();
|
|
}
|
|
if (osChartInstance.current) {
|
|
osChartInstance.current.destroy();
|
|
}
|
|
|
|
// 创建设备类型图表
|
|
if (deviceTypesChartRef.current && deviceData.deviceTypes.length > 0) {
|
|
const ctx = deviceTypesChartRef.current.getContext('2d');
|
|
if (ctx) {
|
|
deviceTypesChartInstance.current = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: deviceData.deviceTypes.map(item => item.type),
|
|
datasets: [{
|
|
data: deviceData.deviceTypes.map(item => item.count),
|
|
backgroundColor: COLORS.deviceTypes,
|
|
borderColor: COLORS.deviceTypes.map(color => color.replace('0.8', '1')),
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.raw as number;
|
|
const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
|
|
const percentage = Math.round((value * 100) / total);
|
|
return `${label}: ${value} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 创建浏览器图表
|
|
if (browsersChartRef.current && deviceData.browsers.length > 0) {
|
|
const ctx = browsersChartRef.current.getContext('2d');
|
|
if (ctx) {
|
|
browsersChartInstance.current = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: deviceData.browsers.map(item => item.name),
|
|
datasets: [{
|
|
data: deviceData.browsers.map(item => item.count),
|
|
backgroundColor: COLORS.browsers,
|
|
borderColor: COLORS.browsers.map(color => color.replace('0.8', '1')),
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.raw as number;
|
|
const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
|
|
const percentage = Math.round((value * 100) / total);
|
|
return `${label}: ${value} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 创建操作系统图表
|
|
if (osChartRef.current && deviceData.operatingSystems.length > 0) {
|
|
const ctx = osChartRef.current.getContext('2d');
|
|
if (ctx) {
|
|
osChartInstance.current = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: deviceData.operatingSystems.map(item => item.name),
|
|
datasets: [{
|
|
data: deviceData.operatingSystems.map(item => item.count),
|
|
backgroundColor: COLORS.os,
|
|
borderColor: COLORS.os.map(color => color.replace('0.8', '1')),
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.raw as number;
|
|
const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
|
|
const percentage = Math.round((value * 100) / total);
|
|
return `${label}: ${value} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 清理函数
|
|
return () => {
|
|
if (deviceTypesChartInstance.current) {
|
|
deviceTypesChartInstance.current.destroy();
|
|
}
|
|
if (browsersChartInstance.current) {
|
|
browsersChartInstance.current.destroy();
|
|
}
|
|
if (osChartInstance.current) {
|
|
osChartInstance.current.destroy();
|
|
}
|
|
};
|
|
}, [deviceData, isLoading]);
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
{/* 页面标题 */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-white">Device Analytics</h1>
|
|
<p className="mt-2 text-white">Analyze visitor distribution by devices, browsers, and operating systems</p>
|
|
</div>
|
|
|
|
{/* 时间范围选择器 */}
|
|
<div className="bg-card-bg rounded-xl p-6 mb-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-secondary mb-1">Start Date</label>
|
|
<input
|
|
type="date"
|
|
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
|
|
value={dateRange.from.toISOString().split('T')[0]}
|
|
onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-secondary mb-1">End Date</label>
|
|
<input
|
|
type="date"
|
|
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
|
|
value={dateRange.to.toISOString().split('T')[0]}
|
|
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 设备类型分析 */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
|
|
{/* 设备类型 */}
|
|
<div className="bg-card-bg rounded-xl p-6">
|
|
<h3 className="text-lg font-medium text-white mb-4">Device Types</h3>
|
|
{deviceData && deviceData.deviceTypes.length > 0 ? (
|
|
<div className="h-64">
|
|
<canvas ref={deviceTypesChartRef} />
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center items-center h-64 text-text-secondary">
|
|
No data available
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 浏览器 */}
|
|
<div className="bg-card-bg rounded-xl p-6">
|
|
<h3 className="text-lg font-medium text-white mb-4">Browsers</h3>
|
|
{deviceData && deviceData.browsers.length > 0 ? (
|
|
<div className="h-64">
|
|
<canvas ref={browsersChartRef} />
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center items-center h-64 text-text-secondary">
|
|
No data available
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 操作系统 */}
|
|
<div className="bg-card-bg rounded-xl p-6">
|
|
<h3 className="text-lg font-medium text-white mb-4">Operating Systems</h3>
|
|
{deviceData && deviceData.operatingSystems.length > 0 ? (
|
|
<div className="h-64">
|
|
<canvas ref={osChartRef} />
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center items-center h-64 text-text-secondary">
|
|
No data available
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 加载状态 */}
|
|
{isLoading && (
|
|
<div className="flex justify-center items-center p-8">
|
|
<div className="w-8 h-8 border-t-2 border-b-2 border-accent-blue rounded-full animate-spin"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 错误状态 */}
|
|
{error && (
|
|
<div className="flex justify-center items-center p-8 text-accent-red">
|
|
<p>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 无数据状态 */}
|
|
{!isLoading && !error && !deviceData && (
|
|
<div className="flex justify-center items-center p-8 text-text-secondary">
|
|
<p>No device data available</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|