diff --git a/package.json b/package.json index df9cb86e..ec26a04b 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,11 @@ "@angular/router": "^4.4.7", "@types/geojson": "^7946.0.5", "bootstrap-sass": "^3.4.0", - "climate-change-components": "^0.3.1", + "climate-change-components": "^0.4.0", "core-js": "^2.6.4", "d3": "^4.13.0", "d3-tip": "^0.9.1", "enhanced-resolve": "^3.4.1", - "file-saver": "^1.3.8", "jquery": "^3.3.1", "lodash.clonedeep": "^4.5.0", "moment": "^2.24.0", @@ -49,7 +48,6 @@ "ngx-clipboard": "^8.1.4", "nouislider": "^10.1.0", "rxjs": "^5.5.11", - "save-svg-as-png": "^1.4.9", "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..7b1829e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -908,15 +908,18 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" -climate-change-components@^0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/climate-change-components/-/climate-change-components-0.3.1.tgz#445cbd7de892293612d020ea148776ab4bb12137" +climate-change-components@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/climate-change-components/-/climate-change-components-0.4.0.tgz#d4aac7f8c117df5d9193fc4529ffb90b011a032a" + integrity sha512-YNzKapAXplwdJomUBrXV50SjmCamlF/W3zYS0nFZwo+KYIK02RZ75+mHkv5uVV/7vBH1ikNQZK62XrzkOdE41g== dependencies: "@types/geojson" "^1.0.3" d3 "^4.10.0" + file-saver "^1.3.8" jquery "^3.2.1" lodash "^4.17.4" moment "^2.18.1" + save-svg-as-png "^1.4.12" cliui@^2.1.0: version "2.1.0" @@ -4920,9 +4923,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"