From b698445a65ab965b8cbfbf1c563c23f0eab04c75 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 4 Jul 2022 15:58:11 +0300 Subject: [PATCH 1/5] feat(igxPivot): Add a filterDimension method. Reset filter expressions on full configuration change. --- .../grids/pivot-grid/pivot-grid.component.ts | 26 +++++++++++- .../grids/pivot-grid/pivot-grid.interface.ts | 4 +- src/app/pivot-grid/pivot-grid.sample.html | 2 + src/app/pivot-grid/pivot-grid.sample.ts | 42 +++++++++++++++++-- 4 files changed, 67 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index fe49541752a..7d4858cfe81 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -71,6 +71,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort import { DefaultPivotSortingStrategy } from '../../data-operations/pivot-sort-strategy'; import { PivotSortUtil } from './pivot-sort-util'; import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy'; +import { IFilteringOperation } from '../../data-operations/filtering-condition'; let NEXT_ID = 0; const MINIMUM_COLUMN_WIDTH = 200; @@ -172,6 +173,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni if (!this._init) { this.setupColumns(); } + this.filteringExpressionsTree = PivotUtil.buildExpressionTree(value); this.notifyChanges(true); } @@ -888,8 +890,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public ngOnInit() { // pivot grid always generates columns automatically. this.autoGenerate = true; - const config = this.pivotConfiguration; - this.filteringExpressionsTree = PivotUtil.buildExpressionTree(config); super.ngOnInit(); } @@ -1649,6 +1649,28 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.cdr.detectChanges(); } + /** + * Filters a single `IPivotDimension`. + * + * @example + * ```typescript + * public filter() { + * const set = new Set(); + * set.add('Value 1'); + * set.add('Value 2'); + * this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in')); + * } + * ``` + */ + public filterDimension(dimension: IPivotDimension, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree ) { + this.filteringService.filter(dimension.memberName, value, conditionOrExpressionTree); + const dimensionType = this.getDimensionType(dimension); + if (dimensionType === PivotDimensionType.Column) { + this.setupColumns(); + } + this.cdr.detectChanges(); + } + /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts index 64402bfc3fa..165649b211b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts @@ -1,5 +1,5 @@ import { GridColumnDataType } from '../../data-operations/data-util'; -import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; +import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { SortingDirection } from '../../data-operations/sorting-strategy'; import { ColumnType } from '../common/grid.interface'; @@ -99,7 +99,7 @@ export interface IPivotDimension { /** * A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe. * */ - filter?: FilteringExpressionsTree | null; + filter?: IFilteringExpressionsTree | null; /** * The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension. */ diff --git a/src/app/pivot-grid/pivot-grid.sample.html b/src/app/pivot-grid/pivot-grid.sample.html index 3bf6ee41408..948f8093508 100644 --- a/src/app/pivot-grid/pivot-grid.sample.html +++ b/src/app/pivot-grid/pivot-grid.sample.html @@ -53,6 +53,8 @@ + +
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts index dd34437df80..b3eba15a41d 100644 --- a/src/app/pivot-grid/pivot-grid.sample.ts +++ b/src/app/pivot-grid/pivot-grid.sample.ts @@ -106,13 +106,13 @@ export class PivotGridSampleComponent { public pivotConfigHierarchy: IPivotConfiguration = { columns: [ - this.dimensions[1] - ], - rows: [ { memberName: 'City', enabled: true, }, + ], + rows: [ + this.dimensions[2], { memberName: 'SellerName', @@ -344,4 +344,40 @@ export class PivotGridSampleComponent { } }, 0); } + + public filterDim() { + const set = new Set(); + set.add('New York'); + // for excel-style filters, condition is 'in' and value is a Set of values. + this.grid1.filterDimension(this.pivotConfigHierarchy.columns[0], set, IgxStringFilteringOperand.instance().condition('in')); + } + + public newConfig() { + this.pivotConfigHierarchy = { + columns: [ + { + memberName: 'City', + enabled: true, + }, + ], + rows: [ + { + memberName: 'SellerName', + enabled: true, + filter: this.filterExpTree + } + ], + values: [ + { + member: 'UnitsSold', + aggregate: { + key: 'SUM', + aggregator: IgxPivotNumericAggregate.sum, + label: 'Sum' + }, + enabled: true, + } + ] + }; + } } From 87c0349aa83dd2c2e0a0488b4bb1d34360a29fd4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 4 Jul 2022 16:40:20 +0300 Subject: [PATCH 2/5] chore(*): Minor fix + tests. --- .../grids/pivot-grid/pivot-grid.component.ts | 2 +- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 72 +++++++++++++++++++ 2 files changed, 73 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 7d4858cfe81..462f837b3a1 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -170,10 +170,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni */ public set pivotConfiguration(value: IPivotConfiguration) { this._pivotConfiguration = value; + this.filteringExpressionsTree = PivotUtil.buildExpressionTree(value); if (!this._init) { this.setupColumns(); } - this.filteringExpressionsTree = PivotUtil.buildExpressionTree(value); this.notifyChanges(true); } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 35478d143c0..fc974679e94 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -2388,5 +2388,77 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(pivotGrid.gridAPI.get_cell_by_index(0, 0).nativeElement.innerText).toBe('Accessories/Plovdiv:undefined'); expect(pivotGrid.gridAPI.get_cell_by_index(0, 3).nativeElement.innerText).toBe('Accessories/London:293'); }); + + it('should allow filtering a dimension runtime.', () => { + const colValues = new Set(); + colValues.add('US'); + colValues.add('UK'); + pivotGrid.filterDimension(pivotGrid.pivotConfiguration.columns[0], colValues, IgxStringFilteringOperand.instance().condition('in')); + expect(pivotGrid.columns.length).toBe(6); + expect(pivotGrid.columns.filter(x => x.columnGroup).map(x => x.field)).toEqual(['US', 'UK']); + expect(pivotGrid.filteringExpressionsTree.filteringOperands.length).toEqual(1); + + const rowValues = new Set(); + rowValues.add('Clothing'); + pivotGrid.filterDimension(pivotGrid.pivotConfiguration.rows[1].childLevel, rowValues, IgxStringFilteringOperand.instance().condition('in')); + expect(pivotGrid.rowList.length).toBe(4); + const rowDimData = pivotGrid.rowList.map(x => (x as IgxPivotRowComponent).data.dimensionValues.get('ProductCategory')) + expect(rowDimData).toEqual([undefined, 'Clothing', undefined, 'Clothing']); + expect(pivotGrid.filteringExpressionsTree.filteringOperands.length).toEqual(2); + }); + + it('should update filtering on pivot configuration change.', () => { + fixture.detectChanges(); + expect(pivotGrid.filteringExpressionsTree.filteringOperands.length).toEqual(0); + const filterColumnExpTree = new FilteringExpressionsTree(FilteringLogic.And); + filterColumnExpTree.filteringOperands = [ + { + condition: IgxStringFilteringOperand.instance().condition('in'), + fieldName: 'City', + searchVal: new Set(['Ciudad de la Costa']) + } + ]; + const filterRowExpTree = new FilteringExpressionsTree(FilteringLogic.And); + filterRowExpTree.filteringOperands = [ + { + condition: IgxStringFilteringOperand.instance().condition('in'), + fieldName: 'ProductCategory', + searchVal: new Set(['Bikes']) + } + ]; + pivotGrid.pivotConfiguration = { + columns: [ + { + memberName: 'City', + enabled: true, + filter: filterColumnExpTree + } + ], + rows: [ + { + memberName: 'ProductCategory', + enabled: true, + filter: filterRowExpTree + }], + values: [ + { + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'SUM', + label: 'Sum' + }, + enabled: true + } + ] + }; + fixture.detectChanges(); + expect(pivotGrid.filteringExpressionsTree.filteringOperands.length).toEqual(2); + + expect(pivotGrid.columns.length).toBe(1); + expect(pivotGrid.columns[0].field).toEqual('Ciudad de la Costa'); + expect(pivotGrid.rowList.length).toBe(1); + expect(pivotGrid.rowList.toArray()[0].data.dimensionValues.get('ProductCategory')).toBe('Bikes'); + }); }); }); From 2c9791f4c5f53f68efb2b31b4f93df721aa9ffd2 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 4 Jul 2022 16:44:49 +0300 Subject: [PATCH 3/5] chore(*): Update changelog. --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ffd22375b8..22995682696 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ All notable changes for each version of this project will be documented in this file. +## 14.1.0 + +### General + +- `IgxPivotGrid` - added a `filterDimension` API to filter a given dimension runtime: + +``` +pivotGrid.filterDimension(this.pivotConfigHierarchy.rows[0], new Set(['Value']), IgxStringFilteringOperand.instance().condition('in')); +``` + ## 14.0.0 ### General From 2325bf33aded13ce680d398e3362438d83d031af Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 4 Jul 2022 16:57:46 +0300 Subject: [PATCH 4/5] chore(*): Minor fix for undefined config. --- .../igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts index 2bfa9c08c72..6303b5e945e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts @@ -291,7 +291,7 @@ export class PivotUtil { } public static buildExpressionTree(config: IPivotConfiguration) { - const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + const allDimensions = (config?.rows || []).concat((config?.columns || [])).concat(config?.filters || []).filter(x => x !== null && x !== undefined); const enabledDimensions = allDimensions.filter(x => x && x.enabled); const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And); From fd8eaf96ff7242677f2b3bb23c47d08791cd3971 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 5 Jul 2022 12:15:12 +0300 Subject: [PATCH 5/5] chore(*): Clean changelog. --- CHANGELOG.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22995682696..9ffd22375b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,16 +2,6 @@ All notable changes for each version of this project will be documented in this file. -## 14.1.0 - -### General - -- `IgxPivotGrid` - added a `filterDimension` API to filter a given dimension runtime: - -``` -pivotGrid.filterDimension(this.pivotConfigHierarchy.rows[0], new Set(['Value']), IgxStringFilteringOperand.instance().condition('in')); -``` - ## 14.0.0 ### General