Merge pull request #10285 from IgniteUI/mdragnev/pivot-formatting

dkamburov · web-flow · commit df1b33930ddc · 2021-10-19T19:52:21.000+03:00
Pivot grid formatting, cell classes, default data types.
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -70,8 +70,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden @internal
      */
-     @ViewChild('record_template', { read: TemplateRef, static: true })
-     public recordTemplate: TemplateRef<any>;
+    @ViewChild('record_template', { read: TemplateRef, static: true })
+    public recordTemplate: TemplateRef<any>;
 
     /**
      * @hidden @internal
@@ -157,7 +157,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * let data = this.grid.data;
      * ```
      */
-     public get data(): any[] | null {
+    public get data(): any[] | null {
         return this._data;
     }
     /**
@@ -169,21 +169,21 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * }];
      * ```
      */
-         public set filteredData(value) {
-            this._filteredData = value;
-        }
+    public set filteredData(value) {
+        this._filteredData = value;
+    }
 
-        /**
-         * Returns an array of objects containing the filtered data.
-         * ```typescript
-         * let filteredData = this.grid.filteredData;
-         * ```
-         *
-         * @memberof IgxHierarchicalGridComponent
-         */
-        public get filteredData() {
-            return this._filteredData;
-        }
+    /**
+     * Returns an array of objects containing the filtered data.
+     * ```typescript
+     * let filteredData = this.grid.filteredData;
+     * ```
+     *
+     * @memberof IgxHierarchicalGridComponent
+     */
+    public get filteredData() {
+        return this._filteredData;
+    }
 
 
     /**
@@ -251,7 +251,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 fieldChild.hidden = true;
             });
         }
-   }
+    }
 
     /**
      * @hidden
@@ -267,7 +267,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden
      */
-     protected autogenerateColumns() {
+    protected autogenerateColumns() {
         const data = this.gridAPI.get_data();
         const fieldsMap = PivotUtil.getFieldsHierarchy(
             data,
@@ -284,7 +284,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
-    protected generateColumnHierarchy(fields:  Map<string, any>, data, parent = null): IgxColumnComponent[] {
+    protected generateColumnHierarchy(fields: Map<string, any>, data, parent = null): IgxColumnComponent[] {
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
@@ -337,6 +337,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 }
             }
         });
+        this.reflow();
         return columns;
     }
 
@@ -348,12 +349,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             ref.instance.field = parent.field + '-' + val.member;
             ref.instance.parent = parent;
             ref.instance.hidden = hidden;
-            ref.instance.dataType = this.resolveDataTypes(data[0][val.member]);
+            ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
+            ref.instance.formatter = val.formatter;
             ref.changeDetectorRef.detectChanges();
             cols.push(ref.instance);
         });
         return cols;
     }
-
-
 }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts
@@ -25,6 +25,12 @@ export interface IPivotValue {
     aggregate: (data: any[]) => any;
     // Enables/Disables a particular value from pivot aggregation.
     enabled: boolean;
+    // Allow conditionally styling of the IgxPivotGrid cells
+    styles?: any;
+    // Enables a data type specific template of the cells
+    dataType?: string;
+    // Applies display format to cell values.
+    formatter?: (value: any, rowData?: any) => any;
 }
 
 export interface IPivotKeys {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts
@@ -0,0 +1,136 @@
+import { Component, ViewChild } from '@angular/core';
+import { fakeAsync, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxNumberSummaryOperand, IgxPivotGridComponent, IgxPivotGridModule, IPivotConfiguration } from 'igniteui-angular';
+import { configureTestSuite } from '../../test-utils/configure-suite';
+
+describe('Basic IgxPivotGrid #pivotGrid', () => {
+    let fixture;
+    configureTestSuite((() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxPivotGridTestBaseComponent
+            ],
+            imports: [
+                NoopAnimationsModule, IgxPivotGridModule]
+        });
+    }));
+
+    beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(IgxPivotGridTestBaseComponent);
+        fixture.detectChanges();
+    }));
+
+    it('should apply formatter and dataType from measures', () => {
+        fixture.detectChanges();
+        const pivotGrid = fixture.componentInstance.pivotGrid;
+        const actualFormatterValue = pivotGrid.rowList.first.cells.first.title;
+        expect(actualFormatterValue).toEqual('774$');
+        const actualDataTypeValue = pivotGrid.rowList.first.cells.last.title;
+        expect(actualDataTypeValue).toEqual('$71.89');
+    });
+
+    it('should apply css class to cells from measures', () => {
+        fixture.detectChanges();
+        const pivotGrid = fixture.componentInstance.pivotGrid;
+        const cells = pivotGrid.rowList.first.cells;
+        expect(cells.first.nativeElement.classList).toContain('test');
+        expect(cells.last.nativeElement.classList).not.toContain('test');
+    });
+});
+
+
+@Component({
+    template: `
+    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
+    </igx-pivot-grid>`
+})
+export class IgxPivotGridTestBaseComponent {
+    @ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent;
+    public data;
+
+
+    public cellClasses;
+
+
+    public pivotConfigHierarchy: IPivotConfiguration;
+
+    constructor() {
+        this.data = [
+            {
+                ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley',
+                Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282
+            },
+            {
+                ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa',
+                Country: 'USA', Date: '01/05/2019', UnitsSold: 296
+            },
+            {
+                ProductCategory: 'Bikes', UnitPrice: 3.56, SellerName: 'Lydia',
+                Country: 'Uruguay', Date: '01/06/2020', UnitsSold: 68
+            },
+            {
+                ProductCategory: 'Accessories', UnitPrice: 85.58, SellerName: 'David',
+                Country: 'USA', Date: '04/07/2021', UnitsSold: 293
+            },
+            {
+                ProductCategory: 'Components', UnitPrice: 18.13, SellerName: 'John',
+                Country: 'USA', Date: '12/08/2021', UnitsSold: 240
+            },
+            {
+                ProductCategory: 'Clothing', UnitPrice: 68.33, SellerName: 'Larry',
+                Country: 'Uruguay', Date: '05/12/2020', UnitsSold: 456
+            },
+            {
+                ProductCategory: 'Clothing', UnitPrice: 16.05, SellerName: 'Walter',
+                Country: 'Bulgaria', Date: '02/19/2020', UnitsSold: 492
+            }];
+
+        this.cellClasses = {
+            test: this.callback,
+            test2: this.callback1
+        };
+
+        this.pivotConfigHierarchy = {
+            columns: [{
+                member: 'Country',
+                enabled: true,
+                childLevels: []
+            },
+            ],
+            rows: [{
+                member: () => 'All',
+                enabled: true,
+                childLevels: [
+                    {
+                        fieldName: 'ProductCategory',
+                        member: (data) => data.ProductCategory,
+                        enabled: true,
+                        childLevels: []
+                    }
+                ]
+            }],
+            values: [
+                {
+                    member: 'UnitsSold',
+                    aggregate: IgxNumberSummaryOperand.sum,
+                    enabled: true,
+                    // dataType: 'currency',
+                    formatter: (value) => value ? value + '$' : undefined,
+                    styles: this.cellClasses
+                },
+                {
+                    member: 'UnitPrice',
+                    aggregate: IgxNumberSummaryOperand.sum,
+                    enabled: true,
+                    dataType: 'currency'
+                }
+            ],
+            filters: null
+        };
+    }
+
+    public callback = (rowData: any, columnKey: any) => rowData[columnKey] >= 5;
+    public callback1 = (rowData: any, columnKey: any) => rowData[columnKey] < 5;
+
+}
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
@@ -20,12 +20,13 @@
 
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
         <igx-grid-cell
+            #cell
             class="igx-grid__td igx-grid__td--fw"
             [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
-            [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
+            [ngClass]="this.getCellClass(col) | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
             [column]="col"
@@ -105,4 +106,4 @@
                       {{ expandState ? 'expand_more' : 'expand_less'}}</igx-icon>
             {{column.header}}
         </div>
-    </ng-template>
+    </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts
@@ -69,6 +69,7 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.grid.gridAPI.get_row_expansion_state(this.rowDimensionKey);
     }
 
+
     /**
      * @hidden
      * @internal
@@ -84,6 +85,12 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         }
     }
 
+    public getCellClass(col: any) {
+        const colName = col.field.split('-');
+        const measureName = colName[colName.length - 1];
+        return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;
+    }
+
     protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {
         let dimIndex = 0;
         for (const dim of rowDimConfig) {
diff --git a/src/app/pivot-grid/pivot-grid.sample.css b/src/app/pivot-grid/pivot-grid.sample.css
diff --git a/src/app/pivot-grid/pivot-grid.sample.scss b/src/app/pivot-grid/pivot-grid.sample.scss
@@ -0,0 +1,21 @@
+:host ::ng-deep {
+    .upFont {
+        color: green;
+    }
+
+    .downFont {
+        color:red;
+    }
+
+    .upFont1 {
+        color: blue;
+    }
+
+    .downFont1 {
+        color:yellow;
+    }
+
+    .sample-column {
+        max-width: 900px;
+    }
+}
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -5,7 +5,7 @@ import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 @Component({
     providers: [],
     selector: 'app-tree-grid-sample',
-    styleUrls: ['pivot-grid.sample.css'],
+    styleUrls: ['pivot-grid.sample.scss'],
     templateUrl: 'pivot-grid.sample.html'
 })
 
@@ -56,17 +56,16 @@ export class PivotGridSampleComponent {
                         enabled: true,
                         childLevels: []
                     },
-                    ]
+                ]
             }]
         },
-
         {
             member: 'ProductCategory',
             enabled: true,
             childLevels: []
         }
         ]
-,
+        ,
         rows: [{
             member: 'ProductCategory',
             enabled: true,
@@ -81,12 +80,23 @@ export class PivotGridSampleComponent {
             {
                 member: 'UnitsSold',
                 aggregate: IgxNumberSummaryOperand.sum,
-                enabled: true
+                enabled: true,
+                styles: {
+                    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
+                    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 300
+                },
+                // dataType: 'currency',
+                formatter: (value) => value ? value + '$' : undefined
             },
             {
                 member: 'UnitPrice',
                 aggregate: IgxNumberSummaryOperand.sum,
-                enabled: true
+                enabled: true,
+                dataType: 'currency',
+                styles: {
+                    upFont1: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 50,
+                    downFont1: (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 50
+                },
             }
         ],
         filters: null

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>`
`69`	`69`	`return this.grid.gridAPI.get_row_expansion_state(this.rowDimensionKey);`
`70`	`70`	`}`
`71`	`71`
	`72`	`+`
`72`	`73`	`/**`
`73`	`74`	`* @hidden`
`74`	`75`	`* @internal`
`@@ -84,6 +85,12 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>`
`84`	`85`	`}`
`85`	`86`	`}`
`86`	`87`
	`88`	`+ public getCellClass(col: any) {`
	`89`	`+ const colName = col.field.split('-');`
	`90`	`+ const measureName = colName[colName.length - 1];`
	`91`	`+ return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;`
	`92`	`+ }`
	`93`	`+`
`87`	`94`	`protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {`
`88`	`95`	`let dimIndex = 0;`
`89`	`96`	`for (const dim of rowDimConfig) {`