fix: 调整chart-time-series的堆叠按钮位置rel-24.01.18

8 files changed, 43 insertions, 9 deletions

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index d9a59c8b4..2a66b6bb5 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -81,6 +81,9 @@
           font-size: 14px;
           color: $--color-text-primary;
         }
+        .tool__icon-active {
+          color: $--color-primary;
+        }
         .nz-chart-dropdown {
           position: absolute;
           top: 44px;
@@ -162,6 +165,9 @@
           font-size: 14px;
           color: $--color-text-primary;
         }
+        .tool__icon-active {
+          color: $--color-primary;
+        }
         .nz-chart-dropdown {
           position: absolute;
           top: 44px;
diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
index 2c1abefd4..49d865127 100644
--- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue
+++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
@@ -49,6 +49,11 @@
           :sign="chartInfo.id"
           @unitChange="unitChange"
         >
+          <template v-slot:stack v-if="isTimeSeries(chartInfo.type)">
+            <button  class="top-tool-btn top-tool-btn--text margin-r-10" :title="$t('dashboard.dashboard.chartForm.stack')" @click="changeStack">
+              <i class="nz-icon nz-icon-duidiezhuzhuangtu" :class="isStack ? 'tool__icon-active' : ''"/>
+             </button>
+          </template>
         </pick-time>
       </span>
       <span class="chart-header__tool" v-if="showSaveBtn(from)">
diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
index 5de0bd60d..2aa57c4ce 100644
--- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
@@ -6,9 +6,9 @@
     @mouseleave="mouseLeaveChart"
     v-my-loading="chartLoading"
   >
-    <div class="uplot-toolbox"  @click="changeStack">
-      <i class="nz-icon nz-icon-duidiezhuzhuangtu" :style="{color: isStack ? toolboxIconColor.active : toolboxIconColor.inactive}"/>
-    </div>
+<!--    <div class="uplot-toolbox"  @click="changeStack">-->
+<!--      <i class="nz-icon nz-icon-duidiezhuzhuangtu" :style="{color: isStack ? toolboxIconColor.active : toolboxIconColor.inactive}"/>-->
+<!--    </div>-->
     <div class="showMore" v-if="chartIndex !== legends.length && from == 'explore'"><i class="nz-icon nz-icon-jinggao"></i>{{$t("dashboard.dashboard.moreTitle")}} <span class="moreChart" @click="showMore">{{$t("dashboard.dashboard.showAll")+ (chartIndex+1)}}</span></div>
     <div class="chart__canvas" style="position:relative" :class="{'chart-cursor-default':cursorDefault}">
       <div :id="`chart-canvas-${chartId}`"></div>
@@ -270,7 +270,8 @@ export default {
             }
           })
         ],
-        padding: [15, this.autoPadRight, 15, 15],
+        padding: [15, 15, 15, 15],
+        // padding: [15, this.autoPadRight, 15, 15],
         legend: {
           show: false
         },
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index 676a6b786..aa46ec471 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -66,9 +66,9 @@
           <i class="nz-icon nz-icon-plus tool__icon" :title="$t('tip.add')"></i>
         </span>
         <!-- refresh -->
-        <span v-if="!isExportHtml" class="chart-header__tool" @click="refreshChart">
-          <div :title="$t('dashboard.refresh')" effect="light" placement="top">
-            <i class="nz-icon nz-icon-replay tool__icon"></i>
+        <span v-if="!isExportHtml && isTimeSeries(chartInfo.type)" class="chart-header__tool" @click="changeStack">
+          <div :title="$t('dashboard.dashboard.chartForm.stack')" effect="light" placement="top">
+            <i class="nz-icon nz-icon-duidiezhuzhuangtu tool__icon" :class="isStack ? 'tool__icon-active' : ''"/>
           </div>
         </span>
         <!-- screen -->
@@ -124,10 +124,12 @@
 
 <script>
 import chartHeaderMixin from '@/components/chart/chartHeaderMixin'
+import {isTimeSeries} from "@/components/chart/chart/tools";
 export default {
   name: 'chartHeader',
   mixins: [chartHeaderMixin],
   methods: {
+    isTimeSeries,
     openUrl () {
       window.open(this.chartInfo.param.link)
     },
diff --git a/nezha-fronted/src/components/chart/chartHeaderMixin.js b/nezha-fronted/src/components/chart/chartHeaderMixin.js
index 7f248fab0..054f26e5d 100644
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -1,4 +1,5 @@
 import bus from '@/libs/bus'
+import {isTimeSeries} from './chart/tools'
 export default {
   props: {
     chartInfo: Object,
@@ -43,13 +44,15 @@ export default {
   data () {
     return {
       dropdownMenuShow: false,
-      errorText: ''
+      errorText: '',
+      isStack: ''
     }
   },
   methods: {
     showFullscreen () {
       this.$emit('showFullscreen', true)
     },
+    isTimeSeries,
     refreshChart () {
       this.$emit('refresh')
     },
@@ -106,6 +109,10 @@ export default {
     unitChange (val) {
       this.$emit('unitChange', val)
     },
+    changeStack () {
+      this.isStack = !this.isStack
+      this.$emit('changeStack', this.isStack)
+    },
     showDownloadCsv (type) {
 
       switch (type) {
@@ -184,5 +191,10 @@ export default {
         }
       }
     }
+  },
+  mounted() {
+    try {
+      this.isStack = !!this.chartInfo.param.stack
+    } catch (e) {}
   }
 }
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 9483b8f3a..242cf15b4 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -20,7 +20,7 @@ export default {
       isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
       legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
       toolboxIconColor: {
-        active: '#53a3cb',
+        active: '#FA901C',
         inactive: '#7e7e7e'
       },
       chartId: '',
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 86dd69a90..9ff5538ca 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -30,6 +30,7 @@
       @downloadCSV="beforeDownloadCSV"
       @groupShow="groupShow"
       @showFullscreen="showFullscreen"
+      @changeStack="changeStack"
     ></chart-header>
     <!-- 全屏的header -->
     <chart-screen-header
@@ -50,6 +51,7 @@
       @refresh="refresh"
       @dateChange="dateChange"
       @close="showFullscreen"
+      @changeStack="changeStack"
     ></chart-screen-header>
     <!-- chart -->
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
@@ -834,6 +836,11 @@ export default {
         this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
       })
     },
+    changeStack () {
+      this.$nextTick(() => {
+        this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].changeStack()
+      })
+    },
     unitChange (val) {
       this.$emit('update:chartInfo', 'unit', val)
       this.chartInfo.unit = val
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 66179b7f6..74ad81f67 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -2,6 +2,7 @@
   <div class="interval-refresh margin-r-10" style="position: relative">
     <time-picker v-if="showTimePicker" :showLocked="showLocked" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
+    <slot name="stack"></slot>
     <chart-unit v-if="useChartUnit" v-model="unit" ref="chartUnit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
       <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake" :title="id === 'explore' ? '': $t('dashboard.refresh')">