Skip to content

Commit a1a198b

Browse files
dkamburovdkamburov
authored
Merge pull request #10213 from IgniteUI/mkirova/pivot-pipes-expansionstate
Handle expansion states for pivot rows.
2 parents b5434a1 + 8ebe5cf commit a1a198b

File tree

7 files changed

+139
-13
lines changed

7 files changed

+139
-13
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3333
<ng-template igxGridFor let-rowData [igxGridForOf]="data
3434
| pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
35-
| pivotGridRow:pivotConfiguration.rows:pivotConfiguration.values
35+
| pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values
3636
| pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values"
3737
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
3838
[igxForContainerSize]='calcHeight'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
8282

8383
public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
8484
public isPivot = true;
85+
protected _defaultExpandState = true;
8586
private _data;
8687
private _filteredData;
8788
private p_id = `igx-pivot-grid-${NEXT_ID++}`;

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

Lines changed: 111 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('Pivot pipes', () => {
66
// This pipe is a pure, stateless function so no need for BeforeEach
77
const rowPipe = new IgxPivotRowPipe();
88
const columnPipe = new IgxPivotColumnPipe();
9-
9+
const expansionStates = new Map<any, boolean>();
1010
const data = [
1111
{ ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282 },
1212
{ ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa', Country: 'USA', Date: '01/05/2019', UnitsSold: 296 },
@@ -49,7 +49,7 @@ describe('Pivot pipes', () => {
4949
};
5050

5151
it('transforms flat data to pivot data', () => {
52-
const rowPipeResult = rowPipe.transform(data, pivotConfigHierarchy.rows, pivotConfigHierarchy.values);
52+
const rowPipeResult = rowPipe.transform(data, pivotConfigHierarchy.rows, expansionStates, pivotConfigHierarchy.values);
5353
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfigHierarchy.columns, pivotConfigHierarchy.values);
5454
expect(columnPipeResult).toEqual([
5555
{
@@ -72,7 +72,7 @@ describe('Pivot pipes', () => {
7272
member: 'ProductCategory',
7373
enabled: true,
7474
childLevels: []
75-
}], pivotConfigHierarchy.values);
75+
}], expansionStates, pivotConfigHierarchy.values);
7676
expect(rowPipeResult).toEqual([
7777
{
7878
ProductCategory: 'Clothing', level: 0, records: [
@@ -106,17 +106,123 @@ describe('Pivot pipes', () => {
106106
]);
107107
});
108108

109+
it('allows setting expand/collapse state.', () => {
110+
const expanded = new Map<any, boolean>();
111+
expanded.set('All', false);
112+
const rowPipeCollapseResult = rowPipe.transform(data, pivotConfigHierarchy.rows, expanded, pivotConfigHierarchy.values);
113+
expect(rowPipeCollapseResult).toEqual([
114+
{ field1:'All',records: [
115+
{
116+
field1:'Clothing',
117+
records:[
118+
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
119+
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
120+
{ProductCategory:'Clothing',UnitPrice:68.33,SellerName:'Larry',Country:'Uruguay',Date:'05/12/2020',UnitsSold:456},
121+
{ProductCategory:'Clothing',UnitPrice:16.05,SellerName:'Walter',Country:'Bulgaria',Date:'02/19/2020',UnitsSold:492}
122+
]
123+
,level:1
124+
},
125+
{
126+
field1:'Bikes',
127+
records:[
128+
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
129+
]
130+
,level:1
131+
},
132+
{
133+
field1:'Accessories',
134+
records:[
135+
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
136+
]
137+
,level:1},
138+
{
139+
field1:'Components',
140+
records:[
141+
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
142+
]
143+
,level:1}
144+
]
145+
,level:0}
146+
]);
147+
148+
expanded.set('All', true);
149+
const rowPipeExpandResult = rowPipe.transform(data, pivotConfigHierarchy.rows, expanded, pivotConfigHierarchy.values);
150+
expect(rowPipeExpandResult).toEqual([
151+
{ field1:'All',records: [
152+
{
153+
field1:'Clothing',
154+
records:[
155+
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
156+
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
157+
{ProductCategory:'Clothing',UnitPrice:68.33,SellerName:'Larry',Country:'Uruguay',Date:'05/12/2020',UnitsSold:456},
158+
{ProductCategory:'Clothing',UnitPrice:16.05,SellerName:'Walter',Country:'Bulgaria',Date:'02/19/2020',UnitsSold:492}
159+
]
160+
,level:1
161+
},
162+
{
163+
field1:'Bikes',
164+
records:[
165+
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
166+
]
167+
,level:1
168+
},
169+
{
170+
field1:'Accessories',
171+
records:[
172+
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
173+
]
174+
,level:1},
175+
{
176+
field1:'Components',
177+
records:[
178+
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
179+
]
180+
,level:1}
181+
]
182+
,level:0},
183+
{
184+
field1:'Clothing',
185+
records:[
186+
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
187+
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
188+
{ProductCategory:'Clothing',UnitPrice:68.33,SellerName:'Larry',Country:'Uruguay',Date:'05/12/2020',UnitsSold:456},
189+
{ProductCategory:'Clothing',UnitPrice:16.05,SellerName:'Walter',Country:'Bulgaria',Date:'02/19/2020',UnitsSold:492}
190+
]
191+
,level:1
192+
},
193+
{
194+
field1:'Bikes',
195+
records:[
196+
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
197+
]
198+
,level:1
199+
},
200+
{
201+
field1:'Accessories',
202+
records:[
203+
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
204+
]
205+
,level:1},
206+
{
207+
field1:'Components',
208+
records:[
209+
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
210+
]
211+
,level:1}
212+
]);
213+
});
214+
109215
it('transforms flat data to pivot data multiple row dimensions', () => {
110216
const rowPipeResult = rowPipe.transform(data, [{
111217
member: 'ProductCategory',
112218
enabled: true,
113219
childLevels: []
114220
},
115221
{
116-
member: 'Date',
222+
member: Date,
117223
enabled: true,
118224
childLevels: []
119-
}], pivotConfigHierarchy.values);
225+
}], expansionStates, pivotConfigHierarchy.values);
120226

121227
expect(rowPipeResult).toEqual([
122228
{

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class IgxPivotRowPipe implements PipeTransform {
2020
public transform(
2121
collection: any,
2222
rows: IPivotDimension[],
23+
expansionStates: Map<any, boolean>,
2324
values?: IPivotValue[],
2425
pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
2526
): any[] {
@@ -28,7 +29,7 @@ export class IgxPivotRowPipe implements PipeTransform {
2829
// apply aggregations based on the created groups
2930
// PivotUtil.applyAggregations(hierarchies, values, pivotKeys);
3031
// generate flat data from the hierarchies
31-
const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? [], rows, pivotKeys);
32+
const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? [], rows, pivotKeys, 0, expansionStates, true);
3233
return data;
3334
}
3435
}

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@
100100
<ng-template #headerTemplate let-column>
101101
<div class="igx-grid__tr--header igx-grid__row-indentation--level-{{ level }}">
102102
<igx-icon *ngIf="hasChild" [attr.draggable]="false"
103-
(click)="grid.toggleRow(rowID)"
103+
(click)="grid.toggleRow(rowDimensionKey)"
104104
style='cursor: pointer;'>
105-
{{grid.expansionStates.get(rowID) ? 'expand_more' : 'expand_less'}}</igx-icon>
105+
{{ expandState ? 'expand_more' : 'expand_less'}}</igx-icon>
106106
{{column.header}}
107107
</div>
108108
</ng-template>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,18 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
5454
return this.index;
5555
}
5656

57+
/**
58+
* @hidden
59+
* @internal
60+
*/
61+
public get rowDimensionKey(){
62+
return this.rowDimension.map(x => x.header).join('_');
63+
}
64+
65+
public get expandState() {
66+
return this.grid.gridAPI.get_row_expansion_state(this.rowDimensionKey);
67+
}
68+
5769
public ngOnInit() {
5870
// generate rowDimension
5971
const rowDimConfig = this.grid.pivotConfiguration.rows;

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ export class PivotUtil {
6161
return result;
6262
}
6363

64-
public static flattenHierarchy(hierarchies, rec, dims, pivotKeys, level = 0) {
64+
public static flattenHierarchy(hierarchies, rec, dims, pivotKeys, level = 0,
65+
expansionStates: Map<any, boolean>, defaultExpandState: boolean) {
6566
const flatData = [];
6667
for (const dim of dims) {
6768
hierarchies.forEach((h, key) => {
@@ -72,10 +73,15 @@ export class PivotUtil {
7273
obj = { ...obj, ...h[pivotKeys.aggregations] };
7374
obj[pivotKeys.level] = level;
7475
flatData.push(obj);
76+
const isExpanded = expansionStates.get(key) === undefined ? defaultExpandState : expansionStates.get(key);
77+
7578
if (h[pivotKeys.children] && h[pivotKeys.children].size > 0) {
76-
obj[pivotKeys.records] = this.flattenHierarchy(h[pivotKeys.children], rec, dim.childLevels, pivotKeys, level + 1);
77-
for (const record of obj[pivotKeys.records]) {
78-
flatData.push(record);
79+
obj[pivotKeys.records] = this.flattenHierarchy(h[pivotKeys.children], rec,
80+
dim.childLevels, pivotKeys, level + 1, expansionStates, defaultExpandState);
81+
if (isExpanded) {
82+
for (const record of obj[pivotKeys.records]) {
83+
flatData.push(record);
84+
}
7985
}
8086
}
8187
});

0 commit comments

Comments
 (0)