43 lines
880 B
TypeScript
43 lines
880 B
TypeScript
import { Pie } from '@ant-design/plots';
|
|
import numeral from 'numeral';
|
|
|
|
const TooltipContent = (props: any) => {
|
|
return (
|
|
<div>
|
|
<div>{props.x}</div>
|
|
<div>{props.y}</div>
|
|
</div>
|
|
);
|
|
};
|
|
const GPUUtilization: React.FC = () => {
|
|
const data = [
|
|
{ label: 'Idle GPUs', value: 20 },
|
|
{ label: 'Allocated GPUs', value: 120 }
|
|
];
|
|
return (
|
|
<Pie
|
|
height={340}
|
|
radius={0.9}
|
|
angleField="value"
|
|
colorField="label"
|
|
data={data as any}
|
|
legend={{
|
|
color: {
|
|
position: 'bottom',
|
|
layout: {
|
|
justifyContent: 'center'
|
|
}
|
|
}
|
|
}}
|
|
label={{
|
|
position: 'outside',
|
|
text: (item: { label: number; value: number }) => {
|
|
return `${item.label}: ${numeral(item.value).format('0,0')}`;
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default GPUUtilization;
|