NEZ-1281 feat：chart-value 组件开发

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -256,3 +256,13 @@
     height: 100%;
   }
 }
+.chart-stat{
+  height: calc(100% - 20px);
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  word-break: break-all;
+  border-radius: 2px;
+}

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

@@ -55,6 +55,12 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
       ></chart-log>
+      <chart-stat
+        v-if="isStat(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :chart-option="chartOption"
+      ></chart-stat>
     </template>
   </div>
 </template>
@@ -79,7 +85,7 @@ import chartTreemap from './chart/chartTreemap'
 import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagon from './chart/chartHexagon'
-import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog } from './chart/tools'
+import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat } from './chart/tools'
 import lodash from 'lodash'
 
 export default {
@@ -133,6 +139,7 @@ export default {
     isText,
     isTreemap,
     isLog,
+    isStat,
     resize () {
       this.$refs['chart' + this.chartInfo.id].resize()
     }

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

@@ -1,10 +1,62 @@
 <template>
-
+  <div class="chart-stat" :style="{background:stat.mapping ? stat.mapping.color.bac : false}">
+    <span v-if="stat.mapping" :style="{color:stat.mapping.color.text}">
+        {{handleDisplay(stat.mapping.display, { ...stat.label, value: stat.showValue })}}
+    </span>
+    <span v-else>{{stat.showValue}}</span>
+  </div>
 </template>
 
 <script>
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
+import { getMetricTypeValue } from '@/components/common/js/tools'
+import chartDataFormat from '@/components/charts/chartDataFormat'
+
 export default {
-  name: 'chart-stat'
+  name: 'chart-stat',
+  mixins: [chartMixin, chartFormat],
+  data () {
+    return {
+      stat: {
+        value: '',
+        showValue: '',
+        label: {},
+        mapping: {
+
+        }
+      }
+    }
+  },
+  methods: {
+    initChart () {
+      console.log(this.chartInfo, this.chartData)
+      this.stat = this.initStatData(this.chartInfo, this.chartData)
+      console.log(this.stat)
+    },
+    initStatData (chartInfo, originalDatas) {
+      const stat = {
+        value: '',
+        showValue: '',
+        label: {},
+        mapping: {
+
+        }
+      }
+      originalDatas.forEach((originalData, expressionIndex) => {
+        originalData.forEach((data, dataIndex) => {
+          stat.value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+          stat.label = data.metric
+          stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
+          stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping)
+        })
+      })
+      return stat
+    }
+  },
+  mounted () {
+    this.initChart()
+  }
 }
 </script>
 

nezha-fronted/src/components/chart/chart/tools.js

@@ -73,6 +73,9 @@ export function isTreemap (type) {
 export function isLog (type) {
   return type === chartType.log
 }
+export function isStat (type) {
+  return type === chartType.stat
+}
 
 export function initColor (colorNum = 20) {
   const colorList = [

nezha-fronted/src/components/common/js/constants.js

@@ -392,7 +392,7 @@ export const chartType = {
   point: 'point',
   bar: 'bar',
   table: 'table',
-  singleStat: 'singleStat',
+  stat: 'stat',
   gauge: 'gauge',
   pie: 'pie',
   treemap: 'treemap',

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

@@ -52,7 +52,7 @@
               <div v-if="expressionsShow[index-1].error"  class="el-form-item__error" style="top: 10px;left: 164px"> {{expressionsShow[index-1].error}}</div>
             </span>
             <span>
-              <span @click="()=>{addExpression()}" style="margin-right: 5px;padding-left: 10px">
+              <span @click="()=>{addExpression()}" style="margin-right: 5px;padding-left: 10px" v-if="!isStat(chartConfig.type)">
                   <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
               </span>
               <span @click="copyExpression(index - 1)" style="margin-right: 5px">
@@ -650,6 +650,7 @@ import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import VueTagsInput from '@johmun/vue-tags-input'
 import draggable from 'vuedraggable'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
+
 export default {
   name: 'chartConfig',
   components: {
@@ -769,6 +770,12 @@ export default {
         case 'treemap':
         case 'guage':
         case 'pie':
+          if (type === 'stat') {
+            this.expressions = []
+            this.expressionName = []
+            this.chartConfig.elements = [this.chartConfig.elements[0]]
+            this.addExpression(this.chartConfig.elements[0])
+          }
           if (this.oldType === 'stat' || this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'guage' || this.oldType === 'pie') {
             break
           }

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

@@ -1,6 +1,7 @@
 import chartDataFormat from '@/components/charts/chartDataFormat'
 import { getUUID, resetZIndex } from '@/components/common/js/common'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
+import { isStat } from '@/components/chart/chart/tools'
 const rz = {
   methods: {
     rz (e) {
@@ -163,6 +164,7 @@ export default {
   },
   mixins: [rz],
   methods: {
+    isStat,
     expressionChange: function () {
       if (this.expressions.length) {
         this.chartConfig.elements = []

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -155,7 +155,6 @@ import panelBox from '@/components/common/rightBox/panelBox'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import { fromRoute } from '@/components/common/js/constants'
-import chartData from '@/components/chart/testData'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 
 export default {