Compare commits
3 Commits
b187bdefdf
...
4b7fb7a887
| Author | SHA1 | Date | |
|---|---|---|---|
| 4b7fb7a887 | |||
| bdae5c164c | |||
| 9fa61ccf8d |
@@ -1,483 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { format, subDays } from 'date-fns';
|
|
||||||
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
|
||||||
import TimeSeriesChart from '@/app/components/charts/TimeSeriesChart';
|
|
||||||
import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
|
|
||||||
import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
|
|
||||||
import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
|
||||||
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
|
||||||
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
|
|
||||||
import { TagSelector } from '@/app/components/ui/TagSelector';
|
|
||||||
|
|
||||||
// 事件类型定义
|
|
||||||
interface Event {
|
|
||||||
event_id?: string;
|
|
||||||
url_id: string;
|
|
||||||
url: string;
|
|
||||||
event_type: string;
|
|
||||||
visitor_id: string;
|
|
||||||
created_at: string;
|
|
||||||
event_time?: string;
|
|
||||||
referrer?: string;
|
|
||||||
browser?: string;
|
|
||||||
os?: string;
|
|
||||||
device_type?: string;
|
|
||||||
country?: string;
|
|
||||||
city?: string;
|
|
||||||
event_attributes?: string;
|
|
||||||
link_attributes?: string;
|
|
||||||
user_attributes?: string;
|
|
||||||
link_label?: string;
|
|
||||||
link_original_url?: string;
|
|
||||||
team_name?: string;
|
|
||||||
project_name?: string;
|
|
||||||
link_id?: string;
|
|
||||||
link_slug?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化日期函数
|
|
||||||
const formatDate = (dateString: string | undefined) => {
|
|
||||||
if (!dateString) return '';
|
|
||||||
try {
|
|
||||||
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
|
|
||||||
} catch {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 解析JSON字符串
|
|
||||||
const parseJsonSafely = (jsonString: string) => {
|
|
||||||
if (!jsonString) return null;
|
|
||||||
try {
|
|
||||||
return JSON.parse(jsonString);
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取用户可读名称
|
|
||||||
const getUserDisplayName = (user: Record<string, unknown> | null) => {
|
|
||||||
if (!user) return '-';
|
|
||||||
if (typeof user.full_name === 'string') return user.full_name;
|
|
||||||
if (typeof user.name === 'string') return user.name;
|
|
||||||
if (typeof user.email === 'string') return user.email;
|
|
||||||
return '-';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提取链接和事件的重要信息
|
|
||||||
const extractEventInfo = (event: Event) => {
|
|
||||||
// 解析事件属性
|
|
||||||
const eventAttrs = parseJsonSafely(event.event_attributes || '{}');
|
|
||||||
|
|
||||||
// 解析链接属性
|
|
||||||
const linkAttrs = parseJsonSafely(event.link_attributes || '{}');
|
|
||||||
|
|
||||||
// 解析用户属性
|
|
||||||
const userAttrs = parseJsonSafely(event.user_attributes || '{}');
|
|
||||||
|
|
||||||
return {
|
|
||||||
eventTime: event.created_at || event.event_time,
|
|
||||||
linkName: event.link_label || linkAttrs?.name || eventAttrs?.link_name || event.link_slug || '-',
|
|
||||||
originalUrl: event.link_original_url || eventAttrs?.origin_url || '-',
|
|
||||||
eventType: event.event_type || '-',
|
|
||||||
visitorId: event.visitor_id?.substring(0, 8) || '-',
|
|
||||||
referrer: eventAttrs?.referrer || '-',
|
|
||||||
location: event.country ? (event.city ? `${event.city}, ${event.country}` : event.country) : '-',
|
|
||||||
device: event.device_type || '-',
|
|
||||||
browser: event.browser || '-',
|
|
||||||
os: event.os || '-',
|
|
||||||
userInfo: getUserDisplayName(userAttrs),
|
|
||||||
teamName: event.team_name || '-',
|
|
||||||
projectName: event.project_name || '-'
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function DashboardPage() {
|
|
||||||
// 默认日期范围为最近7天
|
|
||||||
const today = new Date();
|
|
||||||
const [dateRange, setDateRange] = useState({
|
|
||||||
from: subDays(today, 7), // 7天前
|
|
||||||
to: today // 今天
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加团队选择状态 - 使用数组支持多选
|
|
||||||
const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
|
|
||||||
// 添加项目选择状态 - 使用数组支持多选
|
|
||||||
const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
|
|
||||||
// 添加标签选择状态 - 使用数组支持多选
|
|
||||||
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [summary, setSummary] = useState<EventsSummary | null>(null);
|
|
||||||
const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
|
|
||||||
const [geoData, setGeoData] = useState<GeoData[]>([]);
|
|
||||||
const [deviceData, setDeviceData] = useState<DeviceAnalyticsType | null>(null);
|
|
||||||
const [events, setEvents] = useState<Event[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
|
||||||
const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
|
||||||
|
|
||||||
// 构建基础URL和查询参数
|
|
||||||
const baseUrl = '/api/events';
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
startTime,
|
|
||||||
endTime
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加团队ID参数 - 支持多个团队
|
|
||||||
if (selectedTeamIds.length > 0) {
|
|
||||||
selectedTeamIds.forEach(teamId => {
|
|
||||||
params.append('teamId', teamId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加项目ID参数 - 支持多个项目
|
|
||||||
if (selectedProjectIds.length > 0) {
|
|
||||||
selectedProjectIds.forEach(projectId => {
|
|
||||||
params.append('projectId', projectId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加标签ID参数 - 支持多个标签
|
|
||||||
if (selectedTagIds.length > 0) {
|
|
||||||
selectedTagIds.forEach(tagId => {
|
|
||||||
params.append('tagId', tagId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 并行获取所有数据
|
|
||||||
const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
|
|
||||||
fetch(`${baseUrl}/summary?${params.toString()}`),
|
|
||||||
fetch(`${baseUrl}/time-series?${params.toString()}`),
|
|
||||||
fetch(`${baseUrl}/geo?${params.toString()}`),
|
|
||||||
fetch(`${baseUrl}/devices?${params.toString()}`),
|
|
||||||
fetch(`${baseUrl}?${params.toString()}`)
|
|
||||||
]);
|
|
||||||
|
|
||||||
const [summaryData, timeSeriesData, geoData, deviceData, eventsData] = await Promise.all([
|
|
||||||
summaryRes.json(),
|
|
||||||
timeSeriesRes.json(),
|
|
||||||
geoRes.json(),
|
|
||||||
deviceRes.json(),
|
|
||||||
eventsRes.json()
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (!summaryRes.ok) throw new Error(summaryData.error || 'Failed to fetch summary data');
|
|
||||||
if (!timeSeriesRes.ok) throw new Error(timeSeriesData.error || 'Failed to fetch time series data');
|
|
||||||
if (!geoRes.ok) throw new Error(geoData.error || 'Failed to fetch geo data');
|
|
||||||
if (!deviceRes.ok) throw new Error(deviceData.error || 'Failed to fetch device data');
|
|
||||||
if (!eventsRes.ok) throw new Error(eventsData.error || 'Failed to fetch events data');
|
|
||||||
|
|
||||||
setSummary(summaryData.data);
|
|
||||||
setTimeSeriesData(timeSeriesData.data);
|
|
||||||
setGeoData(geoData.data);
|
|
||||||
setDeviceData(deviceData.data);
|
|
||||||
setEvents(eventsData.data || []);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
|
||||||
<div className="text-red-500">{error}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-4 py-8">
|
|
||||||
<div className="flex justify-between items-center mb-8">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
|
|
||||||
<div className="flex flex-col gap-4 md:flex-row md:items-center">
|
|
||||||
<TeamSelector
|
|
||||||
value={selectedTeamIds}
|
|
||||||
onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
|
|
||||||
className="w-[250px]"
|
|
||||||
multiple={true}
|
|
||||||
/>
|
|
||||||
<ProjectSelector
|
|
||||||
value={selectedProjectIds}
|
|
||||||
onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
|
|
||||||
className="w-[250px]"
|
|
||||||
multiple={true}
|
|
||||||
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
|
||||||
/>
|
|
||||||
<TagSelector
|
|
||||||
value={selectedTagIds}
|
|
||||||
onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
|
|
||||||
className="w-[250px]"
|
|
||||||
multiple={true}
|
|
||||||
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
|
||||||
/>
|
|
||||||
<DateRangePicker
|
|
||||||
value={dateRange}
|
|
||||||
onChange={setDateRange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 显示团队选择信息 */}
|
|
||||||
{selectedTeamIds.length > 0 && (
|
|
||||||
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
|
||||||
<span className="text-blue-700 font-medium mr-2">
|
|
||||||
{selectedTeamIds.length === 1 ? 'Team filter:' : 'Teams filter:'}
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{selectedTeamIds.map(teamId => (
|
|
||||||
<span key={teamId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
|
||||||
{teamId}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTeamIds(selectedTeamIds.filter(id => id !== teamId))}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{selectedTeamIds.length > 0 && (
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTeamIds([])}
|
|
||||||
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
|
||||||
>
|
|
||||||
Clear all
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 显示项目选择信息 */}
|
|
||||||
{selectedProjectIds.length > 0 && (
|
|
||||||
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
|
||||||
<span className="text-blue-700 font-medium mr-2">
|
|
||||||
{selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{selectedProjectIds.map(projectId => (
|
|
||||||
<span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
|
||||||
{projectId}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{selectedProjectIds.length > 0 && (
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedProjectIds([])}
|
|
||||||
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
|
||||||
>
|
|
||||||
Clear all
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 显示标签选择信息 */}
|
|
||||||
{selectedTagIds.length > 0 && (
|
|
||||||
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
|
||||||
<span className="text-blue-700 font-medium mr-2">
|
|
||||||
{selectedTagIds.length === 1 ? 'Tag filter:' : 'Tags filter:'}
|
|
||||||
</span>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{selectedTagIds.map(tagId => (
|
|
||||||
<span key={tagId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
|
||||||
{tagId}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTagIds(selectedTagIds.filter(id => id !== tagId))}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{selectedTagIds.length > 0 && (
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTagIds([])}
|
|
||||||
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
|
||||||
>
|
|
||||||
Clear all
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 仪表板内容 */}
|
|
||||||
<>
|
|
||||||
{summary && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
|
||||||
<h3 className="text-sm font-medium text-gray-500">Total Events</h3>
|
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
|
||||||
{typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
|
||||||
<h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
|
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
|
||||||
{typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
|
||||||
<h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
|
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
|
||||||
{typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
|
||||||
<h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
|
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
|
||||||
{summary.averageTimeSpent?.toFixed(1) || '0'}s
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
|
|
||||||
<div className="h-96">
|
|
||||||
<TimeSeriesChart data={timeSeriesData} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-8">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
|
|
||||||
{deviceData && <DevicePieCharts data={deviceData} />}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
|
|
||||||
<GeoAnalytics data={geoData} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 事件列表部分 */}
|
|
||||||
<div className="bg-white rounded-lg shadow overflow-hidden mb-8">
|
|
||||||
<div className="p-6 border-b border-gray-200">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="min-w-full divide-y divide-gray-200">
|
|
||||||
<thead className="bg-gray-50">
|
|
||||||
<tr>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Time
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Link Name
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Original URL
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Event Type
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
User
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Team/Project
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Device Info
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
|
||||||
{events.map((event, index) => {
|
|
||||||
const info = extractEventInfo(event);
|
|
||||||
return (
|
|
||||||
<tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
{formatDate(info.eventTime)}
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
||||||
<span className="font-medium">{info.linkName}</span>
|
|
||||||
<div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
|
|
||||||
ID: {event.link_id?.substring(0, 8) || '-'}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
|
|
||||||
<a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
|
|
||||||
{info.originalUrl}
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
|
||||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
|
||||||
info.eventType === 'click'
|
|
||||||
? 'bg-green-100 text-green-800'
|
|
||||||
: 'bg-blue-100 text-blue-800'
|
|
||||||
}`}>
|
|
||||||
{info.eventType}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="font-medium">{info.userInfo}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="font-medium">{info.teamName}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-xs inline-flex items-center mb-1">
|
|
||||||
<span className="font-medium">Device:</span>
|
|
||||||
<span className="ml-1">{info.device}</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-xs inline-flex items-center mb-1">
|
|
||||||
<span className="font-medium">Browser:</span>
|
|
||||||
<span className="ml-1">{info.browser}</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-xs inline-flex items-center">
|
|
||||||
<span className="font-medium">OS:</span>
|
|
||||||
<span className="ml-1">{info.os}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 表格为空状态 */}
|
|
||||||
{!loading && events.length === 0 && (
|
|
||||||
<div className="flex justify-center items-center p-8 text-gray-500">
|
|
||||||
No events found
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
1
app/(app)/geo-analytics/page.tsx
Normal file
1
app/(app)/geo-analytics/page.tsx
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
@@ -6,10 +6,18 @@ export async function GET(request: NextRequest) {
|
|||||||
try {
|
try {
|
||||||
const searchParams = request.nextUrl.searchParams;
|
const searchParams = request.nextUrl.searchParams;
|
||||||
|
|
||||||
|
// 获取可能存在的多个团队、项目和标签ID
|
||||||
|
const teamIds = searchParams.getAll('teamId');
|
||||||
|
const projectIds = searchParams.getAll('projectId');
|
||||||
|
const tagIds = searchParams.getAll('tagId');
|
||||||
|
|
||||||
const summary = await getEventsSummary({
|
const summary = await getEventsSummary({
|
||||||
startTime: searchParams.get('startTime') || undefined,
|
startTime: searchParams.get('startTime') || undefined,
|
||||||
endTime: searchParams.get('endTime') || undefined,
|
endTime: searchParams.get('endTime') || undefined,
|
||||||
linkId: searchParams.get('linkId') || undefined
|
linkId: searchParams.get('linkId') || undefined,
|
||||||
|
teamIds: teamIds.length > 0 ? teamIds : undefined,
|
||||||
|
projectIds: projectIds.length > 0 ? projectIds : undefined,
|
||||||
|
tagIds: tagIds.length > 0 ? tagIds : undefined
|
||||||
});
|
});
|
||||||
|
|
||||||
const response: ApiResponse<typeof summary> = {
|
const response: ApiResponse<typeof summary> = {
|
||||||
|
|||||||
51
app/components/layout/Header.tsx
Normal file
51
app/components/layout/Header.tsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useAuth } from '@/lib/auth';
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const { user, signOut } = useAuth();
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
await signOut();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="w-full py-4 border-b border-gray-200 bg-white">
|
||||||
|
<div className="container flex items-center justify-between px-4 mx-auto">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Link href="/" className="flex items-center space-x-2">
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-blue-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||||
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||||
|
</svg>
|
||||||
|
<span className="text-xl font-bold text-gray-900">ShortURL Analytics</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{user && (
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-sm text-gray-700">
|
||||||
|
{user.email}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@ import '@radix-ui/themes/styles.css';
|
|||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { AuthProvider } from '@/lib/auth';
|
import { AuthProvider } from '@/lib/auth';
|
||||||
import { Theme } from '@radix-ui/themes';
|
import { Theme } from '@radix-ui/themes';
|
||||||
|
import Header from '@/app/components/layout/Header';
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'ShortURL Analytics',
|
title: 'ShortURL Analytics',
|
||||||
@@ -19,6 +20,7 @@ export default function RootLayout({
|
|||||||
<body>
|
<body>
|
||||||
<Theme>
|
<Theme>
|
||||||
<AuthProvider>
|
<AuthProvider>
|
||||||
|
<Header />
|
||||||
{children}
|
{children}
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</Theme>
|
</Theme>
|
||||||
|
|||||||
@@ -14,10 +14,10 @@ export default function LoginPage() {
|
|||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [message, setMessage] = useState({ type: '', content: '' });
|
const [message, setMessage] = useState({ type: '', content: '' });
|
||||||
|
|
||||||
// 如果用户已登录，重定向到仪表板
|
// 如果用户已登录，重定向到首页
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user) {
|
if (user) {
|
||||||
router.push('/dashboard');
|
router.push('/');
|
||||||
}
|
}
|
||||||
}, [user, router]);
|
}, [user, router]);
|
||||||
|
|
||||||
|
|||||||
612
app/page.tsx
612
app/page.tsx
@@ -1,111 +1,517 @@
|
|||||||
import Link from 'next/link';
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { format, subDays } from 'date-fns';
|
||||||
|
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
||||||
|
import TimeSeriesChart from '@/app/components/charts/TimeSeriesChart';
|
||||||
|
import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
|
||||||
|
import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
|
||||||
|
import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
||||||
|
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
||||||
|
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
|
||||||
|
import { TagSelector } from '@/app/components/ui/TagSelector';
|
||||||
|
|
||||||
|
// 事件类型定义
|
||||||
|
interface Event {
|
||||||
|
event_id?: string;
|
||||||
|
url_id: string;
|
||||||
|
url: string;
|
||||||
|
event_type: string;
|
||||||
|
visitor_id: string;
|
||||||
|
created_at: string;
|
||||||
|
event_time?: string;
|
||||||
|
referrer?: string;
|
||||||
|
browser?: string;
|
||||||
|
os?: string;
|
||||||
|
device_type?: string;
|
||||||
|
country?: string;
|
||||||
|
city?: string;
|
||||||
|
event_attributes?: string;
|
||||||
|
link_attributes?: string;
|
||||||
|
user_attributes?: string;
|
||||||
|
link_label?: string;
|
||||||
|
link_original_url?: string;
|
||||||
|
team_name?: string;
|
||||||
|
project_name?: string;
|
||||||
|
link_id?: string;
|
||||||
|
link_slug?: string;
|
||||||
|
link_tags?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期函数
|
||||||
|
const formatDate = (dateString: string | undefined) => {
|
||||||
|
if (!dateString) return '';
|
||||||
|
try {
|
||||||
|
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
|
||||||
|
} catch {
|
||||||
|
return dateString;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 解析JSON字符串
|
||||||
|
const parseJsonSafely = (jsonString: string) => {
|
||||||
|
if (!jsonString) return null;
|
||||||
|
try {
|
||||||
|
return JSON.parse(jsonString);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取用户可读名称
|
||||||
|
const getUserDisplayName = (user: Record<string, unknown> | null) => {
|
||||||
|
if (!user) return '-';
|
||||||
|
if (typeof user.full_name === 'string') return user.full_name;
|
||||||
|
if (typeof user.name === 'string') return user.name;
|
||||||
|
if (typeof user.email === 'string') return user.email;
|
||||||
|
return '-';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提取链接和事件的重要信息
|
||||||
|
const extractEventInfo = (event: Event) => {
|
||||||
|
// 解析事件属性
|
||||||
|
const eventAttrs = parseJsonSafely(event.event_attributes || '{}');
|
||||||
|
|
||||||
|
// 解析链接属性
|
||||||
|
const linkAttrs = parseJsonSafely(event.link_attributes || '{}');
|
||||||
|
|
||||||
|
// 解析用户属性
|
||||||
|
const userAttrs = parseJsonSafely(event.user_attributes || '{}');
|
||||||
|
|
||||||
|
// 解析标签信息
|
||||||
|
let tags: string[] = [];
|
||||||
|
try {
|
||||||
|
if (event.link_tags) {
|
||||||
|
const parsedTags = JSON.parse(event.link_tags);
|
||||||
|
if (Array.isArray(parsedTags)) {
|
||||||
|
tags = parsedTags;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// 解析失败则保持空数组
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
eventTime: event.created_at || event.event_time,
|
||||||
|
linkName: event.link_label || linkAttrs?.name || eventAttrs?.link_name || event.link_slug || '-',
|
||||||
|
originalUrl: event.link_original_url || eventAttrs?.origin_url || '-',
|
||||||
|
eventType: event.event_type || '-',
|
||||||
|
visitorId: event.visitor_id?.substring(0, 8) || '-',
|
||||||
|
referrer: eventAttrs?.referrer || '-',
|
||||||
|
location: event.country ? (event.city ? `${event.city}, ${event.country}` : event.country) : '-',
|
||||||
|
device: event.device_type || '-',
|
||||||
|
browser: event.browser || '-',
|
||||||
|
os: event.os || '-',
|
||||||
|
userInfo: getUserDisplayName(userAttrs),
|
||||||
|
teamName: event.team_name || '-',
|
||||||
|
projectName: event.project_name || '-',
|
||||||
|
tags: tags
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const sections = [
|
// 默认日期范围为最近7天
|
||||||
{
|
const today = new Date();
|
||||||
title: 'Dashboard',
|
const [dateRange, setDateRange] = useState({
|
||||||
description: 'Get an overview of your link performance with key metrics and trends.',
|
from: subDays(today, 7), // 7天前
|
||||||
href: '/dashboard',
|
to: today // 今天
|
||||||
icon: (
|
});
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
// 添加团队选择状态 - 使用数组支持多选
|
||||||
</svg>
|
const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
|
||||||
),
|
// 添加项目选择状态 - 使用数组支持多选
|
||||||
},
|
const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
|
||||||
{
|
// 添加标签选择状态 - 使用数组支持多选
|
||||||
title: 'Events',
|
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
|
||||||
description: 'Track and analyze all events including clicks, conversions, and more.',
|
|
||||||
href: '/events',
|
const [loading, setLoading] = useState(true);
|
||||||
icon: (
|
const [error, setError] = useState<string | null>(null);
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
const [summary, setSummary] = useState<EventsSummary | null>(null);
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
|
||||||
</svg>
|
const [geoData, setGeoData] = useState<GeoData[]>([]);
|
||||||
),
|
const [deviceData, setDeviceData] = useState<DeviceAnalyticsType | null>(null);
|
||||||
},
|
const [events, setEvents] = useState<Event[]>([]);
|
||||||
{
|
|
||||||
title: 'Geographic',
|
useEffect(() => {
|
||||||
description: 'See where your visitors are coming from with detailed location data.',
|
const fetchData = async () => {
|
||||||
href: '/analytics/geo',
|
setLoading(true);
|
||||||
icon: (
|
setError(null);
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
try {
|
||||||
</svg>
|
const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
||||||
),
|
const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
||||||
},
|
|
||||||
{
|
// 构建基础URL和查询参数
|
||||||
title: 'Devices',
|
const baseUrl = '/api/events';
|
||||||
description: 'Understand what devices, browsers, and operating systems your visitors use.',
|
const params = new URLSearchParams({
|
||||||
href: '/analytics/devices',
|
startTime,
|
||||||
icon: (
|
endTime
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
});
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
||||||
</svg>
|
// 添加团队ID参数 - 支持多个团队
|
||||||
),
|
if (selectedTeamIds.length > 0) {
|
||||||
},
|
selectedTeamIds.forEach(teamId => {
|
||||||
];
|
params.append('teamId', teamId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加项目ID参数 - 支持多个项目
|
||||||
|
if (selectedProjectIds.length > 0) {
|
||||||
|
selectedProjectIds.forEach(projectId => {
|
||||||
|
params.append('projectId', projectId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加标签ID参数 - 支持多个标签
|
||||||
|
if (selectedTagIds.length > 0) {
|
||||||
|
selectedTagIds.forEach(tagId => {
|
||||||
|
params.append('tagId', tagId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 并行获取所有数据
|
||||||
|
const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
|
||||||
|
fetch(`${baseUrl}/summary?${params.toString()}`),
|
||||||
|
fetch(`${baseUrl}/time-series?${params.toString()}`),
|
||||||
|
fetch(`${baseUrl}/geo?${params.toString()}`),
|
||||||
|
fetch(`${baseUrl}/devices?${params.toString()}`),
|
||||||
|
fetch(`${baseUrl}?${params.toString()}`)
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [summaryData, timeSeriesData, geoData, deviceData, eventsData] = await Promise.all([
|
||||||
|
summaryRes.json(),
|
||||||
|
timeSeriesRes.json(),
|
||||||
|
geoRes.json(),
|
||||||
|
deviceRes.json(),
|
||||||
|
eventsRes.json()
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!summaryRes.ok) throw new Error(summaryData.error || 'Failed to fetch summary data');
|
||||||
|
if (!timeSeriesRes.ok) throw new Error(timeSeriesData.error || 'Failed to fetch time series data');
|
||||||
|
if (!geoRes.ok) throw new Error(geoData.error || 'Failed to fetch geo data');
|
||||||
|
if (!deviceRes.ok) throw new Error(deviceData.error || 'Failed to fetch device data');
|
||||||
|
if (!eventsRes.ok) throw new Error(eventsData.error || 'Failed to fetch events data');
|
||||||
|
|
||||||
|
setSummary(summaryData.data);
|
||||||
|
setTimeSeriesData(timeSeriesData.data);
|
||||||
|
setGeoData(geoData.data);
|
||||||
|
setDeviceData(deviceData.data);
|
||||||
|
setEvents(eventsData.data || []);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="text-red-500">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<header className="bg-white dark:bg-gray-800 shadow">
|
<div className="flex justify-between items-center mb-8">
|
||||||
<div className="container mx-auto px-4 py-4">
|
<h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-col gap-4 md:flex-row md:items-center">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
<TeamSelector
|
||||||
ShortURL Analytics
|
value={selectedTeamIds}
|
||||||
</h1>
|
onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
|
||||||
<div>
|
className="w-[250px]"
|
||||||
<Link
|
multiple={true}
|
||||||
href="/login"
|
/>
|
||||||
className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
<ProjectSelector
|
||||||
>
|
value={selectedProjectIds}
|
||||||
登录
|
onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
|
||||||
</Link>
|
className="w-[250px]"
|
||||||
<Link
|
multiple={true}
|
||||||
href="/register"
|
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
||||||
className="ml-4 inline-block bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
/>
|
||||||
>
|
<TagSelector
|
||||||
注册
|
value={selectedTagIds}
|
||||||
</Link>
|
onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
|
||||||
</div>
|
className="w-[250px]"
|
||||||
</div>
|
multiple={true}
|
||||||
</div>
|
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
||||||
</header>
|
/>
|
||||||
|
<DateRangePicker
|
||||||
<div className="container mx-auto px-4 py-16">
|
value={dateRange}
|
||||||
<div className="max-w-4xl mx-auto">
|
onChange={setDateRange}
|
||||||
<div className="text-center mb-12">
|
/>
|
||||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
|
||||||
Welcome to ShortURL Analytics
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
||||||
Get detailed insights into your link performance and visitor behavior
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
{sections.map((section) => (
|
|
||||||
<Link
|
|
||||||
key={section.title}
|
|
||||||
href={section.href}
|
|
||||||
className="group block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
|
|
||||||
>
|
|
||||||
<div className="flex items-center mb-4">
|
|
||||||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg mr-4">
|
|
||||||
<div className="text-blue-600 dark:text-blue-300">
|
|
||||||
{section.icon}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
|
|
||||||
{section.title}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
{section.description}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 显示团队选择信息 */}
|
||||||
|
{selectedTeamIds.length > 0 && (
|
||||||
|
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
||||||
|
<span className="text-blue-700 font-medium mr-2">
|
||||||
|
{selectedTeamIds.length === 1 ? 'Team filter:' : 'Teams filter:'}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedTeamIds.map(teamId => (
|
||||||
|
<span key={teamId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||||
|
{teamId}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTeamIds(selectedTeamIds.filter(id => id !== teamId))}
|
||||||
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{selectedTeamIds.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTeamIds([])}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
||||||
|
>
|
||||||
|
Clear all
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 显示项目选择信息 */}
|
||||||
|
{selectedProjectIds.length > 0 && (
|
||||||
|
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
||||||
|
<span className="text-blue-700 font-medium mr-2">
|
||||||
|
{selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedProjectIds.map(projectId => (
|
||||||
|
<span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||||
|
{projectId}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
|
||||||
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{selectedProjectIds.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedProjectIds([])}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
||||||
|
>
|
||||||
|
Clear all
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 显示标签选择信息 */}
|
||||||
|
{selectedTagIds.length > 0 && (
|
||||||
|
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
||||||
|
<span className="text-blue-700 font-medium mr-2">
|
||||||
|
{selectedTagIds.length === 1 ? 'Tag filter:' : 'Tags filter:'}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedTagIds.map(tagId => (
|
||||||
|
<span key={tagId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||||
|
{tagId}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTagIds(selectedTagIds.filter(id => id !== tagId))}
|
||||||
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{selectedTagIds.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTagIds([])}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
||||||
|
>
|
||||||
|
Clear all
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 事件列表部分 - 现在放在最上面 */}
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden mb-8">
|
||||||
|
<div className="p-6 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Time
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Link Name
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Original URL
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Event Type
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Tags
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
User
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Team/Project
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Device Info
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{events.map((event, index) => {
|
||||||
|
const info = extractEventInfo(event);
|
||||||
|
return (
|
||||||
|
<tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{formatDate(info.eventTime)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||||
|
<span className="font-medium">{info.linkName}</span>
|
||||||
|
<div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
|
||||||
|
ID: {event.link_id?.substring(0, 8) || '-'}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
|
||||||
|
{info.originalUrl}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||||
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||||
|
info.eventType === 'click'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-blue-100 text-blue-800'
|
||||||
|
}`}>
|
||||||
|
{info.eventType}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{info.tags && info.tags.length > 0 ? (
|
||||||
|
info.tags.map((tag, idx) => (
|
||||||
|
<span
|
||||||
|
key={idx}
|
||||||
|
className="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-400">-</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="font-medium">{info.userInfo}</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="font-medium">{info.teamName}</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xs inline-flex items-center mb-1">
|
||||||
|
<span className="font-medium">Device:</span>
|
||||||
|
<span className="ml-1">{info.device}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs inline-flex items-center mb-1">
|
||||||
|
<span className="font-medium">Browser:</span>
|
||||||
|
<span className="ml-1">{info.browser}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs inline-flex items-center">
|
||||||
|
<span className="font-medium">OS:</span>
|
||||||
|
<span className="ml-1">{info.os}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 表格为空状态 */}
|
||||||
|
{!loading && events.length === 0 && (
|
||||||
|
<div className="flex justify-center items-center p-8 text-gray-500">
|
||||||
|
No events found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 仪表板内容 - 现在放在事件列表之后 */}
|
||||||
|
<>
|
||||||
|
{summary && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<h3 className="text-sm font-medium text-gray-500">Total Events</h3>
|
||||||
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
|
{typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
|
||||||
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
|
{typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
|
||||||
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
|
{typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
|
||||||
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
|
{summary.averageTimeSpent?.toFixed(1) || '0'}s
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
|
||||||
|
<div className="h-96">
|
||||||
|
<TimeSeriesChart data={timeSeriesData} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
|
||||||
|
{deviceData && <DevicePieCharts data={deviceData} />}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
|
||||||
|
<GeoAnalytics data={geoData} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -57,6 +57,9 @@ export async function getEventsSummary(params: {
|
|||||||
startTime?: string;
|
startTime?: string;
|
||||||
endTime?: string;
|
endTime?: string;
|
||||||
linkId?: string;
|
linkId?: string;
|
||||||
|
teamIds?: string[];
|
||||||
|
projectIds?: string[];
|
||||||
|
tagIds?: string[];
|
||||||
}): Promise<EventsSummary> {
|
}): Promise<EventsSummary> {
|
||||||
const filter = buildFilter(params);
|
const filter = buildFilter(params);
|
||||||
|
|
||||||
|
|||||||
@@ -56,16 +56,29 @@ export function buildFilter(params: Partial<EventsQueryParams>): string {
|
|||||||
filters.push(`user_id = '${params.userId}'`);
|
filters.push(`user_id = '${params.userId}'`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 团队ID过滤
|
// 团队ID过滤 - 支持多选
|
||||||
if (params.teamId) {
|
if (params.teamIds && params.teamIds.length > 0) {
|
||||||
|
const teamValues = params.teamIds.map(id => `'${id}'`).join(', ');
|
||||||
|
filters.push(`team_id IN (${teamValues})`);
|
||||||
|
} else if (params.teamId) {
|
||||||
filters.push(`team_id = '${params.teamId}'`);
|
filters.push(`team_id = '${params.teamId}'`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 项目ID过滤
|
// 项目ID过滤 - 支持多选
|
||||||
if (params.projectId) {
|
if (params.projectIds && params.projectIds.length > 0) {
|
||||||
|
const projectValues = params.projectIds.map(id => `'${id}'`).join(', ');
|
||||||
|
filters.push(`project_id IN (${projectValues})`);
|
||||||
|
} else if (params.projectId) {
|
||||||
filters.push(`project_id = '${params.projectId}'`);
|
filters.push(`project_id = '${params.projectId}'`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 标签ID过滤 - 支持多选
|
||||||
|
if (params.tagIds && params.tagIds.length > 0) {
|
||||||
|
// 假设我们在link_tags字段存储标签ID的JSON数组
|
||||||
|
const tagConditions = params.tagIds.map(id => `arrayExists(x -> x = '${id}', JSONExtractArrayRaw(link_tags))`);
|
||||||
|
filters.push(`(${tagConditions.join(' OR ')})`);
|
||||||
|
}
|
||||||
|
|
||||||
return filters.length > 0 ? `WHERE ${filters.join(' AND ')}` : '';
|
return filters.length > 0 ? `WHERE ${filters.join(' AND ')}` : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,10 @@ export interface EventsQueryParams {
|
|||||||
linkSlug?: string;
|
linkSlug?: string;
|
||||||
userId?: string;
|
userId?: string;
|
||||||
teamId?: string;
|
teamId?: string;
|
||||||
|
teamIds?: string[]; // 团队ID数组，支持多选
|
||||||
projectId?: string;
|
projectId?: string;
|
||||||
|
projectIds?: string[]; // 项目ID数组，支持多选
|
||||||
|
tagIds?: string[]; // 标签ID数组，支持多选
|
||||||
page?: number;
|
page?: number;
|
||||||
pageSize?: number;
|
pageSize?: number;
|
||||||
sortBy?: string;
|
sortBy?: string;
|
||||||
|
|||||||
1
types/react-simple-maps.d.ts
vendored
Normal file
1
types/react-simple-maps.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
Reference in New Issue
Block a user