From 23be76282fbfc4ade94337835f5f41fb842cc01a Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Tue, 30 Aug 2016 13:00:21 -0400 Subject: [PATCH 01/11] Load list of scenario options Also wire up to one of the prototype select fields, but styling is broken. --- src/app/lab/lab.component.html | 18 +++++++++++++++--- src/app/lab/lab.component.ts | 22 ++++++++++++++++++---- src/app/models/chart.models.ts | 6 +++++- src/app/services/chart.service.ts | 30 +++++++++++++++++++++++++++--- 4 files changed, 65 insertions(+), 11 deletions(-) diff --git a/src/app/lab/lab.component.html b/src/app/lab/lab.component.html index b64c72bf..59315e2a 100755 --- a/src/app/lab/lab.component.html +++ b/src/app/lab/lab.component.html @@ -11,6 +11,7 @@
+
+
+
+ + + +
+
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- +
diff --git a/src/app/lab/lab.component.ts b/src/app/lab/lab.component.ts index 92c54ee2..781af05a 100755 --- a/src/app/lab/lab.component.ts +++ b/src/app/lab/lab.component.ts @@ -61,6 +61,10 @@ export class LabComponent extends OnInit { this.chartService.updateClimateModels(models); } + public updateClimateModels() { + console.log('hey!'); + } + getClimateModels() { this.chartService.loadClimateModels(); this.chartService.getClimateModels().subscribe(data => { From aa2d8931ba8d2c94539fbf1b7e29b7d2667acfc2 Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Tue, 30 Aug 2016 18:27:56 -0400 Subject: [PATCH 05/11] Implement modal list --- src/app/lab/lab.component.html | 18 +++--------------- src/app/lab/lab.component.ts | 16 +++++++++------- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/app/lab/lab.component.html b/src/app/lab/lab.component.html index 70753d1a..e54544db 100755 --- a/src/app/lab/lab.component.html +++ b/src/app/lab/lab.component.html @@ -79,22 +79,10 @@

{{ selectedClimateModels }}

Select Models

-
+
-
-
- -
-
-
diff --git a/src/app/lab/lab.component.ts b/src/app/lab/lab.component.ts index 781af05a..b990d5c8 100755 --- a/src/app/lab/lab.component.ts +++ b/src/app/lab/lab.component.ts @@ -13,6 +13,8 @@ import { AutoCompleteComponent } from "../auto-complete"; import { apiHost, defaultCity } from "../constants"; +import * as _ from 'lodash'; + @Component({ selector: 'cc-lab', @@ -31,8 +33,6 @@ export class LabComponent extends OnInit { public cityModel; public climateModels: ClimateModel[]; - public selectedClimateModels; - // custom formatter to display list of options as City, State public cityListFormatter(data: any): string { let html: string = ""; @@ -57,12 +57,14 @@ export class LabComponent extends OnInit { }; } - public onClimateModelChange(models: String[]) { - this.chartService.updateClimateModels(models); - } - public updateClimateModels() { - console.log('hey!'); + let models: String[] = this.climateModels.filter(function(model) { + return model.selected; + }).map(function(model) { + return model.name; + }); + + this.chartService.updateClimateModels(models); } getClimateModels() { From 7a4541272c43037d8b2e4570629eae132e04728b Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Tue, 30 Aug 2016 18:29:15 -0400 Subject: [PATCH 06/11] Add selected property to model Used for checkbox filtering. --- src/app/models/chart.models.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/models/chart.models.ts b/src/app/models/chart.models.ts index 51381abe..cf0c2ed2 100644 --- a/src/app/models/chart.models.ts +++ b/src/app/models/chart.models.ts @@ -10,4 +10,5 @@ export class DataPoint { export class ClimateModel { name: String; + selected: boolean; } From 5da917abf0a9aba134365dadd59eb0238da4f958 Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Wed, 31 Aug 2016 10:57:50 -0400 Subject: [PATCH 07/11] Add constants for remaining chart query options --- example/constants.ts.example | 4 ++++ src/app/lab/lab.component.html | 18 ++---------------- src/app/services/chart.service.ts | 15 +++++++-------- 3 files changed, 13 insertions(+), 24 deletions(-) diff --git a/example/constants.ts.example b/example/constants.ts.example index c3d5b060..71f622fc 100644 --- a/example/constants.ts.example +++ b/example/constants.ts.example @@ -5,5 +5,9 @@ export const defaultCity = {"id":7, "properties":{"name":"Philadelphia","admin":"PA"}}; +export const defaultScenario = 'RCP85'; +export const defaultVariable = 'pr'; +export const defaultYears = 2070; + export const apiHost = "https://staging.api.futurefeelslike.com/api/"; export const apiToken = "YOUR_API_TOKEN_HERE"; diff --git a/src/app/lab/lab.component.html b/src/app/lab/lab.component.html index e54544db..41b7a212 100755 --- a/src/app/lab/lab.component.html +++ b/src/app/lab/lab.component.html @@ -23,7 +23,7 @@ [value-changed]="onCitySelected()" min-chars="2" /> - +
- - - +
+
- -
- + +
-
+
diff --git a/src/app/lab/lab.component.ts b/src/app/lab/lab.component.ts index aafaf306..13bf60ee 100755 --- a/src/app/lab/lab.component.ts +++ b/src/app/lab/lab.component.ts @@ -70,6 +70,11 @@ export class LabComponent extends OnInit { this.chartService.updateClimateModels(models); } + public updateScenario(scenario: Scenario) { + this.selectedScenario = scenario.name; + this.chartService.updateScenario(scenario.name); + } + getClimateModels() { this.chartService.loadClimateModels(); this.chartService.getClimateModels().subscribe(data => { @@ -80,9 +85,9 @@ export class LabComponent extends OnInit { getScenarios() { this.chartService.loadScenarios(); this.chartService.getScenarios().subscribe(data => { + // TODO: it would be nice to populate a tooltip for the scenario list items with their + // descriptions once angular2-bootstrap is in place this.scenarios = data; - console.log('got scenarios:'); - console.log(this.scenarios); }); } From 47729a2f3c76cc7c3039a6f131773ba9b6532aec Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Wed, 31 Aug 2016 12:27:35 -0400 Subject: [PATCH 10/11] Fix linter warnings Mostly changing references to `String` wrapper to `string`. --- example/constants.ts.example | 2 +- src/app/charts/line-graph.component.ts | 4 ++-- src/app/lab/lab.component.ts | 5 +++-- src/app/models/chart.models.ts | 10 +++++----- src/app/services/chart.service.ts | 7 ++++--- 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/example/constants.ts.example b/example/constants.ts.example index 71f622fc..d3da8cf5 100644 --- a/example/constants.ts.example +++ b/example/constants.ts.example @@ -7,7 +7,7 @@ export const defaultCity = {"id":7, "properties":{"name":"Philadelphia","admin":"PA"}}; export const defaultScenario = 'RCP85'; export const defaultVariable = 'pr'; -export const defaultYears = 2070; +export const defaultYears = '2070'; export const apiHost = "https://staging.api.futurefeelslike.com/api/"; export const apiToken = "YOUR_API_TOKEN_HERE"; diff --git a/src/app/charts/line-graph.component.ts b/src/app/charts/line-graph.component.ts index 33e3d605..8cdb604b 100644 --- a/src/app/charts/line-graph.component.ts +++ b/src/app/charts/line-graph.component.ts @@ -17,7 +17,7 @@ import * as $ from 'jquery'; export class LineGraphComponent { public data: ChartData[]; public extractedData: Array; - public indicator: String; + public indicator: string; public trendline: Boolean; public min: Boolean; public max: Boolean; @@ -33,7 +33,7 @@ export class LineGraphComponent { private yScale; // D3 scale in Y private htmlElement; // Host HTMLElement private valueline; // Base for a chart line - private xRange: Array; // Min, max date range + private xRange: Array; // Min, max date range private xData: Array; // Stores x axis data as integers rather than dates, necessary for trendline math private yData: Array; // Stores just y axis data, multi-use private trendData: Array; // Formatted data for the trendline diff --git a/src/app/lab/lab.component.ts b/src/app/lab/lab.component.ts index 13bf60ee..5a95be91 100755 --- a/src/app/lab/lab.component.ts +++ b/src/app/lab/lab.component.ts @@ -12,6 +12,7 @@ import { AutoCompleteDirective } from "../auto-complete"; import { AutoCompleteComponent } from "../auto-complete"; import { apiHost, defaultCity, defaultScenario } from "../constants"; +import { NavbarComponent } from '../navbar/navbar.component'; import * as _ from 'lodash'; @@ -34,7 +35,7 @@ export class LabComponent extends OnInit { public climateModels: ClimateModel[]; public scenarios: Scenario[]; - public selectedScenario: String; + public selectedScenario: string; // custom formatter to display list of options as City, State public cityListFormatter(data: any): string { @@ -61,7 +62,7 @@ export class LabComponent extends OnInit { } public updateClimateModels() { - let models: String[] = this.climateModels.filter(function(model) { + let models: string[] = this.climateModels.filter(function(model) { return model.selected; }).map(function(model) { return model.name; diff --git a/src/app/models/chart.models.ts b/src/app/models/chart.models.ts index 7393eae1..7c32ee59 100644 --- a/src/app/models/chart.models.ts +++ b/src/app/models/chart.models.ts @@ -1,19 +1,19 @@ export class ChartData { - indicator: String; + indicator: string; data: Array; } export class DataPoint { - date: String; + date: string; value: Number; } export class ClimateModel { - name: String; + name: string; selected: boolean; } export class Scenario { - name: String, - description: String + name: string; + description: string; } diff --git a/src/app/services/chart.service.ts b/src/app/services/chart.service.ts index b3dbcd57..aec3e789 100644 --- a/src/app/services/chart.service.ts +++ b/src/app/services/chart.service.ts @@ -19,6 +19,7 @@ export class ChartService { dataQueryOptions = { cityId: defaultCity.id, + models: null, // default to all scenario: defaultScenario, variables: defaultVariable, years: defaultYears @@ -179,17 +180,17 @@ export class ChartService { this.loadChartData(); } - public updateClimateModels(models: String[]): void { + public updateClimateModels(models: string[]): void { if (models.length) { this.dataQueryOptions.models = models.join(','); } else if (this.dataQueryOptions.models) { // default to all by specifying none - delete this.dataQueryOptions.models; + this.dataQueryOptions.models = null; } this.loadChartData(); } - public updateScenario(scenario: String): void { + public updateScenario(scenario: string): void { this.dataQueryOptions.scenario = scenario; this.loadChartData(); } From 778de5418201a757286176fae3e5860a11ed85b6 Mon Sep 17 00:00:00 2001 From: Kathryn Killebrew Date: Wed, 31 Aug 2016 15:09:02 -0400 Subject: [PATCH 11/11] Update for ng2-bootstrap Fix broken bootstrap components by switching to ng2-bootstrap directive syntax. Backdrop on modal is disabled as workaround for ng2-bootstrap/#854. --- src/app/lab/lab.component.html | 26 +++++++++++++++----------- src/app/lab/lab.component.ts | 19 +++++++++++++++---- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/app/lab/lab.component.html b/src/app/lab/lab.component.html index 258bc8e2..dfc7b575 100755 --- a/src/app/lab/lab.component.html +++ b/src/app/lab/lab.component.html @@ -25,14 +25,15 @@ -
- -
-