v1.11.0 (#32)

* refactor(Data): remove unused graph * refactor(Data): merge Dashboard * refactor: remove unused chart.js * refactor: remove unused code
igoogolx · Jan 1, 2025 · 87ad14f · 87ad14f
1 parent 4c9e2ca
commit 87ad14f
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 237 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@reduxjs/toolkit": "^2.5.0",
     "axios": "^1.7.9",
-    "chart.js": "^4.4.7",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "formik": "^2.4.6",

diff --git a/src/components/pages/Data/Connections/index.module.css b/src/components/pages/Data/Connections/index.module.css
@@ -16,6 +16,6 @@
   }
 
   & .footer {
-    @apply mt-2 flex flex-col rounded border border-solid border-gray-400 px-8;
+    @apply mt-4;
   }
 }
diff --git a/src/components/pages/Data/Connections/index.tsx b/src/components/pages/Data/Connections/index.tsx
@@ -1,6 +1,7 @@
 import { ClickToCopy } from "@/components/Core";
 import { ProcessCell } from "@/components/pages/Data/Connections/ProcessCell";
 import RuleCell from "@/components/pages/Data/Connections/RuleTag";
+import Dashboard from "@/components/pages/Data/Dashboard";
 import { useMedia } from "@/hooks";
 import { TRANSLATION_KEY } from "@/i18n/locales/key";
 import type { RootState } from "@/reducers";
@@ -379,8 +380,7 @@ export default function Connections(): React.ReactNode {
       </div>
 
       <div className={styles.footer}>
-        <div>{`TCP:  ${total.tcp}`}</div>
-        <div>{`UDP:  ${total.udp}`}</div>
+        <Dashboard connectionsAmount={total} />
       </div>
     </div>
   );

diff --git a/src/components/pages/Data/Dashboard/SpeedGraph/index.tsx b/src/components/pages/Data/Dashboard/SpeedGraph/index.tsx
diff --git a/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.module.css b/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.module.css
@@ -1,20 +1,20 @@
 .flowInfo {
-  @apply flex flex-1 justify-between pl-4 pr-4;
+  @apply flex flex-1 flex-col justify-between px-2;
 
   & .item {
-    @apply flex flex-1 flex-col justify-between;
+    @apply flex flex-1 mb-2 justify-between items-center;
 
     & .title {
-      @apply mb-2 flex justify-between text-gray-400;
+      @apply flex justify-between mr-2 shrink-0;
     }
 
     & .details {
-      @apply flex flex-col justify-between text-xl;
+      @apply flex justify-between text-lg;
 
       & .detail {
         @apply flex flex-1 items-center;
         & svg {
-          @apply relative -bottom-1 mr-1 scale-75 transform fill-current text-gray-400;
+          @apply relative mr-1 scale-75 transform fill-current text-gray-400;
         }
       }
     }

diff --git a/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.tsx b/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.tsx
@@ -1,5 +1,6 @@
 import { Icon, IconNameEnum } from "@/components/Core";
 import { TRANSLATION_KEY } from "@/i18n/locales/key";
+import clsx from "classnames";
 import { type TrafficItem } from "lux-js-sdk";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -9,37 +10,42 @@ import styles from "./index.module.css";
 interface FlowInfoProps {
   current: TrafficItem;
   total: TrafficItem;
+  titleClassName?: string;
 }
 
-export default function FlowInfo(props: FlowInfoProps) {
-  const { current, total } = props;
+export default function FlowInfo(props: Readonly<FlowInfoProps>) {
+  const { current, total, titleClassName } = props;
   const { t } = useTranslation();
   return (
     <div className={styles.flowInfo}>
       <div className={styles.item}>
-        <div className={styles.title}>{t(TRANSLATION_KEY.SPEED)}</div>
+        <div className={clsx(styles.title, titleClassName)}>
+          {t(TRANSLATION_KEY.SPEED)}:
+        </div>
         <div className={styles.details}>
-          <div className={styles.detail}>
-            <Icon name={IconNameEnum.ArrowUp} />
-            <FlowText value={current.upload} />
-          </div>
           <div className={styles.detail}>
             <Icon name={IconNameEnum.ArrowDown} />
             <FlowText value={current.download} />
           </div>
+          <div className={styles.detail}>
+            <Icon name={IconNameEnum.ArrowUp} />
+            <FlowText value={current.upload} />
+          </div>
         </div>
       </div>
       <div className={styles.item}>
-        <div className={styles.title}>{t(TRANSLATION_KEY.TOTAL)}</div>
+        <div className={clsx(styles.title, titleClassName)}>
+          {t(TRANSLATION_KEY.TOTAL)}:
+        </div>
         <div className={styles.details}>
-          <div className={styles.detail}>
-            <Icon name={IconNameEnum.ArrowUp} />
-            <FlowText value={total.upload} type={FlowTextTypeEnum.Total} />
-          </div>
           <div className={styles.detail}>
             <Icon name={IconNameEnum.ArrowDown} />
             <FlowText value={total.download} type={FlowTextTypeEnum.Total} />
           </div>
+          <div className={styles.detail}>
+            <Icon name={IconNameEnum.ArrowUp} />
+            <FlowText value={total.upload} type={FlowTextTypeEnum.Total} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/pages/Data/Dashboard/TrafficCard/FlowText/index.module.css b/src/components/pages/Data/Dashboard/TrafficCard/FlowText/index.module.css
@@ -1,8 +1,9 @@
 .wrapper {
+  @apply flex-1 whitespace-nowrap w-16 flex items-center;
   & .value {
-    @apply inline-block min-w-[32px] text-2xl;
+    @apply inline-block;
   }
   & .unit {
-    @apply ml-1 text-sm;
+    @apply ml-1 text-xs;
   }
 }
diff --git a/src/components/pages/Data/Dashboard/TrafficCard/FlowText/index.tsx b/src/components/pages/Data/Dashboard/TrafficCard/FlowText/index.tsx
@@ -12,7 +12,7 @@ interface FlowTextProps {
   type?: FlowTextTypeEnum;
 }
 
-export function FlowText(props: FlowTextProps): React.ReactNode {
+export function FlowText(props: Readonly<FlowTextProps>): React.ReactNode {
   const { value, type = FlowTextTypeEnum.Speed } = props;
   const { value: convertedValue, unit } = convertByte(value);
   return (

diff --git a/src/components/pages/Data/Dashboard/TrafficCard/index.module.css b/src/components/pages/Data/Dashboard/TrafficCard/index.module.css
@@ -5,26 +5,38 @@
     flex-col;
 
   & .data {
-    @apply my-2 flex flex-wrap flex-row justify-between;
+    @apply my-2 flex flex-row justify-between border-solid rounded border;
 
     & .info {
-      @apply mb-2 basis-full sm:basis-[49%] h-[160px];
+      @apply flex-1 py-2;
 
-      & .header {
-        @apply mb-2 flex items-center text-lg;
 
-        & .avatar {
-          @apply font-bold;
+      &:not(:last-child) {
+        @apply border-r;
+      }
+
+      & .connectionsAmount{
+       @apply flex flex-col items-center justify-between h-full w-24;
+
+        & .connectionItem{
+          @apply mb-2 h-7 flex items-center justify-center;
         }
       }
+
+      & .proxyTitle{
+
+        @apply text-green-600;
+      }
+
+      & .directTitle{
+        @apply text-yellow-600;
+      }
+
     }
 
     & .content {
       @apply flex w-full justify-between;
     }
   }
 
-  & .graph {
-    @apply basis-full h-[200px];
-  }
 }
diff --git a/src/components/pages/Data/Dashboard/TrafficCard/index.tsx b/src/components/pages/Data/Dashboard/TrafficCard/index.tsx
@@ -1,9 +1,5 @@
-import { TRANSLATION_KEY } from "@/i18n/locales/key";
-import { Card } from "@fluentui/react-components";
 import { type TrafficItem } from "lux-js-sdk";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { SpeedGraph } from "../SpeedGraph";
 import FlowInfo from "./FlowInfo";
 import styles from "./index.module.css";
 
@@ -15,6 +11,10 @@ export enum TrafficCardTypeEnum {
 interface TrafficCardProps {
   speed: { proxy: TrafficItem[]; direct: TrafficItem[] };
   total: { proxy: TrafficItem; direct: TrafficItem };
+  connectionsAmount: {
+    tcp: number;
+    udp: number;
+  };
 }
 
 function getCurrent(items: TrafficItem[]) {
@@ -23,34 +23,44 @@ function getCurrent(items: TrafficItem[]) {
     : { upload: 0, download: 0 };
 }
 
-export function TrafficCard(props: TrafficCardProps): React.ReactNode {
-  const { speed, total } = props;
+export function TrafficCard(
+  props: Readonly<TrafficCardProps>,
+): React.ReactNode {
+  const { speed, total, connectionsAmount } = props;
   const currentProxy = getCurrent(speed.proxy);
   const currentDirect = getCurrent(speed.direct);
-  const { t } = useTranslation();
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.data}>
-        <Card className={styles.info}>
-          <div className={styles.header}>
-            <div className={styles.avatar}>{t(TRANSLATION_KEY.PROXY)}</div>
+        <div className={styles.info}>
+          <div className={styles.connectionsAmount}>
+            <div
+              className={styles.connectionItem}
+            >{`TCP:  ${connectionsAmount.tcp}`}</div>
+            <div
+              className={styles.connectionItem}
+            >{`UDP:  ${connectionsAmount.udp}`}</div>
           </div>
+        </div>
+        <div className={styles.info}>
           <div className={styles.content}>
-            <FlowInfo current={currentProxy} total={total.proxy} />
-          </div>
-        </Card>
-        <Card className={styles.info}>
-          <div className={styles.header}>
-            <div className={styles.avatar}>{t(TRANSLATION_KEY.DIRECT)}</div>
+            <FlowInfo
+              current={currentProxy}
+              total={total.proxy}
+              titleClassName={styles.proxyTitle}
+            />
           </div>
+        </div>
+        <div className={styles.info}>
           <div className={styles.content}>
-            <FlowInfo current={currentDirect} total={total.direct} />
+            <FlowInfo
+              current={currentDirect}
+              total={total.direct}
+              titleClassName={styles.directTitle}
+            />
           </div>
-        </Card>
-        <Card className={styles.graph}>
-          <SpeedGraph data={speed} />
-        </Card>
+        </div>
       </div>
     </div>
   );