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

NEZ-1681 feat： chart display configuration 增加 Decimals 配置项

Browse Source
This commit is contained in:
zhangyu
2022-03-15 14:08:55 +08:00
parent 3eace4ef3f
commit 0cf06196b9
11 changed files with 74 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -123,6 +123,7 @@ export default {
initBarData (chartInfo, seriesTemplate, originalDatas) {
let colorIndex = 0
const self = this
const decimals = this.chartInfo.param.decimals || 2
const s = lodash.cloneDeep(seriesTemplate)
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
@@ -130,7 +131,7 @@ export default {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, decimals)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && this.chartOption.color && (this.chartOption.color[colorIndex] = mapping.color.bac)

3
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -62,6 +62,7 @@ export default {
initGaugeData (chartInfo, originalDatas) {
this.gaugeData = []
this.isInit = false
const decimals = this.chartInfo.param.decimals || 2
return new Promise(resolve => {
let colorIndex = 0
originalDatas.forEach((originalData, expressionIndex) => {
@@ -90,7 +91,7 @@ export default {
gauge.legend = legend.alias
gauge.name = legend.name
gauge.alias = legend.alias
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, 2)
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, decimals)
// gauge.value = gauge.showValue
gauge.mapping = this.selectMapping(gauge.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.gaugeData.push(gauge)

3
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -67,6 +67,7 @@ export default {
initHexagonData (chartInfo, originalDatas) {
this.HexagonData = []
this.isInit = false
const decimals = this.chartInfo.param.decimals || 2
return new Promise(resolve => {
let colorIndex = 0
originalDatas.forEach((originalData, expressionIndex) => {
@@ -95,7 +96,7 @@ export default {
Hexagon.legend = legend.alias
Hexagon.name = legend.name
Hexagon.alias = legend.alias
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, 2)
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, decimals)
// Hexagon.value = Hexagon.showValue
Hexagon.mapping = this.selectMapping(Hexagon.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.HexagonData.push(Hexagon)

3
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -99,6 +99,7 @@ export default {
},
initPieData (chartInfo, seriesTemplate, originalDatas) {
let colorIndex = 0
const decimals = this.chartInfo.param.decimals || 2
const s = lodash.cloneDeep(seriesTemplate)
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
@@ -106,7 +107,7 @@ export default {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, decimals)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && this.chartOption.color && (this.chartOption.color[colorIndex] = mapping.color.bac)

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

@@ -89,6 +89,7 @@ export default {
},
initStatData (chartInfo, originalDatas) {
this.statData = []
const decimals = this.chartInfo.param.decimals || 2
return new Promise(resolve => {
let colorIndex = 0
originalDatas.forEach((originalData, expressionIndex) => {
@@ -110,7 +111,7 @@ export default {
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
stat.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, decimals)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.statData.push(stat)
colorIndex++

39
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -75,11 +75,12 @@ export default {
if (this.isNoData) {
return
}
const decimals = this.chartInfo.param.decimals || 2
const { minTime, maxTime, minValue, maxValue, copies, unit, dot } = this.getMinMaxFromData(this.chartData, this.chartInfo.unit) // 此处时间是秒
chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒
chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
chartOption.tooltip.position = this.tooltipPosition
chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, dot)
chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, decimals)
chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
if (unit.type = 'Time') {
@@ -183,6 +184,7 @@ export default {
tooltipFormatter (hasTotal) { // 堆叠图需要total数据
const self = this
return function (params) {
const decimals = self.chartInfo.param.decimals || 2
let str = '<div class="nz-chart__tooltip">'
let sum = 0
let flag = true
@@ -217,7 +219,6 @@ export default {
let previousDom = ''
if (previousItem) {
const previousVal = formatScientificNotation(previousItem.data[1], paramsDot)
// console.log(previousVal, item.data[1])
let minusVal = 0
let operator
if (previousVal <= val) {
@@ -228,7 +229,7 @@ export default {
operator = '-'
}
previousDom = `
<span>${operator}${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(minusVal, null, -1, paramsDot)}</span>
<span>${operator}${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(minusVal, null, -1, decimals)}</span>
`
}
str += `
@@ -238,7 +239,7 @@ export default {
<span>${seriesName}</span>
</div>
<div class="row__value">
<span>${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(val, null, -1, paramsDot)}</span>
<span>${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(val, null, -1, decimals)}</span>
${previousDom}
</div>
</div>
@@ -257,7 +258,7 @@ export default {
<span>${self.$t('dashboard.panel.chartTotal')}</span>
</div>
<div class="row__value">
<span>${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(sum, null, self.chartDot)}</span>
<span>${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(sum, null, decimals)}</span>
</div>
</div>
`
@@ -271,20 +272,20 @@ export default {
const self = this
return function (val, index) {
const value = formatScientificNotation(val, 2)
let chartUnit = self.chartInfo.unit
chartUnit = chartUnit || 2
const unit = chartDataFormat.getUnit(chartUnit)
// dot是判断最大值是否 小于1 大于1 默认是2 小于1 需要判断最大值是小数点后面几位
if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { // 当其小于1 且 dot < 2 默认給2 如 0.9 dot为1
dot = 2
}
if (!dot) { // 默认是2
dot = 2
}
dot = bus.countDecimals(value)
if (dot < self.chartDot) { // 根据具体值计算
dot = self.chartDot
}
// let chartUnit = self.chartInfo.unit
// chartUnit = chartUnit || 2
// const unit = chartDataFormat.getUnit(chartUnit)
// // dot是判断最大值是否 小于1 大于1 默认是2 小于1 需要判断最大值是小数点后面几位
// if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { // 当其小于1 且 dot < 2 默认給2 如 0.9 dot为1
// dot = 2
// }
// if (!dot) { // 默认是2
// dot = 2
// }
// dot = bus.countDecimals(value)
// if (dot < self.chartDot) { // 根据具体值计算
// dot = self.chartDot
// }
return unit.compute(value, index, -1, dot)
}
},

3
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -97,6 +97,7 @@ export default {
initTreeMapData (chartInfo, seriesTemplate, originalDatas) {
let colorIndex = 0
const self = this
const decimals = this.chartInfo.param.decimals || 2
const s = lodash.cloneDeep(seriesTemplate)
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
@@ -104,7 +105,7 @@ export default {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, decimals)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)

10
nezha-fronted/src/components/charts/chartDataFormat.js
View File

@@ -18,11 +18,11 @@ function short (value, index, type = 1, dot) {
}
}
function percent01 (value, index) {
value = parseFloat(keepDoubleNumber(Number(value)))
value = parseFloat((Number(value)).toFixed(2))
return `${value} %`
}
function percent02 (value, index) {
value = parseFloat(keepDoubleNumber(Number(value) * 100))
value = parseFloat((Number(value) * 100).toFixed(2))
return `${value} %`
}
function localFormat (value, index) {
@@ -308,7 +308,7 @@ function asciiCompute (num, ascii, units, dot = 2) {
if (Number.isInteger(num)) {
return num + ' ' + units[carry]
} else {
return keepDoubleNumber(num) + ' ' + units[carry]
return num.toFixed(dot) + ' ' + units[carry]
}
}
// eslint-disable-next-line no-unused-vars
@@ -319,9 +319,9 @@ function asciiCompute2 (num, ascii, units, dot = 2, unitIndex = 0) {
if (quotient < 1) { // 不足以进位
const toFixed = parseFloat(num.toFixed(dot))
if (toFixed == 0) {
return `${keepDoubleNumber(num)} ${units[unitIndex]}`
return `${num} ${units[unitIndex]}`
} else {
return `${keepDoubleNumber(num)} ${units[unitIndex]}`
return `${num.toFixed(dot)} ${units[unitIndex]}`
}
} else if (quotient >= 1 && quotient < 10) { // 可以进位，但是又不足以更进一位
if (unitIndex >= units.length - 1) {

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

@@ -348,6 +348,18 @@
show-word-limit v-model="chartConfig.param.max"/>
</el-form-item>
</div>
<div class="form-items--half-width-group" v-if="isShowDecimals(chartConfig.type)">
<!--decimals-->
<el-form-item :label="$t('dashboard.panel.chartForm.decimals')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
</div>
<div v-if="isShowLegend(chartConfig.type)">
<!--legendConfig-->

15
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

@@ -164,6 +164,21 @@ export default {
return false
default: return true
}
},
isShowDecimals (type) {
switch (type) {
case 'line':
case 'area':
case 'point':
case 'bar':
case 'treemap':
case 'pie':
case 'stat':
case 'hexagon':
case 'gauge':
return true
default: return false
}
}
}
}

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

@@ -311,6 +311,16 @@
></el-option>
</el-select>
</el-form-item>
<!--decimals-->
<el-form-item v-if="isShowDecimals(chartConfig.type)" :label="$t('dashboard.panel.chartForm.decimals')" class="form-item--half-width">
<el-input-number
size="small"
style="margin-top: 2px"
:controls="false"
@change="change"
:placeholder="'Default 2'"
show-word-limit v-model="chartConfig.param.decimals"/>
</el-form-item>
</div>
<!--legend-->
<div v-if="isShowLegend(chartConfig.type)">