Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions docs/assets/guide/en/data_analysis/pivot_table_dataAnalysis.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,16 @@ dataConfig: {
subTotalsDimensions: ['province'],
grandTotalLabel: 'row total',
subTotalLabel: 'Subtotal',
showGrandTotalsOnTop: true //totals show on top
showGrandTotalsOnTop: true, //totals show on top
showSubTotalsOnTreeNode: false // When subtotals are disabled in pivot tables, this option allows aggregated values to be displayed on collapsed tree nodes. Default value is false.
},
column: {
showGrandTotals: true,
showSubTotals: true,
subTotalsDimensions: ['quarter'],
grandTotalLabel: 'column total',
subTotalLabel: 'Subtotal'
subTotalLabel: 'Subtotal',
showSubTotalsOnTreeNode: false // When subtotals are disabled in pivot tables, this option allows aggregated values to be displayed on collapsed tree nodes. Default value is false.
}
}
},
Expand Down Expand Up @@ -250,9 +252,10 @@ dataConfig:{
}]
}
```
In this data record, the sales indicator is a non-numeric value. If the product requirement is to directly display `"NULL"` in the table cell, then the aggregation rule can be set to `VTable.TYPES.AggregationType.NONE`, so that VTable's internal will not perform aggregation calculations, but directly take the `sales` field value as the display value of the cell.

2. AggregationType.RECORD usage scenario is mainly used to match all data based on the user's input data record and use it as the display data of the cell. Usage scenarios include: needing to collect data sets for mini-chart displays, specific demo see: https://visactor.io/vtable/demo/cell-type/pivot-sparkline
In this data record, the sales indicator is a non-numeric value. If the product requirement is to directly display `"NULL"` in the table cell, then the aggregation rule can be set to `VTable.TYPES.AggregationType.NONE`, so that VTable's internal will not perform aggregation calculations, but directly take the `sales` field value as the display value of the cell.

2. AggregationType.RECORD usage scenario is mainly used to match all data based on the user's input data record and use it as the display data of the cell. Usage scenarios include: needing to collect data sets for mini-chart displays, specific demo see: https://visactor.io/vtable/demo/cell-type/pivot-sparkline

#### Custom Aggregation Type Introduction

Expand Down Expand Up @@ -313,7 +316,7 @@ const option={
{
indicatorKey: 'Average Product Price (Registered Aggregation Class)', //Indicator name
field: 'sales', //Indicator based field
aggregationType: 'avgPrice', //Registered aggregation type
aggregationType: 'avgPrice', //Registered aggregation type
}
]
}
Expand All @@ -323,6 +326,7 @@ const option={
VTable's internal aggregation rules code address: https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/ts-types/dataset/aggregation.ts, can be referred to!

The methods that need to be implemented for the aggregation type are:

- constructor: The constructor function, used to initialize the aggregator.
- push: Add data records to the aggregator, used to calculate the aggregated value.
- deleteRecord: Delete records from the aggregator and update the aggregated value, called by VTable's delete interface deleteRecords.
Expand Down Expand Up @@ -591,4 +595,4 @@ Interface definition:
* @param isResetTree Whether to reset the table header tree structure. When true, the table header tree structure will be reset, when false, the table header tree structure will remain unchanged
*/
updateFilterRules(filterRules: FilterRules, isResetTree: boolean = false) => void
```
```
23 changes: 13 additions & 10 deletions docs/assets/guide/zh/data_analysis/pivot_table_dataAnalysis.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,16 @@ dataConfig: {
subTotalsDimensions: ['province'],
grandTotalLabel: '行总计',
subTotalLabel: '小计',
showGrandTotalsOnTop: true //汇总值显示在上
showGrandTotalsOnTop: true, //汇总值显示在上
showSubTotalsOnTreeNode: false // 当在透视表中禁用小计时,此选项允许在折叠的树节点上显示聚合值。默认值为 false
},
column: {
showGrandTotals: true,
showSubTotals: true,
subTotalsDimensions: ['quarter'],
grandTotalLabel: '列总计',
subTotalLabel: '小计'
subTotalLabel: '小计',
showSubTotalsOnTreeNode: false // 当在透视表中禁用小计时,此选项允许在折叠的树节点上显示聚合值。默认值为 false
}
}
},
Expand Down Expand Up @@ -163,7 +165,7 @@ dataConfig: {

通常情况下指标应该是 `number` 类型,这样内部才能进行计算。

如果指标是字符串型或者 `null`,且需要在单元格中进行展示,可以配置 `aggregationType` 为 `VTable.TYPES.AggregationType.NONE` 来显示数据源字段的原始值; 或者在指标format函数中结合接口`getCellOriginRecord`获取到单元格对应的数据源条目,然后进行特殊处理。
如果指标是字符串型或者 `null`,且需要在单元格中进行展示,可以配置 `aggregationType` 为 `VTable.TYPES.AggregationType.NONE` 来显示数据源字段的原始值; 或者在指标 format 函数中结合接口`getCellOriginRecord`获取到单元格对应的数据源条目,然后进行特殊处理。

如果用到了自定义渲染 `customLayout`,在 `customLayout` 函数中想获取单元格对应的所有数据 `records`,可以配置 `aggregationType` 为 `VTable.TYPES.AggregationType.RECORD`。

Expand Down Expand Up @@ -218,7 +220,7 @@ dataConfig: {
{
indicatorKey: '商品均价(注册聚合类)', //指标名称
field: 'sales', //指标依据字段
aggregationType: 'avgPrice', //自己注册的聚合类型
aggregationType: 'avgPrice', //自己注册的聚合类型
}
]
}
Expand Down Expand Up @@ -252,7 +254,7 @@ dataConfig:{
}
```

其中该条数据 record 中 sales 指标是个非数值型的值,如果产品需求要将`"NULL"`直接显示到表格单元格中,那么可以设置聚合规则为`VTable.TYPES.AggregationType.NONE`,这样 VTable 的内部不会进行聚合计算,而是直接取`sales`字段值作为单元格展示值。
其中该条数据 record 中 sales 指标是个非数值型的值,如果产品需求要将`"NULL"`直接显示到表格单元格中,那么可以设置聚合规则为`VTable.TYPES.AggregationType.NONE`,这样 VTable 的内部不会进行聚合计算,而是直接取`sales`字段值作为单元格展示值。

2. AggregationType.RECORD 使用场景主要用于根据用户传入数据 record 匹配到所有数据,将其作为单元格的展示数据,用法场景如:需要搜集数据集作为迷你图展示,具体 demo 见:https://visactor.io/vtable/demo/cell-type/pivot-sparkline

Expand Down Expand Up @@ -315,20 +317,21 @@ const option={
{
indicatorKey: '商品均价(注册聚合类)', //指标名称
field: 'sales', //指标依据字段
aggregationType: 'avgPrice', //自己注册的聚合类型
aggregationType: 'avgPrice', //自己注册的聚合类型
}
]
}
}
```

VTable内部的几种聚合规则代码地址:https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/ts-types/dataset/aggregation.ts,可予以参考!
VTable 内部的几种聚合规则代码地址:https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/ts-types/dataset/aggregation.ts,可予以参考!

其中聚合类型需要实现的几个方法分别为:

- constructor:构造函数,用于初始化聚合器。
- push:将数据记录添加到聚合器中,用于计算聚合值。
- deleteRecord:从聚合器中删除记录,并更新聚合值,调用vtable的删除接口deleteRecords会调用该接口
- updateRecord:更新数据记录,并更新聚合值,调用接口updateRecords会调用该接口
- deleteRecord:从聚合器中删除记录,并更新聚合值,调用 vtable 的删除接口 deleteRecords 会调用该接口
- updateRecord:更新数据记录,并更新聚合值,调用接口 updateRecords 会调用该接口
- recalculate:重新计算聚合值,目前复制粘贴单元格值会调用该方法。
- value:获取聚合值。
- reset:重置聚合器。
Expand Down Expand Up @@ -593,4 +596,4 @@ VTable 官网示例:https://visactor.io/vtable/demo/table-type/pivot-table.
* @param isResetTree 是否重置表头树结构。 当为true时,会重置表头树结构,当为false时,表头树结构维持不变
*/
updateFilterRules(filterRules: FilterRules, isResetTree: boolean = false) => void
```
```
6 changes: 5 additions & 1 deletion docs/assets/option/en/table/pivotTable.md
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,8 @@ export interface Total {
grandTotalLabel?: string;
//Default 'Subtotal'
subTotalLabel?: string;
// When subtotals are disabled in pivot tables, this option allows aggregated values to be displayed on collapsed tree nodes. Default value is false.
showSubTotalsOnTreeNode?: boolean;
}
```

Expand Down Expand Up @@ -268,6 +270,7 @@ export interface CalculatedFieldRule {
calculateFun?: (dependFieldsValue: any) => any;
}
```

### updateAggregationOnEditCell (boolean)

Whether to update total and subtotal after editing cell value. Default value is false.
Expand Down Expand Up @@ -460,4 +463,5 @@ columnWidthConfigForRowHeader": [
}
]
```
Matching key is the key of the row dimension: dimensionKey。

Matching key is the key of the row dimension: dimensionKey。
8 changes: 6 additions & 2 deletions docs/assets/option/zh/table/pivotTable.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,8 @@ export interface Total {
grandTotalLabel?: string;
// 默认'小计'
subTotalLabel?: string;
// 当在透视表中禁用小计时,此选项允许在折叠的树节点上显示聚合值。默认值为 false
showSubTotalsOnTreeNode?: boolean;
}
```

Expand Down Expand Up @@ -272,9 +274,10 @@ export interface CalculateddFieldRule {
calculateFun?: (dependFieldsValue: any) => any;
}
```

### updateAggregationOnEditCell (boolean)

是否在修改单元格后更新小计和总计。默认值为false.
是否在修改单元格后更新小计和总计。默认值为 false.

具体情况请参考[demo](../demo/data-analysis/pivot-analysis-updateTotalData)

Expand Down Expand Up @@ -450,6 +453,7 @@ export interface IIndicatorHeaderNode {
## columnWidthConfigForRowHeader(Array)

依据行维度信息设置行表头列宽, 设置示例:

```
columnWidthConfigForRowHeader": [
{
Expand All @@ -463,5 +467,5 @@ columnWidthConfigForRowHeader": [
}
]
```
匹配关键是行维度的key:dimensionKey。

匹配关键是行维度的 key:dimensionKey。
56 changes: 39 additions & 17 deletions packages/vtable/src/dataset/dataset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1179,10 +1179,13 @@ export class Dataset {
// 如果是平铺树结构 小计需要处理补充到rowKey中
if (rowKey[0] === this.rowGrandTotalLabel) {
} else if (
this.totals?.row?.subTotalsDimensions &&
this.totals?.row?.subTotalsDimensions?.length >= 1 &&
rowKey[rowKey.length - 1] !== this.rowSubTotalLabel &&
this.totals.row.subTotalsDimensions.find((dimension: string) => dimension === rowDimensionKey) //如果维度key在subTotalsDimensions中 则需要补充小计标签名到rowKey中
(
(this.totals?.row?.subTotalsDimensions &&
this.totals?.row?.subTotalsDimensions?.length >= 1 &&
this.totals.row.subTotalsDimensions.find((dimension: string) => dimension === rowDimensionKey)) ||
this.totals?.row?.showSubTotalsOnTreeNode
) &&
rowKey[rowKey.length - 1] !== this.rowSubTotalLabel
) {
rowKey.push(this.rowSubTotalLabel);
}
Expand All @@ -1205,10 +1208,11 @@ export class Dataset {
if (colKey.length < this.columns.length && this.columnHierarchyType === 'grid-tree') {
if (colKey[0] === this.colGrandTotalLabel) {
} else if (
this.totals?.column?.subTotalsDimensions &&
this.totals?.column?.subTotalsDimensions?.length >= 1 &&
colKey[colKey.length - 1] !== this.colSubTotalLabel &&
this.totals.column.subTotalsDimensions.find((dimension: string) => dimension === colDimensionKey) //如果维度key在subTotalsDimensions中 则需要补充小计标签名到colKey中
((this.totals?.column?.subTotalsDimensions &&
this.totals?.column?.subTotalsDimensions?.length >= 1 &&
this.totals.column.subTotalsDimensions.find((dimension: string) => dimension === colDimensionKey)) ||
this.totals?.column?.showSubTotalsOnTreeNode) &&
colKey[colKey.length - 1] !== this.colSubTotalLabel
) {
colKey.push(this.colSubTotalLabel);
}
Expand Down Expand Up @@ -1542,12 +1546,20 @@ export class Dataset {
}
const colKey = flatColKey.split(this.stringJoinChar);
if (
that.totals?.column?.subTotalsDimensions &&
(that.totals?.column?.subTotalsDimensions &&
that.totals?.column?.subTotalsDimensions?.length > 0 &&
that.totals.column.showSubTotals !== false
(that.totals.column.showSubTotals !== false || that.totals.column.showSubTotalsOnTreeNode)) ||
(that.totals.column.showSubTotalsOnTreeNode && that.columns.length > 0)
) {
for (let i = 0, len = that.totals?.column?.subTotalsDimensions?.length; i < len; i++) {
const dimension = that.totals.column.subTotalsDimensions[i];
// 确定要处理的列维度
let colSubTotalDimensions = that.totals?.column?.subTotalsDimensions || [];
if (that.totals?.column?.showSubTotalsOnTreeNode && colSubTotalDimensions.length === 0) {
// 如果设置了showSubTotalsOnTreeNode但没有配置subTotalsDimensions,则使用所有列维度
colSubTotalDimensions = that.columns.map(col => col);
}

for (let i = 0, len = colSubTotalDimensions.length; i < len; i++) {
const dimension = colSubTotalDimensions[i];
const dimensionIndex = that.columns.indexOf(dimension);
if (dimensionIndex >= 0) {
const colTotalKey = colKey.slice(0, dimensionIndex + 1);
Expand Down Expand Up @@ -1687,7 +1699,9 @@ export class Dataset {
(that?.totals?.column?.subTotalsDimensions && that?.totals?.column?.subTotalsDimensions?.length >= 1) ||
(that?.totals?.row?.subTotalsDimensions && that?.totals?.row?.subTotalsDimensions?.length >= 1) ||
that?.totals?.column?.showGrandTotals ||
that?.totals?.row?.showGrandTotals
that?.totals?.row?.showGrandTotals ||
that?.totals?.row?.showSubTotalsOnTreeNode ||
that?.totals?.column?.showSubTotalsOnTreeNode
// ||
// that.rows.length === 0 || //todo 这里原有逻辑暂时注释掉
// that.columns.length === 0
Expand All @@ -1698,12 +1712,20 @@ export class Dataset {
const rowKey = flatRowKey.split(this.stringJoinChar);
Object.keys(that.tree[flatRowKey]).forEach(flatColKey => {
if (
that.totals?.row?.subTotalsDimensions &&
(that.totals?.row?.subTotalsDimensions &&
that.totals?.row?.subTotalsDimensions?.length > 0 &&
that.totals.row.showSubTotals !== false
(that.totals.row.showSubTotals !== false || that.totals.row.showSubTotalsOnTreeNode)) ||
(that.totals.row.showSubTotalsOnTreeNode && that.rows.length > 0)
) {
for (let i = 0, len = that.totals?.row?.subTotalsDimensions?.length; i < len; i++) {
const dimension = that.totals.row.subTotalsDimensions[i];
// 确定要处理的行维度
let rowSubTotalDimensions = that.totals?.row?.subTotalsDimensions || [];
if (that.totals?.row?.showSubTotalsOnTreeNode && rowSubTotalDimensions.length === 0) {
// 如果设置了showSubTotalsOnTreeNode但没有配置subTotalsDimensions,则使用所有行维度
rowSubTotalDimensions = that.rows.map(row => row);
}

for (let i = 0, len = rowSubTotalDimensions.length; i < len; i++) {
const dimension = rowSubTotalDimensions[i];
const dimensionIndex = that.rows.indexOf(dimension);
if (dimensionIndex >= 0 && dimensionIndex < that.rows.length - 1) {
const rowTotalKey = rowKey.slice(0, dimensionIndex + 1);
Expand Down
2 changes: 2 additions & 0 deletions packages/vtable/src/ts-types/new-data-set.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export interface Total {
showGrandTotals: boolean;
/** 是否显示小计; 如果配置了total对象,showSubTotals默认为true */
showSubTotals: boolean;
/** 是否在树节点上显示聚合数据; 不需要开启showSubTotals小计就能折叠后显示聚合数据 */
showSubTotalsOnTreeNode?: boolean;

// // 计算总计方法
// calcGrandTotals?: CalcTotals;
Expand Down
Loading