feat： chart-right-box 调整

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

@@ -109,7 +109,7 @@
 .nz-chart {
   position: relative;
   height: 100%;
-
+  flex: 1;
   .nz-chart__component {
     display: flex;
     height: 100%;

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

@@ -272,7 +272,6 @@ export default {
       this.calcPosition(e)
     },
     calcPosition (e) {
-      console.log(e)
       const boxWidth = this.boxWidth
       const distance = this.fromType === 'asset' ? 300 : 50
       const minus = (e.offsetY - distance) + this.$refs.alertLabel.$el.offsetHeight - window.innerHeight

nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue

@@ -172,6 +172,7 @@ export default {
       immediate: false,
       deep: true,
       handler (n) {
+        console.log('hexData', n)
         this.init()
       }
     },
@@ -179,6 +180,7 @@ export default {
       immediate: false,
       deep: true,
       handler () {
+        console.log('col')
         this.init()
       }
     },
@@ -253,7 +255,7 @@ export default {
               wheelZoom: this.isWheelZoom,
               panning: this.isPanning
             })
-            .attr('id', 'SvgHex')
+            .attr('id', 'SvgHex' + this.hexagonSvgID)
             .attr('class', this.hexagonSvgID)
             .attr('viewBox', `0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`) // svg实例
           hexagonSvg.on('click', this.hexagonSvgClearScale)
@@ -264,6 +266,7 @@ export default {
           Rate = (Rate > 0.2 ? Rate : 0.2)
           this.windowRate = Rate
           this.hexagonEdge = (this.hexagonEdge / this.defaultRate) * Rate
+          this.fontSize = 14
           const fontSize = ((this.fontSize / this.defaultRate) * Rate)
           this.fontSize = fontSize < 8 ? 8 : fontSize
           setHexagon(this.hexagonSvgID, {
@@ -286,10 +289,13 @@ export default {
             this.firstInit = false
           }, 500)
         })
+      }).catch(() => {
+        console.log(123123)
       })
     },
     reload () {
       if (!document.hidden) {
+        console.log('reload')
         this.init()
       }
     },
@@ -810,6 +816,7 @@ export default {
       getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout', PolylineOut)
     },
     clearData () { // 清除数据 以及解绑事件 防止内存崩溃
+      console.log(123123123)
       if (getHexagon(this.hexagonSvgID) && getHexagon(this.hexagonSvgID).hexagonSvg) {
         this.allHexagon.forEach((item) => {
           item.off('mouseover', this.hexagonOver)
@@ -828,13 +835,20 @@ export default {
         getHexagon(this.hexagonSvgID).svgPolyline = null// Svg hexagon的边框
         delHexagon(this.hexagonSvgID)
       }
-      return new Promise(resolve => {
+      const dom = document.getElementById(this.hexagonSvgID)
+      const child = document.getElementById('SvgHex' + this.hexagonSvgID)
+      console.log(dom, child)
+      if (dom) {
+        dom.removeChild(child)
+      }
+      return new Promise((resolve, reject) => {
         resolve()
       })
     }
 
   },
   beforeDestroy () {
+    console.log('beforeDestroy')
     this.clearData()
     if (getHexagon(this.hexagonSvgID)) {
       getHexagon(this.hexagonSvgID).allHexagonRect = null// 文本框

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

@@ -286,7 +286,7 @@
           :label='"Null value"'
           class="form-item--half-width"
           prop="param.nullType"
-          v-if="!isLog(chartConfig.type)"
+          v-if="isShowNullType(chartConfig.type)"
         >
           <el-select
             id="chart-box-nullType"
@@ -304,6 +304,29 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <!-- text -->
+        <el-form-item
+          :label='"Null value"'
+          class="form-item--half-width"
+          prop="param.nullType"
+          v-if="isShowText(chartConfig.type)"
+        >
+          <el-select
+            id="chart-box-text"
+            v-model="chartConfig.param.text"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            @change="change, $forceUpdate()"
+          >
+            <el-option
+              v-for="item in textList"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
       </div>
 
       <div v-if="isShowLegend(chartConfig.type)">
@@ -581,7 +604,7 @@
               <div>
                 <div class='mapping-display'>Title</div>
               </div>
-              <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+              <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1">
                 <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
               </el-form-item>
               <div>
@@ -591,7 +614,7 @@
                            placeholder=""
                            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
                            size="small"
-                           style="width: 100%"
+                           style="flex: 1"
                            @change="unitSelected"
               >
               </el-cascader>
@@ -622,6 +645,7 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import VueTagsInput from '@johmun/vue-tags-input'
 import draggable from 'vuedraggable'
+import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 export default {
   name: 'chartConfig',
   components: {
@@ -650,6 +674,7 @@ export default {
     return {
       rules: {
       },
+      oldType: '',
       promqlType: 'log',
       chartTypeList: [
         {
@@ -657,7 +682,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
         {
-          id: 'stackArea',
+          id: 'area',
           name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
         },
         {
@@ -666,7 +691,7 @@ export default {
         },
         {
           id: 'stat',
-          name: this.$t('dashboard.panel.chartForm.typeVal.stat.label')
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
           id: 'bar',
@@ -703,6 +728,7 @@ export default {
     },
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      this.oldType = this.chartConfig.type
       // 重置相关属性
       this.expressions = []
       this.expressionsShow = []
@@ -718,8 +744,11 @@ export default {
     chartTypeChange (type) {
       switch (type) {
         case 'line':
-        case 'stackArea':
+        case 'area':
         case 'point':
+          if (this.oldType === 'line' || this.oldType === 'area' || this.oldType === 'point') {
+            break
+          }
           this.chartConfig.param = {
             stack: 0,
             nullType: this.chartConfig.param.nullType,
@@ -728,16 +757,21 @@ export default {
             thresholds: []
           }
           this.$nextTick(() => {
-            this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
+            this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
           })
           break
         case 'stat':
         case 'bar':
         case 'treemap':
+        case 'guage':
         case 'pie':
+          if (this.oldType === 'stat' || this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'guage' || this.oldType === 'pie') {
+            break
+          }
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
+            text: 'all',
             valueMapping: {
               show: true,
               mapping: []
@@ -745,6 +779,9 @@ export default {
           }
           break
         case 'table':
+          if (this.oldType === 'table') {
+            break
+          }
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
@@ -754,11 +791,15 @@ export default {
           }
           break
         case 'log':
+          if (this.oldType === 'log') {
+            break
+          }
           this.chartConfig.param = {
             limit: 100
           }
           break
       }
+      this.oldType = type
       this.change()
     },
     sortThresholds () {
@@ -782,7 +823,7 @@ export default {
     addThresholds () {
       this.chartConfig.param.thresholds.push({
         value: undefined,
-        color: '#eeeeeeff'
+        color: randomcolor()
       })
       this.change()
     },

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

@@ -1,98 +1,9 @@
 export default {
   methods: {
-    isStackShow (type) {
+    isDiagram (type) {
       switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
+        case 'diagram':
           return true
-        case 'table':
-        case 'stat':
-        case 'bar':
-        case 'treemap':
-        case 'guage':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isStatisticsShow (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return false
-        case 'table':
-        case 'stat':
-        case 'bar':
-        case 'treemap':
-        case 'guage':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isShowLegend (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return true
-        case 'table':
-        case 'stat':
-        case 'bar':
-        case 'guage':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isShowValueMapping (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'table':
-          return false
-        case 'stat':
-        case 'bar':
-        case 'guage':
-        case 'treemap':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isTable (type) {
-      switch (type) {
-        case 'table':
-          return true
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'stat':
-        case 'bar':
-        case 'guage':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isLog (type) {
-      switch (type) {
-        case 'log':
-          return true
-        case 'table':
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'stat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
         default: return false
       }
     },
@@ -103,13 +14,6 @@ export default {
         default: return false
       }
     },
-    isDiagram (type) {
-      switch (type) {
-        case 'diagram':
-          return true
-        default: return false
-      }
-    },
     isText (type) {
       switch (type) {
         case 'text':
@@ -123,6 +27,117 @@ export default {
           return true
         default: return false
       }
+    },
+    isTable (type) {
+      switch (type) {
+        case 'table':
+          return true
+        default: return false
+      }
+    },
+    isLog (type) {
+      switch (type) {
+        case 'log':
+          return true
+        default: return false
+      }
+    },
+    isStackShow (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+          return true
+        case 'table':
+        case 'stat':
+        case 'bar':
+        case 'treemap':
+        case 'guage':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isStatisticsShow (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+          return false
+        case 'table':
+        case 'stat':
+        case 'bar':
+        case 'treemap':
+        case 'guage':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isShowLegend (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+          return true
+        case 'table':
+        case 'stat':
+        case 'bar':
+        case 'guage':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isShowValueMapping (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+        case 'table':
+          return false
+        case 'stat':
+        case 'bar':
+        case 'guage':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isShowNullType (type) {
+      switch (type) {
+        case 'log':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+        case 'stat':
+        case 'guage':
+          return false
+        case 'line':
+        case 'area':
+        case 'point':
+        case 'table':
+          return true
+        default: return false
+      }
+    },
+    isShowText (type) {
+      switch (type) {
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+        case 'stat':
+        case 'guage':
+          return true
+        case 'line':
+        case 'area':
+        case 'point':
+        case 'table':
+          return false
+        default: return false
+      }
     }
   }
 }

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

@@ -1,5 +1,6 @@
 import chartDataFormat from '@/components/charts/chartDataFormat'
 import { getUUID, resetZIndex } from '@/components/common/js/common'
+import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 const rz = {
   methods: {
     rz (e) {
@@ -142,6 +143,21 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
         }
 
+      ],
+      textList: [
+        {
+          label: 'All',
+          value: 'all'
+        }, {
+          label: 'Value',
+          value: 'value'
+        }, {
+          label: 'Legend',
+          value: 'legend'
+        }, {
+          label: 'None',
+          value: 'none'
+        }
       ]
     }
   },
@@ -281,14 +297,16 @@ export default {
       this.change()
     },
     addMapping () {
+      const bacColor = randomcolor()
+      console.log(bacColor)
       this.chartConfig.param.valueMapping.mapping.push({
         type: 'value',
         show: true,
         value: undefined,
         display: '',
         color: {
-          bac: '#FFFFFFFF',
-          text: '#000000FF'
+          bac: bacColor,
+          text: randomcolor()
         }
       })
       this.change()

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

@@ -107,6 +107,7 @@
           :label="$t('dashboard.panel.chartForm.refer')"
           class="form-item--half-width"
           prop="param.stack"
+          style="display: none"
         >
           <el-select
             id="chart-box-height"
@@ -348,7 +349,7 @@
               <div>
                 <div class='mapping-display'>Title</div>
               </div>
-              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1">
                 <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
               </el-form-item>
               <div>
@@ -358,7 +359,7 @@
                            placeholder=""
                            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
                            size="small"
-                           style="width: 100%"
+                           style="flex: 1"
                            @change="unitSelected"
               >
               </el-cascader>
@@ -398,6 +399,7 @@ export default {
       rules: {},
       groupList: [],
       selectList: [],
+      oldType: '',
       chartTypeList: [
         {
           id: 'stat',
@@ -436,6 +438,7 @@ export default {
   methods: {
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      this.oldType = this.chartConfig.type
     },
     getSystemData () {
       this.loading = true
@@ -468,19 +471,23 @@ export default {
         case 'pie':
         case 'guage':
         case 'treemap':
+          if (this.oldType !== 'table') {
+            break
+          }
           this.chartConfig.param.valueMapping = {
             show: true,
             mapping: []
           }
-          this.chartConfig.param.refer = 1
+          this.chartConfig.param.refer = 0
           delete this.chartConfig.param.columns
           break
         case 'table':
           this.chartConfig.param.columns = []
-          this.chartConfig.param.refer = 1
+          this.chartConfig.param.refer = 0
           delete this.chartConfig.param.valueMapping
           break
       }
+      this.oldType = type
       this.change()
     },
     changeSystem (item) {

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

@@ -154,6 +154,7 @@ 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 {
   name: 'panel',
@@ -199,7 +200,7 @@ export default {
           nullType: 'null',
           legend: { placement: 'bottom', values: [], show: true },
           thresholdShow: true,
-          thresholds: [{ value: undefined, color: '#eeeeeeff' }]
+          thresholds: [{ value: undefined, color: randomcolor() }]
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
         panel: '',