NEZ-3051 feat：dashboard 时序图表增加 tooltip配置

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

@@ -133,6 +133,11 @@ export default {
         this.isStack = this.chartInfo.param.stack
       } catch (e) {}
       const chartOption = lodash.cloneDeep(chartOptions)
+
+      if (this.$lodash.get(this.chartInfo, 'param.enable.tooltip', false) && this.$lodash.get(this.chartInfo, 'param.tooltip.mode', 'all') === 'single') {
+        chartOption.tooltip.trigger = 'item'
+      }
+
       // 防止tootip超出内容区域
       if (this.from === 'integration' || this.from === 'dashboardTemp') {
         chartOption.tooltip.appendToBody = false
@@ -367,6 +372,9 @@ export default {
     tooltipFormatter (hasTotal) { // 堆叠图需要total数据
       const self = this
       return function (params) {
+        if (!params.length) { // tooltip mode为single
+          params = [params]
+        }
         const decimals = self.chartInfo.param.decimals || 2
         let str = '<div class="nz-chart__tooltip">'
         // 区分左y轴右y轴
@@ -393,6 +401,32 @@ export default {
           if (!arr.length) {
             return
           }
+
+          // tooltip排序
+          let sortBy
+          if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip') && self.$lodash.get(self.chartInfo, 'param.tooltip.mode') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort') !== 'none') {
+            sortBy = self.$lodash.get(self.chartInfo, 'param.tooltip.sort')
+          }
+          const previousIndex = arr.findIndex(item => item.seriesName.indexOf('Previous') !== -1)
+          if (previousIndex != -1) { // 对比状态
+            const arrNow = arr.slice(0, previousIndex)
+            const arrPrevious = arr.slice(previousIndex)
+            if (sortBy === 'asc') {
+              arrNow.sort((a, b) => a.data[1] - b.data[1])
+              arrPrevious.sort((a, b) => a.data[1] - b.data[1])
+            } else if (sortBy === 'desc') {
+              arrNow.sort((a, b) => b.data[1] - a.data[1])
+              arrPrevious.sort((a, b) => b.data[1] - a.data[1])
+            }
+            arr = [...arrNow, ...arrPrevious]
+          } else {
+            if (sortBy === 'asc') {
+              arr.sort((a, b) => a.data[1] - b.data[1])
+            } else if (sortBy === 'desc') {
+              arr.sort((a, b) => b.data[1] - a.data[1])
+            }
+          }
+
           let sum = 0
           let flag = true
           arr.forEach((item, i) => {

nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js

@@ -84,6 +84,9 @@ export const chartTimeSeriesLineOption = {
     },
     axisTick: {
       show: false
+    },
+    axisPointer: {
+      snap: true
     }
   },
   yAxis: [

nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue

@@ -230,7 +230,8 @@ export default {
             valueMapping: false,
             thresholds: false,
             visibility: false,
-            rightYAxis: false
+            rightYAxis: false,
+            tooltip: true
           },
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }],
@@ -249,7 +250,11 @@ export default {
             min: undefined,
             max: undefined
           },
-          dataLink: []
+          dataLink: [],
+          tooltip: {
+            mode: 'all',
+            sort: 'none'
+          }
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
         panel: '',
@@ -432,7 +437,8 @@ export default {
         if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
           this.chart.param.collapse = false
         }
-        if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
+        if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
+          if (!this.chart.param.rightYAxis) {
             this.chart.param.rightYAxis = {
               elementNames: [],
               style: 'line',
@@ -442,6 +448,14 @@ export default {
               max: undefined
             }
           }
+          if (!this.chart.param.tooltip) {
+            this.chart.param.tooltip = {
+              mode: 'all',
+              sort: 'none'
+            }
+            this.chart.param.enable.tooltip = true
+          }
+        }
         if (this.chart.type === 'stat') {
           if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
           if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
@@ -479,7 +493,8 @@ export default {
             if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
               this.chart.param.collapse = false
             }
-            if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
+            if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
+              if (!this.chart.param.rightYAxis) {
                 this.chart.param.rightYAxis = {
                   elementNames: [],
                   style: 'line',
@@ -489,6 +504,14 @@ export default {
                   max: undefined
                 }
               }
+              if (!this.chart.param.tooltip) {
+                this.chart.param.tooltip = {
+                  mode: 'all',
+                  sort: 'none'
+                }
+                this.chart.param.enable.tooltip = true
+              }
+            }
             if (this.chart.type === 'stat') {
               if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
               if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }

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

@@ -448,7 +448,7 @@
       </div>
 
       <!-- Right Y Axis   -->
-      <div v-if="isShowRightYAxis(chartConfig.type)">
+      <div v-if="isTimeSeries(chartConfig.type)">
         <div class="form__sub-title">
           <span>{{$t('dashboard.dashboard.chartForm.rightYAxis')}}</span>
           <el-switch
@@ -574,6 +574,62 @@
         </transition>
       </div>
 
+      <!-- Tooltip   -->
+      <div v-if="isTimeSeries(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.dashboard.chartForm.tooltip')}}</span>
+          <el-switch
+            v-model="chartConfig.param.enable.tooltip"
+            size="small"
+            @change="change"
+          ></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-if="chartConfig.param.enable.tooltip"
+            class="form-items--half-width-group"
+          >
+          <!-- Mode -->
+            <el-form-item
+              :label="$t('dashboard.mode')"
+              class="form-item--half-width"
+              prop="param.tooltip.mode"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-select
+                v-model="chartConfig.param.tooltip.mode"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option :label="$t('dashboard.dashboard.chartForm.single')" value="single"></el-option>
+                <el-option :label="$t('overall.exportAll')" value="all"></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- Sort -->
+            <el-form-item
+              v-if="chartConfig.param.tooltip.mode!=='single'"
+              :label="$t('dashboard.dashboard.chartForm.sort')"
+              class="form-item--half-width"
+              prop="param.tooltip.sort"
+            >
+              <el-select
+                v-model="chartConfig.param.tooltip.sort"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option :label="$t('project.topology.none')" value="none"></el-option>
+                <el-option :label="$t('dashboard.explore.ascending')" value="asc"></el-option>
+                <el-option :label="$t('dashboard.explore.descending')" value="desc"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+      </div>
+
       <div v-if="isShowLegend(chartConfig.type)">
         <!--legendConfig-->
         <div class="form__sub-title">
@@ -1380,7 +1436,8 @@ export default {
               valueMapping: false,
               thresholds: false,
               visibility: false,
-              rightYAxis: false
+              rightYAxis: false,
+              tooltip: true
             },
             showHeader: this.chartConfig.param.showHeader,
             visibility: {
@@ -1397,7 +1454,11 @@ export default {
               min: undefined,
               max: undefined
             },
-            dataLink: this.chartConfig.param.dataLink
+            dataLink: this.chartConfig.param.dataLink,
+            tooltip: {
+              mode: 'all',
+              sort: 'none'
+            }
           }
           this.$nextTick(() => {
             this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })

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

@@ -239,7 +239,7 @@ export default {
         default: return false
       }
     },
-    isShowRightYAxis (type) {
+    isTimeSeries (type) {
       switch (type) {
         case 'line':
         case 'area':

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

@@ -247,7 +247,8 @@ export default {
             valueMapping: false,
             thresholds: false,
             visibility: false,
-            rightYAxis: false
+            rightYAxis: false,
+            tooltip: true
           },
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }],
@@ -266,7 +267,11 @@ export default {
             min: undefined,
             max: undefined
           },
-          dataLink: []
+          dataLink: [],
+          tooltip: {
+            mode: 'all',
+            sort: 'none'
+          }
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
         panel: '',
@@ -607,7 +612,8 @@ export default {
         if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
           this.chart.param.collapse = false
         }
-        if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
+        if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
+          if (!this.chart.param.rightYAxis) {
             this.chart.param.rightYAxis = {
               elementNames: [],
               style: 'line',
@@ -617,6 +623,14 @@ export default {
               max: undefined
             }
           }
+          if (!this.chart.param.tooltip) {
+            this.chart.param.tooltip = {
+              mode: 'all',
+              sort: 'none'
+            }
+            this.chart.param.enable.tooltip = true
+          }
+        }
         if (this.chart.type === 'stat') {
           if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
           if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
@@ -654,7 +668,8 @@ export default {
             if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) {
               this.chart.param.collapse = false
             }
-            if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
+            if (this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') {
+              if (!this.chart.param.rightYAxis) {
                 this.chart.param.rightYAxis = {
                   elementNames: [],
                   style: 'line',
@@ -664,6 +679,14 @@ export default {
                   max: undefined
                 }
               }
+              if (!this.chart.param.tooltip) {
+                this.chart.param.tooltip = {
+                  mode: 'all',
+                  sort: 'none'
+                }
+                this.chart.param.enable.tooltip = true
+              }
+            }
             if (this.chart.type === 'stat') {
               if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
               if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }