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

feat(图表): 表格自适应模式铺满组件 #11640 #11704

Browse Source
This commit is contained in:
wisonic 2024-09-25 19:30:23 +08:00
parent c003b0cc44
commit e99afa8816
4 changed files with 109 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,12 @@
import { S2Event, S2Options, TableColCell, TableDataCell, TableSheet, ViewMeta } from '@antv/s2'
import {
type LayoutResult,
S2Event,
S2Options,
TableColCell,
TableDataCell,
TableSheet,
ViewMeta
} from '@antv/s2'
import { formatterItem, valueFormatter } from '../../../formatter'
import { parseJson } from '../../../util'
import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
@ -192,6 +200,60 @@ export class TableInfo extends S2ChartView<TableSheet> {
// 开始渲染
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 自适应铺满
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
const status = newChart.store.get('status')
if (status === 'default') {
return
}
const lastLayoutResult = newChart.store.get('lastLayoutResult') as LayoutResult
if (status === 'expanded' && lastLayoutResult) {
// 拖拽表头定义宽度，和上一次布局对比，保留除已拖拽列之外的宽度
const widthByFieldValue = newChart.options.style?.colCfg?.widthByFieldValue
const lastLayoutWidthMap: Record<string, number> = lastLayoutResult?.colLeafNodes.reduce(
(p, n) => {
p[n.value] = widthByFieldValue?.[n.value] ?? n.width
return p
},
{}
)
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = lastLayoutWidthMap[n.value]
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = totalWidth
} else {
// 第一次渲染初始化，把图片字段固定为 120 进行计算
const urlFields = fields.filter(field => field.deType === 7).map(f => f.dataeaseName)
const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 120 : n.width)
}, 0)
if (containerDom.offsetWidth <= totalWidthWithImg) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
// 图片字段固定 120, 剩余宽度按比例均摊到其他字段进行扩大
const totalWidthWithoutImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 0 : n.width)
}, 0)
const restWidth = containerDom.offsetWidth - urlFields.length * 120
const scale = restWidth / totalWidthWithoutImg
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = urlFields.includes(n.field) ? 120 : n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
}
})
}
// click
newChart.on(S2Event.DATA_CELL_CLICK, ev => {
const cell = newChart.getCell(ev.target)

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

@ -4,6 +4,7 @@ import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/comm
import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2'
import { parseJson } from '@/views/chart/components/js/util'
import {
type LayoutResult,
S2Event,
S2Options,
SHAPE_STYLE_MAP,
@ -207,7 +208,50 @@ export class TableNormal extends S2ChartView<TableSheet> {
}
// 开始渲染
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 自适应铺满
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
const status = newChart.store.get('status')
if (status === 'default') {
return
}
const lastLayoutResult = newChart.store.get('lastLayoutResult') as LayoutResult
if (status === 'expanded' && lastLayoutResult) {
// 拖拽表头定义宽度，和上一次布局对比，保留除已拖拽列之外的宽度
const widthByFieldValue = newChart.options.style?.colCfg?.widthByFieldValue
const lastLayoutWidthMap: Record<string, number> = lastLayoutResult?.colLeafNodes.reduce(
(p, n) => {
p[n.value] = widthByFieldValue?.[n.value] ?? n.width
return p
},
{}
)
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = lastLayoutWidthMap[n.value]
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = totalWidth
} else {
const scale = containerDom.offsetWidth / ev.colsHierarchy.width
if (scale <= 1) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
newChart.store.set('status', 'default')
return
}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = n.width * scale
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
newChart.store.set('status', 'expanded')
}
})
}
// click
newChart.on(S2Event.DATA_CELL_CLICK, ev => {
const cell = newChart.getCell(ev.target)

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

@ -412,7 +412,6 @@ export function getStyle(chart: Chart): Style {
}
switch (basicStyle.tableColumnMode) {
case 'adapt': {
delete style.cellCfg.width
style.layoutWidthType = 'compact'
break
}

2
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -172,11 +172,11 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
recursionTransObj(customAttrTrans, actualChart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, actualChart.customStyle, scale.value, terminal.value)
setupPage(actualChart, resetPageInfo)
myChart?.facet?.timer?.stop()
myChart?.facet?.cancelScrollFrame()
myChart?.destroy()
myChart = null
setupPage(actualChart, resetPageInfo)
const chartView = chartViewManager.getChartView(
viewInfo.render,
viewInfo.type