From 555de2530802f8c0ee1a873ae87c3434a053b55d Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Tue, 7 Jun 2022 15:24:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=B4=E5=80=BC=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/XAxisSelector.vue         | 34 ++++++++++++++++++-
 .../component-style/XAxisSelectorAntV.vue     | 34 ++++++++++++++++++-
 .../component-style/YAxisExtSelector.vue      | 34 ++++++++++++++++++-
 .../component-style/YAxisExtSelectorAntV.vue  | 34 ++++++++++++++++++-
 .../component-style/YAxisSelector.vue         | 34 ++++++++++++++++++-
 .../component-style/YAxisSelectorAntV.vue     | 34 ++++++++++++++++++-
 6 files changed, 198 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 8c634d4c5a..3f0f9365b7 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -88,6 +88,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
@@ -101,6 +127,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'XAxisSelector',
@@ -126,7 +153,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -161,6 +190,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
+          }
         }
       }
     },
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
index ae1c84dee0..5804cfc1f5 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -81,6 +81,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeXAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeXAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeXAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeXAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeXAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
         </div>
       </el-form>
@@ -90,6 +116,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'XAxisSelectorAntV',
@@ -115,7 +142,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -150,6 +179,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
+          }
         }
       }
     },
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
index 7e36780222..8aeaffd03a 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -88,6 +88,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && !chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.content_formatter')" class="form-item">
@@ -101,6 +127,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'YAxisExtSelector',
@@ -126,7 +153,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -164,6 +193,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
+          }
         }
       }
     },
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
index c63422484a..6138aca3fb 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -81,6 +81,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && !chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
         </div>
       </el-form>
@@ -90,6 +116,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'YAxisExtSelectorAntV',
@@ -115,7 +142,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -153,6 +182,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
+          }
         }
       }
     },
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index a83824d06f..91ed27bff4 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -88,6 +88,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && !chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
@@ -101,6 +127,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'YAxisSelector',
@@ -126,7 +153,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -161,6 +190,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
+          }
         }
       }
     },
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
index 64493f0a15..bef9115901 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -92,6 +92,32 @@
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
+
+            <span v-show="chart.type && !chart.type.includes('horizontal')">
+              <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.type" @change="changeYAxisStyle">
+                  <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+                <el-input-number v-model="axisForm.axisLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item v-show="axisForm.axisLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+                <el-select v-model="axisForm.axisLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeYAxisStyle">
+                  <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+                <el-input v-model="axisForm.axisLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeYAxisStyle" />
+              </el-form-item>
+
+              <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+                <el-checkbox v-model="axisForm.axisLabelFormatter.thousandSeparator" @change="changeYAxisStyle" />
+              </el-form-item>
+            </span>
           </span>
         </div>
       </el-form>
@@ -101,6 +127,7 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'YAxisSelectorAntV',
@@ -126,7 +153,9 @@ export default {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
       fontSize: [],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -161,6 +190,9 @@ export default {
           if (!this.axisForm.axisValue) {
             this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
           }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
+          }
         }
       }
     },