Merge pull request #11816 from IgniteUI/mkirova/feat-11786

feat(igxPivot): Add a filterDimension method.

Author: dkamburov

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -73,6 +73,7 @@ import { DefaultPivotSortingStrategy } from '../../data-operations/pivot-sort-st
 import { PivotSortUtil } from './pivot-sort-util';
 import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
+import { IFilteringOperation } from '../../data-operations/filtering-condition';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -203,6 +204,7 @@ 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();
         }
@@ -933,8 +935,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();
     }
 
@@ -1696,6 +1696,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
      */

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.
      */

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts

@@ -2507,5 +2507,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');
+        });
     });
 });

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);

src/app/pivot-grid/pivot-grid.sample.html

@@ -53,6 +53,8 @@
     <button (click)="toggleVal()">Toggle</button>
     <button (click)="moveVal()">Move</button>
     <button (click)="insertVal()">Insert</button>
+    <button (click)="filterDim()">filterDim</button>
+    <button (click)="newConfig()">newConfig</button>
 </div>
 <div class="pivot-container">
     <div>

src/app/pivot-grid/pivot-grid.sample.ts

@@ -105,14 +105,14 @@ export class PivotGridSampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [
-            this.dimensions[1]
-        ],
-        rows: [
             {
                 memberName: 'City',
                 enabled: true,
                 width: '100px'
             },
+        ],
+        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,
+                }
+            ]
+        };
+    }
 }