86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { BarChart3 } from 'lucide-react';
|
|
|
|
const SKILL_LEVELS = [
|
|
{ id: 'pro', label: 'Pro', icon: BarChart3, color: 'var(--ui-color-intent-warning)', bgColor: 'rgba(255, 190, 77, 0.1)', borderColor: 'rgba(255, 190, 77, 0.3)' },
|
|
{ id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'rgba(147, 51, 234, 1)', bgColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.3)' },
|
|
{ id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'var(--ui-color-intent-primary)', bgColor: 'rgba(25, 140, 255, 0.1)', borderColor: 'rgba(25, 140, 255, 0.3)' },
|
|
{ id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'var(--ui-color-intent-success)', bgColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' },
|
|
];
|
|
|
|
interface SkillDistributionProps {
|
|
drivers: {
|
|
skillLevel?: string;
|
|
}[];
|
|
}
|
|
|
|
export function SkillDistribution({ drivers }: SkillDistributionProps) {
|
|
const distribution = SKILL_LEVELS.map((level) => ({
|
|
...level,
|
|
count: drivers.filter((d) => d.skillLevel === level.id).length,
|
|
percentage: drivers.length > 0
|
|
? Math.round((drivers.filter((d) => d.skillLevel === level.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="rgba(78, 212, 224, 0.1)"
|
|
border
|
|
borderColor="rgba(78, 212, 224, 0.2)"
|
|
>
|
|
<Icon icon={BarChart3} size={5} intent="telemetry" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>Skill Distribution</Heading>
|
|
<Text size="xs" variant="low">Driver population by skill level</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box display="grid" responsiveGridCols={{ base: 2, lg: 4 }} gap={4}>
|
|
{distribution.map((level) => {
|
|
return (
|
|
<Box
|
|
key={level.id}
|
|
p={4}
|
|
rounded="xl"
|
|
border
|
|
bg={level.bgColor}
|
|
borderColor={level.borderColor}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
|
|
<Icon icon={level.icon} size={5} color={level.color} />
|
|
<Text size="2xl" weight="bold" color={level.color}>{level.count}</Text>
|
|
</Box>
|
|
<Text variant="high" weight="medium" block mb={1}>{level.label}</Text>
|
|
<Box fullWidth h="2" rounded="full" bg="var(--ui-color-bg-base)" overflow="hidden">
|
|
<Box
|
|
h="full"
|
|
rounded="full"
|
|
transition
|
|
bg={level.color}
|
|
style={{ width: `${level.percentage}%` }}
|
|
/>
|
|
</Box>
|
|
<Text size="xs" variant="low" block mt={1}>{level.percentage}% of drivers</Text>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|