From 74efcfaad7e7e8dbb75544bec2c995cc98b7d32e Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Sat, 20 Aug 2022 10:50:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=A0=86=E5=8F=A0=E5=9B=BE=E4=B8=8D=E6=94=AF=E6=8C=81=E5=A4=9A?=
 =?UTF-8?q?=E6=8C=87=E6=A0=87=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/chart/common/common_antv.js   | 72 ++++++++++++++++---
 frontend/src/views/chart/view/ChartEdit.vue   | 55 ++++++++++++--
 2 files changed, 114 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index acaed3adca..25432a9e9f 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -135,15 +135,41 @@ export function getLabel(chart) {
         // label value formatter
         if (chart.type && chart.type !== 'waterfall') {
           label.formatter = function(param) {
-            let yAxis
+            let yAxis, extStack
             let res = param.value
             try {
               yAxis = JSON.parse(chart.yaxis)
             } catch (e) {
               yAxis = JSON.parse(JSON.stringify(chart.yaxis))
             }
+            try {
+              extStack = JSON.parse(chart.extStack)
+            } catch (e) {
+              extStack = JSON.parse(JSON.stringify(chart.extStack))
+            }
 
             if (chart.type === 'bar-stack' || chart.type === 'line-stack' || chart.type === 'bar-stack-horizontal') {
+              if (extStack && extStack.length > 0) {
+                const f = yAxis[0]
+                if (f.formatterCfg) {
+                  res = valueFormatter(param.value, f.formatterCfg)
+                } else {
+                  res = valueFormatter(param.value, formatterItem)
+                }
+              } else {
+                for (let i = 0; i < yAxis.length; i++) {
+                  const f = yAxis[i]
+                  if (f.name === param.category) {
+                    if (f.formatterCfg) {
+                      res = valueFormatter(param.value, f.formatterCfg)
+                    } else {
+                      res = valueFormatter(param.value, formatterItem)
+                    }
+                    break
+                  }
+                }
+              }
+            } else if (chart.type === 'bar-group') {
               const f = yAxis[0]
               if (f.formatterCfg) {
                 res = valueFormatter(param.value, f.formatterCfg)
@@ -187,22 +213,42 @@ export function getTooltip(chart) {
         // tooltip value formatter
         if (chart.type && chart.type !== 'waterfall') {
           tooltip.formatter = function(param) {
-            let yAxis
+            let yAxis, extStack
             let res
             try {
               yAxis = JSON.parse(chart.yaxis)
             } catch (e) {
               yAxis = JSON.parse(JSON.stringify(chart.yaxis))
             }
+            try {
+              extStack = JSON.parse(chart.extStack)
+            } catch (e) {
+              extStack = JSON.parse(JSON.stringify(chart.extStack))
+            }
 
             let obj
             if (chart.type === 'bar-stack' || chart.type === 'line-stack' || chart.type === 'bar-stack-horizontal') {
-              obj = { name: param.category, value: param.value }
-              const f = yAxis[0]
-              if (f.formatterCfg) {
-                res = valueFormatter(param.value, f.formatterCfg)
+              if (extStack && extStack.length > 0) {
+                obj = { name: param.category, value: param.value }
+                const f = yAxis[0]
+                if (f.formatterCfg) {
+                  res = valueFormatter(param.value, f.formatterCfg)
+                } else {
+                  res = valueFormatter(param.value, formatterItem)
+                }
               } else {
-                res = valueFormatter(param.value, formatterItem)
+                obj = { name: param.category, value: param.value }
+                for (let i = 0; i < yAxis.length; i++) {
+                  const f = yAxis[i]
+                  if (f.name === param.category) {
+                    if (f.formatterCfg) {
+                      res = valueFormatter(param.value, f.formatterCfg)
+                    } else {
+                      res = valueFormatter(param.value, formatterItem)
+                    }
+                    break
+                  }
+                }
               }
             } else if (chart.type === 'word-cloud') {
               obj = { name: param.text, value: param.value }
@@ -234,7 +280,7 @@ export function getTooltip(chart) {
                   res = valueFormatter(param.value, formatterItem)
                 }
               }
-            } else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) {
+            } else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) {
               obj = { name: param.category, value: param.value }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
@@ -247,6 +293,16 @@ export function getTooltip(chart) {
                   break
                 }
               }
+            } else if (chart.type.includes('group')) {
+              obj = { name: param.category, value: param.value }
+              for (let i = 0; i < yAxis.length; i++) {
+                const f = yAxis[i]
+                if (f.formatterCfg) {
+                  res = valueFormatter(param.value, f.formatterCfg)
+                } else {
+                  res = valueFormatter(param.value, formatterItem)
+                }
+              }
             } else {
               res = param.value
             }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 75ed503bcf..c4bb774561 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -410,6 +410,54 @@
                         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                       </div>
                     </el-row>
+                    <!--group field,use xaxisExt-->
+                    <el-row
+                      v-if="view.type === 'bar-group'"
+                      class="padding-lr"
+                    >
+                      <span style="width: 80px;text-align: right;">
+                        <span>
+                          {{ $t('chart.chart_group') }}
+                          <span style="color:#F54A45;">*</span>
+                        </span>
+                        /
+                        <span>{{ $t('chart.dimension') }}</span>
+                        <el-tooltip class="item" effect="dark" placement="bottom">
+                          <div slot="content">
+                            该字段为必填项，若无需该字段，请选择基础柱状图展示；否则展示结果不理想
+                          </div>
+                          <i class="el-icon-info" style="cursor: pointer;color: #606266;" />
+                        </el-tooltip>
+                      </span>
+                      <draggable
+                        v-model="view.xaxisExt"
+                        group="drag"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-block-style"
+                        @add="addXaxisExt"
+                        @update="calcData(true)"
+                      >
+                        <transition-group class="draggable-group">
+                          <dimension-ext-item
+                            v-for="(item,index) in view.xaxisExt"
+                            :key="item.id"
+                            :param="param"
+                            :index="index"
+                            :item="item"
+                            :dimension-data="dimension"
+                            :quota-data="quota"
+                            @onDimensionItemChange="dimensionItemChange"
+                            @onDimensionItemRemove="dimensionItemRemove"
+                            @editItemFilter="showDimensionEditFilter"
+                            @onNameEdit="showRename"
+                          />
+                        </transition-group>
+                      </draggable>
+                      <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
+                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      </div>
+                    </el-row>
                     <!--yaxis-->
                     <el-row
                       v-if="view.type !=='table-info' && view.type !=='label'"
@@ -1667,10 +1715,7 @@ export default {
         view.type === 'treemap' ||
         view.type === 'liquid' ||
         view.type === 'word-cloud' ||
-        view.type === 'waterfall' ||
-        view.type === 'bar-stack' ||
-        view.type === 'line-stack' ||
-        view.type === 'bar-stack-horizontal') {
+        view.type === 'waterfall') {
         if (view.yaxis.length > 1) {
           view.yaxis.splice(1, view.yaxis.length)
         }
@@ -2310,7 +2355,7 @@ export default {
     addYaxis(e) {
       this.dragCheckType(this.view.yaxis, 'q')
       this.dragMoveDuplicate(this.view.yaxis, e)
-      if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud') && this.view.yaxis.length > 1) {
+      if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
         this.view.yaxis = [this.view.yaxis[0]]
       }
       this.calcData(true)