fix(core/reports): fixed the export of the csv, now shows the value w…

…ithout the saveValue warning

* refactor(core/reports): delegated all the logic for the csv building to the xlsx library
* build: export default of file-saver and xlsx

src/core/reports/widget-export.spec.ts

@@ -1,4 +1,5 @@
 import {ChartData} from 'chart.js';
+import * as XLSX from 'xlsx';
 
 import {AjfTableCell} from '../table';
 
@@ -17,11 +18,6 @@ describe('widget-export', () => {
       lineTension: 0.1
     }]
   };
-  const dataTableCsv: AjfTableCell[][] = [
-    [{value: 'a'}, {value: 'b'}, {value: 'c'}],
-    [{value: 'd'}, {value: 'e'}, {value: 'f'}],
-    [{value: 'g'}, {value: 'h'}, {value: 'i'}],
-  ] as AjfTableCell[][];
 
   const dataTableXlsx: AjfTableCell[][] = [
     [
@@ -41,34 +37,11 @@ describe('widget-export', () => {
     ],
   ] as AjfTableCell[][];
 
-
-  it('widget chart to csv', () => {
+  it('widget chart to xlsx data', () => {
     widgetExport.data = dataChart;
     widgetExport.widgetType = AjfWidgetType.Chart;
-
-    const csv = widgetExport.buildCsv();
-    const toEqual = `,January,February,March,April,May,June,July
-My First Dataset,65000000,59,80,81,56,55,40
-`;
-
-    expect(csv).toEqual(toEqual);
-  });
-  it('widget table to csv', () => {
-    widgetExport.data = dataTableCsv;
-    widgetExport.widgetType = AjfWidgetType.Table;
-
-    const csv = widgetExport.buildCsv();
-    const toEqual = `a,b,c
-d,e,f
-g,h,i
-`;
-    expect(csv).toEqual(toEqual);
-  });
-  it('widget chart to xlsx', () => {
-    widgetExport.data = dataChart;
-    widgetExport.widgetType = AjfWidgetType.Chart;
-
-    const xlsx = widgetExport.buildXlsx();
+    const testSpy = spyOn(XLSX.utils, 'json_to_sheet').and.callThrough();
+    widgetExport.exportCsv();
     const toEqual = [{
       name: 'My First Dataset',
       January: 65000000,
@@ -79,14 +52,15 @@ g,h,i
       June: 55,
       July: 40
     }];
-    expect(JSON.stringify(xlsx)).toEqual(JSON.stringify(toEqual));
+    expect(testSpy).toHaveBeenCalledWith(toEqual);
   });
-  it('widget table to xlsx', () => {
+
+  it('widget table to xlsx data', () => {
     widgetExport.data = dataTableXlsx;
     widgetExport.widgetType = AjfWidgetType.Table;
-
-    const xlsx = widgetExport.buildXlsx();
+    const testSpy = spyOn(XLSX.utils, 'json_to_sheet').and.callThrough();
+    widgetExport.exportCsv();
     const toEqual = [{a: 'd', b: 'e', c: 'f'}, {a: 'g', b: 'h', c: 'i'}];
-    expect(JSON.stringify(xlsx)).toEqual(JSON.stringify(toEqual));
+    expect(testSpy).toHaveBeenCalledWith(toEqual);
   });
 });

src/core/reports/widget-export.ts

@@ -24,7 +24,7 @@ import {AjfTableCell} from '@ajf/core/table';
 import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
 import {ChartData} from 'chart.js';
 import {format} from 'date-fns';
-import * as fileSaver from 'file-saver';
+import {saveAs} from 'file-saver';
 import * as XLSX from 'xlsx';
 
 import {AjfWidgetType} from '../reports/interface/widgets/widget-type';
@@ -55,69 +55,29 @@ export class AjfWidgetExport {
   @Input() overlay = true;
   @Input() enable = false;
   constructor() {}
-  buildCsv(): string {
-    let csvString = '';
-    const DELIMITER = ',';
-    const STOP = '\n';
-    switch (this.widgetType) {
-      default:
-      case AjfWidgetType.Chart:
-        this.data = this.data as ChartData;
-        if (this.data.datasets == null || this.data.labels == null) {
-          return csvString;
-        }
-        csvString = DELIMITER + (this.data.labels as string[]).toString() + STOP;
-        this.data.datasets.forEach((dataset: Chart.ChartDataSets) => {
-          const data = dataset.data || [];
-          csvString += dataset.label + DELIMITER + data.toString() + STOP;
-        });
-        break;
-      case AjfWidgetType.Table:
-        let prefix = '';
-        let rowSpan = 0;
-        this.data = this.data as AjfTableCell[][];
-        for (let row of this.data) {
-          csvString += prefix;
-          for (let elem of row) {
-            if (elem.rowspan == null) {
-              if (parseInt(elem.value, 10) || elem.value === false) {
-                csvString += elem.value + ',';
-              } else {
-                csvString += elem.value + ',';
-              }
-            } else {
-              rowSpan = elem.rowspan as number;
-              csvString += elem.value + ',';
-              prefix = ',';
-            }
-          }
-          if (csvString[csvString.length - 1] === ',') {
-            csvString = csvString.substring(0, csvString.length - 1);
-          }
-          csvString += '\n';
-          rowSpan--;
-          if (rowSpan > 0) {
-            csvString += ',';
-          }
-          prefix = '';
-        }
 
-        break;
-    }
+  exportCsv(): void {
+    const sheetName = this._buildTitle(this.widgetType);
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this._buildXlsxData());
+    const csv = XLSX.utils.sheet_to_csv(worksheet);
 
-    return csvString;
+    saveAs(new Blob([csv], {type: 'text/csv;charset=utf-8'}), `${sheetName}${'.csv'}`);
   }
-  exportCsv(): void {
-    if (this.widgetType == null || this.data == null) {
-      return;
-    }
-    (fileSaver as any)
-        .default(
-            new Blob([this.buildCsv()], {type: 'text/csv;charset=utf-8'}),
-            `${this._buildTitle(this.widgetType)}${'.csv'}`);
+
+  exportXlsx(): void {
+    const sheetName = this._buildTitle(this.widgetType);
+    const sheets: {[sheet: string]: XLSX.WorkSheet} = {};
+    sheets[sheetName] = XLSX.utils.json_to_sheet(this._buildXlsxData());
+    const worksheet: XLSX.WorkBook = {Sheets: sheets, SheetNames: [sheetName]};
+    const excelBuffer = XLSX.write(worksheet, {
+      bookType: 'xlsx',
+      type: 'array',
+    });
+
+    saveAs(new Blob([excelBuffer]), `${sheetName}.xlsx`);
   }
 
-  buildXlsx(): {[key: string]: string|number}[] {
+  private _buildXlsxData(): {[key: string]: string|number}[] {
     let xlsxData: {[key: string]: string|number}[] = [];
     let labels: string[] = [];
     switch (this.widgetType) {
@@ -155,15 +115,6 @@ export class AjfWidgetExport {
     return xlsxData;
   }
 
-  exportXlsx(): void {
-    const ws: XLSX.WorkSheet = (XLSX as any).default.utils.json_to_sheet(this.buildXlsx());
-    const wb: XLSX.WorkBook = (XLSX as any).default.utils.book_new();
-    const title = this._buildTitle(this.widgetType);
-
-    (XLSX as any).default.utils.book_append_sheet(wb, ws, title);
-    (XLSX as any).default.writeFile(wb, `${title}.xlsx`);
-  }
-
   private _buildTitle(widgetType: AjfWidgetType): string {
     return `${AjfWidgetType[widgetType]} ${format(new Date(), `yyyy-MM-dd`)}`;
   }

tools/public_api_guard/core/reports.d.ts

@@ -324,10 +324,6 @@ export declare class AjfWidgetExport {
     overlay: boolean;
     widgetType: AjfWidgetType;
     constructor();
-    buildCsv(): string;
-    buildXlsx(): {
-        [key: string]: string | number;
-    }[];
     exportCsv(): void;
     exportXlsx(): void;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<AjfWidgetExport, "ajf-widget-export", never, { "widgetType": "widgetType"; "data": "data"; "overlay": "overlay"; "enable": "enable"; }, {}, never, ["*"]>;

tools/third-party-libs/BUILD.bazel

@@ -39,9 +39,8 @@ third_party_bundle(
     name = "file-saver",
     entry_point = "@npm//:node_modules/file-saver/src/FileSaver.js",
     module_name = "file-saver",
-    deps = [
-        "@npm//file-saver",
-    ],
+    exports = "default",
+    deps = ["@npm//file-saver"],
 )
 
 third_party_bundle(
@@ -148,7 +147,6 @@ third_party_bundle(
     name = "xlsx",
     entry_point = "@npm//:node_modules/xlsx/xlsx.js",
     module_name = "xlsx",
-    deps = [
-        "@npm//xlsx",
-    ],
+    exports = "default",
+    deps = ["@npm//xlsx"],
 )