Skip to content

Commit e4da1fe

Browse files
mddragnevmddragnev
committed
Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/pivot-selection
2 parents 162a132 + ca10fbe commit e4da1fe

File tree

8 files changed

+74
-52
lines changed

8 files changed

+74
-52
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,6 +628,7 @@ export interface PivotGridType extends GridType {
628628
setupColumns(): void;
629629
toggleRow(rowID: any): void;
630630
resolveDataTypes(field: any): GridColumnDataType;
631+
resolveRowDimensionWidth(dim: IPivotDimension): number;
631632
dimensionsChange: EventEmitter<IDimensionsChange>;
632633
valuesChange: EventEmitter<IValuesChange>;
633634
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
</ng-template>
4848
</ng-template>
4949
<ng-template #record_template let-rowIndex="index" let-rowData>
50-
<igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
50+
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData"
51+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
5152
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
5253
</igx-pivot-row>
5354
</ng-template>

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -689,8 +689,19 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
689689
}
690690

691691
public get pivotRowWidths() {
692-
const rowDimCount = this.rowDimensions.length;
693-
return MINIMUM_COLUMN_WIDTH * rowDimCount || MINIMUM_COLUMN_WIDTH;
692+
return this.rowDimensions.reduce((accumulator, dim) => accumulator + this.resolveRowDimensionWidth(dim), 0);
693+
}
694+
695+
public resolveRowDimensionWidth(dim: IPivotDimension): number {
696+
if(!dim.width) {
697+
return MINIMUM_COLUMN_WIDTH;
698+
}
699+
const isPercent = dim.width && dim.width.indexOf('%') !== -1;
700+
if (isPercent) {
701+
return parseFloat(dim.width) / 100 * this.calcWidth;
702+
} else {
703+
return parseInt(dim.width, 10);
704+
}
694705
}
695706

696707
public get rowDimensions() {
@@ -1091,13 +1102,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10911102
ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
10921103
ref.instance.field = key;
10931104
ref.instance.parent = parent;
1105+
ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
10941106
ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
10951107
ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
10961108
ref.instance.sortable = true;
10971109
ref.changeDetectorRef.detectChanges();
10981110
columns.push(ref.instance);
10991111
if (this.hasMultipleValues) {
1100-
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false);
1112+
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false, value.dimension.width);
11011113
ref.instance.children.reset(measureChildren);
11021114
columns = columns.concat(measureChildren);
11031115
}
@@ -1116,6 +1128,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11161128
refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
11171129
refSibling.instance.field = key;
11181130
refSibling.instance.parent = parent;
1131+
ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
11191132
ref.instance.sortable = true;
11201133
refSibling.instance.hidden = true;
11211134
refSibling.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
@@ -1127,7 +1140,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11271140
ref.changeDetectorRef.detectChanges();
11281141
columns.push(ref.instance);
11291142
if (this.hasMultipleValues) {
1130-
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true);
1143+
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true, value.dimension.width);
11311144
const nestedChildren = filteredChildren.concat(measureChildren);
11321145
const allChildren = children.concat(measureChildren);
11331146
ref.instance.children.reset(nestedChildren);
@@ -1142,13 +1155,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11421155
return columns;
11431156
}
11441157

1145-
protected getMeasureChildren(colFactory, data, parent, hidden) {
1158+
protected getMeasureChildren(colFactory, data, parent, hidden, parentWidth) {
11461159
const cols = [];
1160+
const count = this.values.length;
1161+
const width = parentWidth ? parseInt(parentWidth, 10) / count : MINIMUM_COLUMN_WIDTH;
1162+
const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
11471163
this.values.forEach(val => {
11481164
const ref = colFactory.create(this.viewRef.injector);
11491165
ref.instance.header = val.displayName || val.member;
11501166
ref.instance.field = parent.field + '-' + val.member;
11511167
ref.instance.parent = parent;
1168+
ref.instance.width = isPercent ? width + '%' : width + 'px';
11521169
ref.instance.hidden = hidden;
11531170
ref.instance.sortable = true;
11541171
ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ export interface IPivotDimension {
6666
filter?: FilteringExpressionsTree | null;
6767
sortDirection?: SortingDirection;
6868
dataType?: GridColumnDataType;
69+
// The width of the dimension cells to be rendered.Can be pixel or %.
70+
width? : string;
6971
}
7072

7173
export interface IPivotValue {

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
2828
}));
2929

3030
it('should apply formatter and dataType from measures', () => {
31-
fixture.detectChanges();
3231
const pivotGrid = fixture.componentInstance.pivotGrid;
32+
pivotGrid.width = '1500px';
33+
fixture.detectChanges();
34+
3335
const actualFormatterValue = pivotGrid.rowList.first.cells.first.title;
3436
expect(actualFormatterValue).toEqual('774$');
3537
const actualDataTypeValue = pivotGrid.rowList.first.cells.last.title;
@@ -330,8 +332,9 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
330332
});
331333

332334
it('should allow changing default aggregation via value chip drop-down.', () => {
333-
fixture.detectChanges();
334335
const pivotGrid = fixture.componentInstance.pivotGrid;
336+
pivotGrid.width = '1500px';
337+
fixture.detectChanges();
335338
const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
336339
const valueChip = headerRow.querySelector('igx-chip[id="UnitsSold"]');
337340
let content = valueChip.querySelector('.igx-chip__content');

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

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
<!-- Row Dimension -->
2-
<div #rowDimensionContainer>
3-
<igx-pivot-row-dimension-content class="igx-grid-thead" tabindex="0"
4-
[grid]="grid"
5-
[hasMRL]="grid.hasColumnLayouts"
6-
[density]="grid.displayDensity"
7-
[activeDescendant]="grid.activeDescendant"
8-
[width]="grid.pivotRowWidths"
9-
[unpinnedColumnCollection]="rowDimension"
10-
(scroll)="grid.preventHeaderScroll($event)"
11-
>
12-
</igx-pivot-row-dimension-content>
13-
</div>
1+
<!-- Row Dimension -->
2+
<div #rowDimensionContainer>
3+
<igx-pivot-row-dimension-content class="igx-grid-thead" tabindex="0" [grid]="grid" [hasMRL]="grid.hasColumnLayouts"
4+
[density]="grid.displayDensity" [activeDescendant]="grid.activeDescendant" [width]="grid.pivotRowWidths"
5+
[unpinnedColumnCollection]="rowDimension" (scroll)="grid.preventHeaderScroll($event)">
6+
</igx-pivot-row-dimension-content>
7+
</div>
148

159
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
1610
<ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
@@ -29,9 +23,8 @@
2923
[ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
3024
[editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)" [column]="col"
3125
[formatter]="col.formatter" [intRow]="this" [active]="isCellActive(col.visibleIndex)"
32-
[style.min-height.px]="cellHeight" [rowData]="data" [style.min-width]="col.width"
33-
[style.max-width]="col.width" [style.flex-basis]="col.width" [width]="col.getCellWidth()"
34-
[visibleColumnIndex]="col.visibleIndex"
26+
[style.min-height.px]="cellHeight" [rowData]="data" [style.min-width]="col.width" [style.max-width]="col.width"
27+
[style.flex-basis]="col.width" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex"
3528
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
3629
[cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
3730
[cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
@@ -70,21 +63,18 @@
7063
</ng-template>
7164

7265
<ng-template #headerTemplate let-column>
73-
<div class="igx-grid__tr--header" (click)="this.selectPivotRow(column, $event)">
74-
<igx-icon [attr.draggable]="false" (click)="grid.toggleRow(getRowDimensionKey(column))">
75-
{{ getExpandState(column) ? 'expand_more' : 'expand_less'}}</igx-icon>
76-
{{column.header}}
77-
</div>
78-
</ng-template>
79-
80-
<ng-template #headerTemplateGray let-column>
81-
<div class="igx-grid__tr--header" (click)="this.selectPivotRow(column, $event)">
66+
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}' (click)="this.selectPivotRow(column, $event)">
67+
<igx-icon [attr.draggable]=" false" (click)="grid.toggleRow(getRowDimensionKey(column))">
68+
{{ getExpandState(column) ? 'expand_more' : 'chevron_right'}}</igx-icon>
8269
{{column.header}}
8370
</div>
8471
</ng-template>
8572

8673
<ng-template #headerDefaultTemplate let-column>
87-
<div class="igx-grid__tr--header" (click)="this.selectPivotRow(column, $event)">
74+
75+
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}' (click)="this.selectPivotRow(column, $event)">
76+
<igx-icon style='flex-shrink: 0;' [attr.draggable]=" false">
77+
</igx-icon>
8878
{{column.header}}
8979
</div>
9080
</ng-template>

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

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,20 @@ const MINIMUM_COLUMN_WIDTH = 200;
3131
})
3232
export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
3333

34+
@Input()
35+
public pivotRowWidths: number;
36+
3437
/**
3538
* @hidden @internal
3639
*/
3740
@ViewChild('headerTemplate', { read: TemplateRef, static: true })
3841
public headerTemplate: TemplateRef<any>;
3942

40-
/**
41-
* @hidden @internal
42-
*/
43-
@ViewChild('headerTemplateGray', { read: TemplateRef, static: true })
44-
public headerTemplateGray: TemplateRef<any>;
45-
4643
/**
4744
* @hidden @internal
4845
*/
4946
@ViewChild('headerDefaultTemplate', { read: TemplateRef, static: true })
50-
public headerDefaultTemplate: TemplateRef<any>;
47+
public headerTemplateDefault: TemplateRef<any>;
5148

5249
public rowDimensionData: IPivotDimensionData[] = [];
5350

@@ -103,19 +100,31 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
103100
return this.grid.gridAPI.get_row_expansion_state(this.getRowDimensionKey(col));
104101
}
105102

103+
public getLevel(col: IgxColumnComponent) {
104+
return this.data[col.field + '_level'];
105+
}
106+
106107

107108
/**
108109
* @hidden
109110
* @internal
110111
*/
111112
public ngOnChanges(changes: SimpleChanges) {
112-
if (changes.data) {
113+
const rowDimConfig = this.grid.rowDimensions;
114+
if (changes.data || rowDimConfig.length !== this.rowDimensionData.length) {
113115
// generate new rowDimension on row data change
114116
this.rowDimensionData = [];
115-
const rowDimConfig = this.grid.rowDimensions;
116117
this.viewRef.clear();
117118
this.extractFromDimensions(rowDimConfig, 0);
118119
}
120+
if (changes.pivotRowWidths && this.rowDimensionData) {
121+
for (const dim of rowDimConfig) {
122+
const dimData = PivotUtil.getDimensionLevel(dim, this.data,
123+
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
124+
const data = this.rowDimensionData.find(x => x.dimension.memberName === dimData.dimension.memberName);
125+
data.column.width = this.grid.resolveRowDimensionWidth(dim) + 'px';
126+
}
127+
}
119128
}
120129

121130
public getCellClass(col: any) {
@@ -154,7 +163,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
154163
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
155164
dimIndex += dimData.level;
156165
currentLvl += dimData.level;
157-
const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl);
166+
const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl, dim);
158167
this.rowDimensionData.push({
159168
column,
160169
dimension: dimData.dimension,
@@ -164,25 +173,24 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
164173
}
165174
}
166175

167-
protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0) {
176+
protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0, rootDim: IPivotDimension) {
168177
const field = dim.memberName;
169178
const header = this.data[field];
170-
const col = this._createColComponent(field, header, index, dim, lvl);
179+
const col = this._createColComponent(field, header, index, dim, lvl, rootDim);
171180
return col;
172181
}
173182

174-
protected _createColComponent(field: string, header: string, index: number = 0, dim: IPivotDimension, lvl = 0) {
183+
protected _createColComponent(field: string, header: string, index: number = 0,
184+
dim: IPivotDimension, lvl = 0, rootDim: IPivotDimension) {
175185
const ref = this.viewRef.createComponent(IgxColumnComponent);
176186
ref.instance.field = field;
177187
ref.instance.header = header;
178-
ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
188+
ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
179189
(ref as any).instance._vIndex = this.grid.columns.length + index + this.index * this.grid.pivotConfiguration.rows.length;
180190
if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.data)) {
181191
ref.instance.headerTemplate = this.headerTemplate;
182-
} else if (lvl < PivotUtil.getTotalLvl(this.data)) {
183-
ref.instance.headerTemplate = this.headerTemplateGray;
184192
} else {
185-
ref.instance.headerTemplate = this.headerDefaultTemplate;
193+
ref.instance.headerTemplate = this.headerTemplateDefault;
186194
}
187195
return ref.instance;
188196
}

‎src/app/pivot-grid/pivot-grid.sample.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class PivotGridSampleComponent {
7979
enabled: true,
8080
childLevel: {
8181
enabled: true,
82-
memberName: 'Seller'
82+
memberName: 'SellerName'
8383
}
8484
},
8585
];

0 commit comments

Comments
 (0)