49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface FinishDistributionProps {
|
|
wins: number;
|
|
podiums: number;
|
|
topTen: number;
|
|
total: number;
|
|
}
|
|
|
|
export function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistributionProps) {
|
|
const outsideTopTen = total - topTen;
|
|
const podiumsNotWins = podiums - wins;
|
|
const topTenNotPodium = topTen - podiums;
|
|
|
|
const segments = [
|
|
{ label: 'Wins', value: wins, color: 'bg-performance-green', textColor: 'text-performance-green' },
|
|
{ label: 'Podiums', value: podiumsNotWins, color: 'bg-warning-amber', textColor: 'text-warning-amber' },
|
|
{ label: 'Top 10', value: topTenNotPodium, color: 'bg-primary-blue', textColor: 'text-primary-blue' },
|
|
{ label: 'Other', value: outsideTopTen, color: 'bg-gray-600', textColor: 'text-gray-400' },
|
|
].filter(s => s.value > 0);
|
|
|
|
return (
|
|
<Stack gap={3}>
|
|
<Box h="4" rounded="full" overflow="hidden" display="flex" bg="bg-charcoal-outline">
|
|
{segments.map((segment) => (
|
|
<Box
|
|
key={segment.label}
|
|
bg={segment.color}
|
|
transition
|
|
style={{ width: `${(segment.value / total) * 100}%` }}
|
|
/>
|
|
))}
|
|
</Box>
|
|
<Box display="flex" flexWrap="wrap" gap={4} justifyContent="center">
|
|
{segments.map((segment) => (
|
|
<Box key={segment.label} display="flex" alignItems="center" gap={2}>
|
|
<Box w="3" h="3" rounded="full" bg={segment.color} />
|
|
<Text size="xs" color={segment.textColor}>
|
|
{segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
} |