From 434c7e9489b8ce3549c0ffec4fc07299705397b2 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Sun, 28 Jan 2024 19:01:17 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-=E8=A1=A8=E6=A0=BC):=20?= =?UTF-8?q?=E6=98=8E=E7=BB=86=E8=A1=A8/=E6=B1=87=E6=80=BB=E8=A1=A8?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=A1=A8=E5=A4=B4=E6=8E=92=E5=BA=8F#6754?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/locales/zh-CN.ts | 1 + .../components/editor/common/TableTooltip.vue | 48 +++++++++ .../js/panel/charts/table/table-info.ts | 5 +- .../js/panel/charts/table/table-normal.ts | 6 +- .../js/panel/charts/table/table-pivot.ts | 3 +- .../js/panel/common/common_table.ts | 100 +++++++++++++++++- .../components/js/panel/types/impl/s2.ts | 10 +- 7 files changed, 162 insertions(+), 11 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/editor/common/TableTooltip.vue diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index b1fe059a6d..c05b5b2057 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -602,6 +602,7 @@ export default { asc: '升序', desc: '降序', sort: '排序', + default: '默认', filter: '过滤', none: '无', background: '背景', diff --git a/core/core-frontend/src/views/chart/components/editor/common/TableTooltip.vue b/core/core-frontend/src/views/chart/components/editor/common/TableTooltip.vue new file mode 100644 index 0000000000..a37248bdfa --- /dev/null +++ b/core/core-frontend/src/views/chart/components/editor/common/TableTooltip.vue @@ -0,0 +1,48 @@ + + + diff --git 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 index 5598694315..8c7c8362dd 100644 --- 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 @@ -1,4 +1,4 @@ -import { S2Event, S2Options, TableColCell, TableDataCell, TableSheet } from '@antv/s2/esm/index' +import { S2Event, S2Options, TableColCell, TableDataCell, TableSheet } from '@antv/s2' import { formatterItem, valueFormatter } from '../../../formatter' import { parseJson } from '../../../util' import { S2ChartView, S2DrawOptions } from '../../types/impl/s2' @@ -125,7 +125,8 @@ export class TableInfo extends S2ChartView { return new TableDataCell(viewMeta, viewMeta?.spreadsheet) } } - + // tooltip + this.configTooltip(s2Options) // 开始渲染 const newChart = new TableSheet(containerDom, s2DataConfig, s2Options) diff --git 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 index 6cf018e33a..a5b09dbba1 100644 --- 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 @@ -1,12 +1,11 @@ import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2' -import { S2Event, S2Options, TableSheet } from '@antv/s2/esm/index' +import { S2Event, S2Options, TableSheet, TableColCell } from '@antv/s2' import { parseJson } from '@/views/chart/components/js/util' import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter' import { getCurrentField } from '@/views/chart/components/js/panel/common/common_table' import { TABLE_EDITOR_PROPERTY, TABLE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' import { isNumber } from 'lodash-es' -import { TableColCell } from '@antv/s2' const { t } = useI18n() /** @@ -121,7 +120,8 @@ export class TableNormal extends S2ChartView { return new TableColCell(node, sheet, config) } } - + // tooltip + this.configTooltip(s2Options) // 开始渲染 const newChart = new TableSheet(containerDom, s2DataConfig, s2Options) diff --git 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 index 2ff71596ad..06664323b7 100644 --- 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 @@ -1,11 +1,10 @@ -import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE } from '@antv/s2/esm/index' +import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE, S2Theme } from '@antv/s2' import { formatterItem, valueFormatter } from '../../../formatter' import { hexColorToRGBA, parseJson } from '../../../util' import { S2ChartView, S2DrawOptions } from '../../types/impl/s2' import { TABLE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' import { maxBy, merge, minBy } from 'lodash-es' -import { S2Theme } from '@antv/s2' const { t } = useI18n() diff --git 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 index 3ce11c5d47..a95a504a97 100644 --- 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 @@ -4,8 +4,19 @@ import { DEFAULT_TABLE_CELL, DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart' -import { S2Theme, Style } from '@antv/s2' +import { + BaseTooltip, + getAutoAdjustPosition, + getTooltipDefaultOptions, + S2Theme, + setTooltipContainerStyle, + Style, + S2Options, + SERIES_NUMBER_FIELD +} from '@antv/s2' import { keys, intersection, filter, cloneDeep, merge } from 'lodash-es' +import { createVNode, render } from 'vue' +import TableTooltip from '@/views/chart/components/editor/common/TableTooltip.vue' export function getCustomTheme(chart: Chart): S2Theme { const headerColor = hexColorToRGBA( @@ -537,3 +548,90 @@ export function handleTableEmptyStrategy(chart: Chart) { } return newData } +class SortTooltip extends BaseTooltip { + show(showOptions) { + const { iconName } = showOptions + if (iconName) { + this.showSortTooltip(showOptions) + return + } + super.show(showOptions) + } + + showSortTooltip(showOptions) { + const { position, options, meta, event } = showOptions + const { enterable } = getTooltipDefaultOptions(options) + const { autoAdjustBoundary, adjustPosition } = this.spreadsheet.options.tooltip || {} + this.visible = true + this.options = showOptions + const container = this['getContainer']() + // 用 vue 手动 patch + const vNode = createVNode(TableTooltip, { + table: this.spreadsheet, + meta + }) + this.spreadsheet.tooltip.container.innerHTML = '' + const childElement = document.createElement('div') + this.spreadsheet.tooltip.container.appendChild(childElement) + render(vNode, childElement, false) + + const { x, y } = getAutoAdjustPosition({ + spreadsheet: this.spreadsheet, + position, + tooltipContainer: container, + autoAdjustBoundary + }) + + this.position = adjustPosition?.({ position: { x, y }, event }) ?? { + x, + y + } + + setTooltipContainerStyle(container, { + style: { + left: `${this.position?.x}px`, + top: `${this.position?.y}px`, + pointerEvents: enterable ? 'all' : 'none' + }, + visible: true + }) + } +} +export function configTooltip(option: S2Options) { + const sortIconMap = { + asc: 'SortUp', + desc: 'SortDown' + } + option.tooltip = { + ...option.tooltip, + renderTooltip: sheet => new SortTooltip(sheet) + } + option.headerActionIcons = [ + { + iconNames: ['GroupAsc', 'SortUp', 'SortDown'], + belongsCell: 'colCell', + displayCondition: (meta, iconName) => { + if (meta.field === SERIES_NUMBER_FIELD) { + return false + } + const sortMethodMap = meta.spreadsheet.store.get('sortMethodMap') + const sortType = sortMethodMap?.[meta.field] + if (sortType) { + return iconName === sortIconMap[sortType] + } + return iconName === 'GroupAsc' + }, + onClick: props => { + const { meta, event } = props + meta.spreadsheet.showTooltip({ + position: { + x: event.clientX, + y: event.clientY + }, + event, + ...props + }) + } + } + ] +} diff --git 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 index 302562b09a..210872e4d8 100644 --- 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,13 +3,15 @@ import { AntVDrawOptions, ChartLibraryType } from '@/views/chart/components/js/panel/types' -import { S2Theme, SpreadSheet, Style } from '@antv/s2' +import { S2Theme, SpreadSheet, Style, S2Options } from '@antv/s2' import { + configTooltip, getConditions, getCustomTheme, getStyle, handleTableEmptyStrategy } from '@/views/chart/components/js/panel/common/common_table' +import '@antv/s2/dist/style.min.css' declare interface PageInfo { currentPage: number @@ -19,9 +21,7 @@ declare interface PageInfo { export interface S2DrawOptions extends AntVDrawOptions { pageInfo?: PageInfo - tableHeaderClick?: (args: any[]) => void } - export abstract class S2ChartView

extends AntVAbstractChartView { public abstract drawChart(drawOption: S2DrawOptions

): P protected constructor(name: string, defaultData: any[]) { @@ -39,6 +39,10 @@ export abstract class S2ChartView

extends AntVAbstractCha return handleTableEmptyStrategy(chart) } + protected configTooltip(option: S2Options) { + configTooltip(option) + } + protected configConditions(chart: Chart) { return getConditions(chart) }