diff --git a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx index af252e03..42e5acf2 100644 --- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx @@ -46,30 +46,42 @@ export const supplementaryPoints = ( extraCallback?: (point: [number, 0]) => any[] ) => { lines.forEach(({ data }) => { + // 获取未补点前线条的点的个数 let len = data.length; - for (let i = 0; i < len; i++) { - const timestamp = data[i][0] as number; - // 数组第一个点和最后一个点单独处理 + // 记录当前处理到的点的下标值 + let i = 0; + + for (; i < len; i++) { if (i === 0) { let firstPointTimestamp = data[0][0] as number; while (firstPointTimestamp - interval > timeRange[0]) { - const prePointTimestamp = firstPointTimestamp - interval; - data.unshift(extraCallback ? extraCallback([prePointTimestamp, 0]) : [prePointTimestamp, 0]); + const prevPointTimestamp = firstPointTimestamp - interval; + data.unshift(extraCallback ? extraCallback([prevPointTimestamp, 0]) : [prevPointTimestamp, 0]); + firstPointTimestamp = prevPointTimestamp; len++; i++; - firstPointTimestamp = prePointTimestamp; } } + if (i === len - 1) { - let lastPointTimestamp = data[len - 1][0] as number; + let lastPointTimestamp = data[i][0] as number; while (lastPointTimestamp + interval < timeRange[1]) { - const next = lastPointTimestamp + interval; - data.push(extraCallback ? extraCallback([next, 0]) : [next, 0]); - lastPointTimestamp = next; + const nextPointTimestamp = lastPointTimestamp + interval; + data.push(extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]); + lastPointTimestamp = nextPointTimestamp; + } + break; + } + + { + let timestamp = data[i][0] as number; + while (timestamp + interval < data[i + 1][0]) { + const nextPointTimestamp = timestamp + interval; + data.splice(i + 1, 0, extraCallback ? extraCallback([nextPointTimestamp, 0]) : [nextPointTimestamp, 0]); + timestamp = nextPointTimestamp; + len++; + i++; } - } else if (timestamp + interval < data[i + 1][0]) { - data.splice(i + 1, 0, extraCallback ? extraCallback([timestamp + interval, 0]) : [timestamp + interval, 0]); - len++; } } }); @@ -135,18 +147,37 @@ export const formatChartData = ( }; const seriesCallback = (lines: { name: string; data: [number, string | number][] }[]) => { + const len = CHART_COLOR_LIST.length; // series 配置 - return lines.map((line) => { + return lines.map((line, i) => { return { ...line, lineStyle: { width: 1.5, }, + connectNulls: false, symbol: 'emptyCircle', symbolSize: 4, smooth: 0.25, areaStyle: { - opacity: 0.02, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: CHART_COLOR_LIST[i % len] + '10', + }, + { + offset: 1, + color: 'rgba(255,255,255,0)', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, }, }; }); @@ -189,6 +220,7 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number, startValue: sliderPos[0], endValue: sliderPos[1], zoomOnMouseWheel: false, + minValueSpan: 10 * 60 * 1000, }, { start: 0, diff --git a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less index f6abbceb..402cc80f 100644 --- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less +++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less @@ -63,56 +63,63 @@ } } } - -.chart-detail-modal-container { - position: relative; - .expand-icon-box { - position: absolute; - z-index: 1000; - top: 14px; - right: 44px; - width: 24px; - height: 24px; - cursor: pointer; - font-size: 16px; - text-align: center; - border-radius: 50%; - transition: background-color 0.3s ease; - .expand-icon { - color: #adb5bc; - line-height: 24px; - } - &:hover { - background: rgba(33, 37, 41, 0.04); - .expand-icon { - color: #74788d; +.overview-chart-detail-drawer { + .dcloud-spin-nested-loading > div > .dcloud-spin.dcloud-spin-spinning { + height: 300px; + } + &.dcloud-drawer .dcloud-drawer-body { + padding: 0 20px; + } + .detail-header { + display: flex; + align-items: flex-end; + font-weight: normal; + .title { + font-family: @font-family-bold; + font-size: 18px; + color: #495057; + letter-spacing: 0; + .unit { + font-family: @font-family-bold; + font-size: 14px; + letter-spacing: 0.5px; } } + .slider-info { + margin-left: 10px; + font-size: 12px; + font-family: @font-family; + color: #303a51; + } } - .detail-title { - display: flex; - justify-content: space-between; - align-items: center; - .left { - display: flex; - align-items: flex-end; - .title { - font-family: @font-family-bold; - font-size: 18px; - color: #495057; - letter-spacing: 0; - .unit { - font-family: @font-family-bold; - font-size: 14px; - letter-spacing: 0.5px; + .chart-detail-modal-container { + position: relative; + overflow: hidden; + .expand-icon-box { + position: absolute; + z-index: 1000; + top: 14px; + right: 44px; + width: 24px; + height: 24px; + cursor: pointer; + font-size: 16px; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; + .expand-icon { + color: #adb5bc; + line-height: 24px; + } + &:hover { + background: rgba(33, 37, 41, 0.04); + .expand-icon { + color: #74788d; } } - .info { - margin-left: 10px; - } + } + .detail-table { + margin-top: 16px; } } - .detail-table { - margin-top: 16px; - } } diff --git a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx index 7369cd3d..dde2982e 100644 --- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx @@ -216,8 +216,8 @@ const DashboardDragChart = (props: PropsType): JSX.Element => { onChange={ksHeaderChange} nodeScopeModule={{ customScopeList: scopeList, - scopeName: `自定义 ${dashboardType === MetricType.Broker ? 'Broker' : 'Topic'} 范围`, - showSearch: dashboardType === MetricType.Topic, + scopeName: dashboardType === MetricType.Broker ? 'Broker' : 'Topic', + scopeLabel: `自定义 ${dashboardType === MetricType.Broker ? 'Broker' : 'Topic'} 范围`, }} indicatorSelectModule={{ hide: false, diff --git a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx index 9b30485b..2f07d243 100644 --- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx @@ -26,8 +26,8 @@ const OptionsDefault = [ const NodeScope = ({ nodeScopeModule, change }: propsType) => { const { customScopeList: customList, - scopeName = '自定义节点范围', - showSearch = false, + scopeName = '', + scopeLabel = '自定义范围', searchPlaceholder = '输入内容进行搜索', } = nodeScopeModule; const [topNum, setTopNum] = useState(5); @@ -70,7 +70,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { change(checkedListTemp, false); setIsTop(false); setTopNum(null); - setInputValue(`已选${checkedListTemp?.length}项`); + setInputValue(`${checkedListTemp?.length}项`); setPopVisible(false); } }; @@ -109,7 +109,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { {/* 时间： */}
-
选择top范围
+
选择 top 范围
{
-
{scopeName}
+
{scopeLabel}
@@ -136,9 +136,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { - } + suffix={} size="small" placeholder={searchPlaceholder} onChange={(e) => setScopeSearchValue(e.target.value)} @@ -148,7 +146,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { {customList - .filter((item) => !showSearch || item.label.includes(scopeSearchValue)) + .filter((item) => item.label.includes(scopeSearchValue)) .map((item) => ( {item.label} @@ -180,6 +178,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { return ( <>
+
{scopeName}筛选：
void; } @@ -138,9 +138,13 @@ const SingleChartHeader = ({ }; const reloadRangeTime = () => { - const timeLen = rangeTime[1] - rangeTime[0] || 0; - const curTimeStamp = moment().valueOf(); - setRangeTime([curTimeStamp - timeLen, curTimeStamp]); + if (isRelativeRangeTime) { + const timeLen = rangeTime[1] - rangeTime[0] || 0; + const curTimeStamp = moment().valueOf(); + setRangeTime([curTimeStamp - timeLen, curTimeStamp]); + } else { + setRangeTime([...rangeTime]); + } }; const openIndicatorDrawer = () => { @@ -174,12 +178,10 @@ const SingleChartHeader = ({ {!hideGridSelect && (