forked from github/dataease
feat(图表): 明细表/汇总表可控制表头排序开关和图标颜色 #8147
This commit is contained in:
wisonic-s
parent
ace9ce5810
commit
177e8aab12
@ -642,6 +642,7 @@ export default {
|
||||
table_header_font_color: '表头字体',
|
||||
table_item_font_color: '表格字体',
|
||||
table_show_index: '显示序号',
|
||||
table_header_sort: '开启表头排序',
|
||||
stripe: '斑马纹',
|
||||
start_angle: '起始角度',
|
||||
end_angle: '结束角度',
|
||||
|
||||
@ -221,6 +221,10 @@ declare interface ChartTableHeaderAttr {
|
||||
* 序号表头名称
|
||||
*/
|
||||
indexLabel: string
|
||||
/**
|
||||
* 表头排序开关
|
||||
*/
|
||||
tableHeaderSort: boolean
|
||||
}
|
||||
/**
|
||||
* 单元格属性
|
||||
|
||||
@ -236,6 +236,21 @@ onMounted(() => {
|
||||
@blur="changeTableHeader('indexLabel')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('chart.table_show_index')"
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="showProperty('tableHeaderSort')"
|
||||
>
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="state.tableHeaderForm.tableHeaderSort"
|
||||
@change="changeTableHeader('tableHeaderSort')"
|
||||
>
|
||||
{{ t('chart.table_header_sort') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@ -329,7 +329,8 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
|
||||
tableHeaderBgColor: '#6D9A49',
|
||||
tableHeaderFontColor: '#000000',
|
||||
tableTitleFontSize: 12,
|
||||
tableTitleHeight: 36
|
||||
tableTitleHeight: 36,
|
||||
tableHeaderSort: false
|
||||
}
|
||||
export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
|
||||
tableFontColor: '#000000',
|
||||
|
||||
@ -16,6 +16,10 @@ export class TableInfo extends S2ChartView<TableSheet> {
|
||||
properties = TABLE_EDITOR_PROPERTY
|
||||
propertyInner = {
|
||||
...TABLE_EDITOR_PROPERTY_INNER,
|
||||
'table-header-selector': [
|
||||
...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
|
||||
'tableHeaderSort'
|
||||
],
|
||||
'basic-style-selector': [
|
||||
'tableColumnMode',
|
||||
'tableBorderColor',
|
||||
@ -131,6 +135,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
|
||||
}
|
||||
// tooltip
|
||||
this.configTooltip(s2Options)
|
||||
// header interaction
|
||||
this.configHeaderInteraction(chart, s2Options)
|
||||
// 开始渲染
|
||||
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
|
||||
|
||||
|
||||
@ -13,7 +13,13 @@ const { t } = useI18n()
|
||||
*/
|
||||
export class TableNormal extends S2ChartView<TableSheet> {
|
||||
properties = TABLE_EDITOR_PROPERTY
|
||||
propertyInner = TABLE_EDITOR_PROPERTY_INNER
|
||||
propertyInner = {
|
||||
...TABLE_EDITOR_PROPERTY_INNER,
|
||||
'table-header-selector': [
|
||||
...TABLE_EDITOR_PROPERTY_INNER['table-header-selector'],
|
||||
'tableHeaderSort'
|
||||
]
|
||||
}
|
||||
axis: AxisType[] = ['xAxis', 'yAxis', 'drill', 'filter']
|
||||
axisConfig: AxisConfig = {
|
||||
xAxis: {
|
||||
@ -125,6 +131,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
|
||||
}
|
||||
// tooltip
|
||||
this.configTooltip(s2Options)
|
||||
// header interaction
|
||||
this.configHeaderInteraction(chart, s2Options)
|
||||
// 开始渲染
|
||||
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
|
||||
|
||||
|
||||
@ -639,21 +639,53 @@ class SortTooltip extends BaseTooltip {
|
||||
})
|
||||
}
|
||||
}
|
||||
export function configTooltip(option: S2Options) {
|
||||
const SORT_DEFAULT =
|
||||
'<svg t="1711681787276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4355" width="200" height="200"><path d="M922.345786 372.183628l-39.393195 38.687114L676.138314 211.079416l0 683.909301-54.713113 0L621.425202 129.010259l53.320393 0L922.345786 372.183628zM349.254406 894.989741 101.654214 651.815349l39.393195-38.687114 206.814276 199.792349L347.861686 129.010259l54.713113 0 0 765.978459L349.254406 894.988718z" fill="{fill}" p-id="4356"></path></svg>'
|
||||
const SORT_UP =
|
||||
'<svg t="1711682928245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11756" width="200" height="200"><path d="M960 704L512 256 64 704z" fill="{fill}" p-id="11757"></path></svg>'
|
||||
const SORT_DOWN =
|
||||
'<svg t="1711681879346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4655" width="200" height="200"><path d="M64 320l448 448 448-448z" fill="{fill}" p-id="4656"></path></svg>'
|
||||
|
||||
function svg2Base64(svg) {
|
||||
return `data:image/svg+xml;charset=utf-8;base64,${btoa(svg)}`
|
||||
}
|
||||
|
||||
export function configHeaderInteraction(chart: Chart, option: S2Options) {
|
||||
const { tableHeaderFontColor, tableHeaderSort } = parseJson(chart.customAttr).tableHeader
|
||||
if (!tableHeaderSort) {
|
||||
return
|
||||
}
|
||||
const iconColor = tableHeaderFontColor ?? '#666'
|
||||
const sortDefault = svg2Base64(SORT_DEFAULT.replace('{fill}', iconColor))
|
||||
const sortUp = svg2Base64(SORT_UP.replace('{fill}', iconColor))
|
||||
const sortDown = svg2Base64(SORT_DOWN.replace('{fill}', iconColor))
|
||||
// 防止缓存
|
||||
const randomSuffix = Math.random()
|
||||
const sortIconMap = {
|
||||
asc: 'SortUp',
|
||||
desc: 'SortDown'
|
||||
asc: `customSortUp${randomSuffix}`,
|
||||
desc: `customSortDown${randomSuffix}`
|
||||
}
|
||||
option.tooltip = {
|
||||
...option.tooltip,
|
||||
adjustPosition: ({ event }) => {
|
||||
return getTooltipPosition(event)
|
||||
option.customSVGIcons = [
|
||||
{
|
||||
name: `customSortDefault${randomSuffix}`,
|
||||
svg: sortDefault
|
||||
},
|
||||
renderTooltip: sheet => new SortTooltip(sheet)
|
||||
}
|
||||
{
|
||||
name: `customSortUp${randomSuffix}`,
|
||||
svg: sortUp
|
||||
},
|
||||
{
|
||||
name: `customSortDown${randomSuffix}`,
|
||||
svg: sortDown
|
||||
}
|
||||
]
|
||||
option.headerActionIcons = [
|
||||
{
|
||||
iconNames: ['GroupAsc', 'SortUp', 'SortDown'],
|
||||
iconNames: [
|
||||
`customSortDefault${randomSuffix}`,
|
||||
`customSortUp${randomSuffix}`,
|
||||
`customSortDown${randomSuffix}`
|
||||
],
|
||||
belongsCell: 'colCell',
|
||||
displayCondition: (meta, iconName) => {
|
||||
if (meta.field === SERIES_NUMBER_FIELD) {
|
||||
@ -664,7 +696,7 @@ export function configTooltip(option: S2Options) {
|
||||
if (sortType) {
|
||||
return iconName === sortIconMap[sortType]
|
||||
}
|
||||
return iconName === 'GroupAsc'
|
||||
return iconName === `customSortDefault${randomSuffix}`
|
||||
},
|
||||
onClick: props => {
|
||||
const { meta, event } = props
|
||||
@ -681,6 +713,16 @@ export function configTooltip(option: S2Options) {
|
||||
]
|
||||
}
|
||||
|
||||
export function configTooltip(option: S2Options) {
|
||||
option.tooltip = {
|
||||
...option.tooltip,
|
||||
adjustPosition: ({ event }) => {
|
||||
return getTooltipPosition(event)
|
||||
},
|
||||
renderTooltip: sheet => new SortTooltip(sheet)
|
||||
}
|
||||
}
|
||||
|
||||
export function copyContent(s2Instance, event, fieldMeta) {
|
||||
event.preventDefault()
|
||||
const cell = s2Instance.getCell(event.target)
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
} from '@/views/chart/components/js/panel/types'
|
||||
import { S2Theme, SpreadSheet, Style, S2Options } from '@antv/s2'
|
||||
import {
|
||||
configHeaderInteraction,
|
||||
configTooltip,
|
||||
getConditions,
|
||||
getCustomTheme,
|
||||
@ -44,6 +45,10 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
|
||||
configTooltip(option)
|
||||
}
|
||||
|
||||
protected configHeaderInteraction(chart: Chart, option: S2Options) {
|
||||
configHeaderInteraction(chart, option)
|
||||
}
|
||||
|
||||
protected configConditions(chart: Chart) {
|
||||
return getConditions(chart)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user