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

nezha-fronted/src/components/chart/chart/chartBar.vue

@@ -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)

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -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)

nezha-fronted/src/components/chart/chart/chartHexagonD3.vue

@@ -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)

nezha-fronted/src/components/chart/chart/chartPie.vue

@@ -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)

nezha-fronted/src/components/chart/chart/chartStat.vue

@@ -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++

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -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
+        // let chartUnit = self.chartInfo.unit
-        chartUnit = chartUnit || 2
+        // chartUnit = chartUnit || 2
-        const unit = chartDataFormat.getUnit(chartUnit)
+        // const unit = chartDataFormat.getUnit(chartUnit)
-        // dot是判断最大值是否 小于1 大于1 默认是2 小于1 需要判断最大值是小数点后面几位
+        // // dot是判断最大值是否 小于1 大于1 默认是2 小于1 需要判断最大值是小数点后面几位
-        if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { // 当其小于1 且 dot < 2 默认給2 如 0.9 dot为1
+        // if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { // 当其小于1 且 dot < 2 默认給2 如 0.9 dot为1
-          dot = 2
+        //   dot = 2
-        }
+        // }
-        if (!dot) { //  默认是2
+        // if (!dot) { //  默认是2
-          dot = 2
+        //   dot = 2
-        }
+        // }
-        dot = bus.countDecimals(value)
+        // dot = bus.countDecimals(value)
-        if (dot < self.chartDot) { // 根据具体值计算
+        // if (dot < self.chartDot) { // 根据具体值计算
-          dot = self.chartDot
+        //   dot = self.chartDot
-        }
+        // }
         return unit.compute(value, index, -1, dot)
       }
     },

nezha-fronted/src/components/chart/chart/chartTreemap.vue

@@ -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)

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -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) {

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

@@ -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-->

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

@@ -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
+      }
     }
   }
 }

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

@@ -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)">