vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

percent

Browse Source
This commit is contained in:
William Tso
2025-03-28 15:15:24 +08:00
parent 4ad505cda1
commit 26db8fe76d
7 changed files with 35 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/(app)/analytics/devices/page.tsx
View File

@@ -1,7 +1,6 @@
"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';
@@ -91,7 +90,7 @@ export default function DeviceAnalyticsPage() {
legend: {
position: 'bottom',
labels: {
color: 'white'
color: 'currentColor'
}
},
tooltip: {
@@ -132,7 +131,7 @@ export default function DeviceAnalyticsPage() {
legend: {
position: 'bottom',
labels: {
color: 'white'
color: 'currentColor'
}
},
tooltip: {
@@ -173,7 +172,7 @@ export default function DeviceAnalyticsPage() {
legend: {
position: 'bottom',
labels: {
color: 'white'
color: 'currentColor'
}
},
tooltip: {
@@ -211,27 +210,27 @@ export default function DeviceAnalyticsPage() {
<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>
<h1 className="text-2xl font-bold text-foreground">Device Analytics</h1>
<p className="mt-2 text-foreground">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>
<label className="block text-sm font-medium text-foreground 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"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground"
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>
<label className="block text-sm font-medium text-foreground 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"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground"
value={dateRange.to.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
/>
@@ -243,13 +242,13 @@ export default function DeviceAnalyticsPage() {
<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>
<h3 className="text-lg font-medium text-foreground 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">
<div className="flex justify-center items-center h-64 text-foreground">
No data available
</div>
)}
@@ -257,13 +256,13 @@ export default function DeviceAnalyticsPage() {
{/* 浏览器 */}
<div className="bg-card-bg rounded-xl p-6">
<h3 className="text-lg font-medium text-white mb-4">Browsers</h3>
<h3 className="text-lg font-medium text-foreground 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">
<div className="flex justify-center items-center h-64 text-foreground">
No data available
</div>
)}
@@ -271,13 +270,13 @@ export default function DeviceAnalyticsPage() {
{/* 操作系统 */}
<div className="bg-card-bg rounded-xl p-6">
<h3 className="text-lg font-medium text-white mb-4">Operating Systems</h3>
<h3 className="text-lg font-medium text-foreground 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">
<div className="flex justify-center items-center h-64 text-foreground">
No data available
</div>
)}
@@ -300,7 +299,7 @@ export default function DeviceAnalyticsPage() {
{/* 无数据状态 */}
{!isLoading && !error && !deviceData && (
<div className="flex justify-center items-center p-8 text-text-secondary">
<div className="flex justify-center items-center p-8 text-foreground">
<p>No device data available</p>
</div>
)}