Merge pull request #13655 from dataease/prdev-v2@chart-table-empty-style

feat(图表): 明细表、汇总表无数据时，显示暂无数据 #13037

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<TableSheet> {
         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<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    // 空数据时表格样式
+    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

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<TableSheet> {
         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<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

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)
+    }
+  })
+}