87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Card } from '@/ui/Card';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface PerformanceMetricsProps {
|
|
stats: {
|
|
winRate: number;
|
|
podiumRate: number;
|
|
dnfRate: number;
|
|
avgFinish: number;
|
|
consistency: number;
|
|
bestFinish: number;
|
|
worstFinish: number;
|
|
};
|
|
}
|
|
|
|
export function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
|
|
const getPerformanceVariant = (value: number, type: 'rate' | 'finish' | 'consistency'): 'blue' | 'green' | 'orange' | 'purple' => {
|
|
if (type === 'rate') {
|
|
if (value >= 30) return 'green';
|
|
if (value >= 15) return 'orange';
|
|
return 'blue';
|
|
}
|
|
if (type === 'consistency') {
|
|
if (value >= 80) return 'green';
|
|
if (value >= 60) return 'orange';
|
|
return 'blue';
|
|
}
|
|
return 'blue';
|
|
};
|
|
|
|
const metrics = [
|
|
{
|
|
label: 'Win Rate',
|
|
value: `${stats.winRate.toFixed(1)}%`,
|
|
variant: getPerformanceVariant(stats.winRate, 'rate'),
|
|
icon: '🏆'
|
|
},
|
|
{
|
|
label: 'Podium Rate',
|
|
value: `${stats.podiumRate.toFixed(1)}%`,
|
|
variant: getPerformanceVariant(stats.podiumRate, 'rate'),
|
|
icon: '🥇'
|
|
},
|
|
{
|
|
label: 'DNF Rate',
|
|
value: `${stats.dnfRate.toFixed(1)}%`,
|
|
variant: stats.dnfRate < 10 ? 'green' : 'orange',
|
|
icon: '❌'
|
|
},
|
|
{
|
|
label: 'Avg Finish',
|
|
value: stats.avgFinish.toFixed(1),
|
|
variant: 'blue' as const,
|
|
icon: '📊'
|
|
},
|
|
{
|
|
label: 'Consistency',
|
|
value: `${stats.consistency.toFixed(0)}%`,
|
|
variant: getPerformanceVariant(stats.consistency, 'consistency'),
|
|
icon: '🎯'
|
|
},
|
|
{
|
|
label: 'Best / Worst',
|
|
value: `${stats.bestFinish} / ${stats.worstFinish}`,
|
|
variant: 'blue' as const,
|
|
icon: '📈'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Box display="grid" responsiveGridCols={{ base: 2, md: 3 }} gap={4}>
|
|
{metrics.map((metric, index) => (
|
|
<Card key={index}>
|
|
<Box p={4} textAlign="center">
|
|
<Text size="2xl" block mb={2}>{metric.icon}</Text>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>{metric.label}</Text>
|
|
<Text size="xl" weight="bold" color="text-white" block>{metric.value}</Text>
|
|
</Box>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|