starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-09-22 08:00:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: optimize dashboard monitor chart (#12673)

Browse Source
This commit is contained in:
王贺
2026-05-07 18:25:27 +08:00
committed by GitHub
parent 79703e3c71
commit 61d42b05e9
2 changed files with 68 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v-charts/components/Line.vue
+11 -3
View File
@@ -141,6 +141,7 @@ function initChart() {
});
}
const grid = props.option.grid || { left: '7%', right: '7%', bottom: '20%' };
const option = {
title: [
{
@@ -205,9 +206,9 @@ function initChart() {
return res;
},
},
grid: props.option.grid || { left: '7%', right: '7%', bottom: '20%' },
grid,
legend: itemSelect || {
right: 10,
right: grid.right || 10,
itemWidth: 8,
textStyle: {
color: '#646A73',
@@ -228,7 +229,14 @@ function initChart() {
},
},
series: series,
dataZoom: [{ startValue: props?.option.xData[0], show: props.dataZoom }],
dataZoom: [
{
...(props.option.xData?.[0] ? { startValue: props.option.xData[0] } : {}),
left: grid.left,
right: grid.right,
show: props.dataZoom,
},
],
};
// 渲染数据
itemChart.setOption(option, true);
frontend/src/views/home/index.vue
+57 -47
View File
@@ -118,7 +118,7 @@
</template>
<template #body>
<div style="position: relative; margin-top: 60px">
<div class="monitor-tags" v-if="chartOption === 'network'">
<div class="monitor-tags" :style="monitorTagsStyle" v-if="chartOption === 'network'">
<el-tag>
{{ $t('monitor.up') }}: {{ computeSizeFromKBs(currentChartInfo.netBytesSent) }}
</el-tag>
@@ -128,7 +128,7 @@
<el-tag>{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}</el-tag>
<el-tag>{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}</el-tag>
</div>
<div class="monitor-tags" v-if="chartOption === 'io'">
<div class="monitor-tags" :style="monitorTagsStyle" v-if="chartOption === 'io'">
<el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
<el-tag>{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB</el-tag>
<el-tag>
@@ -468,6 +468,46 @@ const DASHBOARD_CACHE_TTL = {
netOptions: 60 * 60 * 1000,
ioOptions: 60 * 60 * 1000,
};
const monitorChartGrid = { left: 65, right: 65, bottom: '20%' };
const monitorTagsStyle = {
left: `${monitorChartGrid.left}px`,
right: `${monitorChartGrid.right}px`,
};
const monitorChartEmptyLength = 20;
const loadMonitorEmptyData = () => Array.from({ length: monitorChartEmptyLength }, () => null);
const loadMonitorEmptyTime = () => Array.from({ length: monitorChartEmptyLength }, () => '');
const loadMonitorChartData = (data: Array<number>) => (data.length === 0 ? loadMonitorEmptyData() : data);
const loadMonitorChartTime = (data: Array<string>) => (data.length === 0 ? loadMonitorEmptyTime() : data);
const loadIOChartOption = () => ({
xData: loadMonitorChartTime(timeIODatas.value),
yData: [
{
name: i18n.global.t('monitor.read'),
data: loadMonitorChartData(ioReadBytes.value),
},
{
name: i18n.global.t('monitor.write'),
data: loadMonitorChartData(ioWriteBytes.value),
},
],
grid: monitorChartGrid,
formatStr: 'MB',
});
const loadNetworkChartOption = () => ({
xData: loadMonitorChartTime(timeNetDatas.value),
yData: [
{
name: i18n.global.t('monitor.up'),
data: loadMonitorChartData(netBytesSents.value),
},
{
name: i18n.global.t('monitor.down'),
data: loadMonitorChartData(netBytesRecvs.value),
},
],
grid: monitorChartGrid,
formatStr: 'KB/s',
});
const statusRef = ref();
const appRef = ref();
@@ -604,16 +644,8 @@ const currentChartInfo = reactive({
const skipNextCurrentInfoDelta = ref(false);
const chartsOption = ref({
ioChart: {
xData: [],
yData: [],
formatStr: 'MB',
},
networkChart: {
xData: [],
yData: [],
formatStr: 'KB/s',
},
ioChart: loadIOChartOption(),
networkChart: loadNetworkChartOption(),
});
const updateCurrentInfo = (data: Dashboard.CurrentInfo) => {
@@ -688,14 +720,21 @@ const onLoadIOOptions = async (force?: boolean) => {
};
const onLoadBaseInfo = async (isInit: boolean, range: string) => {
let resetChartData = false;
if (range === 'all' || range === 'io') {
ioReadBytes.value = [];
ioWriteBytes.value = [];
timeIODatas.value = [];
} else if (range === 'all' || range === 'network') {
resetChartData = true;
}
if (range === 'all' || range === 'network') {
netBytesSents.value = [];
netBytesRecvs.value = [];
timeNetDatas.value = [];
resetChartData = true;
}
if (resetChartData) {
loadData();
}
const res = await loadBaseInfo(searchInfo.ioOption, searchInfo.netOption);
baseInfo.value = res.data;
@@ -920,35 +959,9 @@ const saveMemo = async () => {
const loadData = async () => {
if (chartOption.value === 'io') {
chartsOption.value['ioChart'] = {
xData: timeIODatas.value,
yData: [
{
name: i18n.global.t('monitor.read'),
data: ioReadBytes.value,
},
{
name: i18n.global.t('monitor.write'),
data: ioWriteBytes.value,
},
],
formatStr: 'MB',
};
chartsOption.value['ioChart'] = loadIOChartOption();
} else {
chartsOption.value['networkChart'] = {
xData: timeNetDatas.value,
yData: [
{
name: i18n.global.t('monitor.up'),
data: netBytesSents.value,
},
{
name: i18n.global.t('monitor.down'),
data: netBytesRecvs.value,
},
],
formatStr: 'KB/s',
};
chartsOption.value['networkChart'] = loadNetworkChartOption();
}
};
@@ -1208,12 +1221,9 @@ onBeforeUnmount(() => {
.monitor-tags {
position: absolute;
top: -10px;
left: 20px;
:deep(.el-tag) {
margin-right: 10px;
margin-bottom: 10px;
}
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.version {