From e275e533f56c1951f4fa58e0541298ce83015f87 Mon Sep 17 00:00:00 2001 From: junjun Date: Wed, 9 Mar 2022 15:45:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=8F=E8=A7=86=E8=A1=A8=E5=90=88?= =?UTF-8?q?=E8=AE=A1=E3=80=81=E5=B0=8F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 13 +- frontend/src/lang/tw.js | 13 +- frontend/src/lang/zh.js | 13 +- frontend/src/views/chart/chart/chart.js | 32 +++ .../src/views/chart/chart/table/table-info.js | 23 ++- .../chart/components/shape-attr/TotalCfg.vue | 182 ++++++++++++++++++ frontend/src/views/chart/group/Group.vue | 6 +- frontend/src/views/chart/view/ChartEdit.vue | 23 ++- 8 files changed, 298 insertions(+), 7 deletions(-) create mode 100644 frontend/src/views/chart/components/shape-attr/TotalCfg.vue diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 2e47b391a2..2ec164e125 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1044,7 +1044,18 @@ export default { value_error: 'Value illegal', threshold: 'Threshold', threshold_range: 'Range', - gauge_threshold_format_error: 'Format Error' + gauge_threshold_format_error: 'Format Error', + total_cfg: 'Total Config', + col_cfg: 'Column', + row_cfg: 'Row', + total_show: 'Total', + total_position: 'Position', + total_label: 'Alias', + sub_total_show: 'Sub Total', + total_pos_top: 'Top', + total_pos_bottom: 'Bottom', + total_pos_left: 'Left', + total_pos_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 932281f454..aeb0040471 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1044,7 +1044,18 @@ export default { value_error: '值必須為數值', threshold: '閾值', threshold_range: '閾值區間', - gauge_threshold_format_error: '格式錯誤' + gauge_threshold_format_error: '格式錯誤', + total_cfg: '總計配置', + col_cfg: '列匯總', + row_cfg: '行匯總', + total_show: '總計', + total_position: '位置', + total_label: '別名', + sub_total_show: '小計', + total_pos_top: '頂部', + total_pos_bottom: '底部', + total_pos_left: '左側', + total_pos_right: '右側' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index d1b0837762..05f78469f0 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1047,7 +1047,18 @@ export default { value_error: '值必须为数值', threshold: '阈值', threshold_range: '阈值区间', - gauge_threshold_format_error: '格式错误' + gauge_threshold_format_error: '格式错误', + total_cfg: '总计配置', + col_cfg: '列汇总', + row_cfg: '行汇总', + total_show: '总计', + total_position: '位置', + total_label: '别名', + sub_total_show: '小计', + total_pos_top: '顶部', + total_pos_bottom: '底部', + total_pos_left: '左侧', + total_pos_right: '右侧' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 1640bb5963..5da618a310 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -78,6 +78,38 @@ export const DEFAULT_TOOLTIP = { }, formatter: '' } +export const DEFAULT_TOTAL = { + row: { + showGrandTotals: true, + showSubTotals: true, + reverseLayout: false, + reverseSubLayout: false, + label: '总计', + subLabel: '小计', + subTotalsDimensions: [], + calcTotals: { + aggregation: 'SUM' + }, + calcSubTotals: { + aggregation: 'SUM' + } + }, + col: { + showGrandTotals: true, + showSubTotals: true, + reverseLayout: false, + reverseSubLayout: false, + label: '总计', + subLabel: '小计', + subTotalsDimensions: [], + calcTotals: { + aggregation: 'SUM' + }, + calcSubTotals: { + aggregation: 'SUM' + } + } +} export const DEFAULT_TITLE_STYLE = { show: true, fontSize: '18', diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js index dd6b000952..d3e4f9ec90 100644 --- a/frontend/src/views/chart/chart/table/table-info.js +++ b/frontend/src/views/chart/chart/table/table-info.js @@ -1,5 +1,6 @@ import { TableSheet, S2Event, PivotSheet } from '@antv/s2' import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table' +import { DEFAULT_TOTAL } from '@/views/chart/chart/chart' export function baseTableInfo(s2, container, chart, action, tableData) { const containerDom = document.getElementById(container) @@ -281,11 +282,31 @@ export function baseTablePivot(s2, container, chart, action, tableData) { data: tableData } + // total config + let totalCfg = {} + const chartObj = JSON.parse(JSON.stringify(chart)) + if (chartObj.customAttr) { + let customAttr = null + if (Object.prototype.toString.call(chartObj.customAttr) === '[object Object]') { + customAttr = JSON.parse(JSON.stringify(chartObj.customAttr)) + } else { + customAttr = JSON.parse(chartObj.customAttr) + } + if (customAttr.totalCfg) { + totalCfg = customAttr.totalCfg + } else { + totalCfg = JSON.parse(JSON.stringify(DEFAULT_TOTAL)) + } + } + totalCfg.row.subTotalsDimensions = r + totalCfg.col.subTotalsDimensions = c + // options const s2Options = { width: containerDom.offsetWidth, height: containerDom.offsetHeight, - style: getSize(chart) + style: getSize(chart), + totals: totalCfg } // 开始渲染 diff --git a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue new file mode 100644 index 0000000000..48e577833b --- /dev/null +++ b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue @@ -0,0 +1,182 @@ + + + + + diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 82356bd688..ecf1bca916 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -310,7 +310,8 @@ import { DEFAULT_BACKGROUND_COLOR, DEFAULT_SPLIT, DEFAULT_FUNCTION_CFG, - DEFAULT_THRESHOLD + DEFAULT_THRESHOLD, + DEFAULT_TOTAL } from '../chart/chart' export default { @@ -755,7 +756,8 @@ export default { tableColor: DEFAULT_COLOR_CASE, size: DEFAULT_SIZE, label: DEFAULT_LABEL, - tooltip: DEFAULT_TOOLTIP + tooltip: DEFAULT_TOOLTIP, + totalCfg: DEFAULT_TOTAL }) view.customStyle = JSON.stringify({ text: DEFAULT_TITLE_STYLE, diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 6505331bfb..d1a52535a9 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -676,6 +676,18 @@ @onTooltipChange="onTooltipChange" /> + + + @@ -1046,6 +1058,7 @@ import { DEFAULT_THRESHOLD, DEFAULT_TITLE_STYLE, DEFAULT_TOOLTIP, + DEFAULT_TOTAL, DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE @@ -1089,9 +1102,11 @@ import PluginCom from '@/views/system/plugin/PluginCom' import FunctionCfg from '@/views/chart/components/senior/FunctionCfg' import AssistLine from '@/views/chart/components/senior/AssistLine' import Threshold from '@/views/chart/components/senior/Threshold' +import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg' export default { name: 'ChartEdit', components: { + TotalCfg, Threshold, AssistLine, FunctionCfg, @@ -1167,7 +1182,8 @@ export default { color: DEFAULT_COLOR_CASE, size: DEFAULT_SIZE, label: DEFAULT_LABEL, - tooltip: DEFAULT_TOOLTIP + tooltip: DEFAULT_TOOLTIP, + totalCfg: DEFAULT_TOTAL }, customStyle: { text: DEFAULT_TITLE_STYLE, @@ -1728,6 +1744,11 @@ export default { this.calcStyle() }, + onTotalCfgChange(val) { + this.view.customAttr.totalCfg = val + this.calcStyle() + }, + onChangeXAxisForm(val) { this.view.customStyle.xAxis = val this.calcStyle()