rm dack

app/components/analytics/DeviceAnalytics.tsx

@@ -1,68 +1,52 @@
 "use client";
 
-import { useEffect, useRef } from 'react';
 import { DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
-import { Chart, PieController, ArcElement, Tooltip, Legend } from 'chart.js';
+
+interface CategoryItem {
+  name: string;
+  count: number;
+  percentage: number;
+}
 
 interface DeviceAnalyticsProps {
   data: DeviceAnalyticsType;
 }
 
-function StatCard({ title, items }: { title: string; items: { name: string; count: number; percentage: number }[] }) {
-  // 安全地格式化数字
-  const formatNumber = (value: number | string | undefined | null): string => {
-    if (value === undefined || value === null) return '0';
-    return typeof value === 'number' ? value.toLocaleString() : String(value);
-  };
-
-  // 安全地格式化百分比
-  const formatPercent = (value: number | undefined | null): string => {
-    if (value === undefined || value === null) return '0';
-    return value.toFixed(1);
-  };
-
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{title}</h3>
+export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
+  const renderCategory = (items: CategoryItem[], title: string) => (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
       <div className="space-y-4">
         {items.map((item, index) => (
           <div key={index}>
-            <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
-              <span>{item.name || 'Unknown'}</span>
-              <span>{formatNumber(item.count)} ({formatPercent(item.percentage)}%)</span>
+            <div className="flex justify-between text-sm text-gray-600 mb-1">
+              <span>{item.name}</span>
+              <span>{item.percentage.toFixed(1)}% ({item.count})</span>
             </div>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-              <div
-                className="bg-blue-500 h-2 rounded-full"
-                style={{ width: `${item.percentage || 0}%` }}
-              />
+            <div className="w-full bg-gray-200 rounded-full h-2">
+              <div 
+                className="bg-blue-600 h-2 rounded-full" 
+                style={{ width: `${item.percentage}%` }}
+              ></div>
             </div>
           </div>
         ))}
       </div>
     </div>
   );
-}
 
-export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
+  // Prepare device types data
+  const deviceItems = data.deviceTypes.map(item => ({
+    name: item.type || 'Unknown',
+    count: item.count,
+    percentage: item.percentage
+  }));
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <StatCard
-        title="Device Types"
-        items={(data.deviceTypes || []).map(item => ({
-          name: item.type ? (item.type.charAt(0).toUpperCase() + item.type.slice(1)) : 'Unknown',
-          count: item.count,
-          percentage: item.percentage
-        }))}
-      />
-      <StatCard
-        title="Browsers"
-        items={data.browsers || []}
-      />
-      <StatCard
-        title="Operating Systems"
-        items={data.operatingSystems || []}
-      />
+      {renderCategory(deviceItems, 'Device Types')}
+      {renderCategory(data.browsers, 'Browsers')}
+      {renderCategory(data.operatingSystems, 'Operating Systems')}
     </div>
   );
 }