'use client'; import { Icon } from '@iconify/react'; import { formatBytes, unitConversion } from '@repo/ui/utils'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@shadcn/ui/card'; import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '@shadcn/ui/chart'; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Label, LabelList, Pie, PieChart, XAxis, YAxis, } from '@shadcn/ui/lib/recharts'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select'; import { Separator } from '@shadcn/ui/separator'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs'; import { useLocale } from 'next-intl'; import { useState } from 'react'; const UserStatisticsConfig = { register: { label: '注册', color: 'hsl(var(--chart-1))', }, new_purchase: { label: '新购', color: 'hsl(var(--chart-2))', }, repurchase: { label: '复购', color: 'hsl(var(--chart-3))', }, } satisfies ChartConfig; const IncomeStatisticsConfig = { new_purchase: { label: '新购', color: 'hsl(var(--chart-1))', }, repurchase: { label: '复购', color: 'hsl(var(--chart-2))', }, }; // Sample data - replace with actual data const trafficData = { nodes: { today: [ { name: 'Node 1', traffic: 1000, type: 'Trojan', address: '127.0.0.1:443' }, { name: 'Node 2', traffic: 800, type: 'Trojan', address: '127.0.0.1:444' }, { name: 'Node 3', traffic: 600, type: 'Trojan', address: '127.0.0.1:445' }, { name: 'Node 4', traffic: 400, type: 'Trojan', address: '127.0.0.1:446' }, { name: 'Node 5', traffic: 200, type: 'Trojan', address: '127.0.0.1:447' }, { name: 'Node 6', traffic: 1000, type: 'Trojan', address: '127.0.0.1:443' }, { name: 'Node 7', traffic: 800, type: 'Trojan', address: '127.0.0.1:444' }, { name: 'Node 8', traffic: 600, type: 'Trojan', address: '127.0.0.1:445' }, { name: 'Node 9', traffic: 400, type: 'Trojan', address: '127.0.0.1:446' }, { name: 'Node 10', traffic: 200, type: 'Trojan', address: '127.0.0.1:447' }, ], yesterday: [ { name: 'Node 1', traffic: 900, type: 'Trojan', address: '127.0.0.1:443' }, { name: 'Node 2', traffic: 750, type: 'Trojan', address: '127.0.0.1:444' }, { name: 'Node 3', traffic: 550, type: 'Trojan', address: '127.0.0.1:445' }, { name: 'Node 4', traffic: 350, type: 'Trojan', address: '127.0.0.1:446' }, { name: 'Node 5', traffic: 150, type: 'Trojan', address: '127.0.0.1:447' }, ], }, users: { today: [ { name: 'olivia.martin@email.com', traffic: 100, email: 'olivia.martin@email.com' }, { name: 'jackson.lee@email.com', traffic: 90, email: 'jackson.lee@email.com' }, { name: 'isabella.nguyen@email.com', traffic: 80, email: 'isabella.nguyen@email.com' }, { name: 'william.chen@email.com', traffic: 70, email: 'william.chen@email.com' }, { name: 'sophia.rodriguez@email.com', traffic: 60, email: 'sophia.rodriguez@email.com' }, { name: 'olivia.martin@email.com', traffic: 100, email: 'olivia.martin@email.com' }, { name: 'jackson.lee@email.com', traffic: 90, email: 'jackson.lee@email.com' }, { name: 'isabella.nguyen@email.com', traffic: 80, email: 'isabella.nguyen@email.com' }, { name: 'william.chen@email.com', traffic: 70, email: 'william.chen@email.com' }, { name: 'sophia.rodriguez@email.com', traffic: 60, email: 'sophia.rodriguez@email.com' }, ], yesterday: [ { name: 'olivia.martin@email.com', traffic: 95, email: 'olivia.martin@email.com' }, { name: 'jackson.lee@email.com', traffic: 85, email: 'jackson.lee@email.com' }, { name: 'isabella.nguyen@email.com', traffic: 75, email: 'isabella.nguyen@email.com' }, { name: 'william.chen@email.com', traffic: 65, email: 'william.chen@email.com' }, { name: 'sophia.rodriguez@email.com', traffic: 55, email: 'sophia.rodriguez@email.com' }, ], }, }; export default function Statistics() { const locale = useLocale(); const [dataType, setDataType] = useState('nodes'); const [timeFrame, setTimeFrame] = useState('today'); const currentData = trafficData[dataType][timeFrame]; return ( <>

统计

{[ { title: '在线IP数', value: '666', icon: 'uil:network-wired', onClick: () => console.log('在线IP数 clicked'), }, { title: '在线节点数', value: '99', icon: 'uil:server-network', onClick: () => console.log('在线节点数 clicked'), }, { title: '离线节点数', value: '1', icon: 'uil:server-network-alt', onClick: () => console.log('离线节点数 clicked'), }, { title: '待处理工单', value: '1', icon: 'uil:clipboard-notes', onClick: () => console.log('待处理工单 clicked'), }, { title: '今日上传流量', value: formatBytes(99999999999999), icon: 'uil:arrow-up', onClick: () => console.log('今日上传流量 clicked'), }, { title: '今日下载流量', value: formatBytes(99999999999999), icon: 'uil:arrow-down', onClick: () => console.log('今日下载流量 clicked'), }, { title: '总上传流量', value: formatBytes(99999999999999), icon: 'uil:cloud-upload', onClick: () => console.log('总上传流量 clicked'), }, { title: '总下载流量', value: formatBytes(99999999999999), icon: 'uil:cloud-download', onClick: () => console.log('总下载流量 clicked'), }, ].map((item, index) => ( {item.title}
{item.value}
 ))}
收入统计 今日 本月 总计 } /> } />
总收入
6,666
{IncomeStatisticsConfig.new_purchase.label}
123
{IncomeStatisticsConfig.repurchase.label}
456
 { return new Date(value).toLocaleDateString(locale, { month: 'short', day: 'numeric', }); }} /> } /> } />
总收入
654,321
{IncomeStatisticsConfig.new_purchase.label}
123
{IncomeStatisticsConfig.repurchase.label}
456
 { return new Date(value).toLocaleDateString(locale, { month: 'short', }); }} /> } /> } />
总收入
987,654,321
 用户统计 今日 本月 总计 } /> } />
{UserStatisticsConfig.register.label}
789
{UserStatisticsConfig.new_purchase.label}
123
{UserStatisticsConfig.repurchase.label}
456
 { return new Date(value).toLocaleDateString(locale, { month: 'short', day: 'numeric', }); }} /> } /> } />
{UserStatisticsConfig.register.label}
789
{UserStatisticsConfig.new_purchase.label}
123
{UserStatisticsConfig.repurchase.label}
456
 { return new Date(value).toLocaleDateString(locale, { month: 'short', }); }} /> } /> } />
{UserStatisticsConfig.register.label}
987,654,321
 流量排行 今日 昨日

{dataType === 'nodes' ? '节点流量' : '用户流量'}

formatBytes(unitConversion('gbToBytes', value) || 0)} /> String(index + 1)} /> dataType === 'nodes' ? `节点: ${label}` : `用户: ${label}` } /> } />
); }