108 lines
2.5 KiB
TypeScript
108 lines
2.5 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 { Button } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { baseColorMap } from '../../config';
|
|
|
|
const DownloadButton = styled(Button).attrs({
|
|
className: 'download-button'
|
|
})`
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 10;
|
|
display: none;
|
|
`;
|
|
|
|
const CardWrapperBox = styled.div`
|
|
&:hover {
|
|
.download-button {
|
|
display: flex;
|
|
}
|
|
}
|
|
`;
|
|
|
|
interface RequestTokenInnerProps {
|
|
onExport?: () => void;
|
|
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',
|
|
iconType: 'roundRect',
|
|
color: baseColorMap.base
|
|
},
|
|
{
|
|
label: '50M',
|
|
value: 'Prompt Tokens',
|
|
iconType: 'roundRect',
|
|
color: baseColorMap.baseR3
|
|
},
|
|
{
|
|
label: '120K',
|
|
value: 'API Requests',
|
|
iconType: 'circle',
|
|
color: baseColorMap.baseR1
|
|
}
|
|
];
|
|
|
|
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, onExport } = props;
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<CardWrapperBox>
|
|
<CardWrapper style={{ width: '100%', position: 'relative' }}>
|
|
{/* <DownloadButton
|
|
type="link"
|
|
icon={<ExportOutlined />}
|
|
size="small"
|
|
onClick={onExport}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.export' })}
|
|
</DownloadButton> */}
|
|
<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>
|
|
</CardWrapperBox>
|
|
);
|
|
};
|
|
|
|
export default React.memo(RequestTokenInner);
|