feat: S2 pivot align

frontend/src/lang/en.js

@@ -1024,7 +1024,12 @@ export default {
     chart_table_pivot: 'Pivot Table',
     table_pivot_row: 'Data Row',
     field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.',
-    table_border_color: 'Border Color'
+    table_border_color: 'Border Color',
+    table_header_align: 'Header Align',
+    table_item_align: 'Body Align',
+    table_align_left: 'Left',
+    table_align_center: 'Center',
+    table_align_right: 'Right'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1024,7 +1024,12 @@ export default {
     chart_table_pivot: '透視表',
     table_pivot_row: '數據行',
     field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
-    table_border_color: '邊框顏色'
+    table_border_color: '邊框顏色',
+    table_header_align: '表頭對齊方式',
+    table_item_align: '表格對齊方式',
+    table_align_left: '左對齊',
+    table_align_center: '居中',
+    table_align_right: '右對齊'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1026,7 +1026,12 @@ export default {
     chart_table_pivot: '透视表',
     table_pivot_row: '数据行',
     field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
-    table_border_color: '边框颜色'
+    table_border_color: '边框颜色',
+    table_header_align: '表头对齐方式',
+    table_item_align: '表格对齐方式',
+    table_align_left: '左对齐',
+    table_align_center: '居中',
+    table_align_right: '右对齐'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -34,6 +34,8 @@ export const DEFAULT_SIZE = {
   tablePageSize: '20',
   tableColumnMode: 'custom',
   tableColumnWidth: 100,
+  tableHeaderAlign: 'left',
+  tableItemAlign: 'right',
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,

frontend/src/views/chart/chart/common/common_table.js

@@ -5,6 +5,9 @@ export function getCustomTheme(chart) {
   const headerColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
   const itemColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
   const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
+  const headerAlign = DEFAULT_SIZE.tableHeaderAlign
+  const itemAlign = DEFAULT_SIZE.tableItemAlign
+
   const theme = {
     background: {
       color: '#00000000'
@@ -21,11 +24,13 @@ export function getCustomTheme(chart) {
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       },
       bolderText: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       }
     },
     rowCell: {
@@ -36,11 +41,13 @@ export function getCustomTheme(chart) {
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       },
       bolderText: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       }
     },
     colCell: {
@@ -51,11 +58,13 @@ export function getCustomTheme(chart) {
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       },
       bolderText: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableTitleFontSize
+        fontSize: DEFAULT_SIZE.tableTitleFontSize,
+        textAlign: headerAlign
       }
     },
     dataCell: {
@@ -66,7 +75,8 @@ export function getCustomTheme(chart) {
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
-        fontSize: DEFAULT_SIZE.tableItemFontSize
+        fontSize: DEFAULT_SIZE.tableItemFontSize,
+        textAlign: itemAlign
       }
     }
   }
@@ -109,14 +119,26 @@ export function getCustomTheme(chart) {
     // size
     if (customAttr.size) {
       const s = JSON.parse(JSON.stringify(customAttr.size))
+      const h_a = s.tableHeaderAlign ? s.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
+      const i_a = s.tableItemAlign ? s.tableItemAlign : DEFAULT_SIZE.tableItemAlign
+
       theme.cornerCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.cornerCell.bolderText.textAlign = h_a
       theme.cornerCell.text.fontSize = parseInt(s.tableTitleFontSize)
+      theme.cornerCell.text.textAlign = h_a
+
       theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.rowCell.bolderText.textAlign = h_a
       theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
+      theme.rowCell.text.textAlign = h_a
+
       theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.colCell.bolderText.textAlign = h_a
       theme.colCell.text.fontSize = parseInt(s.tableTitleFontSize)
+      theme.colCell.text.textAlign = h_a
 
       theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+      theme.dataCell.text.textAlign = i_a
     }
   }
 

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -101,6 +101,16 @@
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item :label="$t('chart.table_header_align')" class="form-item">
+          <el-select v-model="sizeForm.tableHeaderAlign" :placeholder="$t('chart.table_header_align')" @change="changeBarSizeCase">
+            <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_item_align')" class="form-item">
+          <el-select v-model="sizeForm.tableItemAlign" :placeholder="$t('chart.table_item_align')" @change="changeBarSizeCase">
+            <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
@@ -302,7 +312,12 @@ export default {
         { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
         { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
       ],
-      fontSize: []
+      fontSize: [],
+      alignOptions: [
+        { name: this.$t('chart.table_align_left'), value: 'left' },
+        { name: this.$t('chart.table_align_center'), value: 'center' },
+        { name: this.$t('chart.table_align_right'), value: 'right' }
+      ]
     }
   },
   watch: {
@@ -344,6 +359,9 @@ export default {
 
           this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
           this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
+
+          this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
+          this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
         }
       }
     },