diff --git a/src/components/card-wrapper/index.less b/src/components/card-wrapper/index.less index 28e021ae..a5e2de39 100644 --- a/src/components/card-wrapper/index.less +++ b/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; } diff --git a/src/components/card-wrapper/index.tsx b/src/components/card-wrapper/index.tsx index ba65db47..90c076b3 100644 --- a/src/components/card-wrapper/index.tsx +++ b/src/components/card-wrapper/index.tsx @@ -1,8 +1,12 @@ import styles from './index.less'; const CardWrapper = (props: any) => { - const { children } = props; - return
{children}
; + const { children, style } = props; + return ( +
+ {children} +
+ ); }; export default CardWrapper; diff --git a/src/components/charts/line-chart.tsx b/src/components/charts/line-chart.tsx index 5c7c45b2..a61def13 100644 --- a/src/components/charts/line-chart.tsx +++ b/src/components/charts/line-chart.tsx @@ -16,7 +16,7 @@ const LineChart: React.FC = (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 = (props) => { // sizeField: 2 // }, style: { - lineWidth: 1.5 + lineWidth: 1.5, + opacity: 0.8 }, legend: { color: { diff --git a/src/components/charts/liquid.tsx b/src/components/charts/liquid.tsx new file mode 100644 index 00000000..aaf05915 --- /dev/null +++ b/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 = (props) => { + const { + percent, + color, + title, + width, + height, + thresholds = [], + rangColor = [] + } = props; + + const primaryColor = 'rgba(84, 204, 152,0.8)'; + const [fillColor, setFillColor] = useState(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 ; +}; + +export default LiquidChart; diff --git a/src/components/seal-table/styles/index.less b/src/components/seal-table/styles/index.less index 642814eb..c6c05b5f 100644 --- a/src/components/seal-table/styles/index.less +++ b/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; diff --git a/src/global.less b/src/global.less index 6e60286a..3287b62f 100644 --- a/src/global.less +++ b/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%; diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 91062cd7..d34b7923 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -132,7 +132,7 @@ const projectData = [ const ActiveTable = () => { return ( - + { /> - - - Active Projects - - } - right={false} - /> -
- - - ); }; diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx index 39fc7ade..c7c11dba 100644 --- a/src/pages/dashboard/components/resource-utilization.tsx +++ b/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 ( <> - + ); }; diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx index f17164d8..c875ca0b 100644 --- a/src/pages/dashboard/components/system-load.tsx +++ b/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)', - 'rgba(255, 214, 102,.8)', - 'rgba(255, 120, 117,.8)' + 'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%, rgba(84, 204, 152,.8) 100%)', + 'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%, rgba(255, 214, 102,.8) 100%)', + '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 (
@@ -28,56 +30,48 @@ const SystemLoad = () => { } /> - - - - -
- - + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/pages/dashboard/components/usage.tsx b/src/pages/dashboard/components/usage.tsx index cf9ee33a..85ae9f92 100644 --- a/src/pages/dashboard/components/usage.tsx +++ b/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={Usage} right={ - + } /> - + @@ -125,44 +125,18 @@ const Usage = () => { - + - - - - - - - - + - {/* - - - - - - - */} ); }; diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx index 07c56d15..12daf45d 100644 --- a/src/pages/playground/index.tsx +++ b/src/pages/playground/index.tsx @@ -27,24 +27,26 @@ const Playground: React.FC = () => { }; return ( - -
-
- -
-
- -
+
+ +
+
+ +
+
+ +
-
- +
+ +
-
- + +
); }; diff --git a/src/utils/index.ts b/src/utils/index.ts index e805792e..55b69441 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,4 @@ +import _ from 'lodash'; export const isNotEmptyValue = (value: any) => { if (Array.isArray(value)) { return value.length > 0;