Merge pull request #1210 from azavea/feature/dpd/add-chart-png-export

Add PNG Chart export

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 ### Added
  - Added ability to remove users from an organization to the settings page
+ - Added ability for users to download charts as PNGs
 ### Fixed
  - Fixed bug where organization dropdown could be shown to a user with no organizations
  - Fixed a bug where users can invite the same user to their organization twice.

src/angular/planit/package.json

@@ -26,7 +26,7 @@
     "@angular/router": "~4.4.5",
     "bootstrap": "^3.3.7",
     "bootstrap-sass": "^3.3.7",
-    "climate-change-components": "0.3.1",
+    "climate-change-components": "0.4.0",
     "core-js": "^2.4.1",
     "difflib": "^0.2.4",
     "inert-polyfill": "^0.2.5",

src/angular/planit/src/app/shared/chart/chart.component.html

@@ -51,5 +51,17 @@
             <span *ngIf="dataset.name === 'NEX-GDDP'">Derived from the NASA Earth Exchange Global Daily Downscaled Projections (NEX-GDDP) dataset. Data available at <a target="_blank" href="https://nex.nasa.gov/nex/projects/1356/">https://nex.nasa.gov/nex/projects/1356/<i class="icon-link-ext-alt"></i></a>.</span>
             <span *ngIf="dataset.name === 'LOCA'">Downscaled from CMIP5, using the Localized Constructed Analogs (LOCA) statistical technique. Data available at <a target="_blank" href="http://loca.ucsd.edu">loca.ucsd.edu<i class="icon-link-ext-alt"></i></a>.</span>
         </div>
+
+        <div class="chart-options buttons">
+            <div class="chart-options-body">
+                <div class="chart-options-group btn-group">
+                    <button class="button" type="button"
+                        id="exportDropUp" (click)="onDownloadImageClicked()">
+                        <i class="icon icon-download"></i>
+                        Download
+                    </button>
+                </div>
+            </div>
+        </div>
     </div>
 </div>

src/angular/planit/src/app/shared/chart/chart.component.ts

@@ -16,14 +16,16 @@ import {
   ChartData,
   ChartService,
   ClimateModel,
+  DataExportService,
   Dataset,
+  ImageExportService,
   Indicator,
   IndicatorDistanceQueryParams,
   IndicatorQueryParams,
   IndicatorRequestOpts,
   IndicatorService,
   Scenario,
-  TimeAggParam
+  TimeAggParam,
 } from 'climate-change-components';
 
 import { environment } from '../../../environments/environment';
@@ -35,7 +37,11 @@ import { Point } from '../geojson';
  */
 @Component({
   selector: 'app-chart',
-  templateUrl: './chart.component.html'
+  templateUrl: './chart.component.html',
+  providers: [
+    DataExportService,
+    ImageExportService
+  ]
 })
 export class ChartComponent implements OnChanges, OnDestroy, OnInit {
 
@@ -85,6 +91,8 @@ export class ChartComponent implements OnChanges, OnDestroy, OnInit {
   private dataSubscription: Subscription;
 
   constructor(private chartService: ChartService,
+              private dataExportService: DataExportService,
+              private imageExportService: ImageExportService,
               private indicatorService: IndicatorService) {}
 
   // Mousemove event must be at this level to listen to mousing over rect#overlay
@@ -166,6 +174,15 @@ export class ChartComponent implements OnChanges, OnDestroy, OnInit {
     });
   }
 
+  onDownloadImageClicked() {
+    const fileName: string = [
+      this.indicator.name,
+      this.dataset.name,
+      this.scenario.name
+    ].join('_');
+    this.imageExportService.downloadAsPNG(this.indicator.name, fileName, 'app-chart');
+  }
+
   public onExtraParamsSelected(params: IndicatorQueryParams) {
     this.extraParams = params;
     this.extraParamsChanged.emit(this.extraParams);