From 9ace4f8b870c3f79ff1a9d965c474caae2add3b3 Mon Sep 17 00:00:00 2001 From: wisonic Date: Mon, 14 Oct 2024 18:54:29 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E9=93=BA=E6=BB=A1=E4=B9=8B=E5=90=8E=E5=87=BA=E7=8E=B0=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=9D=A1=20#12461?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/table/table-info.ts | 36 ++++++++++--------- .../js/panel/charts/table/table-normal.ts | 21 ++++++----- .../js/panel/charts/table/table-pivot.ts | 13 ++++--- .../js/panel/common/common_table.ts | 30 +++++++++++++--- .../components/js/panel/types/impl/s2.ts | 7 ++-- 5 files changed, 68 insertions(+), 39 deletions(-) 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 ddaf81371e..d005fa068a 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,5 +1,6 @@ import { type LayoutResult, + S2DataConfig, S2Event, S2Options, TableColCell, @@ -129,7 +130,7 @@ export class TableInfo extends S2ChartView { // 空值处理 const newData = this.configEmptyDataStrategy(chart) // data config - const s2DataConfig = { + const s2DataConfig: S2DataConfig = { fields: { columns: columns }, @@ -138,27 +139,26 @@ export class TableInfo extends S2ChartView { } 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 { 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 { 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 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 90823f487e..be1a32a024 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 @@ -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 { // 空值处理 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 { 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 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 92a00d8c47..e51b203524 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 @@ -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 { // 空值处理 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 { 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 { 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) // 开始渲染 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 32bf06f53f..bd623be139 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 @@ -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 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 } 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 dc0fa85078..8f2ea866fb 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 @@ -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

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[] {