diff --git a/app/app/(admin)/admin/usage-by-model.tsx b/app/api/charts/route.ts similarity index 73% rename from app/app/(admin)/admin/usage-by-model.tsx rename to app/api/charts/route.ts index 369708c19..41d2768a4 100644 --- a/app/app/(admin)/admin/usage-by-model.tsx +++ b/app/api/charts/route.ts @@ -1,22 +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 type { InferGetServerSidePropsType, GetServerSideProps } from "next"; - -// 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; type StringArray = string[]; @@ -59,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(), @@ -85,21 +76,7 @@ export default async function UsageByModel() { }); // @ts-ignore const log_data = HandleLogData(todayLog); - - // const usageByModelTimelineOption : EChartsOption = { - // timeline: { - // // ..., - // axisType: "time", - // autoPlay: false, - // - // data: ['2023/12/32', '2023/12/32'], - // // label: { - // // formatter: ((s) => { - // // return new Date(s).getDate().toString() - // // }) - // // } - // } - // } + // console.log('log_data', log_data) const usageByModelOption: EChartsOption = { tooltip: { @@ -146,17 +123,8 @@ export default async function UsageByModel() { }; }), }; - return ( - <> - - - ); + return NextResponse.json(usageByModelOption); } -export const getServerSideProps = async () => { - // Fetch data from external API - const data = {}; - - // Pass data to the page via props - return { props: { data } }; -}; +export const GET = handle; +// export const POST = handle; diff --git a/app/api/logs/[...path]/route.ts b/app/api/logs/[...path]/route.ts index c5c5a8e3b..16a6a1b55 100644 --- a/app/api/logs/[...path]/route.ts +++ b/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( diff --git a/app/app/(admin)/admin/date-picker.tsx b/app/app/(admin)/admin/date-picker.tsx deleted file mode 100644 index d06d987e9..000000000 --- a/app/app/(admin)/admin/date-picker.tsx +++ /dev/null @@ -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({ - // from: new Date(2023, 1, 1), - // to: new Date(), - // }); - - const currentDate: DatePickerValue = new Date(); - - return ( - - ); -} diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx index a13e1b259..de848bd2c 100644 --- a/app/app/(admin)/admin/page.tsx +++ b/app/app/(admin)/admin/page.tsx @@ -1,13 +1,13 @@ import { Grid, Col, - Card, - Text, - AreaChart, - Metric, - DatePicker, + // Card, + // Text, + // AreaChart, + // Metric, + // 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"; diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/usage-by-model-chart.tsx index 1fd071b31..3906de5b0 100644 --- a/app/app/(admin)/admin/usage-by-model-chart.tsx +++ b/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 { zhCN } from "date-fns/locale"; // 导入 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 (
d && setCurrentDate(d)} maxDate={new Date()} /> - )