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