Skip to content

Commit d6247b3

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Merge from base.
2 parents 5f220a8 + 8fa5274 commit d6247b3

18 files changed

+606
-361
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: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { PivotUtil } from '../grids/pivot-grid/pivot-util';
55
import { FilteringStrategy } from './filtering-strategy';
66
import { GridColumnDataType } from './data-util';
77
import { DefaultSortingStrategy, SortingDirection } from './sorting-strategy';
8-
import { parseDate } from '../core/utils';
8+
import { cloneArray, parseDate } from '../core/utils';
99

1010
export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy {
1111
private static _instance: NoopPivotDimensionsStrategy = null;
@@ -28,50 +28,53 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
2828
}
2929

3030
public process(
31-
collection: any,
32-
rows: IPivotDimension[],
33-
values?: IPivotValue[],
34-
pivotKeys: IPivotKeys =
35-
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
36-
): any[] {
37-
let hierarchies;
38-
let data;
39-
const prevRowDims = [];
40-
let prevDim;
41-
for (const row of rows) {
42-
if (!data) {
43-
// build hierarchies - groups and subgroups
44-
hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
45-
// generate flat data from the hierarchies
46-
data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
47-
prevRowDims.push(row);
48-
prevDim = row;
49-
} else {
50-
const newData = [...data];
51-
for (let i = 0; i < newData.length; i++) {
52-
const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
53-
const hierarchyFields = PivotUtil
54-
.getFieldsHierarchy(currData, [row], PivotDimensionType.Row, pivotKeys);
55-
const siblingData = PivotUtil
56-
.processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
57-
PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
58-
59-
PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
60-
if (siblingData.length > 1) {
61-
newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
62-
} else {
63-
newData.splice(i , 1, ...siblingData);
64-
}
31+
collection: any,
32+
rows: IPivotDimension[],
33+
values?: IPivotValue[],
34+
pivotKeys: IPivotKeys =
35+
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
36+
): any[] {
37+
let hierarchies;
38+
let data;
39+
const prevRowDims = [];
40+
let prevDim;
41+
const currRows = cloneArray(rows, true);
42+
PivotUtil.assignLevels(currRows);
43+
for (const row of currRows) {
44+
if (!data) {
45+
// build hierarchies - groups and subgroups
46+
hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
47+
// generate flat data from the hierarchies
48+
data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
49+
prevRowDims.push(row);
50+
prevDim = row;
51+
} else {
52+
const newData = [...data];
53+
for (let i = 0; i < newData.length; i++) {
54+
const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
55+
const leafData = PivotUtil.getDirectLeafs(currData, pivotKeys);
56+
const hierarchyFields = PivotUtil
57+
.getFieldsHierarchy(leafData, [row], PivotDimensionType.Row, pivotKeys);
58+
const siblingData = PivotUtil
59+
.processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
60+
PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
61+
62+
PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
63+
if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row) && siblingData.length > 1) {
64+
newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
65+
} else {
66+
newData.splice(i, 1, ...siblingData);
6567
i += siblingData.length - 1;
6668
}
67-
data = newData;
68-
prevDim = row;
69-
prevRowDims.push(row);
7069
}
70+
data = newData;
71+
prevDim = row;
72+
prevRowDims.push(row);
7173
}
72-
return data;
7374
}
75+
return data;
7476
}
77+
}
7578

7679
export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
7780
private static _instance: PivotRowDimensionsStrategy = null;
@@ -174,7 +177,7 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy {
174177
}
175178

176179
protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false,
177-
grid?: PivotGridType): any {
180+
grid?: PivotGridType): any {
178181
const config = grid.pivotConfiguration;
179182
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
180183
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
@@ -190,13 +193,13 @@ export class DefaultPivotSortingStrategy extends DefaultSortingStrategy {
190193
return this._instance || (this._instance = new this());
191194
}
192195
public sort(data: any[],
193-
fieldName: string,
194-
dir: SortingDirection,
195-
ignoreCase: boolean,
196-
valueResolver: (obj: any, key: string, isDate?: boolean) => any,
197-
isDate?: boolean,
198-
isTime?: boolean,
199-
grid?: PivotGridType) {
196+
fieldName: string,
197+
dir: SortingDirection,
198+
ignoreCase: boolean,
199+
valueResolver: (obj: any, key: string, isDate?: boolean) => any,
200+
isDate?: boolean,
201+
isTime?: boolean,
202+
grid?: PivotGridType) {
200203
const key = fieldName;
201204
const config = grid.pivotConfiguration;
202205
const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);

‎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
@@ -302,11 +302,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
302302
*/
303303
public dragRowID = null;
304304

305-
protected _defaultExpandState = true;
305+
protected _defaultExpandState = false;
306306
private _data;
307307
private _filteredData;
308308
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
309309

310+
311+
/**
312+
* Gets/Sets the default expand state for all rows.
313+
*/
314+
@Input()
315+
public get defaultExpandState() {
316+
return this._defaultExpandState;
317+
}
318+
319+
public set defaultExpandState(val: boolean) {
320+
this._defaultExpandState = val;
321+
}
322+
310323
/**
311324
* @hidden @internal
312325
*/

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

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,47 @@ export interface IPivotDimensionStrategy {
2222
export type PivotAggregation = (members: any[], data: any[]) => any;
2323

2424
export interface IPivotAggregator {
25-
// Aggregation unique key.
25+
/** Aggregation unique key. */
2626
key: string;
27-
// Aggregation label to show in the UI.
27+
/** Aggregation label to show in the UI. */
2828
label: string;
29-
// Aggregator function can be a custom implementation of PivotAggregation or
30-
// use predefined ones from IgxPivotAggregate and its variants.
29+
/**
30+
* Aggregator function can be a custom implementation of `PivotAggregation`, or
31+
* use predefined ones from `IgxPivotAggregate` and its variants.
32+
*/
3133
aggregator: (members: any[], data?: any[]) => any;
3234
}
3335

36+
/**
37+
* Configuration of the pivot grid.
38+
*/
3439
export interface IPivotConfiguration {
40+
/** A strategy to transform the rows. */
3541
rowStrategy?: IPivotDimensionStrategy | null;
42+
/** A strategy to transform the columns. */
3643
columnStrategy?: IPivotDimensionStrategy | null;
44+
/** A list of the rows. */
3745
rows: IPivotDimension[] | null;
46+
/** A list of the columns. */
3847
columns: IPivotDimension[] | null;
48+
/** A list of the values. */
3949
values: IPivotValue[] | null;
40-
// dimensions to be displayed in the filter area.
50+
/** Dimensions to be displayed in the filter area. */
4151
filters?: IPivotDimension[] | null;
4252
}
4353

4454
export interface IPivotDimension {
45-
// allow defining a hierarchy when multiple sub groups need to be extracted from single member.
55+
/** Allows defining a hierarchy when multiple sub groups need to be extracted from single member. */
4656
childLevel?: IPivotDimension;
47-
// field name which to use to extract value
57+
/** Field name to use in order to extract value. */
4858
memberName: string;
49-
// function that extract the value
59+
/** Function that extracts the value */
5060
memberFunction?: (data: any) => any;
51-
// Enables/Disables a particular dimension from pivot structure.
61+
/** Enables/Disables a particular dimension from pivot structure. */
5262
enabled: boolean;
53-
// A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
63+
/**
64+
* A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
65+
* */
5466
filter?: FilteringExpressionsTree | null;
5567
sortDirection?: SortingDirection;
5668
dataType?: GridColumnDataType;

0 commit comments

Comments
 (0)