Skip to content

Commit fe988ab

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Render parent column if there's only 1 dimension value. Otherwise render child column for each dimension value. Update tests.
1 parent f8825fe commit fe988ab

File tree

3 files changed

+105
-63
lines changed

3 files changed

+105
-63
lines changed

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

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -209,16 +209,34 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
209209
const state = this.columnGroupStates.get(col.field);
210210
const newState = !state;
211211
this.columnGroupStates.set(col.field, newState);
212-
const fieldColumns = col.children.filter(x => !x.columnGroup);
213-
const groupColumns = col.children.filter(x => x.columnGroup);
214-
groupColumns.forEach(groupColumn => {
212+
this.toggleGroup(col, newState);
213+
this.reflow();
214+
}
215+
216+
protected toggleGroup(col: IgxColumnComponent, newState: boolean) {
217+
if (this.hasMultipleValues) {
218+
const fieldColumns = col.children.filter(x => !x.columnGroup);
219+
const groupColumns = col.children.filter(x => x.columnGroup);
220+
groupColumns.forEach(groupColumn => {
221+
groupColumn.hidden = newState;
222+
this.resolveToggle(groupColumn);
223+
});
224+
fieldColumns.forEach(fieldColumn => {
225+
fieldColumn.hidden = !newState;
226+
});
227+
} else {
228+
const parentCols = col.parent ? col.parent.children : this.columns.filter(x => x.level === 0);
229+
const fieldColumn = parentCols.filter(x => x.header === col.header && !x.columnGroup)[0];
230+
const groupColumn = parentCols.filter(x => x.header === col.header && x.columnGroup)[0];
215231
groupColumn.hidden = newState;
216232
this.resolveToggle(groupColumn);
217-
});
218-
fieldColumns.forEach(fieldColumn => {
219233
fieldColumn.hidden = !newState;
220-
});
221-
this.reflow();
234+
if (newState) {
235+
fieldColumn.headerTemplate = this.headerTemplate;
236+
} else {
237+
fieldColumn.headerTemplate = undefined;
238+
}
239+
}
222240
}
223241

224242
protected resolveToggle(groupColumn: IgxColumnComponent) {
@@ -242,6 +260,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
242260
protected calcGridHeadRow() {
243261
}
244262

263+
protected get hasMultipleValues() {
264+
return this.pivotConfiguration.values.length > 1;
265+
}
266+
245267
/**
246268
* @hidden
247269
*/
@@ -267,16 +289,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
267289
let columns = [];
268290
fields.forEach((value, key) => {
269291
if (value.children == null || value.children.length === 0 || value.children.size === 0) {
270-
const ref = factoryColumnGroup.create(this.viewRef.injector);
292+
const ref = this.hasMultipleValues ?
293+
factoryColumnGroup.create(this.viewRef.injector) :
294+
factoryColumn.create(this.viewRef.injector);
271295
ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
272296
ref.instance.field = key;
273297
ref.instance.parent = parent;
274298
ref.changeDetectorRef.detectChanges();
275-
276-
const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, false);
277-
ref.instance.children.reset(measureChildren);
278299
columns.push(ref.instance);
279-
columns = columns.concat(measureChildren);
300+
if (this.hasMultipleValues) {
301+
const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, false);
302+
ref.instance.children.reset(measureChildren);
303+
columns = columns.concat(measureChildren);
304+
}
305+
280306
} else {
281307
const ref = factoryColumnGroup.create(this.viewRef.injector);
282308
ref.instance.parent = parent;
@@ -285,18 +311,29 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
285311
if (value.expandable) {
286312
ref.instance.headerTemplate = this.headerTemplate;
287313
}
314+
if(!this.hasMultipleValues) {
315+
const refSibling = factoryColumn.create(this.viewRef.injector);
316+
refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
317+
refSibling.instance.field = key;
318+
refSibling.instance.dataType = this.resolveDataTypes(data[0][key]);
319+
refSibling.instance.parent = parent;
320+
refSibling.instance.hidden = true;
321+
columns.push(refSibling.instance);
322+
}
288323
const children = this.generateColumnHierarchy(value.children, data, ref.instance);
289324
const filteredChildren = children.filter(x => x.level === ref.instance.level + 1);
290325
ref.changeDetectorRef.detectChanges();
291-
292-
const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, true);
293-
const nestedChildren = filteredChildren.concat(measureChildren);
294-
295-
const allChildren = children.concat(measureChildren);
296-
ref.instance.children.reset(nestedChildren);
297-
298326
columns.push(ref.instance);
299-
columns = columns.concat(allChildren);
327+
if (this.hasMultipleValues) {
328+
const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, true);
329+
const nestedChildren = filteredChildren.concat(measureChildren);
330+
const allChildren = children.concat(measureChildren);
331+
ref.instance.children.reset(nestedChildren);
332+
columns = columns.concat(allChildren);
333+
} else {
334+
ref.instance.children.reset(filteredChildren);
335+
columns = columns.concat(children);
336+
}
300337
}
301338
});
302339
return columns;

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

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,17 @@ describe('Pivot pipes', () => {
5353
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfigHierarchy.columns, pivotConfigHierarchy.values);
5454
expect(columnPipeResult).toEqual([
5555
{
56-
field1: 'All', All: 2127, Bulgaria: 774, USA: 829, Uruguay: 524, level: 0, records: [
57-
{ field1: 'Clothing', All: 1526, Bulgaria: 774, USA: 296, Uruguay: 456, level: 1 },
58-
{ field1: 'Bikes', All: 68, Uruguay: 68, level: 1 },
59-
{ field1: 'Accessories', All: 293, USA: 293, level: 1 },
60-
{ field1: 'Components', All: 240, USA: 240, level: 1 }
56+
field1: 'All', All: 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, level: 0, records: [
57+
{ field1: 'All-Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, level: 1 },
58+
{ field1: 'All-Bikes', All: 68, 'All-Uruguay': 68, level: 1 },
59+
{ field1: 'All-Accessories', All: 293, 'All-USA': 293, level: 1 },
60+
{ field1: 'All-Components', All: 240, 'All-USA': 240, level: 1 }
6161
]
6262
},
63-
{ field1: 'Clothing', All: 1526, Bulgaria: 774, USA: 296, Uruguay: 456, level: 1 },
64-
{ field1: 'Bikes', All: 68, Uruguay: 68, level: 1 },
65-
{ field1: 'Accessories', All: 293, USA: 293, level: 1 },
66-
{ field1: 'Components', All: 240, USA: 240, level: 1 }
63+
{ field1: 'All-Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, level: 1 },
64+
{ field1: 'All-Bikes', All: 68, 'All-Uruguay': 68, level: 1 },
65+
{ field1: 'All-Accessories', All: 293, 'All-USA': 293, level: 1 },
66+
{ field1: 'All-Components', All: 240, 'All-USA': 240, level: 1 }
6767
]);
6868
});
6969

@@ -75,7 +75,7 @@ describe('Pivot pipes', () => {
7575
}], expansionStates, pivotConfigHierarchy.values);
7676
expect(rowPipeResult).toEqual([
7777
{
78-
ProductCategory: 'Clothing', level: 0, records: [
78+
ProductCategory: 'Clothing', level: 0, records: [
7979
{ ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282 },
8080
{ ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa', Country: 'USA', Date: '01/05/2019', UnitsSold: 296 },
8181
{ ProductCategory: 'Clothing', UnitPrice: 68.33, SellerName: 'Larry', Country: 'Uruguay', Date: '05/12/2020', UnitsSold: 456 },
@@ -99,10 +99,10 @@ describe('Pivot pipes', () => {
9999
]);
100100
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfigHierarchy.columns, pivotConfigHierarchy.values);
101101
expect(columnPipeResult).toEqual([
102-
{ ProductCategory: 'Clothing', All: 1526, Bulgaria: 774, USA: 296, Uruguay: 456, level: 0 },
103-
{ ProductCategory: 'Bikes', All: 68, Uruguay: 68, level: 0 },
104-
{ ProductCategory: 'Accessories', All: 293, USA: 293, level: 0 },
105-
{ ProductCategory: 'Components', All: 240, USA: 240, level: 0 }
102+
{ ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, level: 0 },
103+
{ ProductCategory: 'Bikes', All: 68, 'All-Uruguay': 68, level: 0 },
104+
{ ProductCategory: 'Accessories', All: 293, 'All-USA': 293, level: 0 },
105+
{ ProductCategory: 'Components', All: 240, 'All-USA': 240, level: 0 }
106106
]);
107107
});
108108

@@ -113,7 +113,7 @@ describe('Pivot pipes', () => {
113113
expect(rowPipeCollapseResult).toEqual([
114114
{ field1:'All',records: [
115115
{
116-
field1:'Clothing',
116+
field1:'All-Clothing',
117117
records:[
118118
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
119119
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
@@ -123,20 +123,20 @@ describe('Pivot pipes', () => {
123123
,level:1
124124
},
125125
{
126-
field1:'Bikes',
126+
field1:'All-Bikes',
127127
records:[
128128
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
129129
]
130130
,level:1
131131
},
132132
{
133-
field1:'Accessories',
133+
field1:'All-Accessories',
134134
records:[
135135
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
136136
]
137137
,level:1},
138138
{
139-
field1:'Components',
139+
field1:'All-Components',
140140
records:[
141141
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
142142
]
@@ -150,7 +150,7 @@ describe('Pivot pipes', () => {
150150
expect(rowPipeExpandResult).toEqual([
151151
{ field1:'All',records: [
152152
{
153-
field1:'Clothing',
153+
field1:'All-Clothing',
154154
records:[
155155
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
156156
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
@@ -160,28 +160,28 @@ describe('Pivot pipes', () => {
160160
,level:1
161161
},
162162
{
163-
field1:'Bikes',
163+
field1:'All-Bikes',
164164
records:[
165165
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
166166
]
167167
,level:1
168168
},
169169
{
170-
field1:'Accessories',
170+
field1:'All-Accessories',
171171
records:[
172172
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
173173
]
174174
,level:1},
175175
{
176-
field1:'Components',
176+
field1:'All-Components',
177177
records:[
178178
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
179179
]
180180
,level:1}
181181
]
182182
,level:0},
183183
{
184-
field1:'Clothing',
184+
field1:'All-Clothing',
185185
records:[
186186
{ProductCategory:'Clothing',UnitPrice:12.81,SellerName:'Stanley',Country:'Bulgaria',Date:'01/01/2021',UnitsSold:282},
187187
{ProductCategory:'Clothing',UnitPrice:49.57,SellerName:'Elisa',Country:'USA',Date:'01/05/2019',UnitsSold:296},
@@ -191,20 +191,20 @@ describe('Pivot pipes', () => {
191191
,level:1
192192
},
193193
{
194-
field1:'Bikes',
194+
field1:'All-Bikes',
195195
records:[
196196
{ProductCategory:'Bikes',UnitPrice:3.56,SellerName:'Lydia',Country:'Uruguay',Date:'01/06/2020',UnitsSold:68}
197197
]
198198
,level:1
199199
},
200200
{
201-
field1:'Accessories',
201+
field1:'All-Accessories',
202202
records:[
203203
{ProductCategory:'Accessories',UnitPrice:85.58,SellerName:'David',Country:'USA',Date:'04/07/2021',UnitsSold:293}
204204
]
205205
,level:1},
206206
{
207-
field1:'Components',
207+
field1:'All-Components',
208208
records:[
209209
{ProductCategory:'Components',UnitPrice:18.13,SellerName:'John',Country:'USA',Date:'12/08/2021',UnitsSold:240}
210210
]
@@ -290,19 +290,19 @@ describe('Pivot pipes', () => {
290290
/* eslint-disable quote-props */
291291
expect(columnPipeResult).toEqual([
292292
{'field1':'All','records':[
293-
{'field1':'Clothing','level':1,'Bulgaria':774,'Bulgaria-01/01/2021':282,
293+
{'field1':'All-Clothing','level':1,'Bulgaria':774,'Bulgaria-01/01/2021':282,
294294
'Bulgaria-02/19/2020':492,'USA':296,'USA-01/05/2019':296,'Uruguay':456,'Uruguay-05/12/2020':456},
295-
{'field1':'Bikes','level':1,'Uruguay':68,'Uruguay-01/06/2020':68},
296-
{'field1':'Accessories','level':1,'USA':293,'USA-04/07/2021':293},
297-
{'field1':'Components','level':1,'USA':240,'USA-12/08/2021':240}]
295+
{'field1':'All-Bikes','level':1,'Uruguay':68,'Uruguay-01/06/2020':68},
296+
{'field1':'All-Accessories','level':1,'USA':293,'USA-04/07/2021':293},
297+
{'field1':'All-Components','level':1,'USA':240,'USA-12/08/2021':240}]
298298
,'level':0,'Bulgaria':774,'Bulgaria-01/01/2021':282,'Bulgaria-02/19/2020':492,
299299
'USA':829,'USA-01/05/2019':296,'USA-04/07/2021':293,'USA-12/08/2021':240,
300300
'Uruguay':524,'Uruguay-05/12/2020':456,'Uruguay-01/06/2020':68},
301-
{'field1':'Clothing','level':1,'Bulgaria':774,'Bulgaria-01/01/2021':282,
301+
{'field1':'All-Clothing','level':1,'Bulgaria':774,'Bulgaria-01/01/2021':282,
302302
'Bulgaria-02/19/2020':492,'USA':296,'USA-01/05/2019':296,'Uruguay':456,'Uruguay-05/12/2020':456},
303-
{'field1':'Bikes','level':1,'Uruguay':68,'Uruguay-01/06/2020':68},
304-
{'field1':'Accessories','level':1,'USA':293,'USA-04/07/2021':293},
305-
{'field1':'Components','level':1,'USA':240,'USA-12/08/2021':240}]);
303+
{'field1':'All-Bikes','level':1,'Uruguay':68,'Uruguay-01/06/2020':68},
304+
{'field1':'All-Accessories','level':1,'USA':293,'USA-04/07/2021':293},
305+
{'field1':'All-Components','level':1,'USA':240,'USA-12/08/2021':240}]);
306306
});
307307

308308
it('transforms flat data to pivot data 3 column dimensions', () => {
@@ -326,23 +326,23 @@ describe('Pivot pipes', () => {
326326
expect(columnPipeResult).toEqual([
327327
{'field1':'All','records':
328328
[
329-
{'field1':'Clothing','level':1,'Bulgaria':774,'Bulgaria-Stanley':282,'Bulgaria-Stanley-01/01/2021':282,
329+
{'field1':'All-Clothing','level':1,'Bulgaria':774,'Bulgaria-Stanley':282,'Bulgaria-Stanley-01/01/2021':282,
330330
'Bulgaria-Walter':492,'Bulgaria-Walter-02/19/2020':492,'USA':296,'USA-Elisa':296,'USA-Elisa-01/05/2019':296,
331331
'Uruguay':456,'Uruguay-Larry':456,'Uruguay-Larry-05/12/2020':456},
332-
{'field1':'Bikes','level':1,'Uruguay':68,'Uruguay-Lydia':68,'Uruguay-Lydia-01/06/2020':68},
333-
{'field1':'Accessories','level':1,'USA':293,'USA-David':293,'USA-David-04/07/2021':293},
334-
{'field1':'Components','level':1,'USA':240,'USA-John':240,'USA-John-12/08/2021':240}
332+
{'field1':'All-Bikes','level':1,'Uruguay':68,'Uruguay-Lydia':68,'Uruguay-Lydia-01/06/2020':68},
333+
{'field1':'All-Accessories','level':1,'USA':293,'USA-David':293,'USA-David-04/07/2021':293},
334+
{'field1':'All-Components','level':1,'USA':240,'USA-John':240,'USA-John-12/08/2021':240}
335335
],
336336
'level':0,'Bulgaria':774,'Bulgaria-Stanley':282,'Bulgaria-Stanley-01/01/2021':282,'Bulgaria-Walter':492,
337337
'Bulgaria-Walter-02/19/2020':492,'USA':829,'USA-Elisa':296,'USA-Elisa-01/05/2019':296,'USA-David':293,
338338
'USA-David-04/07/2021':293,'USA-John':240,'USA-John-12/08/2021':240,'Uruguay':524,'Uruguay-Larry':456,
339339
'Uruguay-Larry-05/12/2020':456,'Uruguay-Lydia':68,'Uruguay-Lydia-01/06/2020':68},
340-
{'field1':'Clothing','level':1,'Bulgaria':774,'Bulgaria-Stanley':282,'Bulgaria-Stanley-01/01/2021':282,
340+
{'field1':'All-Clothing','level':1,'Bulgaria':774,'Bulgaria-Stanley':282,'Bulgaria-Stanley-01/01/2021':282,
341341
'Bulgaria-Walter':492,'Bulgaria-Walter-02/19/2020':492,'USA':296,'USA-Elisa':296,'USA-Elisa-01/05/2019':296,'Uruguay':456,
342342
'Uruguay-Larry':456,'Uruguay-Larry-05/12/2020':456},
343-
{'field1':'Bikes','level':1,'Uruguay':68,'Uruguay-Lydia':68,'Uruguay-Lydia-01/06/2020':68},
344-
{'field1':'Accessories','level':1,'USA':293,'USA-David':293,'USA-David-04/07/2021':293},
345-
{'field1':'Components','level':1,'USA':240,'USA-John':240,'USA-John-12/08/2021':240}
343+
{'field1':'All-Bikes','level':1,'Uruguay':68,'Uruguay-Lydia':68,'Uruguay-Lydia-01/06/2020':68},
344+
{'field1':'All-Accessories','level':1,'USA':293,'USA-David':293,'USA-David-04/07/2021':293},
345+
{'field1':'All-Components','level':1,'USA':240,'USA-John':240,'USA-John-12/08/2021':240}
346346
]);
347347
});
348348
});

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,14 @@ export class PivotUtil {
108108
const flatData = [];
109109
hierarchies.forEach((h, key) => {
110110
const obj = {};
111+
const multipleValues = values.length > 1;
111112
for (const value of values) {
112113
if(h[pivotKeys.aggregations]) {
113-
obj[key + '-' + value.member] = h[pivotKeys.aggregations][value.member];
114+
if (multipleValues) {
115+
obj[key + '-' + value.member] = h[pivotKeys.aggregations][value.member];
116+
} else {
117+
obj[key] = h[pivotKeys.aggregations][value.member];
118+
}
114119
}
115120
obj[pivotKeys.records] = h[pivotKeys.records];
116121
flatData.push(obj);

0 commit comments

Comments
 (0)