From 9937e8b42281d5a5de7f142954bf8fa74cecc885 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 6 Apr 2022 11:57:44 +0300 Subject: [PATCH 1/2] fix(igxPivot): Re-init columns when new configuration is set. --- .../grids/pivot-grid/pivot-grid.component.ts | 3 + .../lib/grids/pivot-grid/pivot-grid.spec.ts | 109 +++++++++++++----- 2 files changed, 81 insertions(+), 31 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 35a3109c18e..5b92dc8a841 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 @@ -169,6 +169,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni */ public set pivotConfiguration(value: IPivotConfiguration) { this._pivotConfiguration = value; + if (!this._init) { + this.setupColumns(); + } 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 a06e1cc8c04..bda582f9583 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 @@ -238,8 +238,8 @@ describe('IgxPivotGrid #pivotGrid', () => { columns: [], rows: [ { - memberName: 'SellerName', - enabled: true + memberName: 'SellerName', + enabled: true } ], filters: [ @@ -530,12 +530,12 @@ describe('IgxPivotGrid #pivotGrid', () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.data = [ { - AllProducts: 'All Products', All: 2127, 'Bulgaria': 774, 'USA': 829, 'Uruguay': 524, 'AllProducts_records': [ - { ProductCategory: 'Clothing', All: 1523, 'Bulgaria': 774, 'USA': 296, 'Uruguay': 456, }, - { ProductCategory: 'Bikes', All: 68, 'Uruguay': 68 }, - { ProductCategory: 'Accessories', All: 293, 'USA': 293 }, - { ProductCategory: 'Components', All: 240, 'USA': 240 } - ] + AllProducts: 'All Products', All: 2127, 'Bulgaria': 774, 'USA': 829, 'Uruguay': 524, 'AllProducts_records': [ + { ProductCategory: 'Clothing', All: 1523, 'Bulgaria': 774, 'USA': 296, 'Uruguay': 456, }, + { ProductCategory: 'Bikes', All: 68, 'Uruguay': 68 }, + { ProductCategory: 'Accessories', All: 293, 'USA': 293 }, + { ProductCategory: 'Components', All: 240, 'USA': 240 } + ] } ]; @@ -543,34 +543,34 @@ describe('IgxPivotGrid #pivotGrid', () => { columnStrategy: NoopPivotDimensionsStrategy.instance(), rowStrategy: NoopPivotDimensionsStrategy.instance(), columns: [ - { - memberName: 'Country', - enabled: true - }, + { + memberName: 'Country', + enabled: true + }, ] , rows: [ - { - memberFunction: () => 'All', - memberName: 'AllProducts', - enabled: true, - width: '25%', - childLevel: { - memberName: 'ProductCategory', - enabled: true + { + memberFunction: () => 'All', + memberName: 'AllProducts', + enabled: true, + width: '25%', + childLevel: { + memberName: 'ProductCategory', + enabled: true + } } - } ], values: [ - { - member: 'UnitsSold', - aggregate: { - aggregator: IgxPivotNumericAggregate.sum, - key: 'sum', - label: 'Sum' + { + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'sum', + label: 'Sum' + }, + enabled: true }, - enabled: true - }, ], filters: null }; @@ -2275,9 +2275,9 @@ describe('IgxPivotGrid #pivotGrid', () => { //should do nothing if value is not present in the configuration pivotGrid.moveValue({ member: 'NotPresent', - enabled:true, + enabled: true, aggregate: { - aggregator: () => {}, + aggregator: () => { }, key: 'Test', label: 'test' } @@ -2308,5 +2308,52 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(valueCols[0].header).toBe('UnitsSold'); expect(valueCols[1].header).toBe('Amount of Sale'); }); + + it('should allow changing the whole pivotConfiguration object', () => { + pivotGrid.pivotConfiguration = { + columns: [ + { + memberName: 'City', + enabled: true + } + ], + rows: [ + { + memberName: 'ProductCategory', + enabled: true + }], + values: [ + { + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'SUM', + label: 'Sum' + }, + enabled: true + } + ] + }; + fixture.detectChanges(); + + //check rows + const rows = pivotGrid.rowList.toArray(); + expect(rows.length).toBe(4); + const expectedHeaders = ['Accessories', 'Bikes', 'Clothing', 'Components']; + const rowHeaders = fixture.debugElement.queryAll( + By.directive(IgxPivotRowDimensionHeaderComponent)); + const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header); + expect(rowDimensionHeaders).toEqual(expectedHeaders); + + // check columns + let colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header); + let expected = ['Plovdiv', 'New York', 'Ciudad de la Costa', 'London', 'Yokohama', 'Sofia']; + expect(colHeaders).toEqual(expected); + + // check data + let pivotRecord = (pivotGrid.rowList.first as IgxPivotRowComponent).data; + expect(pivotRecord.aggregationValues.get('London')).toBe(293); + + }); }); }); From 2b002ee096bf460c39f3809955f712615e68981c Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 6 Apr 2022 12:09:31 +0300 Subject: [PATCH 2/2] chore(*): Update pivot selector so that it reflects runtime changes of the pivotConfig in the grid. --- .../grids/pivot-grid/pivot-data-selector.component.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts index 246e68e5971..540b96b6cf7 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts @@ -219,9 +219,13 @@ export class IgxPivotDataSelectorComponent { /** @hidden @internal */ public dropAllowed: boolean; /** @hidden @internal */ - public dims: IPivotDimension[]; + public get dims() : IPivotDimension[] { + return this._grid.allDimensions; + }; /** @hidden @internal */ - public values: IPivotValue[]; + public get values(): IPivotValue[] { + return this._grid.pivotConfiguration.values; + }; constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {} @@ -285,8 +289,6 @@ export class IgxPivotDataSelectorComponent { @Input() public set grid(value: PivotGridType) { this._grid = value; - this.dims = this._grid.allDimensions; - this.values = this._grid.pivotConfiguration.values; } /**