feat(pivot-grid): export to excel (#12130)

* feat(pivot-grid): add pivot grid to prepare data

* feat(pivot-grid-export): fixed owners map and data

* feat(excel-exporter): prepare pivot grid columns correctly

* feat(excel-exporter): add pivotGridRowHeader

* feat(excel-exporter): export pivot grid with more than 1 filter

* feat(excel-exporter): minor refactoring + styles added

* feat(excel-exporter): export currency columns

* chore(*): fix build and export when no row dim

* chore(*): fix styles file expected string

* chore(*): updated changelog

* chore(*): push pivot grid export tests

* chore(*): fixed pivot exporter tests

Co-authored-by: Deyan Kamburov <[email protected]>
Co-authored-by: IBarakov <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -19,6 +19,9 @@ All notable changes for each version of this project will be documented in this
 
     - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/query-builder/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Query-Builder) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder).
 
+- `IgxExcelExporterService`
+    - Added support for exporting `igxPivotGrid`.
+
 ### General
 
 - **Breaking Changes** - The Excel exporter service `exportEnded` event has its `xlsx` argument type changed as `igniteui-angular` no longer depends on `JSZip`. Instead of providing a `JSZip` instance it is now an object describing the structure of the Excel file with property names corresponding to folders or files, folders being objects themselves that can be traversed down, while files have their contents as `Uint8Array`. The same structure is used to package as a zip file by `fflate`'s API.

projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts

@@ -41,6 +41,8 @@ import { IgxHierarchicalGridModule,
 } from '../../grids/hierarchical-grid/public_api';
 import { IgxHierarchicalRowComponent } from '../../grids/hierarchical-grid/hierarchical-row.component';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
+import { IgxPivotGridMultipleRowComponent, IgxPivotGridTestComplexHierarchyComponent } from '../../test-utils/pivot-grid-samples.spec';
+import { IgxPivotGridComponent, IgxPivotGridModule } from '../../grids/pivot-grid/public_api';
 
 describe('Excel Exporter', () => {
     configureTestSuite();
@@ -64,9 +66,11 @@ describe('Excel Exporter', () => {
                 IgxHierarchicalGridMultiColumnHeadersExportComponent,
                 ColumnsAddedOnInitComponent,
                 IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent,
-                GridWithThreeLevelsOfMultiColumnHeadersAndTwoRowsExportComponent
+                GridWithThreeLevelsOfMultiColumnHeadersAndTwoRowsExportComponent,
+                IgxPivotGridMultipleRowComponent,
+                IgxPivotGridTestComplexHierarchyComponent
             ],
-            imports: [IgxGridModule, IgxTreeGridModule, IgxHierarchicalGridModule, NoopAnimationsModule]
+            imports: [IgxGridModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxPivotGridModule, NoopAnimationsModule]
         }).compileComponents();
     }));
 
@@ -1207,6 +1211,35 @@ describe('Excel Exporter', () => {
         });
     });
 
+    describe('', () => {
+        let fix;
+        let grid: IgxPivotGridComponent;
+
+        beforeEach(waitForAsync(() => {
+            options = createExportOptions('PivotGridGridExcelExport');
+        }));
+
+        it('should export pivot grid', async () => {
+            fix = TestBed.createComponent(IgxPivotGridMultipleRowComponent);
+            fix.detectChanges();
+            await wait(300);
+
+            grid = fix.componentInstance.pivotGrid;
+
+            await exportAndVerify(grid, options, actualData.exportPivotGridData, false);
+        });
+
+        it('should export hierarchical pivot grid', async () => {
+            fix = TestBed.createComponent(IgxPivotGridTestComplexHierarchyComponent);
+            fix.detectChanges();
+            await wait(300);
+
+            grid = fix.componentInstance.pivotGrid;
+
+            await exportAndVerify(grid, options, actualData.exportPivotGridHierarchicalData, false);
+        });
+    });
+
     const getExportedData = (grid, exportOptions: IgxExcelExporterOptions) => {
         const exportData = new Promise<ZipWrapper>((resolve) => {
             exporter.exportEnded.pipe(first()).subscribe((value) => {

projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts

@@ -76,6 +76,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
     protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions, done: () => void): void {
         const firstDataElement = data[0];
         const isHierarchicalGrid = firstDataElement?.type === ExportRecordType.HierarchicalGridRecord;
+        const isPivotGrid = firstDataElement?.type === ExportRecordType.PivotGridRecord;
 
         let rootKeys;
         let columnCount;
@@ -117,7 +118,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
 
                 columnWidths = defaultOwner.columnWidths;
                 indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
-                columnCount = columns.length;
+                columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
                 rootKeys = columns.map(c => c.field);
             }
         } else {

projects/igniteui-angular/src/lib/services/excel/excel-files.ts

@@ -4,7 +4,7 @@ import { WorksheetData } from './worksheet-data';
 
 import { strToU8 } from 'fflate';
 import { yieldingLoop } from '../../core/utils';
-import { HeaderType, ExportRecordType, IExportRecord, IColumnList } from '../exporter-common/base-export-service';
+import { HeaderType, ExportRecordType, IExportRecord, IColumnList, IColumnInfo } from '../exporter-common/base-export-service';
 
 /**
  * @hidden
@@ -58,13 +58,15 @@ export class ThemeFile implements IExcelFile {
 export class WorksheetFile implements IExcelFile {
     private static MIN_WIDTH = 8.43;
     private maxOutlineLevel = 0;
+    private sheetData = '';
     private dimension = '';
     private freezePane = '';
     private rowHeight = '';
 
     private mergeCellStr = '';
     private mergeCellsCounter = 0;
     private rowIndex = 0;
+    private pivotGridRowHeadersMap = new Map<number, string>();
 
     public writeElement() {}
 
@@ -82,74 +84,61 @@ export class WorksheetFile implements IExcelFile {
     }
 
     private prepareDataAsync(worksheetData: WorksheetData, done: (cols: string, sheetData: string) => void) {
-        let sheetData = '';
+        this.sheetData = '';
         let cols = '';
         const dictionary = worksheetData.dataDictionary;
         this.rowIndex = 0;
 
         if (worksheetData.isEmpty && (!worksheetData.options.alwaysExportHeaders || worksheetData.owner.columns.length === 0)) {
-            sheetData += '<sheetData/>';
+            this.sheetData += '<sheetData/>';
             this.dimension = 'A1';
-            done('', sheetData);
+            done('', this.sheetData);
         } else {
             const owner = worksheetData.owner;
             const isHierarchicalGrid = worksheetData.isHierarchical;
             const hasMultiColumnHeader = worksheetData.hasMultiColumnHeader;
+            const hasMultiRowHeader = worksheetData.hasMultiRowHeader;
 
             const hasUserSetIndex = owner.columns.some(col => col.exportIndex !== undefined);
 
             const height =  worksheetData.options.rowHeight;
-            const rowStyle = isHierarchicalGrid ? ' s="3"' : '';
             this.rowHeight = height ? ` ht="${height}" customHeight="1"` : '';
+            this.sheetData += `<sheetData>`;
 
-            sheetData += `<sheetData>`;
+            let headersForLevel: IColumnInfo[] = [];
+
+            for(let i = 0; i <= owner.maxRowLevel; i++) {
+                headersForLevel =  owner.columns.filter(c => c.level === i && c.rowSpan > 0 && !c.skip)
+
+                this.printHeaders(worksheetData, headersForLevel, i, true);
+
+                this.rowIndex++;
+            }
+
+            this.rowIndex = 0;
 
             for (let i = 0; i <= owner.maxLevel; i++) {
                 this.rowIndex++;
-                sheetData += `<row r="${this.rowIndex}"${this.rowHeight}>`;
+                const pivotGridColumns = this.pivotGridRowHeadersMap.get(this.rowIndex) ?? "";
+                this.sheetData += `<row r="${this.rowIndex}"${this.rowHeight}>${pivotGridColumns}`;
 
-                const headersForLevel = hasMultiColumnHeader ?
-                    owner.columns
+                const allowedColumns = owner.columns.filter(c => c.headerType !== HeaderType.RowHeader && c.headerType !== HeaderType.MultiRowHeader);
+
+                headersForLevel = hasMultiColumnHeader ?
+                    allowedColumns
                         .filter(c => (c.level < i &&
                             c.headerType !== HeaderType.MultiColumnHeader || c.level === i) && c.columnSpan > 0 && !c.skip)
                         .sort((a, b) => a.startIndex - b.startIndex)
                         .sort((a, b) => a.pinnedIndex - b.pinnedIndex) :
                     hasUserSetIndex ?
-                        owner.columns.filter(c => !c.skip) :
-                        owner.columns.filter(c => !c.skip)
+                        allowedColumns.filter(c => !c.skip) :
+                        allowedColumns.filter(c => !c.skip)
                             .sort((a, b) => a.startIndex - b.startIndex)
                             .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
 
-                let startValue = 0;
-
-                for (const currentCol of headersForLevel) {
-                    if (currentCol.level === i) {
-                        let columnCoordinate;
-                        columnCoordinate = ExcelStrings.getExcelColumn(startValue) + this.rowIndex;
-                        const columnValue = dictionary.saveValue(currentCol.header, true);
-                        sheetData += `<c r="${columnCoordinate}"${rowStyle} t="s"><v>${columnValue}</v></c>`;
-
-                        if (i !== owner.maxLevel) {
-                            this.mergeCellsCounter++;
-                            this.mergeCellStr += ` <mergeCell ref="${columnCoordinate}:`;
-
-                            if (currentCol.headerType === HeaderType.ColumnHeader) {
-                                columnCoordinate = ExcelStrings.getExcelColumn(startValue) + (owner.maxLevel + 1);
-                            } else {
-                                for (let k = 1; k < currentCol.columnSpan; k++) {
-                                    columnCoordinate = ExcelStrings.getExcelColumn(startValue + k) + this.rowIndex;
-                                    sheetData += `<c r="${columnCoordinate}"${rowStyle} />`;
-                                }
-                            }
-
-                            this.mergeCellStr += `${columnCoordinate}" />`;
-                        }
-                    }
-
-                    startValue += currentCol.columnSpan;
-                }
+                this.printHeaders(worksheetData, headersForLevel, i, false);
 
-                sheetData += `</row>`;
+                this.sheetData += `</row>`;
             }
 
             const multiColumnHeaderLevel = worksheetData.options.ignoreMultiColumnHeaders ? 0 : owner.maxLevel;
@@ -207,14 +196,14 @@ export class WorksheetFile implements IExcelFile {
             }
 
             this.processDataRecordsAsync(worksheetData, (rows) => {
-                sheetData += rows;
-                sheetData += '</sheetData>';
+                this.sheetData += rows;
+                this.sheetData += '</sheetData>';
 
-                if (hasMultiColumnHeader && this.mergeCellsCounter > 0) {
-                    sheetData += `<mergeCells count="${this.mergeCellsCounter}">${this.mergeCellStr}</mergeCells>`;
+                if ((hasMultiColumnHeader || hasMultiRowHeader) && this.mergeCellsCounter > 0) {
+                    this.sheetData += `<mergeCells count="${this.mergeCellsCounter}">${this.mergeCellStr}</mergeCells>`;
                 }
 
-                done(cols, sheetData);
+                done(cols, this.sheetData);
             });
         }
     }
@@ -237,7 +226,7 @@ export class WorksheetFile implements IExcelFile {
                             recordHeaders = worksheetData.rootKeys;
                         } else {
                             recordHeaders = worksheetData.owner.columns
-                                .filter(c => c.headerType !== HeaderType.MultiColumnHeader && !c.skip)
+                                .filter(c => c.headerType !== HeaderType.MultiColumnHeader && c.headerType !== HeaderType.MultiRowHeader && c.headerType !== HeaderType.RowHeader && !c.skip)
                                 .sort((a, b) => a.startIndex-b.startIndex)
                                 .sort((a, b) => a.pinnedIndex-b.pinnedIndex)
                                 .map(c => c.field);
@@ -330,13 +319,15 @@ export class WorksheetFile implements IExcelFile {
         const sHidden = record.hidden ? ` hidden="1"` : '';
 
         this.rowIndex++;
+        const pivotGridColumns = this.pivotGridRowHeadersMap.get(this.rowIndex) ?? "";
+
         rowData[0] =
-            `<row r="${this.rowIndex}"${this.rowHeight}${outlineLevel}${sHidden}>`;
+            `<row r="${this.rowIndex}"${this.rowHeight}${outlineLevel}${sHidden}>${pivotGridColumns}`;
 
         const keys = worksheetData.isSpecialData ? [record.data] : headersForLevel;
 
         for (let j = 0; j < keys.length; j++) {
-            const col = j + (isHierarchicalGrid ? rowLevel : 0);
+            const col = j + (isHierarchicalGrid ? rowLevel : worksheetData.isPivotGrid ? worksheetData.owner.maxRowLevel : 0);
 
             const cellData = this.getCellData(worksheetData, i, col, keys[j]);
 
@@ -381,6 +372,88 @@ export class WorksheetFile implements IExcelFile {
             return `<c r="${columnName}"${type}${format}><v>${value}</v></c>`;
         }
     }
+
+    private printHeaders(worksheetData: WorksheetData, headersForLevel: IColumnInfo[], i: number, isVertical: boolean) {
+        let startValue = 0;
+        let str = '';
+
+        const isHierarchicalGrid = worksheetData.isHierarchical;
+        let rowStyle = isHierarchicalGrid ? ' s="3"' : '';
+        const dictionary = worksheetData.dataDictionary;
+        const owner = worksheetData.owner;
+        const maxLevel = isVertical
+            ? owner.maxRowLevel
+            : owner.maxLevel;
+
+        for (const currentCol of headersForLevel) {
+            const spanLength = isVertical ? currentCol.rowSpan : currentCol.columnSpan;
+
+            if (currentCol.level === i) {
+                let columnCoordinate;
+                const column = isVertical
+                    ? this.rowIndex
+                    : startValue + (owner.maxRowLevel ?? 0)
+
+                const rowCoordinate = isVertical
+                    ? startValue + owner.maxLevel + 2
+                    : this.rowIndex
+
+                const columnValue = dictionary.saveValue(currentCol.header, true);
+
+                columnCoordinate = ExcelStrings.getExcelColumn(column) + rowCoordinate;
+                rowStyle = isVertical && currentCol.rowSpan > 1 ? ' s="4"' : rowStyle;
+                str = `<c r="${columnCoordinate}"${rowStyle} t="s"><v>${columnValue}</v></c>`;
+
+                if (isVertical) {
+                    if (this.pivotGridRowHeadersMap.has(rowCoordinate)) {
+                        this.pivotGridRowHeadersMap.set(rowCoordinate, this.pivotGridRowHeadersMap.get(rowCoordinate) + str)
+                    } else {
+                        this.pivotGridRowHeadersMap.set(rowCoordinate, str)
+                    }
+                } else {
+                    this.sheetData += str;
+                }
+
+                if (i !== maxLevel) {
+                    this.mergeCellsCounter++;
+                    this.mergeCellStr += ` <mergeCell ref="${columnCoordinate}:`;
+
+                    if (currentCol.headerType === HeaderType.ColumnHeader) {
+                        const col = isVertical
+                            ? maxLevel
+                            : startValue + (owner.maxRowLevel ?? 0);
+
+                        const row = isVertical
+                            ? rowCoordinate
+                            : owner.maxLevel + 1;
+
+                        columnCoordinate = ExcelStrings.getExcelColumn(col) + row;
+                    } else {
+                        for (let k = 1; k < spanLength; k++) {
+                            const col = isVertical
+                                ? column
+                                : column + k;
+
+                            const row = isVertical
+                                ? rowCoordinate + k
+                                : this.rowIndex;
+
+                            columnCoordinate = ExcelStrings.getExcelColumn(col) + row;
+                            str = `<c r="${columnCoordinate}"${rowStyle} />`;
+
+                            isVertical
+                                ? this.pivotGridRowHeadersMap.set(row, str)
+                                : this.sheetData += str
+                        }
+                    }
+
+                    this.mergeCellStr += `${columnCoordinate}" />`;
+                }
+            }
+
+            startValue += spanLength;
+        }
+    }
 }
 
 /**