diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index 32d5342a7..5e7ff4bef 100644 --- a/common/config/rush/version-policies.json +++ b/common/config/rush/version-policies.json @@ -1 +1 @@ -[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.16.2","mainProject":"@visactor/vtable","nextBump":"patch"}] +[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.16.3","mainProject":"@visactor/vtable","nextBump":"patch"}] diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index 53593cd15..e3e31ab42 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vtable", - "version": "0.16.2", + "version": "0.16.3", "description": "The react version of VTable", "keywords": [ "react", diff --git a/packages/vtable-editors/package.json b/packages/vtable-editors/package.json index 43de9cf01..32341ac03 100644 --- a/packages/vtable-editors/package.json +++ b/packages/vtable-editors/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-editors", - "version": "0.16.2", + "version": "0.16.3", "description": "", "sideEffects": false, "main": "cjs/index.js", diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index 4019d88c3..bd82c6334 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -1,6 +1,30 @@ { "name": "@visactor/vtable", "entries": [ + { + "version": "0.16.3", + "tag": "@visactor/vtable_v0.16.3", + "date": "Wed, 13 Dec 2023 11:43:30 GMT", + "comments": { + "none": [ + { + "comment": "fix: fix axis theme get function" + }, + { + "comment": "feat: add enableCellPadding config in custom layout" + }, + { + "comment": "feat: add column disableHover&disableSelect config" + }, + { + "comment": "fix: pivot table support not number type #718\n\n" + }, + { + "comment": "fix: edge cell selection border clip #716\n\n" + } + ] + } + }, { "version": "0.16.2", "tag": "@visactor/vtable_v0.16.2", diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index 4d6962362..93b372d8c 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -1,6 +1,21 @@ # Change Log - @visactor/vtable -This log was last generated on Wed, 13 Dec 2023 03:30:39 GMT and should not be manually modified. +This log was last generated on Wed, 13 Dec 2023 11:43:30 GMT and should not be manually modified. + +## 0.16.3 +Wed, 13 Dec 2023 11:43:30 GMT + +### Updates + +- fix: fix axis theme get function +- feat: add enableCellPadding config in custom layout +- feat: add column disableHover&disableSelect config +- fix: pivot table support not number type #718 + + +- fix: edge cell selection border clip #716 + + ## 0.16.2 Wed, 13 Dec 2023 03:30:39 GMT diff --git a/packages/vtable/examples/custom/custom-header.ts b/packages/vtable/examples/custom/custom-header.ts new file mode 100644 index 000000000..9e2cdf994 --- /dev/null +++ b/packages/vtable/examples/custom/custom-header.ts @@ -0,0 +1,427 @@ +/* eslint-disable */ +import * as VTable from '../../src'; +import VChart from '@visactor/vchart'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; + +const CONTAINER_ID = 'vTable'; +VTable.register.chartModule('vchart', VChart); +const padding = [10, 20, 10, 20]; + +export function createTable() { + const option = { + enableDataAnalysis: false, + autoRowHeight: true, + widthMode: 'standard', + heightMode: 'autoHeight', + disableColumnResize: false, + autoWrapText: false, + enableColumnResizeOnAllRows: true, + maxCharactersNumber: 256, + keyboardOptions: { + copySelected: false + }, + columnResizerType: 'all', + dropDownMenu: { + renderMode: 'html' + }, + records: [ + { + '10001': '销售额', + '10002': '16068954.125', + '10003': '231211225612017-day-measureValue', + '231211225612017': '16068954.125', + '231211225612017-day-measureValue': '16068954.125', + '231211225612024': '2147538.925', + OKR_TABLE_COLUMN_KEY: 'day-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '销售额', + '10002': '0', + '10003': '231211225612017-day-period-lastweekRatio', + '231211225612017': '16068954.125', + '231211225612017-day-period-lastweekRatio': '0', + '231211225612024': '2147538.925', + OKR_TABLE_COLUMN_KEY: 'day-period-lastweekRatio', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '销售额', + '10002': '16068954.125', + '10003': '231211225612017-week-measureValue', + '231211225612017': '16068954.125', + '231211225612017-week-measureValue': '16068954.125', + '231211225612024': '2147538.925', + OKR_TABLE_COLUMN_KEY: 'week-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '销售额', + '10002': '1156964697', + '10003': '231211225612017-quarter-measureValue', + '231211225612017': '1156964697', + '231211225612017-quarter-measureValue': '1156964697', + '231211225612024': '154622802.60000002', + OKR_TABLE_COLUMN_KEY: 'quarter-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '销售额', + '10002': '1', + '10003': '231211225612017-quarter-goalValue', + '231211225612017': '1156964697', + '231211225612017-quarter-goalValue': '1', + '231211225612024': '154622802.60000002', + OKR_TABLE_COLUMN_KEY: 'quarter-goalValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '销售额', + '10002': '482068623.75', + '10003': '231211225612017-quarter-goalProgress', + '231211225612017': '1156964697', + '231211225612017-quarter-goalProgress': '482068623.75', + '231211225612024': '154622802.60000002', + OKR_TABLE_COLUMN_KEY: 'quarter-goalProgress', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612017' + }, + { + '10001': '利润', + '10002': '2147538.925', + '10003': '231211225612024-day-measureValue', + '231211225612017': '16068954.125', + '231211225612024': '2147538.925', + '231211225612024-day-measureValue': '2147538.925', + OKR_TABLE_COLUMN_KEY: 'day-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + }, + { + '10001': '利润', + '10002': '-4.3366970618028645e-16', + '10003': '231211225612024-day-period-lastweekRatio', + '231211225612017': '16068954.125', + '231211225612024': '2147538.925', + '231211225612024-day-period-lastweekRatio': '-4.3366970618028645e-16', + OKR_TABLE_COLUMN_KEY: 'day-period-lastweekRatio', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + }, + { + '10001': '利润', + '10002': '2147538.925', + '10003': '231211225612024-week-measureValue', + '231211225612017': '16068954.125', + '231211225612024': '2147538.925', + '231211225612024-week-measureValue': '2147538.925', + OKR_TABLE_COLUMN_KEY: 'week-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + }, + { + '10001': '利润', + '10002': '154622802.60000002', + '10003': '231211225612024-quarter-measureValue', + '231211225612017': '1156964697', + '231211225612024': '154622802.60000002', + '231211225612024-quarter-measureValue': '154622802.60000002', + OKR_TABLE_COLUMN_KEY: 'quarter-measureValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + }, + { + '10001': '利润', + '10002': null, + '10003': '231211225612024-quarter-goalValue', + '231211225612017': '1156964697', + '231211225612024': '154622802.60000002', + '231211225612024-quarter-goalValue': null, + OKR_TABLE_COLUMN_KEY: 'quarter-goalValue', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + }, + { + '10001': '利润', + '10002': null, + '10003': '231211225612024-quarter-goalProgress', + '231211225612017': '1156964697', + '231211225612024': '154622802.60000002', + '231211225612024-quarter-goalProgress': null, + OKR_TABLE_COLUMN_KEY: 'quarter-goalProgress', + OKR_TABLE_COLUMN_UNIQUE_ID: '231211225612024' + } + ], + rows: [ + { + dimensionKey: '10001', + dimensionTitle: '', + headerStyle: { + textStick: true + }, + showSort: false + } + ], + columns: [ + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY' + } + ], + dimensions: [], + rowHierarchyType: 'grid', + rowHierarchyIndent: 30, + rowExpandLevel: 1, + showColumnHeader: true, + showRowHeader: true, + corner: { + titleOnDimension: 'row', + headerStyle: { + textStick: true + } + }, + hideIndicatorName: true, + rowTree: [ + { + dimensionKey: '10001', + value: '销售额' + }, + { + dimensionKey: '10001', + value: '利润' + } + ], + columnTree: [ + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'day-measureValue', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + }, + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'day-period-lastweekRatio', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + }, + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'week-measureValue', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + }, + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'quarter-measureValue', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + }, + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'quarter-goalValue', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + }, + { + dimensionKey: 'OKR_TABLE_COLUMN_KEY', + value: 'quarter-goalProgress', + children: [ + { + indicatorKey: '10002' + } + ], + headerCustomLayout: customHeader + } + ], + indicators: [ + { + indicatorKey: '10002', + width: 'auto', + showSort: false + } + ], + theme: { + headerStyle: { + borderColor: ['rgb(224, 224, 224)', 'rgb(224, 224, 224)'], + borderLineWidth: [1, 1, 3, 1], + padding: [8.6, 19, 8.6, 19], + textAlign: 'center', + hover: { + cellBgColor: 'rgba(0, 100, 250, 0.16)', + inlineRowBgColor: 'rgba(255, 255, 255, 0)', + inlineColumnBgColor: 'rgba(255, 255, 255, 0)' + }, + fontSize: 12, + fontFamily: + '-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"', + fontWeight: 'bold', + fontStyle: 'normal', + lineHeight: 18 + }, + bodyStyle: { + borderColor: ['rgb(224, 224, 224)', 'rgb(224, 224, 224)'], + borderLineWidth: 1, + padding: [8.6, 19, 8.6, 19], + textAlign: 'right', + hover: { + cellBgColor: 'rgba(186, 215, 255, 0.2)', + inlineRowBgColor: 'rgba(186, 215, 255, 0.2)', + inlineColumnBgColor: 'rgba(186, 215, 255, 0.2)' + }, + fontSize: 12, + fontFamily: + '-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"', + fontWeight: 'normal', + fontStyle: 'normal', + lineHeight: 18 + }, + rowHeaderStyle: { + borderColor: ['rgb(224, 224, 224)', 'rgb(224, 224, 224)'], + borderLineWidth: [1, 3, 1, 1], + padding: [8.6, 19, 8.6, 19], + textAlign: 'left', + hover: { + cellBgColor: 'rgba(0, 100, 250, 0.16)', + inlineRowBgColor: 'rgba(255, 255, 255, 0)', + inlineColumnBgColor: 'rgba(255, 255, 255, 0)' + }, + fontSize: 12, + fontFamily: + '-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"', + fontWeight: 'bold', + fontStyle: 'normal', + lineHeight: 18 + }, + cornerHeaderStyle: { + borderColor: ['rgb(224, 224, 224)', 'rgb(224, 224, 224)'], + borderLineWidth: [1, 3, 3, 1], + padding: [8.6, 19, 8.6, 19], + textAlign: 'left', + hover: { + cellBgColor: 'rgba(0, 100, 250, 0.16)', + inlineRowBgColor: 'rgba(255, 255, 255, 0)', + inlineColumnBgColor: 'rgba(255, 255, 255, 0)' + }, + fontSize: 12, + fontFamily: + '-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"', + fontWeight: 'bold', + fontStyle: 'normal', + lineHeight: 18 + }, + menuStyle: { + color: '#1B1F23', + highlightColor: '#1E54C9', + font: 'normal normal normal 12px -apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"', + highlightFont: + 'normal normal bold 12px -apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif,"apple color emoji","segoe ui emoji","segoe ui","segoe ui symbol"' + }, + underlayBackgroundColor: 'rgba(255,255,255,0)', + frameStyle: { + borderColor: 'rgb(224, 224, 224)', + borderLineWidth: 0 + }, + scrollStyle: { + visible: 'focus', + width: 7, + hoverOn: true + }, + selectionStyle: { + cellBorderColor: '#3073F2', + cellBorderLineWidth: [2, 2, 2, 2], + cellBgColor: 'rgba(186, 215, 255, 0.2)' + } + }, + tooltip: { + isShowOverflowTextTooltip: true + }, + hover: { + enableColumnHighlight: true, + enableRowHighlight: true, + enableSingalCellHighlight: true + }, + click: { + enableColumnHighlight: false, + enableRowHighlight: false, + enableSingalCellHighlight: true + }, + hash: '2a1cd4dd5dfb0692435bb365327a3cfa' + }; + const tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option); + // tableInstance.onVChartEvent('click', args => { + // console.log('listenChart click', args); + // }); + // tableInstance.onVChartEvent('mouseover', args => { + // console.log('listenChart mouseover', args); + // }); + window.tableInstance = tableInstance; + + bindDebugTool(tableInstance.scenegraph.stage, { + customGrapicKeys: ['col', 'row'] + }); +} + +const titles = [, '近1月指标值', '近1月目标值', '近1月环比', '近1月目标完成度', '近1月年同比', 'title']; +const dates = [, '04.01 - 04-15', '04', '03.01 - 03.15', '04', '2020.04.01 - 2020.04.15', 'date']; + +function customHeader(args: any) { + const { table, row, col, rect } = args; + const { height, width } = rect ?? table.getCellRect(col, row); + const record = table.getRecordByCell(col, row); + + const hasUnderline = true; + const container = new VTable.CustomLayout.Group({ + height, + width, + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + justifyContent: 'space-around', + // alignItems: 'flex-end', + // alignItems: 'center', + alignItems: 'flex-start' + }); + + const title = new VTable.CustomLayout.Text({ + text: titles[col], + fontSize: 12, + lineHeight: 18, + fontFamily: 'Arial', + fontWeight: 'bold', + fill: '#000', + underline: hasUnderline ? 1 : undefined + // boundsPadding: [0, padding[1], 0, padding[3]], + }); + + const date = new VTable.CustomLayout.Text({ + text: dates[col], + fontSize: 12, + lineHeight: 18, + fontFamily: 'Arial', + fontWeight: 'bold', + fill: '#000' + // boundsPadding: [0, padding[1], 0, padding[3]], + }); + + container.add(title); + container.add(date); + + return { + rootContainer: container, + renderDefault: false, + enableCellPadding: true + }; +} diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 3117ef1fb..fa41d44f1 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -379,6 +379,10 @@ export const menus = [ { path: 'pivot-analysis', name: 'pivot-analysis-field' + }, + { + path: 'pivot-analysis', + name: 'pivot-analysis-str' } ] }, @@ -545,6 +549,10 @@ export const menus = [ { path: 'custom', name: 'custom-layout' + }, + { + path: 'custom', + name: 'custom-header' } ] }, diff --git a/packages/vtable/examples/pivot-analysis/pivot-analysis-str.ts b/packages/vtable/examples/pivot-analysis/pivot-analysis-str.ts new file mode 100644 index 000000000..f3d36eb5f --- /dev/null +++ b/packages/vtable/examples/pivot-analysis/pivot-analysis-str.ts @@ -0,0 +1,334 @@ +import * as VTable from '../../src'; +const PivotTable = VTable.PivotTable; +const CONTAINER_ID = 'vTable'; +import { animalImageUrl, flowerVideoUrl } from '../resource-url'; +const sumNumberFormat = VTable.DataStatistics.numberFormat({ + suffix: '元' +}); +const countNumberFormat = VTable.DataStatistics.numberFormat({ + digitsAfterDecimal: 0, + thousandsSep: '', + suffix: '单' +}); +export function createTable() { + const option: VTable.PivotTableConstructorOptions = { + rows: ['province', 'city'], + columns: ['category', 'sub_category'], + indicators: ['销售总额', '订单数', '订单均价'], + enableDataAnalysis: true, + indicatorTitle: '指标名称', + indicatorsAsCol: false, + dataConfig: { + aggregationRules: [ + //做聚合计算的依据,如销售额如果没有配置则默认按聚合sum计算结果显示单元格内容 + { + indicatorKey: '销售总额', //指标名称 + field: 'sales', //指标依据字段 + aggregationType: VTable.TYPES.AggregationType.NONE //计算类型 + }, + { + indicatorKey: '订单数', //指标名称 + field: 'sales', //指标依据字段 + aggregationType: VTable.TYPES.AggregationType.COUNT, //计算类型 + formatFun: countNumberFormat + }, + { + indicatorKey: '订单均价', //指标名称 + field: 'sales', //指标依据字段 + aggregationType: VTable.TYPES.AggregationType.AVG, //计算类型 + formatFun: sumNumberFormat + } + ] + }, + corner: { titleOnDimension: 'row' }, + records: [ + { + sales: 'rrr', + number: 7789, + province: '浙江省', + city: '杭州市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 1891, + number: 7789, + province: '浙江省', + city: '杭州市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 792, + number: 2367, + province: '浙江省', + city: '绍兴市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 893, + number: 3877, + province: '浙江省', + city: '宁波市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 1094, + number: 4342, + province: '浙江省', + city: '舟山市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 1295, + number: 5343, + province: '浙江省', + city: '杭州市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 496, + number: 632, + province: '浙江省', + city: '绍兴市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 1097, + number: 7234, + province: '浙江省', + city: '宁波市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 998, + number: 834, + province: '浙江省', + city: '舟山市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 766, + number: 945, + province: '浙江省', + city: '杭州市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 990, + number: 1304, + province: '浙江省', + city: '绍兴市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 891, + number: 1145, + province: '浙江省', + city: '宁波市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 792, + number: 1432, + province: '浙江省', + city: '舟山市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 745, + number: 1343, + province: '浙江省', + city: '杭州市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: 843, + number: 1354, + province: '浙江省', + city: '绍兴市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: 895, + number: 1523, + province: '浙江省', + city: '宁波市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: 965, + number: 1634, + province: '浙江省', + city: '舟山市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: 776, + number: 1723, + province: '四川省', + city: '成都市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 634, + number: 1822, + province: '四川省', + city: '绵阳市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 909, + number: 1943, + province: '四川省', + city: '南充市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 399, + number: 2330, + province: '四川省', + city: '乐山市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 478, + number: 1900, + province: '四川省', + city: '乐山市', + category: '家具', + sub_category: '桌子' + }, + { + sales: 700, + number: 2451, + province: '四川省', + city: '成都市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 689, + number: 2244, + province: '四川省', + city: '绵阳市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 500, + number: 2333, + province: '四川省', + city: '南充市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 800, + number: 2445, + province: '四川省', + city: '乐山市', + category: '家具', + sub_category: '沙发' + }, + { + sales: 1044, + number: 2335, + province: '四川省', + city: '成都市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 689, + number: 245, + province: '四川省', + city: '绵阳市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 794, + number: 2457, + province: '四川省', + city: '南充市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 566, + number: 2458, + province: '四川省', + city: '乐山市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: animalImageUrl, + number: 1458, + province: '四川省', + city: '乐山市', + category: '办公用品', + sub_category: '笔' + }, + { + sales: 865, + number: 4004, + province: '四川省', + city: '成都市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: animalImageUrl, + number: 3077, + province: '四川省', + city: '绵阳市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: animalImageUrl, + number: 3551, + province: '四川省', + city: '南充市', + category: '办公用品', + sub_category: '纸张' + }, + { + sales: animalImageUrl, + number: 352, + province: '四川省', + city: '乐山市', + category: '办公用品', + sub_category: '纸张' + } + ], + widthMode: 'autoWidth' // 宽度模式:standard 标准模式; adaptive 自动填满容器 + }; + + const instance = new PivotTable(document.getElementById(CONTAINER_ID)!, option); + window.tableInstance = instance; + + // 只为了方便控制太调试用,不要拷贝 + window.tableInstance = instance; +} diff --git a/packages/vtable/examples/pivot-chart/pivotChart.ts b/packages/vtable/examples/pivot-chart/pivotChart.ts index cc0c7064e..3fe9cf2ef 100644 --- a/packages/vtable/examples/pivot-chart/pivotChart.ts +++ b/packages/vtable/examples/pivot-chart/pivotChart.ts @@ -137,6 +137,22 @@ export function createTable() { opacity: 0.2 } } + }, + theme: { + // axis: { + // label: { + // style: { + // fill: 'green' + // } + // } + // } + colorScheme: { + default: { + palette: { + axisLabelFontColor: 'red' + } + } + } } } }, @@ -287,6 +303,22 @@ export function createTable() { opacity: 0.2 } } + }, + theme: { + // axis: { + // label: { + // style: { + // fill: 'green' + // } + // } + // } + colorScheme: { + default: { + palette: { + axisLabelFontColor: 'red' + } + } + } } } } diff --git a/packages/vtable/examples/pivot/pivot-basic.ts b/packages/vtable/examples/pivot/pivot-basic.ts index 518182af9..856ecdafe 100644 --- a/packages/vtable/examples/pivot/pivot-basic.ts +++ b/packages/vtable/examples/pivot/pivot-basic.ts @@ -42,6 +42,11 @@ export function createTable() { frameStyle: { borderColor: '#00ffff', borderLineWidth: 2 + }, + hover: { + cellBgColor: '#0000FF', + inlineRowBgColor: '#0000FF', + inlineColumnBgColor: '#0000FF' } }, selectionStyle: { @@ -54,6 +59,11 @@ export function createTable() { frameStyle: { borderColor: '#ff00ff', borderLineWidth: 2 + }, + hover: { + cellBgColor: '#0000FF', + inlineRowBgColor: '#0000FF', + inlineColumnBgColor: '#0000FF' } }, cornerHeaderStyle: { @@ -68,8 +78,8 @@ export function createTable() { bodyStyle: { hover: { cellBgColor: '#CCE0FF', - inlineRowBgColor: '#F3F8FF', - inlineColumnBgColor: '#F3F8FF' + inlineRowBgColor: '#CCE0FF', + inlineColumnBgColor: '#CCE0FF' }, frameStyle: { borderColor: '#ffff00', @@ -107,7 +117,8 @@ export function createTable() { title: true, headerStyle: { textStick: true - } + }, + disableHeaderHover: true }, columns: [ { @@ -120,6 +131,7 @@ export function createTable() { return args.value; }, cornerDescription: '地区维度', + // disableHeaderHover: true, headerStyle: { textAlign: 'center', borderColor: 'blue', @@ -235,6 +247,7 @@ export function createTable() { { indicatorKey: '2', title: '利润', + disableHover: true, format(value) { // if (rec.rowDimensions[0].value === '东北') return `${rec.dataValue}%`; return value; @@ -468,7 +481,8 @@ export function createTable() { fontStyle: 'bold', fontFamily: 'sans-serif' // lineHeight: '20px' - } + }, + disableHeaderHover: true }, indicatorTitle: '指标名称', // indicatorsAsCol: false, @@ -482,6 +496,9 @@ export function createTable() { columnResizeType: 'indicator', // 'column' | 'indicator' | 'all' tooltip: { isShowOverflowTextTooltip: true + }, + hover: { + highlightMode: 'cross' } }; diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 97f5a7e1d..d7b4705d0 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable", - "version": "0.16.2", + "version": "0.16.3", "description": "canvas table width high performance", "keywords": [ "grid", diff --git a/packages/vtable/src/components/axis/axis.ts b/packages/vtable/src/components/axis/axis.ts index 073fee2fc..20103fb11 100644 --- a/packages/vtable/src/components/axis/axis.ts +++ b/packages/vtable/src/components/axis/axis.ts @@ -42,7 +42,6 @@ export class CartesianAxis { width: number, height: number, padding: [number, number, number, number], - chartSpecTheme: any, table: BaseTableAPI ) { this.table = table; @@ -51,9 +50,9 @@ export class CartesianAxis { this.option = merge( {}, // commonAxis, - getCommonAxis(chartSpecTheme), + getCommonAxis(option.__vtableChartTheme), getTableAxisTheme(this.orient, table.theme), - getChartSpecAxisTheme(this.orient, this.type, chartSpecTheme), + getChartSpecAxisTheme(this.orient, this.type, option.__vtableChartTheme), option ); diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 73efb4efa..03c37380b 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -3017,6 +3017,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { return false; } const define = this.getHeaderDefine(col, row); + if (!define) { + return false; + } if (define.dragHeader === undefined) { if (this.internalProps.dragHeaderMode === 'all') { return true; diff --git a/packages/vtable/src/dataset/dataset.ts b/packages/vtable/src/dataset/dataset.ts index c35c0e5f6..43ffc32a1 100644 --- a/packages/vtable/src/dataset/dataset.ts +++ b/packages/vtable/src/dataset/dataset.ts @@ -27,6 +27,7 @@ import { CountAggregator, MaxAggregator, MinAggregator, + NoneAggregator, RecordAggregator, SumAggregator, naturalSort, @@ -291,6 +292,7 @@ export class Dataset { this.registerAggregator(AggregationType.MAX, MaxAggregator); this.registerAggregator(AggregationType.MIN, MinAggregator); this.registerAggregator(AggregationType.AVG, AvgAggregator); + this.registerAggregator(AggregationType.NONE, NoneAggregator); } /**processRecord中按照collectValuesBy 收集了维度值。现在需要对有聚合需求的 处理收集维度值范围 */ private processCollectedValuesWithSumBy() { diff --git a/packages/vtable/src/dataset/statistics-helper.ts b/packages/vtable/src/dataset/statistics-helper.ts index d13143cc4..4359bf24f 100644 --- a/packages/vtable/src/dataset/statistics-helper.ts +++ b/packages/vtable/src/dataset/statistics-helper.ts @@ -4,7 +4,7 @@ import type { BaseTableAPI } from '../ts-types/base-table'; export abstract class Aggregator { className = 'Aggregator'; - isRecord?: boolean = true; + isRecord?: boolean = true; //是否需要维护records 将数据源都记录下来 records?: any[] = []; type?: string; field?: string | string[]; @@ -66,6 +66,26 @@ export class RecordAggregator extends Aggregator { this.records = []; } } + +export class NoneAggregator extends Aggregator { + type: string = AggregationType.NONE; //仅获取其中一条数据 不做聚合 其fieldValue可以是number或者string类型 + isRecord?: boolean = true; + declare field?: string; + fieldValue?: any; + push(record: any): void { + if (this.isRecord) { + this.records = [record]; + } + this.fieldValue = record[this.field]; + } + value() { + return this.fieldValue; + } + reset() { + this.records = []; + this.fieldValue = undefined; + } +} export class SumAggregator extends Aggregator { type: string = AggregationType.SUM; sum = 0; diff --git a/packages/vtable/src/layout/chart-helper/get-axis-config.ts b/packages/vtable/src/layout/chart-helper/get-axis-config.ts index c77705503..2c7d81e05 100644 --- a/packages/vtable/src/layout/chart-helper/get-axis-config.ts +++ b/packages/vtable/src/layout/chart-helper/get-axis-config.ts @@ -24,7 +24,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo return; } // range for top axis - const { range, ticks, axisOption, isZeroAlign } = axisRange; + const { range, ticks, axisOption, isZeroAlign, theme } = axisRange; if (isZeroAlign) { // range for bottom axis @@ -76,7 +76,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo label: { flush: true }, - __ticksForVTable: ticks + __ticksForVTable: ticks, + __vtableChartTheme: theme } ); } else if ( @@ -98,7 +99,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo return; } // range for bottom axis - const { range, ticks, axisOption, isZeroAlign } = axisRange; + const { range, ticks, axisOption, isZeroAlign, theme } = axisRange; if (isZeroAlign) { // range for top axis @@ -145,7 +146,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo label: { flush: true }, - __ticksForVTable: ticks + __ticksForVTable: ticks, + __vtableChartTheme: theme } ); } else if ( @@ -162,7 +164,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo const rowPath = layout.getRowKeysPath(col, row); const domain = (data[rowPath ?? ''] as Array) ?? []; - const { axisOption, isPercent } = getAxisOption(col + 1, row, 'left', layout); + const { axisOption, isPercent, theme } = getAxisOption(col + 1, row, 'left', layout); if (axisOption?.visible === false) { return; } @@ -177,7 +179,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'left', - type: 'band' + type: 'band', + __vtableChartTheme: theme } ); } @@ -201,7 +204,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo return; } // range for left axis - const { range, ticks, axisOption, isZeroAlign } = axisRange; + const { range, ticks, axisOption, isZeroAlign, theme } = axisRange; if (isZeroAlign) { // range for right axis @@ -248,7 +251,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo label: { flush: true }, - __ticksForVTable: ticks + __ticksForVTable: ticks, + __vtableChartTheme: theme } ); } else if ( @@ -261,7 +265,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo return; } // range for right axis - const { range, ticks, axisOption, isZeroAlign } = axisRange; + const { range, ticks, axisOption, isZeroAlign, theme } = axisRange; if (isZeroAlign) { // range for left axis @@ -306,7 +310,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo label: { flush: true }, - __ticksForVTable: ticks + __ticksForVTable: ticks, + __vtableChartTheme: theme } ); } else if ( @@ -325,7 +330,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo const colPath = layout.getColKeysPath(col, row); const domain = (data?.[colPath ?? ''] as Array) ?? []; - const { axisOption, isPercent } = getAxisOption(col, row - 1, 'bottom', layout); + const { axisOption, isPercent, theme } = getAxisOption(col, row - 1, 'bottom', layout); if (axisOption?.visible === false) { return; } @@ -337,7 +342,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'bottom', - type: 'band' + type: 'band', + __vtableChartTheme: theme } ); } @@ -366,7 +372,8 @@ export function getAxisOption(col: number, row: number, orient: string, layout: axisOption, isPercent: spec.percent, isZeroAlign: checkZeroAlign(spec, orient, layout), - seriesIndice + seriesIndice, + theme: spec.theme }; } } @@ -376,7 +383,8 @@ export function getAxisOption(col: number, row: number, orient: string, layout: return { axisOption, isPercent: false, - isZeroAlign: checkZeroAlign(spec, orient, layout) + isZeroAlign: checkZeroAlign(spec, orient, layout), + theme: spec.theme }; } @@ -484,7 +492,7 @@ function getRange( defaultSeriesIndice: number, layout: PivotHeaderLayoutMap ) { - const { axisOption, isPercent, isZeroAlign, seriesIndice } = getAxisOption( + const { axisOption, isPercent, isZeroAlign, seriesIndice, theme } = getAxisOption( colForAxisOption, rowForAxisOption, position, @@ -543,7 +551,8 @@ function getRange( axisOption, isZeroAlign, range, - ticks + ticks, + theme }; } diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 1ce344363..1b5211d85 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -243,7 +243,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { headerType: this.columnHeaderTitle.headerType ?? 'text', style: this.columnHeaderTitle.headerStyle, define: { - id + id, + disableHeaderHover: !!this.columnHeaderTitle.disableHeaderHover, + disableHeaderSelect: !!this.columnHeaderTitle.disableHeaderSelect } }; this.columnHeaderObjs.push(cell); @@ -287,7 +289,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { headerType: this.rowHeaderTitle.headerType ?? 'text', style: this.rowHeaderTitle.headerStyle, define: { - id + id, + disableHeaderHover: !!this.columnHeaderTitle.disableHeaderHover, + disableHeaderSelect: !!this.columnHeaderTitle.disableHeaderSelect } }; this.rowHeaderObjs.push(cell); @@ -535,7 +539,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { define: { dimensionKey: '维度名称', id, - value: dimensionKey + value: dimensionKey, + disableHeaderHover: !!this.cornerSetting.disableHeaderHover, + disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect }, dropDownMenu: dimensionInfo?.cornerDropDownMenu, pivotInfo: { @@ -575,7 +581,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { define: { dimensionKey: '维度名称', id, - value: '' + value: '', + disableHeaderHover: !!this.cornerSetting.disableHeaderHover, + disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect } }; results[id] = cell; @@ -1639,7 +1647,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { define: { field: '', headerType: 'text', - cellType: 'text' + cellType: 'text', + disableHeaderHover: !!this.columnHeaderTitle.disableHeaderHover, + disableHeaderSelect: !!this.columnHeaderTitle.disableHeaderSelect } }; this.rowHeaderObjs.push(cell); diff --git a/packages/vtable/src/layout/pivot-layout-helper.ts b/packages/vtable/src/layout/pivot-layout-helper.ts index 27cfe15fd..9ff0867de 100644 --- a/packages/vtable/src/layout/pivot-layout-helper.ts +++ b/packages/vtable/src/layout/pivot-layout-helper.ts @@ -482,7 +482,9 @@ export function dealHeaderForTreeMode( headerCustomRender: dimensionInfo?.headerCustomRender, headerCustomLayout: dimensionInfo?.headerCustomLayout, - dragHeader: dimensionInfo?.dragHeader + dragHeader: dimensionInfo?.dragHeader, + disableHeaderHover: !!dimensionInfo?.disableHeaderHover, + disableHeaderSelect: !!dimensionInfo?.disableHeaderSelect }), //这里不能新建对象,要用hd保持引用关系 fieldFormat: dimensionInfo?.headerFormat, // iconPositionList:[] diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts index dc875e36e..d6a7e75e4 100644 --- a/packages/vtable/src/scenegraph/component/custom.ts +++ b/packages/vtable/src/scenegraph/component/custom.ts @@ -23,9 +23,11 @@ export function dealWithCustom( height: number, autoWidth: boolean, autoHeight: boolean, + padding: [number, number, number, number], table: BaseTableAPI ) { let renderDefault = true; + let enableCellPadding = false; let expectedWidth: number; let expectedHeight: number; let customElements; @@ -60,6 +62,7 @@ export function dealWithCustom( // customElements = customRenderObj.rootContainer.getElements(undefined, false, false); } renderDefault = customRenderObj.renderDefault; + enableCellPadding = customRenderObj.enableCellPadding; } else if (typeof customRender === 'function') { const arg = { col, @@ -100,6 +103,15 @@ export function dealWithCustom( ); } + if (enableCellPadding) { + elementsGroup.setAttributes({ + x: padding[3], + y: padding[0], + width: width - padding[1] - padding[3], + height: height - padding[0] - padding[2] + }); + } + // for percent calc dealPercentCalc(elementsGroup, width, height); diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts index bb1390fbd..ba53d9066 100644 --- a/packages/vtable/src/scenegraph/graphic/chart.ts +++ b/packages/vtable/src/scenegraph/graphic/chart.ts @@ -154,7 +154,7 @@ export class Chart extends Group { this.active = false; // move active chart view box out of broswer view // to avoid async render when chart is releasd - this.activeChartInstance.updateViewBox( + this.activeChartInstance?.updateViewBox( { x1: -1000, x2: -800, @@ -164,7 +164,7 @@ export class Chart extends Group { false, false ); - this.activeChartInstance.release(); + this.activeChartInstance?.release(); this.activeChartInstance = null; } /** 更新图表对应数据 */ diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index 9a67ef456..4b59b8983 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -142,6 +142,7 @@ export function createCell( cellHeight, false, table.heightMode === 'autoHeight', + padding, table ); customElementsGroup = customResult.elementsGroup; @@ -169,15 +170,7 @@ export function createCell( const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row); if (axisConfig) { - const spec = table.internalProps.layoutMap.getRawChartSpec(col, row); - const axis = new CartesianAxis( - axisConfig, - cellGroup.attribute.width, - cellGroup.attribute.height, - padding, - spec?.theme, - table - ); + const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table); cellGroup.clear(); cellGroup.appendChild(axis.component); axis.overlap(); diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts index 704d715dd..4ad8ae00b 100644 --- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts +++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts @@ -431,6 +431,7 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI) let spanCol = 1; let width = 0; let renderDefault = false; + let enableCellPadding = false; if (table.isHeader(col, row) || (table.getBodyColumnDefine(col, row) as TextColumnDefine)?.mergeCell) { const cellRange = table.getCellRange(col, row); spanCol = cellRange.end.col - cellRange.start.col + 1; @@ -452,6 +453,7 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI) customLayoutObj.rootContainer.setStage(table.scenegraph.stage); width = (customLayoutObj.rootContainer as VGroup).AABBBounds.width() ?? 0; renderDefault = customLayoutObj.renderDefault; + enableCellPadding = customLayoutObj.enableCellPadding; } else { width = 0; } @@ -464,6 +466,11 @@ function computeCustomRenderWidth(col: number, row: number, table: BaseTableAPI) width = customRender?.expectedWidth ?? 0; renderDefault = customRender?.renderDefault; } + if (enableCellPadding) { + const actStyle = table._getCellStyle(col, row); + const padding = getQuadProps(getProp('padding', actStyle, col, row, table)); + width += padding[1] + padding[3]; + } return { width: width / spanCol, renderDefault diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index ecdc7f8dd..b5f0f3d22 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -219,7 +219,7 @@ export function computeRowsHeight( actualHeight += rowHeight; } - + table.scenegraph._dealAutoFillHeightOriginRowsHeight = actualHeight; // 如果内容高度小于canvas高度,执行adaptive放大 if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) { const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight); @@ -460,6 +460,7 @@ function computeCustomRenderHeight(col: number, row: number, table: BaseTableAPI let spanRow = 1; let height = 0; let renderDefault = false; + let enableCellPadding = false; if (table.isHeader(col, row) || (table.getBodyColumnDefine(col, row) as TextColumnDefine)?.mergeCell) { const cellRange = table.getCellRange(col, row); spanRow = cellRange.end.row - cellRange.start.row + 1; @@ -481,6 +482,7 @@ function computeCustomRenderHeight(col: number, row: number, table: BaseTableAPI customLayoutObj.rootContainer.setStage(table.scenegraph.stage); height = (customLayoutObj.rootContainer as VGroup).AABBBounds.height() ?? 0; renderDefault = customLayoutObj.renderDefault; + enableCellPadding = customLayoutObj.enableCellPadding; } else { height = 0; } @@ -493,6 +495,11 @@ function computeCustomRenderHeight(col: number, row: number, table: BaseTableAPI height = customRender?.expectedHeight ?? 0; renderDefault = customRender?.renderDefault; } + if (enableCellPadding) { + const actStyle = table._getCellStyle(col, row); + const padding = getQuadProps(getProp('padding', actStyle, col, row, table)); + height += padding[0] + padding[2]; + } return { height: height / spanRow, renderDefault diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts index 14c3b7ab5..aee5064e4 100644 --- a/packages/vtable/src/scenegraph/layout/update-height.ts +++ b/packages/vtable/src/scenegraph/layout/update-height.ts @@ -186,6 +186,8 @@ export function updateCellHeight( if (customLayout || customRender) { // const { autoRowHeight } = table.internalProps; + const style = scene.table._getCellStyle(col, row) as ProgressBarStyle; + const padding = getQuadProps(getProp('padding', style, col, row, scene.table)); const customResult = dealWithCustom( customLayout, customRender, @@ -195,6 +197,7 @@ export function updateCellHeight( cell.attribute.height, false, scene.table.heightMode === 'autoHeight', + padding, scene.table ); customElementsGroup = customResult.elementsGroup; diff --git a/packages/vtable/src/scenegraph/layout/update-width.ts b/packages/vtable/src/scenegraph/layout/update-width.ts index 5fc088471..b0bc3b69d 100644 --- a/packages/vtable/src/scenegraph/layout/update-width.ts +++ b/packages/vtable/src/scenegraph/layout/update-width.ts @@ -298,13 +298,11 @@ function updateCellWidth( const cellStyle = scene.table._getCellStyle(col, row); const padding = getQuadProps(getProp('padding', cellStyle, col, row, scene.table)); if (axisConfig) { - const spec = scene.table.internalProps.layoutMap.getRawChartSpec(col, row); const axis = new CartesianAxis( axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, - spec?.theme, scene.table ); cellGroup.clear(); @@ -336,6 +334,8 @@ function updateCellWidth( if (customLayout || customRender) { // const { autoRowHeight } = table.internalProps; + const style = scene.table._getCellStyle(col, row) as ProgressBarStyle; + const padding = getQuadProps(getProp('padding', style, col, row, scene.table)); const customResult = dealWithCustom( customLayout, customRender, @@ -345,6 +345,7 @@ function updateCellWidth( cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', + padding, scene.table ); customElementsGroup = customResult.elementsGroup; diff --git a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts index e55bb6811..209725a5b 100644 --- a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts +++ b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts @@ -181,15 +181,7 @@ function updateTableAxes(containerGroup: Group, table: BaseTableAPI) { const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(cell.col, cell.row); const cellStyle = table._getCellStyle(cell.col, cell.row); const padding = getQuadProps(getProp('padding', cellStyle, cell.col, cell.row, table)); - const spec = table.internalProps.layoutMap.getRawChartSpec(cell.col, cell.row); - const axis = new CartesianAxis( - axisConfig, - cell.attribute.width, - cell.attribute.height, - padding, - spec?.theme, - table - ); + const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, padding, table); cell.clear(); cell.appendChild(axis.component); axis.overlap(); diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 18c56247b..782f9c4f4 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -139,7 +139,7 @@ export class Scenegraph { clear: boolean; mergeMap: MergeMap; - + _dealAutoFillHeightOriginRowsHeight: number; // hack 缓存一个值 用于处理autoFillHeight的逻辑判断 在某些情况下是需要更新此值的 如增删数据 但目前没有做这个 constructor(table: BaseTableAPI) { this.table = table; this.hasFrozen = false; @@ -794,7 +794,7 @@ export class Scenegraph { } } - if (this.table.heightMode === 'adaptive' || this.table.autoFillHeight) { + if (this.table.heightMode === 'adaptive') { // perf to be optimized: // reason to use recalculateRowHeights(); // 1. error amplification(误差放大) in dealHeightMode when multiple resize @@ -802,6 +802,8 @@ export class Scenegraph { // will cause scale error in dealHeightMode() this.recalculateRowHeights(); // this.dealHeightMode(); + } else if (this.table.autoFillHeight) { + this.dealHeightMode(); } // this.dealWidthMode(); @@ -1205,9 +1207,11 @@ export class Scenegraph { actualHeight += rowHeight; } - // 如果内容高度小于canvas高度,执行adaptive放大 - if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) { + if ( + (this._dealAutoFillHeightOriginRowsHeight ?? actualHeight) < canvasHeight && + actualHeight - actualHeaderHeight > 0 + ) { const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight); for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) { // this.setRowHeight(row, table.getRowHeight(row) * factor); diff --git a/packages/vtable/src/scenegraph/select/update-select-border.ts b/packages/vtable/src/scenegraph/select/update-select-border.ts index f794bcd0f..5f49642ef 100644 --- a/packages/vtable/src/scenegraph/select/update-select-border.ts +++ b/packages/vtable/src/scenegraph/select/update-select-border.ts @@ -217,6 +217,32 @@ function updateComponent(selectComp: { rect: IRect; role: CellSubLocation }, key ); } //#endregion + + //#region 处理边缘被截问题 + const diffSize = Math.ceil(selectComp.rect.attribute.lineWidth / 2); + if (endCol === scene.table.colCount - 1) { + selectComp.rect.setAttributes({ + width: selectComp.rect.attribute.width - diffSize + }); + } + if (startCol === 0) { + selectComp.rect.setAttributes({ + x: selectComp.rect.attribute.x + diffSize, + width: selectComp.rect.attribute.width - diffSize + }); + } + if (endRow === scene.table.rowCount - 1) { + selectComp.rect.setAttributes({ + height: selectComp.rect.attribute.height - diffSize + }); + } + if (startRow === 0) { + selectComp.rect.setAttributes({ + y: selectComp.rect.attribute.y + diffSize, + height: selectComp.rect.attribute.height - diffSize + }); + } + //#endregion } export function updateCellSelectBorder( diff --git a/packages/vtable/src/state/hover/is-cell-hover.ts b/packages/vtable/src/state/hover/is-cell-hover.ts index 5f633a340..18c3a0596 100644 --- a/packages/vtable/src/state/hover/is-cell-hover.ts +++ b/packages/vtable/src/state/hover/is-cell-hover.ts @@ -62,21 +62,37 @@ export function isCellHover(state: StateManager, col: number, row: number): stri return undefined; } + let hoverMode; if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) { - return 'cellBgColor'; + hoverMode = 'cellBgColor'; } else if (highlightScope === HighlightScope.column && cellPos.col === col) { - return 'inlineColumnBgColor'; + hoverMode = 'inlineColumnBgColor'; } else if (highlightScope === HighlightScope.row && cellPos.row === row) { - return 'inlineRowBgColor'; + hoverMode = 'inlineRowBgColor'; } else if (highlightScope === HighlightScope.cross) { if (cellPos.col === col && cellPos.row === row) { - return 'cellBgColor'; + hoverMode = 'cellBgColor'; } else if (cellPos.col === col) { - return 'inlineColumnBgColor'; + hoverMode = 'inlineColumnBgColor'; } else if (cellPos.row === row) { - return 'inlineRowBgColor'; + hoverMode = 'inlineRowBgColor'; } } - return undefined; + if (hoverMode) { + let cellDisable; + if (isHeader) { + const define = table.getHeaderDefine(col, row); + cellDisable = define.disableHeaderHover; + } else { + const define = table.getBodyColumnDefine(col, row); + cellDisable = define.disableHover; + } + + if (cellDisable) { + hoverMode = undefined; + } + } + + return hoverMode; } diff --git a/packages/vtable/src/ts-types/component/axis.ts b/packages/vtable/src/ts-types/component/axis.ts index 877f64482..350ac5acb 100644 --- a/packages/vtable/src/ts-types/component/axis.ts +++ b/packages/vtable/src/ts-types/component/axis.ts @@ -5,6 +5,7 @@ export type ICellAxisOption = Omit & | { type: 'band'; domain: (number | string)[]; + __vtableChartTheme?: any; } | { type: 'linear' | 'time'; @@ -13,6 +14,7 @@ export type ICellAxisOption = Omit & max: number; }; __ticksForVTable?: number[]; + __vtableChartTheme?: any; } ); diff --git a/packages/vtable/src/ts-types/customLayout.ts b/packages/vtable/src/ts-types/customLayout.ts index 7188592b4..f92699c7f 100644 --- a/packages/vtable/src/ts-types/customLayout.ts +++ b/packages/vtable/src/ts-types/customLayout.ts @@ -7,6 +7,10 @@ export type ICustomLayoutObj = { * 是否还需要默认渲染内容 只有配置true才绘制 默认 不绘制 */ renderDefault?: boolean; + /** + * 是否还启用style中的padding + */ + enableCellPadding?: boolean; }; export type ICustomLayoutFuc = (args: CustomRenderFunctionArg) => ICustomLayoutObj; diff --git a/packages/vtable/src/ts-types/list-table/define/basic-define.ts b/packages/vtable/src/ts-types/list-table/define/basic-define.ts index 402d12450..055566ae3 100644 --- a/packages/vtable/src/ts-types/list-table/define/basic-define.ts +++ b/packages/vtable/src/ts-types/list-table/define/basic-define.ts @@ -28,8 +28,8 @@ export interface IBasicHeaderDefine { showSort?: boolean; /** 该列不支持hover交互行为 */ disableHover?: boolean; - /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ - headerSelectMode?: 'inline' | 'cell'; + // /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ + // headerSelectMode?: 'inline' | 'cell'; /** 该列不支持选中 */ disableSelect?: boolean; /** 该列表头不支持hover交互行为 */ diff --git a/packages/vtable/src/ts-types/new-data-set.ts b/packages/vtable/src/ts-types/new-data-set.ts index 9e87a6435..7e03374b0 100644 --- a/packages/vtable/src/ts-types/new-data-set.ts +++ b/packages/vtable/src/ts-types/new-data-set.ts @@ -10,6 +10,7 @@ export interface TotalsStatus { export enum AggregationType { RECORD = 'RECORD', + NONE = 'NONE', //不做聚合 只获取其中一条数据作为节点的record 取其field SUM = 'SUM', MIN = 'MIN', MAX = 'MAX', diff --git a/packages/vtable/src/ts-types/pivot-table/corner.ts b/packages/vtable/src/ts-types/pivot-table/corner.ts index e0e2c859e..45c87a86c 100644 --- a/packages/vtable/src/ts-types/pivot-table/corner.ts +++ b/packages/vtable/src/ts-types/pivot-table/corner.ts @@ -5,6 +5,11 @@ interface IBasicCornerDefine { titleOnDimension?: ShowColumnRowType; //角头标题是否显示列维度名称 否则显示行维度名称 // headerStyle?: HeaderStyleOption | null; //角头标题的样式 // headerType?: HeaderTypeOption | null; //角头标题的类型 + + /** 该表头单元格不支持hover交互行为 */ + disableHeaderHover?: boolean; + /** 该表头单元格不支持选中 */ + disableHeaderSelect?: boolean; } interface ITextCornerDefine extends IBasicCornerDefine { diff --git a/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts b/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts index 5b96f9d07..0cb844dbb 100644 --- a/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts +++ b/packages/vtable/src/ts-types/pivot-table/dimension/basic-dimension.ts @@ -52,4 +52,11 @@ export interface IBasicDimension { * 描述信息 hover时提示信息 */ cornerDescription?: string; + + // /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ + // headerSelectMode?: 'inline' | 'cell'; + /** 该维度单元格不支持hover交互行为 */ + disableHeaderHover?: boolean; + /** 该维度单元格不支持选中 */ + disableHeaderSelect?: boolean; } diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts index 5580d7a5b..65c52edbd 100644 --- a/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts +++ b/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts @@ -32,6 +32,13 @@ export interface IBasicHeaderIndicator { /** 指标名称表头自定义布局元素 */ headerCustomLayout?: ICustomLayout; editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor); + + // /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格,默认或整行或整列选中*/ + // headerSelectMode?: 'inline' | 'cell'; + /** 该指标表头单元格不支持hover交互行为 */ + disableHeaderHover?: boolean; + /** 该指标表头单元格不支持选中 */ + disableHeaderSelect?: boolean; } export interface IBasicColumnIndicator { @@ -52,4 +59,9 @@ export interface IBasicColumnIndicator { customRender?: ICustomRender; // body单元格的自定义内容 /** 指标值body单元格自定义布局元素 */ customLayout?: ICustomLayout; + + /** 该指标内容不支持hover交互行为 */ + disableHover?: boolean; + /** 该指标内容不支持选中 */ + disableSelect?: boolean; } diff --git a/packages/vtable/src/ts-types/pivot-table/title.ts b/packages/vtable/src/ts-types/pivot-table/title.ts index c80f71da2..20edddc27 100644 --- a/packages/vtable/src/ts-types/pivot-table/title.ts +++ b/packages/vtable/src/ts-types/pivot-table/title.ts @@ -3,6 +3,10 @@ import type { IImageStyleOption, ITextStyleOption } from '../column'; type IBasicTitleDefine = { /** 显示表头标题。默认为true,显示内容则由各级的维度名称组合而成,如'地区|省份'。 */ title: true | string; + /** 该单元格不支持hover交互行为 */ + disableHeaderHover?: boolean; + /** 该单元格不支持选中 */ + disableHeaderSelect?: boolean; }; type ITextTitleDefine = IBasicTitleDefine & {