Incorporate chart data download services

- Upgrades to latest version of save-svg-as-png to fix an issue with
downloading PNGs
- Adds a `selector` parameter to ImageExportService.downloadAsPNG() that
can be used to dynamically remap CSS selectors; the previous value was
hardcoded such that it worked only in the Lab.

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));
+    }
+}