From 3870b2b4d1ae196db0e61a651e6d196f7b65d35c Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Mon, 29 Jan 2024 21:51:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE-=E8=A1=A8=E6=A0=BC):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=85=A8=E5=B1=8F=E9=A2=84=E8=A7=88=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=B8=8B=E8=A1=A8=E5=A4=B4=E6=8E=92=E5=BA=8F=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=92=8C=E8=A1=A8=E5=A4=B4/=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/chart/table/table-info.js | 80 +++++++++++++++++--
 .../chart/components/ChartComponentS2.vue     | 11 +--
 2 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js
index 289f73485f..acf59ecbda 100644
--- a/core/frontend/src/views/chart/chart/table/table-info.js
+++ b/core/frontend/src/views/chart/chart/table/table-info.js
@@ -168,7 +168,15 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo,
     showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     tooltip: {
-      renderTooltip: sheet => new SortTooltip(sheet, vueCom)
+      renderTooltip: sheet => new SortTooltip(sheet, vueCom),
+      getContainer: () => containerDom,
+      adjustPosition: ({ event }) => {
+        return getTooltipPosition(event)
+      },
+      style: {
+        position: 'absolute',
+        padding: '4px 2px'
+      }
     },
     headerActionIcons: [
       {
@@ -397,7 +405,15 @@ export function baseTableNormal(s2, container, chart, action, tableData, vueCom)
     showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     tooltip: {
-      renderTooltip: sheet => new SortTooltip(sheet, vueCom)
+      renderTooltip: sheet => new SortTooltip(sheet, vueCom),
+      getContainer: () => containerDom,
+      adjustPosition: ({ event }) => {
+        return getTooltipPosition(event)
+      },
+      style: {
+        position: 'absolute',
+        padding: '4px 2px'
+      }
     },
     headerActionIcons: [
       {
@@ -669,7 +685,17 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table
     height: containerDom.offsetHeight,
     style: getSize(chart),
     totals: totalCfg,
-    conditions: getConditions(chart)
+    conditions: getConditions(chart),
+    tooltip: {
+      getContainer: () => containerDom,
+      adjustPosition: ({ event }) => {
+        return getTooltipPosition(event)
+      },
+      style: {
+        position: 'absolute',
+        padding: '4px 2px'
+      }
+    },
   }
 
   // 开始渲染
@@ -953,17 +979,27 @@ function mappingColor(value, defaultColor, field, type, filedValueMap, rowData)
 function showTooltipValue(s2Instance, event, meta) {
   const cell = s2Instance.getCell(event.target)
   const valueField = cell.getMeta().valueField
-  const value = cell.getMeta().data[valueField]
+  const cellMeta = cell.getMeta()
+  if (!cellMeta.data) {
+    return
+  }
+  const value = cellMeta.data[valueField]
   const metaObj = find(meta, m =>
     m.field === valueField
   )
-  const content = metaObj.formatter(value)
+  event.s2Instance = s2Instance
+  let content = value?.toString()
+  if (metaObj) {
+    content = metaObj.formatter(value)
+  }
   s2Instance.showTooltip({
     position: {
       x: event.clientX,
       y: event.clientY
     },
-    content
+    content,
+    meta: cellMeta,
+    event
   })
 }
 
@@ -974,12 +1010,15 @@ function showTooltip(s2Instance, event, fieldMap) {
   if (fieldMap?.[content]) {
     content = fieldMap?.[content]
   }
+  event.s2Instance = s2Instance
   s2Instance.showTooltip({
     position: {
       x: event.clientX,
       y: event.clientY
     },
-    content
+    content,
+    meta,
+    event
   })
 }
 
@@ -1029,3 +1068,30 @@ function customCalcFunc(query, data, totalCfgMap) {
     }
   }
 }
+
+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
+}
diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue
index 0c77372392..7470b841ec 100644
--- a/core/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -39,19 +39,19 @@
       <div
         v-if="chart.type === 'table-normal'"
         :id="chartId"
-        style="width: 100%;overflow: hidden;"
+        style="position: relative;width: 100%;overflow: hidden;"
         :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'"
       />
       <div
         v-if="chart.type === 'table-info'"
         :id="chartId"
-        style="width: 100%;overflow: hidden;"
+        style="position: relative;width: 100%;overflow: hidden;"
         :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')"
       />
       <div
         v-if="chart.type === 'table-pivot'"
         :id="chartId"
-        style="width: 100%;overflow: hidden;"
+        style="position: relative;width: 100%;overflow: hidden;"
         class="table-dom-normal"
       />
       <el-row
@@ -617,8 +617,3 @@ export default {
   background: transparent !important;
 }
 </style>
-<style>
-.antv-s2-tooltip-container {
-    padding: 4px 2px;
-}
-</style>