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/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() }) }) }, 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 @@ > - - - diff --git a/nezha-fronted/src/components/chart/logContext.vue b/nezha-fronted/src/components/chart/logContext.vue index c3c569d8f..55381f85b 100644 --- a/nezha-fronted/src/components/chart/logContext.vue +++ b/nezha-fronted/src/components/chart/logContext.vue @@ -92,6 +92,8 @@