Merge pull request #7791 from IgniteUI/dmdimitrov/exportersPerf-10.0.x

fix(exporters): performance optimizations for CSV and Excel exporters

Author: rkaraivanov

package-lock.json

@@ -57,12 +57,14 @@
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.11",
+    "core-js-pure": "^3.6.5",
     "hammerjs": "^2.0.8",
     "igniteui-trial-watermark": "^1.0.3",
     "jszip": "^3.4.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",
+    "setimmediate": "^1.0.5",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.3"
   },

package.json

@@ -8,6 +8,7 @@
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
       "@types/jszip",
+      "core-js-pure",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",

projects/igniteui-angular/ng-package.json

@@ -10,6 +10,7 @@
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
       "@types/jszip",
+      "core-js-pure",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill",

projects/igniteui-angular/ng-package.prod.json

@@ -68,6 +68,7 @@
     "dependencies": {
         "@types/hammerjs": "^2.0.36",
         "@types/jszip": "^3.1.7",
+        "core-js-pure": "^3.6.5",
         "hammerjs": "^2.0.8",
         "jszip": "^3.3.0",
         "tslib": "^2.0.0",

projects/igniteui-angular/package.json

@@ -30,6 +30,7 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
         { name: '@types/hammerjs', target: PackageTarget.DEV },
         { name: '@types/jszip', target: PackageTarget.DEV },
         { name: 'igniteui-trial-watermark', target: PackageTarget.NONE },
+        { name: 'core-js-pure', target: PackageTarget.NONE },
         // peerDependencies
         { name: '@angular/forms', target: PackageTarget.NONE },
         { name: '@angular/common', target: PackageTarget.NONE },

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -2,6 +2,7 @@ import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Observable } from 'rxjs';
 import ResizeObserver from 'resize-observer-polyfill';
+import { setImmediate } from 'core-js-pure';
 
 /**
  * @hidden
@@ -383,3 +384,19 @@ export function compareMaps(map1: Map<any, any>, map2: Map<any, any>): boolean {
     }
     return match;
 }
+
+export function yieldingLoop(count: number, chunkSize: number, callback: (index: number) => void, done: () => void) {
+    let i = 0;
+    const chunk = () => {
+        const end = Math.min(i + chunkSize, count);
+        for ( ; i < end; ++i) {
+            callback(i);
+        }
+        if (i < count) {
+            setImmediate(chunk);
+        } else {
+            done();
+        }
+    };
+    chunk();
+}

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,4 +1,5 @@
 import { ExportUtilities } from '../exporter-common/export-utilities';
+import { yieldingLoop } from '../../core/utils';
 
 /**
  * @hidden
@@ -36,6 +37,26 @@ export class CharSeparatedValueData {
         return this._headerRecord + this._dataRecords;
     }
 
+    public prepareDataAsync(done: (result: string) => void) {
+        if (!this._data || this._data.length === 0) {
+            done('');
+        }
+
+        const keys = ExportUtilities.getKeysFromData(this._data);
+
+        if (keys.length === 0) {
+            done('');
+        }
+
+        this._isSpecialData = ExportUtilities.isSpecialData(this._data);
+        this._escapeCharacters.push(this._delimiter);
+
+        this._headerRecord = this.processHeaderRecord(keys, this._escapeCharacters);
+        this.processDataRecordsAsync(this._data, keys, this._escapeCharacters, (dr) => {
+            done(this._headerRecord + dr);
+        });
+    }
+
     private processField(value, escapeChars): string {
         let safeValue = ExportUtilities.hasValue(value) ? String(value) : '';
         if (escapeChars.some((v) => safeValue.includes(v))) {
@@ -54,23 +75,37 @@ export class CharSeparatedValueData {
     }
 
     private processRecord(record, keys, escapeChars): string {
-        let recordData = '';
-        for (const keyName of keys) {
-
-            const value = (record[keyName] !== undefined) ? record[keyName] : this._isSpecialData ? record : '';
-            recordData += this.processField(value, this._escapeCharacters);
+        const recordData = new Array(keys.length);
+        for (let index = 0; index < keys.length; index++) {
+            const value = (record[keys[index]] !== undefined) ? record[keys[index]] : this._isSpecialData ? record : '';
+            recordData[index] = this.processField(value, this._escapeCharacters);
         }
 
-        return recordData.slice(0, -this._delimiterLength) + this._eor;
+        return recordData.join('').slice(0, -this._delimiterLength) + this._eor;
     }
 
     private processDataRecords(currentData, keys, escapeChars) {
-        let dataRecords = '';
-        for (const row of currentData) {
-            dataRecords += this.processRecord(row, keys, escapeChars);
+        const dataRecords = new Array(currentData.length);
+
+        for (let i = 0; i < currentData.length; i++) {
+            const row = currentData[i];
+            dataRecords[i] = this.processRecord(row, keys, escapeChars);
         }
 
-        return dataRecords;
+        return dataRecords.join('');
+    }
+
+    private processDataRecordsAsync(currentData, keys, escapeChars, done: (result: string) => void) {
+        const dataRecords = new Array(currentData.length);
+
+        yieldingLoop(currentData.length, 1000,
+            (i) => {
+                const row = currentData[i];
+                dataRecords[i] = this.processRecord(row, keys, escapeChars);
+            },
+            () => {
+                done(dataRecords.join(''));
+            });
     }
 
     private setDelimiter(value) {

projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts

@@ -50,10 +50,11 @@ export class IgxCsvExporterService extends IgxBaseExporter {
     protected exportDataImplementation(data: any[], options: IgxCsvExporterOptions) {
         data = data.map((item) => item.rowData);
         const csvData = new CharSeparatedValueData(data, options.valueDelimiter);
-        this._stringData = csvData.prepareData();
-
-        this.saveFile(options);
-        this.onExportEnded.emit({ csvData: this._stringData });
+        csvData.prepareDataAsync((r) => {
+            this._stringData = r;
+            this.saveFile(options);
+            this.onExportEnded.emit({ csvData: this._stringData });
+        });
     }
 
     private saveFile(options: IgxCsvExporterOptions) {

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

@@ -266,14 +266,13 @@ describe('Excel Exporter', () => {
             const grid = fix.componentInstance.grid;
             grid.columns[1].hidden = true;
             grid.columns[2].hidden = true;
-            const columnWidths = [100, 200, 0, undefined, null];
+            const columnWidths = [100, 200, 0, null];
             fix.detectChanges();
 
             await setColWidthAndExport(grid, options, fix, columnWidths[0]);
             await setColWidthAndExport(grid, options, fix, columnWidths[1]);
             await setColWidthAndExport(grid, options, fix, columnWidths[2]);
             await setColWidthAndExport(grid, options, fix, columnWidths[3]);
-            await setColWidthAndExport(grid, options, fix, columnWidths[4]);
         });
 
         it('should export all rows with the height specified in options.', async () => {