From cca33ae16fa94975cdefe663f9f8e225607fcd50 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Fri, 22 Dec 2023 13:46:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=9B=BE=E8=A1=A8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app/(admin)/admin/page.tsx                     |  9 +++++++--
 .../admin/{testchart.tsx => usage-by-model.tsx}    | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)
 rename app/app/(admin)/admin/{testchart.tsx => usage-by-model.tsx} (75%)

diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx
index bd26de746..bef4e9350 100644
--- a/app/app/(admin)/admin/page.tsx
+++ b/app/app/(admin)/admin/page.tsx
@@ -1,7 +1,12 @@
 // "use client";
 import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
 import UsageAnalysis from "./usage-analysis";
-import EchartsComponent from "./testchart";
+// import EchartsComponent from "./testchart";
+import dynamic from "next/dynamic";
+
+const UsageByModelChart = dynamic(() => import("./usage-by-model"), {
+  ssr: false,
+});
 
 export default function AdminPage() {
   return (
@@ -11,7 +16,7 @@ export default function AdminPage() {
           <UsageAnalysis />
         </Col>
         <Col numColSpan={1} numColSpanLg={2}>
-          <EchartsComponent />
+          <UsageByModelChart />
         </Col>
       </Grid>
     </>
diff --git a/app/app/(admin)/admin/testchart.tsx b/app/app/(admin)/admin/usage-by-model.tsx
similarity index 75%
rename from app/app/(admin)/admin/testchart.tsx
rename to app/app/(admin)/admin/usage-by-model.tsx
index 45513dc13..a6c84ea02 100644
--- a/app/app/(admin)/admin/testchart.tsx
+++ b/app/app/(admin)/admin/usage-by-model.tsx
@@ -2,9 +2,14 @@
 import React, { useEffect } from "react";
 import * as echarts from "echarts"; // 导入 echarts
 
+// const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js
+
 const EchartsComponent: React.FC = () => {
   useEffect(() => {
-    var chartDom = document.getElementById("charts");
+    // if (!isBrowser()) return;
+    var chartDom = document.getElementById("usage-by-model-chart");
+    // if (!chartDiv.current) return;
+    // var myChart = echarts.init(chartDiv.current)
     var myChart = echarts.init(chartDom);
     var option;
 
@@ -47,7 +52,12 @@ const EchartsComponent: React.FC = () => {
     option && myChart.setOption(option);
   }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
-  return <div id="charts" style={{ width: "100%", height: "400px" }}></div>;
+  return (
+    <div
+      id="usage-by-model-chart"
+      style={{ width: "100%", height: "400px" }}
+    ></div>
+  );
 };
 
 export default EchartsComponent;