Merge pull request #7 from sijinhui/dev

进一步精简优化报表

app/api/charts/route.ts

@@ -1,21 +1,11 @@
-import * as echarts from "echarts";
-import { EChartsOption } from "echarts";
-import dynamic from "next/dynamic";
+import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/lib/prisma";
 import { addHours, subMinutes } from "date-fns";
-import { log } from "util";
-import { use } from "react";
-
-// import { getTokenLength } from "@/app/utils/token";
-
-const UsageByModelChart = dynamic(() => import("./usage-by-model-chart"), {
-  ssr: false,
-});
+import { EChartsOption } from "echarts";
 
 interface StringKeyedObject {
   [key: string]: { [key: string]: number };
 }
-
 type StringSet = Set<string>;
 type StringArray = string[];
 
@@ -58,9 +48,11 @@ function HandleLogData(
   };
 }
 
-export default async function UsageByModel() {
-  // 今天日期的开始和结束
-  let currentTime = new Date();
+async function handle(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const date = searchParams.get("date") ?? "";
+  // 当天日期的开始和结束
+  let currentTime = new Date(date);
   // today = subMinutes(today, today.getTimezoneOffset())
   const startOfTheDayInTimeZone = new Date(
     currentTime.getFullYear(),
@@ -84,6 +76,7 @@ export default async function UsageByModel() {
   });
   // @ts-ignore
   const log_data = HandleLogData(todayLog);
+  // console.log('log_data', log_data)
 
   const usageByModelOption: EChartsOption = {
     tooltip: {
@@ -130,9 +123,8 @@ export default async function UsageByModel() {
       };
     }),
   };
-  return (
-    <>
-      <UsageByModelChart option={usageByModelOption} />
-    </>
-  );
+  return NextResponse.json(usageByModelOption);
 }
+
+export const GET = handle;
+// export const POST = handle;

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");
-
-  const tokenLength = encoding.encode(input).length;
-  // console.log('[TOKEN],=========', input, tokenLength)
-
-  return tokenLength;
+  return encoding.encode(input).length;
 }
 
 async function handle(

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

@@ -1,5 +1,13 @@
-import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
-import UsageByModel from "./usage-by-model";
+import {
+  Grid,
+  Col,
+  // Card,
+  // Text,
+  // AreaChart,
+  // Metric,
+  // DatePicker,
+} from "@tremor/react";
+import UsageByModel from "./usage-by-model-chart";
 import { getSession, ADMIN_LIST, isName } from "@/lib/auth";
 import { redirect } from "next/navigation";
 
@@ -13,11 +21,13 @@ export default async function AdminPage() {
   return (
     <>
       <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
-        <Col numColSpan={1} numColSpanLg={1}>
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
           {/*<UsageAnalysis />*/}
           {/*<Card></Card>*/}
+          {/*<DatePicker className="max-w-sm mx-auto justify-center" />*/}
+          {/*<DateRangePickerSpanish />*/}
         </Col>
-        <Col numColSpan={1} numColSpanLg={2}>
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
           <UsageByModel />
         </Col>
       </Grid>

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

@@ -1,22 +1,59 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import * as echarts from "echarts"; // 导入 echarts
+import * as echarts from "echarts";
+import { DatePicker, DatePickerValue } from "@tremor/react";
+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");
-    var myChart = echarts.init(chartDom);
-    option && myChart.setOption(option);
-  }, [option]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
+    console.log("init", currentDate, searchDate);
+    const currentDateString = currentDate.toLocaleDateString();
+    if (searchDate != currentDateString) {
+      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
-      id="usage-by-model-chart"
-      style={{ width: "100%", height: "400px" }}
-    ></div>
+    <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()}
+      />
+      <div
+        id="usage-by-model-chart"
+        style={{ width: "100%", height: "400px" }}
+      ></div>
+    </div>
   );
 }