Skip to content

feat(grid-summary): summary disabling with disabledSummaries property #15006

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.

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

Merged
merged 7 commits into from
Nov 12, 2024
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

All notable changes for each version of this project will be documented in this file.

## 19.0.0
### New Features
- `IgxColumn`
- Introduced the `disabledSummaries` property, allowing users to specify which summaries should be disabled for a given column. This property accepts an array of strings corresponding to the summary keys, enabling selective control over both default summaries (e.g., 'Count', 'Min') and any custom summaries created by the user.

## 18.2.0
### General
- `IFilteringExpressionsTree`, `FilteringExpressionsTree`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1077,6 +1077,33 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
this.grid.summaryService.resetSummaryHeight();
}
}

/**
* Sets/gets the summary operands to exclude from display.
* Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.
* ```typescript
* let disabledSummaries = this.column.disabledSummaries;
* ```
* ```html
* <igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column>
* ```
*
* @memberof IgxColumnComponent
*/
@Input()
public get disabledSummaries(): string[] {
return this._disabledSummaries;
}

public set disabledSummaries(value: string[]) {
this._disabledSummaries = value;
if (this.grid) {
this.grid.summaryService.removeSummariesCachePerColumn(this.field);
this.grid.summaryPipeTrigger++;
this.grid.summaryService.resetSummaryHeight();
}
}

/**
* Gets the column `filters`.
* ```typescript
Expand Down Expand Up @@ -1743,6 +1770,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
* @hidden
*/
protected _summaries = null;
/**
* @hidden
*/
private _disabledSummaries: string[] = [];
/**
* @hidden
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,7 @@ export interface ColumnType extends FieldType {
filteringExpressionsTree: FilteringExpressionsTree;
hasSummary: boolean;
summaries: any;
disabledSummaries?: string[];
/**
* The template reference for a summary of the column
* It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
Expand Down
98 changes: 98 additions & 0 deletions projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,77 @@ describe('IgxGrid - Summaries #grid', () => {
fixture.detectChanges();
}).not.toThrow();
});

it('should not display initially disabled summaries in the summary output', fakeAsync(() => {
grid.enableSummaries([{ fieldName: 'UnitsInStock' }]);
fixture.detectChanges();
tick();

const column = grid.getColumnByName('UnitsInStock');

column.disabledSummaries = ['count', 'min', 'max'];
fixture.detectChanges();
tick();

GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Sum', 'Avg'],
['39,004', '3,900.4']
);
}));

it('should apply disabled summaries dynamically at runtime', fakeAsync(() => {
grid.enableSummaries([{ fieldName: 'UnitsInStock' }]);
fixture.detectChanges();
tick();

const column = grid.getColumnByName('UnitsInStock');

column.disabledSummaries = [];
fixture.detectChanges();
tick();
GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Count', 'Min', 'Max', 'Sum', 'Avg'],
['10', '0', '20,000', '39,004', '3,900.4']
);

column.disabledSummaries = ['count'];
fixture.detectChanges();
tick();
GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Min', 'Max', 'Sum', 'Avg'],
['0', '20,000', '39,004', '3,900.4']
);

column.disabledSummaries = ['count', 'sum'];
fixture.detectChanges();
tick();
GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Min', 'Max', 'Avg'],
['0', '20,000', '3,900.4']
);

column.disabledSummaries = ['count', 'sum', 'average'];
fixture.detectChanges();
tick();
GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Min', 'Max'],
['0', '20,000']
);

column.disabledSummaries = ['min', 'max'];
fixture.detectChanges();
tick();
GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Count', 'Sum', 'Avg'],
['10', '39,004', '3,900.4']
);
}));
});

describe('custom summaries: ', () => {
Expand Down Expand Up @@ -238,6 +309,33 @@ describe('IgxGrid - Summaries #grid', () => {
expect(lastColumnSummaryCellRect.right).toBe(lastColumnNormalCellRect.right,
'summary cell and data cell are not right aligned');
});

it('should apply disabledSummaries with custom summary', fakeAsync(() => {
grid.enableSummaries([{ fieldName: 'UnitsInStock' }]);
fixture.detectChanges();
tick();

const column = grid.getColumnByName('UnitsInStock');
column.summaries = fixture.componentInstance.inStockSummary;
fixture.detectChanges();
tick();

GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
['10', '0', '20,000', '39,004', '3,900.4', '6']
);

column.disabledSummaries = ['test'];
fixture.detectChanges();
tick();

GridSummaryFunctions.verifyColumnSummaries(
GridSummaryFunctions.getRootSummaryRow(fixture), 3,
['Count', 'Min', 'Max', 'Sum', 'Avg'],
['10', '0', '20,000', '39,004', '3,900.4']
);
}));
});

describe('specific data: ', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export class IgxGridSummaryService {
public grid: GridType;
public rootSummaryID = 'igxGridRootSummary';
public summaryHeight = 0;
public maxSummariesLenght = 0;
public maxSummariesLength = 0;
public groupingExpressions = [];
public retriggerRootPipe = 0;
public deleteOperation = false;
Expand Down Expand Up @@ -98,14 +98,16 @@ export class IgxGridSummaryService {
}
let maxSummaryLength = 0;
this.grid.columns.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
const getCurrentSummaryColumn = column.summaries.operate([], [], column.field).length;
if (getCurrentSummaryColumn) {
if (maxSummaryLength < getCurrentSummaryColumn) {
maxSummaryLength = getCurrentSummaryColumn;
}
const getCurrentSummary = column.summaries.operate([], [], column.field);
const getCurrentSummaryColumn = column.disabledSummaries.length > 0
? getCurrentSummary.filter(s => !column.disabledSummaries.includes(s.key)).length
: getCurrentSummary.length;

if (maxSummaryLength < getCurrentSummaryColumn) {
maxSummaryLength = getCurrentSummaryColumn;
}
});
this.maxSummariesLenght = maxSummaryLength;
this.maxSummariesLength = maxSummaryLength;
this.summaryHeight = maxSummaryLength * this.grid.defaultSummaryHeight;
return this.summaryHeight;
}
Expand All @@ -116,16 +118,30 @@ export class IgxGridSummaryService {
rowSummaries = new Map<string, IgxSummaryResult[]>();
this.summaryCacheMap.set(rowID, rowSummaries);
}

if (!this.hasSummarizedColumns || !data) {
return rowSummaries;
}

this.grid.columns.filter(col => col.hasSummary).forEach((column) => {
if (!rowSummaries.get(column.field)) {
const summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, column.field)),
data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
let summaryResult = column.summaries.operate(
data.map(r => resolveNestedPath(r, column.field)),
data,
column.field,
groupRecord,
this.grid.locale,
column.pipeArgs
);

summaryResult = column.disabledSummaries.length > 0
? summaryResult.filter(s => !column.disabledSummaries.includes(s.key))
: summaryResult;

rowSummaries.set(column.field, summaryResult);
}
});

return rowSummaries;
}

Expand Down
Loading