Merge pull request #10431 from IgniteUI/mkirova/sort-dimensions

Allow sorting dimension values via related chips.

Author: dkamburov

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

@@ -4,6 +4,10 @@ import { IgxPivotGridComponent } from '../grids/pivot-grid/pivot-grid.component'
 import { IPivotDimension, IPivotKeys, IPivotValue, PivotDimensionType } from '../grids/pivot-grid/pivot-grid.interface';
 import { PivotUtil } from '../grids/pivot-grid/pivot-util';
 import { FilteringStrategy } from './filtering-strategy';
+import { GridColumnDataType } from './data-util';
+import { SortingDirection } from './sorting-expression.interface';
+import { DefaultSortingStrategy, ISortingStrategy } from './sorting-strategy';
+import { parseDate } from '../core/utils';
 
 export interface IPivotDimensionStrategy {
     process(collection: any,
@@ -173,3 +177,40 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy {
         return PivotUtil.extractValueFromDimension(dim, rec);
     }
 }
+
+export class DefaultPivotSortingStrategy extends DefaultSortingStrategy {
+    protected static _instance: DefaultPivotSortingStrategy = null;
+    protected dimension;
+    public static instance(): DefaultPivotSortingStrategy {
+        return this._instance || (this._instance = new this());
+    }
+    public sort(data: any[],
+                fieldName: string,
+                dir: SortingDirection,
+                ignoreCase: boolean,
+                valueResolver: (obj: any, key: string, isDate?: boolean) => any,
+                isDate?: boolean,
+                isTime?: boolean,
+                grid?: GridType) {
+        const key = fieldName;
+        const config = (grid as any).pivotConfiguration;
+        const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
+        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+        this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key);
+        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, this.getFieldValue, isDate, isTime);
+        return this.arraySort(data, cmpFunc);
+    }
+
+    protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
+        let resolvedValue = PivotUtil.extractValueFromDimension(this.dimension, obj);
+        const formatAsDate = this.dimension.dataType === GridColumnDataType.Date || this.dimension.dataType === GridColumnDataType.DateTime;
+        if (formatAsDate) {
+            const date = parseDate(resolvedValue);
+            resolvedValue = isTime && date ?
+                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
+
+        }
+        return resolvedValue;
+    }
+}

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

@@ -13,16 +13,17 @@ const TIME_TYPE = 'time';
 const DATE_TIME_TYPE = 'dateTime';
 export interface ISortingStrategy {
     sort: (data: any[],
-           fieldName: string,
-           dir: SortingDirection,
-           ignoreCase: boolean,
-           valueResolver: (obj: any, key: string, isDate?: boolean) => any,
-           isDate?: boolean,
-           isTime?: boolean) => any[];
+        fieldName: string,
+        dir: SortingDirection,
+        ignoreCase: boolean,
+        valueResolver: (obj: any, key: string, isDate?: boolean) => any,
+        isDate?: boolean,
+        isTime?: boolean,
+        grid?: GridType) => any[];
 }
 
 export class DefaultSortingStrategy implements ISortingStrategy {
-    private static _instance: DefaultSortingStrategy = null;
+    protected static _instance: DefaultSortingStrategy = null;
 
     protected constructor() {}
 
@@ -31,12 +32,12 @@ export class DefaultSortingStrategy implements ISortingStrategy {
     }
 
     public sort(data: any[],
-                fieldName: string,
-                dir: SortingDirection,
-                ignoreCase: boolean,
-                valueResolver: (obj: any, key: string, isDate?: boolean) => any,
-                isDate?: boolean,
-                isTime?: boolean) {
+        fieldName: string,
+        dir: SortingDirection,
+        ignoreCase: boolean,
+        valueResolver: (obj: any, key: string, isDate?: boolean) => any,
+        isDate?: boolean,
+        isTime?: boolean) {
         const key = fieldName;
         const reverse = (dir === SortingDirection.Desc ? -1 : 1);
         const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime);
@@ -65,8 +66,8 @@ export class DefaultSortingStrategy implements ISortingStrategy {
                              valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any,
                              isDate: boolean,
                              isTime: boolean) {
-        let a = valueResolver(obj1, key, isDate, isTime);
-        let b = valueResolver(obj2, key, isDate, isTime);
+        let a = valueResolver.call(this, obj1, key, isDate, isTime);
+        let b = valueResolver.call(this, obj2, key, isDate, isTime);
         if (ignoreCase) {
             a = a && a.toLowerCase ? a.toLowerCase() : a;
             b = b && b.toLowerCase ? b.toLowerCase() : b;
@@ -163,38 +164,17 @@ export class IgxSorting implements IGridSortingStrategy {
         let resolvedValue = resolveNestedPath(obj, key);
         if (isDate || isTime) {
             const date = parseDate(resolvedValue);
-            resolvedValue  = isTime && date ?
+            resolvedValue = isTime && date ?
                 new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
 
         }
         return resolvedValue;
     }
 
-    private groupedRecordsByExpression(data: any[],
-            index: number,
-            expression: IGroupingExpression,
-            isDate: boolean = false): any[] {
-        const res = [];
-        const key = expression.fieldName;
-        const len = data.length;
-        const groupval = this.getFieldValue(data[index], key, isDate);
-        res.push(data[index]);
-        index++;
-        const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
-        for (let i = index; i < len; i++) {
-            if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) {
-                res.push(data[i]);
-            } else {
-                break;
-            }
-        }
-        return res;
-    }
-
-    private sortDataRecursive<T>(data: T[],
-                                 expressions: ISortingExpression[],
-                                 expressionIndex: number = 0,
-                                 grid: GridType): T[] {
+    protected sortDataRecursive<T>(data: T[],
+        expressions: ISortingExpression[],
+        expressionIndex: number = 0,
+        grid: GridType): T[] {
         let i;
         let j;
         let gbData;
@@ -212,7 +192,7 @@ export class IgxSorting implements IGridSortingStrategy {
         const column = grid?.getColumnByName(expr.fieldName);
         const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
         const isTime = column?.dataType === TIME_TYPE;
-        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime);
+        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime, grid);
         if (expressionIndex === exprsLen - 1) {
             return data;
         }
@@ -230,6 +210,27 @@ export class IgxSorting implements IGridSortingStrategy {
         }
         return data;
     }
+
+    private groupedRecordsByExpression(data: any[],
+        index: number,
+        expression: IGroupingExpression,
+        isDate: boolean = false): any[] {
+        const res = [];
+        const key = expression.fieldName;
+        const len = data.length;
+        const groupval = this.getFieldValue(data[index], key, isDate);
+        res.push(data[index]);
+        index++;
+        const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
+        for (let i = index; i < len; i++) {
+            if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) {
+                res.push(data[i]);
+            } else {
+                break;
+            }
+        }
+        return res;
+    }
 }
 
 export class IgxDataRecordSorting extends IgxSorting {

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

@@ -31,6 +31,7 @@
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger
+        | pivotGridSort:pivotConfiguration:sortStrategy:id:pipeTrigger
         | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger
         | pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger
         | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger"

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

@@ -60,6 +60,7 @@ import { IgxGridTransaction } from '../hierarchical-grid/public_api';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
 import { DataUtil } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -958,7 +959,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
-        fields.forEach((value, key) => {
+        if (fields.size === 0) {
+            return columns;
+        }
+        const first = fields.keys().next().value;
+        const dim: IPivotDimension = fields.get(first).dimension;
+        let currentFields = fields;
+        if (dim && dim.sortDirection) {
+            const reverse = (dim.sortDirection === SortingDirection.Desc ? -1 : 1);
+            currentFields = new Map([...fields.entries()].sort((a, b) => reverse * (a > b ? 1 : a < b ? -1 : 0)));
+        }
+        currentFields.forEach((value, key) => {
             let shouldGenerate = true;
             if (value.dimension && value.dimension.filters) {
                 const state = {

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

@@ -2,6 +2,7 @@ import { GridColumnDataType } from '../../data-operations/data-util';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IPivotDimensionStrategy } from '../../data-operations/pivot-strategy';
 import { IgxColumnComponent } from '../columns/column.component';
+import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 
 export type PivotAggregation = (members: any[], data: any[]) => any;
 
@@ -26,6 +27,8 @@ export interface IPivotDimension {
     enabled: boolean;
     // A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
     filter?: FilteringExpressionsTree | null;
+    sortDirection?: SortingDirection;
+    dataType?: GridColumnDataType;
 }
 
 export interface IPivotValue {

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';
 import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
@@ -19,7 +20,8 @@ import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-cont
     IgxPivotRowPipe,
     IgxPivotRowExpansionPipe,
     IgxPivotColumnPipe,
-    IgxPivotGridFilterPipe
+    IgxPivotGridFilterPipe,
+    IgxPivotGridSortingPipe
   ],
   exports: [
     IgxGridModule,
@@ -30,7 +32,8 @@ import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-cont
     IgxPivotRowExpansionPipe,
     IgxPivotRowPipe,
     IgxPivotColumnPipe,
-    IgxPivotGridFilterPipe
+    IgxPivotGridFilterPipe,
+    IgxPivotGridSortingPipe
   ],
   imports: [
     IgxGridModule,

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

@@ -4,10 +4,12 @@ import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IPivotConfiguration, IPivotDimension, IPivotKeys } from './pivot-grid.interface';
-import { DimensionValuesFilteringStrategy, PivotColumnDimensionsStrategy,
+import { DefaultPivotSortingStrategy, DimensionValuesFilteringStrategy, PivotColumnDimensionsStrategy,
      PivotRowDimensionsStrategy } from '../../data-operations/pivot-strategy';
 import { PivotUtil } from './pivot-util';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
+import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
+import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { GridBaseAPIService, IgxGridBaseDirective } from '../hierarchical-grid/public_api';
 import { GridType } from '../common/grid.interface';
 /**
@@ -131,3 +133,43 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
         return result;
     }
 }
+
+/**
+ * @hidden
+ */
+ @Pipe({
+    name: 'pivotGridSort',
+    pure: true
+})
+export class IgxPivotGridSortingPipe implements PipeTransform {
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
+    public transform(collection: any[], config: IPivotConfiguration, sorting: IGridSortingStrategy,
+        id: string, pipeTrigger: number, pinned?): any[] {
+        let result: any[];
+        const allDimensions = config.rows;
+        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+        const expressions: ISortingExpression[] = [];
+        PivotUtil.flatten(enabledDimensions).forEach(x => {
+            if (x.sortDirection) {
+                expressions.push({
+                    dir: x.sortDirection,
+                    fieldName: x.memberName,
+                    strategy: DefaultPivotSortingStrategy.instance()
+                });
+            } else {
+                expressions.push({
+                    dir: SortingDirection.None,
+                    fieldName: x.memberName,
+                    strategy: DefaultPivotSortingStrategy.instance()
+                });
+            }
+        });
+        if (!expressions.length) {
+            result = collection;
+        } else {
+            result = DataUtil.sort(cloneArray(collection, true), expressions, sorting, this.gridAPI.grid);
+        }
+
+        return result;
+    }
+}

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

@@ -118,5 +118,48 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
              const expected = ['USA'];
              expect(colHeaders).toEqual(expected);
         });
+
+        it('should apply sorting for dimension via row chip', () => {
+            fixture.detectChanges();
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+            const rowChip = headerRow.querySelector('igx-chip[id="All"]');
+            rowChip.click();
+            fixture.detectChanges();
+            let rows = pivotGrid.rowList.toArray();
+            let expectedOrder = ['All', 'Accessories', 'Bikes', 'Clothing', 'Components'];
+            let rowDimensionHeaders = rows.map(x => x.rowDimension).flat().map(x => x.header);
+            expect(rowDimensionHeaders).toEqual(expectedOrder);
+
+            rowChip.click();
+            fixture.detectChanges();
+            rows = pivotGrid.rowList.toArray();
+            expectedOrder = ['All', 'Components', 'Clothing', 'Bikes', 'Accessories'];
+            rowDimensionHeaders = rows.map(x => x.rowDimension).flat().map(x => x.header);
+            expect(rowDimensionHeaders).toEqual(expectedOrder);
+        });
+
+        it('should apply sorting for dimension via column chip', () => {
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+            const colChip = headerRow.querySelector('igx-chip[id="Country"]');
+
+            // sort
+            colChip.click();
+            fixture.detectChanges();
+
+            let colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header);
+            let expected = ['Bulgaria', 'USA', 'Uruguay'];
+            expect(colHeaders).toEqual(expected);
+
+            // sort
+            colChip.click();
+            fixture.detectChanges();
+
+            colHeaders = pivotGrid.columns.filter(x => x.level === 0).map(x => x.header);
+            expected = ['Uruguay', 'USA', 'Bulgaria'];
+            expect(colHeaders).toEqual(expected);
+        });
     });
 });
+