feat： 添加显示更多的选项

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

@@ -13,6 +13,19 @@
            </span>
           </el-popover>
     </span>
+    <span v-if="!isError&&!showAllData&&allDataLength>20" class="chart-header-error moreTitle">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-warring-popper">
+          <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
+          <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+            <i class="nz-icon nz-icon-warning fa"></i>
+            <span class="panel-info-corner-inner"></span>
+          </span>
+     </el-popover>
+    </span>
     <div class="chart-header__title">{{chartInfo.name}}</div>
     <div class="chart-header__tools">
       <span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
@@ -33,25 +46,10 @@
 <script>
 import bus from '@/libs/bus'
 import lodash from 'lodash'
+import chartHeaderMixin from "@/components/chart/chartHeaderMixin";
 export default {
   name: 'ChartScreenHeader',
-  props: {
+  mixins: [chartHeaderMixin],
-    chartInfo: Object,
-    from: String,
-    isGroup: {
-      type: Boolean,
-      default: false
-    },
-    error: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    chartData: {}
-  },
   computed: {
     timeRange () {
       return this.$store.getters.getTimeRange
@@ -134,14 +132,6 @@ export default {
     }
   },
   watch: {
-    isError: {
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
-        }
-      }
-    },
     timeRange: {
       immediate: true,
       handler (n) {

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

@@ -12,6 +12,7 @@
         :is-fullscreen="isFullscreen"
         :minusTime="minusTime"
         :multipleTime="multipleTime"
+        :showAllData="showAllData"
         @chartIsNoData="chartIsNoData"
       ></chart-time-series>
       <chart-pie
@@ -226,7 +227,11 @@ export default {
     isError: Boolean,
     filter: {},
     multipleTime: {},
-    minusTime: {}
+    minusTime: {},
+    showAllData: {
+      type: Boolean,
+      default: false
+    }
   },
   data () {
     return {

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

@@ -69,6 +69,7 @@ export default {
   },
   methods: {
     initChart (chartOption = this.chartOption) {
+      console.log(123)
       this.legends = []
       chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
       if (this.isNoData) {
@@ -151,7 +152,6 @@ export default {
         let sum = 0
         let flag = true
         params.forEach((item, i) => {
-          console.log(item)
           const seriesName = item.seriesName.split('-')[0]
           if (i === 0) {
             const value = bus.computeTimezone(item.data[0] * 1000)

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

@@ -13,6 +13,19 @@
            </span>
           </el-popover>
     </span>
+    <span v-if="!isError&&!showAllData&&allDataLength>10" class="chart-header-error moreTitle">
+     <el-popover
+       placement="top-start"
+       :close-delay=10
+       trigger="hover"
+       popper-class="chart-warring-popper">
+          <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}</div>
+          <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+            <i class="nz-icon nz-icon-warning fa"></i>
+            <span class="panel-info-corner-inner"></span>
+          </span>
+     </el-popover>
+    </span>
     <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
     <div class="chart-header__title" v-else >
       <span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-down': 'nz-icon-arrow-right'"></i></span>
@@ -63,73 +76,9 @@
 </template>
 
 <script>
+import chartHeaderMixin from '@/components/chart/chartHeaderMixin'
 export default {
   name: 'chartHeader',
-  props: {
+  mixins: [chartHeaderMixin],
-    chartInfo: Object,
-    from: String,
-    isGroup: {
-      type: Boolean,
-      default: false
-    },
-    error: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    chartData: {}
-  },
-  data () {
-    return {
-      dropdownMenuShow: false,
-      errorText: ''
-    }
-  },
-  methods: {
-    showFullscreen () {
-      this.$emit('showFullscreen', true)
-    },
-    refreshChart () {
-      this.$emit('refresh')
-    },
-    editChart () {
-      // this.$emit('edit-chart', this.chartInfo)
-      this.$store.dispatch('dispatchEditChart', {
-        chart: this.chartInfo,
-        type: 'edit'
-      })
-    },
-    removeChart () {
-      this.$store.dispatch('dispatchDelChart', {
-        chart: this.chartInfo,
-        type: 'delete'
-      })
-    },
-    duplicate () {
-      this.$store.dispatch('dispatchEditChart', {
-        chart: this.chartInfo,
-        type: 'duplicate'
-      })
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    groupShow () {
-      this.$emit('groupShow', !this.chartInfo.param.collapse)
-    }
-  },
-  watch: {
-    isError: {
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
-        }
-      }
-    }
-  }
 }
 </script>

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

@@ -0,0 +1,79 @@
+export default {
+  props: {
+    chartInfo: Object,
+    from: String,
+    isGroup: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ''
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    chartData: {},
+    showAllData: {
+      type: Boolean,
+      default: false
+    },
+    allDataLength: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      dropdownMenuShow: false,
+      errorText: ''
+    }
+  },
+  methods: {
+    showFullscreen () {
+      this.$emit('showFullscreen', true)
+    },
+    refreshChart () {
+      this.$emit('refresh')
+    },
+    editChart () {
+      // this.$emit('edit-chart', this.chartInfo)
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'edit'
+      })
+    },
+    removeChart () {
+      this.$store.dispatch('dispatchDelChart', {
+        chart: this.chartInfo,
+        type: 'delete'
+      })
+    },
+    duplicate () {
+      this.$store.dispatch('dispatchEditChart', {
+        chart: this.chartInfo,
+        type: 'duplicate'
+      })
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    groupShow () {
+      this.$emit('groupShow', !this.chartInfo.param.collapse)
+    },
+    loadMore () {
+      this.$emit('loadMore')
+    }
+  },
+  watch: {
+    isError: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
+        }
+      }
+    }
+  }
+}

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

@@ -15,14 +15,17 @@ export default {
       },
       chartId: '',
       isNoData: true,
-      showAllData: false
     }
   },
   props: {
     chartInfo: Object,
     chartData: Array,
     chartOption: Object,
-    isFullscreen: Boolean
+    isFullscreen: Boolean,
+    showAllData: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
     filterTime () {
@@ -41,10 +44,11 @@ export default {
       let colorIndex = 0
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
-          // if (colorIndex >= 20 && !this.showAllData) {
+          console.log(this.showAllData)
-          //   colorIndex++
+          if (colorIndex >= 20 && !this.showAllData) {
-          //   return
+            colorIndex++
-          // }
+            return
+          }
           this.isNoData = false
           const s = lodash.cloneDeep(seriesTemplate)
           if (s) {

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

@@ -8,6 +8,9 @@
       :isError="isError"
       :chartData="chartData"
       :chart-info="chartInfo"
+      :showAllData.sync="showAllData"
+      :allDataLength="allDataLength"
+      @loadMore="loadMore"
       @edit-chart="$emit('edit-chart', chartInfo)"
       @refresh="refresh"
       @groupShow="groupShow"
@@ -20,6 +23,9 @@
       :isError="isError"
       :chartData="chartData"
       :chart-info="chartInfo"
+      :showAllData.sync="showAllData"
+      :allDataLength="allDataLength"
+      @loadMore="loadMore"
       @refresh="refresh"
       @dateChange="dateChange"
       @close="showFullscreen"
@@ -38,6 +44,7 @@
       :minusTime="minusTime"
       :multipleTime="multipleTime"
       :is-fullscreen="isFullscreen"
+      :showAllData="showAllData"
       v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
     ></chart>
   </div>
@@ -77,7 +84,9 @@ export default {
       loading: true,
       isError: false,
       multipleTime: false,
-      minusTime: ''
+      minusTime: '',
+      showAllData: false,
+      allDataLength: 0
     }
   },
   computed: {
@@ -139,6 +148,7 @@ export default {
     },
     query (elements, startTime, endTime, step) {
       this.isError = false
+      this.allDataLength = 0
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':
@@ -187,6 +197,9 @@ export default {
               res.forEach((r, rIndex) => {
                 if (rIndex < elements.length) {
                   if (r.status === 'success') {
+                    r.data.result.forEach(item => {
+                      this.allDataLength++
+                    })
                     chartData.push(r.data.result)
                   } else {
                     chartData.push({ error: r.msg || r.error || r })
@@ -196,6 +209,7 @@ export default {
                   if (r.status === 'success') {
                     console.log(r.data.result)
                     r.data.result.forEach(item => {
+                      this.allDataLength++
                       item.values.forEach(values => {
                         values[0] = values[0] + this.minusTime / 1000
                       })
@@ -360,6 +374,21 @@ export default {
       this.groupInit()
       bus.$emit('groupMove', '', '', true)
       this.$emit('groupShow', this.chartInfo)
+    },
+    showMultiple (type) {
+      switch (type) {
+        case 'line' :
+        case 'area' :
+        case 'point' :
+          return true
+        default: return false
+      }
+    },
+    loadMore () {
+      this.showAllData = true
+      this.$nextTick(() => {
+        this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
+      })
     }
   },
   watch: {
@@ -378,6 +407,7 @@ export default {
   },
   mounted () {
     this.chartInfo.loaded && this.getChartData()
+    this.showAllData = !this.showMultiple(this.chartInfo.type)
   }
 }
 </script>