Skip to content

refactor(IgxGridSummaries): Refactor how summaries height is calculated. #15604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: mkirova/tbody-size-refactor
Choose a base branch
from
Draft

refactor(IgxGridSummaries): Refactor how summaries height is calculated. #15604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ...cts/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,8 @@
min-height: sizable(rem(24px), rem(30px), rem(36px));
}

flex-basis: sizable(rem(24px), rem(30px), rem(36px));

position: relative;
}

Expand Down
1 change: 0 additions & 1 deletion projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -947,7 +947,6 @@ export interface GridType extends IGridDataBindable {
readonly transactions: TransactionService<Transaction, State>;
/** Represents the validation service for the grid. The type contains properties and methods (logic) for validating records */
readonly validation: IgxGridValidationService;
defaultSummaryHeight: number;
summaryRowHeight: number;
rowEditingOverlay: IgxToggleDirective;
totalRowsCountAfterFilter: number;
Expand Down
18 changes: 2 additions & 16 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,9 @@ export abstract class IgxGridBaseDirective implements GridType,

public get summaryRowHeight(): number {
if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
return this._summaryRowHeight || this.summaryService.calcMaxSummaryHeight();
return this._summaryRowHeight || undefined;
}
return 0;
return undefined;
}

/** @hidden @internal */
Expand Down Expand Up @@ -4305,20 +4305,6 @@ export abstract class IgxGridBaseDirective implements GridType,
return this._defaultRowHeight;
}

/**
* @hidden @internal
*/
public get defaultSummaryHeight(): number {
switch (this.gridSize) {
case Size.Medium:
return 30;
case Size.Small:
return 24;
default:
return 36;
}
}

/**
* Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
*
Expand Down
39 changes: 20 additions & 19 deletions projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('IgxGrid - Summaries #grid', () => {
const SUMMARY_CELL = 'igx-grid-summary-cell';
const EMPTY_SUMMARY_CLASS = 'igx-grid-summary--empty';
const DEBOUNCETIME = 30;
const DEFAULT_SUMMARY_HEIGHT = 36;

configureTestSuite((() => {
return TestBed.configureTestingModule({
Expand Down Expand Up @@ -63,7 +64,7 @@ describe('IgxGrid - Summaries #grid', () => {
it('should enableSummaries through grid API ', () => {
expect(grid.hasSummarizedColumns).toBe(false);
let tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
expect(tFoot < grid.defaultSummaryHeight).toBe(true);
expect(tFoot < DEFAULT_SUMMARY_HEIGHT).toBe(true);

grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ProductID' }]);
fixture.detectChanges();
Expand All @@ -83,7 +84,7 @@ describe('IgxGrid - Summaries #grid', () => {
fixture.detectChanges();

tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
expect(tFoot).toEqual(grid.defaultSummaryHeight);
expect(tFoot).toEqual(DEFAULT_SUMMARY_HEIGHT);
});

it(`should recalculate grid sizes correctly when the column is outside of the viewport`, () => {
Expand All @@ -95,7 +96,7 @@ describe('IgxGrid - Summaries #grid', () => {
fixture.detectChanges();

const tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT);
expect(GridSummaryFunctions.getRootSummaryRow(fixture)).toBeDefined();
});

Expand Down Expand Up @@ -241,28 +242,28 @@ describe('IgxGrid - Summaries #grid', () => {
fixture.detectChanges();

const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
expect(tFootHeight).toBeGreaterThanOrEqual(3 * grid.defaultSummaryHeight);
expect(tFootHeight).toBeGreaterThanOrEqual(3 * DEFAULT_SUMMARY_HEIGHT);
});

it('should change custom summaries at runtime', () => {
const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, DEFAULT_SUMMARY_HEIGHT);
grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.dealsSummaryMinMax;
grid.summaryRowHeight = 0;
fixture.detectChanges();
const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
expect(tFootHeight).toBe(2 * grid.defaultSummaryHeight);
expect(tFootHeight).toBe(2 * DEFAULT_SUMMARY_HEIGHT);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Min', 'Max'], ['0', '20,000']);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 2, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 2, DEFAULT_SUMMARY_HEIGHT);
});

it('should be able to access alldata from each summary', () => {
const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, DEFAULT_SUMMARY_HEIGHT);
grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.inStockSummary;
fixture.detectChanges();

Expand Down Expand Up @@ -395,8 +396,8 @@ describe('IgxGrid - Summaries #grid', () => {
const summaryRow = GridSummaryFunctions.getRootSummaryRow(fix);
const tFootHeight = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Min', 'Max'], ['0', '20,000']);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight);
expect(tFootHeight).toBe(3 * grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT);
expect(tFootHeight).toBe(3 * DEFAULT_SUMMARY_HEIGHT);
});

it('should have summary per each column that \'hasSummary\'= true', () => {
Expand Down Expand Up @@ -523,7 +524,7 @@ describe('IgxGrid - Summaries #grid', () => {
grid.summaryRowHeight = null;
fix.detectChanges();

const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, grid.defaultSummaryHeight);
const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, DEFAULT_SUMMARY_HEIGHT);

expect(tfootSize).toBe(expectedHeight);
});
Expand All @@ -544,7 +545,7 @@ describe('IgxGrid - Summaries #grid', () => {
const summaries = fix.debugElement.queryAll(By.css(SUMMARY_CELL)).filter((el) =>
el.nativeElement.classList.contains(EMPTY_SUMMARY_CLASS) === false);
const tfootSize = GridSummaryFunctions.getRootSummaryRow(fix).nativeElement.getBoundingClientRect().height;
const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, grid.defaultSummaryHeight);
const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, DEFAULT_SUMMARY_HEIGHT);
expect(tfootSize).toBe(expectedHeight);

grid.getColumnByName('ProductName').hasSummary = false;
Expand Down Expand Up @@ -796,14 +797,14 @@ describe('IgxGrid - Summaries #grid', () => {
it('Hiding: should recalculate summary area after column with enabled summary is hidden', fakeAsync(() => {
grid.summaryRowHeight = undefined;
let tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT);

grid.getColumnByName('UnitsInStock').hidden = true;
tick();
fix.detectChanges();

tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
expect(tFoot).toEqual(3 * grid.defaultSummaryHeight);
expect(tFoot).toEqual(3 * DEFAULT_SUMMARY_HEIGHT);
expect(grid.hasSummarizedColumns).toBe(true);

let summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
Expand All @@ -820,7 +821,7 @@ describe('IgxGrid - Summaries #grid', () => {

expect(grid.hasSummarizedColumns).toBe(true);
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT);
summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['10']);
Expand Down Expand Up @@ -1904,7 +1905,7 @@ describe('IgxGrid - Summaries #grid', () => {
grid.getColumnByName('ParentID').hasSummary = false;
fix.detectChanges();

GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT);

let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
summaries.forEach(summary => {
Expand All @@ -1927,7 +1928,7 @@ describe('IgxGrid - Summaries #grid', () => {
fix.detectChanges();

expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, DEFAULT_SUMMARY_HEIGHT);
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
summaries.forEach(summary => {
GridSummaryFunctions.verifyColumnSummaries(summary, 0, [], []);
Expand Down Expand Up @@ -2110,7 +2111,7 @@ describe('IgxGrid - Summaries #grid', () => {
grid.summaryRowHeight = 0;
fix.detectChanges();

GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT);

let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);

Expand All @@ -2134,7 +2135,7 @@ describe('IgxGrid - Summaries #grid', () => {
fix.detectChanges();

expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, grid.defaultSummaryHeight);
GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, DEFAULT_SUMMARY_HEIGHT);
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
summaries.forEach(summary => {
GridSummaryFunctions.verifyColumnSummaries(summary, 0, [], []);
Expand Down
13 changes: 7 additions & 6 deletions projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe('IgxGrid Component Tests #grid', () => {

const TBODY_CLASS = '.igx-grid__tbody-content';
const THEAD_CLASS = '.igx-grid-thead';
const DEFAULT_SUMMARY_HEIGHT = 36;

configureTestSuite();

Expand Down Expand Up @@ -290,8 +291,8 @@ describe('IgxGrid Component Tests #grid', () => {
expect(grid.defaultRowHeight).toBe(50);
expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight);
expect(rowHeight.offsetHeight).toBe(51);
expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1);
expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight);
expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1);
expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT);
setElementSize(grid.nativeElement, Size.Medium)
grid.summaryRowHeight = null;
fixture.detectChanges();
Expand All @@ -302,8 +303,8 @@ describe('IgxGrid Component Tests #grid', () => {
expect(grid.defaultRowHeight).toBe(40);
expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight);
expect(rowHeight.offsetHeight).toBe(41);
expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1);
expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight);
expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1);
expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT);
setElementSize(grid.nativeElement, Size.Small)
grid.summaryRowHeight = undefined;
fixture.detectChanges();
Expand All @@ -314,8 +315,8 @@ describe('IgxGrid Component Tests #grid', () => {
expect(grid.defaultRowHeight).toBe(32);
expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight);
expect(rowHeight.offsetHeight).toBe(33);
expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1);
expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight);
expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1);
expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT);
});

it ('checks if attributes are correctly assigned when grid has or does not have data', fakeAsync( () => {
Expand Down
10 changes: 3 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export class IgxGridSummaryPipe implements PipeTransform {
private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition, showSummary): any[] {
const recordsWithSummary = [];
const lastChildMap = new Map<any, IGroupByRecord[]>();
const maxSummaryHeight = this.grid.summaryService.calcMaxSummaryHeight();

if (collection.metadata.length && !this.grid.isGroupByRecord(collection.data[0]) &&
this.grid.isGroupByRecord(collection.metadata[0]) && summaryPosition === GridSummaryPosition.bottom) {
Expand Down Expand Up @@ -67,8 +66,7 @@ export class IgxGridSummaryPipe implements PipeTransform {
const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(recordId, records);
const summaryRecord: ISummaryRecord = {
summaries,
max: maxSummaryHeight
summaries
};
recordsWithSummary.push(summaryRecord);
}
Expand All @@ -80,8 +78,7 @@ export class IgxGridSummaryPipe implements PipeTransform {
const records = this.removeDeletedRecord(this.grid, groupRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(groupRecordId, records, groupRecord);
const summaryRecord: ISummaryRecord = {
summaries,
max: maxSummaryHeight
summaries
};
recordsWithSummary.push(summaryRecord);
}
Expand All @@ -96,8 +93,7 @@ export class IgxGridSummaryPipe implements PipeTransform {
const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice());
const summaries = this.grid.summaryService.calculateSummaries(recordId, records, groupByRecord);
const summaryRecord: ISummaryRecord = {
summaries,
max: maxSummaryHeight
summaries
};
recordsWithSummary.push(summaryRecord);
} else if (summaryPosition === GridSummaryPosition.bottom) {
Expand Down
13 changes: 7 additions & 6 deletions ...ts/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {

const FILTERING_ROW_CLASS = 'igx-grid-filtering-row';
const FILTERING_CELL_CLASS = 'igx-grid-filtering-cell';
const DEFAULT_SUMMARY_HEIGHT = 36;

configureTestSuite();

Expand Down Expand Up @@ -497,8 +498,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
let tFoot = hierarchicalGrid.nativeElement.querySelector('.igx-grid__tfoot');
let childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot');

expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);
expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);


setElementSize(hierarchicalGrid.nativeElement, Size.Medium)
Expand All @@ -510,8 +511,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
tFoot = hierarchicalGrid.nativeElement.querySelectorAll('.igx-grid__tfoot')[1];
childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot');

expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);
expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);

setElementSize(hierarchicalGrid.nativeElement, Size.Small)
hierarchicalGrid.summaryRowHeight = 0;
Expand All @@ -522,8 +523,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
tFoot = hierarchicalGrid.nativeElement.querySelectorAll('.igx-grid__tfoot')[1];
childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot');

expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight);
expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);
expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT);
})

it('should render summaries for column inside a column group.', fakeAsync(() => {
Expand Down
Loading