feat(pivot-aggr): adding default aggregates

ChronosSF · ChronosSF · commit 0c1075323e7e · 2021-10-29T18:25:25.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-aggregate.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-aggregate.ts
@@ -0,0 +1,127 @@
+import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxTimeSummaryOperand } from '../summaries/grid-summary';
+
+
+export class IgxPivotAggregate {
+    /**
+     * Counts all the records in the data source.
+     * If filtering is applied, counts only the filtered records.
+     * ```typescript
+     * IgxSummaryOperand.count(dataSource);
+     * ```
+     *
+     * @memberof IgxPivotAggregate
+     */
+    public static count(members: number[]): number {
+        return members.length;
+    }
+}
+
+export class IgxPivotNumericAggregate extends IgxPivotAggregate {
+    /**
+     * Returns the minimum numeric value in the provided data records.
+     * If filtering is applied, returns the minimum value in the filtered data records.
+     * ```typescript
+     * IgxPivotNumericAggregate.min(members, data);
+     * ```
+     *
+     * @memberof IgxPivotNumericAggregate
+     */
+    public static min(members: number[]): number {
+        return IgxNumberSummaryOperand.min(members);
+    }
+
+    /**
+     * Returns the maximum numeric value in the provided data records.
+     * If filtering is applied, returns the maximum value in the filtered data records.
+     * ```typescript
+     * IgxPivotNumericAggregate.max(data);
+     * ```
+     *
+     * @memberof IgxPivotNumericAggregate
+     */
+    public static max(members: number[]): number {
+        return IgxNumberSummaryOperand.max(members);
+    }
+
+    /**
+     * Returns the sum of the numeric values in the provided data records.
+     * If filtering is applied, returns the sum of the numeric values in the data records.
+     * ```typescript
+     * IgxPivotNumericAggregate.sum(data);
+     * ```
+     *
+     * @memberof IgxPivotNumericAggregate
+     */
+    public static sum(members: number[]): number {
+        return IgxNumberSummaryOperand.sum(members);
+    }
+
+    /**
+     * Returns the average numeric value in the data provided data records.
+     * If filtering is applied, returns the average numeric value in the filtered data records.
+     * ```typescript
+     * IgxPivotNumericAggregate.average(data);
+     * ```
+     *
+     * @memberof IgxPivotNumericAggregate
+     */
+    public static average(members: number[]): number {
+        return IgxNumberSummaryOperand.average(members);
+    }
+}
+
+export class IgxPivotDateAggregate extends IgxPivotAggregate {
+    /**
+     * Returns the latest date value in the data records.
+     * If filtering is applied, returns the latest date value in the filtered data records.
+     * ```typescript
+     * IgxPivotDateAggregate.latest(data);
+     * ```
+     *
+     * @memberof IgxPivotDateAggregate
+     */
+    public static latest(members: number[]) {
+        return IgxDateSummaryOperand.latest(members);
+    }
+
+    /**
+     * Returns the earliest date value in the data records.
+     * If filtering is applied, returns the latest date value in the filtered data records.
+     * ```typescript
+     * IgxPivotDateAggregate.earliest(data);
+     * ```
+     *
+     * @memberof IgxPivotDateAggregate
+     */
+    public static earliest(members: number[]) {
+        return IgxDateSummaryOperand.earliest(members);
+    }
+}
+
+export class IgxPivotTimeAggregate extends IgxPivotAggregate {
+    /**
+     * Returns the latest time value in the data records. Compare only the time part of the date.
+     * If filtering is applied, returns the latest time value in the filtered data records.
+     * ```typescript
+     * IgxPivotTimeAggregate.latestTime(data);
+     * ```
+     *
+     * @memberof IgxPivotTimeAggregate
+     */
+    public static latestTime(members: number[]) {
+        return IgxTimeSummaryOperand.latestTime(members);
+    }
+
+    /**
+     * Returns the earliest time value in the data records. Compare only the time part of the date.
+     * If filtering is applied, returns the earliest time value in the filtered data records.
+     * ```typescript
+     * IgxPivotTimeAggregate.earliestTime(data);
+     * ```
+     *
+     * @memberof IgxPivotTimeAggregate
+     */
+    public static earliestTime(members: number[]) {
+        return IgxTimeSummaryOperand.earliestTime(members);
+    }
+}
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
@@ -100,11 +100,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * @hidden
      */
     public ngAfterContentInit() {
-            // ignore any user defined columns and auto-generate based on pivot config.
-            this.columnList.reset([]);
-            Promise.resolve().then(() => {
-                this.setupColumns();
-            });
+        // ignore any user defined columns and auto-generate based on pivot config.
+        this.columnList.reset([]);
+        Promise.resolve().then(() => {
+            this.setupColumns();
+        });
     }
 
     /** @hidden */
@@ -205,18 +205,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return MINIMUM_COLUMN_WIDTH * rowDimCount;
     }
 
-   public toggleColumn(col: IgxColumnComponent) {
-       const state = this.columnGroupStates.get(col.field);
-       const newState = !state;
-       this.columnGroupStates.set(col.field, newState);
-       this.toggleGroup(col, newState);
-       this.reflow();
-   }
+    public toggleColumn(col: IgxColumnComponent) {
+        const state = this.columnGroupStates.get(col.field);
+        const newState = !state;
+        this.columnGroupStates.set(col.field, newState);
+        this.toggleGroup(col, newState);
+        this.reflow();
+    }
 
-   protected toggleGroup(col: IgxColumnComponent, newState: boolean) {
+    protected toggleGroup(col: IgxColumnComponent, newState: boolean) {
         if (this.hasMultipleValues) {
-            const fieldColumns =  col.children.filter(x => !x.columnGroup);
-            const groupColumns =  col.children.filter(x => x.columnGroup);
+            const fieldColumns = col.children.filter(x => !x.columnGroup);
+            const groupColumns = col.children.filter(x => x.columnGroup);
             groupColumns.forEach(groupColumn => {
                 groupColumn.hidden = newState;
                 this.resolveToggle(groupColumn);
@@ -226,23 +226,23 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             });
         } else {
             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];
+            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;
             this.resolveToggle(groupColumn);
             fieldColumn.hidden = !newState;
             if (newState) {
-            fieldColumn.headerTemplate = this.headerTemplate;
+                fieldColumn.headerTemplate = this.headerTemplate;
             } else {
-            fieldColumn.headerTemplate = undefined;
+                fieldColumn.headerTemplate = undefined;
             }
         }
-   }
+    }
 
-   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);
+    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);
@@ -273,8 +273,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             data,
             this.pivotConfiguration.columns,
             PivotDimensionType.Column,
-            {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
-            );
+            { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
+        );
         const columns = this.generateColumnHierarchy(fieldsMap, data);
         this._autoGeneratedCols = columns;
 
@@ -291,15 +291,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         fields.forEach((value, key) => {
             if (value.children == null || value.children.length === 0 || value.children.size === 0) {
                 const ref = this.hasMultipleValues ?
-                factoryColumnGroup.create(this.viewRef.injector) :
-                factoryColumn.create(this.viewRef.injector);
+                    factoryColumnGroup.create(this.viewRef.injector) :
+                    factoryColumn.create(this.viewRef.injector);
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 ref.instance.field = key;
                 ref.instance.parent = parent;
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
-                    const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, false);
+                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false);
                     ref.instance.children.reset(measureChildren);
                     columns = columns.concat(measureChildren);
                 }
@@ -312,7 +312,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 if (value.expandable) {
                     ref.instance.headerTemplate = this.headerTemplate;
                 }
-                if(!this.hasMultipleValues) {
+                if (!this.hasMultipleValues) {
                     const refSibling = factoryColumn.create(this.viewRef.injector);
                     refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                     refSibling.instance.field = key;
@@ -326,7 +326,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
-                    const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, true);
+                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true);
                     const nestedChildren = filteredChildren.concat(measureChildren);
                     const allChildren = children.concat(measureChildren);
                     ref.instance.children.reset(nestedChildren);
@@ -345,7 +345,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const cols = [];
         this.pivotConfiguration.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
-            ref.instance.header = val.member;
+            ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + '-' + val.member;
             ref.instance.parent = parent;
             ref.instance.hidden = hidden;
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
@@ -1,5 +1,8 @@
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 
+
+export type PivotAggregation = (members: any[], data: any[]) => any;
+
 export interface IPivotConfiguration {
     rows: IPivotDimension[] | null;
     columns: IPivotDimension[] | null;
@@ -21,8 +24,10 @@ export interface IPivotDimension {
 
 export interface IPivotValue {
     member: string;
+    // display name if present shows instead of member for the column header of this value
+    displayName?: string;
     // aggregate function - can use one of the predefined like IgxNumberSummaryOperand.sum etc.
-    aggregate: (data: any[]) => any;
+    aggregate: PivotAggregation;
     // Enables/Disables a particular value from pivot aggregation.
     enabled: boolean;
     // Allow conditionally styling of the IgxPivotGrid cells
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts
@@ -101,7 +101,7 @@ export class PivotUtil {
     public static aggregate(records, values: IPivotValue[]) {
         const result = {};
         for (const pivotValue of values) {
-            result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]));
+            result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]), records);
         }
 
         return result;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts
@@ -1,3 +1,4 @@
 export * from './pivot-grid.component';
 export * from './pivot-grid.interface';
+export * from './pivot-grid-aggregate';
 export * from './pivot-grid.module';
diff --git a/src/app/pivot-grid/pivot-grid.sample.html b/src/app/pivot-grid/pivot-grid.sample.html
@@ -1,4 +1,4 @@
 <div class="sample-column">
-    <igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
+    <igx-pivot-grid #grid1 [width]="'1500px'" [height]="'100%'" [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
     </igx-pivot-grid>
 </div>
diff --git a/src/app/pivot-grid/pivot-grid.sample.scss b/src/app/pivot-grid/pivot-grid.sample.scss
@@ -1,18 +1,18 @@
 :host ::ng-deep {
     .upFont {
-        color: green;
+        color: lightgreen;
     }
 
     .downFont {
-        color:red;
+        color: lightcoral;
     }
 
     .upFont1 {
-        color: blue;
+        color: skyblue;
     }
 
     .downFont1 {
-        color:yellow;
+        color: yellow;
     }
 
     .sample-column {
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -1,14 +1,23 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxNumberSummaryOperand, IgxPivotGridComponent, IPivotConfiguration } from 'igniteui-angular';
+import {
+    IgxPivotNumericAggregate,
+    IgxPivotGridComponent,
+    IPivotConfiguration,
+    PivotAggregation
+} from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
+export class IgxTotalSaleAggregate {
+    public static totalSale: PivotAggregation = (members, data: any) =>
+        data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0) ;
+}
+
 @Component({
     providers: [],
     selector: 'app-tree-grid-sample',
     styleUrls: ['pivot-grid.sample.scss'],
     templateUrl: 'pivot-grid.sample.html'
 })
-
 export class PivotGridSampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
 
@@ -36,7 +45,7 @@ export class PivotGridSampleComponent {
         values: [
             {
                 member: 'UnitsSold',
-                aggregate: IgxNumberSummaryOperand.sum,
+                aggregate: IgxPivotNumericAggregate.sum,
                 enabled: true
             }
         ],
@@ -83,7 +92,7 @@ export class PivotGridSampleComponent {
         values: [
             {
                 member: 'UnitsSold',
-                aggregate: IgxNumberSummaryOperand.sum,
+                aggregate: IgxPivotNumericAggregate.sum,
                 enabled: true,
                 styles: {
                     upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
@@ -93,8 +102,9 @@ export class PivotGridSampleComponent {
                 formatter: (value) => value ? value + '$' : undefined
             },
             {
-                member: 'UnitPrice',
-                aggregate: IgxNumberSummaryOperand.sum,
+                member: 'AmountOfSale',
+                displayName: 'Amount of Sale',
+                aggregate: IgxTotalSaleAggregate.totalSale,
                 enabled: true,
                 dataType: 'currency',
                 styles: {

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export class PivotUtil {`
`101`	`101`	`public static aggregate(records, values: IPivotValue[]) {`
`102`	`102`	`const result = {};`
`103`	`103`	`for (const pivotValue of values) {`
`104`		`- result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]));`
	`104`	`+ result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]), records);`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`return result;`
Original file line number	Diff line number	Diff line change
`@@ -1,18 +1,18 @@`
`1`	`1`	`:host ::ng-deep {`
`2`	`2`	`.upFont {`
`3`		`- color: green;`
	`3`	`+ color: lightgreen;`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.downFont {`
`7`		`- color:red;`
	`7`	`+ color: lightcoral;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.upFont1 {`
`11`		`- color: blue;`
	`11`	`+ color: skyblue;`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.downFont1 {`
`15`		`- color:yellow;`
	`15`	`+ color: yellow;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.sample-column {`