mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-10-01 23:56:39 +08:00
进一步精简优化报表
This commit is contained in:
sijinhui
parent
2bbe13bf3a
commit
c70222ee6d
@ -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<string>;
|
||||
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 (
|
||||
<>
|
||||
<UsageByModelChart option={usageByModelOption} />
|
||||
</>
|
||||
);
|
||||
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;
|
||||
@ -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(
|
||||
|
||||
@ -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()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -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";
|
||||
|
||||
|
||||
@ -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 (
|
||||
<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" }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user