Merge pull request #8827 from IgniteUI/mtsvyatkova/fix-8786-master

Apply formatter in summaries

Author: kdinev

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes for each version of this project will be documented in this
 
 ## 12.0.0
 
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
+
 ### New Features
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
@@ -16,11 +20,28 @@ All notable changes for each version of this project will be documented in this
                 </ng-template>
             </igx-grid>
         ```
+    -   A new `summaryFormatter` input property is exposed by the `IgxColumnComponent`, which is used to format the displayed summary values for the columns.
+        ```typescript
+            public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
+                const result = summary.summaryResult;
+                if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
+                    && result !== null && result !== undefined) {
+                    const pipe = new DatePipe('en-US');
+                    return pipe.transform(result,'MMM YYYY');
+                }
+                return result;
+            }
+        ```
+        ```html
+            <igx-column field="OrderDate" header="Order Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'" [hasSummary]="true"
+                [summaryFormatter]="dateSummaryFormat">
+            </igx-column>
+        ```
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
     - The `igx-typography` mixin is no longer implicitly included with `igx-core`. To use our typography styles users have to include the mixin explicitly:
-    
+
     ```html
     @include igx-core();
     /// Example with Indigo Design theme:
@@ -48,10 +69,10 @@ All notable changes for each version of this project will be documented in this
     - Added support for exporting grouped data.
 - `IgxTreeGrid`
     - Added `multipleCascade` row selection mode. In this mode, selecting a record results in the selection of all its children recursively. When only some children are selected, their parent's checkbox is in an indeterminate state.
- 
+
 
         ```html
-        <igx-tree-grid [rowSelection]="'multipleCascade'">           
+        <igx-tree-grid [rowSelection]="'multipleCascade'">
         </igx-tree-grid>
         ```
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -65,7 +86,7 @@ All notable changes for each version of this project will be documented in this
     - `Column Resizing` now does not exit edit mode.
 - `IgxInput` now supports `type="file"` and its styling upon all themes.
    _Note: validation of file type input is not yet supported._
-- `igxSplitter` now has the following additional outputs: 
+- `igxSplitter` now has the following additional outputs:
     - `resizeStart` - Emits when pane resizing starts.
     - `resizing`- Emits while panes are being resized.
     - `resizeEnd` - Emits when pane resizing ends.

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -36,7 +36,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
 import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import { getNodeSizeViaRange } from '../../core/utils';
 import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand,
-    IgxCurrencySummaryOperand, IgxPercentSummaryOperand } from '../summaries/grid-summary';
+    IgxCurrencySummaryOperand, IgxPercentSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
 import {
     IgxCellTemplateDirective,
     IgxCellHeaderTemplateDirective,
@@ -575,6 +575,37 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @WatchColumnChanges()
     @Input()
     public formatter: (value: any) => any;
+
+    /**
+     * The summaryFormatter is used to format the display of the column summaries.
+     *
+     * In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter
+     * to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.
+     *
+     * ```typescript
+     * onColumnInit(column: IgxColumnComponent) {
+     *   if (column.field == "OrderDate") {
+     *     column.summaryFormatter = this.summaryFormat;
+     *   }
+     * }
+     *
+     * summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
+     *   const result = summary.summaryResult;
+     *   if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
+     *      const pipe = new DatePipe('fr-FR');
+     *      return pipe.transform(result,'mediumDate');
+     *   }
+     *   return result;
+     * }
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public summaryFormatter: (summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any;
+
     /**
      * Sets/gets whether the column filtering should be case sensitive.
      * Default value is `true`.

projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

@@ -17,6 +17,7 @@ import {
     IgxStringReplacePipe,
     IgxGridTransactionStatePipe,
     IgxColumnFormatterPipe,
+    IgxSummaryFormatterPipe,
     IgxGridAddRowPipe
 } from './pipes';
 
@@ -38,7 +39,8 @@ import {
         IgxStringReplacePipe,
         IgxGridTransactionStatePipe,
         IgxGridAddRowPipe,
-        IgxColumnFormatterPipe
+        IgxColumnFormatterPipe,
+        IgxSummaryFormatterPipe
     ],
     exports: [
         IgxGridFilterConditionPipe,
@@ -57,7 +59,8 @@ import {
         IgxStringReplacePipe,
         IgxGridTransactionStatePipe,
         IgxGridAddRowPipe,
-        IgxColumnFormatterPipe
+        IgxColumnFormatterPipe,
+        IgxSummaryFormatterPipe
     ],
     imports: [
         CommonModule

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -7,6 +7,7 @@ import { GridType } from './grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
+import { IgxSummaryOperand, IgxSummaryResult } from '../grid/public_api';
 
 /**
  * @hidden
@@ -308,6 +309,15 @@ export class IgxColumnFormatterPipe implements PipeTransform {
     }
 }
 
+@Pipe({ name: 'summaryFormatter' })
+export class IgxSummaryFormatterPipe implements PipeTransform {
+
+    transform(summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand,
+        summaryFormatter: (s: IgxSummaryResult, o: IgxSummaryOperand) => any) {
+        return summaryFormatter(summaryResult, summaryOperand);
+    }
+}
+
 @Pipe({
     name: 'gridAddRow',
     pure: true

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

@@ -27,6 +27,7 @@ import { GridSummaryCalculationMode } from '../common/enums';
 import { IgxNumberFilteringOperand, IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { DropPosition } from '../moving/moving.service';
+import { DatePipe } from '@angular/common';
 
 describe('IgxGrid - Summaries #grid', () => {
     configureTestSuite();
@@ -194,14 +195,14 @@ describe('IgxGrid - Summaries #grid', () => {
                 fixture.detectChanges();
 
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
-                    ['10', '0', '20,000', '39,004', '3,900.4', '6']);
+                    ['10', '0', '20000', '39004', '3900.4', '6']);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
 
                 grid.getCellByColumn(4, 'InStock').update(true);
                 fixture.detectChanges();
 
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
-                    ['10', '0', '20,000', '39,004', '3,900.4', '7']);
+                    ['10', '0', '20000', '39004', '3900.4', '7']);
 
                 grid.filter('UnitsInStock', 0, IgxNumberFilteringOperand.instance().condition('equals'));
                 fixture.detectChanges();
@@ -258,7 +259,7 @@ describe('IgxGrid - Summaries #grid', () => {
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
                     ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['8', '1', '1,000', '2,204', '275.5']);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count'], ['8']);
-                const options = { year: 'numeric', month: 'short', day: 'numeric' };
+                const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
                 const earliest = SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'month', -1).toLocaleString('us', options);
                 const latest = SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'month', 1).toLocaleString('us', options);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Count', 'Earliest', 'Latest'], ['8', earliest, latest]);
@@ -352,14 +353,14 @@ describe('IgxGrid - Summaries #grid', () => {
                 const summaryClass = fix.componentInstance.numberSummary;
 
                 const summaries = summaryClass.operate(fix.componentInstance.data.map((x) => x['UnitsInStock']));
-                expect(summaries[0].summaryResult).toBe('10');
-                expect(summaries[1].summaryResult).toBe('0');
-                expect(summaries[2].summaryResult).toBe('20,000');
-                expect(summaries[3].summaryResult).toBe('39,004');
-                expect(summaries[4].summaryResult).toBe('3,900.4');
+                expect(summaries[0].summaryResult).toBe(10);
+                expect(summaries[1].summaryResult).toBe(0);
+                expect(summaries[2].summaryResult).toBe(20000);
+                expect(summaries[3].summaryResult).toBe(39004);
+                expect(summaries[4].summaryResult).toBe(3900.4);
 
                 const emptySummaries = summaryClass.operate();
-                expect(emptySummaries[0].summaryResult).toBe('0');
+                expect(emptySummaries[0].summaryResult).toBe(0);
                 expect(typeof emptySummaries[1].summaryResult).not.toEqual(undefined);
                 expect(typeof emptySummaries[2].summaryResult).not.toEqual(undefined);
                 expect(typeof emptySummaries[3].summaryResult).not.toEqual(undefined);
@@ -370,25 +371,48 @@ describe('IgxGrid - Summaries #grid', () => {
                 expect(typeof emptySummaries[3].summaryResult).not.toEqual(null);
                 expect(typeof emptySummaries[4].summaryResult).not.toEqual(null);
 
-                expect(emptySummaries[1].summaryResult === '0').toBeTruthy();
-                expect(emptySummaries[2].summaryResult === '0').toBeTruthy();
-                expect(emptySummaries[3].summaryResult === '0').toBeTruthy();
-                expect(emptySummaries[4].summaryResult === '0').toBeTruthy();
+                expect(emptySummaries[1].summaryResult === 0).toBeTruthy();
+                expect(emptySummaries[2].summaryResult === 0).toBeTruthy();
+                expect(emptySummaries[3].summaryResult === 0).toBeTruthy();
+                expect(emptySummaries[4].summaryResult === 0).toBeTruthy();
             });
 
 
             it('should calculate summaries for \'date\' dataType or return if no data is provided', () => {
                 const summaryClass = fix.componentInstance.dateSummary;
+                const pipe = new DatePipe('en-US');
 
                 const summaries = summaryClass.operate(fix.componentInstance.data.map((x) => x['OrderDate']));
-                expect(summaries[0].summaryResult).toBe('10');
-                expect(summaries[1].summaryResult.trim()).toBe('May 17, 1990');
-                expect(summaries[2].summaryResult.trim()).toBe('Dec 25, 2025');
+                expect(summaries[0].summaryResult).toBe(10);
+                expect(pipe.transform(summaries[1].summaryResult, 'mediumDate')).toBe('May 17, 1990');
+                expect(pipe.transform(summaries[2].summaryResult, 'mediumDate')).toBe('Dec 25, 2025');
 
                 const emptySummaries = summaryClass.operate([]);
-                expect(emptySummaries[0].summaryResult).toBe('0');
-                expect(emptySummaries[1].summaryResult).toBe(null);
-                expect(emptySummaries[2].summaryResult).toBe(null);
+                expect(emptySummaries[0].summaryResult).toBe(0);
+                expect(emptySummaries[1].summaryResult).toBe(undefined);
+                expect(emptySummaries[2].summaryResult).toBe(undefined);
+            });
+
+            it('should display summaries for \'date\' dataType based on column formatter', () => {
+                const summaryRow = GridSummaryFunctions.getRootSummaryRow(fix);
+                const pipe = new DatePipe('fr-FR');
+
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4,
+                    ['Count', 'Earliest', 'Latest'], ['10', 'May 17, 1990', 'Dec 25, 2025']);
+
+                grid.getColumnByName('OrderDate').summaryFormatter
+                    = ((summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => {
+                    const result = summaryResult.summaryResult;
+                    if(summaryOperand instanceof IgxDateSummaryOperand
+                        && summaryResult.key !== 'count' && result !== null && result !== undefined) {
+                        return pipe.transform(result,'mediumDate');
+                    }
+                    return result;
+                });
+                fix.detectChanges();
+
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4,
+                    ['Count', 'Earliest', 'Latest'], ['10', '17 mai 1990', '25 déc. 2025']);
             });
 
             it('should calc tfoot height according number of summary functions', () => {
@@ -959,7 +983,7 @@ describe('IgxGrid - Summaries #grid', () => {
             GridSummaryFunctions.verifySummaryCellActive(fix, 3, 0);
 
             const summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
-            let summaryCell = GridSummaryFunctions.getSummaryCellByVisibleIndex(summaryRow, 0);
+            const summaryCell = GridSummaryFunctions.getSummaryCellByVisibleIndex(summaryRow, 0);
             GridFunctions.simulateGridContentKeydown(fix, 'ArrowDown');
             fix.detectChanges();
 
@@ -983,7 +1007,7 @@ describe('IgxGrid - Summaries #grid', () => {
 
             GridSummaryFunctions.verifySummaryCellActive(fix, 3, 1);
 
-            summaryCell = GridSummaryFunctions.getSummaryCellByVisibleIndex(summaryRow, 1);
+            // summaryCell = GridSummaryFunctions.getSummaryCellByVisibleIndex(summaryRow, 1);
             GridFunctions.simulateGridContentKeydown(fix, 'ArrowUp');
             fix.detectChanges();
             cell = grid.getCellByColumn(2, 'ParentID');

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

@@ -1549,6 +1549,11 @@ describe('IgxGrid Component Tests #grid', () => {
             });
 
             grid.locale = 'de-DE';
+            grid.columnList.toArray()[5].pipeArgs = {
+                timezone: 'UTC',
+                format: 'longDate',
+                digitsInfo: '1.2-2'
+            };
             grid.columnList.toArray()[4].pipeArgs = {
                 timezone: 'UTC',
                 format: 'longDate',