Function BundleUsageChart

web/src/components/BundleUsageChart.tsx:9–110

({ activeUsers, totalDownloads })

}

const BundleUsageChart: React.FC<BundleUsageChartProps> = ({ activeUsers, totalDownloads }) => {
    // Ensure we don't have a negative inactive count or exceed total downloads
    const sanitizedActiveUsers = Math.min(Math.max(0, activeUsers), totalDownloads);
    const activePercentage = totalDownloads > 0
        ? (sanitizedActiveUsers / totalDownloads) * 100
        : 0;

    return (
        <Box>
            <Flex
                justifyContent="space-between"
                alignItems="center"
                mb={3}
            >
                <Text fontSize="16px" fontWeight="bold">Usage Statistics</Text>
                <Text color="#666" fontSize="14px">
                    {sanitizedActiveUsers.toLocaleString()} active of {totalDownloads.toLocaleString()} downloads
                    <Text as="span" ml={1} color="#34C363" fontWeight="bold">
                        ({activePercentage.toFixed(1)}%)
                    </Text>
                </Text>
            </Flex>

            <Box
                height={24}
                mb={3}
                sx={{
                    borderRadius: '12px',
                    overflow: 'hidden',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
                    position: 'relative'
                }}
            >
                {/* Background bar (inactive users) */}
                <Box
                    sx={{
                        height: '100%',
                        width: '100%',
                        backgroundColor: '#E0E0E0',
                        position: 'absolute'
                    }}
                />

                {/* Foreground bar (active users) */}
                <Box
                    sx={{
                        height: '100%',
                        width: `${activePercentage}%`,
                        backgroundColor: '#34C363',
                        position: 'absolute',
                        transition: 'width 0.5s ease-in-out'
                    }}
                />

                {/* Percentage label - only show if enough space */}
                {activePercentage > 10 && (
                    <Flex
                        sx={{