refactor(图表): 统一表格提示开关

2024-05-30 20:02:22 +08:00 · 2024-05-30 20:02:22 +08:00 · 01f13d4622
commit 01f13d4622
parent 980a728818
9 changed files with 37 additions and 73 deletions
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@ -279,10 +279,12 @@ declare interface ChartTableHeaderAttr {
   */
  tableHeaderSort: boolean
  /**
+   * @deprecated since version 2.7.0 由提示统一控制
   * 行头鼠标悬浮提示开关
   */
  showRowTooltip: boolean
  /**
+   * @deprecated since version 2.7.0 由提示统一控制
   * 列头鼠标悬浮提示开关
   */
  showColTooltip: boolean
@ -324,6 +326,7 @@ declare interface ChartTableCellAttr {
   */
  tableItemSubBgColor: string
  /**
+   * @deprecated since version 2.7.0 由提示统一控制
   * 鼠标悬浮提示
   */
  showTooltip: boolean
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@ -234,20 +234,6 @@ onMounted(() => {
        </el-form-item>
      </el-col>
    </el-row>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="showProperty('showTooltip')"
-    >
-      <el-checkbox
-        size="small"
-        :effect="themes"
-        v-model="state.tableCellForm.showTooltip"
-        @change="changeTableCell('showTooltip')"
-      >
-        {{ t('chart.table_show_cell_tooltip') }}
-      </el-checkbox>
-    </el-form-item>
  </el-form>
 </template>

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@ -250,38 +250,6 @@ onMounted(() => {
        {{ t('chart.table_header_sort') }}
      </el-checkbox>
    </el-form-item>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="showProperty('showColTooltip')"
-    >
-      <el-checkbox
-        size="small"
-        :effect="themes"
-        v-model="state.tableHeaderForm.showColTooltip"
-        @change="changeTableHeader('showColTooltip')"
-      >
-        {{
-          chart.type === 'table-pivot'
-            ? t('chart.table_show_col_tooltip')
-            : t('chart.table_show_header_tooltip')
-        }}
-      </el-checkbox>
-    </el-form-item>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="showProperty('showRowTooltip')"
-    >
-      <el-checkbox
-        size="small"
-        :effect="themes"
-        v-model="state.tableHeaderForm.showRowTooltip"
-        @change="changeTableHeader('showRowTooltip')"
-      >
-        {{ t('chart.table_show_row_tooltip') }}
-      </el-checkbox>
-    </el-form-item>
  </el-form>
 </template>

--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts
@ -46,7 +46,7 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
    'letterSpace',
    'fontShadow'
  ],
-  'tooltip-selector': ['fontSize', 'color', 'backgroundColor'],
+  'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
  'function-cfg': ['emptyDataStrategy'],
  threshold: ['tableThreshold']
 }
--- 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
@ -184,14 +184,10 @@ export class TableInfo extends S2ChartView<TableSheet> {
      }
      action(param)
    })
-
-    // hover
-    const { showColTooltip } = customAttr.tableHeader
-    if (showColTooltip) {
+    // tooltip
+    const { show } = customAttr.tooltip
+    if (show) {
      newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
-    }
-    const { showTooltip } = customAttr.tableCell
-    if (showTooltip) {
      newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
    }
    // header resize
--- 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
@ -187,13 +187,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
      }
      action(param)
    })
-    // hover
-    const { showColTooltip } = customAttr.tableHeader
-    if (showColTooltip) {
+    // tooltip
+    const { show } = customAttr.tooltip
+    if (show) {
      newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
-    }
-    const { showTooltip } = customAttr.tableCell
-    if (showTooltip) {
      newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
    }
    // header resize
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
@ -200,16 +200,11 @@ export class TablePivot extends S2ChartView<PivotSheet> {
    this.configTooltip(chart, s2Options)
    // 开始渲染
    const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options)
-    // hover
-    const { showColTooltip, showRowTooltip } = customAttr.tableHeader
-    if (showColTooltip) {
+    // tooltip
+    const { show } = customAttr.tooltip
+    if (show) {
      s2.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(s2, event, meta))
-    }
-    if (showRowTooltip) {
      s2.on(S2Event.ROW_CELL_HOVER, event => this.showTooltip(s2, event, meta))
-    }
-    const { showTooltip } = customAttr.tableCell
-    if (showTooltip) {
      s2.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(s2, event, meta))
    }
    // click
--- 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
@ -750,7 +750,8 @@ export function configTooltip(chart: Chart, option: S2Options) {
      boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px',
      borderRadius: '3px',
      padding: '4px 12px',
-      opacity: 0.95
+      opacity: 0.95,
+      position: 'absolute'
    },
    adjustPosition: ({ event }) => {
      return getTooltipPosition(event)
@ -791,7 +792,7 @@ export function copyContent(s2Instance, event, fieldMeta) {
 function getTooltipPosition(event) {
  const s2Instance = event.s2Instance
  const { x, y } = event
-  const result = { x: x + 15, y: y + 10 }
+  const result = { x: x + 15, y }
  if (!s2Instance) {
    return result
  }
@ -809,8 +810,16 @@ function getTooltipPosition(event) {
  if (result.x && result.x + offsetWidth > width) {
    result.x -= result.x + offsetWidth - width
  }
-  if (result.y && result.y + offsetHeight > height) {
-    result.y -= offsetHeight + 15
+  if (result.y) {
+    if (result.y > offsetHeight) {
+      if (result.y - offsetHeight >= 15) {
+        result.y -= offsetHeight + 15
+      } else {
+        result.y = 0
+      }
+    } else {
+      result.y += 15
+    }
  }
  return result
 }
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
@ -3,7 +3,15 @@ import {
  AntVDrawOptions,
  ChartLibraryType
 } from '@/views/chart/components/js/panel/types'
-import { S2Theme, SpreadSheet, Style, S2Options, Meta, SERIES_NUMBER_FIELD } from '@antv/s2'
+import {
+  S2Theme,
+  SpreadSheet,
+  Style,
+  S2Options,
+  Meta,
+  SERIES_NUMBER_FIELD,
+  setTooltipContainerStyle
+} from '@antv/s2'
 import {
  configHeaderInteraction,
  configTooltip,
@ -86,6 +94,8 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
      return
    }
    event.s2Instance = s2Instance
+    const style = s2Instance.options.tooltip.style
+    setTooltipContainerStyle(s2Instance.tooltip.container, { style })
    s2Instance.showTooltip({
      position: {
        x: event.clientX,