geo tab

app/api/events/geo/route.ts

@@ -11,11 +11,14 @@ export async function GET(request: NextRequest) {
     const projectIds = searchParams.getAll('projectId');
     const tagIds = searchParams.getAll('tagId');
     
+    // Get the groupBy parameter
+    const groupBy = searchParams.get('groupBy') as 'country' | 'city' | 'region' | 'continent' | null;
+    
     const data = await getGeoAnalytics({
       startTime: searchParams.get('startTime') || undefined,
       endTime: searchParams.get('endTime') || undefined,
       linkId: searchParams.get('linkId') || undefined,
-      groupBy: (searchParams.get('groupBy') || 'country') as 'country' | 'city',
+      groupBy: groupBy || undefined,
       // 添加团队、项目和标签筛选
       teamIds: teamIds.length > 0 ? teamIds : undefined,
       projectIds: projectIds.length > 0 ? projectIds : undefined,

app/api/types.ts

@@ -94,6 +94,7 @@ export interface TimeSeriesData {
 
 export interface GeoData {
   location: string;
+  area: string;
   visits: number;
   visitors: number;
   percentage: number;

app/components/analytics/GeoAnalytics.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from 'react';
 import { GeoData } from '@/app/api/types';
 
 interface GeoAnalyticsProps {
@@ -7,6 +8,8 @@ interface GeoAnalyticsProps {
 }
 
 export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
+  const [viewMode, setViewMode] = useState<'country' | 'city' | 'region' | 'continent'>('country');
+
   // 安全地格式化数字
   const formatNumber = (value: number | undefined | null): string => {
     if (value === undefined || value === null) return '0';
@@ -21,13 +24,56 @@ export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
 
   const sortedData = [...data].sort((a, b) => (b.visits || 0) - (a.visits || 0));
 
+  // Handle tab selection - only change local view mode
+  const handleViewModeChange = (mode: 'country' | 'city' | 'region' | 'continent') => {
+    setViewMode(mode);
+    // Only change the local view mode, no callback to parent
+  };
+
   return (
+    <div>
+      {/* Tabs for geographic levels */}
+      <div className="flex border-b mb-6">
+        <button 
+          onClick={() => handleViewModeChange('country')}
+          className={`px-4 py-2 ${viewMode === 'country' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
+        >
+          Countries
+        </button>
+        <button 
+          onClick={() => handleViewModeChange('city')}
+          className={`px-4 py-2 ${viewMode === 'city' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
+        >
+          Cities
+        </button>
+        <button 
+          onClick={() => handleViewModeChange('region')}
+          className={`px-4 py-2 ${viewMode === 'region' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
+        >
+          Regions
+        </button>
+        <button 
+          onClick={() => handleViewModeChange('continent')}
+          className={`px-4 py-2 ${viewMode === 'continent' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
+        >
+          Continents
+        </button>
+      </div>
+
+      {/* Table with added area column */}
       <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">
-              IP Address
+                {viewMode === 'country' ? 'Country' : 
+                 viewMode === 'city' ? 'City' : 
+                 viewMode === 'region' ? 'Region' : 'Continent'}
+              </th>
+              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {viewMode === 'country' ? 'Countries' : 
+                 viewMode === 'city' ? 'Cities' : 
+                 viewMode === 'region' ? 'Regions' : 'Continents'}
               </th>
               <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Visits
@@ -47,6 +93,9 @@ export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                     {item.location || 'Unknown'}
                   </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {item.area || ''}
+                  </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                     {formatNumber(item.visits)}
                   </td>
@@ -68,13 +117,14 @@ export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
               ))
             ) : (
               <tr>
-              <td colSpan={4} className="px-6 py-4 text-center text-sm text-gray-500">
-                No IP data available
+                <td colSpan={5} className="px-6 py-4 text-center text-sm text-gray-500">
+                  No location data available
                 </td>
               </tr>
             )}
           </tbody>
         </table>
       </div>
+    </div>
   );
 } 

app/page.tsx

@@ -762,7 +762,40 @@ export default function HomePage() {
 
         <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} />
+          <GeoAnalytics 
+            data={geoData} 
+            onViewModeChange={(mode) => {
+              // 构建查询参数
+              const params = new URLSearchParams({
+                startTime: format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'"),
+                endTime: format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'"),
+                groupBy: mode
+              });
+              
+              // 添加其他筛选参数
+              if (selectedTeamIds.length > 0) {
+                selectedTeamIds.forEach(id => params.append('teamId', id));
+              }
+              
+              if (selectedProjectIds.length > 0) {
+                selectedProjectIds.forEach(id => params.append('projectId', id));
+              }
+              
+              if (selectedTagIds.length > 0) {
+                selectedTagIds.forEach(id => params.append('tagId', id));
+              }
+              
+              // 刷新地理位置数据
+              fetch(`/api/events/geo?${params}`)
+                .then(res => res.json())
+                .then(data => {
+                  if (data.success) {
+                    setGeoData(data.data);
+                  }
+                })
+                .catch(error => console.error('Failed to fetch geo data:', error));
+            }}
+          />
         </div>
       </>
     </div>

lib/analytics.ts

@@ -215,16 +215,24 @@ export async function getGeoAnalytics(params: {
   startTime?: string;
   endTime?: string;
   linkId?: string;
+  groupBy?: 'country' | 'city' | 'region' | 'continent';
   teamIds?: string[];
   projectIds?: string[];
   tagIds?: string[];
 }): Promise<GeoData[]> {
   const filter = buildFilter(params);
   
-  // Use IP address as the grouping field
+  // Choose grouping field based on selected view
+  let groupByField = 'country';
+  if (params.groupBy === 'city') groupByField = 'city';
+  else if (params.groupBy === 'region') groupByField = 'region';
+  else if (params.groupBy === 'continent') groupByField = 'continent';
+  else if (!params.groupBy) groupByField = 'ip_address'; // Default to IP address if no groupBy is specified
+  
   const query = `
     SELECT
-      ip_address as location,
+      COALESCE(${groupByField}, 'Unknown') as location,
+      '' as area, /* Area column - empty for now */
       count() as visits,
       uniq(ip_address) as visitors,
       count() * 100.0 / sum(count()) OVER () as percentage