Adding d3 horizontal bar chart using dummy data

package.json

@@ -34,6 +34,7 @@
     "angular-in-memory-web-api": "~0.2.4",
     "bootstrap": "3.3.7",
     "core-js": "^2.4.1",
+    "d3": "4.4.0",
     "jquery": "3.1.0",
     "js-cookie": "^2.1.0",
     "lodash": "^4.11.2",
@@ -46,28 +47,30 @@
     "zone.js": "^0.7.8"
   },
   "devDependencies": {
+    "@types/d3": "^4.4.0",
+    "@types/jasmine": "2.5.36",
+    "@types/node": "^6.0.46",
+    "bootstrap": "3.3.7",
+    "canonical-path": "0.0.2",
     "concurrently": "^3.1.0",
-    "lite-server": "^2.2.2",
-    "typescript": "~2.0.10",
+    "d3": "4.4.0",
+    "del": "^2.1.0",
     "gulp": "3.9.1",
-    "gulp-typescript": "^2.8.0",
     "gulp-less": "^3.3.0",
-    "bootstrap": "3.3.7",
-    "ng2-bootstrap": "1.4.2",
-    "del": "^2.1.0",
-    "canonical-path": "0.0.2",
+    "gulp-typescript": "^2.8.0",
     "http-server": "^0.9.0",
-    "tslint": "^3.15.1",
-    "lodash": "^4.16.4",
     "jasmine-core": "~2.4.1",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lite-server": "^2.2.2",
+    "lodash": "^4.16.4",
+    "ng2-bootstrap": "1.4.2",
     "protractor": "~4.0.14",
     "rimraf": "^2.5.4",
-    "@types/node": "^6.0.46",
-    "@types/jasmine": "2.5.36"
+    "tslint": "^3.15.1",
+    "typescript": "~2.0.10"
   }
 }

src/app.module.ts

@@ -22,6 +22,8 @@ import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { campaignSlice } from './reducers/campaignreducer';
 
+import { BarGraph } from './directives/d3.directive';
+
 // import { CouncilListActions } from './common/enum';
 
 
@@ -38,7 +40,7 @@ import { campaignSlice } from './reducers/campaignreducer';
     ],
   declarations: [ AppComponent, HomepageComponent, AboutPageComponent, MayorListComponent,
   CouncilListComponent, CandidateDetailComponent,
-  FooterComponent, HeaderComponent, NotFoundComponent ],
+  FooterComponent, HeaderComponent, NotFoundComponent, BarGraph ],
   bootstrap:    [ AppComponent  ],
   providers: [{provide: APP_BASE_HREF, useValue : '/' }, LeverageApiProxy]
 })

src/candidateDetail/candidatedetail.component.ts

@@ -1,9 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { CampaignInfo } from './../models/common/campaign.model';
+import { Component, OnInit, Directive, ViewChild, ElementRef } from '@angular/core';
+// import { CampaignInfo } from './../models/common/campaign.model';
 import { CandidateListService } from '../candidatelist/services/candidatelist.service';
 import { Store, Action } from '@ngrx/store';
 import { LeverageAppStore } from '../store.interface';
 
+//  import { BarGraph } from './../directives/d3.directive';
+ import * as D3 from "d3";
+
 @Component({
   selector: 'leverage-candidate-detail',
   template: `
@@ -25,31 +28,46 @@ import { LeverageAppStore } from '../store.interface';
       <div class="col-md-10">
         <h2>{{ campaign[0].campaign.campaigns[0].candidate_position}}</h2>
         <p>{{ campaign[0].campaign.campaigns[0].election_year}} {{ campaign[0].campaign.campaigns[0].election_cycle}}</p>
-        <div class="heat-map">
-          <p>Heat Map Goes Here</p>
+        <div>
+        <div class="chart-item">{{ campaign[0].campaign.campaigns[0].campaign_summary }}}</div>
+        <div #d3Chart></div>
         </div>
       </div>
     </div>
   </div>
 </div>`,
-providers: [CandidateListService]
+providers: [CandidateListService],
 })
 
 export class CandidateDetailComponent implements OnInit  {
-  campaign: CampaignInfo[] = [];
+  @ViewChild('d3Chart') d3Chart: ElementRef
+  chartElement: HTMLElement
+  host: any;
+  barChartData: any[];
+  campaign: any[] = [];
   s: string;
   variable: string;
+  private graphData: Array<Number>;
   constructor(private candidateListService: CandidateListService, private store: Store<LeverageAppStore>) {
-
+    this.graphData = [10, 20, 30, 40, 60];
   }
 
   ngOnInit() {
     this.store.select(slice => slice.campaignSlice).subscribe(val => {
       if (val) {
-        // this.variable = JSON.parse(val.campaigns.candidate_name);
         this.campaign.push(val.campaigns);
       }
     });
+
+    // build D3 chart
+    this.chartElement = this.d3Chart.nativeElement;
+    this.host = D3.select(this.chartElement)
+      .append("div").attr("class", "chart")
+      .selectAll('div')
+      .data(this.graphData).enter()
+      .append("div")
+      .style("width", function(d) { return d + "%"; })
+      .text(function(d) { return d + "%"; });
   }
 
 }

src/directives/d3.directive.ts

@@ -0,0 +1,49 @@
+ import { Directive, ElementRef, Attribute, SimpleChange, Input } from '@angular/core';
+ import * as d3 from 'd3';
+
+ @Directive({
+   selector: 'bar-graph',
+ })
+
+ export class BarGraph 
+ {
+   @Input() data: Array<any>;
+   private divs: any;
+
+   constructor ( elementRef: ElementRef, @Attribute('width') width: string, @Attribute('height') height: string) 
+   {
+     let el: any    = elementRef.nativeElement;  // reference to <bar-graph> element from the main template
+     let graph: any = d3.select(el);             // D3 chart container
+
+     // setup the graph
+     this.divs = graph
+         .append('div')
+         .attr({
+           'class': 'chart'
+         })
+         .style({
+           'width': 400 + 'px',
+           'height': 400 + 'px',
+         })
+         .selectAll('div');
+   }
+
+   // Render the D3 Bar Chart
+   private __render(newValue: any): void
+   {
+     if( !newValue ) 
+       return;
+
+     // join the data and chain styles and bar text ... all the usual suspects
+     this.divs.data(newValue).enter().append('div')
+         .transition().ease('elastic')
+         .style('width', (d:any) => d + '%')
+         .text( (d:any) => d + '%');
+   }
+
+   // update render on change
+   private ngOnChanges( changes: { [propertyName: string]: SimpleChange } ): void 
+   {
+     this.__render( this.data );
+   }
+ }

src/models/common/campaign.model.ts

@@ -14,8 +14,8 @@ export interface Campaign {
     candidate_name: string;
     candidate_party: string;
     candidate_position: string;
-    electionCycle: string;
-    electionYear: number;
+    election_cycle: string;
+    election_year: number;
     campaignSummary: CampaignSummary[];
 }
 

src/static/css/styles.less

@@ -63,7 +63,7 @@ body {
 .heat-map {
   width: 80%;
   height: 400px;
-  background-color: black;
+  background-color: #777;
   color: white;
   margin: 20px 0 50px 0;
 }
@@ -83,4 +83,26 @@ body {
   padding-left: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
+}
+
+.chart {
+    background: #eee;
+    padding: 3px;
+}
+
+.chart div {
+  width: 0;
+  transition: all 1s ease-out;
+  -moz-transition: all 1s ease-out;
+  -webkit-transition: all 1s ease-out;
+}
+
+.chart div {
+  font: 10px sans-serif;
+  background-color: steelblue;
+  text-align: right;
+  padding: 3px;
+  margin: 5px;
+  color: white;
+  box-shadow: 2px 2px 2px #666;
 }

systemjs.config.js

@@ -28,7 +28,8 @@
       // other libraries
       'rxjs': 'npm:rxjs',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-      "ngx-dropdown": "node_modules/ngx-dropdown"
+      "ngx-dropdown": "npm:ngx-dropdown",
+      "d3": "npm:d3/build/d3.js"
 
     },
     // packages tells the System loader how to load when no filename and/or no extension