NEZ-2023 feat：chart支持根据variable值显示隐藏

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

@@ -223,6 +223,10 @@
   }
 }
 .chart__canvas {
+  div{
+    width: 100% !important;
+    height: 100% !important;
+  }
   .nz-chart__tooltip {
     .row__label,.row__value {
       color: $--color-text-regular;
@@ -586,3 +590,9 @@
     }
   }
 }
+.opacityItem{
+  opacity: 0;
+}
+.hiddenItem{
+  box-shadow: $--chart-shadow;
+}

nezha-fronted/src/assets/css/themes/theme-dark.scss

@@ -239,6 +239,7 @@ $--chart-border-color: $--border-color-light;
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
+$--chart-shadow: -1px 0 8px -3px rgba(0,0,0,0.8);
 
 /* 14.popover */
 $--popover-background-color: $--background-color-empty;

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -235,6 +235,7 @@ $--chart-border-color: $--color-text-label;
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
+$--chart-shadow: -1px 0 8px -3px #ccc;
 
 /* 14.popover */
 $--popover-background-color: $--color-text-label;

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

@@ -31,7 +31,8 @@
         :isGroup="isGroup"
         :class="{
           'group-hide-header':item.type === 'group' && item.param.collapse,
-          'opacityItem': item.static
+          'opacityItem': item.static,
+          'hiddenItem': showHidden[item.id]==='hidden'
         }"
         :ref="'grid-item' + item.id"
         :isResizable = "item.type === 'group' ? false: null"
@@ -44,6 +45,7 @@
         @container-resized="containerResizedEvent"
       >
         <panel-chart
+          v-show="showHidden[item.id]!=='hidden'"
           :ref="'chart' + item.id"
           @edit-chart="$emit('edit-chart', item)"
           :chart-info="item"
@@ -55,6 +57,7 @@
           :chart-detail-info="chartDetailInfo"
           @refreshPanel="refreshPanel"
           @showFullscreen="showFullscreen"
+          :showHidden="showHidden"
         ></panel-chart>
       </grid-item>
     </grid-layout>
@@ -148,6 +151,9 @@ export default {
     },
     panelLock () {
       return this.$store.getters.getPanelLock
+    },
+    variablesArr () {
+      return this.$store.state.panel.variablesArr
     }
   },
   data () {
@@ -170,7 +176,9 @@ export default {
         chartInfo: {}
       },
       scrollTop: 0,
-      scrollTopTimer: null
+      scrollTopTimer: null,
+      // 变量比较结果 图表是否显示/隐藏
+      showHidden: {}
     }
   },
   methods: {
@@ -431,6 +439,76 @@ export default {
           }
         })
       }
+    },
+    // 比较变量 图表是否显示/隐藏
+    compareVariables () {
+      if (!this.panelLock) {
+        return false
+      }
+      const isRegExp = (v) => {
+        let isReg
+        try {
+          isReg = eval(v) instanceof RegExp
+        } catch (e) {
+          isReg = false
+        }
+        return isReg
+      }
+      this.showHidden = {}
+      this.dataList.forEach(item => {
+        const visibility = this.$loadsh.get(item, 'param.enable.visibility', false)
+        const varName = this.$loadsh.get(item, 'param.visibility.varName')
+        const operator = this.$loadsh.get(item, 'param.visibility.operator')
+        const varValue = this.$loadsh.get(item, 'param.visibility.varValue')
+        const result = this.$loadsh.get(item, 'param.visibility.result')
+        // 相反结果 若result为show则contraryResult为hidden
+        const contraryResult = result === 'show' ? 'hidden' : 'show'
+        // 是否启用显示隐藏功能
+        if (visibility) {
+          this.variablesArr.forEach(subItem => {
+            // 判断当前图表的变量
+            if (subItem.name === varName) {
+              let flag = false
+              switch (operator) {
+                case 'equal': {
+                  flag = subItem.checked.some(value => {
+                    return value == varValue
+                  })
+                  break
+                }
+                case 'notEqual': {
+                  flag = subItem.checked.some(value => {
+                    return value != varValue
+                  })
+                  // 判断选中的值是否为空
+                  if (!subItem.checked.length) {
+                    flag = true
+                  }
+                  break
+                }
+                case 'match': {
+                  flag = subItem.checked.some(value => {
+                    const reg = isRegExp(varValue) ? eval(varValue) : new RegExp(varValue)
+                    return value.match(eval(reg))
+                  })
+                  break
+                }
+                case 'contains': {
+                  flag = subItem.checked.some(value => {
+                    return value.includes(varValue)
+                  })
+                  break
+                }
+              }
+              if (flag === true) {
+                this.showHidden[item.id] = result
+              } else {
+                this.showHidden[item.id] = contraryResult
+              }
+            }
+          })
+        }
+      })
     }
   },
   created () {
@@ -456,12 +534,29 @@ export default {
     // 监听查看模式变化
     '$store.state.panel.mode': {
       immediate: true,
-      handler (val) {
+      handler () {
         setTimeout(() => {
           this.resize()
         })
       }
     },
+    // 监听变量数组
+    variablesArr: {
+      handler () {
+        // 比较变量 图表是否显示/隐藏
+        this.compareVariables()
+      }
+    },
+    panelLock: {
+      handler (flag) {
+        if (!flag) {
+          this.showHidden = {}
+        } else {
+          // 比较变量 图表是否显示/隐藏
+          this.compareVariables()
+        }
+      }
+    },
     dataList: {
       immediate: true,
       deep: true,
@@ -526,6 +621,8 @@ export default {
         }
         this.$nextTick(() => {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
+          // 比较变量 图表是否显示/隐藏
+          this.compareVariables()
           tempList = null
           setTimeout(() => {
             this.gridLayoutShow = true

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

@@ -101,6 +101,10 @@ export default {
     variablesInit: {
       type: Boolean,
       default: true
+    },
+    // 变量比较结果 图表是否显示/隐藏
+    showHidden: {
+      type: Object
     }
   },
   data () {
@@ -152,6 +156,10 @@ export default {
     },
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
+      // 如果图表被隐藏了 则不请求数据
+      if (this.showHidden && this.showHidden[this.chartInfo.id] === 'hidden') {
+        return
+      }
       if (!this.variablesInit) { // 变量未加载完成 不请求数据
         return
       }
@@ -757,6 +765,16 @@ export default {
           this.chartInfo.loaded && this.getChartData(true)
         }
       }
+    },
+    // 监听图表显示 重新请求数据渲染图表
+    showHidden: {
+      handler (n, o) {
+        const newVal = n[this.chartInfo.id]
+        const oldVal = o[this.chartInfo.id]
+        if ((newVal === 'show' || newVal === undefined) && oldVal === 'hidden') {
+          this.getChartData(true)
+        }
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/common/mixin/editRigthBox.js

@@ -50,7 +50,6 @@ export default {
       }, 1000)
     },
     messageShow (msg, route, params, showNext = false, nextText = '', emit) {
-      // 如果存在弹框 则先清理掉
       this.messageParams.route = route
       this.messageParams.params = params
       this.messageParams.emit = emit

nezha-fronted/src/components/common/panel/panelVariables.vue

@@ -69,7 +69,6 @@ export default {
   },
   watch: {
     labelArrs: {
-      immediate: true,
       handler (n) {
         this.labelArr = this.labelArrs.map(item => {
           return {

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

@@ -715,6 +715,105 @@
           </el-row>
         </transition>
       </div>
+
+      <!-- visibility -->
+      <div>
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.showHidden')}}</span>
+          <el-switch
+            v-model="chartConfig.param.enable.visibility"
+            size="small"
+            @change="change"
+          ></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-if="chartConfig.param.enable.visibility"
+            class="form-items--half-width-group"
+          >
+            <!-- Variable name -->
+            <el-form-item
+              :label="$t('dashboard.panel.variableName')"
+              class="form-item--half-width"
+              prop="param.visibility.varName"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.varName"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+                filterable
+                allow-create
+                default-first-option
+              >
+                <el-option
+                  v-for="item in variables"
+                  :key="item.name"
+                  :label="$t(item.name)"
+                  :value="item.name"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Operator -->
+            <el-form-item
+              :label="$t('alert.config.operator')"
+              class="form-item--half-width"
+              prop="param.visibility.operator"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.operator"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option
+                  v-for="item in operatorList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Value -->
+            <el-form-item
+              :label="$t('overall.value')"
+              class="form-item--half-width"
+              prop="param.visibility.varValue"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-input
+                :placeholder="$t('overall.placeHolder')"
+                size="small"
+                v-model="chartConfig.param.visibility.varValue"
+                @change="change">
+              </el-input>
+            </el-form-item>
+            <!-- Result -->
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.result')"
+              class="form-item--half-width"
+              prop="param.visibility.result"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.result"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option label="Show" value="show"></el-option>
+                <el-option label="Hidden" value="hidden"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+      </div>
+
     </el-form>
   </div>
 </template>
@@ -850,7 +949,15 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
             }
           }
           this.$nextTick(() => {
@@ -874,7 +981,15 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
             }
           }
           break
@@ -896,7 +1011,15 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
             }
           }
           break
@@ -915,7 +1038,15 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
             }
           }
           break
@@ -925,7 +1056,20 @@ export default {
           }
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            limit: 100
+            limit: 100,
+            enable: {
+              legend: true,
+              valueMapping: false,
+              thresholds: false,
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
       }

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

@@ -80,16 +80,16 @@
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
           <el-tab-pane :label="$t('overall.metrics')" name="metrics">
-            <chart-config  ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
+            <chart-config :variables="variables" ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('overall.logs')" name="logs">
-            <chart-config ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
+            <chart-config :variables="variables" ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('overall.system')" name="system">
-            <system-chart-config ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
+            <system-chart-config :variables="variables" ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('overall.misc')" name="misc">
-            <other-chart-config ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
+            <other-chart-config :variables="variables" ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -162,6 +162,12 @@ export default {
     fromEndpoint: {
       type: Boolean,
       default: false
+    },
+    variables: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   mixins: [rz, editRigthBox],
@@ -370,10 +376,17 @@ export default {
             enable: {
               thresholds: false,
               legend: true,
-              valueMapping: false
+              valueMapping: false,
+              visibility: false
             },
             thresholds: [{ value: undefined, color: '#eeeeeeff' }],
-            showHeader: this.editChart.param.showHeader
+            showHeader: this.editChart.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
         }
       }
@@ -384,15 +397,22 @@ export default {
           height: 4,
           unit: 2,
           type: 'log',
-          enable: {
-            thresholds: false,
-            legend: true,
-            valueMapping: false
-          },
           elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
           param: {
+            enable: {
+              thresholds: false,
+              legend: true,
+              valueMapping: false,
+              visibility: false
+            },
             limit: 100,
-            showHeader: this.editChart.param.showHeader
+            showHeader: this.editChart.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
         }
       }
@@ -413,7 +433,8 @@ export default {
             enable: {
               thresholds: false,
               legend: true,
-              valueMapping: false
+              valueMapping: false,
+              visibility: false
             },
             datasource: [{
               name: 'System',
@@ -428,7 +449,13 @@ export default {
             }
             ],
             valueMapping: [],
-            showHeader: this.editChart.param.showHeader
+            showHeader: this.editChart.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
         }
         delete this.editChart.elements
@@ -439,14 +466,21 @@ export default {
           span: 4,
           height: 4,
           type: 'url',
-          enable: {
-            thresholds: false,
-            legend: true,
-            valueMapping: false
-          },
           param: {
+            enable: {
+              thresholds: false,
+              legend: true,
+              valueMapping: false,
+              visibility: false
+            },
             url: '',
-            showHeader: this.editChart.param.showHeader
+            showHeader: this.editChart.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
         }
         delete this.editChart.elements
@@ -524,7 +558,16 @@ export default {
             obj.param.enable = {
               thresholds: false,
               legend: false,
-              valueMapping: false
+              valueMapping: false,
+              visibility: false
+            }
+          }
+          if (!obj.param.visibility) {
+            obj.param.visibility = {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
             }
           }
           // this.editChart.varType = 1

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

@@ -148,6 +148,105 @@
       <el-form-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
         <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
       </el-form-item>
+
+      <!-- visibility -->
+      <div>
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.showHidden')}}</span>
+          <el-switch
+            v-model="chartConfig.param.enable.visibility"
+            size="small"
+            @change="change"
+          ></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-if="chartConfig.param.enable.visibility"
+            class="form-items--half-width-group"
+          >
+            <!-- Variable name -->
+            <el-form-item
+              :label="$t('dashboard.panel.variableName')"
+              class="form-item--half-width"
+              prop="param.visibility.varName"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.varName"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+                filterable
+                allow-create
+                default-first-option
+              >
+                <el-option
+                  v-for="item in variables"
+                  :key="item.name"
+                  :label="$t(item.name)"
+                  :value="item.name"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Operator -->
+            <el-form-item
+              :label="$t('alert.config.operator')"
+              class="form-item--half-width"
+              prop="param.visibility.operator"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.operator"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option
+                  v-for="item in operatorList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Value -->
+            <el-form-item
+              :label="$t('overall.value')"
+              class="form-item--half-width"
+              prop="param.visibility.varValue"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-input
+                :placeholder="$t('overall.placeHolder')"
+                size="small"
+                v-model="chartConfig.param.visibility.varValue"
+                @change="change">
+              </el-input>
+            </el-form-item>
+            <!-- Result -->
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.result')"
+              class="form-item--half-width"
+              prop="param.visibility.result"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.result"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option label="Show" value="show"></el-option>
+                <el-option label="Hidden" value="hidden"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+      </div>
+
     </el-form>
   </div>
 </template>
@@ -218,31 +317,81 @@ export default {
           this.chartConfig.span = 12
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            collapse: true
+            collapse: true,
+            enable: {
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'text':
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            text: ''
+            text: '',
+            enable: {
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'diagram':
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            topo: ''
+            topo: '',
+            enable: {
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'url':
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            url: ''
+            url: '',
+            enable: {
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'clock':
           this.chartConfig.param = {
             link: this.chartConfig.param.link,
-            timeType: 'local'
+            timeType: 'local',
+            enable: {
+              visibility: false
+            },
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
       }

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

@@ -12,7 +12,13 @@ const rz = {
 }
 export default {
   props: {
-    params: {}
+    params: {},
+    variables: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
   },
   data () {
     return {
@@ -34,6 +40,21 @@ export default {
         value: 'zero'
       }],
       statisticsList: this.$CONSTANTS.statisticsList,
+      operatorList: [
+        {
+          label: 'equal',
+          value: 'equal'
+        }, {
+          label: 'not equal',
+          value: 'notEqual'
+        }, {
+          label: 'match',
+          value: 'match'
+        }, {
+          label: 'contains',
+          value: 'contains'
+        }
+      ],
       legendPositionList: [
         {
           label: this.$t('overall.bottom'),
@@ -611,5 +632,13 @@ export default {
       this.chartConfig.param[key][index].error = false
       this.$forceUpdate()
     }
+  },
+  watch: {
+    params: {
+      deep: true,
+      handler (n) {
+        this.chartConfig.param.showHeader = n.param.showHeader
+      }
+    }
   }
 }

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

@@ -670,6 +670,105 @@
           </el-row>
         </transition>
       </div>
+
+      <!-- visibility -->
+      <div>
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.showHidden')}}</span>
+          <el-switch
+            v-model="chartConfig.param.enable.visibility"
+            size="small"
+            @change="change"
+          ></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-if="chartConfig.param.enable.visibility"
+            class="form-items--half-width-group"
+          >
+            <!-- Variable name -->
+            <el-form-item
+              :label="$t('dashboard.panel.variableName')"
+              class="form-item--half-width"
+              prop="param.visibility.varName"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.varName"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+                filterable
+                allow-create
+                default-first-option
+              >
+                <el-option
+                  v-for="item in variables"
+                  :key="item.name"
+                  :label="$t(item.name)"
+                  :value="item.name"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Operator -->
+            <el-form-item
+              :label="$t('alert.config.operator')"
+              class="form-item--half-width"
+              prop="param.visibility.operator"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.operator"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option
+                  v-for="item in operatorList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Value -->
+            <el-form-item
+              :label="$t('overall.value')"
+              class="form-item--half-width"
+              prop="param.visibility.varValue"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-input
+                :placeholder="$t('overall.placeHolder')"
+                size="small"
+                v-model="chartConfig.param.visibility.varValue"
+                @change="change">
+              </el-input>
+            </el-form-item>
+            <!-- Result -->
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.result')"
+              class="form-item--half-width"
+              prop="param.visibility.result"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+            >
+              <el-select
+                v-model="chartConfig.param.visibility.result"
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option label="Show" value="show"></el-option>
+                <el-option label="Hidden" value="hidden"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+      </div>
+
     </el-form>
   </div>
 </template>
@@ -801,9 +900,17 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
             },
-            datasource: [...this.chartConfig.param.datasource]
+            datasource: [...this.chartConfig.param.datasource],
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'bar':
@@ -824,9 +931,17 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
             },
-            datasource: [...this.chartConfig.param.datasource]
+            datasource: [...this.chartConfig.param.datasource],
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
         case 'table':
@@ -843,9 +958,17 @@ export default {
             enable: {
               legend: true,
               valueMapping: false,
-              thresholds: false
+              thresholds: false,
+              visibility: false
             },
-            datasource: [...this.chartConfig.param.datasource]
+            datasource: [...this.chartConfig.param.datasource],
+            showHeader: this.chartConfig.param.showHeader,
+            visibility: {
+              varName: '',
+              operator: '',
+              varValue: '',
+              result: ''
+            }
           }
           break
       }

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

@@ -127,6 +127,7 @@
         :from="fromRoute.panel"
         :panel-data="panelData"
         :show-panel="showPanel"
+        :variables="variables"
         @close="closeChartBox"
         @reload="panelReload"
         @reloadOnlyPanel="panelReloadOnlyPanel"
@@ -225,11 +226,18 @@ export default {
           enable: {
             legend: true,
             valueMapping: false,
-            thresholds: false
+            thresholds: false,
+            visibility: false
           },
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }],
-          showHeader: 1
+          showHeader: 1,
+          visibility: {
+            varName: '',
+            operator: '',
+            varValue: '',
+            result: ''
+          }
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
         panel: '',