feat(grid): sort groups by values count (#12734)

* feat(grid): add sorting by group count

* chore(grid): remove unused variable

* fix(sorting): rename group sorting strategy

* feat(grid): update changelog with sorting strategy

* fix(grid): issue about group sorting

* fix(grid): issue about group sorting

---------

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Hristo <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes for each version of this project will be documented in this
 ## 15.1.0
 
 ### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
+    - `GroupMemberCountSortingStrategy` is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
 - `IgxColumnComponent`
     - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
 

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

@@ -87,4 +87,41 @@ export class DefaultSortingStrategy implements ISortingStrategy {
     protected arraySort(data: any[], compareFn?: (arg0: any, arg1: any) => number): any[] {
         return data.sort(compareFn);
     }
+}
+
+export class GroupMemberCountSortingStrategy implements ISortingStrategy {
+    protected static _instance: GroupMemberCountSortingStrategy = null;
+
+    protected constructor() { }
+
+    public static instance(): GroupMemberCountSortingStrategy {
+        return this._instance || (this._instance = new this());
+    }
+
+    public sort(data: any[], fieldName: string, dir: SortingDirection) {
+        const groupedArray = this.groupBy(data, fieldName);
+        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+
+        const cmpFunc = (a, b) => {
+            return this.compareObjects(a, b, groupedArray, fieldName, reverse);
+        };
+
+        return data
+            .sort((a, b) => a[fieldName].localeCompare(b[fieldName]))
+            .sort(cmpFunc);
+    }
+
+    public groupBy(data, key) {
+        return data.reduce((acc, curr) => {
+            (acc[curr[key]] = acc[curr[key]] || []).push(curr);
+            return acc;
+        }, {})
+    }
+
+    protected compareObjects(obj1: any, obj2: any, data: any[], fieldName: string, reverse: number) {
+        let firstItemValuesLength = data[obj1[fieldName]].length;
+        let secondItemValuesLength = data[obj2[fieldName]].length;
+
+        return reverse * (firstItemValuesLength - secondItemValuesLength);
+    }
 }

src/app/grid-groupby/grid-groupby.sample.html

@@ -49,7 +49,7 @@
 
     </igx-grid>
     <br />
-
+    <button igxButton="raised" (click)="sortByGroup()">Sort by group ASC/DESC</button>
     <button igxButton="raised" (click)="groupBy('CompanyName')">Group/Ungroup 'CompanyName'</button>
     <button igxButton="raised" (click)="groupBy('ContactTitle')">Group/Ungroup 'ContactTitle'</button>
     <button igxButton="raised" (click)="groupBy('City')">Group/Ungroup 'City'</button>

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

@@ -3,7 +3,7 @@ import { Component, ViewChild, OnInit, Inject } from '@angular/core';
 
 import {
     IgxGridComponent, SortingDirection, ISortingExpression,
-    DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode, IRowSelectionEventArgs, ISortingOptions
+    DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode, IRowSelectionEventArgs, ISortingOptions, GroupMemberCountSortingStrategy
 } from 'igniteui-angular';
 
 @Component({
@@ -22,12 +22,12 @@ export class GridGroupBySampleComponent implements OnInit {
     public expState = [];
     public columns: Array<any>;
     public groupingExpressions: Array<ISortingExpression>;
-    public perfGrpExpr = [ { fieldName: 'FIELD', dir: SortingDirection.Asc } ];
+    public perfGrpExpr = [{ fieldName: 'FIELD', dir: SortingDirection.Asc }];
     public summaryMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootLevelOnly;
     public summaryModes = [];
     public selectionModes: any[];
     public position: GridSummaryPosition = GridSummaryPosition.top;
-    public sortingOp: ISortingOptions = {mode: 'multiple'};
+    public sortingOp: ISortingOptions = { mode: 'multiple' };
 
     private _density: DisplayDensity = DisplayDensity.cosy;
 
@@ -40,7 +40,7 @@ export class GridGroupBySampleComponent implements OnInit {
             this.data2.push(...Array(10).fill({ STATUS: 'C', FIELD: 'some text' }));
             this.data2.push(...Array(10).fill({ STATUS: 'D', FIELD: 'some text' }));
         }
-        this.data2 = this.data2.map((rec, index) => ({...rec, ID: index}));
+        this.data2 = this.data2.map((rec, index) => ({ ...rec, ID: index }));
         this.columns = [
             { dataType: 'string', field: 'ID', width: 100, hidden: true },
             { dataType: 'string', field: 'CompanyName', width: 300, groupable: true },
@@ -112,6 +112,15 @@ export class GridGroupBySampleComponent implements OnInit {
         this.grid1.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() });
     }
 
+    public sortByGroup() {
+        const expressions = this.grid1.groupingExpressions;
+        if (expressions.length) {
+            const fieldName = expressions[0].fieldName;
+            const dir = expressions[0].dir === SortingDirection.Asc ? SortingDirection.Desc : SortingDirection.Asc;
+            this.grid1.groupBy({ fieldName, dir, ignoreCase: false, strategy: GroupMemberCountSortingStrategy.instance() });
+        }
+    }
+
     public toggleGroupedVisibility(event) {
         this.grid1.hideGroupedColumns = !event.checked;
     }
@@ -179,4 +188,4 @@ export class GridGroupBySampleComponent implements OnInit {
     public rowSelectionChanged(e: IRowSelectionEventArgs) {
         console.log(e);
     }
-}
+}