import { useEffect, useState } from 'react'; import { LineMetricChart, DualLineChart, DonutChart, } from '@/shared/components'; interface MetricData { cpu: number[]; ram: number; ramUsed: string; cache: number; cacheBreakdown: { cache: number; nonCache: number; total: number }; users: number[]; performance: number[]; performanceAlt: number[]; upSpeed: number; downSpeed: number; } interface MetricsDashboardProps { projectId?: string; isRunning?: boolean; onStop?: () => void; onRestart?: () => void; } function getRandom(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1)) + min; } function generateInitialData(): MetricData { return { cpu: Array.from({ length: 24 }, () => getRandom(10, 45)), ram: getRandom(50, 85), ramUsed: '5.4 GB', cache: 352, cacheBreakdown: { cache: 212, nonCache: 85.5, total: 1750 }, users: Array.from({ length: 15 }, () => getRandom(40, 110)), performance: Array.from({ length: 12 }, () => getRandom(70, 95)), performanceAlt: Array.from({ length: 12 }, () => getRandom(60, 85)), upSpeed: 10.4, downSpeed: 5.2, }; } export function MetricsDashboard({ isRunning = true, }: MetricsDashboardProps) { const [data, setData] = useState(generateInitialData); const [timeRange, setTimeRange] = useState<'day' | 'month' | 'year'>('day'); useEffect(() => { if (!isRunning) return; const interval = setInterval(() => { setData((prev) => { const newCpu = [...prev.cpu.slice(1), getRandom(10, 45)]; const newUsers = [...prev.users.slice(1), getRandom(60, 110)]; const newPerf = [...prev.performance.slice(1), getRandom(82, 99)]; const newPerfAlt = [...prev.performanceAlt.slice(1), getRandom(60, 85)]; return { ...prev, cpu: newCpu, ram: getRandom(50, 85), ramUsed: `${(8 * (prev.ram / 100)).toFixed(1)} GB`, users: newUsers, performance: newPerf, performanceAlt: newPerfAlt, upSpeed: parseFloat((Math.random() * 5 + 8).toFixed(1)), downSpeed: parseFloat((Math.random() * 3 + 4).toFixed(1)), }; }); }, 2000); return () => clearInterval(interval); }, [isRunning]); const currentCpu = data.cpu[data.cpu.length - 1]; const currentUsers = data.users[data.users.length - 1]; const currentPerf = data.performance[data.performance.length - 1]; return (
{/* Metrics Header - self.html exact match */}
Metrics
{(['day', 'month', 'year'] as const).map((range) => (
setTimeRange(range)} > {range.charAt(0).toUpperCase() + range.slice(1)}
))}
{/* Row 1: CPU, RAM, Cache - self.html exact: 13px gap */}
{/* CPU Card */}
CPU Usage
{currentCpu}%
{currentCpu < 50 ? 'Good' : currentCpu < 75 ? 'Average' : 'High'} {' '} Daily usage
Details
{/* RAM Card */}
RAM Usage
{data.ram}%
{data.ram < 60 ? 'Good' : 'Average'} {' '} Daily usage
Used
{data.ramUsed} / 8GB
Details
{/* Cache Card */}
Cache
{data.cache} MB
220MB Average{' '} cached images and files
{/* Segmented Bar */}
{/* Stats row */}
Cache
212 MB 12%
Non-Cache
85.5 MB 4%
Total
1.75 GB
Details
{/* Row 2: Active Users, Performance - self.html exact: 13px gap */}
{/* Active Users - horizontal layout */}
Active User
{currentUsers} K
User active right now
{['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => ( {flag} ))}
Details
{/* Performance Card */}
Performance
{currentPerf}%
85 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}> {currentPerf > 85 ? 'Good' : 'Average'} {' '} Last scan
{data.upSpeed} Mbps
{data.downSpeed} Mbps
Check Speed
); }