Show aggregate label in chip as well.

Author: MKirova

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

@@ -14,7 +14,7 @@ export class IgxPivotAggregate {
     public static aggregators() {
         return [{
             key: 'count',
-            label: 'Count',
+            label: 'COUNT',
             aggregator: IgxPivotAggregate.count
         }];
     }
@@ -47,24 +47,24 @@ export class IgxPivotNumericAggregate extends IgxPivotAggregate {
         result = result.concat(super.aggregators());
         result.push({
             key: 'min',
-            label: 'Min',
+            label: 'MIN',
             aggregator: IgxPivotNumericAggregate.min
         });
         result.push({
             key: 'max',
-            label: 'Max',
+            label: 'MAX',
             aggregator: IgxPivotNumericAggregate.max
         });
 
         result.push({
             key: 'sum',
-            label: 'Sum',
+            label: 'SUM',
             aggregator: IgxPivotNumericAggregate.sum
         });
 
         result.push({
             key: 'average',
-            label: 'Avg',
+            label: 'AVG',
             aggregator: IgxPivotNumericAggregate.average
         });
         return result;
@@ -137,12 +137,12 @@ export class IgxPivotDateAggregate extends IgxPivotAggregate {
         result = result.concat(super.aggregators());
         result.push({
             key: 'latest',
-            label: 'Latest',
+            label: 'LATEST',
             aggregator: IgxPivotDateAggregate.latest
         });
         result.push({
             key: 'earliest',
-            label: 'Earliest',
+            label: 'EARLIEST',
             aggregator: IgxPivotDateAggregate.earliest
         });
         return result;
@@ -188,12 +188,12 @@ export class IgxPivotTimeAggregate extends IgxPivotAggregate {
         result = result.concat(super.aggregators());
         result.push({
             key: 'latestTime',
-            label: 'Latest Time',
+            label: 'LATEST',
             aggregator: IgxPivotTimeAggregate.latestTime
         });
         result.push({
             key: 'earliestTime',
-            label: 'Earliest Time',
+            label: 'EARLIEST',
             aggregator: IgxPivotTimeAggregate.earliestTime
         });
         return result;

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

@@ -43,7 +43,7 @@ export interface IPivotValue {
      * Aggregation function - can be a custom implementation of PivotAggregation or
      * use predefined ones from IgxPivotAggregate and its variants
      */
-    aggregate: PivotAggregation;
+    aggregate: IPivotAggregator;
     /**
      * List of aggregates to show in aggregate drop-down.
      */

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

@@ -60,7 +60,7 @@
                             <igx-icon>functions</igx-icon>
                             <igx-icon>arrow_drop_down</igx-icon>
                          </div>
-                        {{value.displayName || value.member}}
+                        {{value.aggregate.label}}({{value.displayName || value.member}})
                     </igx-chip>
                 </igx-chips-area>
             </div>

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

@@ -78,24 +78,16 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
                 return val.aggregateList;
             }
             let defaultAggr = this.getAggregatorsForValue(val);
-            const isDefault = defaultAggr.find(x => x.aggregator.name === val.aggregate.name);
+            const isDefault = defaultAggr.find(x => x.aggregator.name === val.aggregate.key);
             // resolve custom aggregations
-            if(!isDefault && this.grid.data[0][val.member] !== undefined) {
+            if (!isDefault && this.grid.data[0][val.member] !== undefined) {
                 // if field exists, then we can apply default aggregations and add the custom one.
-                defaultAggr.unshift({
-                    key: 'custom',
-                    label: 'Custom',
-                    aggregator: val.aggregate
-                });
-            } else if(!isDefault) {
+                defaultAggr.unshift(val.aggregate);
+            } else if (!isDefault) {
                 // otherwise this is a custom aggregation that is not compatible
                 // with the defaults, since it operates on field that is not in the data
                 // leave only the custom one.
-                defaultAggr = [{
-                    key: 'custom',
-                    label: val.displayName || 'Custom',
-                    aggregator: val.aggregate
-                }];
+                defaultAggr = [val.aggregate];
             }
             return defaultAggr;
         }
@@ -140,13 +132,13 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
 
     public onAggregationChange(event: ISelectionEventArgs) {
         if (!this.isSelected(event.newSelection.value)) {
-            this.value.aggregate = event.newSelection.value.aggregator;
+            this.value.aggregate = event.newSelection.value;
             this.grid.pipeTrigger++;
         }
     }
 
     public isSelected(val: IPivotAggregator) {
-        return this.value.aggregate === val.aggregator;
+        return this.value.aggregate.key === val.key;
     }
 
     public onDimDragOver(event, dimension?: PivotDimensionType) {

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

@@ -195,7 +195,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]), records);
+            result[pivotValue.member] = pivotValue.aggregate.aggregator(records.map(r => r[pivotValue.member]), records);
         }
 
         return result;

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

@@ -47,12 +47,20 @@ export class PivotGridHierarchySampleComponent {
         values: [
             {
                 member: 'NumberOfUnits',
-                aggregate: IgxNumberSummaryOperand.sum,
+                aggregate: {
+                    aggregator:  IgxNumberSummaryOperand.sum,
+                    key: 'sum',
+                    label: 'Sum'
+                },
                 enabled: true
 
             }, {
                 member: 'Value',
-                aggregate: IgxNumberSummaryOperand.sum,
+                aggregate: {
+                    aggregator:  IgxNumberSummaryOperand.sum,
+                    key: 'sum',
+                    label: 'Sum'
+                },
                 enabled: true,
                 formatter: (val) => val ? parseFloat(val).toFixed(2) : undefined
             }

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

@@ -54,7 +54,11 @@ export class PivotGridNoopSampleComponent {
         values: [
             {
                 member: 'UnitsSold',
-                aggregate: IgxNumberSummaryOperand.sum,
+                aggregate: {
+                    aggregator:  IgxNumberSummaryOperand.sum,
+                    key: 'sum',
+                    label: 'Sum'
+                },
                 enabled: true
             },
         ],

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

@@ -82,7 +82,11 @@ export class PivotGridSampleComponent {
         values: [
             {
                 member: 'UnitsSold',
-                aggregate: IgxPivotNumericAggregate.sum,
+                aggregate: {
+                    key: 'sum',
+                    aggregator: IgxPivotNumericAggregate.sum,
+                    label: 'SUM'
+                 },
                 enabled: true,
                 styles: {
                     upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
@@ -94,19 +98,23 @@ export class PivotGridSampleComponent {
             {
                 member: 'AmountOfSale',
                 displayName: 'Amount of Sale',
-                aggregate: IgxTotalSaleAggregate.totalSale,
+                aggregate: {
+                    key: 'sum',
+                    aggregator: IgxTotalSaleAggregate.totalSale,
+                    label: 'SUM Sale'
+                },
                 aggregateList: [{
                     key: 'sum',
                     aggregator: IgxTotalSaleAggregate.totalSale,
-                    label: 'Sum Sale'
+                    label: 'SUM Sale'
                 },{
                     key: 'min',
                     aggregator: IgxTotalSaleAggregate.totalMin,
-                    label: 'Min Sale'
+                    label: 'MIN Sale'
                 },{
                     key: 'max',
                     aggregator: IgxTotalSaleAggregate.totalMax,
-                    label: 'Max Sale'
+                    label: 'MAX Sale'
                 }],
                 enabled: true,
                 dataType: 'currency',