feat(*): Finish pivot cell formatting

Author: mddragnev

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

@@ -263,8 +263,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 ref.instance.field = key;
                 ref.instance.parent = parent;
-                ref.instance.dataType = this.extractDataType();
-                ref.instance.formatter = this.pivotConfiguration.values[0].formatter;
                 ref.changeDetectorRef.detectChanges();
 
                 const measureChildren = this.getMeasureChildren(factoryColumn, data , ref.instance, false);
@@ -296,18 +294,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return columns;
     }
 
-    private extractDataType(): GridColumnDataType {
-        switch(this.pivotConfiguration.values[0].dataType) {
-            case 'number': return GridColumnDataType.Number;
-            case 'currency': return GridColumnDataType.Currency;
-            case 'boolean': return GridColumnDataType.Boolean;
-            case 'date': return GridColumnDataType.Date;
-            case 'dateTime': return GridColumnDataType.DateTime;
-            case 'percent': return GridColumnDataType.Percent;
-            case 'time': return GridColumnDataType.Time;
-            default: return GridColumnDataType.String;
-        }
-    }
     protected getMeasureChildren(colFactory, data, parent, hidden) {
         const cols = [];
         this.pivotConfiguration.values.forEach(val => {
@@ -316,12 +302,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             ref.instance.field = parent.field + '-' + val.member;
             ref.instance.parent = parent;
             ref.instance.hidden = hidden;
-            ref.instance.dataType = this.resolveDataTypes(data[0][val.member]);
+            ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
+            ref.instance.formatter = val.formatter;
             ref.changeDetectorRef.detectChanges();
             cols.push(ref.instance);
         });
         return cols;
     }
-
-
 }

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

@@ -25,7 +25,7 @@
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
-            [ngClass]="this.grid.pivotConfiguration.values[0].styles | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
+            [ngClass]="this.getCellClass(col) | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
             [column]="col"

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

@@ -66,6 +66,16 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.grid.gridAPI.get_row_expansion_state(this.rowDimensionKey);
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public getCellClass(col: any) {
+        const colName = col.field.split('-');
+        const measureName = colName[colName.length - 1];
+        return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;
+    }
+
     public ngOnInit() {
         // generate rowDimension
         const rowDimConfig = this.grid.pivotConfiguration.rows;

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

@@ -10,6 +10,14 @@
             color:red;
         }
 
+        .upFont1 {
+            color: blue;
+        }
+
+        .downFont1 {
+            color:yellow;
+        }
+
         .sample-column {
             max-width: 900px;
         }

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

@@ -59,7 +59,6 @@ export class PivotGridSampleComponent {
                     ]
             }]
         },
-
         {
             member: 'ProductCategory',
             enabled: true,
@@ -98,7 +97,16 @@ export class PivotGridSampleComponent {
             {
                 member: 'UnitPrice',
                 aggregate: IgxNumberSummaryOperand.sum,
-                enabled: true
+                enabled: true,
+                dataType: 'currency',
+                styles: {
+                    upFont1: (rowData:any, columnKey:any): boolean => {
+                        return rowData[columnKey] > 150;
+                    },
+                    downFont1: (rowData:any, columnKey:any): boolean => {
+                        return rowData[columnKey] <= 150;
+                    }
+                },
             }
         ],
         filters: null