From 566efc51b8fac2e86d9110428883987699c6f93c Mon Sep 17 00:00:00 2001 From: zyh Date: Tue, 7 Nov 2023 11:39:35 +0800 Subject: [PATCH 1/5] =?UTF-8?q?perf=EF=BC=9Agauge=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=8E=92=E5=88=97=E7=AE=97=E6=B3=95=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/chart/chartGauge.vue | 99 +++++++++---------- 1 file changed, 48 insertions(+), 51 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 494e05cb7..cf8eee8ef 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -78,10 +78,8 @@ export default { } this.timer = setTimeout(() => { this.initGaugeData(this.chartInfo, this.chartData).then(() => { - this.getLayout().then(layout => { - this.renderGauge(layout).then(() => { - this.gaugeChartInit() - }) + this.renderGauge().then(() => { + this.gaugeChartInit() }) }) }, 200) @@ -130,52 +128,53 @@ export default { resolve() }) }, - getLayout () { - this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 2 * this.boxPadding - this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 2 * this.boxPadding - return new Promise(resolve => { - let rateMax = 0 - let col = 0 - let row = 0 - for (let i = 1; i <= this.gaugeData.length; i++) { - const cols = Math.ceil(this.gaugeData.length / i) - const w = this.boxWidth / i - const h = this.boxHeight / cols - const rate = w > h ? h / w : w / h - if (rate > rateMax) { - rateMax = rate - col = cols - row = i - } - } - if (this.gaugeData.length) { - while (col * row >= this.gaugeData.length) { // 避免出现空白 - row-- - } - } - row++ - if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看 - const temp = col - col = row - row = temp - } - resolve({ col, row }) - }) + calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) { + const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren) + const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren) + const square = Math.max(vertical, horizontal) + let xCount = Math.floor(parentWidth / square) + const yCount = Math.ceil(numberOfChildren / xCount) + + // after yCount update xCount to make split between rows more even + xCount = Math.ceil(numberOfChildren / yCount) + + const itemsOnLastRow = xCount - (xCount * yCount - numberOfChildren) + const widthOnLastRow = parentWidth / itemsOnLastRow + + return { + width: parentWidth / xCount, + height: parentHeight / yCount, + widthOnLastRow, + xCount, + yCount + } }, - renderGauge (layout) { + calculateSizeOfChild (parentWidth, parentHeight, numberOfChildren) { + const parts = Math.ceil(Math.sqrt((numberOfChildren * parentWidth) / parentHeight)) + if (Math.floor((parts * parentHeight) / parentWidth) * parts < numberOfChildren) { + return parentHeight / Math.ceil((parts * parentHeight) / parentWidth) + } + return parentWidth / parts + }, + renderGauge () { return new Promise(resolve => { - const width = this.boxWidth / layout.col - const height = this.boxHeight / layout.row - const integer = Math.floor(this.gaugeData.length / layout.col) - const remainder = this.gaugeData.length % layout.col - const specialIndex = integer * layout.col - const specialWidth = this.boxWidth / remainder + try { + this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 3 * this.boxPadding + this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 3 * this.boxPadding + } catch (error) {} + + const grid = this.calculateGridDimensions(this.boxWidth, this.boxHeight, this.gaugeData.length) + let xGrid = 0 + let yGrid = 0 + this.gaugeData.forEach((item, index) => { - item.height = height - if (remainder && index >= specialIndex) { - item.width = specialWidth - } else { - item.width = width + const isLastRow = yGrid === grid.yCount - 1 + item.width = isLastRow ? grid.widthOnLastRow : grid.width + item.height = grid.height + xGrid++ + if (xGrid === grid.xCount) { + xGrid = 0 + yGrid++ } }) resolve() @@ -255,10 +254,8 @@ export default { }, resize () { setTimeout(() => { - this.getLayout().then(layout => { - this.renderGauge(layout).then(() => { - this.gaugeChartResize() - }) + this.renderGauge().then(() => { + this.gaugeChartResize() }) }) }, From 78e3e9e06673a898ffb4926c121f1e63aa94d370 Mon Sep 17 00:00:00 2001 From: zyh Date: Thu, 9 Nov 2023 10:23:50 +0800 Subject: [PATCH 2/5] =?UTF-8?q?NEZ-3320=20fix=EF=BC=9Adashboard=20log?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=8F=96=E6=B6=88=E6=98=BE=E7=A4=BAlegend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart/chartLog.vue | 7 ------- 1 file changed, 7 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/chartLog.vue b/nezha-fronted/src/components/chart/chart/chartLog.vue index df468f22d..9e5cc86db 100644 --- a/nezha-fronted/src/components/chart/chart/chartLog.vue +++ b/nezha-fronted/src/components/chart/chart/chartLog.vue @@ -57,13 +57,6 @@ > - - - From 5c73670856c42bb694c5f496c40ff5eef89b6da9 Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 10 Nov 2023 15:30:15 +0800 Subject: [PATCH 3/5] =?UTF-8?q?NEZ-3324=20fix=EF=BC=9AExplore=20Logs=20?= =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E6=96=87=E6=9F=A5=E8=AF=A2=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=B2=BE=E5=BA=A6=E6=94=B9=E4=B8=BA=E7=BA=B3?= =?UTF-8?q?=E7=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/package-lock.json | 9 +++++++-- nezha-fronted/package.json | 1 + .../page/dashboard/explore/queryPrompt.scss | 2 +- .../src/components/chart/logContext.vue | 18 +++++++++++++----- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json index be7d108b9..7e16b4037 100644 --- a/nezha-fronted/package-lock.json +++ b/nezha-fronted/package-lock.json @@ -7531,6 +7531,11 @@ "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" }, + "bignumber.js": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz", + "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==" + }, "binary-extensions": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", @@ -17727,7 +17732,7 @@ }, "node-sass": { "version": "4.14.1", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz", + "resolved": "https://registry.npmmirror.com/node-sass/-/node-sass-4.14.1.tgz", "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==", "dev": true, "requires": { @@ -24359,7 +24364,7 @@ }, "webpack-bundle-analyzer": { "version": "2.13.1", - "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz", + "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz", "integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==", "dev": true, "requires": { diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json index e4cd21695..75c0ed203 100644 --- a/nezha-fronted/package.json +++ b/nezha-fronted/package.json @@ -56,6 +56,7 @@ "axios": "^0.19.0", "babel-loader": "^8.3.0", "babel-preset-mobx": "^2.0.0", + "bignumber.js": "^9.1.2", "browserslist": "^4.21.4", "caniuse-lite": "^1.0.30001412", "css-minimizer-webpack-plugin": "^1.0.0", diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss index 940b121bf..72a507781 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss @@ -49,7 +49,7 @@ .log-content-left-label, .log-content-right-value{ height: 32px; line-height: 32px; - text-transform: capitalize; + // text-transform: capitalize; box-sizing: border-box; padding: 0 8px 0 20px; display: flex; diff --git a/nezha-fronted/src/components/chart/logContext.vue b/nezha-fronted/src/components/chart/logContext.vue index c3c569d8f..3bf210e87 100644 --- a/nezha-fronted/src/components/chart/logContext.vue +++ b/nezha-fronted/src/components/chart/logContext.vue @@ -92,6 +92,8 @@