Add Export Services from Climate Change Lab

.gitignore

@@ -16,6 +16,7 @@
 *.launch
 .settings/
 *.sublime-workspace
+.*.swp
 
 # IDE - VSCode
 .vscode/*

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [UNRELEASED]
+- Added `DataExportService` and `ImageDownloadService` to enable graph image downloads from Temperate.
 
 ## [0.3.1]
 - Added new `...IndicatorDistanceQueryParams` types for providing an optional `distance: number` parameter for Lat/Lon climate data queries.

package.json

@@ -31,9 +31,11 @@
   },
   "dependencies": {
     "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",
     "@types/geojson": "^1.0.3"
   },
   "devDependencies": {

src/lib/modules/charts/index.ts

@@ -1,3 +1,5 @@
 export { ChartsModule } from './charts.module';
+export { DataExportService } from './services/data-export.service';
+export { ImageExportService } from './services/image-export.service';
 
 export { ModelModalComponent } from './components/model-modal/model-modal.component';

src/lib/modules/charts/services/data-export.service.spec.ts

@@ -0,0 +1,15 @@
+import { DataExportService } from './data-export.service';
+
+
+describe('DataExportService', () => {
+
+    let service: DataExportService;
+
+    beforeEach(() => {
+        service = new DataExportService();
+    });
+
+    it('should have a downloadAsJSON method', () => {
+        expect(service.downloadAsJSON).toBeDefined();
+    });
+});

src/lib/modules/charts/services/data-export.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import * as FileSaver from 'file-saver';
+
+/*
+ * Generates JSON from data
+ */
+@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'}));
+    }
+}

src/lib/modules/charts/services/image-export.service.ts

@@ -0,0 +1,39 @@
+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
+     *
+     * @param parentSelector - Name of parent of chart, used to rewrite CSS selectors
+     */
+    private chartOptions(parentSelector: string) {
+        return {
+            backgroundColor: 'white',
+            selectorRemap: function(selector) {
+                // find CSS selectors mapped to parent chart
+                return selector.replace(parentSelector, '');
+            }
+        };
+    }
+
+    /**
+     * 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, selector: 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(selector));
+    }
+}

yarn.lock

@@ -2922,6 +2922,11 @@ file-loader@^1.1.5:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+file-saver@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
+  integrity sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg==
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -6990,6 +6995,11 @@ saucelabs@~1.3.0:
   dependencies:
     https-proxy-agent "^1.0.0"
 
+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"
+  integrity sha512-XK3uMu53thxds/YhdBBGClySbmeDY8txEYzOCJBUi1Ahn3U+82OyoUk8E7Plfy6GXzVjKR2EPT6EDSCAY27gew==
+
 [email protected]:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"