feat: enable show or hide traffic graph

src/components/layout/layout-traffic.tsx

@@ -1,9 +1,11 @@
+import useSWR from "swr";
 import { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
-import { getInfomation } from "../../services/api";
 import { ApiType } from "../../services/types";
+import { getInfomation } from "../../services/api";
+import { getVergeConfig } from "../../services/cmds";
 import { atomClashPort } from "../../states/setting";
 import parseTraffic from "../../utils/parse-traffic";
 import useTrafficGraph from "./use-traffic-graph";
@@ -13,6 +15,10 @@ const LayoutTraffic = () => {
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
   const { canvasRef, appendData, toggleStyle } = useTrafficGraph();
 
+  // whether hide traffic graph
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const trafficGraph = data?.traffic_graph ?? true;
+
   useEffect(() => {
     let ws: WebSocket | null = null;
 
@@ -49,10 +55,12 @@ const LayoutTraffic = () => {
 
   return (
     <Box data-windrag width="110px" position="relative" onClick={toggleStyle}>
-      <canvas
-        ref={canvasRef}
-        style={{ width: "100%", height: 60, marginBottom: 6 }}
-      />
+      {trafficGraph && (
+        <canvas
+          ref={canvasRef}
+          style={{ width: "100%", height: 60, marginBottom: 6 }}
+        />
+      )}
 
       <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
         <ArrowUpward

src/components/layout/use-traffic-graph.ts

@@ -26,6 +26,9 @@ export default function useTrafficGraph() {
 
   const drawGraph = () => {
     const canvas = canvasRef.current!;
+
+    if (!canvas) return;
+
     const context = canvas.getContext("2d")!;
     const width = canvas.width;
     const height = canvas.height;

src/components/setting/setting-verge.tsx

@@ -6,12 +6,12 @@ import {
   openLogsDir,
   patchVergeConfig,
 } from "../../services/cmds";
+import { ArrowForward } from "@mui/icons-material";
 import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
-import GuardState from "./guard-state";
 import PaletteSwitch from "./palette-switch";
-import { ArrowForward } from "@mui/icons-material";
+import GuardState from "./guard-state";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -21,7 +21,7 @@ const SettingVerge = ({ onError }: Props) => {
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
-  const { theme_mode: mode = "light", theme_blur: blur = false } =
+  const { theme_mode = "light", theme_blur = false, traffic_graph } =
     vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
@@ -34,7 +34,7 @@ const SettingVerge = ({ onError }: Props) => {
       <SettingItem>
         <ListItemText primary="Theme Mode" />
         <GuardState
-          value={mode === "dark"}
+          value={theme_mode === "dark"}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -50,7 +50,7 @@ const SettingVerge = ({ onError }: Props) => {
       <SettingItem>
         <ListItemText primary="Theme Blur" />
         <GuardState
-          value={blur}
+          value={theme_blur}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -62,15 +62,22 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Open App Dir" />
-        <IconButton
-          color="inherit"
-          size="small"
-          onClick={() => {
-            console.log("click");
-            openAppDir().then(console.log).catch(console.log);
-          }}
+        <ListItemText primary="Traffic Graph" />
+        <GuardState
+          value={traffic_graph ?? true}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ traffic_graph: e })}
+          onGuard={(e) => patchVergeConfig({ traffic_graph: e })}
         >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Open App Dir" />
+        <IconButton color="inherit" size="small" onClick={openAppDir}>
           <ArrowForward />
         </IconButton>
       </SettingItem>