From e378681840f2c59c635944c18978c95c4d76833c Mon Sep 17 00:00:00 2001 From: Derek Dohler Date: Wed, 27 Mar 2019 11:40:17 -0400 Subject: [PATCH] Use ExportServices from climate-change-components --- package.json | 2 +- src/app/app.module.ts | 4 --- src/app/auth/api-http.service.ts | 2 ++ src/app/auth/auth.service.ts | 2 +- src/app/charts/chart.component.ts | 14 +++++--- .../lab/components/city-dropdown.component.ts | 1 + src/app/services/data-export.service.spec.ts | 15 --------- src/app/services/data-export.service.ts | 17 ---------- src/app/services/image-export.service.ts | 33 ------------------- yarn.lock | 6 ++-- 10 files changed, 17 insertions(+), 79 deletions(-) delete mode 100644 src/app/services/data-export.service.spec.ts delete mode 100644 src/app/services/data-export.service.ts delete mode 100644 src/app/services/image-export.service.ts diff --git a/package.json b/package.json index df9cb86e..919ab9b4 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "ngx-clipboard": "^8.1.4", "nouislider": "^10.1.0", "rxjs": "^5.5.11", - "save-svg-as-png": "^1.4.9", + "save-svg-as-png": "^1.4.12", "zone.js": "0.8.29" }, "devDependencies": { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6f64ad83..afe683b2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,8 +44,6 @@ import { apiHttpProvider } from './auth/api-http.provider'; import { AuthService } from './auth/auth.service'; import { AuthGuard } from './auth/auth.guard'; -import { DataExportService } from './services/data-export.service'; -import { ImageExportService } from './services/image-export.service'; import { MapCellService } from './services/map-cell.service'; import { ProjectService } from './services/project.service'; @@ -104,8 +102,6 @@ const AGM_CONFIG = { apiHttpProvider, AuthService, AuthGuard, - DataExportService, - ImageExportService, MapCellService, ProjectService ] diff --git a/src/app/auth/api-http.service.ts b/src/app/auth/api-http.service.ts index ab0b5a8c..d24b669c 100644 --- a/src/app/auth/api-http.service.ts +++ b/src/app/auth/api-http.service.ts @@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'; import { ConnectionBackend, Http, Headers, Request, RequestOptions, RequestOptionsArgs, Response, URLSearchParams } from '@angular/http'; import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/catch'; +import 'rxjs/add/observable/throw'; import { ApiHttp } from 'climate-change-components'; diff --git a/src/app/auth/auth.service.ts b/src/app/auth/auth.service.ts index 43372c94..587a30c0 100644 --- a/src/app/auth/auth.service.ts +++ b/src/app/auth/auth.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { Headers, Http, RequestOptions } from '@angular/http'; import { Router } from '@angular/router'; import { Observable } from 'rxjs/Observable'; - +import 'rxjs/add/operator/catch'; import { apiHost } from '../constants'; @Injectable() diff --git a/src/app/charts/chart.component.ts b/src/app/charts/chart.component.ts index 79f2c1e8..78162007 100644 --- a/src/app/charts/chart.component.ts +++ b/src/app/charts/chart.component.ts @@ -13,6 +13,7 @@ import { import * as cloneDeep from 'lodash.clonedeep'; import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/forkJoin'; import { Subscription } from 'rxjs/Subscription'; import { @@ -31,11 +32,11 @@ import { isHistoricIndicator, isPercentileIndicator, isThresholdIndicator, + DataExportService, + ImageExportService } from 'climate-change-components'; import { AuthService } from '../auth/auth.service'; -import { DataExportService } from '../services/data-export.service'; -import { ImageExportService } from '../services/image-export.service'; import { environment } from '../../environments/environment'; @@ -45,7 +46,11 @@ import { environment } from '../../environments/environment'; */ @Component({ selector: 'ccl-chart', // if this selector is renamed, image export service must also be updated - templateUrl: './chart.component.html' + templateUrl: './chart.component.html', + providers: [ + DataExportService, + ImageExportService + ] }) export class ChartComponent implements OnChanges, OnDestroy, AfterViewInit { @@ -203,8 +208,7 @@ export class ChartComponent implements OnChanges, OnDestroy, AfterViewInit { this.dataset.name, this.scenario.name ].join('_'); - - this.imageExportService.downloadAsPNG(this.chart.indicator.name, fileName); + this.imageExportService.downloadAsPNG(this.chart.indicator.name, fileName, 'ccl-chart'); } public onExtraParamsSelected(params: IndicatorDistanceQueryParams) { diff --git a/src/app/lab/components/city-dropdown.component.ts b/src/app/lab/components/city-dropdown.component.ts index 2dd24a2e..d85c79fb 100644 --- a/src/app/lab/components/city-dropdown.component.ts +++ b/src/app/lab/components/city-dropdown.component.ts @@ -5,6 +5,7 @@ import { MapsAPILoader } from '@agm/core'; import { City } from 'climate-change-components'; import { Point } from 'geojson'; import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/catch'; import { MapCell } from '../../models/map-cell.model'; import { MapCellService } from '../../services/map-cell.service'; diff --git a/src/app/services/data-export.service.spec.ts b/src/app/services/data-export.service.spec.ts deleted file mode 100644 index 519c73c9..00000000 --- a/src/app/services/data-export.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { DataExportService } from './data-export.service'; - - -describe('CSVService', () => { - - let service: DataExportService; - - beforeEach(() => { - service = new DataExportService(); - }); - - it('should have a downloadAsJSON method', () => { - expect(service.downloadAsJSON).toBeDefined(); - }); -}); diff --git a/src/app/services/data-export.service.ts b/src/app/services/data-export.service.ts deleted file mode 100644 index e3d4affc..00000000 --- a/src/app/services/data-export.service.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Injectable } from '@angular/core'; -import * as FileSaver from 'file-saver'; - -/* - * Generates CSV - */ -@Injectable() -export class DataExportService { - - public downloadAsJSON(filename: string, data: any): void { - this.downloadFile(JSON.stringify(data), filename, 'application/json'); - } - - private downloadFile(data: string, title: string, mime: string): void { - FileSaver.saveAs(new File([data], title, {type: mime + ';charset=utf-8'})); - } -} diff --git a/src/app/services/image-export.service.ts b/src/app/services/image-export.service.ts deleted file mode 100644 index 35421235..00000000 --- a/src/app/services/image-export.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Injectable } from '@angular/core'; -import * as SaveSvg from 'save-svg-as-png'; - -/* - * Generates image of D3 chart SVG for download - */ -@Injectable() -export class ImageExportService { - - // options to pass when converting SVG to PNG - private chartOptions = { - backgroundColor: 'white', - selectorRemap: function(selector) { - // find CSS selectors mapped to parent chart - return selector.replace('ccl-chart', ''); - } - }; - - /** - * Converts chart SVG to PNG and downloads it. - * - * @param indicatorName - Name of indicator, used for SVG selector - * @param fileName - File name for download, will be suffixed with extension - */ - public downloadAsPNG(indicatorName: string, fileName: string): void { - const filename: string = fileName + '.png'; - const svg: HTMLElement = document.getElementById('chart-' + indicatorName); - // SVG might not be found if chart hasn't loaded yet - if (!svg) { return }; - - SaveSvg.saveSvgAsPng(svg, filename, this.chartOptions); - } -} diff --git a/yarn.lock b/yarn.lock index 52ba0f1e..6a744bdc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4920,9 +4920,9 @@ saucelabs@^1.5.0: dependencies: https-proxy-agent "^2.2.1" -save-svg-as-png@^1.4.9: - version "1.4.9" - resolved "https://registry.yarnpkg.com/save-svg-as-png/-/save-svg-as-png-1.4.9.tgz#0ac8e037de150e202dd80cc63061a2fe3e15199e" +save-svg-as-png@^1.4.12: + version "1.4.12" + resolved "https://registry.yarnpkg.com/save-svg-as-png/-/save-svg-as-png-1.4.12.tgz#6acaa3b542d0236d6e96ff38c1da40a6b18bc15e" sax@0.5.x: version "0.5.8"