center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: S2 pivot align

Browse Source
This commit is contained in:
junjun 2022-02-16 16:55:00 +08:00
parent 09188e9dfe
commit bddb3bc605
6 changed files with 68 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lang/en.js
View File

@ -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',

7
frontend/src/lang/tw.js
View File

@ -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 頁，默認抽取第一個',

7
frontend/src/lang/zh.js
View File

@ -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 页，默认抽取第一个',

2
frontend/src/views/chart/chart/chart.js
View File

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

36
frontend/src/views/chart/chart/common/common_table.js
View File

@ -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
}
}

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

@ -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
}
}
},