Merge pull request #8776 from dataease/pr@dev-v2@fix_public_link_table_header_sort

fix(图表): 修复表格排序按钮在公共链接点击无效 #8543

core/core-frontend/src/pages/index/main.ts

@@ -3,6 +3,7 @@ import '../../assets/font/index.css'
 import '@/style/index.less'
 import '@/plugins/svg-icon'
 import 'normalize.css/normalize.css'
+import '@antv/s2/dist/style.min.css'
 import App from './App.vue'
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'

core/core-frontend/src/pages/lib/main.ts

@@ -1,6 +1,7 @@
 import '@/style/index.less'
 import '@/plugins/svg-icon'
 import 'normalize.css/normalize.css'
+import '@antv/s2/dist/style.min.css'
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'
 import { setupElementPlus } from '@/plugins/element-plus'

core/core-frontend/src/pages/mobile/main.ts

@@ -3,6 +3,7 @@ import '../../assets/font/index.css'
 import '@/style/index.less'
 import '@/plugins/svg-icon'
 import 'normalize.css/normalize.css'
+import '@antv/s2/dist/style.min.css'
 import App from './App.vue'
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'

core/core-frontend/src/pages/panel/main.ts

@@ -58,6 +58,7 @@ import '../../assets/font/index.css'
 import '@/style/index.less'
 import '@/plugins/svg-icon'
 import 'normalize.css/normalize.css'
+import '@antv/s2/dist/style.min.css'
 import AppElement from './App.vue'
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -101,7 +101,10 @@ export class TableInfo extends S2ChartView<TableSheet> {
       height: containerDom.offsetHeight,
       showSeriesNumber: customAttr.tableHeader.showIndex,
       style: this.configStyle(chart),
-      conditions: this.configConditions(chart)
+      conditions: this.configConditions(chart),
+      tooltip: {
+        getContainer: () => containerDom
+      }
     }
     // 开启序号之后，第一列就是序号列，修改 label 即可
     if (s2Options.showSeriesNumber) {

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts

@@ -102,7 +102,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
       height: containerDom.offsetHeight,
       showSeriesNumber: customAttr.tableHeader.showIndex,
       style: this.configStyle(chart),
-      conditions: this.configConditions(chart)
+      conditions: this.configConditions(chart),
+      tooltip: {
+        getContainer: () => containerDom
+      }
     }
     // 开启序号之后，第一列就是序号列，修改 label 即可
     if (s2Options.showSeriesNumber) {

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -632,7 +632,8 @@ class SortTooltip extends BaseTooltip {
         left: `${this.position?.x}px`,
         top: `${this.position?.y}px`,
         pointerEvents: enterable ? 'all' : 'none',
-        zIndex: 9999
+        zIndex: 9999,
+        position: 'absolute'
       },
       visible: true
     })
@@ -645,6 +646,9 @@ export function configTooltip(option: S2Options) {
   }
   option.tooltip = {
     ...option.tooltip,
+    adjustPosition: ({ event }) => {
+      return getTooltipPosition(event)
+    },
     renderTooltip: sheet => new SortTooltip(sheet)
   }
   option.headerActionIcons = [
@@ -706,3 +710,30 @@ export function copyContent(s2Instance, event, fieldMeta) {
     copyString(content, true)
   }
 }
+
+function getTooltipPosition(event) {
+  const s2Instance = event.s2Instance
+  const { x, y } = event
+  const result = { x: x + 15, y: y + 10 }
+  if (!s2Instance) {
+    return result
+  }
+  const { height, width } = s2Instance.getCanvasElement().getBoundingClientRect()
+  const { offsetHeight, offsetWidth } = s2Instance.tooltip.getContainer()
+  if (offsetWidth > width) {
+    result.x = 0
+  }
+  if (offsetHeight > height) {
+    result.y = 0
+  }
+  if (!(result.x || result.y)) {
+    return result
+  }
+  if (result.x && result.x + offsetWidth > width) {
+    result.x -= result.x + offsetWidth - width
+  }
+  if (result.y && result.y + offsetHeight > height) {
+    result.y -= offsetHeight + 15
+  }
+  return result
+}

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

@@ -404,7 +404,7 @@ const autoHeightStyle = computed(() => {
       @trackClick="trackClick"
     />
     <div v-if="!isError" class="canvas-content">
-      <div style="height: 100%" :id="containerId"></div>
+      <div style="position: relative; height: 100%" :id="containerId"></div>
     </div>
     <el-row :style="autoHeightStyle" v-if="showPage && !isError">
       <div :style="autoStyle" class="table-page-info">