Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/row-dimensions

mddragnev · mddragnev · commit 598dac64710c · 2021-11-01T19:01:38.000+02: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
@@ -82,7 +82,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
 
     public columnGroupStates = new Map<string, boolean>();
-    public pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'};
+    public pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' };
     public isPivot = true;
     protected _defaultExpandState = true;
     private _data;
@@ -102,11 +102,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 */
@@ -207,18 +207,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);
@@ -228,23 +228,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);
@@ -269,26 +269,26 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden
      */
-     protected autogenerateColumns() {
-         let columns = [];
-         const data = this.gridAPI.get_data();
-         let fieldsMap;
-         if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
+    protected autogenerateColumns() {
+        let columns = [];
+        const data = this.gridAPI.get_data();
+        let fieldsMap;
+        if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
             const fields = this.generateDataFields(data);
             const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.memberName);
             const keyFields = Object.values(this.pivotKeys);
             const filteredFields = fields.filter(x => rowFields.indexOf(x) === -1 && keyFields.indexOf(x) === -1 &&
-             x.indexOf('_level') === -1 && x.indexOf('_records') === -1);
+                x.indexOf('_level') === -1 && x.indexOf('_records') === -1);
             fieldsMap = this.generateFromData(filteredFields);
-         } else {
+        } else {
             fieldsMap = PivotUtil.getFieldsHierarchy(
-            data,
-            this.pivotConfiguration.columns,
-            PivotDimensionType.Column,
-            {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
+                data,
+                this.pivotConfiguration.columns,
+                PivotDimensionType.Column,
+                { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
             );
-         }
-         columns = this.generateColumnHierarchy(fieldsMap, data);
+        }
+        columns = this.generateColumnHierarchy(fieldsMap, data);
         this._autoGeneratedCols = columns;
 
         this.columnList.reset(columns);
@@ -303,11 +303,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         dataArr.forEach(arr => {
             let currentHierarchy = hierarchy;
             const path = [];
-            for(const val of arr) {
+            for (const val of arr) {
                 path.push(val);
                 let h = currentHierarchy.get(path.join('-'));
-                if(!h) {
-                    currentHierarchy.set(path.join('-'), { expandable: true, children: new Map<string, any>()});
+                if (!h) {
+                    currentHierarchy.set(path.join('-'), { expandable: true, children: new Map<string, any>() });
                     h = currentHierarchy.get(path.join('-'));
                 }
                 currentHierarchy = h.children;
@@ -316,22 +316,22 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return hierarchy;
     }
 
-    protected generateColumnHierarchy(fields:  Map<string, any>, data, parent = null): IgxColumnComponent[] {
+    protected generateColumnHierarchy(fields: Map<string, any>, data, parent = null): IgxColumnComponent[] {
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
         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);
                 }
@@ -344,7 +344,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;
@@ -358,7 +358,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);
@@ -377,7 +377,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
@@ -2,6 +2,9 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
 import { IPivotDimensionStrategy } from '../../data-operations/pivot-strategy';
 
 
+
+export type PivotAggregation = (members: any[], data: any[]) => any;
+
 export interface IPivotConfiguration {
     rowStrategy?: IPivotDimensionStrategy | null;
     columnStrategy?: IPivotDimensionStrategy | null;
@@ -25,8 +28,13 @@ export interface IPivotDimension {
 
 export interface IPivotValue {
     member: string;
-    // aggregate function - can use one of the predefined like IgxNumberSummaryOperand.sum etc.
-    aggregate: (data: any[]) => any;
+    // display name if present shows instead of member for the column header of this value
+    displayName?: string;
+    /**
+     * Aggregation function - can be a custom implementation of PivotAggregation or
+     * use predefined ones from IgxPivotAggregate and its variants
+     */
+    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
@@ -188,7 +188,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" [width]= '"1200px"' [pivotConfiguration]="pivotConfigHierarchy">
+    <igx-pivot-grid #grid1 [data]="origData" [width]="'1200px'" [height]="'100%'" [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

Original file line number	Diff line number	Diff line change
`@@ -188,7 +188,7 @@ export class PivotUtil {`
`188`	`188`	`public static aggregate(records, values: IPivotValue[]) {`
`189`	`189`	`const result = {};`
`190`	`190`	`for (const pivotValue of values) {`
`191`		`- result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]));`
	`191`	`+ result[pivotValue.member] = pivotValue.aggregate(records.map(r => r[pivotValue.member]), records);`
`192`	`192`	`}`
`193`	`193`
`194`	`194`	`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 {`