Merge pull request #17 from azavea/feature/GraphControls

Feature/graph controls

.gitignore

@@ -3,4 +3,6 @@
 
 # Node
 npm-debug.log
-node_modules/
+node_modules/
+
+coverage/

package.json

@@ -38,13 +38,15 @@
     "@angular/platform-server": "2.0.0-rc.5",
     "@angular/router": "3.0.0-rc.1",
     "angular2-moment": "1.0.0-beta.1",
+    "angular2-ui-switch": "^1.1.0",
     "bootstrap": "^3.3.6",
     "core-js": "^2.4.0",
     "d3": "^4.1.1",
     "d3-tip": "^0.6.7",
     "es6-shim": "^0.35.0",
     "jquery": "2.2.2",
     "lodash": "^4.8.2",
+    "ng2-bootstrap": "^1.0.24",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "~0.6.12"
   },

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpModule } from '@angular/http';
 
 // 3rd party modules
 import { Ng2AutoCompleteModule } from './auto-complete/ng2AutoComplete.module';
+import { UiSwitchModule } from 'angular2-ui-switch';
 
 // Platform and Environment providers/directives/pipes
 import { PLATFORM_PROVIDERS } from '../platform/browser';
@@ -30,7 +31,8 @@ import { IndicatorsService } from './services/indicators.service';
     FormsModule,
     HttpModule,
     routing,
-    Ng2AutoCompleteModule
+    Ng2AutoCompleteModule,
+    UiSwitchModule
   ],
   providers: [
     appRoutingProviders,

src/app/charts/chart.component.html

@@ -1,13 +1,45 @@
 <div class="chart-heading">
-  <h2 class="chart-label">
+    <h2 class="chart-label">
     {{indicator}}
-  </h2>
-  <div class="chart-actions">
-    <button class="button button-link" data-toggle="tooltip" data-placement="bottom" data-delay="300" title="" data-original-title="Export"><i class="icon icon-export"></i></button>
-    <button class="button button-link" data-toggle="tooltip" data-placement="bottom" data-delay="300" title="" data-original-title="Options"><i class="icon icon-cog"></i></button>
-  </div>
+    </h2>
+    <div class="chart-actions">
+        <button class="button button-link" data-toggle="tooltip" data-placement="bottom" data-delay="300" title="" data-original-title="Export"><i class="icon icon-export"></i></button>
+        <button class="button button-link" data-toggle="tooltip" data-placement="bottom" data-delay="300" title="" data-original-title="Options"><i class="icon icon-cog"></i></button>
+    </div>
 </div>
 <div class="chart-body">
-  <line-graph [data]="chartData" [indicator]="indicator" [trendline]="trendline"></line-graph>
-  <button (click)="toggleTrendline()">Trendline</button>
+    <line-graph
+        [data]="chartData"
+        [indicator]="indicator"
+        [trendline]="trendline"
+        [min]="min"
+        [max]="max"
+        [minVal]="minVal"
+        [maxVal]="maxVal">
+    </line-graph>
+</div>
+<div class="chart-controls">
+    <div class="controls-header">
+        <h5 class="controls-label">Options</h5>
+        <div class="options-icon" (click)="isCollapsed = !isCollapsed">
+            <i class="icon-minus" *ngIf="!isCollapsed"></i>
+            <i class="icon-plus" *ngIf="isCollapsed"></i>
+        </div>
+
+    </div>
+    <div class="controls-body" [collapse]="isCollapsed">
+        <ui-switch (change)="toggleTrendline()" size="small"></ui-switch>Show Trendline
+        <ui-switch (change)="toggleMin()" size="small"></ui-switch>Show Min
+        <input
+            type="number"
+            step="any"
+            placeholder="0"
+            [(ngModel)]="minVal">
+        <ui-switch (change)="toggleMax()" size="small"></ui-switch>Show Max
+        <input
+            type="number"
+            step="any"
+            placeholder="0"
+            [(ngModel)]="maxVal">
+    </div>
 </div>

src/app/charts/chart.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { CollapseDirective } from 'ng2-bootstrap/ng2-bootstrap';
 
 import { LineGraphComponent } from './line-graph.component';
 
@@ -8,18 +9,37 @@ import { LineGraphComponent } from './line-graph.component';
  */
 @Component({
   selector: 'chart',
-  directives: [LineGraphComponent],
+  directives: [LineGraphComponent, CollapseDirective],
   inputs: ['indicator', 'chartData'],
   templateUrl: './chart.component.html'
 })
+
 export class ChartComponent {
-  private trendline: Boolean;
+  private isCollapsed: boolean;
+  private trendline: boolean;
+  private min: boolean;
+  private max: boolean;
+  private minVal: number;
+  private maxVal: number;
 
   toggleTrendline() {
     this.trendline = !this.trendline;
   }
 
+  toggleMin() {
+    this.min = !this.min;
+  }
+
+  toggleMax() {
+    this.max = !this.max;
+  }
+
   constructor() {
-    this.trendline = false;
+    this.isCollapsed = false;
+    this.min = false;
+    this.max = false;
+    this.minVal = 0;
+    this.maxVal = 0;
   }
 }
+

src/app/charts/line-graph.component.ts

@@ -12,13 +12,17 @@ import * as $ from 'jquery';
   selector: 'line-graph',
   encapsulation: ViewEncapsulation.None,
   template: `<ng-content></ng-content>`,
-  inputs: [ 'data', 'indicator', 'trendline' ]
+  inputs: [ 'data', 'indicator', 'trendline', 'min', 'max', 'minVal', 'maxVal' ]
 })
 export class LineGraphComponent {
   public data: ChartData[];
   public extractedData: Array<DataPoint>;
   public indicator: String;
   public trendline: Boolean;
+  public min: Boolean;
+  public max: Boolean;
+  public minVal: number;
+  public maxVal: number;
 
   private host;                          // D3 object referebcing host dom object
   private svg;                           // SVG in which we will print our chart
@@ -53,6 +57,8 @@ export class LineGraphComponent {
     this.drawYAxis();
     this.populate();
     this.drawTrendLine();
+    // Temporarily here to show chart control statuses
+    console.log("Min: " + this.min, this.minVal + "; Max: " + this.max, this.maxVal);
   }
 
   private filterData(): void {

src/app/lab/lab.component.html

@@ -20,7 +20,7 @@
                 display-property-name="name"
                 path-to-data="features"
                 [value-changed]="onCitySelected()"
-                min-chars="2" />selected: {{model4 | json}}
+                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">

src/assets/sass/components/_chart.scss

@@ -73,5 +73,24 @@ chart {
     stroke-width: 1px;
     opacity: .7;
   }
-}
 
+  .chart-controls {
+    color: black;
+
+    .controls-header {
+      .controls-label {
+       display: inline-block;
+      }
+
+      .options-icon {
+        display: inline-block;
+      }
+    }
+
+    .controls-body {
+      input {
+        width: 50px;
+      }
+    }
+  }
+}

src/vendor.browser.ts

@@ -13,7 +13,6 @@ import 'rxjs/add/operator/mergeMap';
 
 // 3rd Party Libraries
 import 'jquery';
-import 'bootstrap';
 import 'lodash';
 import 'd3';
 import 'd3-tip';