Skip to content

Commit bd9efaa

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Merge from base.
2 parents 9f2f729 + 8fa5274 commit bd9efaa

18 files changed

+201
-94
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -727,6 +727,22 @@
727727
}
728728
}
729729

730+
@include e(tr-pivot) {
731+
@extend %igx-grid__tr-pivot !optional
732+
}
733+
734+
@include e(tr-pivot, $m: 'row-area') {
735+
@extend %igx-grid__tr-pivot--row-area !optional
736+
}
737+
738+
@include e(tr-pivot, $m: 'filter') {
739+
@extend %igx-grid__tr-pivot--filter !optional
740+
}
741+
742+
@include e(tr-pivot-group) {
743+
@extend %igx-grid__tr-pivot-group !optional
744+
}
745+
730746
@include excel-filtering-partial();
731747
@include advanced-filtering-partial();
732748
@include group-by-area();

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -630,16 +630,20 @@
630630
color: var-get($theme, 'pinned-border-color')
631631
);
632632

633+
$padding-comfortable: rem(24px);
634+
$padding-cosy: rem(16px);
635+
$padding-compact: rem(12px);
636+
633637
$grid-header-padding: (
634-
comfortable: 0 rem(24px),
635-
cosy: 0 rem(16px),
636-
compact: 0 rem(12px)
638+
comfortable: 0 $padding-comfortable,
639+
cosy: 0 $padding-cosy,
640+
compact: 0 $padding-compact
637641
);
638642

639643
$grid-cbx-padding: (
640-
comfortable: rem(24px),
641-
cosy: rem(16px),
642-
compact: rem(12px)
644+
comfortable: $padding-comfortable,
645+
cosy: $padding-cosy,
646+
compact: $padding-compact
643647
);
644648

645649
$cbx-padding: map.get($grid-cbx-padding, 'comfortable');
@@ -1196,7 +1200,7 @@
11961200
}
11971201

11981202
%igx-grid__tr--header {
1199-
display: flex;
1203+
display: flex;
12001204
align-items: center;
12011205
}
12021206

@@ -2865,5 +2869,62 @@
28652869
border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
28662870
}
28672871
}
2872+
2873+
// Pivot grid
2874+
%grid-thead--pivot {
2875+
flex-direction: column;
2876+
}
2877+
2878+
%igx-grid__tr-pivot {
2879+
display: flex;
2880+
align-items: center;
2881+
background: inherit;
2882+
z-index: 3;
2883+
2884+
&:not(&--row-area) {
2885+
height: map.get($grid-header-height, 'comfortable');
2886+
}
2887+
2888+
padding: map.get($grid-header-padding, 'comfortable');
2889+
background-clip: border-box !important;
2890+
2891+
border-#{$left}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2892+
border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2893+
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2894+
2895+
igx-chips-area {
2896+
> * {
2897+
margin-#{$right}: rem(8px);
2898+
}
2899+
2900+
&:last-child {
2901+
margin-#{$right}: 0;
2902+
}
2903+
}
2904+
}
2905+
2906+
%igx-grid__tr-pivot--row-area {
2907+
align-items: flex-end;
2908+
padding-bottom: $padding-comfortable;
2909+
border-#{$left}: 0;
2910+
border-bottom: 0;
2911+
}
2912+
2913+
%igx-grid__tr-pivot--filter {
2914+
height: map.get($grid-header-height, 'comfortable');
2915+
border-left: 0;
2916+
border-right: 0;
2917+
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2918+
}
2919+
2920+
%igx-grid-thead__wrapper--pivot {
2921+
border-bottom: 0;
2922+
}
2923+
2924+
%igx-grid__tr-pivot-group {
2925+
flex: 1;
2926+
}
2927+
// Pivot grid END
28682928
}
28692929

2930+

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
}
2525
}
2626

27+
@include e(wrapper, $m: 'pivot') {
28+
@extend %igx-grid-thead__wrapper--pivot !optional;
29+
}
30+
2731
@include e(title) {
2832
@extend %grid-cell-display !optional;
2933
@extend %grid-cell-header !optional;
@@ -69,6 +73,10 @@
6973
@extend %grid-thead-title--cosy !optional;
7074
}
7175
}
76+
77+
@include m(pivot) {
78+
@extend %grid-thead--pivot !optional;
79+
}
7280
}
7381

7482
@include b(igx-grid-th) {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
5252
const newData = [...data];
5353
for (let i = 0; i < newData.length; i++) {
5454
const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
55+
const leafData = PivotUtil.getDirectLeafs(currData, pivotKeys);
5556
const hierarchyFields = PivotUtil
56-
.getFieldsHierarchy(currData, [row], PivotDimensionType.Row, pivotKeys);
57+
.getFieldsHierarchy(leafData, [row], PivotDimensionType.Row, pivotKeys);
5758
const siblingData = PivotUtil
5859
.processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
5960
PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ng-content select="igx-grid-toolbar"></ng-content>
33

44
<!-- Grid table head row area -->
5-
<igx-pivot-header-row class="igx-grid-thead" tabindex="0" style='flex-direction: column;'
5+
<igx-pivot-header-row class="igx-grid-thead igx-grid-thead--pivot" tabindex="0"
66
[grid]="this"
77
[hasMRL]="hasColumnLayouts"
88
[density]="displayDensity"
@@ -35,7 +35,7 @@
3535
| pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
3636
| pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
3737
| pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger
38-
| pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger"
38+
| pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger"
3939
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
4040
[igxForContainerSize]='calcHeight'
4141
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
@@ -117,8 +117,7 @@
117117
<ng-template #headerTemplate let-column>
118118
<div class="igx-grid__tr--header">
119119
<igx-icon [attr.draggable]="false"
120-
(click)="toggleColumn(column)"
121-
style='cursor: pointer;'>
120+
(click)="toggleColumn(column)">
122121
{{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
123122
{{column.header}}
124123
</div>
@@ -133,4 +132,4 @@
133132
<igx-excel-style-search></igx-excel-style-search>
134133
</igx-excel-style-filter-operations>
135134
</igx-grid-excel-style-filtering>
136-
</div>
135+
</div>

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,11 +274,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
274274
*/
275275
public dragRowID = null;
276276

277-
protected _defaultExpandState = true;
277+
protected _defaultExpandState = false;
278278
private _data;
279279
private _filteredData;
280280
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
281281

282+
283+
/**
284+
* Gets/Sets the default expand state for all rows.
285+
*/
286+
@Input()
287+
public get defaultExpandState() {
288+
return this._defaultExpandState;
289+
}
290+
291+
public set defaultExpandState(val: boolean) {
292+
this._defaultExpandState = val;
293+
}
294+
282295
/**
283296
* @hidden @internal
284297
*/

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('Pivot pipes', () => {
7272
it('transforms flat data to pivot data', () => {
7373
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
7474
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
75-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
75+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
7676
expect(rowStatePipeResult).toEqual([
7777
{ All: 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, AllCategory: 'All', AllCategory_level: 0 },
7878
{ ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, ProductCategory_level: 1 },
@@ -175,7 +175,7 @@ describe('Pivot pipes', () => {
175175
], level: 0
176176
}]);
177177
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
178-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
178+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
179179
expect(rowStatePipeResult).toEqual([
180180
{
181181
ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296,
@@ -192,7 +192,7 @@ describe('Pivot pipes', () => {
192192
expanded.set('All', false);
193193
const rowPipeResult = rowPipe.transform(data, pivotConfig, expanded);
194194
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
195-
const rowPipeCollapseResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded);
195+
const rowPipeCollapseResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded, true);
196196
expect(rowPipeCollapseResult).toEqual([
197197
{
198198
AllCategory: 'All',
@@ -205,7 +205,7 @@ describe('Pivot pipes', () => {
205205
]);
206206

207207
expanded.set('All', true);
208-
const rowPipeExpandResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded);
208+
const rowPipeExpandResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded, true);
209209
expect(rowPipeExpandResult).toEqual([
210210
{ AllCategory: 'All', All: 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, AllCategory_level: 0 },
211211
{ ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, ProductCategory_level: 1 },
@@ -236,7 +236,7 @@ describe('Pivot pipes', () => {
236236
];
237237
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
238238
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
239-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
239+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
240240
expect(rowStatePipeResult).toEqual([
241241
{ Date: '01/01/2021', ProductCategory: 'Clothing', All: 282, 'All-Bulgaria': 282, ProductCategory_level: 0, Date_level: 0 },
242242
{ Date: '01/05/2019', ProductCategory: 'Clothing', All: 296, 'All-USA': 296, ProductCategory_level: 0, Date_level: 0 },
@@ -268,7 +268,7 @@ describe('Pivot pipes', () => {
268268
}];
269269
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
270270
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
271-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
271+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
272272
expect(rowStatePipeResult).toEqual([
273273
{
274274
'AllDate': 'AllDate', 'AllProd': 'AllProd', 'All': 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, 'AllProd_level': 0,
@@ -363,7 +363,7 @@ describe('Pivot pipes', () => {
363363
}];
364364
const rowPipeResult = rowPipe.transform(data, pivotConfig, new Map<any, boolean>());
365365
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
366-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
366+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
367367
/* eslint-disable quote-props */
368368
expect(rowStatePipeResult).toEqual([
369369
{
@@ -404,7 +404,7 @@ describe('Pivot pipes', () => {
404404
}];
405405
const rowPipeResult = rowPipe.transform(data, pivotConfig, new Map<any, boolean>());
406406
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
407-
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
407+
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
408408
/* eslint-disable quote-props */
409409
expect(rowStateResult).toEqual(
410410
[
@@ -458,7 +458,7 @@ describe('Pivot pipes', () => {
458458
];
459459
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
460460
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
461-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
461+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
462462
expect(rowStatePipeResult).toEqual(
463463
[
464464
{
@@ -507,7 +507,7 @@ describe('Pivot pipes', () => {
507507

508508
const rowPipeResult = rowPipe.transform(preprocessedData, pivotConfig, new Map<any, boolean>());
509509
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
510-
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
510+
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
511511

512512
// same data but expanded
513513
expect(rowStateResult).toEqual(
@@ -814,7 +814,7 @@ describe('Pivot pipes', () => {
814814

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

‎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
@@ -54,6 +54,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
5454
collection: any[],
5555
config: IPivotConfiguration,
5656
expansionStates: Map<any, boolean>,
57+
defaultExpand: boolean,
5758
_pipeTrigger?: number,
5859
__?,
5960
pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
@@ -65,7 +66,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
6566
for (const row of enabledRows) {
6667
const lvl = PivotUtil.getDimensionDepth(row);
6768
totalLlv += lvl;
68-
PivotUtil.flattenHierarchy(data, config, row, expansionStates, pivotKeys, totalLlv, prevDims, 0);
69+
PivotUtil.flattenHierarchy(data, config, row, expansionStates, defaultExpand, pivotKeys, totalLlv, prevDims, 0);
6970
prevDims.push(row);
7071
}
7172
const finalData = config.columnStrategy ? data : data.filter(x => x[pivotKeys.records]);

0 commit comments

Comments
 (0)