81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import CardWrapper from '@/components/card-wrapper';
|
|
import { SimpleCard } from '@/components/card-wrapper/simple-card';
|
|
import MixLineBar from '@/components/echarts/mix-line-bar';
|
|
import { useIntl } from '@umijs/max';
|
|
import dayjs from 'dayjs';
|
|
import React from 'react';
|
|
|
|
interface RequestTokenInnerProps {
|
|
requestData: {
|
|
name: string;
|
|
color: string;
|
|
areaStyle: any;
|
|
data: { time: string; value: number }[];
|
|
}[];
|
|
tokenData: {
|
|
data: { time: string; value: number }[];
|
|
}[];
|
|
xAxisData: string[];
|
|
}
|
|
|
|
const labelFormatter = (v: any) => {
|
|
return dayjs(v).format('MM-DD');
|
|
};
|
|
|
|
const dataList = [
|
|
{ label: '100M', value: 'Completion Tokens' },
|
|
{ label: '50M', value: 'Prompt Tokens' },
|
|
{ label: '120K', value: 'API Requests' }
|
|
];
|
|
|
|
const legendData = [
|
|
{ name: 'Completion tokens', icon: 'roundRect' },
|
|
{ name: 'Prompt tokens', icon: 'roundRect' },
|
|
{ name: 'API requests', icon: 'circle' }
|
|
];
|
|
|
|
const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
|
|
const { requestData, tokenData, xAxisData } = props;
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<CardWrapper style={{ width: '100%' }}>
|
|
{/* <Row style={{ width: '100%' }}>
|
|
<Col span={12}>
|
|
<LineChart
|
|
title={intl.formatMessage({ id: 'dashboard.apirequest' })}
|
|
seriesData={requestData}
|
|
xAxisData={xAxisData}
|
|
height={360}
|
|
labelFormatter={labelFormatter}
|
|
></LineChart>
|
|
</Col>
|
|
<Col span={12}>
|
|
<BarChart
|
|
title={intl.formatMessage({ id: 'dashboard.tokens' })}
|
|
seriesData={tokenData}
|
|
xAxisData={xAxisData}
|
|
height={360}
|
|
labelFormatter={labelFormatter}
|
|
></BarChart>
|
|
</Col>
|
|
</Row> */}
|
|
<SimpleCard dataList={dataList} height={80}></SimpleCard>
|
|
<MixLineBar
|
|
chartData={{
|
|
line: requestData,
|
|
bar: tokenData
|
|
}}
|
|
seriesData={[]}
|
|
xAxisData={xAxisData}
|
|
height={360}
|
|
smooth={true}
|
|
legendData={legendData}
|
|
labelFormatter={labelFormatter}
|
|
></MixLineBar>
|
|
</CardWrapper>
|
|
);
|
|
};
|
|
|
|
export default React.memo(RequestTokenInner);
|