From 57e16144a9ab9bebb2b9c94d2c2d4cb6bd2b0773 Mon Sep 17 00:00:00 2001 From: William Tso Date: Tue, 1 Apr 2025 22:26:46 +0800 Subject: [PATCH] team filter --- app/(app)/dashboard/page.tsx | 124 ++++++++++++++++++++++------------- 1 file changed, 77 insertions(+), 47 deletions(-) diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx index e53f2bb..412e119 100644 --- a/app/(app)/dashboard/page.tsx +++ b/app/(app)/dashboard/page.tsx @@ -1,12 +1,13 @@ "use client"; import { useState, useEffect } from 'react'; -import { format } from 'date-fns'; +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'; // 事件类型定义 interface Event { @@ -24,36 +25,6 @@ interface Event { city?: string; } -// 获取事件的函数 -const fetchEvents = async ( - startTime?: string, - endTime?: string, - urlId?: string, - eventType?: string -): Promise => { - try { - // 构建查询参数 - const params = new URLSearchParams(); - if (startTime) params.append('startTime', startTime); - if (endTime) params.append('endTime', endTime); - if (urlId) params.append('urlId', urlId); - if (eventType) params.append('eventType', eventType); - - // 发送请求 - const response = await fetch(`/api/events?${params.toString()}`); - - if (!response.ok) { - throw new Error('Failed to fetch events'); - } - - const data = await response.json(); - return data.data || []; - } catch (error) { - console.error('Error fetching events:', error); - return []; - } -}; - // 格式化日期函数 const formatDate = (dateString: string) => { if (!dateString) return ''; @@ -65,11 +36,15 @@ const formatDate = (dateString: string) => { }; export default function DashboardPage() { + // 默认日期范围为最近7天 + const today = new Date(); const [dateRange, setDateRange] = useState({ - from: new Date('2024-02-01'), - to: new Date('2025-03-05') + from: subDays(today, 7), // 7天前 + to: today // 今天 }); - + + // 添加团队选择状态 - 使用数组支持多选 + const [selectedTeamIds, setSelectedTeamIds] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [summary, setSummary] = useState(null); @@ -88,32 +63,49 @@ export default function DashboardPage() { 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, + ...(urlFilter && { urlId: urlFilter }) + }); + + // 添加团队ID参数 - 支持多个团队 + if (selectedTeamIds.length > 0) { + selectedTeamIds.forEach(teamId => { + params.append('teamId', teamId); + }); + } + // 并行获取所有数据 const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([ - fetch(`/api/events/summary?startTime=${startTime}&endTime=${endTime}`), - fetch(`/api/events/time-series?startTime=${startTime}&endTime=${endTime}`), - fetch(`/api/events/geo?startTime=${startTime}&endTime=${endTime}`), - fetch(`/api/events/devices?startTime=${startTime}&endTime=${endTime}`), - fetchEvents(startTime, endTime, urlFilter || undefined) + 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] = await Promise.all([ + const [summaryData, timeSeriesData, geoData, deviceData, eventsData] = await Promise.all([ summaryRes.json(), timeSeriesRes.json(), geoRes.json(), - deviceRes.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(eventsRes || []); + setEvents(eventsData.data || []); } catch (err) { setError(err instanceof Error ? err.message : 'An error occurred while fetching data'); } finally { @@ -122,7 +114,7 @@ export default function DashboardPage() { }; fetchData(); - }, [dateRange, urlFilter]); + }, [dateRange, urlFilter, selectedTeamIds]); if (loading) { return ( @@ -144,12 +136,50 @@ export default function DashboardPage() {

Analytics Dashboard

- +
+ setSelectedTeamIds(Array.isArray(value) ? value : [value])} + className="w-[250px]" + multiple={true} + /> + +
+ {/* 显示团队选择信息 */} + {selectedTeamIds.length > 0 && ( +
+ + {selectedTeamIds.length === 1 ? 'Team filter:' : 'Teams filter:'} + +
+ {selectedTeamIds.map(teamId => ( + + {teamId} + + + ))} + {selectedTeamIds.length > 0 && ( + + )} +
+
+ )} + {summary && (