Skip to content

Commit 81141ba

Browse files
skrustevskrustev
committed
feat(pivotGrid): Add layout option up to spec. Further tweaks and fixes.
1 parent 477cf70 commit 81141ba

14 files changed

+44
-36
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1229,17 +1229,20 @@ export interface PivotGridType extends GridType {
12291229
* it includes hierarchical level, filters and sorting, dimentional level, etc.
12301230
*/
12311231
allDimensions: IPivotDimension[],
1232-
horizontalRowDimensions: boolean,
12331232
/** Specifies whether to show the pivot configuration UI in the grid. */
12341233
pivotUI: IPivotUISettings;
12351234
/** @hidden @internal */
12361235
columnDimensions: IPivotDimension[];
12371236
/** @hidden @internal */
12381237
rowDimensions: IPivotDimension[];
12391238
rowDimensionResizing: boolean;
1239+
/** @hidden @internal */
12401240
visibleRowDimensions: IPivotDimension[];
1241+
/** @hidden @internal */
12411242
flattenedRowDimensions: IPivotDimension[];
12421243
/** @hidden @internal */
1244+
hasHorizontalLayout: boolean;
1245+
/** @hidden @internal */
12431246
values: IPivotValue[];
12441247
/** @hidden @internal */
12451248
filterDimensions: IPivotDimension[];

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
5252
}
5353

5454
let verticalContainer;
55-
if (this.grid.horizontalRowDimensions) {
55+
if (this.grid.hasHorizontalLayout) {
5656
let newPosition = {
5757
row: this.activeNode.row,
5858
column: this.activeNode.column,
@@ -157,7 +157,7 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
157157
}
158158

159159
if (key.includes('down')) {
160-
if (this.grid.horizontalRowDimensions) {
160+
if (this.grid.hasHorizontalLayout) {
161161
this.activeNode.row = 0;
162162
this.activeNode.layout = {
163163
rowStart: 1,
@@ -178,11 +178,11 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
178178

179179
this.isRowDimensionHeaderActive = false;
180180
this.isRowHeaderActive = true;
181-
this.grid.rowDimensionContainer.toArray()[this.grid.horizontalRowDimensions ? 0 : newActiveNode.column].nativeElement.focus();
181+
this.grid.rowDimensionContainer.toArray()[this.grid.hasHorizontalLayout ? 0 : newActiveNode.column].nativeElement.focus();
182182
}
183183

184184
this.setActiveNode(newActiveNode);
185-
} else if (key.includes('left') && this.activeNode.column === 0) {
185+
} else if (key.includes('left') && this.activeNode.column === 0 && this.grid.pivotUI.showRowHeaders) {
186186
this.isRowDimensionHeaderActive = true;
187187
const newActiveNode: IActiveNode = {
188188
row: this.activeNode.row,
@@ -256,10 +256,11 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
256256
return { row: this.activeNode.row, column: this.activeNode.column, layout: this.activeNode.layout };
257257
}
258258

259+
const nextColStartNormal = curCellLayout.colStart + (previous ? -1 : curCellLayout.colEnd - curCellLayout.colStart);
259260
const nextColumnLayout = this.getNextVerticalColumnIndex(
260261
parentRow,
261262
this.activeNode.layout.rowStart,
262-
ctrl ? (previous ? 1 : maxColEnd - 1) : curCellLayout.colStart + (previous ? -1 : 1)
263+
ctrl ? (previous ? 1 : maxColEnd - 1) : nextColStartNormal
263264
);
264265
return {
265266
row: this.activeNode.row,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</igx-pivot-header-row>
1919

2020
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
21-
<ng-container *ngTemplateOutlet="rowDimensions.length ? (horizontalRowDimensions ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this"></ng-container>
21+
<ng-container *ngTemplateOutlet="rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this"></ng-container>
2222
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
2323
(dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
2424
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
3737
import { ColumnType, GridType, IGX_GRID_BASE, IgxColumnTemplateContext, RowType } from '../common/grid.interface';
3838
import { IgxGridCRUDService } from '../common/crud.service';
3939
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
40-
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings } from './pivot-grid.interface';
40+
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType } from './pivot-grid.interface';
4141
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
4242
import { IgxColumnGroupComponent } from '../columns/column-group.component';
4343
import { IgxColumnComponent } from '../columns/column.component';
@@ -309,9 +309,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
309309
@Input()
310310
public rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>;
311311

312-
@Input()
313-
public horizontalRowDimensions = false;
314-
315312
@Input()
316313
/**
317314
* Gets/Sets the pivot configuration with all related dimensions and values.
@@ -666,7 +663,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
666663
private _pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
667664
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
668665
private _superCompactMode = false;
669-
private _pivotUI: IPivotUISettings = { showConfiguration: true, showRowHeaders: false };
666+
private _pivotUI: IPivotUISettings = { showConfiguration: true, showRowHeaders: false, rowLayout: PivotRowLayoutType.Vertical };
670667
private _sortableColumns = true;
671668
private _visibleRowDimensions: IPivotDimension[] = [];
672669
private _flattenedRowDimensions: IPivotDimension[] = [];
@@ -1588,7 +1585,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
15881585
public override dataRebinding(event: IForOfDataChangingEventArgs) {
15891586
super.dataRebinding(event);
15901587

1591-
if (this.horizontalRowDimensions) {
1588+
if (this.hasHorizontalLayout) {
15921589
this.setupColumns();
15931590
}
15941591
}
@@ -1962,6 +1959,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
19621959
}
19631960
}
19641961

1962+
/** @hidden @internal */
1963+
public get hasHorizontalLayout() {
1964+
return this.pivotUI.rowLayout === PivotRowLayoutType.Horizontal;
1965+
}
1966+
19651967
/**
19661968
* @hidden
19671969
*/
@@ -2175,10 +2177,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
21752177
}
21762178
}
21772179

2178-
/** @hidden @internal */
2179-
public get hasDimensionsToAutosize() {
2180-
return this.rowDimensions.some(x => x.width === 'auto' && !x.autoWidth);
2181-
}
2180+
/** @hidden @internal */
2181+
public get hasDimensionsToAutosize() {
2182+
return this.rowDimensions.some(x => x.width === 'auto' && !x.autoWidth);
2183+
}
21822184

21832185
protected generateFromData(fields: string[]) {
21842186
const separator = this.pivotKeys.columnDimensionSeparator;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,9 +198,16 @@ export enum PivotDimensionType {
198198
Filter
199199
}
200200

201+
202+
export enum PivotRowLayoutType {
203+
Vertical = "vertical",
204+
Horizontal = "horizontal"
205+
}
206+
201207
export interface IPivotUISettings {
202208
showConfiguration?: boolean;
203209
showRowHeaders?: boolean;
210+
rowLayout?: PivotRowLayoutType
204211
}
205212

206213
export type PivotAggregationType = 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'COUNT' | 'LATEST' | 'EARLIEST' ;

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Inject, Pipe, PipeTransform } from '@angular/core';
2-
import { cloneArray, last, resolveNestedPath } from '../../core/utils';
2+
import { cloneArray, resolveNestedPath } from '../../core/utils';
33
import { DataUtil } from '../../data-operations/data-util';
44
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
55
import { DefaultPivotGridRecordSortingStrategy } from '../../data-operations/pivot-sort-strategy';
@@ -146,15 +146,15 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
146146
const data = collection ? cloneArray(collection, true) : [];
147147
const horizontalRowDimensions = [];
148148
for (const row of enabledRows) {
149-
if (this.grid.horizontalRowDimensions) {
149+
if (this.grid.hasHorizontalLayout) {
150150
PivotUtil.flattenGroupsHorizontally(data, row, expansionStates, defaultExpand, horizontalRowDimensions);
151151
} else {
152152
PivotUtil.flattenGroups(data, row, expansionStates, defaultExpand);
153153
}
154154
}
155155

156156
let finalData = data;
157-
if (this.grid.horizontalRowDimensions) {
157+
if (this.grid.hasHorizontalLayout) {
158158
this.grid.visibleRowDimensions = horizontalRowDimensions;
159159
} else {
160160
this.grid.visibleRowDimensions = enabledRows;
@@ -191,11 +191,11 @@ export class IgxPivotCellMergingPipe implements PipeTransform {
191191

192192
let groupData: IPivotGridGroupRecord[] = [];
193193
let prevId;
194-
const enabledRows = this.grid.horizontalRowDimensions ? (this.grid as any).visibleRowDimensions : config.rows?.filter(x => x.enabled);
194+
const enabledRows = this.grid.hasHorizontalLayout ? (this.grid as any).visibleRowDimensions : config.rows?.filter(x => x.enabled);
195195
const index = enabledRows.indexOf(dim);
196196
for (const rec of data) {
197197
let currentDim;
198-
if (this.grid.horizontalRowDimensions) {
198+
if (this.grid.hasHorizontalLayout) {
199199
currentDim = dim;
200200
rec.dimensions = enabledRows;
201201
} else {
@@ -272,7 +272,6 @@ export class IgxPivotGridHorizontalRowCellMerging implements PipeTransform {
272272
public transform(
273273
collection: IPivotGridRecord[],
274274
config: IPivotConfiguration,
275-
mrlIndexes: number[][],
276275
_pipeTrigger?: number
277276
): IPivotGridHorizontalGroup[] {
278277
if (collection.length === 0 || config.rows.length === 0) return [{
@@ -325,7 +324,6 @@ export class IgxPivotGridHorizontalRowCellMerging implements PipeTransform {
325324
verticalMergeGroups[curGroup.rowStart - 1].push(curGroup);
326325
}
327326

328-
329327
// Merge rows in a single array
330328
const sortedGroups = verticalMergeGroups.reduce((prev, cur) => prev.concat(...cur), []);
331329

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
172172
}
173173

174174
protected getHeaderWidthFromDimension() {
175-
if (this.grid.horizontalRowDimensions) {
175+
if (this.grid.hasHorizontalLayout) {
176176
return this.width;
177177
}
178178
return this.grid.rowDimensionWidthToPixels(this.rootDimension);

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
110110
* @internal
111111
*/
112112
public get visibleIndex(): number {
113-
if (this.grid.horizontalRowDimensions) {
113+
if (this.grid.hasHorizontalLayout) {
114114
return this.colIndex;
115115
}
116116

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-template ngFor let-cell let-cellIndex="index" [ngForOf]="rowGroup
2-
| pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:mrlIndexes:grid.pipeTrigger">
2+
| pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger">
33
<igx-pivot-row-dimension-content role="row" class="igx-grid-thead"
44
[grid]="grid"
55
[dimension]="cell.rootDimension"

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,6 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone
6464
@Input()
6565
public groupedData: IPivotGridRecord[][];
6666

67-
protected mrlIndexes: number[][];
68-
6967
/**
7068
* @hidden @internal
7169
*/
@@ -94,8 +92,7 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone
9492
} else if (this.grid.visibleRowDimensions && this.grid.dimensionDataColumns) {
9593
const res = [];
9694
this.grid.visibleRowDimensions.forEach(dim => {
97-
const targetCol = this.grid.dimensionDataColumns.find(col => col.field === dim.memberName);
98-
res.push(targetCol.calcWidth);
95+
res.push(this.grid.rowDimensionWidthToPixels(dim) + "px");
9996
});
10097
return res.join(' ');
10198
}

0 commit comments

Comments
 (0)