From f2978cb1e75e090130fb84a25afaa1e85ed6ae08 Mon Sep 17 00:00:00 2001 From: junjun Date: Tue, 15 Feb 2022 15:56:51 +0800 Subject: [PATCH] feat: S2 pivot --- frontend/src/lang/en.js | 3 +- frontend/src/lang/tw.js | 3 +- frontend/src/lang/zh.js | 3 +- frontend/src/views/chart/chart/chart.js | 7 +-- .../views/chart/chart/common/common_table.js | 47 +++++++++++++++---- .../chart/components/ChartComponentS2.vue | 2 +- .../components/shape-attr/ColorSelector.vue | 5 ++ 7 files changed, 55 insertions(+), 15 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 17460c1dcc..eec352dc43 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1023,7 +1023,8 @@ export default { table_column_custom: 'Custom', 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.' + field_error_tips: 'This field is changed(Include dimension、quota,field type,deleted),please edit again.', + table_border_color: 'Border Color' }, 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 8d27954f15..5326010421 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1023,7 +1023,8 @@ export default { table_column_custom: '自定義', chart_table_pivot: '透視表', table_pivot_row: '數據行', - field_error_tips: '該字段所對應的數據集原始字段發生變更(包括維度、指標,字段類型,字段被刪除等),建議重新編輯' + field_error_tips: '該字段所對應的數據集原始字段發生變更(包括維度、指標,字段類型,字段被刪除等),建議重新編輯', + table_border_color: '邊框顏色' }, dataset: { sheet_warn: '有多個 Sheet 頁,默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 8706d7c50d..457e03810f 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1025,7 +1025,8 @@ export default { table_column_custom: '自定义', chart_table_pivot: '透视表', table_pivot_row: '数据行', - field_error_tips: '该字段所对应的数据集原始字段发生变更(包括维度、指标,字段类型,字段被删除等),建议重新编辑' + field_error_tips: '该字段所对应的数据集原始字段发生变更(包括维度、指标,字段类型,字段被删除等),建议重新编辑', + table_border_color: '边框颜色' }, dataset: { sheet_warn: '有多个 Sheet 页,默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 1cbef872f4..0da2d37248 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -2,12 +2,13 @@ export const DEFAULT_COLOR_CASE = { value: 'default', colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], alpha: 100, - tableHeaderBgColor: '#c1d1f6', - tableItemBgColor: '#e2eafe', + tableHeaderBgColor: '#e1eaff', + tableItemBgColor: '#ffffff', tableFontColor: '#000000', tableStripe: true, dimensionColor: '#000000', - quotaColor: '#000000' + quotaColor: '#000000', + tableBorderColor: '#cfdaf4' } export const DEFAULT_SIZE = { barDefault: true, diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js index 8a98c6986a..4f5fed19ca 100644 --- a/frontend/src/views/chart/chart/common/common_table.js +++ b/frontend/src/views/chart/chart/common/common_table.js @@ -2,13 +2,22 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart' 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 theme = { background: { color: '#00000000' }, + splitLine: { + horizontalBorderColor: borderColor, + verticalBorderColor: borderColor + }, cornerCell: { cell: { - backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha) + backgroundColor: headerColor, + horizontalBorderColor: borderColor, + verticalBorderColor: borderColor }, text: { fill: DEFAULT_COLOR_CASE.tableFontColor, @@ -21,7 +30,9 @@ export function getCustomTheme(chart) { }, rowCell: { cell: { - backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha) + backgroundColor: headerColor, + horizontalBorderColor: borderColor, + verticalBorderColor: borderColor }, text: { fill: DEFAULT_COLOR_CASE.tableFontColor, @@ -34,7 +45,9 @@ export function getCustomTheme(chart) { }, colCell: { cell: { - backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha) + backgroundColor: headerColor, + horizontalBorderColor: borderColor, + verticalBorderColor: borderColor }, text: { fill: DEFAULT_COLOR_CASE.tableFontColor, @@ -47,7 +60,9 @@ export function getCustomTheme(chart) { }, dataCell: { cell: { - backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha) + backgroundColor: itemColor, + horizontalBorderColor: borderColor, + verticalBorderColor: borderColor }, text: { fill: DEFAULT_COLOR_CASE.tableFontColor, @@ -62,17 +77,33 @@ export function getCustomTheme(chart) { // color if (customAttr.color) { const c = JSON.parse(JSON.stringify(customAttr.color)) - theme.cornerCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha) + const h_c = hexColorToRGBA(c.tableHeaderBgColor, c.alpha) + const i_c = hexColorToRGBA(c.tableItemBgColor, c.alpha) + const b_c = c.tableBorderColor ? hexColorToRGBA(c.tableBorderColor, c.alpha) : hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, c.alpha) + theme.splitLine.horizontalBorderColor = b_c + theme.splitLine.verticalBorderColor = b_c + + theme.cornerCell.cell.backgroundColor = h_c + theme.cornerCell.cell.horizontalBorderColor = b_c + theme.cornerCell.cell.verticalBorderColor = b_c theme.cornerCell.bolderText.fill = c.tableFontColor theme.cornerCell.text.fill = c.tableFontColor - theme.rowCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha) + + theme.rowCell.cell.backgroundColor = h_c + theme.rowCell.cell.horizontalBorderColor = b_c + theme.rowCell.cell.verticalBorderColor = b_c theme.rowCell.bolderText.fill = c.tableFontColor theme.rowCell.text.fill = c.tableFontColor - theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha) + + theme.colCell.cell.backgroundColor = h_c + theme.colCell.cell.horizontalBorderColor = b_c + theme.colCell.cell.verticalBorderColor = b_c theme.colCell.bolderText.fill = c.tableFontColor theme.colCell.text.fill = c.tableFontColor - theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha) + theme.dataCell.cell.backgroundColor = i_c + theme.dataCell.cell.horizontalBorderColor = b_c + theme.dataCell.cell.verticalBorderColor = b_c theme.dataCell.text.fill = c.tableFontColor } // size diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index b11aca62bf..e4b4b3b1fd 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -135,7 +135,7 @@ export default { methods: { initData() { let datas = [] - if (this.chart.data) { + if (this.chart.data && this.chart.data.fields) { this.fields = JSON.parse(JSON.stringify(this.chart.data.fields)) const attr = JSON.parse(this.chart.customAttr) this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20) diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue index 9eda638590..97178ce053 100644 --- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue @@ -63,6 +63,9 @@ + + + @@ -240,6 +243,8 @@ export default { this.customColor = this.colorForm.colors[0] this.colorIndex = 0 } + + this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor } } },