1import { BoxProps, chakra, HStack, Text } from '@chakra-ui/react';
  2import {
  3  ChartBarIcon,
  4  ChartPieIcon,
  5  UsersIcon,
  6} from '@heroicons/react/24/outline';
  7import { useDashboard } from 'stores';
  8import { FC } from 'react';
  9import { useTranslation } from 'react-i18next';
 10import { useQuery } from 'react-query';
 11import { fetch } from 'service/http';
 12import { formatBytes, numberWithCommas } from 'utils/formatByte';
 13import { StatisticsCardInLine, StatisticsQueryKey } from 'components/statistics-card';
 14
 15const TotalUsersIcon = chakra(UsersIcon, {
 16  baseStyle: {
 17    w: 5,
 18    h: 5,
 19    position: 'relative',
 20    zIndex: '2',
 21  },
 22});
 23
 24const NetworkIcon = chakra(ChartBarIcon, {
 25  baseStyle: {
 26    w: 5,
 27    h: 5,
 28    position: 'relative',
 29    zIndex: '2',
 30  },
 31});
 32
 33const MemoryIcon = chakra(ChartPieIcon, {
 34  baseStyle: {
 35    w: 5,
 36    h: 5,
 37    position: 'relative',
 38    zIndex: '2',
 39  },
 40});
 41
 42
 43export const Statistics: FC<BoxProps> = (props) => {
 44  const { version } = useDashboard();
 45  const { data: systemData } = useQuery({
 46    queryKey: StatisticsQueryKey,
 47    queryFn: () => fetch('/system'),
 48    refetchInterval: 5000,
 49    onSuccess: ({ version: currentVersion }) => {
 50      if (version !== currentVersion)
 51        useDashboard.setState({ version: currentVersion });
 52    },
 53  });
 54  const { t } = useTranslation();
 55  return (
 56    <HStack
 57      justifyContent="space-between"
 58      gap={0}
 59      columnGap={{ lg: 4, md: 0 }}
 60      rowGap={{ lg: 0, base: 4 }}
 61      display="flex"
 62      flexDirection={{ lg: 'row', base: 'column' }}
 63      {...props}
 64    >
 65      <StatisticsCardInLine
 66        title={t('activeUsers')}
 67        content={
 68          systemData && (
 69            <HStack alignItems="flex-end">
 70              <Text>{numberWithCommas(systemData.users_active)}</Text>
 71              <Text
 72                fontWeight="normal"
 73                fontSize="lg"
 74                as="span"
 75                display="inline-block"
 76                pb="5px"
 77              >
 78                / {numberWithCommas(systemData.total_user)}
 79              </Text>
 80            </HStack>
 81          )
 82        }
 83        icon={<TotalUsersIcon />}
 84      />
 85      <StatisticsCardInLine
 86        title={t('dataUsage')}
 87        content={
 88          systemData &&
 89          formatBytes(
 90            systemData.incoming_bandwidth + systemData.outgoing_bandwidth
 91          )
 92        }
 93        icon={<NetworkIcon />}
 94      />
 95      <StatisticsCardInLine
 96        title={t('memoryUsage')}
 97        content={
 98          systemData && (
 99            <HStack alignItems="flex-end">
100              <Text>{formatBytes(systemData.mem_used, 1, true)[0]}</Text>
101              <Text
102                fontWeight="normal"
103                fontSize="lg"
104                as="span"
105                display="inline-block"
106                pb="5px"
107              >
108                {formatBytes(systemData.mem_used, 1, true)[1]} /{' '}
109                {formatBytes(systemData.mem_total, 1)}
110              </Text>
111            </HStack>
112          )
113        }
114        icon={<MemoryIcon />}
115      />
116    </HStack>
117  );
118};