center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #9981 from dataease/pr@dev-v2@feat_table_tooltip_style

Browse Source 
feat(图表): 表格提示可自定义背景颜色和字体大小、颜色 #9675 #9834
This commit is contained in:
wisonic-s 2024-05-30 17:30:11 +08:00 committed by GitHub
commit 52d15a2329
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 110 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/core-frontend/src/locales/zh-CN.ts
View File

@ -686,6 +686,7 @@ export default {
table_show_row_tooltip: '开启行头提示',
table_show_col_tooltip: '开启列头提示',
table_show_cell_tooltip: '开启单元格提示',
table_show_header_tooltip: '开启表头提示',
stripe: '斑马纹',
start_angle: '起始角度',
end_angle: '结束角度',

11
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -354,13 +354,14 @@ watch(
/>
</collapse-switch-item>
<collapse-switch-item
:themes="themes"
v-if="showProperties('tooltip-selector')"
v-model="chart.customAttr.tooltip.show"
:themes="themes"
:change-model="chart.customAttr.tooltip"
@modelChange="val => onTooltipChange({ data: val }, 'show')"
name="tooltip"
:title="$t('chart.tooltip')"
:show-switch="propertyInnerAll['tooltip-selector'].includes('show')"
name="tooltip"
@modelChange="val => onTooltipChange({ data: val }, 'show')"
>
<tooltip-selector
class="attr-selector"
@ -438,7 +439,7 @@ watch(
:change-model="chart.customStyle.xAxis"
@modelChange="val => onChangeXAxisForm(val, 'show')"
name="xAxis"
:title="chart.type === 'bidirectional-bar' ? $t('chart.yAxis') : t('chart.xAxis')"
:title="selectorSpec['x-axis-selector']?.title"
>
<x-axis-selector
class="attr-selector"
@ -473,7 +474,7 @@ watch(
:change-model="chart.customStyle.yAxis"
@modelChange="val => onChangeYAxisForm(val, 'show')"
name="yAxis"
:title="chart.type === 'bidirectional-bar' ? $t('chart.xAxis') : $t('chart.yAxis')"
:title="selectorSpec['dual-y-axis-selector']?.title"
>
<dual-y-axis-selector
class="attr-selector"

6
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
View File

@ -261,7 +261,11 @@ onMounted(() => {
v-model="state.tableHeaderForm.showColTooltip"
@change="changeTableHeader('showColTooltip')"
>
{{ t('chart.table_show_col_tooltip') }}
{{
chart.type === 'table-pivot'
? t('chart.table_show_col_tooltip')
: t('chart.table_show_header_tooltip')
}}
</el-checkbox>
</el-form-item>
<el-form-item

6
core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
View File

@ -26,7 +26,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
propertyInner = {
...BAR_EDITOR_PROPERTY_INNER,
'label-selector': ['vPosition', 'seriesLabelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'y-axis-selector': [...BAR_EDITOR_PROPERTY_INNER['y-axis-selector'], 'axisLabelFormatter']
}
protected baseOptions: ColumnOptions = {
@ -236,7 +236,7 @@ export class StackBar extends Bar {
propertyInner = {
...this['propertyInner'],
'label-selector': [...BAR_EDITOR_PROPERTY_INNER['label-selector'], 'vPosition'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter']
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show']
}
protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
const baseOptions = super.configLabel(chart, options)
@ -372,7 +372,7 @@ export class PercentageStackBar extends GroupStackBar {
propertyInner = {
...this['propertyInner'],
'label-selector': ['color', 'fontSize', 'vPosition', 'reserveDecimalCount'],
'tooltip-selector': ['color', 'fontSize']
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'show']
}
protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
const baseOptions = super.configLabel(chart, options)

12
core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
View File

@ -88,7 +88,17 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
'function-cfg': ['emptyDataStrategy'],
'label-selector': ['hPosition', 'seriesLabelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter']
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show']
}
selectorSpec: EditorSelectorSpec = {
...this['selectorSpec'],
'dual-y-axis-selector': {
title: `${t('chart.xAxis')}`
},
'x-axis-selector': {
title: `${t('chart.yAxis')}`
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): G2BidirectionalBar {

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts
View File

@ -30,7 +30,7 @@ export const BAR_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'],
'x-axis-selector': [
'name',
'color',

6
core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
View File

@ -34,7 +34,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
propertyInner = {
...BAR_EDITOR_PROPERTY_INNER,
'label-selector': ['hPosition', 'seriesLabelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'x-axis-selector': [...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'], 'axisLabelFormatter']
}
axis: AxisType[] = [...BAR_AXIS_TYPE]
@ -267,7 +267,7 @@ export class HorizontalStackBar extends HorizontalBar {
propertyInner = {
...this['propertyInner'],
'label-selector': ['color', 'fontSize', 'hPosition', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter']
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show']
}
protected configLabel(chart: Chart, options: BarOptions): BarOptions {
const baseOptions = super.configLabel(chart, options)
@ -328,7 +328,7 @@ export class HorizontalPercentageStackBar extends HorizontalStackBar {
propertyInner = {
...this['propertyInner'],
'label-selector': ['color', 'fontSize', 'hPosition', 'reserveDecimalCount'],
'tooltip-selector': ['color', 'fontSize']
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'show']
}
protected configLabel(chart: Chart, options: BarOptions): BarOptions {
const baseOptions = super.configLabel(chart, options)

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
View File

@ -49,7 +49,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['hPosition', 'color', 'fontSize'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
'y-axis-selector': ['name', 'color', 'fontSize', 'axisForm', 'axisLabel', 'position'],
'function-cfg': ['emptyDataStrategy']
}

11
core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
View File

@ -39,7 +39,14 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
propertyInner = {
...BAR_EDITOR_PROPERTY_INNER,
'label-selector': ['hPosition', 'color', 'fontSize', 'labelFormatter', 'showGap'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'showGap'],
'tooltip-selector': [
'fontSize',
'color',
'backgroundColor',
'tooltipFormatter',
'showGap',
'show'
],
'x-axis-selector': [...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'], 'axisLabelFormatter']
}
axis: AxisType[] = [...BAR_AXIS_TYPE, 'yAxisExt']
@ -47,7 +54,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
data: [],
xField: 'values',
yField: 'field',
colorFiled: 'category',
colorField: 'category',
isGroup: true,
interactions: [
{

2
core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
View File

@ -23,7 +23,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['fontSize', 'color', 'vPosition', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'title-selector': [
'title',
'fontSize',

2
core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
View File

@ -261,7 +261,7 @@ export class StackArea extends Area {
propertyInner = {
...this['propertyInner'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter']
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show']
}
protected configLabel(chart: Chart, options: AreaOptions): AreaOptions {
const customAttr = parseJson(chart.customAttr)

2
core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts
View File

@ -15,7 +15,7 @@ export const LINE_EDITOR_PROPERTY: EditorProperty[] = [
export const LINE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
'basic-style-selector': [
'colors',
'alpha',

2
core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts
View File

@ -34,7 +34,7 @@ export const MAP_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'showDimension',
'showQuota'
],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'tooltipFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'tooltipFormatter', 'show'],
'function-cfg': ['emptyDataStrategy'],
'map-mapping': ['']
}

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts
View File

@ -15,7 +15,7 @@ export const CHART_MIX_EDITOR_PROPERTY: EditorProperty[] = [
export const CHART_MIX_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
'basic-style-selector': [
'colors',
'alpha',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
View File

@ -24,7 +24,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha'],
'label-selector': ['fontSize', 'color', 'hPosition', 'labelFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'title-selector': [
'show',
'title',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
View File

@ -30,7 +30,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
propertyInner: EditorPropertyInner = {
'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'x-axis-selector': [
'position',
'name',

3
core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
View File

@ -24,7 +24,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
propertyInner: EditorPropertyInner = {
'basic-style-selector': ['colors', 'alpha', 'radarShape'],
'label-selector': ['seriesLabelFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor'],
'title-selector': [
'show',
@ -42,6 +42,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
'legend-selector': ['icon', 'orient', 'color', 'fontSize', 'hPosition', 'vPosition']
}
selectorSpec: EditorSelectorSpec = {
...this['selectorSpec'],
'misc-style-selector': {
title: `${t('chart.tooltip_axis')}`
}

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
View File

@ -45,7 +45,7 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
propertyInner = {
...SANKEY_EDITOR_PROPERTY_INNER,
'label-selector': ['color', 'fontSize'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter']
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show']
}
axis: AxisType[] = [...SANKEY_AXIS_TYPE]
protected baseOptions: SankeyOptions = {

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
View File

@ -29,7 +29,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
propertyInner: EditorPropertyInner = {
'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'x-axis-selector': [
'position',
'name',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
View File

@ -29,7 +29,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
'basic-style-selector': ['colors', 'alpha'],
'label-selector': ['fontSize', 'color', 'showDimension', 'showQuota', 'showProportion'],
'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'title-selector': [
'title',
'fontSize',

2
core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
View File

@ -41,7 +41,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
'fontShadow'
],
'misc-selector': ['wordSizeRange', 'wordSpacing'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter']
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show']
}
axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
axisConfig: AxisConfig = {

2
core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts
View File

@ -22,7 +22,7 @@ export const PIE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'showQuota',
'showProportion'
],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'basic-style-selector': ['colors', 'alpha', 'radius'],
'title-selector': [
'title',

2
core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts
View File

@ -4,6 +4,7 @@ export const TABLE_EDITOR_PROPERTY: EditorProperty[] = [
'table-header-selector',
'table-cell-selector',
'title-selector',
'tooltip-selector',
'function-cfg',
'threshold',
'scroll-cfg',
@ -45,6 +46,7 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'letterSpace',
'fontShadow'
],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor'],
'function-cfg': ['emptyDataStrategy'],
threshold: ['tableThreshold']
}

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

@ -5,7 +5,7 @@ import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
import { TABLE_EDITOR_PROPERTY, TABLE_EDITOR_PROPERTY_INNER } from './common'
import { useI18n } from '@/hooks/web/useI18n'
import { isNumber } from 'lodash-es'
import { copyContent } from '@/views/chart/components/js/panel/common/common_table'
import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/common/common_table'
const { t } = useI18n()
@ -108,7 +108,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
style: this.configStyle(chart),
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
}
}
// 开启序号之后，第一列就是序号列，修改 label 即可
@ -135,7 +136,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
}
}
// tooltip
this.configTooltip(s2Options)
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1

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

@ -2,7 +2,11 @@ import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/ty
import { S2Event, S2Options, TableSheet, TableColCell, ViewMeta, TableDataCell } from '@antv/s2'
import { parseJson } from '@/views/chart/components/js/util'
import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
import { copyContent, getCurrentField } from '@/views/chart/components/js/panel/common/common_table'
import {
copyContent,
getCurrentField,
SortTooltip
} 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'
@ -111,7 +115,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
style: this.configStyle(chart),
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
}
}
// 开启序号之后，第一列就是序号列，修改 label 即可
@ -134,7 +139,7 @@ export class TableNormal extends S2ChartView<TableSheet> {
}
}
// tooltip
this.configTooltip(s2Options)
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1

12
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
View File

@ -1,4 +1,4 @@
import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE, S2Theme } from '@antv/s2'
import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE, S2Theme, Totals } from '@antv/s2'
import { formatterItem, valueFormatter } from '../../../formatter'
import { hexColorToRGBA, parseJson } from '../../../util'
import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
@ -20,6 +20,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
'table-cell-selector',
'table-total-selector',
'title-selector',
'tooltip-selector',
'function-cfg',
'threshold',
'linkage',
@ -183,15 +184,20 @@ export class TablePivot extends S2ChartView<PivotSheet> {
sortParams: sortParams
}
// options
const s2Options = {
const s2Options: S2Options = {
width: containerDom.offsetWidth,
height: containerDom.offsetHeight,
style: this.configStyle(chart),
totals: tableTotal,
totals: tableTotal as Totals,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom
},
hierarchyType: basicStyle.tableLayoutMode ?? 'grid'
}
// tooltip
this.configTooltip(chart, s2Options)
// 开始渲染
const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options)
// hover

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

@ -611,7 +611,7 @@ export function handleTableEmptyStrategy(chart: Chart) {
}
return newData
}
class SortTooltip extends BaseTooltip {
export class SortTooltip extends BaseTooltip {
show(showOptions) {
const { iconName } = showOptions
if (iconName) {
@ -656,7 +656,10 @@ class SortTooltip extends BaseTooltip {
top: `${this.position?.y}px`,
pointerEvents: enterable ? 'all' : 'none',
zIndex: 9999,
position: 'absolute'
position: 'absolute',
color: 'black',
background: 'white',
fontSize: '16px'
},
visible: true
})
@ -736,13 +739,22 @@ export function configHeaderInteraction(chart: Chart, option: S2Options) {
]
}
export function configTooltip(option: S2Options) {
export function configTooltip(chart: Chart, option: S2Options) {
const { tooltip } = parseJson(chart.customAttr)
option.tooltip = {
...option.tooltip,
style: {
background: tooltip.backgroundColor,
fontSize: tooltip.fontSize + 'px',
color: tooltip.color,
boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px',
borderRadius: '3px',
padding: '4px 12px',
opacity: 0.95
},
adjustPosition: ({ event }) => {
return getTooltipPosition(event)
},
renderTooltip: sheet => new SortTooltip(sheet)
}
}
}

13
core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
View File

@ -3,7 +3,7 @@ import {
AntVDrawOptions,
ChartLibraryType
} from '@/views/chart/components/js/panel/types'
import { S2Theme, SpreadSheet, Style, S2Options, Meta } from '@antv/s2'
import { S2Theme, SpreadSheet, Style, S2Options, Meta, SERIES_NUMBER_FIELD } from '@antv/s2'
import {
configHeaderInteraction,
configTooltip,
@ -42,8 +42,8 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
return handleTableEmptyStrategy(chart)
}
protected configTooltip(option: S2Options) {
configTooltip(option)
protected configTooltip(chart: Chart, option: S2Options) {
configTooltip(chart, option)
}
protected configHeaderInteraction(chart: Chart, option: S2Options) {
@ -62,12 +62,19 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
switch (cell.cellType) {
case 'dataCell':
field = find(metaConfig, item => item.field === meta.valueField)
if (meta.fieldValue === 0) {
content = '0'
}
if (meta.fieldValue) {
content = field?.formatter?.(meta.fieldValue)
}
break
case 'rowCell':
case 'colCell':
if (meta.field === SERIES_NUMBER_FIELD) {
content = cell.getTextShape()['attrs'].text
break
}
content = meta.label
field = find(metaConfig, item => item.field === content)
if (field) {

6
core/core-frontend/src/views/chart/components/js/panel/types/index.ts
View File

@ -100,6 +100,12 @@ export abstract class AntVAbstractChartView extends AbstractChartView {
selectorSpec: EditorSelectorSpec = {
'misc-style-selector': {
title: `${t('chart.size')}`
},
'dual-y-axis-selector': {
title: `${t('chart.yAxis')}`
},
'x-axis-selector': {
title: `${t('chart.xAxis')}`
}
}
protected constructor(library: ChartLibraryType, name: string, defaultData?: any[]) {