From bddb3bc6059a3efb6f608ed299feea48219a6689 Mon Sep 17 00:00:00 2001 From: junjun Date: Wed, 16 Feb 2022 16:55:00 +0800 Subject: [PATCH] feat: S2 pivot align --- frontend/src/lang/en.js | 7 +++- frontend/src/lang/tw.js | 7 +++- frontend/src/lang/zh.js | 7 +++- frontend/src/views/chart/chart/chart.js | 2 ++ .../views/chart/chart/common/common_table.js | 36 +++++++++++++++---- .../shape-attr/SizeSelectorAntV.vue | 20 ++++++++++- 6 files changed, 68 insertions(+), 11 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index eec352dc43..5b0dee7a33 100644 --- a/frontend/src/lang/en.js +++ b/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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 5326010421..9a027ee2a9 100644 --- a/frontend/src/lang/tw.js +++ b/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 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 457e03810f..6c56cafdc1 100644 --- a/frontend/src/lang/zh.js +++ b/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 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 0da2d37248..df770bd6e8 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/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, diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js index 4f5fed19ca..4ffed26eeb 100644 --- a/frontend/src/views/chart/chart/common/common_table.js +++ b/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 } } diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index ccc4dbd7d1..07330a78f6 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -101,6 +101,16 @@ + + + + + + + + + + @@ -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 } } },