Move column pipe before flattening so that hierarchical group data can be more easily sorted in their own hierarchy after aggregates are populated. Make all columns sortable by default.

MKirova · MKirova · commit 1dca5eb6b389 · 2021-11-15T18:05:14.000+02:00
diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts
@@ -30,50 +30,50 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
     }
 
     public process(
-            collection: any,
-            rows: IPivotDimension[],
-            values?: IPivotValue[],
-            pivotKeys: IPivotKeys =
-            { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
-        ): any[] {
-            let hierarchies;
-            let data;
-            const prevRowDims = [];
-            let prevDim;
-            for (const row of rows) {
-                if (!data) {
-                    // build hierarchies - groups and subgroups
-                    hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
-                    // generate flat data from the hierarchies
-                    data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
-                    prevRowDims.push(row);
-                    prevDim = row;
-                } else {
-                    const newData = [...data];
-                    for (let i = 0; i < newData.length; i++) {
-                        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);
-                        PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
-
-                        PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
-                        if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row)) {
-                            newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
-                        } else {
-                            newData.splice(i , 1, ...siblingData);
-                        }
-                        i += siblingData.length - 1;
+        collection: any,
+        rows: IPivotDimension[],
+        values?: IPivotValue[],
+        pivotKeys: IPivotKeys =
+            { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
+    ): any[] {
+        let hierarchies;
+        let data;
+        const prevRowDims = [];
+        let prevDim;
+        for (const row of rows) {
+            if (!data) {
+                // build hierarchies - groups and subgroups
+                hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
+                // generate flat data from the hierarchies
+                data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
+                prevRowDims.push(row);
+                prevDim = row;
+            } else {
+                const newData = [...data];
+                for (let i = 0; i < newData.length; i++) {
+                    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);
+                    PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
+
+                    PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
+                    if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row)) {
+                        newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
+                    } else {
+                        newData.splice(i, 1, ...siblingData);
                     }
-                    data = newData;
-                    prevDim = row;
-                    prevRowDims.push(row);
+                    i += siblingData.length - 1;
                 }
+                data = newData;
+                prevDim = row;
+                prevRowDims.push(row);
             }
-            return data;
         }
+        return data;
     }
+}
 
 export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
     private static _instance: PivotRowDimensionsStrategy = null;
@@ -83,43 +83,54 @@ export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
     }
 
     public process(
-            collection: any[],
-            columns: IPivotDimension[],
-            values: IPivotValue[],
-            pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
-        ): any[] {
-            const result = [];
-            collection.forEach(hierarchy => {
-                // apply aggregations based on the created groups and generate column fields based on the hierarchies
-                this.groupColumns(hierarchy, columns, values, pivotKeys);
-                if (hierarchy[pivotKeys.children]) {
-                    let flatCols = {};
-                    PivotUtil.flattenColumnHierarchy(hierarchy[pivotKeys.children], values, pivotKeys).forEach(o => {
-                        delete o[pivotKeys.records];
-                        flatCols = {...flatCols, ...o};
-                    });
-                    delete hierarchy[pivotKeys.children]; /* or we can keep it
-                    and use when creating the columns in pivot grid instead of recreating it */
-                    const keys = Object.keys(hierarchy);
-                    //remove all record keys from final data since we don't need them anymore.
-                    keys.forEach(k => {
-                        if (k.indexOf(pivotKeys.records) !== -1 || k  === pivotKeys.level) {
-                            delete hierarchy[k];
+        collection: any[],
+        columns: IPivotDimension[],
+        values: IPivotValue[],
+        pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
+    ): any[] {
+        const res = this.processHierarchy(collection, columns, values, pivotKeys);
+        return res;
+    }
+
+    private processHierarchy(collection, columns: IPivotDimension[], values, pivotKeys) {
+        const result = [];
+        collection.forEach(hierarchy => {
+            // apply aggregations based on the created groups and generate column fields based on the hierarchies
+            this.groupColumns(hierarchy, columns, values, pivotKeys);
+            if (hierarchy[pivotKeys.children]) {
+                let flatCols = {};
+                PivotUtil.flattenColumnHierarchy(hierarchy[pivotKeys.children], values, pivotKeys).forEach(o => {
+                    delete o[pivotKeys.records];
+                    flatCols = { ...flatCols, ...o };
+                });
+                delete hierarchy[pivotKeys.children]; /* or we can keep it
+                        and use when creating the columns in pivot grid instead of recreating it */
+                const keys = Object.keys(hierarchy);
+                //remove all record keys from final data since we don't need them anymore.
+                keys.forEach(k => {
+                    if (k.indexOf(pivotKeys.records) !== -1) {
+                        if (hierarchy[k]) {
+                            this.processHierarchy(hierarchy[k], columns, values, pivotKeys);
                         }
-                    });
-                    if (this.isLeaf(hierarchy, pivotKeys)) {
-                        delete hierarchy[pivotKeys.records]; /* remove the helper records of the actual records so that
-                    expand indicators can be rendered properly */
+                        //delete hierarchy[k];
                     }
-                    for (const property in flatCols) {
-                        if (flatCols.hasOwnProperty(property)) {
-                            hierarchy[property] = flatCols[property];
-                        }
+                    if (k === pivotKeys.level) {
+                        delete hierarchy[k];
                     }
-                    result.push(hierarchy);
+                });
+                if (this.isLeaf(hierarchy, pivotKeys)) {
+                    delete hierarchy[pivotKeys.records]; /* remove the helper records of the actual records so that
+                        expand indicators can be rendered properly */
                 }
-            });
-            return result;
+                for (const property in flatCols) {
+                    if (flatCols.hasOwnProperty(property)) {
+                        hierarchy[property] = flatCols[property];
+                    }
+                }
+                result.push(hierarchy);
+            }
+        });
+        return result;
     }
 
     private groupColumns(hierarchy, columns, values, pivotKeys) {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -33,8 +33,9 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree
         | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger
-        | pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger
-        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger"
+        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger
+        | pivotGridColumnSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
+        | pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
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
@@ -847,6 +847,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.parent = parent;
                 ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
                 ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
+                ref.instance.sortable = true;
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
@@ -859,6 +860,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 const ref = factoryColumnGroup.create(this.viewRef.injector);
                 ref.instance.parent = parent;
                 ref.instance.field = key;
+                ref.instance.sortable = true;
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 if (value.expandable) {
                     ref.instance.headerTemplate = this.headerTemplate;
@@ -868,6 +870,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                     refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                     refSibling.instance.field = key;
                     refSibling.instance.parent = parent;
+                    ref.instance.sortable = true;
                     refSibling.instance.hidden = true;
                     refSibling.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
                     refSibling.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
@@ -901,6 +904,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             ref.instance.field = parent.field + '-' + val.member;
             ref.instance.parent = parent;
             ref.instance.hidden = hidden;
+            ref.instance.sortable = true;
             ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
             ref.instance.formatter = val.formatter;
             ref.changeDetectorRef.detectChanges();
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts
@@ -2,7 +2,8 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IgxGridModule } from '../grid/grid.module';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxPivotRowComponent } from './pivot-row.component';
-import { IgxPivotRowPipe, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotRowExpansionPipe } from './pivot-grid.pipes';
+import { IgxPivotRowPipe, IgxPivotColumnPipe, IgxPivotGridFilterPipe,
+   IgxPivotRowExpansionPipe, IgxPivotGridSortingPipe } from './pivot-grid.pipes';
 import { IgxGridComponent } from '../grid/grid.component';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 
@@ -17,7 +18,8 @@ import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
     IgxPivotRowPipe,
     IgxPivotRowExpansionPipe,
     IgxPivotColumnPipe,
-    IgxPivotGridFilterPipe
+    IgxPivotGridFilterPipe,
+    IgxPivotGridSortingPipe
   ],
   exports: [
     IgxGridModule,
@@ -27,7 +29,8 @@ import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
     IgxPivotRowExpansionPipe,
     IgxPivotRowPipe,
     IgxPivotColumnPipe,
-    IgxPivotGridFilterPipe
+    IgxPivotGridFilterPipe,
+    IgxPivotGridSortingPipe
   ],
   imports: [
     IgxGridModule,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
@@ -7,6 +7,8 @@ import { IPivotConfiguration, IPivotDimension, IPivotKeys } from './pivot-grid.i
 import { PivotColumnDimensionsStrategy, PivotRowDimensionsStrategy } from '../../data-operations/pivot-strategy';
 import { PivotUtil } from './pivot-util';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
+import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
+import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
 /**
  * @hidden
  */
@@ -127,3 +129,27 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
         return result;
     }
 }
+
+
+/**
+ * @hidden
+ */
+ @Pipe({
+    name: 'pivotGridColumnSort',
+    pure: true
+})
+export class IgxPivotGridSortingPipe implements PipeTransform {
+
+    public transform(collection: any[], expressions: ISortingExpression[], sorting: IGridSortingStrategy,
+        id: string, pipeTrigger: number, pinned?): any[] {
+        let result: any[];
+
+        if (!expressions.length) {
+            result = collection;
+        } else {
+            result = DataUtil.sort(cloneArray(collection), expressions, sorting);
+        }
+
+        return result;
+    }
+}
