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