Skip to content

Commit 3685ccb

Browse files
dkamburovdkamburov
committed
Merge remote-tracking branch 'origin/pivot-grid-master' into mkirova/update-samples
2 parents d6247b3 + fd28565 commit 3685ccb

File tree

10 files changed

+127
-47
lines changed

10 files changed

+127
-47
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
@@ -536,10 +536,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
536536
public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
537537
done: (uniqueValues: any[]) => void) {
538538
const config = this.pivotConfiguration;
539-
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
539+
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
540540
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
541541
const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field);
542-
this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues));
542+
if (dim) {
543+
this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues));
544+
}
543545
}
544546

545547
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: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,16 @@
44
[data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
55
placeholder="Dimension(s)" searchPlaceholder="Search...">
66
</igx-combo>
7+
<h4>Display Density</h4>
8+
<div class="density-chooser">
9+
<igx-buttongroup>
10+
<button igxButton [disabled]="grid1.displayDensity === compact"
11+
(click)="setDensity('compact')">Compact</button>
12+
<button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
13+
<button igxButton [disabled]="grid1.displayDensity === comfortable"
14+
(click)="setDensity('comfortable')">Comfortable</button>
15+
</igx-buttongroup>
16+
</div>
717
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy"
818
(dimensionsChange)='dimensionChange($event)'>
9-
</igx-pivot-grid>
1019
</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: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
PivotAggregation,
88
IgxPivotDateDimension,
99
IPivotDimension,
10-
IDimensionsChange
10+
IDimensionsChange,
11+
DisplayDensity
1112
} from 'igniteui-angular';
1213
import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
1314

@@ -44,6 +45,9 @@ export class IgxTotalSaleAggregate {
4445
})
4546
export class PivotGridSampleComponent {
4647
@ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
48+
public comfortable: DisplayDensity = DisplayDensity.comfortable;
49+
public cosy: DisplayDensity = DisplayDensity.cosy;
50+
public compact: DisplayDensity = DisplayDensity.compact;
4751

4852
public dimensions: IPivotDimension[] = [
4953
{
@@ -97,7 +101,7 @@ export class PivotGridSampleComponent {
97101
key: 'SUM',
98102
aggregator: IgxPivotNumericAggregate.sum,
99103
label: 'Sum'
100-
},
104+
},
101105
enabled: true,
102106
styles: {
103107
upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
@@ -118,11 +122,11 @@ export class PivotGridSampleComponent {
118122
key: 'SUM',
119123
aggregator: IgxTotalSaleAggregate.totalSale,
120124
label: 'Sum of Sale'
121-
},{
125+
}, {
122126
key: 'MIN',
123127
aggregator: IgxTotalSaleAggregate.totalMin,
124128
label: 'Minimum of Sale'
125-
},{
129+
}, {
126130
key: 'MAX',
127131
aggregator: IgxTotalSaleAggregate.totalMax,
128132
label: 'Maximum of Sale'
@@ -168,29 +172,33 @@ export class PivotGridSampleComponent {
168172
Country: 'Bulgaria', City: 'Plovdiv', Date: '02/19/2020', UnitsSold: 492
169173
}];
170174

171-
public handleChange(event) {
172-
let isColumnChange = false
173-
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
174-
if (event.added.length > 0) {
175-
const dim = allDims.find(x => x && x.memberName === event.added[0].memberName);
176-
isColumnChange = this.pivotConfigHierarchy.columns.indexOf(dim) !== -1;
177-
if (dim) {
178-
dim.enabled = true;
179-
} else {
180-
// add as row by default
181-
this.pivotConfigHierarchy.rows = this.pivotConfigHierarchy.rows.concat(event.added);
182-
}
183-
} else if (event.removed.length > 0) {
184-
const dims = allDims.filter(x => x && event.removed.indexOf(x) !== -1);
185-
dims.forEach(x => x.enabled = false);
186-
isColumnChange = dims.some(x => this.pivotConfigHierarchy.columns.indexOf(x) !== -1);
175+
public handleChange(event) {
176+
let isColumnChange = false
177+
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
178+
if (event.added.length > 0) {
179+
const dim = allDims.find(x => x && x.memberName === event.added[0].memberName);
180+
isColumnChange = this.pivotConfigHierarchy.columns.indexOf(dim) !== -1;
181+
if (dim) {
182+
dim.enabled = true;
183+
} else {
184+
// add as row by default
185+
this.pivotConfigHierarchy.rows = this.pivotConfigHierarchy.rows.concat(event.added);
187186
}
188-
this.grid1.notifyDimensionChange(isColumnChange);
187+
} else if (event.removed.length > 0) {
188+
const dims = allDims.filter(x => x && event.removed.indexOf(x) !== -1);
189+
dims.forEach(x => x.enabled = false);
190+
isColumnChange = dims.some(x => this.pivotConfigHierarchy.columns.indexOf(x) !== -1);
189191
}
192+
this.grid1.notifyDimensionChange(isColumnChange);
193+
}
190194

191-
public dimensionChange(event: IDimensionsChange) {
192-
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
193-
const allEnabled = allDims.filter(x => x && x.enabled);
194-
this.selected = allEnabled;
195-
}
195+
public dimensionChange(event: IDimensionsChange) {
196+
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
197+
const allEnabled = allDims.filter(x => x && x.enabled);
198+
this.selected = allEnabled;
199+
}
200+
201+
public setDensity(density: DisplayDensity) {
202+
this.grid1.displayDensity = density;
203+
}
196204
}

0 commit comments

Comments
 (0)