From 87ad14f6418f80cd44045b628b73c1542fb08c04 Mon Sep 17 00:00:00 2001
From: igoogolx <27353191+igoogolx@users.noreply.github.com>
Date: Wed, 1 Jan 2025 17:19:17 +0800
Subject: [PATCH] v1.11.0 (#32)

* refactor(Data): remove unused graph

* refactor(Data): merge Dashboard

* refactor: remove unused chart.js

* refactor: remove unused code
---
 package.json                                  |  1 -
 .../pages/Data/Connections/index.module.css   |  2 +-
 .../pages/Data/Connections/index.tsx          |  4 +-
 .../pages/Data/Dashboard/SpeedGraph/index.tsx | 95 -------------------
 .../TrafficCard/FlowInfo/index.module.css     | 10 +-
 .../Dashboard/TrafficCard/FlowInfo/index.tsx  | 30 +++---
 .../TrafficCard/FlowText/index.module.css     |  5 +-
 .../Dashboard/TrafficCard/FlowText/index.tsx  |  2 +-
 .../Dashboard/TrafficCard/index.module.css    | 30 ++++--
 .../Data/Dashboard/TrafficCard/index.tsx      | 52 ++++++----
 src/components/pages/Data/Dashboard/index.tsx | 46 +++++----
 src/components/pages/Data/index.tsx           | 33 +------
 src/hooks/index.ts                            | 21 ----
 yarn.lock                                     | 12 ---
 14 files changed, 106 insertions(+), 237 deletions(-)
 delete mode 100644 src/components/pages/Data/Dashboard/SpeedGraph/index.tsx

diff --git a/package.json b/package.json
index ccffba7..d599954 100644
--- 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
index 8a4bfa7..b768609 100644
--- 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
index 6ee4d11..cc8684d 100644
--- 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
deleted file mode 100644
index 3efe666..0000000
--- a/src/components/pages/Data/Dashboard/SpeedGraph/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useChartJs } from "@/hooks";
-import { TRANSLATION_KEY } from "@/i18n/locales/key";
-import { convertByte } from "@/utils/traffic";
-import { type ChartConfiguration } from "chart.js";
-import i18next from "i18next";
-import { type TrafficItem } from "lux-js-sdk";
-import * as React from "react";
-import { useEffect } from "react";
-
-const getConfiguration = () => {
-  const configuration: ChartConfiguration = {
-    type: "line",
-    data: {
-      labels: [],
-      datasets: [
-        {
-          label: i18next.t(TRANSLATION_KEY.DOWNLOAD),
-          borderColor: "#22ce70",
-          borderWidth: 1.5,
-          fill: false,
-          pointRadius: 0,
-          data: [],
-          tension: 0.2,
-        },
-        {
-          label: i18next.t(TRANSLATION_KEY.UPLOAD),
-          borderColor: "#ff6573",
-          borderWidth: 1,
-          fill: false,
-          pointRadius: 0,
-          data: [],
-          tension: 0.2,
-        },
-      ],
-    },
-
-    options: {
-      animation: {},
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          grid: {
-            display: false,
-          },
-          ticks: {
-            display: false,
-          },
-        },
-        y: {
-          border: { width: 0, dash: [5, 5] },
-          grid: {
-            color: "#50585b",
-          },
-          ticks: {
-            callback: (value: number | string) => {
-              const { value: convertedValue, unit } = convertByte(
-                value as number,
-              );
-              return convertedValue + unit;
-            },
-            autoSkip: true,
-            maxTicksLimit: 6,
-          },
-        },
-      },
-    },
-  };
-  return configuration;
-};
-
-interface SpeedGraphProps {
-  data: { proxy: TrafficItem[]; direct: TrafficItem[] };
-}
-
-export function SpeedGraph(props: SpeedGraphProps): React.ReactNode {
-  const { data } = props;
-
-  const [chartRef, chart] = useChartJs(getConfiguration());
-  useEffect(() => {
-    if (chart) {
-      chart.data.labels = data.proxy.map((t, index) => index);
-      if (chart.data.datasets) {
-        chart.data.datasets[0].data = data.proxy.map(
-          (traffic) => traffic.upload + traffic.download,
-        );
-        chart.data.datasets[1].data = data.direct.map(
-          (traffic) => traffic.upload + traffic.download,
-        );
-      }
-      chart.update("none");
-    }
-  }, [chart, data]);
-
-  return <canvas ref={chartRef} />;
-}
diff --git a/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.module.css b/src/components/pages/Data/Dashboard/TrafficCard/FlowInfo/index.module.css
index 39bbae9..71184b3 100644
--- 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
index 50fa217..cb08f04 100644
--- 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
index 3174dbb..bcf6072 100644
--- 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
index 2b48515..e8bf685 100644
--- 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
index a461a94..5209fc4 100644
--- a/src/components/pages/Data/Dashboard/TrafficCard/index.module.css
+++ b/src/components/pages/Data/Dashboard/TrafficCard/index.module.css
@@ -5,18 +5,33 @@
     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 {
@@ -24,7 +39,4 @@
     }
   }
 
-  & .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
index 4dd3d86..f2186c4 100644
--- 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>
   );
diff --git a/src/components/pages/Data/Dashboard/index.tsx b/src/components/pages/Data/Dashboard/index.tsx
index b9c60b8..27bab14 100644
--- a/src/components/pages/Data/Dashboard/index.tsx
+++ b/src/components/pages/Data/Dashboard/index.tsx
@@ -1,13 +1,4 @@
 import { type RootState, trafficsSlice } from "@/reducers";
-import {
-  CategoryScale,
-  Chart,
-  LinearScale,
-  LineController,
-  LineElement,
-  PointElement,
-  Title,
-} from "chart.js";
 import {
   subscribeNowTraffic,
   subscribeTotalTraffic,
@@ -25,16 +16,17 @@ interface Speed {
   direct: TrafficItem[];
 }
 
-Chart.register(
-  LineController,
-  LineElement,
-  PointElement,
-  LinearScale,
-  Title,
-  CategoryScale,
-);
+interface DashboardProps {
+  connectionsAmount: {
+    tcp: number;
+    udp: number;
+  };
+}
 
-export default function Dashboard(): React.ReactNode {
+export default function Dashboard(
+  props: Readonly<DashboardProps>,
+): React.ReactNode {
+  const { connectionsAmount } = props;
   const traffics = useSelector<RootState, Traffic[]>((state) => {
     return state.traffics.now;
   });
@@ -50,8 +42,12 @@ export default function Dashboard(): React.ReactNode {
     });
     return result;
   }, [traffics]);
-  const total = useSelector<RootState, Traffic | null>(
-    (state) => state.traffics.total,
+  const total = useSelector<RootState, Traffic>(
+    (state) =>
+      state.traffics.total || {
+        proxy: { upload: 0, download: 0 },
+        direct: { upload: 0, download: 0 },
+      },
   );
   const dispatch = useDispatch();
   useEffect(() => {
@@ -77,11 +73,13 @@ export default function Dashboard(): React.ReactNode {
     };
   }, [dispatch]);
 
-  return speed && total ? (
+  return (
     <div className={styles.wrapper}>
-      <TrafficCard speed={speed} total={total} />
+      <TrafficCard
+        speed={speed}
+        total={total}
+        connectionsAmount={connectionsAmount}
+      />
     </div>
-  ) : (
-    ""
   );
 }
diff --git a/src/components/pages/Data/index.tsx b/src/components/pages/Data/index.tsx
index dfc018f..d36e9df 100644
--- a/src/components/pages/Data/index.tsx
+++ b/src/components/pages/Data/index.tsx
@@ -1,35 +1,6 @@
 import Connections from "@/components/pages/Data/Connections";
-import Dashboard from "@/components/pages/Data/Dashboard";
-import { TRANSLATION_KEY } from "@/i18n/locales/key";
-import { Tab, TabList } from "@fluentui/react-components";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-enum DATA_TAB {
-  Dashboard = "dashboard",
-  Connections = "connections",
-}
+import React from "react";
 
 export default function Data() {
-  const [selectedValue, setSelectedValue] = useState(DATA_TAB.Dashboard);
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <TabList
-        selectedValue={selectedValue}
-        onTabSelect={(event, data) => {
-          setSelectedValue(data.value as DATA_TAB);
-        }}
-      >
-        <Tab id={DATA_TAB.Dashboard} value={DATA_TAB.Dashboard}>
-          {t(TRANSLATION_KEY.STATISTICS)}
-        </Tab>
-        <Tab id={DATA_TAB.Connections} value={DATA_TAB.Connections}>
-          {t(TRANSLATION_KEY.NAV_CONNECTION)}
-        </Tab>
-      </TabList>
-      {selectedValue === DATA_TAB.Dashboard ? <Dashboard /> : <Connections />}
-    </>
-  );
+  return <Connections />;
 }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index df33d56..c1eaf35 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -5,9 +5,7 @@ import checkForUpdate from "@/utils/checkForUpdate";
 import { LAST_CHECK_UPDATE_DATE, LATEST_RELEASE_URL } from "@/utils/constants";
 import { makeStyles } from "@fluentui/react-components";
 import { tokens } from "@fluentui/react-theme";
-import { Chart, type ChartConfiguration } from "chart.js";
 import { getProxyDelay } from "lux-js-sdk";
-import type * as React from "react";
 import {
   useCallback,
   useEffect,
@@ -18,25 +16,6 @@ import {
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 
-export const useChartJs = (
-  initialConfiguration: ChartConfiguration,
-): [React.RefObject<HTMLCanvasElement>, Chart | undefined] => {
-  const chartRef = useRef<HTMLCanvasElement>(null);
-
-  const chart = useRef<Chart>();
-
-  useEffect(() => {
-    if (chartRef.current && !chart.current) {
-      const ctx = chartRef.current;
-      if (ctx) {
-        chart.current = new Chart(ctx, initialConfiguration);
-      }
-    }
-  }, [initialConfiguration]);
-
-  return [chartRef, chart.current];
-};
-
 export const useTestDelay = () => {
   const dispatch = useDispatch();
   return useCallback(
diff --git a/yarn.lock b/yarn.lock
index b71c364..0c94911 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1977,11 +1977,6 @@
   resolved "https://registry.yarnpkg.com/@jsonjoy.com/util/-/util-1.2.0.tgz#0fe9a92de72308c566ebcebe8b5a3f01d3149df2"
   integrity sha512-4B8B+3vFsY4eo33DMKyJPlQ3sBMpPFUZK2dr3O3rXrOGKKbYG44J0XSFkDo1VOQiri5HFEhIeVvItjR2xcazmg==
 
-"@kurkle/color@^0.3.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
-  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
-
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -2985,13 +2980,6 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chart.js@^4.4.7:
-  version "4.4.7"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.7.tgz#7a01ee0b4dac3c03f2ab0589af888db296d896fa"
-  integrity sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==
-  dependencies:
-    "@kurkle/color" "^0.3.0"
-
 "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"