From 9c67d62096a4cfed0fcd2154fcfccf59df14a7e4 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Wed, 27 Nov 2024 13:48:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E5=AE=9E=E9=99=85?=
 =?UTF-8?q?=E6=95=B0=E5=80=BC=20#12469?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-style/components/LabelSelector.vue |  9 ++++--
 .../js/panel/charts/bar/progress-bar.ts       | 31 +++++++++++--------
 2 files changed, 24 insertions(+), 16 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 5b4e547679..4ee752de45 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
@@ -473,6 +473,9 @@ const noFullDisplay = computed(() => {
 const isGauge = computed(() => {
   return props.chart.type === 'gauge'
 })
+const isProgressBar = computed(() => {
+  return props.chart.type === 'progress-bar'
+})
 </script>
 
 <template>
@@ -940,7 +943,7 @@ const isGauge = computed(() => {
         <el-checkbox
           v-model="state.labelForm.showQuota"
           :effect="themes"
-          :disabled="checkLabelContent('showQuota')"
+          :disabled="isProgressBar ? false : checkLabelContent('showQuota')"
           size="small"
           label="quota"
           @change="changeLabelAttr('showQuota')"
@@ -1060,12 +1063,12 @@ const isGauge = computed(() => {
         <el-checkbox
           v-model="state.labelForm.showProportion"
           :effect="themes"
-          :disabled="checkLabelContent('showProportion')"
+          :disabled="isProgressBar ? false : checkLabelContent('showProportion')"
           size="small"
           label="proportion"
           @change="changeLabelAttr('showProportion')"
         >
-          {{ t('chart.proportion') }}
+          {{ isProgressBar ? t('chart.value_formatter_percent') : t('chart.proportion') }}
         </el-checkbox>
       </el-form-item>
       <div style="padding-left: 22px">
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
index 651cb62b91..85bf92afd3 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
@@ -55,7 +55,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     'background-overall-component': ['all'],
     'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
-    'label-selector': ['hPosition', 'color', 'fontSize'],
+    'label-selector': ['hPosition', 'color', 'fontSize', 'showQuota', 'showProportion'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
     'y-axis-selector': [
       'name',
@@ -249,27 +249,30 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
 
   protected configLabel(chart: Chart, options: BarOptions): BarOptions {
     const baseOptions = super.configLabel(chart, options)
-    if (!baseOptions.label) {
-      return baseOptions
+    if (!baseOptions.label) return baseOptions
+    if (!baseOptions.label.layout?.[0]) {
+      baseOptions.label.layout = [{ type: 'limit-in-canvas' }]
     }
     const { label: labelAttr } = parseJson(chart.customAttr)
     baseOptions.label.style.fill = labelAttr.color
     const label = {
       ...baseOptions.label,
       content: item => {
-        if (item.type === 'target') {
-          return ''
+        if (item.type === 'target') return ''
+        let text = ''
+        if (labelAttr.showQuota) text += valueFormatter(item.value, labelAttr.quotaLabelFormatter)
+        if (labelAttr.showProportion) {
+          let proportion = item.originalProgress.toFixed(labelAttr.reserveDecimalCount) + '%'
+          if (labelAttr.showQuota) {
+            proportion = ` (${proportion}) `
+          }
+          text += proportion
         }
-        return item.originalProgress.toFixed(2) + '%'
+        return text
       }
     }
-    if (label.position === 'top') {
-      label.position = 'right'
-    }
-    return {
-      ...baseOptions,
-      label
-    }
+    if (label.position === 'top') label.position = 'right'
+    return { ...baseOptions, label }
   }
   protected configYAxis(chart: Chart, options: BarOptions): BarOptions {
     const baseOption = super.configYAxis(chart, options)
@@ -300,6 +303,8 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     chart.customStyle.legend.show = false
     chart.customAttr.label.show = true
     chart.customAttr.label.position = 'right'
+    chart.customAttr.label.showQuota = false
+    chart.customAttr.label.showProportion = true
     return chart
   }