From 6df9b2398ff771eccc1a5eeddb7065044c40ecbc Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Tue, 15 Nov 2022 10:36:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E4=B8=80=E9=94=AE=E6=B8=85=E9=99=A4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/ChartEdit.vue | 65 ++++++++++++++++++---
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 12c77740fc..4914074857 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -440,10 +440,14 @@
                       v-if="view.type === 'table-pivot'"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.table_pivot_row') }}</span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxisExt"
@@ -482,7 +486,7 @@
                       v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
                           $t('chart.drag_block_table_data_column')
                         }}</span>
@@ -511,6 +515,10 @@
                         <span
                           v-else-if="view.type && view.type === 'table-info'"
                         >{{ $t('chart.dimension_or_quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxis')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxis"
@@ -554,7 +562,7 @@
                         || (view.render === 'antv' && view.type === 'line')"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>
                           {{ $t('chart.chart_group') }}
                           <span
@@ -578,6 +586,10 @@
                             style="cursor: pointer;color: #606266;"
                           />
                         </el-tooltip>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxisExt"
@@ -617,7 +629,7 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
                           $t('chart.drag_block_table_data_column')
                         }}</span>
@@ -654,6 +666,10 @@
                         }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('yaxis')"
+                        />
                       </span>
                       <draggable
                         v-model="view.yaxis"
@@ -696,10 +712,14 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('yaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.yaxisExt"
@@ -741,10 +761,14 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.stack_item') }}</span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('extStack')"
+                        />
                       </span>
                       <draggable
                         v-model="view.extStack"
@@ -784,7 +808,7 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.bubble_size') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
@@ -801,6 +825,10 @@
                             style="cursor: pointer;color: #606266;"
                           />
                         </el-tooltip>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('extBubble')"
+                        />
                       </span>
                       <draggable
                         v-model="view.extBubble"
@@ -2554,7 +2582,7 @@ export default {
           })
           return
         }
-        if (parseFloat(f.value).toString() === 'NaN') {
+        if (isNaN(f.value)) {
           this.$message({
             message: this.$t('chart.filter_value_can_not_str'),
             type: 'error',
@@ -2611,7 +2639,7 @@ export default {
             return
           }
           if (this.filterItem.deType === 2 || this.filterItem.deType === 3) {
-            if (parseFloat(f.value).toString() === 'NaN') {
+            if (isNaN(f.value)) {
               this.$message({
                 message: this.$t('chart.filter_value_can_not_str'),
                 type: 'error',
@@ -3265,6 +3293,10 @@ export default {
         })
       }).catch(() => {
       })
+    },
+    clearData(data) {
+      this.view[data] = []
+      this.calcData(true)
     }
   }
 }
@@ -3713,4 +3745,19 @@ span {
   font-weight: 400 !important;
 }
 
+.data-area-label{
+  text-align: left;
+  position: relative;
+  width: 100%;
+  display: inline-block;
+}
+
+.data-area-clear{
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  color: rgb(135, 141, 159);
+  cursor: pointer;
+  z-index: 1;
+}
 </style>