78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { CategoryDistributionCard } from '@/ui/CategoryDistributionCard';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { BarChart3 } from 'lucide-react';
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', progressColor: 'bg-green-400' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', progressColor: 'bg-primary-blue' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', progressColor: 'bg-purple-400' },
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', progressColor: 'bg-yellow-400' },
|
|
{ id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30', progressColor: 'bg-orange-400' },
|
|
{ id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30', progressColor: 'bg-red-400' },
|
|
];
|
|
|
|
interface CategoryDistributionProps {
|
|
drivers: {
|
|
category?: string;
|
|
}[];
|
|
}
|
|
|
|
export function CategoryDistribution({ drivers }: CategoryDistributionProps) {
|
|
const distribution = CATEGORIES.map((category) => ({
|
|
...category,
|
|
count: drivers.filter((d) => d.category === category.id).length,
|
|
percentage: drivers.length > 0
|
|
? Math.round((drivers.filter((d) => d.category === category.id).length / drivers.length) * 100)
|
|
: 0,
|
|
}));
|
|
|
|
return (
|
|
<Box mb={10}>
|
|
<Box display="flex" alignItems="center" gap={3} mb={4}>
|
|
<Box
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="xl"
|
|
bg="bg-purple-400/10"
|
|
border
|
|
borderColor="border-purple-400/20"
|
|
>
|
|
<Icon
|
|
icon={BarChart3}
|
|
size={5}
|
|
color="rgb(192, 132, 252)"
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>Category Distribution</Heading>
|
|
<Text size="xs" color="text-gray-500">Driver population by category</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Grid cols={2} lgCols={3} gap={4}>
|
|
{distribution.map((category) => (
|
|
<CategoryDistributionCard
|
|
key={category.id}
|
|
label={category.label}
|
|
count={category.count}
|
|
percentage={category.percentage}
|
|
color={category.color}
|
|
bgColor={category.bgColor}
|
|
borderColor={category.borderColor}
|
|
progressColor={category.progressColor}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|