Skip to content

Commit 1c55012

Browse files
mddragnevmddragnev
committed
Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/pivot-selection
2 parents 6782f65 + fd28565 commit 1c55012

File tree

10 files changed

+114
-30
lines changed

10 files changed

+114
-30
lines changed

‎projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,6 @@ export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
121121
delete hierarchy[k];
122122
}
123123
});
124-
delete hierarchy.processed;
125-
if (this.isLeaf(hierarchy, pivotKeys)) {
126-
delete hierarchy[pivotKeys.records]; /* remove the helper records of the actual records so that
127-
expand indicators can be rendered properly */
128-
}
129124
for (const property in flatCols) {
130125
if (flatCols.hasOwnProperty(property)) {
131126
hierarchy[property] = flatCols[property];
@@ -179,7 +174,7 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy {
179174
protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false,
180175
grid?: PivotGridType): any {
181176
const config = grid.pivotConfiguration;
182-
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
177+
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
183178
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
184179
const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName);
185180
return PivotUtil.extractValueFromDimension(dim, rec);
@@ -202,7 +197,7 @@ export class DefaultPivotSortingStrategy extends DefaultSortingStrategy {
202197
grid?: PivotGridType) {
203198
const key = fieldName;
204199
const config = grid.pivotConfiguration;
205-
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
200+
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
206201
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
207202
this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key);
208203
const reverse = (dir === SortingDirection.Desc ? -1 : 1);

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ export class IgxPivotFilteringService extends IgxFilteringService {
1616
super.clear_filter(fieldName);
1717
const grid = this.grid;
1818
const config = (grid as IgxPivotGridComponent).pivotConfiguration;
19-
const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null));
20-
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
21-
const dim = enabledDimensions.find(x => x.memberName === fieldName || x.member === fieldName) || {};
19+
const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined));
20+
const dim = allDimensions.find(x => x.memberName === fieldName || x.member === fieldName);
2221
dim.filters = undefined;
2322
grid.filteringPipeTrigger++;
2423
if (PivotUtil.flatten(config.columns).indexOf(dim) !== -1) {
@@ -31,7 +30,7 @@ export class IgxPivotFilteringService extends IgxFilteringService {
3130
super.filter_internal(fieldName, term, conditionOrExpressionsTree, ignoreCase);
3231
const grid = this.grid;
3332
const config = (grid as IgxPivotGridComponent).pivotConfiguration;
34-
const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null));
33+
const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined));
3534
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
3635
const dim = enabledDimensions.find(x => x.memberName === fieldName || x.member === fieldName);
3736
const filteringTree = dim.filters || new FilteringExpressionsTree(FilteringLogic.And);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -525,10 +525,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
525525
public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
526526
done: (uniqueValues: any[]) => void) {
527527
const config = this.pivotConfiguration;
528-
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
528+
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
529529
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
530530
const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field);
531-
this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues));
531+
if (dim) {
532+
this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues));
533+
}
532534
}
533535

534536
public getDimensionData(dim: IPivotDimension,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -813,9 +813,9 @@ describe('Pivot pipes', () => {
813813
];
814814

815815
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
816-
const colPipeRes = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
817-
const rowStatePipeResult = rowStatePipe.transform(colPipeRes, pivotConfig, expansionStates, true);
818-
expect(rowStatePipeResult.length).toEqual(39);
816+
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
817+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
818+
expect(rowStatePipeResult.length).toEqual(31);
819819
expect(rowStatePipeResult[0]['AllPeriods']).toEqual('All Periods');
820820
expect(rowStatePipeResult[0]['AllProducts']).toEqual('All');
821821
expect(rowStatePipeResult[0]['ProductCategory']).not.toBeDefined();

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,15 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
6969
PivotUtil.flattenHierarchy(data, config, row, expansionStates, defaultExpand, pivotKeys, totalLlv, prevDims, 0);
7070
prevDims.push(row);
7171
}
72-
this.cleanState(data, pivotKeys);
73-
return data;
72+
const finalData = config.columnStrategy ? data : data.filter(x => x[pivotKeys.records]);
73+
this.cleanState(finalData, pivotKeys);
74+
return finalData;
7475
}
7576

7677
private cleanState(data, pivotKeys) {
7778
data.forEach(rec => {
7879
const keys = Object.keys(rec);
80+
delete rec.processed;
7981
//remove all record keys from final data since we don't need them anymore.
8082
keys.forEach(k => {
8183
if (k.indexOf(pivotKeys.records) !== -1) {
@@ -128,7 +130,7 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
128130
advancedExpressionsTree: IFilteringExpressionsTree,
129131
_filterPipeTrigger: number,
130132
_pipeTrigger: number): any[] {
131-
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
133+
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
132134
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
133135

134136
const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And);

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,67 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
4343
expect(cells.first.nativeElement.classList).toContain('test');
4444
expect(cells.last.nativeElement.classList).not.toContain('test');
4545
});
46+
47+
it('should remove row dimensions from chip', () => {
48+
const pivotGrid = fixture.componentInstance.pivotGrid;
49+
pivotGrid.pivotConfiguration.rows.push({
50+
memberName: 'SellerName',
51+
enabled: true
52+
});
53+
pivotGrid.pipeTrigger++;
54+
fixture.detectChanges();
55+
expect(pivotGrid.rowDimensions.length).toBe(2);
56+
expect(pivotGrid.rowList.first.data['SellerName']).not.toBeUndefined();
57+
58+
const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
59+
const rowChip = headerRow.querySelector('igx-chip[id="SellerName"]');
60+
const removeIcon = rowChip.querySelectorAll('igx-icon')[3];
61+
removeIcon.click();
62+
fixture.detectChanges();
63+
expect(pivotGrid.pivotConfiguration.rows[1].enabled).toBeFalse();
64+
expect(pivotGrid.rowDimensions.length).toBe(1);
65+
expect(pivotGrid.rowList.first.data['SellerName']).toBeUndefined();
66+
67+
});
68+
69+
it('should remove column dimensions from chip', () => {
70+
const pivotGrid = fixture.componentInstance.pivotGrid;
71+
expect(pivotGrid.columns.length).toBe(9);
72+
pivotGrid.pivotConfiguration.columns.push({
73+
memberName: 'SellerName',
74+
enabled: true
75+
});
76+
pivotGrid.pipeTrigger++;
77+
pivotGrid.setupColumns();
78+
fixture.detectChanges();
79+
expect(pivotGrid.columnDimensions.length).toBe(2);
80+
expect(pivotGrid.columns.length).not.toBe(9);
81+
82+
const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
83+
const rowChip = headerRow.querySelector('igx-chip[id="SellerName"]');
84+
const removeIcon = rowChip.querySelectorAll('igx-icon')[3];
85+
removeIcon.click();
86+
fixture.detectChanges();
87+
expect(pivotGrid.pivotConfiguration.columns[1].enabled).toBeFalse();
88+
expect(pivotGrid.columnDimensions.length).toBe(1);
89+
expect(pivotGrid.columns.length).toBe(9);
90+
});
91+
92+
it('should remove value from chip', () => {
93+
const pivotGrid = fixture.componentInstance.pivotGrid;
94+
expect(pivotGrid.columns.length).toBe(9);
95+
expect(pivotGrid.values.length).toBe(2);
96+
97+
const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
98+
const rowChip = headerRow.querySelector('igx-chip[id="UnitsSold"]');
99+
const removeIcon = rowChip.querySelectorAll('igx-icon')[3];
100+
removeIcon.click();
101+
fixture.detectChanges();
102+
expect(pivotGrid.pivotConfiguration.values[0].enabled).toBeFalse();
103+
expect(pivotGrid.values.length).toBe(1);
104+
expect(pivotGrid.columns.length).not.toBe(9);
105+
});
106+
46107
describe('IgxPivotGrid Features #pivotGrid', () => {
47108
it('should show excel style filtering via dimension chip.', () => {
48109
const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-pivot-grid');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ export class PivotUtil {
351351
for (const prev of prevDims) {
352352
const dimData = PivotUtil.getDimensionLevel(prev, rec,
353353
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' });
354-
parentFields.push(rec[dimData.dimension.memberName]);
354+
parentFields.push(rec[prev.memberName] || rec[dimData.dimension.memberName]);
355355
}
356356
parentFields.push(value);
357357
return parentFields.join('_');

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<div class="sample-column">
2-
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy"
3-
[rowSelection]="'single'"
4-
[columnSelection]="'single'"
5-
[cellSelection]="'single'"
6-
[defaultExpandState]='true'>
2+
<h4>Display Density</h4>
3+
<div class="density-chooser">
4+
<igx-buttongroup>
5+
<button igxButton [disabled]="grid1.displayDensity === compact"
6+
(click)="setDensity('compact')">Compact</button>
7+
<button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
8+
<button igxButton [disabled]="grid1.displayDensity === comfortable"
9+
(click)="setDensity('comfortable')">Comfortable</button>
10+
</igx-buttongroup>
11+
</div>
12+
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
13+
[pivotConfiguration]="pivotConfigHierarchy" [rowSelection]="'single'" [columnSelection]="'single'"
14+
[cellSelection]="'single'">
715
</igx-pivot-grid>
816
</div>

‎src/app/pivot-grid/pivot-grid.sample.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
height: 100%;
44
}
55

6+
.density-chooser {
7+
margin-bottom: 16px;
8+
}
9+
610
:host ::ng-deep {
711
.upFont {
812
color: lightgreen;

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
IgxPivotGridComponent,
55
IPivotConfiguration,
66
PivotAggregation,
7-
IgxPivotDateDimension
7+
IgxPivotDateDimension,
8+
DisplayDensity
89
} from 'igniteui-angular';
910
import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
1011

@@ -41,6 +42,9 @@ export class IgxTotalSaleAggregate {
4142
})
4243
export class PivotGridSampleComponent {
4344
@ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
45+
public comfortable: DisplayDensity = DisplayDensity.comfortable;
46+
public cosy: DisplayDensity = DisplayDensity.cosy;
47+
public compact: DisplayDensity = DisplayDensity.compact;
4448

4549
public pivotConfigHierarchy: IPivotConfiguration = {
4650
columns: [
@@ -71,6 +75,10 @@ export class PivotGridSampleComponent {
7175
memberName: 'ProductCategory',
7276
enabled: true
7377
}
78+
},
79+
{
80+
memberName: 'SellerName',
81+
enabled: true
7482
}
7583
],
7684
values: [
@@ -80,7 +88,7 @@ export class PivotGridSampleComponent {
8088
key: 'SUM',
8189
aggregator: IgxPivotNumericAggregate.sum,
8290
label: 'Sum'
83-
},
91+
},
8492
enabled: true,
8593
styles: {
8694
upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
@@ -101,11 +109,11 @@ export class PivotGridSampleComponent {
101109
key: 'SUM',
102110
aggregator: IgxTotalSaleAggregate.totalSale,
103111
label: 'Sum of Sale'
104-
},{
112+
}, {
105113
key: 'MIN',
106114
aggregator: IgxTotalSaleAggregate.totalMin,
107115
label: 'Minimum of Sale'
108-
},{
116+
}, {
109117
key: 'MAX',
110118
aggregator: IgxTotalSaleAggregate.totalMax,
111119
label: 'Maximum of Sale'
@@ -149,5 +157,10 @@ export class PivotGridSampleComponent {
149157
{
150158
ProductCategory: 'Clothing', UnitPrice: 16.05, SellerName: 'Walter',
151159
Country: 'Bulgaria', City: 'Plovdiv', Date: '02/19/2020', UnitsSold: 492
152-
}];
160+
}
161+
];
162+
163+
public setDensity(density: DisplayDensity) {
164+
this.grid1.displayDensity = density;
165+
}
153166
}

0 commit comments

Comments
 (0)