chore(pivot): Add pivotKeys and fix some issues

dkamburov · dkamburov · commit d61af515a566 · 2021-09-24T20:16:47.000+03:00
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
@@ -31,8 +31,8 @@
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
-        | gridPivotFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | gridPivotRow:pivotConfiguration.rows:pivotConfiguration.values"
+        | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
+        | pivotGridRow:pivotConfiguration.rows:pivotConfiguration.values"
             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.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts
@@ -24,3 +24,10 @@ export interface IPivotValue {
     // Enables/Disables a particular value from pivot aggregation.
     enabled: boolean;
 }
+
+export interface IPivotKeys {
+    children: string;
+    records: string;
+    aggregations: string;
+    level: string;
+}
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
@@ -1,4 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { IPivotKeys } from 'igniteui-angular';
 import { cloneArray, cloneValue } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -9,7 +10,7 @@ import { IPivotDimension, IPivotValue } from './pivot-grid.interface';
  * @hidden
  */
 @Pipe({
-    name: 'gridPivotRow',
+    name: 'pivotGridRow',
     pure: true
 })
 export class IgxPivotRowPipe implements PipeTransform {
@@ -19,14 +20,15 @@ export class IgxPivotRowPipe implements PipeTransform {
     public transform(
         collection: any,
         rows: IPivotDimension[],
-        values?: IPivotValue[]
+        values?: IPivotValue[],
+        pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
         // build hierarchies - groups and subgroups
-        const hierarchies = PivotUtil.getFieldsHierarchy(collection, rows);
+        const hierarchies = PivotUtil.getFieldsHierarchy(collection, rows, pivotKeys);
         // apply aggregations based on the created groups
-        PivotUtil.applyAggregations(hierarchies, values);
+        PivotUtil.applyAggregations(hierarchies, values, pivotKeys);
         // generate flat data from the hierarchies
-        const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? []);
+        const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? [], pivotKeys);
         return data;
     }
 }
@@ -35,41 +37,44 @@ export class IgxPivotRowPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'gridPivotColumn',
+    name: 'pivotGridColumn',
     pure: true
 })
 export class IgxPivotColumnPipe implements PipeTransform {
 
     public transform(
         collection: any,
         columns: IPivotDimension[],
-        values?: IPivotValue[]
+        values?: IPivotValue[],
+        pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
         // build hierarchies - groups and subgroups by columns
         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);
-            if (hierarchy['children']) {
+            this.groupColumns(hierarchy, columns, values, pivotKeys);
+            if (hierarchy[pivotKeys.children]) {
                 let flatCols = {};
-                PivotUtil.flattenColumnHierarchy(hierarchy['children'], values).forEach(o => {
-                    delete o['records'];
+                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 */
                 result.push({...hierarchy, ...flatCols});
             }
         });
 
         return result;
     }
 
-    private groupColumns(hierarchy, columns, values) {
-        const children = hierarchy['children'];
+    private groupColumns(hierarchy, columns, values, pivotKeys) {
+        const children = hierarchy[pivotKeys.children];
         if (children) {
-            this.groupColumns(children, columns, values);
-        } else if (hierarchy['records']) {
-            hierarchy['children'] = PivotUtil.getFieldsHierarchy(hierarchy['records'], columns);
-            PivotUtil.applyAggregations(hierarchy['children'], values);
+            this.groupColumns(children, columns, values, pivotKeys);
+        } else if (hierarchy[pivotKeys.records]) {
+            hierarchy[pivotKeys.children] = PivotUtil.getFieldsHierarchy(hierarchy[pivotKeys.records], columns, pivotKeys);
+            PivotUtil.applyAggregations(hierarchy[pivotKeys.children], values, pivotKeys);
         }
     }
 
@@ -80,7 +85,7 @@ export class IgxPivotColumnPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'gridPivotFilter',
+    name: 'pivotGridFilter',
     pure: true
 })
 export class IgxPivotGridFilterPipe implements PipeTransform {
@@ -107,17 +112,17 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
 }
 
 export class PivotUtil {
-    public static getFieldsHierarchy(data: any[], columns: IPivotDimension[]): Map<string, any> {
+    public static getFieldsHierarchy(data: any[], columns: IPivotDimension[], pivotKeys: IPivotKeys): Map<string, any> {
         const hierarchy = new Map<string, any>();
         for (const rec of data) {
             const vals = this.extractValuesFromDimension(columns, rec);
             for (const val of vals) { // this should go in depth also vals.children
                 if (hierarchy.get(val.value) != null && val.children) {
-                    this.applyHierarchyChildren(hierarchy, val, rec);
+                    this.applyHierarchyChildren(hierarchy, val, rec, pivotKeys.records);
                 } else {
                     hierarchy.set(val.value, cloneValue(val));
                     hierarchy.get(val.value).children = new Map<string, any>();
-                    this.applyHierarchyChildren(hierarchy, val, rec);
+                    this.applyHierarchyChildren(hierarchy, val, rec, pivotKeys.records);
                 }
             }
         }
@@ -143,15 +148,15 @@ export class PivotUtil {
         return vals;
     }
 
-    public static applyAggregations(hierarchies, values) {
+    public static applyAggregations(hierarchies, values, pivotKeys) {
         hierarchies.forEach((hierarchy) => {
-            const children = hierarchy['children'];
+            const children = hierarchy[pivotKeys.children];
             if (children) {
-                this.applyAggregations(children, values);
-                const childrenAggregations = this.collectAggregations(children);
-                hierarchy['aggregations'] = this.aggregate(childrenAggregations, values);
-            } else if (hierarchy['records']) {
-                hierarchy['aggregations'] = this.aggregate(hierarchy['records'], values);
+                this.applyAggregations(children, values, pivotKeys);
+                const childrenAggregations = this.collectAggregations(children, pivotKeys);
+                hierarchy[pivotKeys.aggregations] = this.aggregate(childrenAggregations, values);
+            } else if (hierarchy[pivotKeys.records]) {
+                hierarchy[pivotKeys.aggregations] = this.aggregate(hierarchy[pivotKeys.records], values);
             }
         });
     }
@@ -165,33 +170,36 @@ export class PivotUtil {
         return result;
     }
 
-    public static flattenHierarchy(hierarchies, rec) {
+    public static flattenHierarchy(hierarchies, rec, pivotKeys) {
         let flatData = [];
         const field = this.generateFieldValue(rec);
         hierarchies.forEach((h, key) => {
             let obj = {};
             obj[field] = key;
-            obj['records'] = h['records'];
-            obj = {...obj, ...h['aggregations']};
+            obj[pivotKeys.records] = h[pivotKeys.records];
+            obj = {...obj, ...h[pivotKeys.aggregations]};
             flatData.push(obj);
-            if (h['children']) {
-                flatData = [...flatData, ...this.flattenHierarchy(h['children'], rec)];
+            if (h[pivotKeys.children]) {
+                let childRecords = [];
+                h[pivotKeys.children].forEach(c => childRecords = [...childRecords, ...c[pivotKeys.records]]);
+                obj[pivotKeys.records] = obj[pivotKeys.records] ? [...obj[pivotKeys.records], ...childRecords] : childRecords;
+                flatData = [...flatData, ...this.flattenHierarchy(h[pivotKeys.children], rec, pivotKeys)];
             }
         });
 
         return flatData;
     }
 
-    public static flattenColumnHierarchy(hierarchies, values) {
+    public static flattenColumnHierarchy(hierarchies, values, pivotKeys) {
         let flatData = [];
         hierarchies.forEach((h, key) => {
             const obj = {};
             for (const value of values) {
-                obj[key] = h['aggregations'][value.member];
-                obj['records'] = h['records'];
+                obj[key] = h[pivotKeys.aggregations][value.member];
+                obj[pivotKeys.records] = h[pivotKeys.records];
                 flatData.push(obj);
-                if (h['children']) {
-                    flatData = [...flatData, ...this.flattenColumnHierarchy(h['children'], values)];
+                if (h[pivotKeys.children]) {
+                    flatData = [...flatData, ...this.flattenColumnHierarchy(h[pivotKeys.children], values, pivotKeys)];
                 }
             }
         });
@@ -205,14 +213,14 @@ export class PivotUtil {
         return 'field' + i;
     }
 
-    private static collectAggregations(children) {
+    private static collectAggregations(children, pivotKeys) {
         const result = [];
-        children.forEach(value => result.push(value['aggregations']));
+        children.forEach(value => result.push(value[pivotKeys.aggregations]));
 
         return result;
     }
 
-    private static applyHierarchyChildren(hierarchy, val, rec, recordsKey = 'records') {
+    private static applyHierarchyChildren(hierarchy, val, rec, recordsKey) {
         for (const child of val.children) {
             if (!hierarchy.get(val.value).children.get(child.value)) {
                 hierarchy.get(val.value).children.set(child.value, child);
diff --git a/src/app/pivot-grid/pivot-grid.sample.html b/src/app/pivot-grid/pivot-grid.sample.html
@@ -2,5 +2,5 @@
     <!-- <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig">
     </igx-pivot-grid> -->
 
-    <pre>{{origData | gridPivotRow:pivotConfig.rows:pivotConfig.values | gridPivotColumn:pivotConfig.columns:pivotConfig.values | json}}</pre>
+    <pre>{{origData | pivotGridRow:pivotConfig.rows:pivotConfig.values | pivotGridColumn:pivotConfig.columns:pivotConfig.values | json}}</pre>
 </div>
