Merge pull request #6073 from dataease/pr@dev@fix_table_drill

feat: 表格行/列头悬停提示

core/frontend/src/lang/en.js

@@ -1489,6 +1489,8 @@ export default {
     label_content: 'Label Content',
     percent: 'Percent',
     table_index_desc: 'Index Header Name',
+    table_row_tooltip: 'Row Tooltip',
+    table_col_tooltip: 'Column Tooltip',
     total_sort: 'Total Sort',
     total_sort_none: 'None',
     total_sort_asc: 'ASC',

core/frontend/src/lang/tw.js

@@ -1488,6 +1488,8 @@ export default {
     label_content: '標籤展示',
     percent: '占比',
     table_index_desc: '表頭名稱',
+    table_row_tooltip: '行頭提示',
+    table_col_tooltip: '列頭提示',
     total_sort: '總計排序',
     total_sort_none: '無',
     total_sort_asc: '升序',

core/frontend/src/lang/zh.js

@@ -1487,6 +1487,8 @@ export default {
     label_content: '标签展示',
     percent: '占比',
     table_index_desc: '表头名称',
+    table_row_tooltip: '行头提示',
+    table_col_tooltip: '列头提示',
     total_sort: '总计排序',
     total_sort_none: '无',
     total_sort_asc: '升序',

core/frontend/src/main.js

@@ -40,6 +40,7 @@ import VueFriendlyIframe from 'vue-friendly-iframe'
 import vueToPdf from 'vue-to-pdf'
 import VueVideoPlayer from 'vue-video-player'
 import 'video.js/dist/video-js.css'
+import '@antv/s2/dist/style.min.css'
 // 控制标签宽高成比例的指令
 import proportion from 'vue-proportion-directive'
 

core/frontend/src/views/chart/chart/chart.js

@@ -86,6 +86,12 @@ export const DEFAULT_SIZE = {
   tableHeaderAlign: 'left',
   tableItemAlign: 'right',
   tableAutoBreakLine: false,
+  tableRowTooltip: {
+    show: false
+  },
+  tableColTooltip: {
+    show: false
+  },
   gaugeMinType: 'fix', // fix or dynamic
   gaugeMinField: {
     id: '',

core/frontend/src/views/chart/chart/common/common_antv.js

@@ -593,9 +593,11 @@ export function getXAxis(chart) {
             stroke: axisCfg.lineStyle.color
           }
         } : null
+        const rotate = parseInt(a.axisLabel.rotate)
         const label = a.axisLabel.show ? {
-          rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+          rotate: rotate * Math.PI / 180,
           style: {
+            textAlign: rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center',
             fill: a.axisLabel.color,
             fontSize: parseInt(a.axisLabel.fontSize)
           },

core/frontend/src/views/chart/chart/table/table-info.js

@@ -1,4 +1,4 @@
-import { TableSheet, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2'
+import { TableSheet, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE, BaseEvent } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
@@ -7,7 +7,7 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
   const containerDom = document.getElementById(container)
 
   // fields
-  const fields = chart.data.fields
+  let fields = chart.data.fields
   if (!fields || fields.length === 0) {
     if (s2) {
       s2.destroy()
@@ -17,21 +17,6 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
 
   const columns = []
   const meta = []
-
-  // add drill list
-  if (chart.drill) {
-    let drillFields = []
-    try {
-      drillFields = JSON.parse(chart.drillFields)
-    } catch (err) {
-      drillFields = JSON.parse(JSON.stringify(chart.drillFields))
-    }
-
-    const drillField = drillFields[chart.drillFilters.length]
-
-    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
-    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
-
   // 记录下钻起始字段的index
   let xAxis = []
   try {
@@ -39,68 +24,30 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
   } catch (err) {
     xAxis = JSON.parse(JSON.stringify(chart.xaxis))
   }
-    let index = 0
+  const nameMap = xAxis.reduce((pre, next) => {
-    for (let i = 0; i < xAxis.length; i++) {
+    pre[next.dataeaseName] = next
-      if (xAxis[i].id === drillFilters[0].fieldId) {
+    return pre
-        index = i
+  }, {})
-        break
+  if (chart.drill) {
+    let drillFields = []
+    try {
+      drillFields = JSON.parse(chart.drillFields)
+    } catch (err) {
+      drillFields = JSON.parse(JSON.stringify(chart.drillFields))
     }
+    // 总下钻过滤字段
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters)).map(i => i.fieldId)
+    // 当前下钻字段
+    const curDrillField = drillFields[chart.drillFilters.length]
+    drillFilters.push(curDrillField.id)
+    // 下钻入口字段的下标
+    const drillEnterFieldIndex = xAxis.findIndex(item => item.id === drillFilters[0])
+    // 移除所有下钻字段，调整当前下钻字段到下钻入口位置
+    fields = fields.filter(item => !drillFilters.includes(item.id))
+    fields.splice(drillEnterFieldIndex, 0, curDrillField)
   }
-
-    // 移除所有下钻字段
-    const removeField = []
-    for (let i = 0; i < chart.drillFilters.length; i++) {
-      const ele = chart.drillFilters[i].datasetTableField
-      removeField.push(ele.dataeaseName)
-    }
-
-    // build field
   fields.forEach(ele => {
-      if (removeField.indexOf(ele.dataeaseName) < 0) {
+    const f = nameMap[ele.dataeaseName]
-        // 用下钻字段替换当前字段
-        if (drillExp.dataeaseName === ele.dataeaseName) {
-          columns.push(drillField.dataeaseName)
-          meta.push({
-            field: drillField.dataeaseName,
-            name: drillField.name
-          })
-        } else {
-          const f = getCurrentField(chart.xaxis, ele)
-          columns.push(ele.dataeaseName)
-          meta.push({
-            field: ele.dataeaseName,
-            name: ele.name,
-            formatter: function(value) {
-              if (!f) {
-                return value
-              }
-              if (value === null || value === undefined) {
-                return value
-              }
-              if (f.groupType === 'd') {
-                return value
-              } else {
-                if (f.formatterCfg) {
-                  const v = valueFormatter(value, f.formatterCfg)
-                  return v.includes('NaN') ? value : v
-                } else {
-                  const v = valueFormatter(value, formatterItem)
-                  return v.includes('NaN') ? value : v
-                }
-              }
-            }
-          })
-        }
-      }
-    })
-
-    // 修正下钻字段的index，获取下钻位置元素添加到index位置，并删除
-    const ele = columns[columns.length - 1]
-    columns.splice(index, 0, ele)
-    columns.splice(columns.length - 1, 1)
-  } else {
-    fields.forEach(ele => {
-      const f = getCurrentField(chart.xaxis, ele)
     columns.push(ele.dataeaseName)
     meta.push({
       field: ele.dataeaseName,
@@ -126,7 +73,6 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
       }
     })
   })
-  }
   // 空值处理
   const newData = handleTableEmptyStrategy(tableData, chart)
   // data config
@@ -174,6 +120,11 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
 
   // click
   s2.on(S2Event.DATA_CELL_CLICK, action)
+  // hover
+  const size = customAttr.size
+  if (size.tableColTooltip?.show) {
+    s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event))
+  }
 
   // theme
   const customTheme = getCustomTheme(chart)
@@ -342,7 +293,11 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
 
   // click
   s2.on(S2Event.DATA_CELL_CLICK, action)
-
+  // hover
+  const size = customAttr.size
+  if (size.tableColTooltip?.show) {
+    s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event))
+  }
   // theme
   const customTheme = getCustomTheme(chart)
   s2.setThemeCfg({ theme: customTheme })
@@ -455,8 +410,8 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table
   // total config
   let totalCfg = {}
   const chartObj = JSON.parse(JSON.stringify(chart))
+  let customAttr
   if (chartObj.customAttr) {
-    let customAttr = null
     if (Object.prototype.toString.call(chartObj.customAttr) === '[object Object]') {
       customAttr = JSON.parse(JSON.stringify(chartObj.customAttr))
     } else {
@@ -528,7 +483,14 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table
   s2.on(S2Event.DATA_CELL_CLICK, action)
   s2.on(S2Event.ROW_CELL_CLICK, headerAction)
   s2.on(S2Event.COL_CELL_CLICK, headerAction)
-
+  // hover
+  const size = customAttr?.size
+  if (size?.tableRowTooltip?.show) {
+    s2.on(S2Event.ROW_CELL_HOVER, event => showTooltip(s2, event))
+  }
+  if (size?.tableColTooltip?.show) {
+    s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event))
+  }
   // theme
   const customTheme = getCustomTheme(chart)
   s2.setThemeCfg({ theme: customTheme })
@@ -740,3 +702,17 @@ function mappingColor(value, defaultColor, field, type) {
   }
   return color
 }
+
+function showTooltip(s2Instance, event) {
+  const cell = s2Instance.getCell(event.target)
+  const meta = cell.getMeta()
+  const content = meta.value
+
+  s2Instance.showTooltip({
+    position: {
+      x: event.clientX,
+      y: event.clientY
+    },
+    content
+  })
+}

core/frontend/src/views/chart/chart/util.js

@@ -62,7 +62,8 @@ export const TYPE_CONFIGS = [
         'tableItemHeight',
         'tableColumnMode',
         'showIndex',
-        'indexLabel'
+        'indexLabel',
+        'tableColTooltip'
       ],
       'title-selector-ant-v': [
         'show',
@@ -111,7 +112,8 @@ export const TYPE_CONFIGS = [
         'tableItemHeight',
         'tableColumnMode',
         'showIndex',
-        'indexLabel'
+        'indexLabel',
+        'tableColTooltip'
       ],
       'title-selector-ant-v': [
         'show',
@@ -157,7 +159,9 @@ export const TYPE_CONFIGS = [
         'tableItemAlign',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnMode'
+        'tableColumnMode',
+        'tableRowTooltip',
+        'tableColTooltip'
       ],
       'total-cfg': [
         'row',

core/frontend/src/views/chart/components/ChartComponentS2.vue

@@ -614,3 +614,8 @@ export default {
   background: transparent !important;
 }
 </style>
+<style>
+.antv-s2-tooltip-container {
+    padding: 4px 2px;
+}
+</style>

core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue

@@ -384,6 +384,28 @@
             @blur="changeBarSizeCase('indexLabel')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableRowTooltip')"
+          label-width="100px"
+          :label="$t('chart.table_row_tooltip')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.tableRowTooltip.show"
+            @change="changeBarSizeCase('tableRowTooltip')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableColTooltip')"
+          label-width="100px"
+          :label="$t('chart.table_col_tooltip')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.tableColTooltip.show"
+            @change="changeBarSizeCase('tableColTooltip')"
+          />
+        </el-form-item>
 
         <!--chart-mix-start-->
         <span v-show="showProperty('mix')">
@@ -1565,6 +1587,8 @@ export default {
 
           this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
+          this.sizeForm.tableRowTooltip = this.sizeForm.tableRowTooltip ?? DEFAULT_SIZE.tableRowTooltip
+          this.sizeForm.tableColTooltip = this.sizeForm.tableColTooltip ?? DEFAULT_SIZE.tableColTooltip
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
           if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {