diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json index 034e95070..be7d108b9 100644 --- a/nezha-fronted/package-lock.json +++ b/nezha-fronted/package-lock.json @@ -22765,9 +22765,9 @@ "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, "tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" }, "tinyqueue": { "version": "2.0.3", diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json index c43a287bd..e4cd21695 100644 --- a/nezha-fronted/package.json +++ b/nezha-fronted/package.json @@ -92,6 +92,7 @@ "showdown": "^2.1.0", "spark-md5": "^3.0.2", "speed-measure-webpack-plugin": "^1.5.0", + "tinycolor2": "^1.6.0", "uplot": "^1.6.26", "uplot-vue": "^1.1.5", "v-selectpage": "^2.1.4", diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 6ad1aac4d..7856ea690 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -746,3 +746,23 @@ i.nz-icon-override{ input::placeholder{ text-transform:capitalize; } +.vue-tags-input { + .ti-tag.ti-valid { + max-width: 100%; + .ti-content { + max-width: 90%; + flex-shrink: 0; + .ti-tag-center { + max-width: 100%; + flex-shrink: 0; + > span { + max-width: 100%; + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 8488b8f05..70e505065 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -143,7 +143,7 @@ overflow: hidden; white-space: nowrap; font-size: 18px; - color: #333; + color: $--color-text-primary; font-weight: 700; } .chart-header__tools { @@ -556,6 +556,10 @@ flex-grow: 1; position: relative; border: 1px solid $--background-color-empty; + .stat-text{ + text-align: center; + line-height: 1.2; + } .sparkline{ width: 100%; height: 40%; diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss index 27e60897f..3a9419775 100644 --- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss @@ -233,7 +233,7 @@ .bottom-box__top .my-loading-box { height: calc(100% + 20px) !important; } - .my-loading-parent--relative{ + .my-loading-parent--relative:not(.panel-chart){ height: calc(100% - 20px) !important; } } diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss index 12fd5abb8..1d1a5b639 100644 --- a/nezha-fronted/src/assets/css/components/common/timePicker.scss +++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss @@ -352,3 +352,10 @@ .el-date-range-picker__content.el-date-range-picker__content__only{ width: 100%; } +.nz-time-box.nz-dropdown { + width: 64px; + .dropdown-content { + height: 32px; + line-height: 32px; + } +} 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 779d38df2..940b121bf 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 @@ -1,6 +1,6 @@ .query-prompt-box { //width: calc(100% - 10px); - height: 400px; + height: 440px; background: $--background-color-empty; box-shadow: 0px 0px 21px 4px $--dropdown-menu-box-shadow-color; border-radius: 2px; @@ -9,7 +9,7 @@ //left: 5px; transform: unset; z-index: 11; - max-height: 400px; + max-height: 440px; font-size: 14px; .explore-history-box-header { padding-left: 20px; @@ -32,6 +32,7 @@ } .query-prompt-log-content { height: 220px; + flex-shrink: 0; border: 1px solid $--border-color-light; border-radius: 2px; display: flex; diff --git a/nezha-fronted/src/components/chart/chart/chartLog.vue b/nezha-fronted/src/components/chart/chart/chartLog.vue index ff8928da7..ba39d45f3 100644 --- a/nezha-fronted/src/components/chart/chart/chartLog.vue +++ b/nezha-fronted/src/components/chart/chart/chartLog.vue @@ -240,8 +240,8 @@ export default { const descending = this.operations.descending const params = { logql: this.chartInfo.elements.map(item => item.expression), - start: this.$stringTimeParseToUnix(this.filterTime[0]), - end: this.$stringTimeParseToUnix(this.filterTime[1]), + start: this.momentStrToTimestamp(this.filterTime[0]), + end: this.momentStrToTimestamp(this.filterTime[1]), direction: descending ? 'backward' : 'forward', limit } diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index a1b6fa02e..3f061271f 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -16,43 +16,52 @@ background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]), height:item.height+'px', width:item.width + 'px', - fontSize: item.fontSize + 'px', }" >
@@ -118,7 +127,7 @@
- + @@ -133,6 +142,7 @@ import { initColor } from '@/components/chart/chart/tools' import * as echarts from 'echarts' import chartSparklineOption from './options/chartSparkline' import lodash from 'lodash' +import tinycolor from 'tinycolor2' export default { name: 'chart-stat', mixins: [chartMixin, chartFormat], @@ -291,7 +301,6 @@ export default { }) }, renderStat (layout) { - let isDouble = false const width = this.boxWidth / layout.col const height = this.boxHeight / layout.row const integer = Math.floor(this.statData.length / layout.col) @@ -305,86 +314,62 @@ export default { } else { item.width = width } - let font = '' // 获取显示的字体 let display = '' if (item.mapping) { display = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue }) } + let titleFont = '' + let valueFont = '' + let titleFontSize = '' + let valueFontSize = '' + const padding = 10 switch (this.chartInfo.param.text) { case 'all': + titleFont = item.legend if (item.mapping) { - isDouble = true - if (item.legend.length > item.showValue.length + 2) { - font = item.legend - } else { - font = display - if (item.mapping.icon) { - font += 'AA' - } + valueFont = display + if (item.mapping.icon) { + valueFont += 'AA' } } else { - isDouble = true - if (item.legend.length > item.showValue.length) { - font = item.legend - } else { - font = item.showValue - } + valueFont = item.showValue } + titleFontSize = this.calculateFontSize(titleFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4, 30) + valueFontSize = this.calculateFontSize(valueFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4) + titleFontSize = Math.min(valueFontSize * 0.7, titleFontSize) break case 'legend': + titleFont = item.legend if (item.mapping) { - isDouble = true - if (item.legend.length > item.showValue.length + 2) { - font = item.legend - } else { - font = display - if (item.mapping.icon) { - font += 'AA' - } + if (item.mapping.icon) { + titleFont += 'AA' } - } else { - font = item.legend } + valueFontSize = this.calculateFontSize(titleFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4) break - case 'none': - font = '' + titleFontSize = '' + valueFontSize = '' break case 'value': default: if (item.mapping) { - font = display + valueFont = display if (item.mapping.icon) { - font += 'AA' + valueFont += 'AA' } } else { - font = item.showValue + valueFont = item.showValue } + valueFontSize = this.calculateFontSize(valueFont, (item.width - padding * 2), (item.height - padding * 2) * 0.4) break } - const el = this.$refs['temp-dom'] - el.innerText = font - const elWidth = el.offsetWidth - const elHeight = el.offsetHeight - const dimension = Math.min(item.width, item.height * 1.3) - const fontScale = parseInt('70%', 10) / 100 - let fontSize = Math.min(dimension / 5, 100) * fontScale - let scale = item.width / elWidth - if (scale * elHeight > item.height) { - scale = item.height / elHeight - } - if (isDouble) { - if (scale * elHeight * 2.5 > item.height) { - scale = item.height / elHeight * 2.5 - } - } - item.scale = scale < 1 ? 1 : parseFloat(scale) - fontSize = fontSize > 12 ? fontSize : this.minFontSzie - item.fontSize = fontSize + item.titleFontSize = titleFontSize + item.valueFontSize = valueFontSize - if (fontSize > 36) { + if (item.valueFontSize > 36) { item.comparisonFont = 16 - } else if (fontSize > 24) { + } else if (item.valueFontSize > 24) { item.comparisonFont = 14 } else { item.comparisonFont = 12 @@ -392,28 +377,43 @@ export default { }) this.isInit = false }, + + calculateFontSize (text, width, height, maxSize, lineHeight = 1.2) { + const el = this.$refs['temp-dom'] + el.innerText = text + const elWidth = el.offsetWidth + const fontSizeBasedOnWidth = (width / (elWidth + 2)) * 14 + const fontSizeBasedOnHeight = height / lineHeight + + const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth) + return Math.min(optimalSize, maxSize || optimalSize) + }, + // 绘制图表 drawChart () { this.statData.forEach((item, index) => { const chart = this.sparkline[index] ? this.sparkline[index] : echarts.init(document.getElementById(`chart-canvas-${this.chartId}-${index}`)) const chartOption = lodash.cloneDeep(chartSparklineOption) - // sparkline 颜色和 字体颜色 保持一致 - const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light' - let color = theme === 'light' ? '#666666' : '#BEBEBE' - if (item.mapping) { - color = item.mapping.color.text + + // sparkline 颜色根据背景色计算 + const color = item.mapping ? item.mapping.color.bac : this.colorList[index] + const lineColor = tinycolor(color).brighten(40).toRgbString() + let areaColor = 'rgba(255,255,255,0.4)' + if (this.statData.length === 1 && !item.mapping) { + areaColor = tinycolor(color).setAlpha(0.2).toRgbString() } + chartOption.series = [{ ...chartOption.series[0], data: item.data, lineStyle: { - color + width: 1, + color: lineColor } }] if (this.chartInfo.param.sparklineMode === 'area') { chartOption.series[0].areaStyle = { - color: color, - opacity: 0.1 + color: areaColor } } chartOption.yAxis.max = this.maxValue diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index a6443d456..1269e103e 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/nezha-fronted/src/components/chart/chart/chartTable.vue @@ -303,6 +303,7 @@ export default { oldValue: '' } const display = this.globalVariablesReplace(column.display) + console.log(column, display, /\{\{.+\}\}/.test(display), params) if (/\{\{.+\}\}/.test(display)) { const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) { const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) @@ -312,7 +313,8 @@ export default { if (label.indexOf('$value') !== -1) { value = chartDataFormat.getUnit(column.unit ? column.unit : 2).compute(value, null, -1, 2) } - if (!((typeof value) == 'string' && value.constructor == String)) { + console.log(value) + if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) { let legend = '' if (value.__name__) { legend += `${value.__name__}{` @@ -339,7 +341,7 @@ export default { let value = null if (lodash.get(params, label)) { value = lodash.get(params, label) - if (!((typeof value) == 'string' && value.constructor == String)) { + if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) { let legend = '' if (value.__name__) { legend += `${value.__name__}{` @@ -361,6 +363,7 @@ export default { } return value || '' }) + console.log(labelValue) obj[column.title + 'display'] = { display: labelValue, oldValue: oldLabelValue @@ -394,7 +397,7 @@ export default { if (label.indexOf('$value') !== -1) { value = chartDataFormat.getUnit(col.unit ? col.unit : 2).compute(value, null, -1, 2) } - if (!((typeof value) == 'string' && value.constructor == String)) { + if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) { let legend = '' if (value.__name__) { legend += `${value.__name__}{` diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index fce3d9ced..679671164 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -271,11 +271,11 @@ export default { case 'logs': { if (this.from === fromRoute.chartTemp || this.from === fromRoute.dashboardTemp || this.from === fromRoute.integration) { setTimeout(() => { - this.chartData = [chartTempData.data.result] - this.chartData.forEach(item => { - item.forEach(children => { - children.elements = elements[0] - }) + this.chartData = [] + elements.forEach(item => { + const data = this.$lodash.cloneDeep(chartTempData.data.result) + data[0].elements = item + this.chartData.push(data) }) this.loading = false }, 100) diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index f3febe924..efbd9aefc 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -19,7 +19,7 @@ - +