78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/components/ui/card';
|
|
import { ExternalDataState } from './externalDataReducer';
|
|
import {
|
|
Database,
|
|
Cloud,
|
|
Activity,
|
|
Clock,
|
|
TrendingUp,
|
|
CheckCircle,
|
|
} from 'lucide-react';
|
|
|
|
interface StatisticsOverviewProps {
|
|
state: ExternalDataState;
|
|
}
|
|
|
|
export function StatisticsOverview({ state }: StatisticsOverviewProps) {
|
|
const activeRate = state.statistics.totalSources > 0
|
|
? (state.statistics.activeSources / state.statistics.totalSources * 100).toFixed(1)
|
|
: '0';
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{/* 总数据源 */}
|
|
<Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-blue-600 dark:text-blue-400 font-light">总数据源</p>
|
|
<p className="text-2xl font-bold text-blue-700 dark:text-blue-300">
|
|
{state.statistics.totalSources}
|
|
</p>
|
|
</div>
|
|
<Database className="w-8 h-8 text-blue-500 dark:text-blue-400" />
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 活跃数据源 */}
|
|
<Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-green-600 dark:text-green-400 font-light">活跃数据源</p>
|
|
<p className="text-2xl font-bold text-green-700 dark:text-green-300">
|
|
{state.statistics.activeSources}
|
|
</p>
|
|
</div>
|
|
<CheckCircle className="w-8 h-8 text-green-500 dark:text-green-400" />
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 总数据点 */}
|
|
<Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-purple-600 dark:text-purple-400 font-light">总数据点</p>
|
|
<p className="text-2xl font-bold text-purple-700 dark:text-purple-300">
|
|
{state.statistics.totalDataPoints.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<Cloud className="w-8 h-8 text-purple-500 dark:text-purple-400" />
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 活跃率 */}
|
|
<Card className="p-4 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-orange-600 dark:text-orange-400 font-light">活跃率</p>
|
|
<p className="text-2xl font-bold text-orange-700 dark:text-orange-300">
|
|
{activeRate}%
|
|
</p>
|
|
</div>
|
|
<TrendingUp className="w-8 h-8 text-orange-500 dark:text-orange-400" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |