Merge branch 'master' into mdragnev/refactor-density

Author: dkamburov

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

@@ -144,6 +144,7 @@ export class IgxPivotDateDimension implements IPivotDimension {
     constructor(inBaseDimension: IPivotDimension, inOptions: IPivotDateDimensionOptions = {}) {
         this._baseDimension = inBaseDimension;
         this._options = inOptions;
+        this.enabled = inBaseDimension.enabled;
         if (this.baseDimension && this.options) {
             this.initialize(this.baseDimension, this.options);
         }

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

@@ -99,6 +99,7 @@ import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
+import { IgxPivotDateDimension } from './pivot-grid-dimensions';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -328,6 +329,19 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this._pivotConfiguration || { rows: null, columns: null, values: null, filters: null };
     }
 
+    /**
+     * Gets/Sets whether to auto-generate the pivot configuration based on the provided data.
+     *
+     * @remarks
+     * The default value is false. When set to true, it will override all dimensions and values in the pivotConfiguration.
+     * @example
+     * ```html
+     * <igx-pivot-grid [data]="Data" [autoGenerateConfig]="true"></igx-pivot-grid>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    public autoGenerateConfig = false;
+
     @Input()
     /**
      * Gets/Sets the pivot ui settings for the pivot grid - chips and their
@@ -1001,6 +1015,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         // ignore any user defined columns and auto-generate based on pivot config.
         this.updateColumns([]);
         Promise.resolve().then(() => {
+            if (this.autoGenerateConfig) {
+                this.generateConfig();
+            }
             this.setupColumns();
         });
         if (this.valueChipTemplateDirective) {
@@ -1093,6 +1110,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public set data(value: any[] | null) {
         this._data = value || [];
         if (!this._init) {
+            if (this.autoGenerateConfig) {
+                this.generateConfig();
+            }
             this.setupColumns();
             this.reflow();
         }
@@ -2169,6 +2189,67 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return columns;
     }
 
+
+    protected generateConfig() {
+        if (!this.data) return;
+
+        const data = this.data;
+        const fields = this.generateDataFields(data);
+        const columnDimensions: IPivotDimension[] = [];
+        const rowDimensions: IPivotDimension[] = [];
+        const values: IPivotValue[] = [];
+        let isFirstDate = true;
+        fields.forEach((field) => {
+            const dataType = this.resolveDataTypes(data[0][field]);
+            switch (dataType) {
+                case "number":
+                    {
+                        const value: IPivotValue = {
+                            member: field,
+                            displayName: field,
+                            dataType: dataType,
+                            aggregate: {
+                                key: 'sum',
+                                label: 'Sum',
+                                aggregatorName: "SUM"
+                            },
+                            enabled: true
+                        };
+                        values.push(value);
+                        break;
+                }
+            case "date":
+            {
+                const dimension: IPivotDimension = new IgxPivotDateDimension(
+                    {
+                        memberName: field,
+                        enabled: isFirstDate,
+                        dataType: dataType
+                    }
+                )
+                rowDimensions.push(dimension);
+                isFirstDate = false;
+                break;
+            }
+                default: {
+                    const dimension: IPivotDimension = {
+                        memberName: field,
+                        enabled: false,
+                        dataType: dataType
+                    };
+                    columnDimensions.push(dimension);
+                    break;
+                }
+            }
+        });
+        const config: IPivotConfiguration = {
+            columns: columnDimensions,
+            rows: rowDimensions,
+            values: values
+        };
+        this.pivotConfiguration = config;
+    }
+
     protected createColumnForDimension(value: any, data: any, parent: ColumnType, isGroup: boolean) {
         const key = value.value;
         const ref = isGroup ?

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

@@ -1978,6 +1978,36 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 expect(rowDimension.width).toBe('auto');
                 expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158);
             });
+
+            it ('should auto-generate pivot config when autoGenerateConfig is set to true.', () => {
+                const pivotGrid = fixture.componentInstance.pivotGrid;
+                pivotGrid.pivotConfiguration = undefined;
+                pivotGrid.data = [];
+                fixture.detectChanges();
+
+                expect(pivotGrid.pivotConfiguration).toEqual({ rows: null, columns: null, values: null, filters: null });
+                pivotGrid.autoGenerateConfig = true;
+                fixture.detectChanges();
+                expect(pivotGrid.pivotConfiguration).toEqual({ rows: null, columns: null, values: null, filters: null });
+
+                pivotGrid.data = [{
+                    ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley',
+                    Country: 'Bulgaria', Date: new Date('01/01/2021'), UnitsSold: 282
+                }];
+                fixture.detectChanges();
+
+                expect(pivotGrid.allDimensions.length).toEqual(4);
+                // only date is row dimension and is enabled by default
+                expect(pivotGrid.pivotConfiguration.rows.map(x => x.memberName)).toEqual(['AllPeriods']);
+                expect(pivotGrid.pivotConfiguration.rows.map(x => x.enabled)).toEqual([true]);
+                // all other are disabled column dimensions.
+                expect(pivotGrid.pivotConfiguration.columns.map(x => x.memberName)).toEqual(['ProductCategory', 'SellerName', 'Country']);
+                expect(pivotGrid.pivotConfiguration.columns.map(x => x.enabled)).toEqual([false, false, false]);
+                // values are all enabled.
+                expect(pivotGrid.values.length).toEqual(2);
+                expect(pivotGrid.values.map(x => x.member)).toEqual(['UnitPrice', 'UnitsSold']);
+                expect(pivotGrid.values.map(x => x.enabled)).toEqual([true, true]);
+            });
         });
     });
 

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

@@ -68,8 +68,7 @@
             [superCompactMode]="size === 'superCompact'"
             [defaultExpandState]="true"
             [rowSelection]="'single'"
-            [pivotConfiguration]="pivotConfigHierarchy"
-            (dimensionsChange)="dimensionChange()"
+            [autoGenerateConfig]="true"
         >
         <ng-template igxPivotValueChip let-value>
             {{ value.displayName }}