feat: dashboard

2024-05-22 09:29:30 +08:00
parent a416bc7eab
commit 46a9e6a931
21 changed files with 1522 additions and 53 deletions
@@ -0,0 +1,93 @@
+import PageTools from '@/components/page-tools';
+import { Line } from '@ant-design/plots';
+import { DatePicker } from 'antd';
+import _ from 'lodash';
+
+const UtilizationOvertime: React.FC = () => {
+  const timeList = [
+    '01:00:00',
+    '02:00:00',
+    '03:00:00',
+    '04:00:00',
+    '05:00:00',
+    '06:00:00',
+    '07:00:00',
+    '08:00:00',
+    '09:00:00',
+    '10:00:00',
+    '11:00:00',
+    '12:00:00',
+    '13:00:00',
+    '14:00:00',
+    '15:00:00'
+  ];
+  const typeList = ['GPU', 'CPU', 'Memory'];
+  const generateData = () => {
+    const data = [];
+    for (let i = 0; i < timeList.length; i++) {
+      for (let j = 0; j < typeList.length; j++) {
+        data.push({
+          time: timeList[i],
+          type: typeList[j],
+          value: _.round(Math.random(), 3)
+        });
+      }
+    }
+    return data;
+  };
+  const data = generateData();
+
+  const handleSelectDate = (date: string) => {
+    console.log('dateString============', date);
+  };
+  const config = {
+    xField: 'time',
+    yField: 'value',
+    color: ['red', 'blue', 'green'],
+    colorField: 'type',
+    slider: false,
+    axis: {
+      x: {
+        textStyle: {
+          autoRoate: true
+        }
+      }
+    },
+    xAxis: {
+      autoRotate: true
+    },
+    yAxis: {
+      nice: true,
+      label: {
+        autoRotate: true
+      }
+    },
+    point: {
+      shapeField: 'circle',
+      sizeField: 2
+    },
+    legend: {
+      color: {
+        layout: { justifyContent: 'center' }
+      }
+    },
+    label: {
+      autoRotate: true
+    }
+  };
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={0}
+        left={<span>Utilization Over Time</span>}
+        right={
+          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+        }
+      />
+      <Line height={400} data={data} {...config} />
+    </>
+  );
+};
+
+export default UtilizationOvertime;