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

NEZ-953 fix: 优化tooltip数字

Browse Source
This commit is contained in:
chenjinsong
2021-08-31 16:49:31 +08:00
parent aedc414fd6
commit 0e6a2a8a33
5 changed files with 23 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -94,6 +94,7 @@ import * as echarts from 'echarts'
import { getChart, setChart, getMousePoint } from '../common/js/common'
import chartConfig from '../page/dashboard/overview/chartConfig'
import { randomcolor } from '../common/js/radomcolor/randomcolor'
import {formatScientificNotation} from "@/components/common/js/tools";
export default {
name: 'pieChart', // 饼图 或者 柱状图的统计
components: {
@@ -345,13 +346,7 @@ export default {
show: true,
fontSize: 10,
formatter (val, index) {
let value = val
if (val !== 0) {
value = parseFloat(Number(val).toFixed(2))
if (value === 0) {
value = Number(val).toExponential(2)
}
}
const value = formatScientificNotation(val, 2)
// const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
dot = 2

11
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -200,6 +200,7 @@ import chartAlertList from './chart-alert-list'
import chartConfig from '../page/dashboard/overview/chartConfig'
import diagram from '@/components/common/ChartDiagram/diagram'
import moment from 'moment-timezone'
import {formatScientificNotation} from "@/components/common/js/tools";
export default {
name: 'chartPreview',
components: {
@@ -906,10 +907,7 @@ export default {
[tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
str += '<br/>'
}
let val = parseFloat(Number(item.data[1]).toFixed(2))
if (val === 0) {
val = Number(item.data[1]).toExponential(2)
}
const val = formatScientificNotation(item.data[1], 2)
sum += self.numberWithEConvent(val)
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
@@ -1084,10 +1082,7 @@ export default {
[tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
str += '<br/>'
}
let val = parseFloat(Number(item.data[1]).toFixed(2))
if (val === 0) {
val = Number(item.data[1]).toExponential(2)
}
const val = formatScientificNotation(item.data[1], 2)
sum += self.numberWithEConvent(val)
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`

40
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -203,7 +203,7 @@ import chartDataFormat from './chartDataFormat'
import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
import chartConfig from '../page/dashboard/overview/chartConfig'
import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
import { getMetricTypeValue, chartResizeTool } from '../common/js/tools'
import { getMetricTypeValue, chartResizeTool, formatScientificNotation } from '../common/js/tools'
import moment from 'moment-timezone'
export default {
@@ -778,10 +778,7 @@ export default {
} else if (paramsDot > 6) {
paramsDot = 6
}
let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(paramsDot)) : ''
if (val === 0) {
val = Number(item.data[1]).toExponential(paramsDot)
}
const val = formatScientificNotation(item.data[1], paramsDot)
sum += self.numberWithEConvent(val)
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
@@ -789,10 +786,7 @@ export default {
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(paramsDot))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(paramsDot)
}
const previousval = formatScientificNotation(item.data[1], paramsDot)
let minusVal = 0
if (previousval <= val) {
minusVal = val - previousval
@@ -922,13 +916,7 @@ export default {
show: true,
fontSize: 10,
formatter: function (val, index) {
let value = val
if (val !== 0) {
value = parseFloat(Number(val).toFixed(2))
if (value === 0) {
value = Number(val).toExponential(2)
}
}
const value = formatScientificNotation(val, 2)
let chartUnit = chartInfo.unit
chartUnit = chartUnit || 2
const unit = chartDataFormat.getUnit(chartUnit)
@@ -1081,10 +1069,7 @@ export default {
str += bus.timeFormate(tData)
str += '</div>'
}
let val = parseFloat(Number(item.data[1]).toFixed(2))
if (val === 0) {
val = Number(item.data[1]).toExponential(2)
}
const val = formatScientificNotation(item.data[1], 2)
sum += self.numberWithEConvent(val)
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
@@ -1261,10 +1246,7 @@ export default {
minusFlag = false
}
const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
let val = parseFloat(Number(item.data[1]).toFixed(2))
if (val === 0) {
val = Number(item.data[1]).toExponential(2)
}
const val = formatScientificNotation(item.data[1], 2)
sum += self.numberWithEConvent(val)
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
@@ -1272,10 +1254,7 @@ export default {
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, self.chartDot)
if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
}
const previousval = formatScientificNotation(previousItem.data[1], 2)
let minusVal = 0
if (previousval <= val) {
minusVal = val - previousval
@@ -1294,10 +1273,7 @@ export default {
str += '</div>'
if (previousItem) {
str += '<div style="padding-left: 10px;">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
}
const previousval = formatScientificNotation(previousItem.data[1], 2)
let minusVal = 0
if (previousval <= val) {
minusVal = val - previousval

8
nezha-fronted/src/components/common/js/tools.js
View File

@@ -817,6 +817,14 @@ export function hideTableTooltip () {
dom.innerHTML = ''
}
/* 数字转换保留小数，数字很小时转为科学计数法, dot为保留几位小数 */
export function formatScientificNotation (value, dot = 2) {
let val = value ? parseFloat(Number(value).toFixed(dot)) : 0
if (val === 0) {
val = Number(value).toPrecision(dot + 1)
}
return val
}
/* function getTdDom(dom) {
let tagName = dom.tagName;
if (tagName.toLowerCase() === 'td') {

6
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -24,6 +24,7 @@ import chartConfig from './chartConfig'
import bus from '../../../../libs/bus'
import EleResize from '../../../common/js/divResize'
import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
import { formatScientificNotation } from '@/components/common/js/tools'
// import * as mapGeoJson from "../../../common/js/world";
export default {
@@ -449,10 +450,7 @@ export default {
const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(dot))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
}
const previousval = formatScientificNotation(previousItem.data[1], dot)
let minusVal = 0
if (previousval <= val) {
minusVal = val - previousval