From 4a975f10c4dbfc6641dee24ac7bcbaaf2be5ea02 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 4 Jun 2024 19:07:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8-=E5=AF=B9=E7=A7=B0?=
 =?UTF-8?q?=E6=9D=A1=E5=BD=A2=E5=9B=BE):=20=E4=BF=AE=E5=A4=8D=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E5=8F=8A=E6=97=A0=E6=B3=95=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-style/components/LabelSelector.vue | 34 +++++++++++++++-
 .../js/panel/charts/bar/bidirectional-bar.ts  | 40 ++++++++++++++++++-
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 72ebce865e..5cd8005491 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -220,7 +220,37 @@ const isBarRangeTime = computed<boolean>(() => {
   }
   return false
 })
+watch(
+  () => props.chart.customAttr.basicStyle.layout,
+  () => {
+    const layout = props.chart.customAttr.basicStyle.layout
+    if (layout === 'horizontal') {
+      if (state?.labelForm?.position === 'top') {
+        state.labelForm.position = 'right'
+      }
+      if (state?.labelForm?.position === 'bottom') {
+        state.labelForm.position = 'left'
+      }
+    }
+    if (layout === 'vertical') {
+      if (state?.labelForm?.position === 'left') {
+        state.labelForm.position = 'bottom'
+      }
+      if (state?.labelForm?.position === 'right') {
+        state.labelForm.position = 'top'
+      }
+    }
+    changeLabelAttr('position')
+  },
+  { deep: true }
+)
 
+const isBarBidirectionalAndVertical = computed(() => {
+  if (props.chart.type !== 'bidirectional-bar') {
+    return true
+  }
+  return props.chart.customAttr.basicStyle.layout === 'vertical'
+})
 onMounted(() => {
   init()
 })
@@ -298,7 +328,7 @@ onMounted(() => {
       </el-select>
     </el-form-item>
     <el-form-item
-      v-if="showProperty('hPosition')"
+      v-if="showProperty('hPosition') && !isBarBidirectionalAndVertical"
       :label="t('chart.label_position')"
       class="form-item"
       :class="'form-item-' + themes"
@@ -319,7 +349,7 @@ onMounted(() => {
       </el-select>
     </el-form-item>
     <el-form-item
-      v-if="showProperty('vPosition')"
+      v-if="showProperty('vPosition') && isBarBidirectionalAndVertical"
       :label="t('chart.label_position')"
       class="form-item"
       :class="'form-item-' + themes"
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
index 0a9c5cc4b0..f5ce555ec9 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
@@ -87,7 +87,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
     ],
     'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
     'function-cfg': ['emptyDataStrategy'],
-    'label-selector': ['hPosition', 'seriesLabelFormatter'],
+    'label-selector': ['hPosition', 'vPosition', 'seriesLabelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show']
   }
 
@@ -386,6 +386,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       ...chart.customAttr.label,
       position: 'right'
     }
+    chart.customAttr.basicStyle.layout = 'horizontal'
     return chart
   }
 
@@ -399,6 +400,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       return pre
     }, {})
     let customAttr: DeepPartial<ChartAttr>
+    const layoutHorizontal = options.layout === 'horizontal'
     if (chart.customAttr) {
       customAttr = parseJson(chart.customAttr)
       // label
@@ -434,7 +436,33 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
               } else {
                 res = valueFormatter(value, l.labelFormatter)
               }
-              return res
+              const group = new G2PlotChartView.engine.Group({})
+              const isValue = param['series-field-key'] === 'value'
+              const textAlign = isValue && layoutHorizontal ? 'end' : 'start'
+              const isMiddle = label.position === 'middle'
+              group.addShape({
+                type: 'text',
+                attrs: {
+                  x:
+                    isValue && layoutHorizontal && !isMiddle
+                      ? -6
+                      : !isValue && layoutHorizontal && !isMiddle
+                      ? 6
+                      : 0,
+                  y:
+                    isValue && !layoutHorizontal && !isMiddle
+                      ? -8
+                      : !isValue && !layoutHorizontal && !isMiddle
+                      ? 8
+                      : 0,
+                  text: res,
+                  textAlign: label.position === 'middle' ? 'start' : textAlign,
+                  textBaseline: 'top',
+                  fontSize: labelCfg.fontSize,
+                  fill: labelCfg.color
+                }
+              })
+              return group
             }
           }
         } else {
@@ -442,6 +470,14 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
         }
       }
     }
+    if (!layoutHorizontal) {
+      if (label.position === 'left') {
+        label.position = 'bottom'
+      }
+      if (label.position === 'right') {
+        label.position = 'top'
+      }
+    }
     return { ...options, label }
   }