Create and use HISTORIC_RANGE_DEFAULT in extra params components

CHANGELOG.md

@@ -5,6 +5,8 @@ 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]
+- PercentileHistoricComponent and HistoricComponent now automatically choose a sensible dropdown
+  default for the historic baseline parameter
 
 ## [0.2.1] - 2017-11-07
 ### Added

src/lib/modules/api/models/historic-range.model.ts

@@ -1,3 +1,4 @@
+
 export interface HistoricRange {
   start_year: string;
   end_year: string;

src/lib/modules/charts/components/extra-params/historic.component.ts

@@ -21,10 +21,7 @@ export class HistoricComponent implements AfterViewInit, OnInit {
     @Output() historicParamSelected = new EventEmitter<HistoricIndicatorQueryParams>();
 
     historicForm: FormGroup;
-    public historicRangeOptions: string[] = [];
-
-    // default form values
-    private defaultHistoric = null;
+    public historicRangeOptions: number[] = [];
 
     constructor(private formBuilder: FormBuilder,
                 private historicRangeService: HistoricRangeService) {}
@@ -45,7 +42,7 @@ export class HistoricComponent implements AfterViewInit, OnInit {
 
     createForm() {
         this.historicForm = this.formBuilder.group({
-            historicCtl: [this.extraParams.historic_range || this.defaultHistoric],
+            historicCtl: [this.extraParams.historic_range],
         });
 
         this.historicForm.valueChanges.debounceTime(700).subscribe(form => {
@@ -57,9 +54,11 @@ export class HistoricComponent implements AfterViewInit, OnInit {
 
     getHistoricRanges() {
         this.historicRangeService.list().subscribe(data => {
-            this.historicRangeOptions = data.map(h => h.start_year);
-            // add empty option, as this is not a required parameter
-            this.historicRangeOptions.unshift('');
+            this.historicRangeOptions = data.map(h => parseInt(h.start_year, 10));
+            if (!this.extraParams.historic_range) {
+              const latestHistoricRange = Math.max(...this.historicRangeOptions);
+              this.historicForm.setValue({historicCtl: latestHistoricRange});
+            }
         });
     }
 }

src/lib/modules/charts/components/extra-params/percentile-historic.component.ts

@@ -21,10 +21,9 @@ export class PercentileHistoricComponent implements AfterViewInit, OnInit {
     @Output() percentileHistoricParamSelected = new EventEmitter<PercentileHistoricIndicatorQueryParams>();
 
     percentileHistoricForm: FormGroup;
-    public historicRangeOptions: string[] = [];
+    public historicRangeOptions: number[] = [];
 
     // default form values
-    private defaultHistoric = null;
     private defaultPercentile = 50;
 
     constructor(private formBuilder: FormBuilder,
@@ -47,7 +46,7 @@ export class PercentileHistoricComponent implements AfterViewInit, OnInit {
 
     createForm() {
         this.percentileHistoricForm = this.formBuilder.group({
-            historicCtl: [this.extraParams.historic_range || this.defaultHistoric],
+            historicCtl: [this.extraParams.historic_range],
             percentileCtl: [this.extraParams.percentile || this.defaultPercentile, Validators.required]
         });
 
@@ -65,9 +64,14 @@ export class PercentileHistoricComponent implements AfterViewInit, OnInit {
 
     getHistoricRanges() {
         this.historicRangeService.list().subscribe(data => {
-            this.historicRangeOptions = data.map(h => h.start_year);
-            // add empty option, as this is not a required parameter
-            this.historicRangeOptions.unshift('');
+            this.historicRangeOptions = data.map(h => parseInt(h.start_year, 10));
+            if (!this.extraParams.historic_range) {
+              const latestHistoricRange = Math.max(...this.historicRangeOptions);
+              this.percentileHistoricForm.setValue({
+                historicCtl: latestHistoricRange,
+                percentileCtl: this.percentileHistoricForm.controls.percentileCtl.value
+              });
+            }
         });
     }
 }