Merged in DSC-38-Refactor (pull request DSpace#636)

DSC-38 Refactor

Approved-by: Vincenzo Mecca

src/app/core/export-service/browser-export.service.ts

@@ -5,6 +5,7 @@ import { saveAs } from 'file-saver';
 import { BehaviorSubject } from 'rxjs';
 
 import { ExportImageType, ExportService } from './export.service';
+import { hasValue } from '../../shared/empty.util';
 
 /**
  *  IMPORTANT
@@ -68,4 +69,19 @@ export class BrowserExportService implements ExportService {
 
   }
 
+  /**
+   * Creates an image from the given base64 string.
+   * @param base64 the base64 string
+   * @param type image type (png or jpeg)
+   * @param fileName
+   * @param isLoading
+   */
+  exportImageWithBase64(base64: string, type: ExportImageType, fileName: string, isLoading: BehaviorSubject<boolean>): void {
+    if (hasValue(base64)) {
+      saveAs(base64, fileName + '.' + type);
+    } else {
+      console.error('Base64 string is empty');
+    }
+    isLoading.next(false);
+  }
 }

src/app/core/export-service/export.service.ts

@@ -26,4 +26,13 @@ export interface ExportService {
    * @param isLoading A boolean representing the exporting process status.
    */
   exportAsImage(domNode: HTMLElement, type: ExportImageType, fileName: string, isLoading: BehaviorSubject<boolean>);
+
+  /**
+   * Creates an image from the given base64 string.
+   * @param base64 the base64 string
+   * @param type image type (png or jpeg)
+   * @param fileName
+   * @param isLoading
+   */
+  exportImageWithBase64(base64: string, type: ExportImageType, fileName: string, isLoading: BehaviorSubject<boolean>);
 }

src/app/core/export-service/server-export.service.ts

@@ -26,4 +26,15 @@ export class ServerExportService implements ExportService {
   exportAsImage(domNode: HTMLElement, type: ExportImageType, fileName: string, isLoading: BehaviorSubject<boolean>) {
     return;
   }
+
+  /**
+   * Creates an image from the given base64 string.
+   * @param base64 the base64 string
+   * @param type image type (png or jpeg)
+   * @param fileName
+   * @param isLoading
+   */
+  exportImageWithBase64(base64: string, type: ExportImageType, fileName: string, isLoading: BehaviorSubject<boolean>) {
+    return;
+  }
 }

src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html

@@ -1 +1,31 @@
- <google-chart *ngIf="data.length > 0" [data]="geoChart"></google-chart>
+<ng-container *ngIf="data.length > 0">
+  <div class="row mt-1">
+    <div class="col text-right">
+      <div ngbDropdown class="d-inline-block">
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          id="exportMapAsImg"
+          ngbDropdownToggle
+        >
+          <i class="fas fa-download"></i>
+          {{"statistics-page.export-map-as-image" | translate}}
+        </button>
+        <div ngbDropdownMenu aria-labelledby="exportMapAsImg">
+          <button
+            *ngFor="let image of exportImageTypes"
+            ngbDropdownItem
+            (click)="exportMapAsImage(image.type)"
+            [disabled]="isLoading$ | async"
+          >
+            {{ image.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div data-test="google-chart-ref">
+    <google-chart #googleChartRef [data]="geoChart"></google-chart>
+  </div>
+</ng-container>

src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts

@@ -5,6 +5,9 @@ import { UsageReport } from '../../../core/statistics/models/usage-report.model'
 import { USAGE_REPORT } from '../../../core/statistics/models/usage-report.resource-type';
 
 import { GoogleChartInterface } from 'ng2-google-charts';
+import { ExportService } from '../../../core/export-service/export.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 import { StatisticsType } from '../statistics-type.model';
 
 describe('StatisticsMapComponent', () => {
@@ -50,16 +53,29 @@ describe('StatisticsMapComponent', () => {
     options: { 'title': 'TopCountries' },
   };
 
+  const exportServiceMock: any = {
+    exportAsImage: jasmine.createSpy('exportAsImage'),
+    exportAsFile: jasmine.createSpy('exportAsFile'),
+    exportImageWithBase64: jasmine.createSpy('exportImageWithBase64')
+  };
+
+  let  exportService: ExportService = exportServiceMock;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ StatisticsMapComponent ]
+      imports: [TranslateModule.forRoot()],
+      declarations: [ StatisticsMapComponent ],
+      providers: [
+        // { provide: ExportService, useValue: exportServiceMock }
+      ],
     })
     .compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StatisticsMapComponent);
     component = fixture.componentInstance;
+    spyOn(component, 'exportMapAsImage');
+    (component as any).exportService = exportServiceMock;
     fixture.detectChanges();
   });
 
@@ -81,4 +97,13 @@ describe('StatisticsMapComponent', () => {
     expect(component.geoChart).toEqual(geoChartExpected);
   });
 
+  it('should download map as png and jpg', () => {
+    component.report = report;
+    component.ngOnInit();
+    fixture.detectChanges();
+    const drpdButton = fixture.debugElement.query(By.css('div[ngbdropdownmenu]>button[ngbdropdownitem]'));
+    drpdButton.triggerEventHandler('click', null);
+    fixture.detectChanges();
+    expect(component.exportMapAsImage).toHaveBeenCalled();
+  });
 });

src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit, PLATFORM_ID, ViewChild } from '@angular/core';
 import { UsageReport } from '../../../core/statistics/models/usage-report.model';
-import { GoogleChartInterface } from 'ng2-google-charts';
-
-
+import { GoogleChartComponent, GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';
+import { ExportImageType, ExportService } from '../../../core/export-service/export.service';
+import { BehaviorSubject } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
 @Component({
   selector: 'ds-statistics-map',
   templateUrl: './statistics-map.component.html',
@@ -30,6 +31,40 @@ export class StatisticsMapComponent implements OnInit {
    * Chart Columns needed to be shown in the tooltip
    */
   chartColumns = [];
+  /**
+   * Loading utilized for export functions to disable buttons
+   */
+  isLoading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * Chart ElementRef
+   */
+  @ViewChild('googleChartRef') googleChartRef: GoogleChartComponent;
+
+  exportImageType = ExportImageType;
+
+  exportImageTypes = [
+    { type: ExportImageType.png, label: 'PNG' },
+    { type: ExportImageType.jpeg, label: 'JPEG/JPG' }
+  ];
+
+  protected exportService: ExportService;
+
+  constructor(
+    @Inject(PLATFORM_ID) protected platformId: Object
+  ) {
+    if (isPlatformBrowser(this.platformId)) {
+      import('../../../core/export-service/browser-export.service').then((s) => {
+        this.exportService = new s.BrowserExportService();
+      });
+    } else {
+      import('../../../core/export-service/server-export.service').then((s) => {
+        this.exportService = new s.ServerExportService();
+      });
+    }
+  }
 
   ngOnInit(): void {
     if ( !!this.report && !!this.report.points && this.report.points.length > 0 ) {
@@ -54,16 +89,23 @@ export class StatisticsMapComponent implements OnInit {
     });
 
     this.geoChart = {
-      chartType: 'GeoChart',
+      chartType: GoogleChartType.GeoChart,
       dataTable: [
         this.chartColumns,
         ...this.data
       ],
       options: { 'title': this.report.reportType }
     };
-
   }
 
-
-
+  /**
+   * Export the map as an image
+   * @param type of export
+   */
+   exportMapAsImage(type: ExportImageType){
+    this.isLoading$.next(true);
+    const chart = this.googleChartRef.wrapper.getChart();
+    const imageURI: string = chart?.getImageURI();
+    this.exportService.exportImageWithBase64(imageURI, type, this.report.reportType, this.isLoading$);
+  }
 }

src/assets/i18n/en.json5

@@ -7123,6 +7123,8 @@
 
   "authority-confidence.search-label":"Search",
 
+  "statistics-page.export-map-as-image": "Export map",
+
   "curation-task.task.hocr.label": "Extract text (HOCR) from images",
 
   "curation-task.task.ocrfilter.label": "Consolidate hOCR for fulltext indexing",