Merge pull request #10399 from IgniteUI/mdragnev/row-dimensions

Introduce additional memberFunction to pivot dimensions and rename member to memberName

Author: dkamburov

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -46,23 +46,21 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
                     hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
                     // generate flat data from the hierarchies
                     data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
-                    row.fieldName = hierarchies.get(hierarchies.keys().next().value).dimension.fieldName;
                     prevRowDims.push(row);
                     prevDim = row;
                 } else {
                     const newData = [...data];
                     for (let i = 0; i < newData.length; i++) {
-                        const currData = newData[i][prevDim.fieldName + '_' + pivotKeys.records];
+                        const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
                         const hierarchyFields = PivotUtil
                             .getFieldsHierarchy(currData, [row], PivotDimensionType.Row, pivotKeys);
                         const siblingData = PivotUtil
                             .processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
-                        row.fieldName = hierarchyFields.get(hierarchyFields.keys().next().value).dimension.fieldName;
                         PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
 
                         PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
                         if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row)) {
-                            newData[i][row.fieldName + '_' + pivotKeys.records] = siblingData;
+                            newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
                         } else {
                             newData.splice(i , 1, ...siblingData);
                         }

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

@@ -19,7 +19,7 @@ import { GridType } from '../common/grid.interface';
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
+import { IPivotConfiguration, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -282,7 +282,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         let fieldsMap;
         if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
             const fields = this.generateDataFields(data);
-            const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.fieldName);
+            const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.memberName);
             const keyFields = Object.values(this.pivotKeys);
             const filteredFields = fields.filter(x => rowFields.indexOf(x) === -1 && keyFields.indexOf(x) === -1 &&
                 x.indexOf('_level') === -1 && x.indexOf('_records') === -1);

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

@@ -19,12 +19,12 @@ export interface IPivotConfiguration {
 export interface IPivotDimension {
     // allow defining a hierarchy when multiple sub groups need to be extracted from single member.
     childLevel?: IPivotDimension;
-    // field name which to use to extract value or function that extract the value.
-    member: string | ((data: any) => any);
+    // field name which to use to extract value
+    memberName: string;
+    // function that extract the value
+    memberFunction?: (data: any) => any;
     // Enables/Disables a particular dimension from pivot structure.
     enabled: boolean;
-    // additional field name when using member as a function
-    fieldName?: string;
 }
 
 export interface IPivotValue {

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

@@ -1,8 +1,8 @@
-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 { IgxPivotGridModule } from 'igniteui-angular';
 import { configureTestSuite } from '../../test-utils/configure-suite';
+import { IgxPivotGridTestBaseComponent } from '../../test-utils/pivot-grid-samples.spec';
 
 describe('Basic IgxPivotGrid #pivotGrid', () => {
     let fixture;
@@ -38,95 +38,3 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
         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
-            },
-            ],
-            rows: [{
-                member: () => 'All',
-                enabled: true,
-                childLevel: {
-                    fieldName: 'ProductCategory',
-                    member: (data) => data.ProductCategory,
-                    enabled: true
-                }
-            }],
-            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;
-
-}

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

@@ -112,15 +112,8 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     }
 
     protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0) {
-        const field = PivotUtil.resolveFieldName(dim, this.rowData);
-        let header = null;
-        if (typeof dim.member === 'string') {
-            header = this.rowData[dim.member];
-        } else if (typeof dim.member === 'function' && dim.fieldName) {
-            header = this.rowData[dim.fieldName];
-        } else {
-            header = dim.member.call(this, this.rowData);
-        }
+        const field = dim.memberName;
+        const header = this.rowData[field];
         const col = this._createColComponent(field, header, index, dim, lvl);
         return col;
     }