From 94f07f316dd49fcb93664ba757ea76ed0c04559b Mon Sep 17 00:00:00 2001 From: nikunj59 Date: Thu, 2 Jun 2022 13:16:27 +0530 Subject: [PATCH 1/4] DSC-38 changes for map component should be enhanced in order to give the possibility of exporting the map as png and jpg/jpeg format. --- .../statistics-map.component.html | 14 ++++++- .../statistics-map.component.spec.ts | 29 ++++++++++++++- .../statistics-map.component.ts | 37 ++++++++++++++++++- ...bmission-import-external.component.spec.ts | 2 +- 4 files changed, 78 insertions(+), 4 deletions(-) diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html index 83cb9fc6f2c..62934b8924c 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html @@ -1 +1,13 @@ - +
+ + +
+
+ +
diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts index 903b61374fe..e417f76631c 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts +++ b/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, ExportImageType } from '../../../core/export-service/export.service'; +import { TranslateModule } from '@ngx-translate/core'; +import { By } from '@angular/platform-browser'; describe('StatisticsMapComponent', () => { let component: StatisticsMapComponent; @@ -49,9 +52,17 @@ describe('StatisticsMapComponent', () => { options: { 'title': 'TopCountries' }, }; + const exportServiceMock: any = { + exportAsImage: jasmine.createSpy('exportAsImage'), + exportAsFile: jasmine.createSpy('exportAsFile') + }; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ StatisticsMapComponent ] + imports: [TranslateModule.forRoot()], + declarations: [ StatisticsMapComponent ], + providers: [ + { provide: ExportService, useValue: exportServiceMock } + ], }) .compileComponents(); }); @@ -80,4 +91,20 @@ describe('StatisticsMapComponent', () => { expect(component.geoChart).toEqual(geoChartExpected); }); + it('should download map as png and jpg', () => { + component.report = report; + fixture.detectChanges(); + component.ngOnInit(); + fixture.detectChanges(); + const downloadPngMapBtn = fixture.debugElement.query(By.css('[data-test="download-png-map-btn"]')); + downloadPngMapBtn.triggerEventHandler('click', null); + fixture.detectChanges(); + const node = fixture.debugElement.query(By.css('[data-test="google-chart-ref"]')).nativeElement; + expect(exportServiceMock.exportAsImage).toHaveBeenCalledWith(node, ExportImageType.png, report.reportType, component.isLoading); + + const downloadJpgMapBtn = fixture.debugElement.query(By.css('[data-test="download-jpg-map-btn"]')); + downloadJpgMapBtn.triggerEventHandler('click', null); + fixture.detectChanges(); + expect(exportServiceMock.exportAsImage).toHaveBeenCalledWith(node, ExportImageType.jpeg, report.reportType, component.isSecondLoading); + }); }); diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts index 4bd4bf8a7b5..6f0eead5f1b 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts @@ -1,6 +1,8 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { UsageReport } from '../../../core/statistics/models/usage-report.model'; import { GoogleChartInterface } from 'ng2-google-charts'; +import { ExportImageType, ExportService } from '../../../core/export-service/export.service'; +import { BehaviorSubject } from 'rxjs'; @Component({ @@ -30,6 +32,23 @@ 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 = new BehaviorSubject(false); + /** + * Loading utilized for export functions to disable buttons + */ + isSecondLoading: BehaviorSubject = new BehaviorSubject(false); + /** + * Chart ElementRef + */ + @ViewChild('googleChartRef') googleChartRef: ElementRef; + + constructor( + private exportService: ExportService + ) { + } ngOnInit(): void { if ( !!this.report && !!this.report.points && this.report.points.length > 0 ) { @@ -64,6 +83,22 @@ export class StatisticsMapComponent implements OnInit { } + /** + * Download map as image in png version. + */ + downloadPng() { + this.isLoading.next(false); + const node = this.googleChartRef.nativeElement; + this.exportService.exportAsImage(node, ExportImageType.png, this.report.reportType, this.isLoading); + } + /** + * Download map as image in jpeg version. + */ + downloadJpeg() { + this.isSecondLoading.next(false); + const node = this.googleChartRef.nativeElement; + this.exportService.exportAsImage(node, ExportImageType.jpeg, this.report.reportType, this.isSecondLoading); + } } diff --git a/src/app/submission/import-external/submission-import-external.component.spec.ts b/src/app/submission/import-external/submission-import-external.component.spec.ts index dc53b2e45f3..dfcb85ee347 100644 --- a/src/app/submission/import-external/submission-import-external.component.spec.ts +++ b/src/app/submission/import-external/submission-import-external.component.spec.ts @@ -165,7 +165,7 @@ describe('SubmissionImportExternalComponent test suite', () => { ngbModal.open.and.returnValue({componentInstance: { externalSourceEntry: null}}); comp.import(entry); - expect(compAsAny.modalService.open).toHaveBeenCalledWith(SubmissionImportExternalPreviewComponent, { size: 'lg' }); + expect(compAsAny.modalService.open).toHaveBeenCalledWith(SubmissionImportExternalPreviewComponent, { size: 'lg', scrollable: true }); expect(comp.modalRef.componentInstance.externalSourceEntry).toEqual(entry); }); From 0f0c27d054e163989c3b0d2c6fdaf7a0a5cb1f36 Mon Sep 17 00:00:00 2001 From: Alisa Ismailati Date: Tue, 30 May 2023 16:47:20 +0200 Subject: [PATCH 2/4] [DSC-38] Export statistics map --- package.json | 4 +- src/app/core/export-service/export.service.ts | 17 ++++++ .../statistics-map.component.html | 44 ++++++++++----- .../statistics-map.component.ts | 45 +++++++--------- src/assets/i18n/en.json5 | 4 +- yarn.lock | 53 ++++++++++--------- 6 files changed, 100 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 399441566af..239bd948a85 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "morgan": "^1.10.0", "ng-mocks": "^13.1.1", "ng2-file-upload": "1.4.0", - "ng2-google-charts": "^6.1.0", + "ng2-google-charts": "^7.0.0", "ng2-nouislider": "^1.8.3", "ngx-infinite-scroll": "^10.0.1", "ngx-moment": "^5.0.0", @@ -181,7 +181,7 @@ "eslint": "^8.2.0", "eslint-plugin-deprecation": "^1.3.2", "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsdoc": "^38.0.6", + "eslint-plugin-jsdoc": "^39.6.4", "eslint-plugin-unused-imports": "^2.0.0", "fork-ts-checker-webpack-plugin": "^6.0.3", "html-loader": "^1.3.2", diff --git a/src/app/core/export-service/export.service.ts b/src/app/core/export-service/export.service.ts index 7c7578f4760..53b53fc2df3 100644 --- a/src/app/core/export-service/export.service.ts +++ b/src/app/core/export-service/export.service.ts @@ -5,6 +5,7 @@ import { toJpeg, toPng } from 'html-to-image'; import { Options } from 'html-to-image/es/options'; import { saveAs } from 'file-saver'; import { BehaviorSubject } from 'rxjs'; +import { hasValue } from 'src/app/shared/empty.util'; export enum ExportImageType { png = 'png', @@ -69,4 +70,20 @@ export class 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): void { + if (hasValue(base64)) { + saveAs(base64, fileName + '.' + type); + } else { + console.error('Base64 string is empty'); + } + + isLoading.next(false); + } } diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html index 62934b8924c..54af8dcd0e0 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.html @@ -1,13 +1,31 @@ -
- - -
-
- -
+ +
+
+
+ +
+ +
+
+
+
+ +
+ +
+ diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts index 6f0eead5f1b..9f803cf029a 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts @@ -1,10 +1,8 @@ -import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { UsageReport } from '../../../core/statistics/models/usage-report.model'; -import { GoogleChartInterface } from 'ng2-google-charts'; +import { GoogleChartComponent, GoogleChartInterface } from 'ng2-google-charts'; import { ExportImageType, ExportService } from '../../../core/export-service/export.service'; import { BehaviorSubject } from 'rxjs'; - - @Component({ selector: 'ds-statistics-map', templateUrl: './statistics-map.component.html', @@ -36,14 +34,20 @@ export class StatisticsMapComponent implements OnInit { * Loading utilized for export functions to disable buttons */ isLoading: BehaviorSubject = new BehaviorSubject(false); - /** - * Loading utilized for export functions to disable buttons - */ - isSecondLoading: BehaviorSubject = new BehaviorSubject(false); + + isLoading$: BehaviorSubject = new BehaviorSubject(false); + /** * Chart ElementRef */ - @ViewChild('googleChartRef') googleChartRef: ElementRef; + @ViewChild('googleChartRef') googleChartRef: GoogleChartComponent; + + exportImageType = ExportImageType; + + exportImageTypes = [ + { type: ExportImageType.png, label: 'PNG' }, + { type: ExportImageType.jpeg, label: 'JPEG/JPG' } + ]; constructor( private exportService: ExportService @@ -80,25 +84,16 @@ export class StatisticsMapComponent implements OnInit { ], options: { 'title': this.report.reportType } }; - } /** - * Download map as image in png version. + * Export the map as an image + * @param type of export */ - downloadPng() { - this.isLoading.next(false); - const node = this.googleChartRef.nativeElement; - this.exportService.exportAsImage(node, ExportImageType.png, this.report.reportType, this.isLoading); + 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$); } - - /** - * Download map as image in jpeg version. - */ - downloadJpeg() { - this.isSecondLoading.next(false); - const node = this.googleChartRef.nativeElement; - this.exportService.exportAsImage(node, ExportImageType.jpeg, this.report.reportType, this.isSecondLoading); - } - } diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index fec5973a533..3408366b70f 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -6181,5 +6181,7 @@ "invitation.ignore-btn": "Ignore", - "authority-confidence.search-label":"Search" + "authority-confidence.search-label":"Search", + + "statistics-page.export-map-as-image": "Export map", } diff --git a/yarn.lock b/yarn.lock index caae587bf34..439ccf953ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1494,14 +1494,14 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@es-joy/jsdoccomment@~0.22.1": - version "0.22.1" - resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.22.1.tgz#3c86d458780231769215a795105bd3b03b2616f2" - integrity sha512-/WMkqLYfwCf0waCAMC8Eddt3iAOdghkDF5vmyKEu8pfO66KRFY1L15yks8mfgURiwOAOJpAQ3blvB3Znj6ZwBw== +"@es-joy/jsdoccomment@~0.36.1": + version "0.36.1" + resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.36.1.tgz#c37db40da36e4b848da5fd427a74bae3b004a30f" + integrity sha512-922xqFsTpHs6D0BUiG4toiyPOMc8/jafnWKxz1KWgS4XzKPy2qXf1Pe6UFuNSCQqt6tOuhAWXBNuuyUhJmw9Vg== dependencies: comment-parser "1.3.1" esquery "^1.4.0" - jsdoc-type-pratt-parser "~2.2.5" + jsdoc-type-pratt-parser "~3.1.0" "@eslint/eslintrc@^1.2.1": version "1.2.1" @@ -5965,18 +5965,17 @@ eslint-plugin-import@^2.25.4: resolve "^1.20.0" tsconfig-paths "^3.12.0" -eslint-plugin-jsdoc@^38.0.6: - version "38.0.6" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-38.0.6.tgz#b26843bdc445202b9f0e3830bda39ec5aacbfa97" - integrity sha512-Wvh5ERLUL8zt2yLZ8LLgi8RuF2UkjDvD+ri1/i7yMpbfreK2S29B9b5JC7iBIoFR7KDaEWCLnUPHTqgwcXX1Sg== +eslint-plugin-jsdoc@^39.6.4: + version "39.9.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.9.1.tgz#e9ce1723411fd7ea0933b3ef0dd02156ae3068e2" + integrity sha512-Rq2QY6BZP2meNIs48aZ3GlIlJgBqFCmR55+UBvaDkA3ZNQ0SvQXOs2QKkubakEijV8UbIVbVZKsOVN8G3MuqZw== dependencies: - "@es-joy/jsdoccomment" "~0.22.1" + "@es-joy/jsdoccomment" "~0.36.1" comment-parser "1.3.1" debug "^4.3.4" escape-string-regexp "^4.0.0" esquery "^1.4.0" - regextras "^0.8.0" - semver "^7.3.5" + semver "^7.3.8" spdx-expression-parse "^3.0.1" eslint-plugin-unused-imports@^2.0.0: @@ -8094,10 +8093,10 @@ jsbn@~0.1.0: resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM= -jsdoc-type-pratt-parser@~2.2.5: - version "2.2.5" - resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-2.2.5.tgz#c9f93afac7ee4b5ed4432fe3f09f7d36b05ed0ff" - integrity sha512-2a6eRxSxp1BW040hFvaJxhsCMI9lT8QB8t14t+NY5tC5rckIR0U9cr2tjOeaFirmEOy6MHvmJnY7zTBHq431Lw== +jsdoc-type-pratt-parser@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz#a4a56bdc6e82e5865ffd9febc5b1a227ff28e67e" + integrity sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw== jsdom@19.0.0: version "19.0.0" @@ -9365,12 +9364,12 @@ ng2-file-upload@1.4.0: dependencies: tslib "^1.9.0" -ng2-google-charts@^6.1.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-6.2.0.tgz#c0b89e2b7bde0acbdca7489270e2bb8c91ba75bd" - integrity sha512-dbG93G22hDcNNfdR3vL1GyT8ez0N2J5c8UHrI0MO8+AdFWJm6v4iODRbTGrcUGWYxKsC4V5gRrzfVBtOhMnlhA== +ng2-google-charts@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-7.0.0.tgz#1e601dad1d6f2f964d052a8f6eeb6d56efd04c1a" + integrity sha512-MRc7oIDAvFVdvW2SQvE8xNjzL5NDdnB4GvJEBRW8PYsuNH1gj3RlQRdFRDdkzaRDy4y9jVI6x6yZZAYP3ZCVLw== dependencies: - tslib "^1.9.0" + tslib "^2.3.0" ng2-nouislider@^1.8.3: version "1.8.3" @@ -11440,11 +11439,6 @@ regexpu-core@^5.0.1: unicode-match-property-ecmascript "^2.0.0" unicode-match-property-value-ecmascript "^2.0.0" -regextras@^0.8.0: - version "0.8.0" - resolved "https://registry.yarnpkg.com/regextras/-/regextras-0.8.0.tgz#ec0f99853d4912839321172f608b544814b02217" - integrity sha512-k519uI04Z3SaY0fLX843MRXnDeG2+vHOFsyhiPZvNLe7r8rD2YNRjq4BQLZZ0oAr2NrtvZlICsXysGNFPGa3CQ== - registry-auth-token@^4.0.0: version "4.2.1" resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250" @@ -11928,6 +11922,13 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== +semver@^7.3.8: + version "7.5.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec" + integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw== + dependencies: + lru-cache "^6.0.0" + send@0.16.2: version "0.16.2" resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1" From 8eadb062d5ac333ce968a9cbcc81774d0a2403b0 Mon Sep 17 00:00:00 2001 From: Alisa Ismailati Date: Tue, 30 May 2023 18:05:19 +0200 Subject: [PATCH 3/4] [DSC-38] ng2-google-charts downgrade --- package.json | 2 +- .../statistics-map.component.ts | 20 +++++++++++++++---- yarn.lock | 10 +++++----- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index f14492785a2..872641ebe32 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ "morgan": "^1.10.0", "ng-mocks": "^13.1.1", "ng2-file-upload": "1.4.0", - "ng2-google-charts": "^7.0.0", + "ng2-google-charts": "^6.1.0", "ng2-nouislider": "^1.8.3", "ngx-infinite-scroll": "^10.0.1", "ngx-pagination": "5.0.0", diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts index 9f803cf029a..46d28dd303b 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts @@ -1,8 +1,9 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { Component, Inject, Input, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; import { UsageReport } from '../../../core/statistics/models/usage-report.model'; -import { GoogleChartComponent, 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', @@ -49,9 +50,20 @@ export class StatisticsMapComponent implements OnInit { { type: ExportImageType.jpeg, label: 'JPEG/JPG' } ]; + protected exportService: ExportService; + constructor( - private exportService: ExportService + @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 { @@ -77,7 +89,7 @@ export class StatisticsMapComponent implements OnInit { }); this.geoChart = { - chartType: 'GeoChart', + chartType: GoogleChartType.GeoChart, dataTable: [ this.chartColumns, ...this.data diff --git a/yarn.lock b/yarn.lock index 92b0dd79a03..fbb54046db0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8548,12 +8548,12 @@ ng2-file-upload@1.4.0: dependencies: tslib "^1.9.0" -ng2-google-charts@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-7.0.0.tgz#1e601dad1d6f2f964d052a8f6eeb6d56efd04c1a" - integrity sha512-MRc7oIDAvFVdvW2SQvE8xNjzL5NDdnB4GvJEBRW8PYsuNH1gj3RlQRdFRDdkzaRDy4y9jVI6x6yZZAYP3ZCVLw== +ng2-google-charts@^6.1.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/ng2-google-charts/-/ng2-google-charts-6.2.0.tgz#c0b89e2b7bde0acbdca7489270e2bb8c91ba75bd" + integrity sha512-dbG93G22hDcNNfdR3vL1GyT8ez0N2J5c8UHrI0MO8+AdFWJm6v4iODRbTGrcUGWYxKsC4V5gRrzfVBtOhMnlhA== dependencies: - tslib "^2.3.0" + tslib "^1.9.0" ng2-nouislider@^1.8.3: version "1.8.3" From ee8c3275fce0f604ca7fa9760226104497c1a2e6 Mon Sep 17 00:00:00 2001 From: Alisa Ismailati Date: Tue, 30 May 2023 19:14:27 +0200 Subject: [PATCH 4/4] [DSC-38] Unit test fix --- .../statistics-map.component.spec.ts | 24 +++++++++---------- .../statistics-map.component.ts | 2 +- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts index 0fa818149ed..62ff1e1e30e 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.spec.ts @@ -5,7 +5,7 @@ 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, ExportImageType } from '../../../core/export-service/export.service'; +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'; @@ -55,14 +55,17 @@ describe('StatisticsMapComponent', () => { const exportServiceMock: any = { exportAsImage: jasmine.createSpy('exportAsImage'), - exportAsFile: jasmine.createSpy('exportAsFile') + exportAsFile: jasmine.createSpy('exportAsFile'), + exportImageWithBase64: jasmine.createSpy('exportImageWithBase64') }; + + let exportService: ExportService = exportServiceMock; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], declarations: [ StatisticsMapComponent ], providers: [ - { provide: ExportService, useValue: exportServiceMock } + // { provide: ExportService, useValue: exportServiceMock } ], }) .compileComponents(); @@ -71,6 +74,8 @@ describe('StatisticsMapComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(StatisticsMapComponent); component = fixture.componentInstance; + spyOn(component, 'exportMapAsImage'); + (component as any).exportService = exportServiceMock; fixture.detectChanges(); }); @@ -94,18 +99,11 @@ describe('StatisticsMapComponent', () => { it('should download map as png and jpg', () => { component.report = report; - fixture.detectChanges(); component.ngOnInit(); fixture.detectChanges(); - const downloadPngMapBtn = fixture.debugElement.query(By.css('[data-test="download-png-map-btn"]')); - downloadPngMapBtn.triggerEventHandler('click', null); - fixture.detectChanges(); - const node = fixture.debugElement.query(By.css('[data-test="google-chart-ref"]')).nativeElement; - expect(exportServiceMock.exportAsImage).toHaveBeenCalledWith(node, ExportImageType.png, report.reportType, component.isLoading); - - const downloadJpgMapBtn = fixture.debugElement.query(By.css('[data-test="download-jpg-map-btn"]')); - downloadJpgMapBtn.triggerEventHandler('click', null); + const drpdButton = fixture.debugElement.query(By.css('div[ngbdropdownmenu]>button[ngbdropdownitem]')); + drpdButton.triggerEventHandler('click', null); fixture.detectChanges(); - expect(exportServiceMock.exportAsImage).toHaveBeenCalledWith(node, ExportImageType.jpeg, report.reportType, component.isSecondLoading); + expect(component.exportMapAsImage).toHaveBeenCalled(); }); }); diff --git a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts index 46d28dd303b..fde75a47040 100644 --- a/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts +++ b/src/app/statistics-page/cris-statistics-page/statistics-map/statistics-map.component.ts @@ -102,7 +102,7 @@ export class StatisticsMapComponent implements OnInit { * Export the map as an image * @param type of export */ - exportMapAsImage(type: ExportImageType) { + exportMapAsImage(type: ExportImageType){ this.isLoading$.next(true); const chart = this.googleChartRef.wrapper.getChart(); const imageURI: string = chart?.getImageURI();