diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 0e89056ecf..77b4fa2582 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -642,6 +642,7 @@ export default { table_header_font_color: '表头字体', table_item_font_color: '表格字体', table_show_index: '显示序号', + table_header_sort: '开启表头排序', stripe: '斑马纹', start_angle: '起始角度', end_angle: '结束角度', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index c7101a3a17..b1ef1c42ac 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -221,6 +221,10 @@ declare interface ChartTableHeaderAttr { * 序号表头名称 */ indexLabel: string + /** + * 表头排序开关 + */ + tableHeaderSort: boolean } /** * 单元格属性 diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue index 75a204bdb5..3e36bd1a51 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue @@ -236,6 +236,21 @@ onMounted(() => { @blur="changeTableHeader('indexLabel')" /> + + + {{ t('chart.table_header_sort') }} + + diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 25f252ee40..67adf97127 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -329,7 +329,8 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = { tableHeaderBgColor: '#6D9A49', tableHeaderFontColor: '#000000', tableTitleFontSize: 12, - tableTitleHeight: 36 + tableTitleHeight: 36, + tableHeaderSort: false } export const DEFAULT_TABLE_CELL: ChartTableCellAttr = { tableFontColor: '#000000', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts index 6ec3eb7d94..1db0b12ea3 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts @@ -16,6 +16,10 @@ export class TableInfo extends S2ChartView { properties = TABLE_EDITOR_PROPERTY propertyInner = { ...TABLE_EDITOR_PROPERTY_INNER, + 'table-header-selector': [ + ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'], + 'tableHeaderSort' + ], 'basic-style-selector': [ 'tableColumnMode', 'tableBorderColor', @@ -131,6 +135,8 @@ export class TableInfo extends S2ChartView { } // tooltip this.configTooltip(s2Options) + // header interaction + this.configHeaderInteraction(chart, s2Options) // 开始渲染 const newChart = new TableSheet(containerDom, s2DataConfig, s2Options) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts index 3097594107..deb547c9c9 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts @@ -13,7 +13,13 @@ const { t } = useI18n() */ export class TableNormal extends S2ChartView { properties = TABLE_EDITOR_PROPERTY - propertyInner = TABLE_EDITOR_PROPERTY_INNER + propertyInner = { + ...TABLE_EDITOR_PROPERTY_INNER, + 'table-header-selector': [ + ...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'], + 'tableHeaderSort' + ] + } axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter'] axisConfig: AxisConfig = { xAxis: { @@ -125,6 +131,8 @@ export class TableNormal extends S2ChartView { } // tooltip this.configTooltip(s2Options) + // header interaction + this.configHeaderInteraction(chart, s2Options) // 开始渲染 const newChart = new TableSheet(containerDom, s2DataConfig, s2Options) diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index bacb5afb18..fad100cce5 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -639,21 +639,53 @@ class SortTooltip extends BaseTooltip { }) } } -export function configTooltip(option: S2Options) { +const SORT_DEFAULT = + '' +const SORT_UP = + '' +const SORT_DOWN = + '' + +function svg2Base64(svg) { + return `data:image/svg+xml;charset=utf-8;base64,${btoa(svg)}` +} + +export function configHeaderInteraction(chart: Chart, option: S2Options) { + const { tableHeaderFontColor, tableHeaderSort } = parseJson(chart.customAttr).tableHeader + if (!tableHeaderSort) { + return + } + const iconColor = tableHeaderFontColor ?? '#666' + const sortDefault = svg2Base64(SORT_DEFAULT.replace('{fill}', iconColor)) + const sortUp = svg2Base64(SORT_UP.replace('{fill}', iconColor)) + const sortDown = svg2Base64(SORT_DOWN.replace('{fill}', iconColor)) + // 防止缓存 + const randomSuffix = Math.random() const sortIconMap = { - asc: 'SortUp', - desc: 'SortDown' + asc: `customSortUp${randomSuffix}`, + desc: `customSortDown${randomSuffix}` } - option.tooltip = { - ...option.tooltip, - adjustPosition: ({ event }) => { - return getTooltipPosition(event) + option.customSVGIcons = [ + { + name: `customSortDefault${randomSuffix}`, + svg: sortDefault }, - renderTooltip: sheet => new SortTooltip(sheet) - } + { + name: `customSortUp${randomSuffix}`, + svg: sortUp + }, + { + name: `customSortDown${randomSuffix}`, + svg: sortDown + } + ] option.headerActionIcons = [ { - iconNames: ['GroupAsc', 'SortUp', 'SortDown'], + iconNames: [ + `customSortDefault${randomSuffix}`, + `customSortUp${randomSuffix}`, + `customSortDown${randomSuffix}` + ], belongsCell: 'colCell', displayCondition: (meta, iconName) => { if (meta.field === SERIES_NUMBER_FIELD) { @@ -664,7 +696,7 @@ export function configTooltip(option: S2Options) { if (sortType) { return iconName === sortIconMap[sortType] } - return iconName === 'GroupAsc' + return iconName === `customSortDefault${randomSuffix}` }, onClick: props => { const { meta, event } = props @@ -681,6 +713,16 @@ export function configTooltip(option: S2Options) { ] } +export function configTooltip(option: S2Options) { + option.tooltip = { + ...option.tooltip, + adjustPosition: ({ event }) => { + return getTooltipPosition(event) + }, + renderTooltip: sheet => new SortTooltip(sheet) + } +} + export function copyContent(s2Instance, event, fieldMeta) { event.preventDefault() const cell = s2Instance.getCell(event.target) diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts index 73c91e30e2..deba6536b0 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts @@ -5,6 +5,7 @@ import { } from '@/views/chart/components/js/panel/types' import { S2Theme, SpreadSheet, Style, S2Options } from '@antv/s2' import { + configHeaderInteraction, configTooltip, getConditions, getCustomTheme, @@ -44,6 +45,10 @@ export abstract class S2ChartView

extends AntVAbstractCha configTooltip(option) } + protected configHeaderInteraction(chart: Chart, option: S2Options) { + configHeaderInteraction(chart, option) + } + protected configConditions(chart: Chart) { return getConditions(chart) }