进一步精简优化报表

app/api/charts/route.ts

@@ -1,22 +1,11 @@
-// import * as echarts from "echarts";
+import { NextRequest, NextResponse } from "next/server";
-import { EChartsOption } from "echarts";
-import dynamic from "next/dynamic";
 import prisma from "@/lib/prisma";
 import { addHours, subMinutes } from "date-fns";
-import { log } from "util";
+import { EChartsOption } from "echarts";
-import { use } from "react";
-import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
-
-// import { getTokenLength } from "@/app/utils/token";
-
-const UsageByModelChart = dynamic(() => import("./usage-by-model-chart"), {
-  ssr: false,
-});
 
 interface StringKeyedObject {
   [key: string]: { [key: string]: number };
 }
-
 type StringSet = Set<string>;
 type StringArray = string[];
 
@@ -59,9 +48,11 @@ function HandleLogData(
   };
 }
 
-export default async function UsageByModel() {
+async function handle(req: NextRequest) {
-  // 今天日期的开始和结束
+  const { searchParams } = new URL(req.url);
-  let currentTime = new Date();
+  const date = searchParams.get("date") ?? "";
+  // 当天日期的开始和结束
+  let currentTime = new Date(date);
   // today = subMinutes(today, today.getTimezoneOffset())
   const startOfTheDayInTimeZone = new Date(
     currentTime.getFullYear(),
@@ -85,21 +76,7 @@ export default async function UsageByModel() {
   });
   // @ts-ignore
   const log_data = HandleLogData(todayLog);
-
+  // console.log('log_data', log_data)
-  // const usageByModelTimelineOption : EChartsOption = {
-  //   timeline: {
-  //     // ...,
-  //     axisType: "time",
-  //     autoPlay: false,
-  //
-  //     data: ['2023/12/32', '2023/12/32'],
-  //     // label: {
-  //     //   formatter: ((s) => {
-  //     //     return new Date(s).getDate().toString()
-  //     //   })
-  //     // }
-  //   }
-  // }
 
   const usageByModelOption: EChartsOption = {
     tooltip: {
@@ -146,17 +123,8 @@ export default async function UsageByModel() {
       };
     }),
   };
-  return (
+  return NextResponse.json(usageByModelOption);
-    <>
-      <UsageByModelChart option={usageByModelOption} />
-    </>
-  );
 }
 
-export const getServerSideProps = async () => {
+export const GET = handle;
-  // Fetch data from external API
+// export const POST = handle;
-  const data = {};
-
-  // Pass data to the page via props
-  return { props: { data } };
-};

app/api/logs/[...path]/route.ts

@@ -9,19 +9,8 @@ import { get_encoding } from "tiktoken";
 import { addHours, subMinutes } from "date-fns";
 
 function getTokenLength(input: string): number {
-  // const { Tiktoken } = require("tiktoken/lite");
-  // const cl100k_base = require("tiktoken/encoders/cl100k_base.json");
-  // const encoding = new Tiktoken(
-  //     cl100k_base.bpe_ranks,
-  //     cl100k_base.special_tokens,
-  //     cl100k_base.pat_str,
-  // );
   const encoding = get_encoding("cl100k_base");
-
+  return encoding.encode(input).length;
-  const tokenLength = encoding.encode(input).length;
-  // console.log('[TOKEN],=========', input, tokenLength)
-
-  return tokenLength;
 }
 
 async function handle(

app/app/(admin)/admin/date-picker.tsx

@@ -1,27 +0,0 @@
-"use client";
-import {
-  DatePicker,
-  DateRangePickerItem,
-  DatePickerValue,
-} from "@tremor/react";
-import { da, es, zhCN } from "date-fns/locale";
-
-export default function DateRangePickerSpanish() {
-  // const [value, setValue] = useState<DateRangePickerValue>({
-  //     from: new Date(2023, 1, 1),
-  //     to: new Date(),
-  // });
-
-  const currentDate: DatePickerValue = new Date();
-
-  return (
-    <DatePicker
-      className="max-w-sm mx-auto justify-center"
-      // value={dataRange}
-      locale={zhCN}
-      defaultValue={new Date()}
-      // minDate={new Date(2023, 1, 1)}
-      maxDate={new Date()}
-    />
-  );
-}

app/app/(admin)/admin/page.tsx

@@ -1,13 +1,13 @@
 import {
   Grid,
   Col,
-  Card,
+  // Card,
-  Text,
+  // Text,
-  AreaChart,
+  // AreaChart,
-  Metric,
+  // Metric,
-  DatePicker,
+  // DatePicker,
 } from "@tremor/react";
-import UsageByModel from "./usage-by-model";
+import UsageByModel from "./usage-by-model-chart";
 import { getSession, ADMIN_LIST, isName } from "@/lib/auth";
 import { redirect } from "next/navigation";
 

app/app/(admin)/admin/usage-by-model-chart.tsx

@@ -1,31 +1,55 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import * as echarts from "echarts";
-import { DatePicker } from "@tremor/react";
+import { DatePicker, DatePickerValue } from "@tremor/react";
-import { zhCN } from "date-fns/locale"; // 导入 echarts
+import { zhCN } from "date-fns/locale";
+import { param } from "ts-interface-checker"; // 导入 echarts
+
+// {
+//   option,
+// }: {
+//   option: echarts.EChartsOption;
+// }
+export default function UsageByModelChart() {
+  const [currentDate, setCurrentDate] = React.useState(new Date());
+  const [searchDate, setSearchDate] = React.useState("");
 
-export default function UsageByModelChart({
-  option,
-}: {
-  option: echarts.EChartsOption;
-}) {
   useEffect(() => {
-    var chartDom = document.getElementById("usage-by-model-chart");
+    console.log("init", currentDate, searchDate);
-    var myChart = echarts.init(chartDom);
+    const currentDateString = currentDate.toLocaleDateString();
-    option && myChart.setOption(option);
+    if (searchDate != currentDateString) {
-  }, [option]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
+      async function fetchData() {
+        console.log("异步", searchDate, currentDateString);
+        const response = await fetch("/api/charts?date=" + currentDateString, {
+          method: "GET",
+        });
+        return await response.json();
+      }
+      fetchData().then((option) => {
+        if (option) {
+          let chartDom = document.getElementById("usage-by-model-chart");
+          let myChart = echarts.init(chartDom);
+          option && myChart.setOption(option);
+          console.log("option计数", 1);
+        }
+      });
+      console.log("搜索开始计数", 1, searchDate, currentDateString);
+    }
+    return () => {
+      setSearchDate(currentDateString);
+    };
+  }, [currentDate, searchDate]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
   return (
     <div>
       <DatePicker
         className="max-w-sm mx-auto justify-center"
-        // value={dataRange}
+        value={currentDate}
         locale={zhCN}
         defaultValue={new Date()}
-        // minDate={new Date(2023, 1, 1)}
+        onValueChange={(d) => d && setCurrentDate(d)}
         maxDate={new Date()}
       />
-      )
       <div
         id="usage-by-model-chart"
         style={{ width: "100%", height: "400px" }}