style: ui colors

src/components/card-wrapper/index.less

@@ -2,4 +2,5 @@
   border-radius: var(--border-radius-middle);
   background-color: var(--color-white-1);
   box-shadow: var(--box-shadow-base);
+  padding: 10px;
 }

src/components/card-wrapper/index.tsx

@@ -1,8 +1,12 @@
 import styles from './index.less';
 
 const CardWrapper = (props: any) => {
-  const { children } = props;
+  const { children, style } = props;
-  return <div className={styles.cardWrapper}>{children}</div>;
+  return (
+    <div className={styles.cardWrapper} style={{ ...style }}>
+      {children}
+    </div>
+  );
 };
 
 export default CardWrapper;

src/components/charts/line-chart.tsx

@@ -16,7 +16,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
     height,
     xField: xField || 'time',
     yField: yField || 'value',
-    color: color || ['red', 'blue', 'green', 'yellow'],
+    // color: color || ['red', 'blue', 'green', 'yellow'],
     colorField: 'type',
     autoFit: true,
     slider,
@@ -36,7 +36,8 @@ const LineChart: React.FC<LineChartProps> = (props) => {
     //   sizeField: 2
     // },
     style: {
-      lineWidth: 1.5
+      lineWidth: 1.5,
+      opacity: 0.8
     },
     legend: {
       color: {

src/components/charts/liquid.tsx

@@ -0,0 +1,79 @@
+import { Liquid } from '@ant-design/plots';
+import { useEffect, useState } from 'react';
+
+interface LiquidChartProps {
+  percent: number;
+  color?: string;
+  title?: string;
+  height?: number;
+  width?: number;
+  thresholds?: number[];
+  rangColor?: string[];
+}
+const LiquidChart: React.FC<LiquidChartProps> = (props) => {
+  const {
+    percent,
+    color,
+    title,
+    width,
+    height,
+    thresholds = [],
+    rangColor = []
+  } = props;
+
+  const primaryColor = 'rgba(84, 204, 152,0.8)';
+  const [fillColor, setFillColor] = useState<string>(primaryColor);
+
+  const calcColorByPercent = () => {
+    if (color) {
+      return color;
+    }
+    if (!rangColor.length) {
+      return primaryColor;
+    }
+
+    if (rangColor.length && thresholds.length) {
+      let index = 0;
+      for (let i = 0; i < thresholds.length; i++) {
+        if (percent <= thresholds[i]) {
+          index = i;
+          break;
+        }
+      }
+      return rangColor[index];
+    }
+    return primaryColor;
+  };
+
+  useEffect(() => {
+    const fc = calcColorByPercent();
+    setFillColor(fc);
+  }, [percent]);
+
+  const config = {
+    percent,
+    textAlign: 'center',
+    autoFit: true,
+    title: {
+      title,
+      size: 0,
+      style: {
+        align: 'center',
+        titleFontSize: 12,
+        titleFill: 'rgba(0,0,0,0.88)',
+        titleFontWeight: 500
+      }
+    },
+
+    style: {
+      textAlign: 'center',
+      outlineBorder: 2,
+      waveLength: 128,
+      stroke: fillColor,
+      fill: fillColor
+    }
+  };
+  return <Liquid {...config} />;
+};
+
+export default LiquidChart;

src/components/seal-table/styles/index.less

@@ -2,57 +2,69 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+
   .header-row-wrapper {
     height: 40px;
     margin-bottom: 10px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
     .header-row-prefix-wrapper {
       padding-left: var(--ant-table-cell-padding-inline);
     }
+
     .row {
       flex: 1;
     }
   }
+
   .row-box {
     margin-bottom: 20px;
     border-radius: var(--ant-table-header-border-radius);
     overflow: hidden;
   }
+
   .expanded-row {
     background-color: var(--color-white-1);
-    padding: 16px 16px;
+    padding: 16px;
     border: 1px solid var(--color-fill-1);
     border-top: 0;
     border-radius: 0 0 var(--ant-table-header-border-radius)
       var(--ant-table-header-border-radius);
   }
+
   .row-wrapper {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--color-fill-1);
+    background-color: var(--color-white-1);
     transition: all 0.2s ease;
+
     &:hover {
       background-color: var(--ant-table-row-hover-bg);
       transition: all 0.2s ease;
     }
+
     &-selected {
       background-color: var(--ant-table-row-selected-bg);
       transition: all 0.2s ease;
+
       &:hover {
         background-color: var(--ant-table-row-selected-hover-bg);
         transition: all 0.2s ease;
       }
     }
+
     .row-prefix-wrapper {
       padding-left: var(--ant-table-cell-padding-inline);
     }
   }
+
   .seal-table-row {
     flex: 1;
   }
+
   .spin {
     text-align: center;
     display: flex;

src/global.less

@@ -4,7 +4,7 @@
 html {
   --ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
   --color-fill-1: var(--ant-color-fill-tertiary);
-  // --color-fill-1: #f3f6fa;
+  // --color-fill-1: #fff;
   --color-fill-2: #fff;
   --color-fill-3: #f3f6fa;
   --menu-border-radius-base: 20px;
@@ -28,7 +28,7 @@ html {
   --ant-table-header-split-color: #f0f0f0;
   --ant-table-row-selected-bg: #f0fff6;
   --ant-table-row-selected-hover-bg: #d8f2e4;
-  --ant-table-row-hover-bg: #e6e6e6;
+  --ant-table-row-hover-bg: rgba(230, 230, 230, 70%);
   --color-chart-red: #ff7875;
   --color-chart-green: #54cc98;
   --color-chart-glod: #ffd666;
@@ -51,7 +51,7 @@ html {
     &.ant-menu-css-var {
       --ant-menu-item-height: 46px;
       --ant-menu-item-selected-bg: var(--color-white-1);
-      --ant-menu-item-border-radius: 20px;
+      --ant-menu-item-border-radius: 16px;
       --ant-menu-item-selected-color: var(--ant-color-primary);
       --ant-menu-item-hover-bg: var(--color-white-1);
       --ant-menu-item-color: var(--color-text-1);
@@ -164,7 +164,7 @@ body {
     }
 
     tr > td {
-      background-color: var(--color-fill-1);
+      // background-color: var(--color-fill-1);
       border-bottom: none;
       height: 70px;
 
@@ -357,7 +357,7 @@ body {
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 4%) 25%,
-    rgba(0, 0, 0, 10%) 37%,
+    rgba(0, 0, 0, 8%) 37%,
     rgba(255, 255, 255, 4%) 63%
   );
   background-size: 400% 100%;

src/pages/dashboard/components/active-table.tsx

@@ -132,7 +132,7 @@ const projectData = [
 const ActiveTable = () => {
   return (
     <Row gutter={[20, 0]}>
-      <Col xs={24} sm={24} md={24} lg={12} xl={12}>
+      <Col xs={24} sm={24} md={24} lg={24} xl={24}>
         <PageTools
           style={{ margin: '32px 8px' }}
           left={
@@ -153,27 +153,6 @@ const ActiveTable = () => {
           />
         </div>
       </Col>
-      <Col xs={24} sm={24} md={24} lg={12} xl={12}>
-        <PageTools
-          style={{ margin: '32px 8px' }}
-          left={
-            <span
-              style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
-            >
-              Active Projects
-            </span>
-          }
-          right={false}
-        />
-        <div>
-          <Table
-            columns={projectColumns}
-            dataSource={projectData}
-            pagination={false}
-            rowKey="id"
-          />
-        </div>
-      </Col>
     </Row>
   );
 };

src/pages/dashboard/components/resource-utilization.tsx

@@ -52,7 +52,6 @@ const UtilizationOvertime: React.FC = () => {
         data.push({
           time: timeList[i],
           type: typeList[j],
-          color: 'red',
           value: _.get(mockData, typeList[j])[i]
         });
       }
@@ -63,7 +62,7 @@ const UtilizationOvertime: React.FC = () => {
 
   return (
     <>
-      <LineChart height={400} data={data} />
+      <LineChart data={data} />
     </>
   );
 };

src/pages/dashboard/components/system-load.tsx

@@ -1,18 +1,20 @@
 import CardWrapper from '@/components/card-wrapper';
-import GaugeChart from '@/components/charts/gauge';
+import LiquidChart from '@/components/charts/liquid';
 import PageTools from '@/components/page-tools';
 import { Col, DatePicker, Row } from 'antd';
 import ResourceUtilization from './resource-utilization';
 
 const SystemLoad = () => {
   const colors = [
-    'rgba(84, 204, 152,.8)',
+    'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%,  rgba(84, 204, 152,.8) 100%)',
-    'rgba(255, 214, 102,.8)',
+    'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%,  rgba(255, 214, 102,.8) 100%)',
-    'rgba(255, 120, 117,.8)'
+    'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%,  rgba(255, 120, 117,.8) 100%)'
   ];
-  const handleSelectDate = (date: string) => {
+
-    console.log('dateString============', date);
+  const thresholds = [0.5, 0.7, 1];
-  };
+  const height = 400;
+
+  const handleSelectDate = (date: string) => {};
 
   return (
     <div>
@@ -28,56 +30,48 @@ const SystemLoad = () => {
             <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
           }
         />
-        <CardWrapper>
+        <Row style={{ width: '100%' }} gutter={[0, 20]}>
-          <ResourceUtilization />
+          <Col span={16} style={{ paddingRight: '20px' }}>
-        </CardWrapper>
+            <CardWrapper style={{ height: height }}>
-        <Row style={{ width: '100%', marginTop: '40px' }} gutter={[20, 20]}>
+              <ResourceUtilization />
-          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-            <CardWrapper>
-              <GaugeChart
-                title="GPU Compute Utilization"
-                total={100}
-                target={20}
-                // height={320}
-                thresholds={[50, 70, 100]}
-                rangColor={colors}
-              ></GaugeChart>
             </CardWrapper>
           </Col>
-          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+          <Col span={8}>
-            <CardWrapper>
+            <CardWrapper style={{ height: '400px' }}>
-              <GaugeChart
+              <Row style={{ height: height }}>
-                title="GPU Memory Utilization"
+                <Col span={12} style={{ height: height / 2 - 10 }}>
-                total={100}
+                  <LiquidChart
-                target={30}
+                    title="GPU Compute Utilization"
-                // height={320}
+                    percent={0.2}
-                thresholds={[50, 70, 100]}
+                    thresholds={thresholds}
-                rangColor={colors}
+                    rangColor={colors}
-              ></GaugeChart>
+                  ></LiquidChart>
-            </CardWrapper>
+                </Col>
-          </Col>
+                <Col span={12} style={{ height: height / 2 - 10 }}>
-          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                  <LiquidChart
-            <CardWrapper>
+                    title="GPU Memory Utilization"
-              <GaugeChart
+                    percent={0.3}
-                title="CPU Compute Utilization"
+                    thresholds={thresholds}
-                total={100}
+                    rangColor={colors}
-                target={40}
+                  ></LiquidChart>
-                // height={320}
+                </Col>
-                thresholds={[50, 70, 100]}
+                <Col span={12} style={{ height: height / 2 - 10 }}>
-                rangColor={colors}
+                  <LiquidChart
-              ></GaugeChart>
+                    title="CPU Compute Utilization"
-            </CardWrapper>
+                    percent={0.8}
-          </Col>
+                    thresholds={thresholds}
-          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    rangColor={colors}
-            <CardWrapper>
+                  ></LiquidChart>
-              <GaugeChart
+                </Col>
-                title="CPU Memory Utilization"
+                <Col span={12} style={{ height: height / 2 - 10 }}>
-                total={100}
+                  <LiquidChart
-                target={70}
+                    title="CPU Memory Utilization"
-                // height={320}
+                    percent={0.7}
-                thresholds={[50, 70, 100]}
+                    thresholds={thresholds}
-                rangColor={colors}
+                    rangColor={colors}
-              ></GaugeChart>
+                  ></LiquidChart>
+                </Col>
+              </Row>
             </CardWrapper>
           </Col>
         </Row>

src/pages/dashboard/components/usage.tsx

@@ -4,7 +4,7 @@ import HBar from '@/components/charts/h-bar';
 import PageTools from '@/components/page-tools';
 import { generateRandomArray } from '@/utils';
 import { Col, DatePicker, Row } from 'antd';
-
+const { RangePicker } = DatePicker;
 const times = [
   'june 1',
   'june 2',
@@ -97,11 +97,11 @@ const Usage = () => {
         style={{ margin: '32px 8px' }}
         left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
         right={
-          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+          <RangePicker onChange={handleSelectDate} style={{ width: 300 }} />
         }
       />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
-        <Col span={14} style={{ paddingRight: '20px' }}>
+        <Col span={16} style={{ paddingRight: '20px' }}>
           <CardWrapper>
             <Row>
               <Col span={12}>
@@ -125,44 +125,18 @@ const Usage = () => {
             </Row>
           </CardWrapper>
         </Col>
-        <Col span={10}>
+        <Col span={8}>
           <CardWrapper>
-            <Row>
+            <HBar
-              <Col span={12}>
+              title="Top Users"
-                <HBar
+              data={userDataList}
-                  title="Top Users"
+              xField="time"
-                  data={userDataList}
+              yField="value"
-                  xField="time"
+              height={360}
-                  yField="value"
+            ></HBar>
-                  height={360}
-                ></HBar>
-              </Col>
-              <Col span={12}>
-                <HBar
-                  title="Top Projects"
-                  data={projectDataList}
-                  xField="time"
-                  yField="value"
-                  height={360}
-                ></HBar>
-              </Col>
-            </Row>
           </CardWrapper>
         </Col>
       </Row>
-      {/* <Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
-        <Col span={12} style={{ paddingRight: '20px' }}>
-          <CardWrapper></CardWrapper>
-        </Col>
-        <Col span={12}>
-          <CardWrapper
-            style={{
-              background: bgColor,
-              borderRadius: 'var(--border-radius-base)'
-            }}
-          ></CardWrapper>
-        </Col>
-      </Row> */}
     </>
   );
 };

src/pages/playground/index.tsx

@@ -27,24 +27,26 @@ const Playground: React.FC = () => {
   };
 
   return (
-    <CardWrapper>
+    <div style={{ padding: '32px 40px' }}>
-      <div className="play-ground">
+      <CardWrapper>
-        <div className="chat">
+        <div className="play-ground">
-          <GroundLeft parameters={params}></GroundLeft>
+          <div className="chat">
-        </div>
+            <GroundLeft parameters={params}></GroundLeft>
-        <div className="divider-line">
+          </div>
-          <Divider type="vertical" />
+          <div className="divider-line">
-        </div>
+            <Divider type="vertical" />
+          </div>
 
-        <div className="params">
+          <div className="params">
-          <ParamsSettings
+            <ParamsSettings
-            onClose={handleClosePopover}
+              onClose={handleClosePopover}
-            setParams={setParams}
+              setParams={setParams}
-            selectedModel={selectModel}
+              selectedModel={selectModel}
-          />
+            />
+          </div>
         </div>
-      </div>
+      </CardWrapper>
-    </CardWrapper>
+    </div>
   );
 };
 

src/utils/index.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 export const isNotEmptyValue = (value: any) => {
   if (Array.isArray(value)) {
     return value.length > 0;