From 0219704e8ba961214c02c5b4137f3cca004e3409 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 26 Apr 2024 17:17:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20explore=20graph=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A0=86=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/dashboard/explore/explore.scss       |  3 +++
 .../page/dashboard/explore/exploreItem.vue    | 22 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
index 8f1187d38..84c6a3857 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
@@ -97,6 +97,9 @@
         }
       }
     }
+    .tool__icon-active {
+      color: $--color-primary;
+    }
   }
   .el-collapse-item__wrap {
     background-color: $--background-color-empty;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 12b5a2b7e..350f1da2b 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -225,6 +225,12 @@
             <!--metric-->
             <template v-if="showMetrics">
               <el-collapse-item v-if="!allMatrix && showChart" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+                <!-- 堆叠 -->
+                <div slot="title" class="explore-table-title" style="display:flex; justify-content: flex-end;align-item:center;padding-right:30px;">
+                  <span :title="$t('dashboard.dashboard.chartForm.stack')" @click.stop="changeStack" v-show="collapseValue.some(item=>item==1)" tabindex="0">
+                    <i class="nz-icon nz-icon-duidiezhuzhuangtu tool__icon" :class="isStack ? 'tool__icon-active' : ''"/>
+                  </span>
+                </div>
                 <div class="chart-room">
                   <uplotChart
                     :ref="'exploreChart'"
@@ -364,6 +370,12 @@
             <!--log-->
             <template v-else>
               <el-collapse-item v-show="showTab.indexOf('1') > -1" name="1" :title="$t('explore.graph')" class="el-collapse-item__height">
+                <!-- 堆叠 -->
+                <div slot="title" class="explore-table-title" style="display:flex; justify-content: flex-end;align-item:center;padding-right:30px;">
+                  <span :title="$t('dashboard.dashboard.chartForm.stack')" @click.stop="changeStack" v-show="collapseValue.some(item=>item==2)" tabindex="0">
+                    <i class="nz-icon nz-icon-duidiezhuzhuangtu tool__icon" :class="isStack ? 'tool__icon-active' : ''"/>
+                  </span>
+                </div>
                 <div class="chart-room">
 <!--                  <chart ref="logChart" :unit="chartUnit" v-my-loading="chartLoading" :timeRange="filterTime"></chart>-->
                   <uplotChart
@@ -3776,7 +3788,8 @@ export default {
       uplotChartInfoLog: logData,
       uplotChartData: [],
       showAllData: false,
-      supplementaryData: []
+      supplementaryData: [],
+      isStack: false
     }
   },
   async created () {
@@ -3795,6 +3808,10 @@ export default {
     this.scrollbarWrap.removeEventListener('scroll', this.onScroll)
   },
   methods: {
+    changeStack () {
+      this.isStack = !this.isStack
+      this.$refs.exploreChart.$children[0].changeStack()
+    },
     async loadWebAssembly () {
       try {
         // eslint-disable-next-line no-undef
@@ -3853,6 +3870,7 @@ export default {
       } else {
         label = 'Metrics'
       }
+      this.isStack = false
       this.changeType(label)
     },
     changeType (value) {
@@ -4048,6 +4066,7 @@ export default {
         this.uplotChartData = []
         this.uplotChartInfoLog.elements = []
         this.uplotChartInfoLog.unit = this.chartUnit
+        this.uplotChartInfoLog.param.stack = this.isStack
         this.logData.forEach((response, index) => {
           if (response.resultType === 'matrix') {
             const promqlIndex = promqlInputIndexs[index]
@@ -4104,6 +4123,7 @@ export default {
         this.uplotChartData = []
         this.uplotChartInfo.elements = []
         this.uplotChartInfo.unit = this.chartUnit
+        this.uplotChartInfo.param.stack = this.isStack
         axios.all(requestArr).then(res => {
           const series = []
           const legend = []