Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issues with runtime pivotConfiguration changes. #11351

Merged
merged 3 commits into from Apr 7, 2022
Merged

Fix issues with runtime pivotConfiguration changes. #11351

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9937e8b
fix(igxPivot): Re-init columns when new configuration is set.
Apr 6, 2022
2b002ee
chore(*): Update pivot selector so that it reflects runtime changes o…
Apr 6, 2022
413cca2
Merge branch '13.1.x' into mkirova/fix-11345
ChronosSF Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 6 additions & 4 deletions projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
View file
Open in desktop
Expand Up @@ -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) {}

Expand Down Expand Up @@ -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;
}

/**
Expand Down
3 changes: 3 additions & 0 deletions projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
View file
Open in desktop
Expand Up @@ -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);
}

Expand Down
109 changes: 78 additions & 31 deletions projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts
View file
Open in desktop
Expand Up @@ -238,8 +238,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
columns: [],
rows: [
{
memberName: 'SellerName',
enabled: true
memberName: 'SellerName',
enabled: true
}
],
filters: [
Expand Down Expand Up @@ -530,47 +530,47 @@ 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 }
]
}
];

pivotGrid.pivotConfiguration = {
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
};
Expand Down Expand Up @@ -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'
}
Expand Down Expand Up @@ -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);

});
});
});