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

Merge pull request #12698 from dataease/pr@dev-v2@fix_table_full_width_scroll

Browse Source 
fix(图表): 表格铺满之后出现滚动条 #12461
This commit is contained in:
wisonic-s 2024-10-14 18:55:18 +08:00 committed by GitHub
commit 80039f0190
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 68 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import {
type LayoutResult,
S2DataConfig,
S2Event,
S2Options,
TableColCell,
@ -129,7 +130,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
// 空值处理
const newData = this.configEmptyDataStrategy(chart)
// data config
const s2DataConfig = {
const s2DataConfig: S2DataConfig = {
fields: {
columns: columns
},
@ -138,27 +139,26 @@ export class TableInfo extends S2ChartView<TableSheet> {
}
const customAttr = parseJson(chart.customAttr)
const style = this.configStyle(chart)
// 自适应列宽模式下，URL 字段的宽度固定为 120
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
const urlFields = fields.filter(field => field.deType === 7)
style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
p[n.chartShowName ?? n.name] = 120
return p
}, {})
}
// options
const s2Options: S2Options = {
width: containerDom.offsetWidth,
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
showSeriesNumber: customAttr.tableHeader.showIndex,
style,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
}
}
s2Options.style = this.configStyle(chart, s2DataConfig)
// 自适应列宽模式下，URL 字段的宽度固定为 120
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
const urlFields = fields.filter(field => field.deType === 7)
s2Options.style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
p[n.chartShowName ?? n.name] = 120
return p
}, {})
}
if (customAttr.tableCell.tableFreeze) {
s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
@ -240,7 +240,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
return p + (urlFields.includes(n.field) ? 120 : n.width)
}, 0)
if (containerDom.offsetWidth <= totalWidthWithImg) {
const containerWidth = containerDom.getBoundingClientRect().width
if (containerWidth <= totalWidthWithImg) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
return
}
@ -248,14 +249,17 @@ export class TableInfo extends S2ChartView<TableSheet> {
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 restWidth = containerWidth - 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.width = urlFields.includes(n.field) ? 120 : Math.round(n.width * scale)
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
if (totalWidth > containerWidth) {
ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth
}
ev.colsHierarchy.width = containerWidth
})
}
// click

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

@ -5,6 +5,7 @@ import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/ty
import { parseJson } from '@/views/chart/components/js/util'
import {
type LayoutResult,
S2DataConfig,
S2Event,
S2Options,
SHAPE_STYLE_MAP,
@ -118,28 +119,27 @@ export class TableNormal extends S2ChartView<TableSheet> {
// 空值处理
const newData = this.configEmptyDataStrategy(chart)
// data config
const s2DataConfig = {
const s2DataConfig: S2DataConfig = {
fields: {
columns: columns
},
meta: meta,
data: newData,
style: this.configStyle(chart)
data: newData
}
const customAttr = parseJson(chart.customAttr)
// options
const s2Options: S2Options = {
width: containerDom.offsetWidth,
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
showSeriesNumber: customAttr.tableHeader.showIndex,
style: this.configStyle(chart),
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
}
}
s2Options.style = this.configStyle(chart, s2DataConfig)
if (customAttr.tableCell.tableFreeze) {
s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
@ -256,17 +256,22 @@ export class TableNormal extends S2ChartView<TableSheet> {
newChart.store.set('lastLayoutResult', undefined)
return
}
const scale = containerDom.offsetWidth / ev.colsHierarchy.width
const containerWidth = containerDom.getBoundingClientRect().width
const scale = containerWidth / ev.colsHierarchy.width
if (scale <= 1) {
// 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
return
}
const totalWidth = ev.colLeafNodes.reduce((p, n) => {
n.width = n.width * scale
n.width = Math.round(n.width * scale)
n.x = p
return p + n.width
}, 0)
ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
if (totalWidth > containerWidth) {
// 从最后一列减掉
ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth
}
ev.colsHierarchy.width = containerWidth
})
}
// click

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

@ -11,7 +11,8 @@ import {
VALUE_FIELD,
QueryDataType,
TotalStatus,
Aggregation
Aggregation,
S2DataConfig
} from '@antv/s2'
import { formatterItem, valueFormatter } from '../../../formatter'
import { hexColorToRGBA, isAlphaColor, parseJson } from '../../../util'
@ -239,7 +240,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
// 空值处理
const newData = this.configEmptyDataStrategy(chart)
// data config
const s2DataConfig = {
const s2DataConfig: S2DataConfig = {
fields: {
rows: r,
columns: c,
@ -249,13 +250,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
data: newData,
sortParams: sortParams
}
// options
const style = this.configStyle(chart)
style.hierarchyCollapse = true
const s2Options: S2Options = {
width: containerDom.offsetWidth,
height: containerDom.offsetHeight,
style,
totals: tableTotal as Totals,
conditions: this.configConditions(chart),
tooltip: {
@ -264,7 +261,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
hierarchyType: basicStyle.tableLayoutMode ?? 'grid',
dataSet: spreadSheet => new CustomPivotDataset(spreadSheet)
}
// options
s2Options.style = this.configStyle(chart, s2DataConfig)
s2Options.style.hierarchyCollapse = true
// tooltip
this.configTooltip(chart, s2Options)
// 开始渲染

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

@ -22,7 +22,8 @@ import {
SERIES_NUMBER_FIELD,
type PivotSheet,
type Node,
type Meta
type Meta,
S2DataConfig
} from '@antv/s2'
import { keys, intersection, filter, cloneDeep, merge, find } from 'lodash-es'
import { createVNode, render } from 'vue'
@ -405,7 +406,7 @@ export function getCustomTheme(chart: Chart): S2Theme {
return theme
}
export function getStyle(chart: Chart): Style {
export function getStyle(chart: Chart, dataConfig: S2DataConfig): Style {
const style: Style = {}
let customAttr: DeepPartial<ChartAttr>
if (chart.customAttr) {
@ -441,18 +442,37 @@ export function getStyle(chart: Chart): Style {
width: fieldMap[drillEnterField.dataeaseName]?.width
}
}
// 铺满
const totalWidthPercent = dataConfig.meta?.reduce((p, n) => {
return p + (fieldMap[n.field]?.width ?? 10)
}, 0)
const fullFilled = parseInt(totalWidthPercent.toFixed(0)) === 100
const widthArr = []
style.colCfg.width = node => {
const width = node.spreadsheet.container.cfg.el.offsetWidth
const width = node.spreadsheet.container.cfg.el.getBoundingClientRect().width
if (!basicStyle.tableFieldWidth?.length) {
const fieldsSize = chart.data.fields.length
const columnCount = tableHeader.showIndex ? fieldsSize + 1 : fieldsSize
return width / columnCount
}
const baseWidth = width / 100
const resultWidth = fieldMap[node.field]
const tmpWidth = fieldMap[node.field]
? fieldMap[node.field].width * baseWidth
: baseWidth * 10
return parseInt(resultWidth.toFixed(0))
const resultWidth = parseInt(tmpWidth.toFixed(0))
if (fullFilled) {
widthArr.push(resultWidth)
if (widthArr.length === dataConfig.meta.length - 1) {
const curTotalWidth = widthArr.reduce((p, n) => {
return p + n
}, 0)
const restWidth = width - curTotalWidth
if (restWidth < resultWidth) {
return restWidth
}
}
}
return resultWidth
}
break
}

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

@ -10,7 +10,8 @@ import {
S2Options,
Meta,
SERIES_NUMBER_FIELD,
setTooltipContainerStyle
setTooltipContainerStyle,
S2DataConfig
} from '@antv/s2'
import {
configHeaderInteraction,
@ -42,8 +43,8 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
return getCustomTheme(chart)
}
protected configStyle(chart: Chart): Style {
return getStyle(chart)
protected configStyle(chart: Chart, s2DataConfig: S2DataConfig): Style {
return getStyle(chart, s2DataConfig)
}
protected configEmptyDataStrategy(chart: Chart): Record<string, any>[] {