Skip to content

Commit 7be1366

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Merge from base.
2 parents 3fe30a2 + 8fa5274 commit 7be1366

20 files changed

+622
-370
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"
@@ -118,8 +118,7 @@
118118
<ng-template #headerTemplate let-column>
119119
<div class="igx-grid__tr--header">
120120
<igx-icon [attr.draggable]="false"
121-
(click)="toggleColumn(column)"
122-
style='cursor: pointer;'>
121+
(click)="toggleColumn(column)">
123122
{{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
124123
{{column.header}}
125124
</div>
@@ -134,4 +133,4 @@
134133
<igx-excel-style-search></igx-excel-style-search>
135134
</igx-excel-style-filter-operations>
136135
</igx-grid-excel-style-filtering>
137-
</div>
136+
</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.interface.ts‎

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

1616
export interface IPivotAggregator {
17-
// Aggregation unique key.
17+
/** Aggregation unique key. */
1818
key: string;
19-
// Aggregation label to show in the UI.
19+
/** Aggregation label to show in the UI. */
2020
label: string;
21-
// Aggregator function can be a custom implementation of PivotAggregation or
22-
// use predefined ones from IgxPivotAggregate and its variants.
21+
/**
22+
* Aggregator function can be a custom implementation of `PivotAggregation`, or
23+
* use predefined ones from `IgxPivotAggregate` and its variants.
24+
*/
2325
aggregator: (members: any[], data?: any[]) => any;
2426
}
2527

28+
/**
29+
* Configuration of the pivot grid.
30+
*/
2631
export interface IPivotConfiguration {
32+
/** A strategy to transform the rows. */
2733
rowStrategy?: IPivotDimensionStrategy | null;
34+
/** A strategy to transform the columns. */
2835
columnStrategy?: IPivotDimensionStrategy | null;
36+
/** A list of the rows. */
2937
rows: IPivotDimension[] | null;
38+
/** A list of the columns. */
3039
columns: IPivotDimension[] | null;
40+
/** A list of the values. */
3141
values: IPivotValue[] | null;
32-
// dimensions to be displayed in the filter area.
42+
/** Dimensions to be displayed in the filter area. */
3343
filters?: IPivotDimension[] | null;
3444
}
3545

3646
export interface IPivotDimension {
37-
// allow defining a hierarchy when multiple sub groups need to be extracted from single member.
47+
/** Allows defining a hierarchy when multiple sub groups need to be extracted from single member. */
3848
childLevel?: IPivotDimension;
39-
// field name which to use to extract value
49+
/** Field name to use in order to extract value. */
4050
memberName: string;
41-
// function that extract the value
51+
/** Function that extracts the value */
4252
memberFunction?: (data: any) => any;
43-
// Enables/Disables a particular dimension from pivot structure.
53+
/** Enables/Disables a particular dimension from pivot structure. */
4454
enabled: boolean;
45-
// A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
55+
/**
56+
* A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
57+
* */
4658
filter?: FilteringExpressionsTree | null;
4759
sortDirection?: SortingDirection;
4860
dataType?: GridColumnDataType;

0 commit comments

Comments
 (0)