From e99afa88166153f2e40c363bcf2e0c930bb6ddc1 Mon Sep 17 00:00:00 2001 From: wisonic Date: Wed, 25 Sep 2024 19:30:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E6=A8=A1=E5=BC=8F=E9=93=BA=E6=BB=A1?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20#11640=20#11704?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/table/table-info.ts | 64 ++++++++++++++++++- .../js/panel/charts/table/table-normal.ts | 46 ++++++++++++- .../js/panel/common/common_table.ts | 1 - .../views/components/ChartComponentS2.vue | 2 +- 4 files changed, 109 insertions(+), 4 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 a458af895c..d1ddc55392 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,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 { // 开始渲染 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 = 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) 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 2ad3fde3ae..aefa5e3116 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 @@ -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 { } // 开始渲染 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 = 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) 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 92ba2afe13..113e51f7ce 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 @@ -412,7 +412,6 @@ export function getStyle(chart: Chart): Style { } switch (basicStyle.tableColumnMode) { case 'adapt': { - delete style.cellCfg.width style.layoutWidthType = 'compact' break } diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue index d7380d1ab8..c0a0af58e6 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue @@ -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