gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev-3.9' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.10-uPlot

Browse Source
This commit is contained in:
zhangyu
2023-11-06 17:40:48 +08:00
parent 0b39d9b124 b57118952d
commit 666dcf5886
6 changed files with 132 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -13,7 +13,7 @@
'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')
}"
:style="{
background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
background:item.backgroundColor,
height:item.height+'px',
width:item.width + 'px',
}"
@@ -21,9 +21,9 @@
<div style="maxWidth:100%;z-index: 10;">
<!-- all -->
<template v-if="chartInfo.param.text==='all'">
<div v-if="item.mapping" :style="{color:item.mapping.color.text}">
<div v-if="item.mapping">
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
@@ -32,13 +32,13 @@
</div>
<div v-else>
<p class="stat-text" :style="{fontSize: item.titleFontSize + 'px'}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.showValue}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.showValue}}</p>
</div>
</template>
<!-- legend -->
<template v-if="chartInfo.param.text==='legend'">
<div v-if="item.mapping" :style="{color:item.mapping.color.text}">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
<div v-if="item.mapping">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
@@ -46,21 +46,21 @@
</p>
</div>
<div v-else>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.legend}}</p>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.legend}}</p>
</div>
</template>
<!-- value -->
<template v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
<div v-if="item.mapping" :style="{color:item.mapping.color.text}">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
</p>
</div>
<div v-else style="white-space: nowrap;">
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px'}">{{item.showValue}}</p>
<div v-else>
<p class="stat-text" :style="{fontSize: item.valueFontSize + 'px',color:item.textColor}">{{item.showValue}}</p>
</div>
</template>
<!-- none -->
@@ -170,14 +170,12 @@ export default {
if (this.isNoData) {
return
}
this.getLayout().then(layout => {
this.renderStat(layout)
if (this.chartInfo.param.sparklineMode && this.chartInfo.param.sparklineMode !== 'none') {
this.$nextTick(() => {
this.drawChart()
})
}
})
this.renderStat()
if (this.chartInfo.param.sparklineMode && this.chartInfo.param.sparklineMode !== 'none') {
this.$nextTick(() => {
this.drawChart()
})
}
})
},
initStatData (chartInfo, originalDatas) {
@@ -266,54 +264,54 @@ export default {
resolve()
})
},
getLayout () {
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
}
},
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
},
renderStat () {
try {
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding
} catch (error) {}
return new Promise(resolve => {
let rateMax = 0
let col = 0
let row = 0
for (let i = 1; i <= this.statData.length; i++) {
const cols = Math.ceil(this.statData.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.statData.length) {
while (col * row >= this.statData.length) { // 避免出现空白
row--
}
}
row++
if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置
const temp = col
col = row
row = temp
}
resolve({ col, row })
})
},
renderStat (layout) {
const width = this.boxWidth / layout.col
const height = this.boxHeight / layout.row
const integer = Math.floor(this.statData.length / layout.col)
const remainder = this.statData.length % layout.col
const specialIndex = integer * layout.col
const specialWidth = this.boxWidth / remainder
const grid = this.calculateGridDimensions(this.boxWidth, this.boxHeight, this.statData.length)
let xGrid = 0
let yGrid = 0
this.statData.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++
}
let display = ''
if (item.mapping) {
display = this.handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })
@@ -367,6 +365,9 @@ export default {
item.titleFontSize = titleFontSize
item.valueFontSize = valueFontSize
// 设置图表颜色和字体颜色
this.setColor(item, index)
if (item.valueFontSize > 36) {
item.comparisonFont = 16
} else if (item.valueFontSize > 24) {
@@ -377,12 +378,24 @@ export default {
})
this.isInit = false
},
setColor (data, index) {
const colorMode = lodash.get(this.chartInfo, 'param.colorMode', 'value')
if (colorMode == 'value') {
data.textColor = this.colorList[index]
} else if (colorMode === 'background') {
data.backgroundColor = this.colorList[index]
}
if (data.mapping) {
data.textColor = data.mapping.color.text
data.backgroundColor = data.mapping.color.bac
}
},
// 计算字体大小
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 fontSizeBasedOnWidth = (width / elWidth) * 14
const fontSizeBasedOnHeight = height / lineHeight
const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth)
@@ -399,7 +412,7 @@ export default {
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) {
if (!item.backgroundColor) {
areaColor = tinycolor(color).setAlpha(0.2).toRgbString()
}
@@ -427,14 +440,11 @@ export default {
this.statTimer = null
}
this.statTimer = setTimeout(() => {
this.getLayout().then(layout => {
this.renderStat(layout)
this.$nextTick(() => {
for (const key in this.sparkline) {
this.sparkline[key].resize()
}
})
this.renderStat()
this.$nextTick(() => {
for (const key in this.sparkline) {
this.sparkline[key].resize()
}
})
}, 100)
},
@@ -513,7 +523,7 @@ export default {
minHeight = 24
break
}
return this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none' && item.height > minHeight && item.width > minWidth
return (this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none') && (item.height > minHeight && item.width > minWidth)
},
toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度

9
nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
View File

@@ -189,6 +189,7 @@ export default {
if (!this.obj.id) { // 新增
this.$post('visual/notebook', params).then(response => {
if (response.code === 200) {
bus.$emit('notebookSave', { id: response.data.id, ...params })
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$emit('getTableData')
this.$store.commit('setNotebookEdit', false)
@@ -200,6 +201,7 @@ export default {
params.id = this.obj.id
this.$put('visual/notebook', params).then(response => {
if (response.code === 200) {
bus.$emit('notebookSave', params)
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$emit('getTableData')
this.$store.commit('setNotebookEdit', false)
@@ -357,8 +359,7 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
option: undefined
}
}
break
case 'stat':
@@ -391,6 +392,7 @@ export default {
},
sparklineMode: 'line',
comparison: 'none',
colorMode: 'value',
dataLink: []
}
break
@@ -515,6 +517,9 @@ export default {
this.snapshotVisible = true
},
downloadJson () {
if (!this.obj.id) {
return this.$message.error(this.$t('NOTEBOOK_ID_ISNULL'))
}
const params = {
format: 3,
ids: this.obj.id

21
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -414,9 +414,6 @@
></el-option>
</el-select>
</el-form-item>
</div>
<div class="form-items--half-width-group">
<!-- comparison -->
<el-form-item :label="$t('dashboard.chartForm.comparison')" class="form-item--half-width" v-if="isStat(chartConfig.type)">
<el-select
@@ -434,6 +431,19 @@
></el-option>
</el-select>
</el-form-item>
<!-- colorMode -->
<el-form-item :label="$t('dashboard.chartForm.colorMode')" class="form-item--half-width" v-if="isStat(chartConfig.type)">
<el-select
v-model="chartConfig.param.colorMode"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option :label="$t('overall.value')" value="value"></el-option>
<el-option :label="$t('project.topology.bac')" value="background"></el-option>
</el-select>
</el-form-item>
</div>
<!-- Right Y Axis -->
@@ -1470,10 +1480,6 @@ export default {
case 'bubble':
case 'rank':
case 'funnel':
if (type === 'stat') {
if (!this.chartConfig.param.sparklineMode) { this.chartConfig.param.sparklineMode = 'line' }
if (!this.chartConfig.param.comparison) { this.chartConfig.param.comparison = 'none' }
}
if (this.oldType === 'stat' || this.oldType === 'gauge' || this.oldType === 'sankey' || this.oldType === 'hexagon' || this.oldType === 'bubble' || this.oldType === 'rank' || this.oldType === 'funnel') {
break
}
@@ -1500,6 +1506,7 @@ export default {
},
sparklineMode: 'line',
comparison: 'none',
colorMode: 'value',
dataLink: this.chartConfig.param.dataLink
}
break

5
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -258,6 +258,7 @@ export default {
if (!this.isStat(params.type)) {
delete params.param.sparklineMode
delete params.param.comparison
delete params.param.colorMode
}
if (!params.x && !params.y && this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
params.x = 0
@@ -527,6 +528,7 @@ export default {
varValue: '',
result: 'show'
},
colorMode: 'value',
dataLink: []
}
}
@@ -727,8 +729,9 @@ export default {
}
}
if (obj.type === 'stat') {
if (!obj.param.sparklineMode) { obj.param.sparklineMode = 'none' }
if (!obj.param.sparklineMode) { obj.param.sparklineMode = 'line' }
if (!obj.param.comparison) { obj.param.comparison = 'none' }
if (!obj.param.colorMode) { obj.param.colorMode = 'value' }
}
if (obj.type == 'text' && !obj.param.editorType) {
obj.param.editorType = 'richText'

14
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -270,6 +270,19 @@
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
<!-- colorMode -->
<el-form-item :label="$t('dashboard.chartForm.colorMode')" class="form-item--half-width" v-if="isStat(chartConfig.type)">
<el-select
v-model="chartConfig.param.colorMode"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option :label="$t('overall.value')" value="value"></el-option>
<el-option :label="$t('project.topology.bac')" value="background"></el-option>
</el-select>
</el-form-item>
</div>
<!--legend-->
<div v-if="isShowLegend(chartConfig.type)">
@@ -1128,6 +1141,7 @@ export default {
varValue: '',
result: 'show'
},
colorMode: 'value',
dataLink: this.chartConfig.param.dataLink
}
break

11
nezha-fronted/src/components/page/notebook/notebook.vue
View File

@@ -205,6 +205,13 @@ export default {
}
},
methods: {
notebookSave (data) {
if (this.detailType === 'list') {
this.$refs.dataList.showBottomBox('notebookTab', data)
} else {
this.detailViewRightObj = this.$lodash.cloneDeep(data)
}
},
add () {
this.$store.commit('setNotebookEdit', true)
const username = localStorage.getItem('nz-username')
@@ -281,6 +288,10 @@ export default {
this.initQueryFromPath(searchKeys)
},
mounted () {
bus.$on('notebookSave', this.notebookSave)
},
beforeDestroy () {
bus.$off('notebookSave', this.notebookSave)
}
}
</script>