NEZ-1812 feat：部分图表value mapping增加icon

nezha-fronted/config/index.js

@@ -19,8 +19,8 @@ module.exports = {
       }
     },
     // Various Dev Server settings
-    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: 'localhost', // can be overwritten by process.env.HOST
     port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
@@ -71,5 +71,5 @@ module.exports = {
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report
-  },
+  }
 }

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -148,6 +148,15 @@
         padding-left: 10px;
         box-sizing: border-box;
       }
+      .mapping-icon{
+        position: absolute;
+        left: 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-style: normal;
+      }
     }
     .thresholds-add{
       border: 1px solid $--border-color-light;
@@ -156,6 +165,14 @@
       margin-bottom: 10px;
       padding: 3px 10px;
     }
+    .prev-mapping-icon{
+      font-size: 16px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      position: absolute;
+      left: 200px;
+    }
     .prev-mapping-box{
       border: 1px solid $--border-color-light;
       display: inline-block;
@@ -167,7 +184,7 @@
       text-align: center;
       position: absolute;
       top: 0;
-      left: 200px;
+      left: 250px;
     }
     .element-item {
       padding: 0;

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

@@ -28,7 +28,7 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
-import bus from "@/libs/bus";
+import bus from '@/libs/bus'
 
 export default {
   name: 'chart-bar',
@@ -178,8 +178,13 @@ export default {
                         <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                             <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                            <div>
-                            <div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
+                                <i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
+                              </div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -7,7 +7,12 @@
       </div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
-        <div>{{tooltip.value}}</div>
+        <div>
+          <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
+            <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{tooltip.value}}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -15,7 +20,6 @@
 
 <script>
 import * as d3 from 'd3'
-import { SVG } from '@svgdotjs/svg.js'
 import hexbin from '@/components/chart/chart/options/chartHexagonD3'
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
@@ -38,6 +42,7 @@ export default {
         y: 0,
         title: 0,
         value: 0,
+        mapping: {},
         show: false
       },
       svgDom: null,
@@ -185,6 +190,7 @@ export default {
     hexagonOver (that, e) { // 移入六边形
       this.tooltip.title = that.alias
       this.tooltip.value = that.showValue
+      this.tooltip.mapping = that.mapping
       this.tooltip.show = true
       this.setPosition(e)
     },
@@ -271,14 +277,31 @@ export default {
         const scrollDiv = fObj.append('xhtml:div')
         scrollDiv
           .html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`)
-        group.append('text')
+        // group.append('text')
-          .attr('x', vals[0])
+        //   .attr('x', vals[0])
-          .attr('y', vals[1] + 16)
+        //   .attr('y', vals[1] + 16)
-          .text(valueStr)
+        //   .text(valueStr)
+        //   .attr('text-anchor', 'middle')
+        //   .attr('alignment-baseline', 'central')
+        //   .style('font-size', fontSize)
+        //   .style('fill', textColor)
+        const fObj2 = group.append('foreignObject')
+          .attr('width', hexWidth || 60)
+          .attr('height', 24)
+        fObj2
+          .attr('x', vals[0] - hexWidth / 2)
+          .attr('y', vals[1])
+          // .text(str)
           .attr('text-anchor', 'middle')
           .attr('alignment-baseline', 'central')
           .style('font-size', fontSize)
           .style('fill', textColor)
+        const scrollDiv2 = fObj2.append('xhtml:div')
+        scrollDiv2
+          .html(
+            `<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
+              <i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
+            </div>`)
         return
       }
       if (str) {
@@ -295,18 +318,37 @@ export default {
           .style('fill', textColor)
         const scrollDiv = fObj.append('xhtml:div')
         scrollDiv
-          .html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`)
+          .html(
+            `<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
+              <i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${str}
+            </div>`)
         return
       }
       if (valueStr) {
-        group.append('text')
+        // group.append('text')
-          .attr('x', vals[0])
+        //   .attr('x', vals[0])
-          .attr('y', vals[1])
+        //   .attr('y', vals[1])
-          .text(valueStr)
+        //   .text(valueStr)
+        //   .attr('text-anchor', 'middle')
+        //   .attr('alignment-baseline', 'central')
+        //   .style('font-size', fontSize)
+        //   .style('fill', textColor)
+        const fObj = group.append('foreignObject')
+          .attr('width', hexWidth || 60)
+          .attr('height', 24)
+        fObj
+          .attr('x', vals[0] - hexWidth / 2)
+          .attr('y', vals[1] - 10)
           .attr('text-anchor', 'middle')
           .attr('alignment-baseline', 'central')
           .style('font-size', fontSize)
           .style('fill', textColor)
+        const scrollDiv = fObj.append('xhtml:div')
+        scrollDiv
+          .html(
+            `<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
+              <i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
+            </div>`)
       }
     },
     getCenter (hexaRadius, row, col) {

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

@@ -143,8 +143,13 @@ export default {
                         <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                            <div>
-                            <div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
+                                <i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
+                              </div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                              <div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
+                            </div>
                         </div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>percent</div>

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

@@ -16,18 +16,29 @@
     >
       <span v-if="chartInfo.param.text==='all'">
         <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
-          {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+          {{item.legend}}<br/>
+          <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>
         </span>
         <span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>
       </span>
       <span v-if="chartInfo.param.text==='legend'">
         <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
-           {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
+          {{item.legend}}<br/>
+          <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>
         </span>
         <span v-else>{{item.legend}}</span>
       </span>
       <span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
         <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
+          <template v-if="item.mapping && item.mapping.icon">
+            <i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
+          </template>
           {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
         </span>
         <span v-else>{{item.showValue}}</span>
@@ -40,7 +51,12 @@
       </div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
-        <div>{{tooltip.value}}</div>
+        <div>
+          <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
+            <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{tooltip.value}}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -70,6 +86,7 @@ export default {
         y: 0,
         title: 0,
         value: 0,
+        mapping: {},
         show: false
       },
       fontSize: 12,
@@ -149,6 +166,7 @@ export default {
     statMouseEnter (that) {
       this.tooltip.title = that.legend
       this.tooltip.value = that.showValue
+      this.tooltip.mapping = that.mapping
       this.tooltip.show = true
     },
     statMouseleave (taht) {

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

@@ -30,6 +30,9 @@
           }"
                class="value-mapping-table"
           >
+            <template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
+              <i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
+            </template>
             {{showValueMapping(scope.row,col.title)}}
           </div>
           <div class="value-mapping-table" v-else>

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

@@ -150,9 +150,14 @@ export default {
                         <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                            <div>
-                            <div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'inline-block' : 'none'}">
+                              <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
-                                ${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''}
+                                <i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
+                              </div>
+                              <div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
+                              <div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'inline-block' : 'none'}">
+                                  ${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''}
+                              </div>
                             </div>
                         </div>
                     </div>

nezha-fronted/src/components/common/nezhaColor.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-
+import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { Sketch } from 'vue-color'
 export default {
   name: 'nezhaColor',
@@ -91,8 +91,9 @@ export default {
     }
   },
   mounted () {
-    this.colors = this.valueArr[0].value
     this.keyName = this.valueArr[0].name
+    this.colors = this.valueArr[0].value || randomcolor() + 'FF'
+    this.$emit('colorChange', this.colors, this.keyName)
   },
   methods: {
     updateValue (color) {
@@ -134,7 +135,7 @@ export default {
     },
     colorTabChange (item) {
       this.keyName = item.name
-      this.colors = this.colorVal[item.name]
+      this.colors = this.colorVal[item.name] || randomcolor() + 'FF'
     },
     exitColor () {
       this.showColorPicker = false

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

@@ -560,6 +560,9 @@
                     <span v-if="item.type === 'regx'">
                       {{item.regx}}
                     </span>
+                    <div class="prev-mapping-icon">
+                      <i :class="item.icon" :style="{ color: item.color.icon }"></i>
+                    </div>
                      <div :style="{background:item.color.bac}" class="prev-mapping-box">
                         <span :style="{color:item.color.text}">
                           {{item.display || "T"}}
@@ -665,10 +668,36 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
+                  <div>
+                    <el-select
+                      v-model="item.icon"
+                      size="small"
+                      style="width: 75px"
+                      :placeholder="$t('el.select.placeholder')"
+                      @change="change('valueMapping', index)"
+                    >
+                    <template slot="prefix">
+                      <i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
+                    </template>
+                      <el-option
+                        v-for="item in mappingIconList"
+                        :value="item.value"
+                        :key="item.value"
+                        label=" "
+                      >
+                        <i :class="item.value"></i>
+                      </el-option>
+                    </el-select>
+                  </div>
                   <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
                   </el-form-item>
-                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
+                  <nezhaColor
+                    :color-val="item.color"
+                    :single="false"
+                    :value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
+                    @colorChange="(val,key)=>{colorChange(val, key, index)}"
+                  />
                 </el-row>
               </transition-group>
             </div>

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

@@ -58,6 +58,29 @@ export default {
           value: 'regx'
         }
       ],
+      mappingIconList: [
+        {
+          value: 'nz-icon nz-icon-failed'
+        }, {
+          value: 'nz-icon nz-icon-Firewall'
+        }, {
+          value: 'nz-icon nz-icon-ADC'
+        }, {
+          value: 'nz-icon nz-icon-overview-alert'
+        }, {
+          value: 'nz-icon nz-icon-yanzhengma'
+        }, {
+          value: 'nz-icon nz-icon-Switch'
+        }, {
+          value: 'nz-icon nz-icon-connecting'
+        }, {
+          value: 'nz-icon nz-icon-language-change'
+        }, {
+          value: 'nz-icon nz-icon-overview-alert1'
+        }, {
+          value: 'nz-icon nz-icon-model'
+        }
+      ],
       letter: [
         'A', 'B', 'C', 'D', 'E', 'F', 'G',
         'H', 'I', 'J', 'K', 'L', 'M', 'N',
@@ -327,7 +350,8 @@ export default {
         display: '',
         color: {
           bac: bacColor + 'FF',
-          text: ColorReverse(bacColor) + 'FF'
+          text: ColorReverse(bacColor) + 'FF',
+          icon: randomcolor() + 'FF'
         }
       }
       if (this.chartConfig.type === 'table') {
@@ -388,6 +412,10 @@ export default {
         this.chartConfig.param.valueMapping[index].color.text = val
         this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       }
+      if (key === 'icon') {
+        this.chartConfig.param.valueMapping[index].color.icon = val
+        this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
+      }
       this.change()
     },
     change (key, index) {

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

@@ -522,11 +522,14 @@
                     <span v-if="item.type === 'regx'">
                       {{item.regx}}
                     </span>
-                     <div :style="{background:item.color.bac}" class="prev-mapping-box">
+                    <div class="prev-mapping-icon">
-                        <span :style="{color:item.color.text}">
+                      <i :class="item.icon" :style="{ color: item.color.icon }"></i>
-                          {{item.display || "T"}}
+                    </div>
-                        </span>
+                    <div :style="{background:item.color.bac}" class="prev-mapping-box">
-                      </div>
+                      <span :style="{color:item.color.text}">
+                        {{item.display || "T"}}
+                      </span>
+                    </div>
                   </span>
                 </span>
                 <span>
@@ -627,10 +630,36 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
+                  <div>
+                    <el-select
+                      v-model="item.icon"
+                      size="small"
+                      style="width: 75px"
+                      :placeholder="$t('el.select.placeholder')"
+                      @change="change('valueMapping', index)"
+                    >
+                    <template slot="prefix">
+                      <i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
+                    </template>
+                      <el-option
+                        v-for="item in mappingIconList"
+                        :value="item.value"
+                        :key="item.value"
+                        label=" "
+                      >
+                        <i :class="item.value"></i>
+                      </el-option>
+                    </el-select>
+                  </div>
                   <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
                   </el-form-item>
-                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
+                  <nezhaColor
+                    :color-val="item.color"
+                    :single="false"
+                    :value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
+                    @colorChange="(val,key)=>{colorChange(val, key, index)}"
+                  />
                 </el-row>
               </transition-group>
             </div>