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