Flatten hierarchy when resolving deeply neested dimensions. Additiona small fixes for toggle resolution and privot row field name resolution.

Author: MKirova

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

@@ -117,7 +117,7 @@
         <igx-icon [attr.draggable]="false"
                   (click)="toggleColumn(column)"
                   style='cursor: pointer;'>
-                  {{columnGroupStates.get(column.header) ? 'expand_more' : 'expand_less'}}</igx-icon>
+                  {{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
         {{column.header}}
     </div>
 </ng-template>

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

@@ -196,21 +196,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
    public toggleColumn(col: IgxColumnComponent) {
-       const state = this.columnGroupStates.get(col.header);
+       const state = this.columnGroupStates.get(col.field);
        const newState = !state;
-       this.columnGroupStates.set(col.header, newState);
+       this.columnGroupStates.set(col.field, newState);
        const parentCols = col.parent ? col.parent.children : this.columns.filter(x => x.level === 0);
        const fieldColumn =  parentCols.filter(x => x.header === col.header && !x.columnGroup)[0];
        const groupColumn =  parentCols.filter(x => x.header === col.header && x.columnGroup)[0];
        groupColumn.hidden = newState;
-       const hasChildGroup = groupColumn.children.filter(x => x.columnGroup).length > 0;
-       if (!groupColumn.hidden &&  hasChildGroup) {
-            // column group when shown displays all children, we want to show only groups
-           const fieldChildren =  groupColumn.children.filter(x => !x.columnGroup);
-           fieldChildren.forEach(fieldChild => {
-            fieldChild.hidden = true;
-           });
-       }
+        this.resolveToggle(groupColumn);
        fieldColumn.hidden = !newState;
        if (newState) {
         fieldColumn.headerTemplate = this.headerTemplate;
@@ -220,6 +213,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
        this.reflow();
    }
 
+   protected resolveToggle(groupColumn: IgxColumnComponent) {
+    const hasChildGroup = groupColumn.children.filter(x => x.columnGroup).length > 0;
+        if (!groupColumn.hidden &&  hasChildGroup) {
+            const fieldChildren =  groupColumn.children.filter(x => !x.columnGroup);
+            const groupChildren = groupColumn.children.filter(x => x.columnGroup);
+            groupChildren.forEach(group => {
+                this.resolveToggle(group);
+            });
+            fieldChildren.forEach(fieldChild => {
+                fieldChild.hidden = true;
+            });
+        }
+   }
+
     /**
      * @hidden
      * @internal
@@ -261,28 +268,26 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 columns.push(ref.instance);
             } else {
                 const ref = factoryColumnGroup.create(this.viewRef.injector);
-                ref.instance.header = key;
                 ref.instance.parent = parent;
+                ref.instance.field = key;
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 if (value.expandable) {
                     ref.instance.headerTemplate = this.headerTemplate;
+                    const refSibling = factoryColumn.create(this.viewRef.injector);
+                    refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
+                    refSibling.instance.field = key;
+                    refSibling.instance.dataType = this.resolveDataTypes(data[0][key]);
+                    refSibling.instance.parent = parent;
+                    refSibling.instance.hidden = true;
+                    columns.push(refSibling.instance);
                 }
                 const children = this.generateColumnHierarchy(value.children, data, ref.instance);
-
-                const refSibling = factoryColumn.create(this.viewRef.injector);
-                refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
-                refSibling.instance.field = key;
-                refSibling.instance.dataType = this.resolveDataTypes(data[0][key]);
-                refSibling.instance.parent = parent;
-                refSibling.instance.hidden = true;
-
                 const filteredChildren = children.filter(x => x.level === ref.instance.level + 1);
                 ref.changeDetectorRef.detectChanges();
 
                 ref.instance.children.reset(filteredChildren);
 
                 columns.push(ref.instance);
-                columns.push(refSibling.instance);
                 columns = columns.concat(children);
             }
         });

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

@@ -85,10 +85,11 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     }
 
     protected _createColComponent(field: string) {
+        const fieldName = field.indexOf('-') !==  -1 ? field.slice(field.lastIndexOf('-') + 1) : field;
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
         ref.instance.field = field;
-        ref.instance.header = field;
+        ref.instance.header = fieldName;
         ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
         (ref as any).instance._vIndex = this.grid.columns.length + this.index;
         ref.instance.headerTemplate = this.headerTemplate;

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

@@ -25,27 +25,34 @@ export class PivotUtil {
 
     public static extractValuesFromDimension(dims: IPivotDimension[], recData: any, path = []) {
         const vals = [];
-        let lvl = 0;
         let lvlCollection = vals;
-        for (const col of dims) {
+        const flattenedDims = this.flatten(dims);
+        for (const col of flattenedDims) {
             const value = this.extractValueFromDimension(col, recData);
             path.push(value);
             const newValue = path.join('-');
             lvlCollection.push({ value: newValue });
-            if (col.childLevels != null && col.childLevels.length > 0) {
-                const childValues = this.extractValuesFromDimension(col.childLevels, recData, path);
-                vals[lvl].children = childValues;
-                vals[lvl].expandable = true;
-            }
-            lvl++;
-            if(!lvlCollection[0].children) {
+            lvlCollection[0].expandable = col.expandable;
+            if (!lvlCollection[0].children) {
                 lvlCollection[0].children = [];
             }
             lvlCollection = lvlCollection[0].children;
         }
         return vals;
     }
 
+    public static flatten(arr) {
+        const newArr = arr.reduce((acc, item) => {
+            acc.push(item);
+          if (Array.isArray(item.childLevels) && item.childLevels.length > 0) {
+            item.expandable = true;
+            acc = acc.concat(this.flatten(item.childLevels));
+          }
+          return acc;
+        }, []);
+        return newArr;
+      }
+
     public static applyAggregations(hierarchies, values, pivotKeys) {
         hierarchies.forEach((hierarchy) => {
             const children = hierarchy[pivotKeys.children];

src/app/pivot-grid/pivot-grid.sample.ts

@@ -45,21 +45,28 @@ export class PivotGridSampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [{
-member: 'Country',
-enabled: true,
-childLevels:[]
-},
-{
-member: 'SellerName',
-enabled: true,
-childLevels:[]
-},
-{
-member: 'Date',
-enabled: true,
-childLevels: []
-}
-],
+            member: 'Country',
+            enabled: true,
+            childLevels: [{
+                member: 'SellerName',
+                enabled: true,
+                childLevels: [
+                    {
+                        member: 'Date',
+                        enabled: true,
+                        childLevels: []
+                    },
+                    ]
+            }]
+        },
+
+        {
+            member: 'ProductCategory',
+            enabled: true,
+            childLevels: []
+        }
+        ]
+,
         rows: [{
             member: () => 'All',
             enabled: true,