157 lines
3.3 KiB
TypeScript
157 lines
3.3 KiB
TypeScript
import ColumnBar from '@/components/charts/column-bar';
|
|
import HBar from '@/components/charts/h-bar';
|
|
import PageTools from '@/components/page-tools';
|
|
import { generateRandomArray } from '@/utils';
|
|
import { PageContainer } from '@ant-design/pro-components';
|
|
import { Col, DatePicker, Row } from 'antd';
|
|
|
|
const times = [
|
|
'june 1',
|
|
'june 2',
|
|
'june 3',
|
|
'june 4',
|
|
'june 5',
|
|
'june 6',
|
|
'june 7'
|
|
];
|
|
|
|
const users = ['Jim', 'Lucy', 'Lily', 'Tom', 'Jack', 'Rose', 'Jerry'];
|
|
const projects = [
|
|
'copilot-dev',
|
|
'rag-wiki',
|
|
'smart-auto-agent',
|
|
'office-auto-docs',
|
|
'smart-customer-service'
|
|
];
|
|
|
|
const APIRequestData = generateRandomArray({
|
|
length: times.length,
|
|
max: 100,
|
|
min: 0,
|
|
offset: 10
|
|
});
|
|
|
|
const TokensData = generateRandomArray({
|
|
length: times.length,
|
|
max: 2000,
|
|
min: 200,
|
|
offset: 200
|
|
});
|
|
|
|
const usersData = generateRandomArray({
|
|
length: users.length,
|
|
max: 100,
|
|
min: 0,
|
|
offset: 10
|
|
});
|
|
|
|
const projectsData = generateRandomArray({
|
|
length: projects.length,
|
|
max: 100,
|
|
min: 0,
|
|
offset: 10
|
|
});
|
|
|
|
const userDataList = usersData
|
|
.map((val, i) => {
|
|
return {
|
|
time: users[i],
|
|
value: val
|
|
};
|
|
})
|
|
.sort((a, b) => b.value - a.value);
|
|
|
|
const projectDataList = projectsData
|
|
.map((val, i) => {
|
|
return {
|
|
time: projects[i],
|
|
value: val
|
|
};
|
|
})
|
|
.sort((a, b) => b.value - a.value);
|
|
|
|
const dataList = APIRequestData.map((val, i) => {
|
|
console.log('val', val);
|
|
return {
|
|
time: times[i],
|
|
value: val
|
|
};
|
|
});
|
|
const tokenUsage = TokensData.map((val, i) => {
|
|
console.log('val', val);
|
|
return {
|
|
time: times[i],
|
|
value: val
|
|
};
|
|
});
|
|
|
|
const Usage = () => {
|
|
const handleSelectDate = (dateString: string) => {
|
|
console.log('dateString============', dateString);
|
|
};
|
|
return (
|
|
<>
|
|
<PageContainer ghost title="Usage">
|
|
<PageTools
|
|
marginBottom={10}
|
|
marginTop={0}
|
|
left={false}
|
|
right={
|
|
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
|
}
|
|
/>
|
|
</PageContainer>
|
|
<Row style={{ width: '100%' }}>
|
|
<Col span={12}>
|
|
<PageContainer title={false}>
|
|
<ColumnBar
|
|
title="API Request"
|
|
data={dataList}
|
|
xField="time"
|
|
yField="value"
|
|
height={360}
|
|
></ColumnBar>
|
|
</PageContainer>
|
|
</Col>
|
|
<Col span={12}>
|
|
<PageContainer title={false}>
|
|
<ColumnBar
|
|
title="Tokens"
|
|
data={tokenUsage}
|
|
xField="time"
|
|
yField="value"
|
|
height={360}
|
|
></ColumnBar>
|
|
</PageContainer>
|
|
</Col>
|
|
</Row>
|
|
<Row style={{ width: '100%' }}>
|
|
<Col span={12}>
|
|
<PageContainer title={false}>
|
|
<HBar
|
|
title="Top Users"
|
|
data={userDataList}
|
|
xField="time"
|
|
yField="value"
|
|
height={400}
|
|
></HBar>
|
|
</PageContainer>
|
|
</Col>
|
|
<Col span={12}>
|
|
<PageContainer title={false}>
|
|
<HBar
|
|
title="Top Projects"
|
|
data={projectDataList}
|
|
xField="time"
|
|
yField="value"
|
|
height={400}
|
|
></HBar>
|
|
</PageContainer>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Usage;
|