From a2070067b0020a9c9303339018056dd0fd6727aa Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Thu, 15 Feb 2024 12:19:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/dockerToHub-dev.yml         |  6 +--
 .../(admin)/admin/usage-by-model-chart.tsx    | 52 ++++++++++++++-----
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/dockerToHub-dev.yml b/.github/workflows/dockerToHub-dev.yml
index 43f1aa219..2131071fd 100644
--- a/.github/workflows/dockerToHub-dev.yml
+++ b/.github/workflows/dockerToHub-dev.yml
@@ -1,9 +1,9 @@
 name: DEV DEPLOY TO TX
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - dev
+#  push:
+#    branches:
+#      - dev
 
 jobs:
   build:
diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/usage-by-model-chart.tsx
index 99c55f5de..7be70552b 100644
--- a/app/app/(admin)/admin/usage-by-model-chart.tsx
+++ b/app/app/(admin)/admin/usage-by-model-chart.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, Dispatch, SetStateAction } from "react";
 
 import * as echarts from "echarts";
 import { DatePicker, DatePickerValue } from "@tremor/react";
@@ -7,8 +7,25 @@ import { zhCN } from "date-fns/locale";
 import { EChartsOption } from "echarts";
 import { essos, walden } from "@/lib/charts_theme";
 
-export default function UsageByModelChart() {
-  const [currentDate, setCurrentDate] = useState(new Date());
+interface ComponentProps {
+  currentDate: Date;
+  setCurrentDate: Dispatch<SetStateAction<Date>>;
+}
+
+function DateSelectComponent({ currentDate, setCurrentDate }: ComponentProps) {
+  return (
+    <DatePicker
+      className="max-w-sm mx-auto justify-center"
+      value={currentDate}
+      locale={zhCN}
+      defaultValue={new Date()}
+      onValueChange={(d) => d && setCurrentDate(d)}
+      maxDate={new Date()}
+    />
+  );
+}
+
+function EchartsComponent({ currentDate, setCurrentDate }: ComponentProps) {
   const [searchDate, setSearchDate] = useState("");
 
   useEffect(() => {
@@ -68,20 +85,27 @@ export default function UsageByModelChart() {
     };
   }, [currentDate, searchDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
+  return (
+    <div
+      id="usage-by-model-chart"
+      style={{ width: "100%", height: "400px" }}
+    ></div>
+  );
+}
+
+export default function UsageByModelChart() {
+  const [currentDate, setCurrentDate] = useState(new Date());
+
   return (
     <div>
-      <DatePicker
-        className="max-w-sm mx-auto justify-center"
-        value={currentDate}
-        locale={zhCN}
-        defaultValue={new Date()}
-        onValueChange={(d) => d && setCurrentDate(d)}
-        maxDate={new Date()}
+      <DateSelectComponent
+        currentDate={currentDate}
+        setCurrentDate={setCurrentDate}
+      />
+      <EchartsComponent
+        currentDate={currentDate}
+        setCurrentDate={setCurrentDate}
       />
-      <div
-        id="usage-by-model-chart"
-        style={{ width: "100%", height: "400px" }}
-      ></div>
     </div>
   );
 }