680 lines
29 KiB
TypeScript
680 lines
29 KiB
TypeScript
"use client"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
BarChart,
|
||
Bar,
|
||
XAxis,
|
||
YAxis,
|
||
CartesianGrid,
|
||
Tooltip,
|
||
ResponsiveContainer,
|
||
PieChart,
|
||
Pie,
|
||
Cell,
|
||
Line,
|
||
ComposedChart,
|
||
} from "recharts"
|
||
import { Users, Eye, Star, TrendingUp, Clock, Activity, Calendar, AlertTriangle, Loader2 } from "lucide-react"
|
||
import { useState, useEffect } from "react"
|
||
|
||
export function AnalyticsDashboard() {
|
||
const [showHistoryModal, setShowHistoryModal] = useState(false)
|
||
const [selectedDateRange, setSelectedDateRange] = useState("近7天")
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [analyticsData, setAnalyticsData] = useState({
|
||
totalUsers: 0,
|
||
todayActiveUsers: 0,
|
||
todayActiveGrowth: 0,
|
||
avgRating: 0,
|
||
ratingGrowth: 0,
|
||
totalApps: 0,
|
||
newThisWeek: 0,
|
||
userGrowth: 0,
|
||
dailyUsageData: [],
|
||
categoryData: [],
|
||
topApps: [],
|
||
satisfactionRate: 0,
|
||
weeklyFeedback: 0
|
||
})
|
||
|
||
// 24小時使用數據 - 優化版本
|
||
const hourlyData = [
|
||
{ hour: "00", users: 39, period: "深夜", intensity: "low", cpuUsage: 25, memoryUsage: 45 },
|
||
{ hour: "01", users: 62, period: "深夜", intensity: "normal", cpuUsage: 22, memoryUsage: 43 },
|
||
{ hour: "02", users: 24, period: "深夜", intensity: "low", cpuUsage: 20, memoryUsage: 41 },
|
||
{ hour: "03", users: 40, period: "深夜", intensity: "low", cpuUsage: 18, memoryUsage: 40 },
|
||
{ hour: "04", users: 40, period: "深夜", intensity: "low", cpuUsage: 17, memoryUsage: 39 },
|
||
{ hour: "05", users: 55, period: "清晨", intensity: "normal", cpuUsage: 19, memoryUsage: 41 },
|
||
{ hour: "06", users: 26, period: "清晨", intensity: "low", cpuUsage: 28, memoryUsage: 48 },
|
||
{ hour: "07", users: 67, period: "清晨", intensity: "normal", cpuUsage: 35, memoryUsage: 52 },
|
||
{ hour: "08", users: 26, period: "工作時間", intensity: "normal", cpuUsage: 42, memoryUsage: 58 },
|
||
{ hour: "09", users: 89, period: "工作時間", intensity: "high", cpuUsage: 58, memoryUsage: 68 },
|
||
{ hour: "10", users: 88, period: "工作時間", intensity: "high", cpuUsage: 65, memoryUsage: 72 },
|
||
{ hour: "11", users: 129, period: "工作時間", intensity: "peak", cpuUsage: 72, memoryUsage: 76 },
|
||
{ hour: "12", users: 106, period: "工作時間", intensity: "peak", cpuUsage: 62, memoryUsage: 70 },
|
||
{ hour: "13", users: 105, period: "工作時間", intensity: "peak", cpuUsage: 68, memoryUsage: 74 },
|
||
{ hour: "14", users: 81, period: "工作時間", intensity: "high", cpuUsage: 78, memoryUsage: 82 },
|
||
{ hour: "15", users: 119, period: "工作時間", intensity: "peak", cpuUsage: 74, memoryUsage: 79 },
|
||
{ hour: "16", users: 126, period: "工作時間", intensity: "peak", cpuUsage: 67, memoryUsage: 73 },
|
||
{ hour: "17", users: 112, period: "工作時間", intensity: "peak", cpuUsage: 59, memoryUsage: 67 },
|
||
{ hour: "18", users: 22, period: "晚間", intensity: "low", cpuUsage: 45, memoryUsage: 58 },
|
||
{ hour: "19", users: 60, period: "晚間", intensity: "normal", cpuUsage: 38, memoryUsage: 53 },
|
||
{ hour: "20", users: 32, period: "晚間", intensity: "low", cpuUsage: 33, memoryUsage: 50 },
|
||
{ hour: "21", users: 22, period: "晚間", intensity: "low", cpuUsage: 29, memoryUsage: 47 },
|
||
{ hour: "22", users: 36, period: "晚間", intensity: "low", cpuUsage: 26, memoryUsage: 46 },
|
||
{ hour: "23", users: 66, period: "晚間", intensity: "normal", cpuUsage: 24, memoryUsage: 44 },
|
||
]
|
||
|
||
// 獲取顏色基於使用強度
|
||
const getBarColor = (intensity: string) => {
|
||
switch (intensity) {
|
||
case "peak":
|
||
return "#ef4444" // 紅色 - 高峰期
|
||
case "high":
|
||
return "#3b82f6" // 藍色 - 高使用期
|
||
case "normal":
|
||
return "#6b7280" // 灰藍色 - 正常期
|
||
case "low":
|
||
return "#9ca3af" // 灰色 - 低峰期
|
||
default:
|
||
return "#6b7280"
|
||
}
|
||
}
|
||
|
||
// 近7天使用趨勢數據（動態日期）
|
||
const getRecentDates = () => {
|
||
const dates = []
|
||
const today = new Date()
|
||
for (let i = 6; i >= 0; i--) {
|
||
const date = new Date(today)
|
||
date.setDate(today.getDate() - i)
|
||
dates.push({
|
||
date: `${date.getMonth() + 1}/${date.getDate()}`,
|
||
fullDate: date.toLocaleDateString("zh-TW"),
|
||
dayName: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()],
|
||
})
|
||
}
|
||
return dates
|
||
}
|
||
|
||
const recentDates = getRecentDates()
|
||
const dailyUsageData = [
|
||
{ ...recentDates[0], users: 245, sessions: 189, cpuPeak: 65, avgCpu: 45, memoryPeak: 58, requests: 1240 },
|
||
{ ...recentDates[1], users: 267, sessions: 203, cpuPeak: 68, avgCpu: 48, memoryPeak: 62, requests: 1356 },
|
||
{ ...recentDates[2], users: 289, sessions: 221, cpuPeak: 72, avgCpu: 52, memoryPeak: 65, requests: 1478 },
|
||
{ ...recentDates[3], users: 312, sessions: 245, cpuPeak: 75, avgCpu: 55, memoryPeak: 68, requests: 1589 },
|
||
{ ...recentDates[4], users: 298, sessions: 234, cpuPeak: 73, avgCpu: 53, memoryPeak: 66, requests: 1523 },
|
||
{ ...recentDates[5], users: 334, sessions: 267, cpuPeak: 78, avgCpu: 58, memoryPeak: 71, requests: 1678 },
|
||
{ ...recentDates[6], users: 356, sessions: 289, cpuPeak: 82, avgCpu: 62, memoryPeak: 75, requests: 1789 },
|
||
]
|
||
|
||
const categoryData = [
|
||
{ name: "AI工具", value: 35, color: "#3b82f6", users: 3083, apps: 45 },
|
||
{ name: "數據分析", value: 25, color: "#ef4444", users: 1565, apps: 32 },
|
||
{ name: "自動化", value: 20, color: "#10b981", users: 856, apps: 25 },
|
||
{ name: "機器學習", value: 15, color: "#f59e0b", users: 743, apps: 19 },
|
||
{ name: "其他", value: 5, color: "#8b5cf6", users: 234, apps: 6 },
|
||
]
|
||
|
||
const topApps = [
|
||
{ name: "智能客服助手", views: 1234, rating: 4.8, category: "AI工具" },
|
||
{ name: "數據視覺化平台", views: 987, rating: 4.6, category: "數據分析" },
|
||
{ name: "自動化工作流", views: 856, rating: 4.7, category: "自動化" },
|
||
{ name: "預測分析系統", views: 743, rating: 4.5, category: "機器學習" },
|
||
{ name: "文本分析工具", views: 692, rating: 4.4, category: "AI工具" },
|
||
]
|
||
|
||
// 獲取歷史數據
|
||
const getHistoricalData = (range: string) => {
|
||
const baseData = [
|
||
{ date: "12/1", users: 180, cpuPeak: 55, fullDate: "2024/12/1" },
|
||
{ date: "12/8", users: 210, cpuPeak: 62, fullDate: "2024/12/8" },
|
||
{ date: "12/15", users: 245, cpuPeak: 68, fullDate: "2024/12/15" },
|
||
{ date: "12/22", users: 280, cpuPeak: 74, fullDate: "2024/12/22" },
|
||
{ date: "12/29", users: 320, cpuPeak: 78, fullDate: "2024/12/29" },
|
||
{ date: "1/5", users: 298, cpuPeak: 73, fullDate: "2025/1/5" },
|
||
{ date: "1/12", users: 334, cpuPeak: 79, fullDate: "2025/1/12" },
|
||
{ date: "1/19", users: 356, cpuPeak: 82, fullDate: "2025/1/19" },
|
||
]
|
||
|
||
switch (range) {
|
||
case "近7天":
|
||
return dailyUsageData
|
||
case "近30天":
|
||
return baseData.slice(-4)
|
||
case "近3個月":
|
||
return baseData.slice(-6)
|
||
case "近6個月":
|
||
return baseData
|
||
default:
|
||
return dailyUsageData
|
||
}
|
||
}
|
||
|
||
// 獲取歷史統計數據
|
||
const getHistoricalStats = (range: string) => {
|
||
const data = getHistoricalData(range)
|
||
const users = data.map((d) => d.users)
|
||
const cpus = data.map((d) => d.cpuPeak)
|
||
|
||
return {
|
||
avgUsers: Math.round(users.reduce((a, b) => a + b, 0) / users.length),
|
||
maxUsers: Math.max(...users),
|
||
avgCpu: Math.round(cpus.reduce((a, b) => a + b, 0) / cpus.length),
|
||
maxCpu: Math.max(...cpus),
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-3xl font-bold">數據分析</h1>
|
||
<Badge variant="outline" className="text-sm">
|
||
<Activity className="w-4 h-4 mr-1" />
|
||
即時更新
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* 關鍵指標卡片 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">總用戶數</CardTitle>
|
||
<Users className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">2,847</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
<span className="text-green-600">+12.5%</span> 較上月
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">今日活躍用戶</CardTitle>
|
||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">356</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
<span className="text-green-600">+8.2%</span> 較昨日
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">平均評分</CardTitle>
|
||
<Star className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">4.6</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
<span className="text-green-600">+0.3</span> 較上週
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">應用總數</CardTitle>
|
||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">127</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
<span className="text-green-600">+5</span> 本週新增
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 圖表區域 */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* 近7天使用趨勢與系統負載 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="flex items-center gap-2">
|
||
<TrendingUp className="w-5 h-5" />
|
||
近7天使用趨勢與系統負載
|
||
</CardTitle>
|
||
<Button variant="outline" size="sm" onClick={() => setShowHistoryModal(true)}>
|
||
<Calendar className="w-4 h-4 mr-1" />
|
||
查看歷史
|
||
</Button>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">用戶活躍度與CPU使用率關聯分析</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ResponsiveContainer width="100%" height={320}>
|
||
<ComposedChart data={dailyUsageData}>
|
||
<defs>
|
||
<linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||
</linearGradient>
|
||
</defs>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||
<XAxis
|
||
dataKey="date"
|
||
tick={{ fontSize: 12 }}
|
||
axisLine={{ stroke: "#e5e7eb" }}
|
||
tickLine={{ stroke: "#e5e7eb" }}
|
||
/>
|
||
<YAxis
|
||
yAxisId="users"
|
||
orientation="left"
|
||
tick={{ fontSize: 12 }}
|
||
axisLine={{ stroke: "#e5e7eb" }}
|
||
tickLine={{ stroke: "#e5e7eb" }}
|
||
domain={[200, 400]}
|
||
/>
|
||
<YAxis
|
||
yAxisId="cpu"
|
||
orientation="right"
|
||
tick={{ fontSize: 12 }}
|
||
axisLine={{ stroke: "#e5e7eb" }}
|
||
tickLine={{ stroke: "#e5e7eb" }}
|
||
domain={[40, 90]}
|
||
/>
|
||
<Tooltip
|
||
formatter={(value, name, props) => {
|
||
if (name === "users") {
|
||
return [`${value} 人`, "活躍用戶"]
|
||
}
|
||
if (name === "cpuPeak") {
|
||
return [`${value}%`, "CPU峰值"]
|
||
}
|
||
return [value, name]
|
||
}}
|
||
labelFormatter={(label, payload) => {
|
||
if (payload && payload.length > 0) {
|
||
const data = payload[0].payload
|
||
return `${data.fullDate} (週${data.dayName})`
|
||
}
|
||
return label
|
||
}}
|
||
contentStyle={{
|
||
backgroundColor: "white",
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||
fontSize: "14px",
|
||
}}
|
||
/>
|
||
<Bar yAxisId="users" dataKey="users" fill="url(#colorUsers)" radius={[4, 4, 0, 0]} opacity={0.7} />
|
||
<Line
|
||
yAxisId="cpu"
|
||
type="monotone"
|
||
dataKey="cpuPeak"
|
||
stroke="#ef4444"
|
||
strokeWidth={3}
|
||
dot={{ fill: "#ef4444", strokeWidth: 2, r: 5 }}
|
||
activeDot={{ r: 7, stroke: "#ef4444", strokeWidth: 2 }}
|
||
/>
|
||
</ComposedChart>
|
||
</ResponsiveContainer>
|
||
|
||
{/* 系統建議 */}
|
||
<div className="mt-4 p-3 bg-orange-50 rounded-lg border border-orange-200">
|
||
<div className="flex items-start gap-2">
|
||
<AlertTriangle className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<p className="text-sm font-medium text-orange-800">系統負載建議</p>
|
||
<p className="text-sm text-orange-700 mt-1">
|
||
近7天CPU峰值達82%，當用戶數超過350時系統負載顯著增加。建議考慮硬體升級或負載均衡優化。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 應用類別分布 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>應用類別分布</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ResponsiveContainer width="100%" height={300}>
|
||
<PieChart>
|
||
<Pie
|
||
data={categoryData}
|
||
cx="50%"
|
||
cy="50%"
|
||
outerRadius={90}
|
||
innerRadius={40}
|
||
fill="#8884d8"
|
||
dataKey="value"
|
||
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
||
labelLine={false}
|
||
>
|
||
{categoryData.map((entry, index) => (
|
||
<Cell key={`cell-${index}`} fill={entry.color} stroke="#ffffff" strokeWidth={2} />
|
||
))}
|
||
</Pie>
|
||
<Tooltip
|
||
formatter={(value, name, props) => {
|
||
const data = props.payload
|
||
return [
|
||
[`${value}%`, "占比"],
|
||
[`${data.users?.toLocaleString()} 人`, "用戶數"],
|
||
[`${data.apps} 個`, "應用數量"],
|
||
]
|
||
}}
|
||
labelFormatter={(label) => label}
|
||
contentStyle={{
|
||
backgroundColor: "white",
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||
fontSize: "14px",
|
||
}}
|
||
/>
|
||
</PieChart>
|
||
</ResponsiveContainer>
|
||
|
||
{/* 添加圖例說明 */}
|
||
<div className="mt-4 grid grid-cols-2 gap-2 text-sm">
|
||
{categoryData.map((category, index) => (
|
||
<div key={index} className="flex items-center gap-2">
|
||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: category.color }} />
|
||
<span className="text-gray-700">{category.name}</span>
|
||
<span className="font-medium text-gray-900">{category.value}%</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 24小時使用模式 - 優化版 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Clock className="w-5 h-5" />
|
||
24小時使用模式
|
||
</CardTitle>
|
||
<p className="text-sm text-muted-foreground">今日各時段用戶活躍度分析</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="mb-4 flex flex-wrap gap-2">
|
||
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
|
||
<div className="w-3 h-3 bg-red-500 rounded mr-2"></div>
|
||
高峰期 (80%+)
|
||
</Badge>
|
||
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
|
||
<div className="w-3 h-3 bg-blue-500 rounded mr-2"></div>
|
||
高使用期
|
||
</Badge>
|
||
<Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
|
||
<div className="w-3 h-3 bg-gray-500 rounded mr-2"></div>
|
||
正常期
|
||
</Badge>
|
||
<Badge variant="outline" className="bg-gray-50 text-gray-600 border-gray-300">
|
||
<div className="w-3 h-3 bg-gray-400 rounded mr-2"></div>
|
||
低峰期
|
||
</Badge>
|
||
</div>
|
||
|
||
<ResponsiveContainer width="100%" height={400}>
|
||
<BarChart data={hourlyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||
<XAxis dataKey="hour" tick={{ fontSize: 12 }} tickFormatter={(value) => `${value}:00`} />
|
||
<YAxis tick={{ fontSize: 12 }} />
|
||
<Tooltip
|
||
formatter={(value, name, props) => {
|
||
const data = props.payload
|
||
const getIntensityText = (intensity: string) => {
|
||
switch (intensity) {
|
||
case "peak":
|
||
return "高峰期"
|
||
case "high":
|
||
return "高使用期"
|
||
case "normal":
|
||
return "正常期"
|
||
case "low":
|
||
return "低峰期"
|
||
default:
|
||
return "未知"
|
||
}
|
||
}
|
||
|
||
return [
|
||
[`${value} 人`, "同時在線用戶"],
|
||
[`${getIntensityText(data.intensity)}`, "時段分類"],
|
||
[`${data.cpuUsage}%`, "CPU使用率"],
|
||
[`${data.memoryUsage}%`, "記憶體使用率"],
|
||
[`${data.period}`, "時段特性"],
|
||
]
|
||
}}
|
||
labelFormatter={(label) => `${label}:00 時段`}
|
||
contentStyle={{
|
||
backgroundColor: "white",
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||
fontSize: "14px",
|
||
minWidth: "220px",
|
||
}}
|
||
/>
|
||
<Bar dataKey="users" radius={[4, 4, 0, 0]} fill={(entry: any) => getBarColor(entry.intensity)}>
|
||
{hourlyData.map((entry, index) => (
|
||
<Cell key={`cell-${index}`} fill={getBarColor(entry.intensity)} />
|
||
))}
|
||
</Bar>
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
|
||
<div className="mt-4 p-3 bg-blue-50 rounded-lg">
|
||
<p className="text-sm text-blue-800 flex items-center gap-2">
|
||
<TrendingUp className="w-4 h-4" />
|
||
<strong>尖峰時段分析：</strong>工作時間 09:00-17:00 為主要使用時段，建議在此時段確保系統穩定性
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 熱門應用排行 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>熱門應用排行</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{topApps.map((app, index) => (
|
||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center font-bold text-blue-600">
|
||
{index + 1}
|
||
</div>
|
||
<div>
|
||
<h3 className="font-medium">{app.name}</h3>
|
||
<p className="text-sm text-muted-foreground">{app.category}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="flex items-center gap-2">
|
||
<Eye className="w-4 h-4 text-muted-foreground" />
|
||
<span className="font-medium">{app.views}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<Star className="w-4 h-4 text-yellow-400 fill-current" />
|
||
<span className="text-sm">{app.rating}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 用戶回饋摘要 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>用戶回饋摘要</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="text-2xl font-bold text-green-600">92%</div>
|
||
<p className="text-sm text-muted-foreground">滿意度</p>
|
||
</div>
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="text-2xl font-bold text-blue-600">4.6</div>
|
||
<p className="text-sm text-muted-foreground">平均評分</p>
|
||
</div>
|
||
<div className="text-center p-4 border rounded-lg">
|
||
<div className="text-2xl font-bold text-purple-600">156</div>
|
||
<p className="text-sm text-muted-foreground">本週回饋</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 歷史數據查看模態框 */}
|
||
{showHistoryModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-xl font-bold">歷史數據查看</h2>
|
||
<Button variant="ghost" size="sm" onClick={() => setShowHistoryModal(false)}>
|
||
✕
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 日期範圍選擇 */}
|
||
<div className="mb-6">
|
||
<div className="flex gap-2 mb-4">
|
||
{["近7天", "近30天", "近3個月", "近6個月"].map((range) => (
|
||
<Button
|
||
key={range}
|
||
variant={selectedDateRange === range ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={() => setSelectedDateRange(range)}
|
||
>
|
||
{range}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 歷史數據圖表 */}
|
||
<div className="space-y-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>歷史使用趨勢 - {selectedDateRange}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ResponsiveContainer width="100%" height={400}>
|
||
<ComposedChart data={getHistoricalData(selectedDateRange)}>
|
||
<defs>
|
||
<linearGradient id="colorUsersHistory" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||
</linearGradient>
|
||
</defs>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||
<XAxis dataKey="date" tick={{ fontSize: 12 }} />
|
||
<YAxis yAxisId="users" orientation="left" tick={{ fontSize: 12 }} />
|
||
<YAxis yAxisId="cpu" orientation="right" tick={{ fontSize: 12 }} />
|
||
<Tooltip
|
||
formatter={(value, name, props) => {
|
||
if (name === "users") {
|
||
return [`${value} 人`, "活躍用戶"]
|
||
}
|
||
if (name === "cpuPeak") {
|
||
return [`${value}%`, "CPU峰值"]
|
||
}
|
||
return [value, name]
|
||
}}
|
||
labelFormatter={(label, payload) => {
|
||
if (payload && payload.length > 0) {
|
||
const data = payload[0].payload
|
||
return data.fullDate || label
|
||
}
|
||
return label
|
||
}}
|
||
contentStyle={{
|
||
backgroundColor: "white",
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||
fontSize: "14px",
|
||
}}
|
||
/>
|
||
<Bar
|
||
yAxisId="users"
|
||
dataKey="users"
|
||
fill="url(#colorUsersHistory)"
|
||
radius={[2, 2, 0, 0]}
|
||
opacity={0.7}
|
||
/>
|
||
<Line
|
||
yAxisId="cpu"
|
||
type="monotone"
|
||
dataKey="cpuPeak"
|
||
stroke="#ef4444"
|
||
strokeWidth={2}
|
||
dot={{ fill: "#ef4444", strokeWidth: 1, r: 3 }}
|
||
/>
|
||
</ComposedChart>
|
||
</ResponsiveContainer>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 歷史數據統計摘要 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-blue-600">
|
||
{getHistoricalStats(selectedDateRange).avgUsers}
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">平均用戶數</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-green-600">
|
||
{getHistoricalStats(selectedDateRange).maxUsers}
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">最高用戶數</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-orange-600">
|
||
{getHistoricalStats(selectedDateRange).avgCpu}%
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">平均CPU使用率</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-red-600">
|
||
{getHistoricalStats(selectedDateRange).maxCpu}%
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">最高CPU使用率</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|