From 94577858786ba8e08c60c9af0229ab92ebd5f670 Mon Sep 17 00:00:00 2001
From: wisonic <shaochuan.wu@fit2cloud.com>
Date: Sun, 29 Sep 2024 20:40:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E5=A0=86?=
 =?UTF-8?q?=E5=8F=A0=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=8C=87=E6=A0=87=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=92=8C=E6=80=BB=E8=AE=A1=E6=A0=87=E7=AD=BE=E5=88=86?=
 =?UTF-8?q?=E5=BC=80=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/models/chart/chart-attr.d.ts          |   4 +
 .../editor/editor-style/ChartStyle.vue        |   9 +-
 .../editor-style/components/LabelSelector.vue |  56 +++++----
 .../chart/components/editor/util/chart.ts     |   3 +-
 .../components/js/panel/charts/bar/bar.ts     | 107 +++++++++++-------
 5 files changed, 114 insertions(+), 65 deletions(-)

diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index a9f3d7e56f..d438f5d986 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -860,6 +860,10 @@ declare interface ChartLabelAttr {
    * 总计标签格式化设置
    */
   totalFormatter: BaseFormatter
+  /**
+   * 柱状图堆叠指标
+   */
+  showStackQuota: boolean
 }
 /**
  * 提示设置
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index a019c5976b..0a4f646fec 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -432,9 +432,12 @@ watch(
               @onChangeMiscStyleForm="onChangeMiscStyleForm"
             />
           </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
+          <collapse-switch-item
+            :themes="themes"
             v-if="showProperties('label-selector')"
+            v-model="chart.customAttr.label.show"
+            :change-model="chart.customAttr.label"
+            @modelChange="val => onLabelChange({ data: val }, 'show')"
             :title="t('chart.label')"
             name="label"
           >
@@ -446,7 +449,7 @@ watch(
               :all-fields="props.allFields"
               @onLabelChange="onLabelChange"
             />
-          </el-collapse-item>
+          </collapse-switch-item>
           <collapse-switch-item
             v-if="showProperties('tooltip-selector')"
             v-model="chart.customAttr.tooltip.show"
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 6948806b7b..ee7225db53 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
@@ -12,6 +12,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import Icon from '../../../../../../components/icon-custom/src/Icon.vue'
 import { iconFieldMap } from '@/components/icon-group/field-list'
+import { parseJson } from '../../../js/util'
 
 const { t } = useI18n()
 
@@ -242,6 +243,7 @@ const init = () => {
   if (chart.customAttr) {
     const customAttr = chart.customAttr
     if (customAttr.label) {
+      configCompat(customAttr.label)
       state.labelForm = defaultsDeep(customAttr.label, cloneDeep(COMPUTED_DEFAULT_LABEL.value))
       if (chartType.value === 'liquid' && state.labelForm.fontSize < fontSizeList.value[0].value) {
         state.labelForm.fontSize = fontSizeList.value[0].value
@@ -253,6 +255,11 @@ const init = () => {
     initPosition()
   }
 }
+const configCompat = (labelAttr: DeepPartial<ChartLabelAttr>) => {
+  if (labelAttr.showStackQuota === undefined) {
+    labelAttr.showStackQuota = labelAttr.show
+  }
+}
 const checkLabelContent = contentProp => {
   if (chartType.value === 'funnel') {
     return false
@@ -444,15 +451,6 @@ const conversionPrecision = [
 </script>
 
 <template>
-  <el-form-item class="form-item" :class="'form-item-' + themes">
-    <el-checkbox
-      size="small"
-      :effect="themes"
-      v-model="state.labelForm.show"
-      @change="changeLabelAttr('show')"
-      :label="t('chart.show')"
-    />
-  </el-form-item>
   <el-form
     ref="labelForm"
     :disabled="!state.labelForm.show"
@@ -460,6 +458,36 @@ const conversionPrecision = [
     label-position="top"
   >
     <el-row v-show="showEmpty" style="margin-bottom: 12px"> 无其他可设置的属性</el-row>
+    <div>
+      <el-form-item
+        v-if="showProperty('showStackQuota')"
+        class="form-item"
+        :class="'form-item-' + themes"
+        style="display: inline-block; margin-right: 8px"
+      >
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="state.labelForm.showStackQuota"
+          @change="changeLabelAttr('showStackQuota')"
+          :label="t('chart.quota')"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="showProperty('showTotal')"
+        class="form-item"
+        :class="'form-item-' + themes"
+        style="display: inline-block"
+      >
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="state.labelForm.showTotal"
+          @change="changeLabelAttr('showTotal')"
+          :label="t('chart.total_show')"
+        />
+      </el-form-item>
+    </div>
     <div v-if="!isGroupBar">
       <el-space>
         <el-form-item
@@ -1518,16 +1546,6 @@ const conversionPrecision = [
       </el-row>
     </div>
   </el-form>
-  <el-form-item v-if="showProperty('showTotal')" class="form-item" :class="'form-item-' + themes">
-    <el-checkbox
-      size="small"
-      :effect="themes"
-      :disabled="false"
-      v-model="state.labelForm.showTotal"
-      @change="changeLabelAttr('showTotal')"
-      :label="t('chart.total_show')"
-    />
-  </el-form-item>
 </template>
 
 <style lang="less" scoped>
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 7a5f2da107..6a3e21860c 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -339,7 +339,8 @@ export const DEFAULT_LABEL: ChartLabelAttr = {
   showTotal: false,
   totalFontSize: 12,
   totalColor: '#FFF',
-  totalFormatter: formatterItem
+  totalFormatter: formatterItem,
+  showStackQuota: false
 }
 export const DEFAULT_TOOLTIP: ChartTooltipAttr = {
   show: true,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
index 8bb686b50e..5fb3acc8ed 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
@@ -18,7 +18,11 @@ import {
   BAR_EDITOR_PROPERTY,
   BAR_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/bar/common'
-import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
+import {
+  getLabel,
+  getPadding,
+  setGradientColor
+} from '@/views/chart/components/js/panel/common/common_antv'
 import { useI18n } from '@/hooks/web/useI18n'
 import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
@@ -271,25 +275,55 @@ export class StackBar extends Bar {
       'showTotal',
       'totalColor',
       'totalFontSize',
-      'totalFormatter'
+      'totalFormatter',
+      'showStackQuota'
     ],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show']
   }
   protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
-    const baseOptions = super.configLabel(chart, options)
-    if (!baseOptions.label) {
-      return baseOptions
+    let label = getLabel(chart)
+    if (!label) {
+      return options
     }
+    options = { ...options, label }
     const { label: labelAttr } = parseJson(chart.customAttr)
-    baseOptions.label.style.fill = labelAttr.color
-    const label = {
-      ...baseOptions.label,
-      formatter: function (param: Datum) {
-        return valueFormatter(param.value, labelAttr.labelFormatter)
+    if (labelAttr.showStackQuota || labelAttr.showStackQuota === undefined) {
+      label.style.fill = labelAttr.color
+      label = {
+        ...label,
+        formatter: function (param: Datum) {
+          return valueFormatter(param.value, labelAttr.labelFormatter)
+        }
       }
+    } else {
+      label = false
+    }
+    if (labelAttr.showTotal) {
+      const formatterCfg = labelAttr.labelFormatter ?? formatterItem
+      each(groupBy(options.data, 'field'), (values, key) => {
+        const total = values.reduce((a, b) => a + b.value, 0)
+        const value = valueFormatter(total, formatterCfg)
+        if (!options.annotations) {
+          options = {
+            ...options,
+            annotations: []
+          }
+        }
+        options.annotations.push({
+          type: 'text',
+          position: [key, total],
+          content: `${value}`,
+          style: {
+            textAlign: 'center',
+            fontSize: labelAttr.fontSize,
+            fill: labelAttr.color
+          },
+          offsetY: -(parseInt(labelAttr.fontSize as unknown as string) / 2)
+        })
+      })
     }
     return {
-      ...baseOptions,
+      ...options,
       label
     }
   }
@@ -348,35 +382,6 @@ export class StackBar extends Bar {
     return options
   }
 
-  protected configTotalLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
-    const { label } = parseJson(chart.customAttr)
-    if (label.showTotal) {
-      const formatterCfg = label.labelFormatter ?? formatterItem
-      each(groupBy(options.data, 'field'), (values, key) => {
-        const total = values.reduce((a, b) => a + b.value, 0)
-        const value = valueFormatter(total, formatterCfg)
-        if (!options.annotations) {
-          options = {
-            ...options,
-            annotations: []
-          }
-        }
-        options.annotations.push({
-          type: 'text',
-          position: [key, total],
-          content: `${value}`,
-          style: {
-            textAlign: 'center',
-            fontSize: label.fontSize,
-            fill: label.color
-          },
-          offsetY: -(parseInt(label.fontSize as unknown as string) / 2)
-        })
-      })
-    }
-    return options
-  }
-
   public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
     return setUpStackSeriesColor(chart, data)
   }
@@ -394,8 +399,7 @@ export class StackBar extends Bar {
       this.configYAxis,
       this.configSlider,
       this.configAnalyse,
-      this.configData,
-      this.configTotalLabel
+      this.configData
     )(chart, options, {}, this)
   }
 
@@ -508,6 +512,25 @@ export class GroupStackBar extends StackBar {
     }
   }
 
+  protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
+    const baseOptions = super.configLabel(chart, options)
+    if (!baseOptions.label) {
+      return baseOptions
+    }
+    const { label: labelAttr } = parseJson(chart.customAttr)
+    baseOptions.label.style.fill = labelAttr.color
+    const label = {
+      ...baseOptions.label,
+      formatter: function (param: Datum) {
+        return valueFormatter(param.value, labelAttr.labelFormatter)
+      }
+    }
+    return {
+      ...baseOptions,
+      label
+    }
+  }
+
   protected configTooltip(chart: Chart, options: ColumnOptions): ColumnOptions {
     const tooltipAttr = parseJson(chart.customAttr).tooltip
     if (!tooltipAttr.show) {