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"; "use client";
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { fetchData } from '@/app/api/utils';
import { DeviceAnalytics } from '@/app/api/types'; import { DeviceAnalytics } from '@/app/api/types';
import { Chart, PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale } from 'chart.js'; import { Chart, PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale } from 'chart.js';
@@ -91,7 +90,7 @@ export default function DeviceAnalyticsPage() {
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
color: 'white' color: 'currentColor'
} }
}, },
tooltip: { tooltip: {
@@ -132,7 +131,7 @@ export default function DeviceAnalyticsPage() {
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
color: 'white' color: 'currentColor'
} }
}, },
tooltip: { tooltip: {
@@ -173,7 +172,7 @@ export default function DeviceAnalyticsPage() {
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
color: 'white' color: 'currentColor'
} }
}, },
tooltip: { tooltip: {
@@ -211,27 +210,27 @@ export default function DeviceAnalyticsPage() {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
{/* 页面标题 */} {/* 页面标题 */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-2xl font-bold text-white">Device Analytics</h1> <h1 className="text-2xl font-bold text-foreground">Device Analytics</h1>
<p className="mt-2 text-white">Analyze visitor distribution by devices, browsers, and operating systems</p> <p className="mt-2 text-foreground">Analyze visitor distribution by devices, browsers, and operating systems</p>
</div> </div>
{/* 时间范围选择器 */} {/* 时间范围选择器 */}
<div className="bg-card-bg rounded-xl p-6 mb-8"> <div className="bg-card-bg rounded-xl p-6 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <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 <input
type="date" 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]} value={dateRange.from.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))} onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
/> />
</div> </div>
<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 <input
type="date" 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]} value={dateRange.to.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))} 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="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
{/* 设备类型 */} {/* 设备类型 */}
<div className="bg-card-bg rounded-xl p-6"> <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 ? ( {deviceData && deviceData.deviceTypes.length > 0 ? (
<div className="h-64"> <div className="h-64">
<canvas ref={deviceTypesChartRef} /> <canvas ref={deviceTypesChartRef} />
</div> </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 No data available
</div> </div>
)} )}
@@ -257,13 +256,13 @@ export default function DeviceAnalyticsPage() {
{/* 浏览器 */} {/* 浏览器 */}
<div className="bg-card-bg rounded-xl p-6"> <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 ? ( {deviceData && deviceData.browsers.length > 0 ? (
<div className="h-64"> <div className="h-64">
<canvas ref={browsersChartRef} /> <canvas ref={browsersChartRef} />
</div> </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 No data available
</div> </div>
)} )}
@@ -271,13 +270,13 @@ export default function DeviceAnalyticsPage() {
{/* 操作系统 */} {/* 操作系统 */}
<div className="bg-card-bg rounded-xl p-6"> <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 ? ( {deviceData && deviceData.operatingSystems.length > 0 ? (
<div className="h-64"> <div className="h-64">
<canvas ref={osChartRef} /> <canvas ref={osChartRef} />
</div> </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 No data available
</div> </div>
)} )}
@@ -300,7 +299,7 @@ export default function DeviceAnalyticsPage() {
{/* 无数据状态 */} {/* 无数据状态 */}
{!isLoading && !error && !deviceData && ( {!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> <p>No device data available</p>
</div> </div>
)} )}

34
app/(app)/analytics/geo/page.tsx
View File

@@ -37,27 +37,27 @@ export default function GeoAnalyticsPage() {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
{/* 页面标题 */} {/* 页面标题 */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-2xl font-bold text-white">Geographic Analysis</h1> <h1 className="text-2xl font-bold text-foreground">Geographic Analysis</h1>
<p className="mt-2 text-white">Analyze visitor distribution by location</p> <p className="mt-2 text-foreground">Analyze visitor distribution by location</p>
</div> </div>
{/* 时间范围选择器 */} {/* 时间范围选择器 */}
<div className="bg-card-bg rounded-xl p-6 mb-8"> <div className="bg-card-bg rounded-xl p-6 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-white mb-1">Start Date</label> <label className="block text-sm font-medium text-foreground mb-1">Start Date</label>
<input <input
type="date" 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]} value={dateRange.from.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))} onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-1">End Date</label> <label className="block text-sm font-medium text-foreground mb-1">End Date</label>
<input <input
type="date" 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]} value={dateRange.to.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))} onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
/> />
@@ -71,33 +71,33 @@ export default function GeoAnalyticsPage() {
<table className="min-w-full divide-y divide-card-border"> <table className="min-w-full divide-y divide-card-border">
<thead> <thead>
<tr className="bg-background/50"> <tr className="bg-background/50">
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Location</th> <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Location</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Visits</th> <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Visits</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Unique Visitors</th> <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Unique Visitors</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Percentage</th> <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Percentage</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-card-border"> <tbody className="divide-y divide-card-border">
{geoData.map(item => ( {geoData.map(item => (
<tr key={item.location} className="hover:bg-background/50"> <tr key={item.location} className="hover:bg-background/50">
<td className="px-6 py-4 whitespace-nowrap text-sm text-white"> <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
{item.location} {item.location}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-white"> <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
{item.visits} {item.visits}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-white"> <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
{item.visitors} {item.visitors}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm"> <td className="px-6 py-4 whitespace-nowrap text-sm">
<div className="flex items-center"> <div className="flex items-center">
<div className="w-full bg-background rounded-full h-2 mr-2"> <span className="mr-2 text-foreground">{item.percentage.toFixed(1)}%</span>
<div className="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div <div
className="bg-blue-500 h-2 rounded-full" className="bg-blue-500 h-2 rounded-full"
style={{ width: `${item.percentage}%` }} style={{ width: `${item.percentage}%` }}
/> />
</div> </div>
<span className="text-white">{item.percentage.toFixed(1)}%</span>
</div> </div>
</td> </td>
</tr> </tr>
@@ -122,14 +122,14 @@ export default function GeoAnalyticsPage() {
{/* 无数据状态 */} {/* 无数据状态 */}
{!isLoading && !error && geoData.length === 0 && ( {!isLoading && !error && geoData.length === 0 && (
<div className="flex justify-center items-center p-8 text-white"> <div className="flex justify-center items-center p-8 text-foreground">
<p>No geographic data available</p> <p>No geographic data available</p>
</div> </div>
)} )}
</div> </div>
{/* 提示信息 */} {/* 提示信息 */}
<div className="mt-4 text-sm text-white"> <div className="mt-4 text-sm text-foreground">
<p>Note: Geographic data is based on IP addresses and may not be 100% accurate.</p> <p>Note: Geographic data is based on IP addresses and may not be 100% accurate.</p>
</div> </div>
</div> </div>

8
app/api/types.ts
View File

@@ -93,13 +93,9 @@ export interface TimeSeriesData {
} }
export interface GeoData { export interface GeoData {
location?: string; location: string;
country?: string;
region?: string;
city?: string;
visits: number; visits: number;
uniqueVisitors?: number; visitors: number;
visitors?: number;
percentage: number; percentage: number;
} }

2
app/components/layout/Navbar.tsx
View File

@@ -1,7 +1,6 @@
'use client'; 'use client';
import Link from 'next/link'; import Link from 'next/link';
import ThemeToggle from "../ui/ThemeToggle";
export default function Navbar() { export default function Navbar() {
return ( return (
@@ -40,7 +39,6 @@ export default function Navbar() {
</nav> </nav>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<ThemeToggle />
<button className="p-2 text-sm text-foreground rounded-md gradient-border"> <button className="p-2 text-sm text-foreground rounded-md gradient-border">
Upgrade Upgrade
</button> </button>

64
app/components/ui/ThemeToggle.tsx
View File

@@ -1,64 +0,0 @@
"use client";
import { useState, useEffect } from 'react';
export default function ThemeToggle() {
const [darkMode, setDarkMode] = useState(false);
// Initialize theme on component mount
useEffect(() => {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
setDarkMode(isDarkMode);
if (isDarkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, []);
// Update theme when darkMode state changes
const toggleTheme = () => {
const newDarkMode = !darkMode;
setDarkMode(newDarkMode);
localStorage.setItem('darkMode', newDarkMode.toString());
if (newDarkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
return (
<button
onClick={toggleTheme}
className="p-2 rounded-md bg-card-bg border border-card-border hover:bg-card-bg/80 transition-colors"
aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
>
{darkMode ? (
<svg
className="w-5 h-5 text-accent-yellow"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
className="w-5 h-5 text-foreground"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
)}
</button>
);
}

24
app/globals.css
View File

@@ -30,30 +30,6 @@
--gradient-red: linear-gradient(135deg, #f43f5e, #e11d48); --gradient-red: linear-gradient(135deg, #f43f5e, #e11d48);
} }
.dark {
/* Dark Mode */
--background: #0f172a;
--foreground: #ffffff;
/* Card colors */
--card-bg: #1e293b;
--card-border: #334155;
/* Vibrant accent colors */
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-red: #f43f5e;
--accent-yellow: #f59e0b;
--accent-purple: #8b5cf6;
--accent-pink: #ec4899;
--accent-teal: #14b8a6;
--accent-orange: #f97316;
/* UI colors */
--text-secondary: #94a3b8;
--progress-bg: #334155;
}
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);

1
tailwind.config.ts
View File

@@ -6,7 +6,6 @@ const config: Config = {
"./components/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {