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 883bf18b59..27c175c412 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 @@ -4,6 +4,7 @@ import { S2Event, S2Options, S2Theme, + ScrollbarPositionType, TableColCell, TableSheet, ViewMeta @@ -22,7 +23,8 @@ import { calculateHeaderHeight, SortTooltip, configSummaryRow, - summaryRowStyle + summaryRowStyle, + configEmptyDataStyle } from '@/views/chart/components/js/panel/common/common_table' const { t } = useI18n() @@ -167,7 +169,10 @@ export class TableInfo extends S2ChartView { renderTooltip: sheet => new SortTooltip(sheet) }, interaction: { - hoverHighlight: !(basicStyle.showHoverStyle === false) + hoverHighlight: !(basicStyle.showHoverStyle === false), + scrollbarPosition: newData.length + ? ScrollbarPositionType.CONTENT + : ScrollbarPositionType.CANVAS } } s2Options.style = this.configStyle(chart, s2DataConfig) @@ -335,6 +340,8 @@ export class TableInfo extends S2ChartView { ev.colsHierarchy.width = containerWidth }) } + // 空数据时表格样式 + configEmptyDataStyle(newChart, basicStyle, newData, container) // click newChart.on(S2Event.DATA_CELL_CLICK, ev => { const cell = newChart.getCell(ev.target) 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 8e6e56ee2a..66bc21ce3a 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 @@ -1,6 +1,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter' import { + configEmptyDataStyle, configSummaryRow, copyContent, SortTooltip, @@ -13,6 +14,7 @@ import { S2DataConfig, S2Event, S2Options, + ScrollbarPositionType, TableColCell, TableSheet, ViewMeta @@ -145,7 +147,10 @@ export class TableNormal extends S2ChartView { renderTooltip: sheet => new SortTooltip(sheet) }, interaction: { - hoverHighlight: !(basicStyle.showHoverStyle === false) + hoverHighlight: !(basicStyle.showHoverStyle === false), + scrollbarPosition: newData.length + ? ScrollbarPositionType.CONTENT + : ScrollbarPositionType.CANVAS } } // 列宽设置 @@ -242,6 +247,7 @@ export class TableNormal extends S2ChartView { ev.colsHierarchy.width = containerWidth }) } + configEmptyDataStyle(newChart, basicStyle, newData, container) // click newChart.on(S2Event.DATA_CELL_CLICK, ev => { const cell = newChart.getCell(ev.target) 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 de6d569534..e73919e415 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 @@ -1671,6 +1671,7 @@ const drawTextShape = (cell, isHeader) => { * @param layoutResult */ export const calculateHeaderHeight = (info, newChart, tableHeader, basicStyle, layoutResult) => { + if (tableHeader.showTableHeader === false ) return const ev = layoutResult || newChart.facet.layoutResult const maxLines = basicStyle.maxLines ?? 1 const textStyle = { ...newChart.theme.cornerCell.text } @@ -1763,7 +1764,7 @@ const getWrapTextHeight = (wrapText, textStyle, spreadsheet, maxLines) => { * @param showSummary */ export const configSummaryRow = (chart, s2Options, newData, tableHeader, basicStyle, showSummary) =>{ - if (!showSummary) return + if (!showSummary || !newData.length) return // 设置汇总行高度和表头一致 const heightByField = {} heightByField[newData.length] = tableHeader.tableTitleHeight @@ -1821,10 +1822,13 @@ export const configSummaryRow = (chart, s2Options, newData, tableHeader, basicSt * @param showSummary */ export const summaryRowStyle = (newChart, newData, tableCell, tableHeader, showSummary) => { - if (!showSummary) return + if (!showSummary || !newData.length) return newChart.on(S2Event.LAYOUT_BEFORE_RENDER, () => { + const showHeader = tableHeader.showTableHeader === true + // 不显示表头时,减少一个表头的高度 + const headerAndSummaryHeight = showHeader ? 2 : 1 const totalHeight = - tableHeader.tableTitleHeight * 2 + tableCell.tableItemHeight * (newData.length - 1) + tableHeader.tableTitleHeight * headerAndSummaryHeight + tableCell.tableItemHeight * (newData.length - 1) if (totalHeight < newChart.options.height) { // 6 是阴影高度 newChart.options.height = @@ -1844,3 +1848,41 @@ export class SummaryCell extends CustomDataCell { return { backgroundColor, backgroundColorOpacity } } } + +/** + * 配置空数据样式 + * @param newChart + * @param basicStyle + * @param newData + * @param container + */ +export const configEmptyDataStyle = (newChart, basicStyle, newData, container) => { + /** + * 辅助函数:移除空数据dom + */ + const removeEmptyDom = () => { + const emptyElement = document.getElementById(container + '_empty') + if (emptyElement) { + emptyElement.parentElement.removeChild(emptyElement) + } + } + removeEmptyDom() + if (newData.length) return + newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev) => { + removeEmptyDom() + if (!newData.length) { + const emptyDom = document.createElement('div') + const left = Math.min(newChart.options.width, ev.colsHierarchy.width) / 2 - 32 + emptyDom.id = container + '_empty' + emptyDom.textContent = t('data_set.no_data') + emptyDom.setAttribute( + 'style', + `position: absolute; + left: ${left}px; + top: 50%;` + ) + const parent = document.getElementById(container) + parent.insertBefore(emptyDom, parent.firstChild) + } + }) +}