Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

Commit

Permalink
Merge pull request #21 from flibbertigibbet/feature/select-model
Browse files Browse the repository at this point in the history 
Feature/select model
  • Loading branch information
@flibbertigibbet
flibbertigibbet authored Aug 31, 2016
2 parents 316aa6a + 778de54 commit 64ea1bf
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 165 deletions.
4 changes: 4 additions & 0 deletions example/constants.ts.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
4 changes: 2 additions & 2 deletions src/app/charts/line-graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import * as $ from 'jquery';
export class LineGraphComponent {
public data: ChartData[];
public extractedData: Array<DataPoint>;
public indicator: String;
public indicator: string;
public trendline: Boolean;
public min: Boolean;
public max: Boolean;
Expand All @@ -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<String>; // Min, max date range
private xRange: Array<string>; // Min, max date range
private xData: Array<number>; // Stores x axis data as integers rather than dates, necessary for trendline math
private yData: Array<number>; // Stores just y axis data, multi-use
private trendData: Array<DataPoint>; // Formatted data for the trendline
Expand Down
172 changes: 31 additions & 141 deletions src/app/lab/lab.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<div class="nav-left">
<div class="dropdown">
<i class="icon-globe"></i>
<label>City</label>
<input auto-complete
[(ngModel)]="cityModel"
placeholder="Enter your city"
Expand All @@ -22,34 +23,36 @@
[value-changed]="onCitySelected()"
min-chars="2" />
</div>
<div class="dropdown">
<button class="button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

<!-- scenario selector -->
<div dropdown class="dropdown">
<button dropdownToggle class="button dropdown-toggle" type="button"
id="scenarioDropdown" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
<i class="icon-flash"></i>
RCP 4.5
{{ selectedScenario }}
<i class="icon-angle-down caret"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<ul dropdownMenu class="dropdown-menu" aria-labelledby="scenarioDropdown">
<li *ngFor="let scenario of scenarios">
<a href="#" (click)="updateScenario(scenario)">{{ scenario.name }}</a>
</li>
</ul>
</div>

<!-- climate model selector -->
<div class="dropdown">
<button class="button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<button class="button" type="button" data-target="#modelOptions"
aria-haspopup="true" aria-expanded="true"
(click)="smModal.show()">
<i class="icon-flash"></i>
All Models
<i class="icon-angle-down caret"></i>
{{ selectedClimateModels }}
<label>
<a href="#">Select Models</a>
</label>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="active"><a href="#">All Models</a></li>
<li><a href="#">Average</a></li>
<li><a href="#">1st Quartile</a></li>
<li><a href="#">2nd Quartile</a></li>
<li><a href="#">3rd Quartile</a></li>
<li><a href="#" data-toggle="modal" data-target="#modelOptions">Select Models</a></li>
</ul>
</div>

</div>
<div class="nav-right">
<button class="button button-default">
Expand All @@ -59,139 +62,26 @@
</nav>
<charts class="charts scrollable"></charts>
</div>
</div>
</div>
<div class="modal modal-small" id="modelOptions" tabindex="-1" role="dialog" aria-labelledby="modelOptions">
<div class="modal-dialog" role="document">
<div bsModal #smModal="bs-modal" class="modal modal-small" id="modelOptions" tabindex="-1"
role="dialog" aria-labelledby="modelOptions" aria-hidden="true" [config]="{backdrop: false}">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="button button-modal-close" data-dismiss="modal" aria-label="Close">
<button type="button" class="button button-modal-close" data-dismiss="bs-modal"
(click)="updateClimateModels(); smModal.hide()" aria-label="Close">
<span class="icon icon-cancel"></span>
</button>
<h4 class="modal-title">Select Models</h4>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 1
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 2
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 3
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 4
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 5
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 6
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 7
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 8
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 9
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 10
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 11
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 12
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 13
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 14
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 15
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 16
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 17
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 18
</label>
</div>
<div>
<label>
<input type="checkbox" name="checkbox" value="value">
Model 19
</label>
</div>
<div>
<div *ngFor="let climateModel of climateModels">
<label>
<input type="checkbox" name="checkbox" value="value">
Model 20
<input type="checkbox" name="checkbox" value="value" [(ngModel)]="climateModel.selected">
{{ climateModel.name }}
</label>
</div>
</div>
<div class="modal-footer">
<button class="button">Update</button>
<button class="button" (click)="updateClimateModels(); smModal.hide();" data-dismiss="bs-modal">Update</button>
</div>
</div>
</div>
Expand Down
73 changes: 65 additions & 8 deletions src/app/lab/lab.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,51 @@
* Climate Change Lab
* App Component
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { NavbarComponent } from '../navbar/navbar.component';
import { Component, OnInit, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { ChartsContainerComponent } from '../charts/charts-container.component';
import { ClimateModel, Scenario } from '../models/chart.models';
import { ChartService } from '../services/chart.service';

import { AutoCompleteDirective } from "../auto-complete";
import { AutoCompleteComponent } from "../auto-complete";

import { apiHost, defaultCity } from "../constants";
import { DROPDOWN_DIRECTIVES, MODAL_DIRECTIVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';

import { apiHost, defaultCity, defaultScenario } from "../constants";
import { NavbarComponent } from '../navbar/navbar.component';

import * as _ from 'lodash';


@Component({
selector: 'cc-lab',
directives: [NavbarComponent, SidebarComponent, ChartsContainerComponent],
directives: [DROPDOWN_DIRECTIVES, MODAL_DIRECTIVES,
NavbarComponent, SidebarComponent, ChartsContainerComponent],
encapsulation: ViewEncapsulation.None,
templateUrl: './lab.component.html'
templateUrl: './lab.component.html',
viewProviders: [BS_VIEW_PROVIDERS]
})
export class LabComponent {
export class LabComponent extends OnInit {
name = 'Climate Lab';

constructor(private chartService: ChartService) {
this.cityModel = this.cityValueFormatter(defaultCity);
constructor(viewContainerRef: ViewContainerRef, private chartService: ChartService) {
super();

// TODO: does not work
// necessary to catch application root view container ref. see:
// https://valor-software.com/ng2-bootstrap/#/modals
this.viewContainerRef = viewContainerRef;
}

public apiCities: string = apiHost + "city/?search=:keyword&format=json";
public cityModel;
public climateModels: ClimateModel[];

public scenarios: Scenario[];
public selectedScenario: string;

public viewContainerRef: ViewContainerRef;

// custom formatter to display list of options as City, State
public cityListFormatter(data: any): string {
Expand All @@ -52,4 +71,42 @@ export class LabComponent {
this.chartService.updateCity(value);
};
}

public updateClimateModels() {
let models: string[] = this.climateModels.filter(function(model) {
return model.selected;
}).map(function(model) {
return model.name;
});

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 => {
this.climateModels = data;
});
}

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

ngOnInit() {
this.cityModel = this.cityValueFormatter(defaultCity);
this.selectedScenario = defaultScenario;
this.getScenarios();
this.getClimateModels();
}
}
16 changes: 13 additions & 3 deletions src/app/models/chart.models.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
export class ChartData {
indicator: String;
indicator: string;
data: Array<DataPoint>;
}

export class DataPoint {
date: String;
date: string;
value: Number;
}
}

export class ClimateModel {
name: string;
selected: boolean;
}

export class Scenario {
name: string;
description: string;
}
Loading

0 comments on commit 64ea1bf

Please sign in to comment.