feat: new users statistics

Gozargah · Apr 21, 2024 · d9c44d9 · d9c44d9
1 parent 6c747bf
commit d9c44d9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
diff --git a/app/dashboard/public/statics/locales/en.json b/app/dashboard/public/statics/locales/en.json
@@ -189,12 +189,13 @@
   "users": {
     "title": "Users",
     "description": "Track, manage and forecast your connections",
-    "total": "Total Users",
-    "online": "Online Users",
-    "active": "Active Users",
+    "total": "Total",
+    "online": "Online",
+    "active": "Active",
     "limited": "Limited Users",
     "expired": "Expired Users",
-    "disabled": "Disabled Users"
+    "disabled": "Disabled Users",
+    "usersOfMonth": "Users of this month"
   },
   "statistics": {
     "title": "System Statistics",

diff --git a/app/dashboard/src/components/common/statistics/StatisticCard.tsx b/app/dashboard/src/components/common/statistics/StatisticCard.tsx
@@ -2,13 +2,20 @@
 import { FC, PropsWithChildren, ReactElement, ReactNode } from "react";
 
 type StatisticCardProps = {
-  title: string;
+  title: ReactNode;
   content: ReactNode;
   icon?: ReactElement;
   badge?: number;
+  badgeIcon?: ReactNode;
 };
 
-export const StatisticCard: FC<PropsWithChildren<StatisticCardProps>> = ({ title, content, icon, badge }) => {
+export const StatisticCard: FC<PropsWithChildren<StatisticCardProps>> = ({
+  title,
+  content,
+  icon,
+  badge,
+  badgeIcon,
+}) => {
   return (
     <Card
       p={6}
@@ -69,6 +76,8 @@ export const StatisticCard: FC<PropsWithChildren<StatisticCardProps>> = ({ title
             fontWeight="medium"
             textTransform="capitalize"
             fontSize="sm"
+            display="flex"
+            gap="1"
           >
             {title}
           </Text>
@@ -79,8 +88,8 @@ export const StatisticCard: FC<PropsWithChildren<StatisticCardProps>> = ({ title
       </VStack>
       {badge == undefined ? undefined : (
         <Box alignSelf="end">
-          <Badge px="2" colorScheme={badge > 0 ? "green" : badge < 0 ? "red" : "gray"}>
-            {badge > 0 ? "↑" : badge < 0 ? "↓" : "-"}
+          <Badge px="2" colorScheme={badge > 0 ? "green" : badge < 0 ? "red" : "gray"} display="flex" gap="1">
+            {badgeIcon ? badgeIcon : badge > 0 ? "↑" : badge < 0 ? "↓" : "-"}
             {Math.abs(badge)}%
           </Badge>
         </Box>

diff --git a/app/dashboard/src/components/common/statistics/UserStatistics.tsx b/app/dashboard/src/components/common/statistics/UserStatistics.tsx
@@ -1,9 +1,10 @@
-import { BoxProps, HStack, Text } from "@chakra-ui/react";
+import { Box, BoxProps, HStack, Text } from "@chakra-ui/react";
+import { statusColors } from "config/user-settings";
 import { useDashboard } from "contexts/DashboardContext";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetSystemStats } from "services/api";
-import { formatBytes, numberWithCommas } from "utils/formatByte";
+import { numberWithCommas } from "utils/formatByte";
 import { StatisticCard } from "./StatisticCard";
 
 export const UserStatistics: FC<BoxProps> = (props) => {
@@ -18,6 +19,7 @@ export const UserStatistics: FC<BoxProps> = (props) => {
   });
 
   const { t } = useTranslation();
+  const ActiveIcon = statusColors.active.icon;
   return (
     <HStack
       justifyContent="space-between"
@@ -29,7 +31,7 @@ export const UserStatistics: FC<BoxProps> = (props) => {
       {...props}
     >
       <StatisticCard
-        title={t("users.total")}
+        title={t("users.active")}
         content={
           systemData && (
             <HStack alignItems="flex-end">
@@ -40,27 +42,21 @@ export const UserStatistics: FC<BoxProps> = (props) => {
             </HStack>
           )
         }
-        badge={100}
-      />
-      <StatisticCard
-        title={t("users.active")}
-        content={systemData && formatBytes(systemData.incoming_bandwidth + systemData.outgoing_bandwidth)}
-        badge={0}
+        badge={systemData && parseInt(((systemData.users_active / systemData.total_user) * 100).toFixed(0))}
+        badgeIcon={<ActiveIcon w="3" />}
       />
       <StatisticCard
-        title={t("users.online")}
-        content={
-          systemData && (
-            <HStack alignItems="flex-end">
-              <Text>{formatBytes(systemData.mem_used, 1, true)[0]}</Text>
-              <Text fontWeight="normal" fontSize="lg" as="span" display="inline-block" pb="5px">
-                {formatBytes(systemData.mem_used, 1, true)[1]} / {formatBytes(systemData.mem_total, 1)}
-              </Text>
-            </HStack>
-          )
+        title={
+          <>
+            <Box w="10px" h="10px" bg="green.400" rounded="full" mt="5px" />
+            {t("users.online")}
+          </>
         }
-        badge={-50}
+        content={systemData && 5}
+        badge={40}
+        badgeIcon={<Box w="2" h="2" bg="green.400" rounded="full" mt="5px" />}
       />
+      <StatisticCard title={t("users.usersOfMonth")} content={6} badge={-3} />
     </HStack>
   );
 };
diff --git a/app/dashboard/src/components/shared/StatusBadge.tsx b/app/dashboard/src/components/shared/StatusBadge.tsx
@@ -1,5 +1,4 @@
 import { Badge, Text } from "@chakra-ui/react";
-
 import { statusColors } from "config/user-settings";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";