build: css files dir
This commit is contained in:
jialin
@@ -30,6 +30,7 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
|
||||
}
|
||||
},
|
||||
title: {
|
||||
// title,
|
||||
titleFontSize: 14,
|
||||
style: {
|
||||
align: 'center'
|
||||
|
||||
@@ -42,12 +42,14 @@ const projectColumns = [
|
||||
{
|
||||
title: 'Token Quota',
|
||||
dataIndex: 'quota',
|
||||
key: 'quota'
|
||||
key: 'quota',
|
||||
render: (text: any, record: any) => <span>{record.quota}k</span>
|
||||
},
|
||||
{
|
||||
title: 'Token Utilization',
|
||||
dataIndex: 'utilization',
|
||||
key: 'utilization'
|
||||
key: 'utilization',
|
||||
render: (text: any, record: any) => <span>{record.utilization}%</span>
|
||||
},
|
||||
{
|
||||
title: 'Members',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Card, Col, Row, Space } from 'antd';
|
||||
import React from 'react';
|
||||
import { overviewConfigs } from '../config';
|
||||
@@ -62,17 +63,19 @@ const Overview: React.FC = (props) => {
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Row gutter={[20, 20]} className={styles.row}>
|
||||
{overviewConfigs.map((config, index) => (
|
||||
<Col span={5} key={config.key}>
|
||||
{renderCardItem({
|
||||
label: config.label,
|
||||
value: renderValue(data[config.key] || 0),
|
||||
bgColor: config.backgroundColor
|
||||
})}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
<PageContainer ghost title={false}>
|
||||
<Row gutter={[20, 20]} className={styles.row}>
|
||||
{overviewConfigs.map((config, index) => (
|
||||
<Col span={5} key={config.key}>
|
||||
{renderCardItem({
|
||||
label: config.label,
|
||||
value: renderValue(data[config.key] || 0),
|
||||
bgColor: config.backgroundColor
|
||||
})}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,28 @@
|
||||
import LineChart from '@/components/charts/line-chart';
|
||||
import { generateRandomArray } from '@/utils';
|
||||
import { generateFluctuatingData } from '@/utils';
|
||||
import _ from 'lodash';
|
||||
|
||||
const mockData = {
|
||||
GPU: generateRandomArray(),
|
||||
CPU: generateRandomArray(),
|
||||
Memory: generateRandomArray(),
|
||||
VRAM: generateRandomArray()
|
||||
GPU: generateFluctuatingData({
|
||||
total: 17,
|
||||
max: 80,
|
||||
min: 20
|
||||
}),
|
||||
CPU: generateFluctuatingData({
|
||||
total: 17,
|
||||
max: 70,
|
||||
min: 10
|
||||
}),
|
||||
Memory: generateFluctuatingData({
|
||||
total: 17,
|
||||
max: 60,
|
||||
min: 20
|
||||
}),
|
||||
VRAM: generateFluctuatingData({
|
||||
total: 17,
|
||||
max: 90,
|
||||
min: 15
|
||||
})
|
||||
};
|
||||
const UtilizationOvertime: React.FC = () => {
|
||||
const timeList = [
|
||||
@@ -15,8 +31,8 @@ const UtilizationOvertime: React.FC = () => {
|
||||
// '03:00:00',
|
||||
// '04:00:00',
|
||||
// '05:00:00',
|
||||
'06:00:00',
|
||||
'07:00:00',
|
||||
// '06:00:00',
|
||||
// '07:00:00',
|
||||
'08:00:00',
|
||||
'09:00:00',
|
||||
'10:00:00',
|
||||
@@ -24,7 +40,16 @@ const UtilizationOvertime: React.FC = () => {
|
||||
'12:00:00',
|
||||
'13:00:00',
|
||||
'14:00:00',
|
||||
'15:00:00'
|
||||
'15:00:00',
|
||||
'16:00:00',
|
||||
'17:00:00',
|
||||
'18:00:00',
|
||||
'19:00:00',
|
||||
'20:00:00',
|
||||
'21:00:00',
|
||||
'22:00:00',
|
||||
'23:00:00',
|
||||
'24:00:00'
|
||||
];
|
||||
const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
|
||||
const generateData = () => {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import GaugeChart from '@/components/charts/gauge';
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Col, DatePicker, Row } from 'antd';
|
||||
import ResourceUtilization from './resource-utilization';
|
||||
|
||||
@@ -9,59 +10,61 @@ const SystemLoad = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="system-load">
|
||||
<PageTools
|
||||
marginBottom={10}
|
||||
marginTop={0}
|
||||
left={false}
|
||||
right={
|
||||
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
||||
}
|
||||
/>
|
||||
<ResourceUtilization />
|
||||
<Row style={{ width: '100%' }}>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="GPU Compute Utilization"
|
||||
total={100}
|
||||
target={20}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="GPU Memory Utilization"
|
||||
total={100}
|
||||
target={30}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="CPU Compute Utilization"
|
||||
total={100}
|
||||
target={40}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="CPU Memory Utilization"
|
||||
total={100}
|
||||
target={70}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<PageContainer ghost title="System Load">
|
||||
<div className="system-load">
|
||||
<PageTools
|
||||
marginBottom={10}
|
||||
marginTop={0}
|
||||
left={false}
|
||||
right={
|
||||
<DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
|
||||
}
|
||||
/>
|
||||
<ResourceUtilization />
|
||||
<Row style={{ width: '100%' }}>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="GPU Compute Utilization"
|
||||
total={100}
|
||||
target={20}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="GPU Memory Utilization"
|
||||
total={100}
|
||||
target={30}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="CPU Compute Utilization"
|
||||
total={100}
|
||||
target={40}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<GaugeChart
|
||||
title="CPU Memory Utilization"
|
||||
total={100}
|
||||
target={70}
|
||||
// height={320}
|
||||
thresholds={[50, 70, 100]}
|
||||
rangColor={['#54cc98', '#ffd666', '#ff7875']}
|
||||
></GaugeChart>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -133,7 +133,7 @@ const Usage = () => {
|
||||
data={userDataList}
|
||||
xField="time"
|
||||
yField="value"
|
||||
height={360}
|
||||
height={400}
|
||||
></HBar>
|
||||
</PageContainer>
|
||||
</Col>
|
||||
@@ -144,7 +144,7 @@ const Usage = () => {
|
||||
data={projectDataList}
|
||||
xField="time"
|
||||
yField="value"
|
||||
height={360}
|
||||
height={400}
|
||||
></HBar>
|
||||
</PageContainer>
|
||||
</Col>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import DividerLine from '@/components/divider-line';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import ActiveTable from './components/active-table';
|
||||
import Overview from './components/over-view';
|
||||
import SystemLoad from './components/system-load';
|
||||
@@ -8,13 +7,9 @@ import Usage from './components/usage';
|
||||
const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<PageContainer ghost title={false}>
|
||||
<Overview></Overview>
|
||||
</PageContainer>
|
||||
<Overview></Overview>
|
||||
<DividerLine></DividerLine>
|
||||
<PageContainer ghost title="System Load">
|
||||
<SystemLoad></SystemLoad>
|
||||
</PageContainer>
|
||||
<SystemLoad></SystemLoad>
|
||||
<DividerLine></DividerLine>
|
||||
<Usage></Usage>
|
||||
<DividerLine></DividerLine>
|
||||
|
||||
@@ -55,3 +55,87 @@ export const generateRandomArray = (config?: {
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const generateFluctuatingData2 = ({
|
||||
total = 100,
|
||||
noiseLevel = 10,
|
||||
max = 50,
|
||||
min = 5
|
||||
}) => {
|
||||
const x = [];
|
||||
const y = [];
|
||||
|
||||
for (let i = 0; i < total; i++) {
|
||||
// 生成一个基本的线性趋势，使用正弦函数
|
||||
const phaseShift = Math.random() * 2 * Math.PI;
|
||||
const trend =
|
||||
max * Math.sin((3 * Math.PI * i + phaseShift) / total) + max / 2;
|
||||
|
||||
// 生成噪声
|
||||
const noise = (Math.random() * 2 - 1) * noiseLevel;
|
||||
|
||||
// 叠加趋势和噪声
|
||||
const value = trend + noise;
|
||||
x.push(i);
|
||||
y.push(Math.max(min, value));
|
||||
}
|
||||
|
||||
return y;
|
||||
};
|
||||
|
||||
export const generateFluctuatingData = ({
|
||||
total = 50,
|
||||
trendType = 'linear',
|
||||
max = 1,
|
||||
f = 1,
|
||||
phase = 0,
|
||||
min = 0
|
||||
}) => {
|
||||
/**
|
||||
* 生成一组用于折线图的数据,具有自然且美观的趋势。
|
||||
*
|
||||
* 参数:
|
||||
* total (number): 生成数据点的数量
|
||||
* trendType (string): 数据趋势类型, 可选'linear', 'sine', 'exponential'
|
||||
* max (number): 波动幅度
|
||||
* f (number): 波动频率
|
||||
* phase (number): 波动相位
|
||||
* min (number): 数据的最小值
|
||||
*
|
||||
* 返回:
|
||||
* x (number[]): x轴数据
|
||||
* y (number[]): y轴数据
|
||||
*/
|
||||
const x = Array.from({ length: total }, (_, i) => (i * 10) / (total - 1));
|
||||
|
||||
let y;
|
||||
switch (trendType) {
|
||||
case 'linear':
|
||||
y = x.map(
|
||||
(val) => val * (Math.random() * 2 - 1) * 3 + Math.random() * 8 - 4
|
||||
);
|
||||
|
||||
break;
|
||||
case 'sine':
|
||||
y = x.map(
|
||||
(val) =>
|
||||
max * Math.sin(2 * Math.PI * f * val + phase) + Math.random() * 2 - 1
|
||||
);
|
||||
break;
|
||||
case 'exponential':
|
||||
y = x.map(
|
||||
(val) => Math.exp(val * Math.random() * 0.2) + Math.random() * 4 - 2
|
||||
);
|
||||
break;
|
||||
default:
|
||||
throw new Error(
|
||||
'无效的trendType参数,请选择"linear", "sine"或"exponential".'
|
||||
);
|
||||
}
|
||||
|
||||
// 将数据调整到最小值
|
||||
const minY = Math.min(...y);
|
||||
y = y.map((val) => _.round(val - minY + min, 2));
|
||||
|
||||
return y;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user