update

client/src/app/app.module.ts

@@ -5,11 +5,20 @@ import { RouterModule, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+
+import { SearchComponent } from './search/search.component';
+
 import { NewsComponent } from './news/news.component';
 import { ArticleComponent } from './news/article/article.component';
-import { HomeComponent } from './home/home.component';
+
 import { StocksComponent } from './stocks/stocks.component';
-import { SearchComponent } from './search/search.component';
+import { ChartComponent } from './stocks/chart/chart.component';
+import { MainComponent } from './home/main/main.component';
+import { ChartDisplayComponent } from './home/chart-display/chart-display.component';
+import { ScoreComponent } from './home/score/score.component';
+import { TrendsComponent } from './home/trends/trends.component';
+import { TopArticlesComponent } from './home/top-articles/top-articles.component';
 
 const appRoutes: Routes = [
 	{ path: 'home', component: HomeComponent }
@@ -22,7 +31,13 @@ const appRoutes: Routes = [
 		HomeComponent,
 		StocksComponent,
 		ArticleComponent,
-		SearchComponent
+		SearchComponent,
+		ChartComponent,
+		MainComponent,
+		ChartDisplayComponent,
+		ScoreComponent,
+		TrendsComponent,
+		TopArticlesComponent
 	],
 	imports: [
 		BrowserModule,

client/src/app/home/chart-display/chart-display.component.css

@@ -0,0 +1,35 @@
+.card-content {
+	padding: 0;
+}
+
+.card-header-icon {
+	color: rgba(var(--pink), 1) !important;
+	transition: .2s ease;
+}
+
+.card-header-icon:hover {
+	color: rgba(var(--dark-pink), 1) !important;
+	transition: .2s ease;
+}
+
+.card-footer {
+	border: 0;
+}
+
+.card-footer-item {
+	font-size: 0.6em;
+	color: rgba(255, 255, 255, .3);
+	font-weight: 100;
+	border: 0;
+	border-top: 3px solid rgba(255, 255, 255, .1);
+}
+
+.card-footer-item:hover {
+	color: rgba(var(--yellow), 1);
+	border-top: 3px solid rgba(var(--yellow), 1);
+}
+
+.active {
+	color: rgba(var(--yellow), 1);
+	border-top: 3px solid rgba(var(--yellow), 1);
+}

client/src/app/home/chart-display/chart-display.component.html

@@ -0,0 +1,22 @@
+<div class="card">
+	<header class="card-header">
+		<p class="card-header-title">
+			Chart
+		</p>
+		<a [href]="company.website" *ngIf="company" class="card-header-icon">
+			{{ company.companyName }}
+		</a>
+	</header>
+	<div class="card-content">
+		<div class="content">
+			<app-stocks (sendCompany)="company= $event.company"></app-stocks>
+		</div>
+	</div>
+	<footer class="card-footer">
+		<a [class.active]="currentTimeFrame === 1" class="card-footer-item" (click)="selectTimeFrame(1)">1W</a>
+		<a [class.active]="currentTimeFrame === 2" class="card-footer-item" (click)="selectTimeFrame(2)">1M</a>
+		<a [class.active]="currentTimeFrame === 3" class="card-footer-item" (click)="selectTimeFrame(3)">3M</a>
+		<a [class.active]="currentTimeFrame === 4" class="card-footer-item" (click)="selectTimeFrame(4)">6M</a>
+		<a [class.active]="currentTimeFrame === 5" class="card-footer-item" (click)="selectTimeFrame(5)">1Y</a>
+	</footer>
+</div>

client/src/app/home/chart-display/chart-display.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartDisplayComponent } from './chart-display.component';
+
+describe('ChartDisplayComponent', () => {
+  let component: ChartDisplayComponent;
+  let fixture: ComponentFixture<ChartDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChartDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/home/chart-display/chart-display.component.ts

@@ -0,0 +1,21 @@
+import { Component, ViewChild, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-chart-display',
+	templateUrl: './chart-display.component.html',
+	styleUrls: ['./chart-display.component.css', '../home.component.css']
+})
+export class ChartDisplayComponent implements OnInit {
+	company: any;
+	currentTimeFrame = 2;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+	selectTimeFrame = (x) => {
+		this.currentTimeFrame = x;
+		console.log(x);
+	}
+}

client/src/app/home/home.component.css

@@ -0,0 +1,54 @@
+.home__section {
+	background-color: rgba(var(--dark-blue), 1);
+}
+
+.columns.columns__charts {
+	display: flex;
+}
+
+.card {
+	background-color: rgba(255, 255, 255, .05);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	height: 100%;
+}
+
+.card-header {
+	background-color: rgba(255, 255, 255, .05);
+}
+
+.card-header-title {
+	color: rgba(255, 255, 255, .6);
+	font-weight: 300 !important;
+}
+
+.card-footer {
+	margin-top: auto;
+}
+
+.text__body--color {
+	color: rgba(255, 255, 255, .5);
+}
+
+::placeholder {
+	color: rgba(255, 255, 255, .4);
+}
+
+.input {
+	border-color: rgba(var(--dark-blue), 1);
+	background-color: rgba(255, 255, 255, .1);
+	color: rgba(255, 255, 255, .5);
+}
+
+.button {
+	border-color: rgba(var(--dark-blue), 1);
+	background-color: rgba(255, 255, 255, .1);
+	color: rgba(255, 255, 255, .5);
+	transition: .2s ease;
+}
+
+.button:hover {
+	background-color: rgba(255, 255, 255, .15);
+	color: rgba(255, 255, 255, .5);
+}

client/src/app/home/home.component.html

@@ -1,7 +1,33 @@
-<p>
-  home works!
-</p>
+<section class="hero is-fullheight home__section">
+	<div class="hero-head">
+		
+	</div>
+	<div class="hero-body">
+		<div class="container">
 
-<app-search></app-search>
-<app-news (searchEvent)="app-search.test()"></app-news>
-<app-stocks></app-stocks>
+			<div class="columns">
+				<div class="column">
+					<app-main></app-main>
+				</div>
+				<div class="column is-3">
+					<app-trends></app-trends>
+				</div>
+			</div>
+
+			<div class="columns columns__charts">
+				<div class="column">
+					<app-chart-display></app-chart-display>
+				</div>
+				<div class="column is-4">
+					<app-score></app-score>
+				</div>
+			</div>
+
+			<app-top-articles></app-top-articles>
+
+		</div>
+	</div>	
+	<div class="hero-foot">
+
+	</div>
+</section>

client/src/app/home/main/main.component.css

@@ -0,0 +1,8 @@
+p {
+	margin-bottom: 0 !important;
+}
+
+.sub__text {
+	font-size: 0.7em;
+	color: rgba(255, 255, 255, 0.3) !important;
+}

client/src/app/home/main/main.component.html

@@ -0,0 +1,27 @@
+<div class="card">
+	<header class="card-header">
+		<p class="card-header-title">
+			Welcome 
+		</p>
+	</header>
+
+	<div class="card-content">
+		<div class="content">
+
+			<nav class="level">
+				<div class="level-item">
+					<div>
+						<p class="text__body--color">Hello [name],</p>
+						<p class="sub__text text__body--color">Today is {{ todaysDate }}</p>
+					</div>
+				</div>
+				<div class="level-item has-text-centered">
+					<div>
+						<app-search></app-search>
+					</div>
+				</div>
+			</nav>
+
+		</div>
+	</div>
+</div>

client/src/app/home/main/main.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/home/main/main.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+
+@Component({
+	selector: 'app-main',
+	templateUrl: './main.component.html',
+	styleUrls: ['./main.component.css', '../home.component.css']
+})
+export class MainComponent implements OnInit {
+	todaysDate: any;
+
+	constructor() { }
+
+	ngOnInit() {
+		this.todaysDate = moment().format('DD MMMM, YYYY.');
+	}
+
+}

client/src/app/home/score/score.component.css

@@ -0,0 +1,6 @@
+.card-content {
+}
+
+.content {
+	height: inherit;
+}

client/src/app/home/score/score.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-header">
+		<p class="card-header-title">
+			Sentiment Score
+		</p>
+	</div>
+	<div class="card-content">
+		<div class="content">
+			<div id="donut_chart" style="width: inherit; height: inherit"></div>
+		</div>
+	</div>
+</div>

client/src/app/home/score/score.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScoreComponent } from './score.component';
+
+describe('ScoreComponent', () => {
+  let component: ScoreComponent;
+  let fixture: ComponentFixture<ScoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScoreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/home/score/score.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+
+declare const google;
+
+@Component({
+	selector: 'app-score',
+	templateUrl: './score.component.html',
+	styleUrls: ['./score.component.css', '../home.component.css']
+})
+
+export class ScoreComponent implements OnInit {
+
+	constructor() { }
+
+	ngOnInit() {
+		google.charts.load('current', {packages: ['corechart']});
+		google.charts.setOnLoadCallback(() => {
+			this.drawChart();
+		});
+	}
+
+	drawChart() {
+		const data = google.visualization.arrayToDataTable([
+			['Emotion', 'Percentage'],
+			['Positive', 66],
+			['Neutral', 20],
+			['Negative', 14]
+		]);
+
+		const options = {
+			legend: {
+				position: 'bottom',
+				textStyle: {
+					color: '#a8a9b2',
+					fontName: 'inherit',
+					fontSize: 12
+				}
+			},
+			pieHole: 0.9,
+			pieSliceBorderColor: 'transparent',
+			pieSliceText: 'none',
+			slices: {
+				2: {
+					textStyle: {
+						color: 'black'
+					}
+				}
+			},
+			reverseCategories: true,
+			chartArea: {
+				left: 0,
+				top: 0,
+				width: '100%',
+				height: '90%',
+			},
+			colors: ['#7630C9', '#FFBF8D', '#CE74C6'],
+			backgroundColor: 'transparent',
+		};
+
+		const chart = new google.visualization.PieChart(document.getElementById('donut_chart'));
+		chart.draw(data, options);
+	}
+
+}

client/src/app/home/top-articles/top-articles.component.css

@@ -0,0 +1,4 @@
+.card-content {
+	padding: 0;
+}
+

client/src/app/home/top-articles/top-articles.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-header">
+		<p class="card-header-title">
+			Top Articles
+		</p>
+	</div>
+	<div class="card-content">
+		<div class="content">
+			<app-news></app-news>
+		</div>
+	</div>
+</div>

client/src/app/home/top-articles/top-articles.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopArticlesComponent } from './top-articles.component';
+
+describe('TopArticlesComponent', () => {
+  let component: TopArticlesComponent;
+  let fixture: ComponentFixture<TopArticlesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopArticlesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopArticlesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/home/top-articles/top-articles.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-top-articles',
+  templateUrl: './top-articles.component.html',
+  styleUrls: ['./top-articles.component.css', '../home.component.css']
+})
+export class TopArticlesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

client/src/app/home/trends/trends.component.css

@@ -0,0 +1,9 @@
+.card-content {
+	padding: 0;
+	height: 100px !important;
+	overflow: auto;
+}
+
+.is-pulled-right {
+	color: rgba(var(--yellow), 1) !important;
+}

client/src/app/home/trends/trends.component.html

@@ -0,0 +1,19 @@
+<div class="card">
+	<div class="card-header">
+		<p class="card-header-title">
+			Trends
+		</p>
+	</div>
+	<div class="card-content">
+		<div class="content">
+			<table class="table is-fullwidth">
+				<tbody>
+					<tr *ngFor="let gainer of gainers">
+						<td>{{ gainer.symbol }}</td>
+						<td class="is-pulled-right">{{ parsePercent(gainer.changePercent) }}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>

client/src/app/home/trends/trends.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrendsComponent } from './trends.component';
+
+describe('TrendsComponent', () => {
+  let component: TrendsComponent;
+  let fixture: ComponentFixture<TrendsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TrendsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrendsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/home/trends/trends.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { StocksService } from '../../stocks.service';
+
+@Component({
+	selector: 'app-trends',
+	templateUrl: './trends.component.html',
+	styleUrls: ['./trends.component.css',
+		'../home.component.css',
+		'../../news/article/article.component.css']
+})
+
+export class TrendsComponent implements OnInit {
+	gainers: any;
+
+	constructor(private stocksService: StocksService) { }
+
+	ngOnInit() {
+		this.stocksService.getGainers()
+			.subscribe(gainers => {
+				this.gainers = gainers;
+			});
+	}
+
+	parsePercent(percent) {
+		return Math.floor(percent * 100) + '%';
+	}
+}

client/src/app/news/article/article.component.css

@@ -0,0 +1,36 @@
+.table {
+	background-color: transparent;
+}
+td {
+	color: black;
+}
+
+th {
+	border: 0 !important;
+	font-size: .8em;
+	font-weight: 300;
+	color: rgba(255, 255, 255, .3) !important;
+}
+
+td {
+	border: 0 !important;
+	font-size: .8em;
+	font-weight: 300;
+	color: rgba(255, 255, 255, .5) !important;
+}
+
+tr {
+	transition: .2s ease;
+}
+
+td > a {
+	color: rgba(var(--pink), 1) !important;
+}
+
+td > a:hover {
+	color: rgba(var(--dark-pink), 1) !important;
+}
+
+tr:hover {
+	background-color: rgba(255, 255, 255, .05);
+}

client/src/app/news/article/article.component.html

@@ -4,7 +4,7 @@
 			<th>Source Name</th>
 			<th>Title</th>
 			<th>Published</th>
-			<th>Img</th>
+			<th>Score</th>
 		</tr>
 	</thead>
 	<tbody>
@@ -12,11 +12,7 @@
 			<td>{{ article.sourceName }}</td>
 			<td><a [href]="article.url">{{ article.title }}</a></td>
 			<td>{{ computeDate(article.publishedAt) }}</td>
-			<td>
-				<figure class="image is-128x128">
-					<img [src]="article.urlToImage" />
-				</figure>
-			</td>
+			<td>[score]</td>
 		</tr>
 	</tbody>
 </table>

client/src/app/news/news.component.html

@@ -1,2 +1 @@
-<p>news works!</p>
 <app-article *ngIf="news" [articles]="news"></app-article>

client/src/app/news/news.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NewsService } from '../news.service';
+import { SearchService } from '../search.service';
 
 @Component({
 	selector: 'app-news',
@@ -8,24 +9,39 @@ import { NewsService } from '../news.service';
 })
 
 export class NewsComponent implements OnInit {
-	query: string;
 	news: any;
 
-	constructor(private newsService: NewsService) { }
+	constructor(
+		private newsService: NewsService,
+		private searchService: SearchService
+	) { }
 
 	ngOnInit() {
+		this.news = [
+			{
+			sourceName: 'CNBC',
+			url: '#',
+			title: 'Facebook is suggesting security app that tracks mobile usage.',
+			publishedAt: '12 February 2018',
+			urlToImage: '#'
+			},
+			{
+			sourceName: 'CNBC',
+			url: '#',
+			title: 'Facebook is suggesting security app that tracks mobile usage.',
+			publishedAt: '12 February 2018',
+			urlToImage: '#'
+			}
+		];
+		this.searchService.currentQuery.subscribe(query => {
+			if (query) {
+				this.getNews(query);
+			}
+		});
 	}
 
-	getNews() {
-		console.log(this.news);
-		this.newsService.getNews(this.query)
-			.subscribe(articles => {
-				this.news = articles;
-			});
+	getNews(query) {
+		this.newsService.getNews(query)
+			.subscribe(articles => this.news = articles);
 	}
-
-	displayNews() {
-
-	}
-
 }

client/src/app/post.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PostService } from './post.service';
+
+describe('PostService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PostService]
+    });
+  });
+
+  it('should be created', inject([PostService], (service: PostService) => {
+    expect(service).toBeTruthy();
+  }));
+});

client/src/app/post.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PostService {
+
+  constructor() { }
+}

client/src/app/search/search.component.html

@@ -1,11 +1,8 @@
-<div class="columns">
-	<div class="column is-offset-4 is-4">
-		<div class="field">
-			<label>Ticker</label>
-			<div class="control">
-				<input [(ngModel)]="query" class="input" type="text" placeholder="Enter ticker" />
-			</div>
-			<button class="button" (click)="submit()">submit</button>
-		</div>
+<div class="field has-addons">
+	<div class="control">
+		<input [(ngModel)]="query" class="input" type="text" placeholder="Enter ticker" />
+	</div>
+	<div class="control">
+		<button class="button" (click)="submit()">Search</button>
 	</div>
 </div>

client/src/app/search/search.component.ts

@@ -5,7 +5,7 @@ import { SearchService } from '../search.service';
 @Component({
 	selector: 'app-search',
 	templateUrl: './search.component.html',
-	styleUrls: ['./search.component.css']
+	styleUrls: ['./search.component.css', '../home/home.component.css']
 })
 
 export class SearchComponent implements OnInit {
@@ -19,6 +19,6 @@ export class SearchComponent implements OnInit {
 	}
 
 	submit() {
-		this.searchService.setQuery(this.query);
+		this.searchService.changeQuery(this.query);
 	}
 }

client/src/app/stocks.service.ts

@@ -1,24 +1,19 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-import { SearchService } from './search.service';
-
 @Injectable({
 	providedIn: 'root'
 })
 
 export class StocksService {
 
-	constructor(
-		private http: HttpClient,
-		private searchService: SearchService
-	) { }
+	constructor(private http: HttpClient) { }
 
 	getStocks(ticker) {
 		return this.http.get(`/api/stocks?ticker=${ticker}`);
 	}
 
-	getSearch() {
-		console.log(this.searchService);
+	getGainers() {
+		return this.http.get(`/api/stocks/gainers`);
 	}
 }

client/src/app/stocks/chart/chart.component.html

@@ -0,0 +1 @@
+<div id="chart_div" style="width: inherit; height: inherit"></div>

client/src/app/stocks/chart/chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/stocks/chart/chart.component.ts

@@ -0,0 +1,136 @@
+import { Component, Input, OnInit } from '@angular/core';
+import * as moment from 'moment';
+
+declare const google;
+
+@Component({
+	selector: 'app-chart',
+	templateUrl: './chart.component.html',
+	styleUrls: ['./chart.component.css']
+})
+
+export class ChartComponent implements OnInit {
+	@Input()stock;
+
+	constructor() { }
+
+	ngOnInit() {
+		google.charts.load('current', {'packages': ['corechart', 'line']});
+
+		google.charts.setOnLoadCallback(() => {
+			const data = this.stock ? this.initChartData() : this.initNullChart();
+			this.drawChart(data);
+		});
+	}
+
+	initChartData() {
+		const chartData = this.stock.chart.reduce((a, price) => {
+			a.push([this.parseDate(price.date), price.close]);
+			return a;
+		}, []);
+
+		return google.visualization.arrayToDataTable([
+			['Date', 'Close'],
+			...chartData
+		]);
+	}
+
+	parseDate = (date) => moment(date).format('MMM DD');
+
+	drawChart(data) {
+		const options = {
+			lineWidth: 5,
+			baselineColor: 'transparent',
+			focusTarget: 'category',
+			hAxis: {
+				showTextEvery: 5,
+				gridlines: {
+					color: '#333',
+					count: 4
+				},
+				minorGridlines: {
+					color: '#FFFFFF',
+					count: 4
+				}
+			},
+			legend: 'none',
+			chartArea: {
+				left: 0,
+				top: 0,
+				width: '100%',
+				height: '100%',
+			},
+			backgroundColor: 'transparent',
+			vAxis: {
+				gridlines: {
+					color: 'transparent'
+				}
+			},
+			curveType: 'function'
+		};
+
+		const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
+
+		google.visualization.events.addOneTimeListener(chart, 'ready', () => {
+			this.addChartGradient(chart);
+		});
+
+		chart.draw(data, options);
+	}
+
+
+	addChartGradient(chart) {
+		const chartDiv = chart.getContainer();
+		const svg = chartDiv.getElementsByTagName('svg')[0];
+		const properties = {
+			id: 'chartGradient',
+			x1: '0%',
+			y1: '0%',
+			x2: '0%',
+			y2: '100%',
+			stops: [
+				{ offset: '5%', 'stop-color': '#FFBF8D' },
+				{ offset: '95%', 'stop-color': '#CE74C6' }
+			]
+		};
+
+
+		this.createGradient(svg, properties);
+		const chartPath = svg.getElementsByTagName('path')[0];
+		chartPath.setAttribute('stroke', 'url(#chartGradient)');
+	}
+
+
+	createGradient(svg, properties) {
+		const svgNS = svg.namespaceURI;
+		const grad = document.createElementNS(svgNS, 'linearGradient');
+		grad.setAttribute('id', properties.id);
+		['x1', 'y1', 'x2', 'y2'].forEach(function(name) {
+			if (properties.hasOwnProperty(name)) {
+				grad.setAttribute(name, properties[name]);
+			}
+		});
+		for (let i = 0; i < properties.stops.length; i++) {
+			const attrs = properties.stops[i];
+			const stop = document.createElementNS(svgNS, 'stop');
+			for (const attr in attrs) {
+				if (attrs.hasOwnProperty(attr)) {
+					stop.setAttribute(attr, attrs[attr]);
+				}
+			}
+			grad.appendChild(stop);
+		}
+
+		const defs = svg.querySelector('defs') ||
+			svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
+		return defs.appendChild(grad);
+	}
+
+	initNullChart() {
+		return google.visualization.arrayToDataTable([
+			['Date', 'Close'],
+			['0', 1],
+			['1', 1],
+		]);
+	}
+}

client/src/app/stocks/stocks.component.html

@@ -1,3 +1 @@
-<p>
-  stocks works!
-</p>
+<app-chart *ngIf="stockData" [stock]="stockData"></app-chart>

client/src/app/stocks/stocks.component.ts

@@ -1,15 +1,37 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { StocksService } from '../stocks.service';
+import { SearchService } from '../search.service';
 
 @Component({
-  selector: 'app-stocks',
-  templateUrl: './stocks.component.html',
-  styleUrls: ['./stocks.component.css']
+	selector: 'app-stocks',
+	templateUrl: './stocks.component.html',
+	styleUrls: ['./stocks.component.css']
 })
+
 export class StocksComponent implements OnInit {
+	@Output() sendCompany = new EventEmitter();
+	stockData: any;
 
-  constructor() { }
+	constructor(
+		private stocksService: StocksService,
+		private searchService: SearchService
+	) { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		this.searchService.currentQuery
+			.subscribe(query => {
+				if (query) {
+					this.stockData = null;
+					this.getStocks(query);
+				}
+			});
+	}
 
+	getStocks(ticker) {
+		this.stocksService.getStocks(ticker)
+			.subscribe(stock => {
+				this.stockData = stock;
+					this.sendCompany.emit(this.stockData);
+			});
+	}
 }

client/src/index.html

@@ -8,6 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />
+	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 </head>
 <body>
   <app-root></app-root>

client/src/styles.css

@@ -1 +1,13 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+	--dark-blue: 51, 55, 75;
+
+	--dark-purple: 148, 65, 161;
+	--light-purple: 206, 116, 198;
+	--purple: 118, 48, 201;
+
+	--yellow: 255, 191, 141;
+
+	--dark-pink: 236, 120, 155;
+	--pink: 252, 167, 146;
+}
+

server/pom.xml

@@ -24,6 +24,13 @@
 		<java.version>1.8</java.version>
 	</properties>
 
+	<repositories>
+		<repository>
+			<id>jitpack.io</id>
+			<url>https://jitpack.io</url>
+		</repository>
+	</repositories>
+
 	<dependencies>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
@@ -70,6 +77,12 @@
 			<artifactId>spring-boot-devtools</artifactId>
 			<version>2.0.3.RELEASE</version>
 		</dependency>
+
+		<dependency>
+			<groupId>com.github.ParallelDots</groupId>
+			<artifactId>ParallelDots-Java-API</artifactId>
+			<version>master</version>
+		</dependency>
 	</dependencies>
 
 	<build>

server/src/main/java/com/stockr/server/ServerApplication.java

@@ -2,8 +2,10 @@ package com.stockr.server;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.scheduling.annotation.EnableAsync;
 
 @SpringBootApplication
+@EnableAsync
 public class ServerApplication {
 
 	public static void main(String[] args) {

server/src/main/java/com/stockr/server/news/Article.java

@@ -1,21 +1,22 @@
 package com.stockr.server.news;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
+import com.stockr.server.sentiment.Sentiment;
 import lombok.Getter;
 import lombok.Setter;
 
 import java.util.Map;
 
 @Getter @Setter
-class Article {
+public class Article {
     private String sourceId;
     private String sourceName;
     private String author;
     private String title;
     private String description;
     private String url;
-    private String urlToImage;
     private String publishedAt;
+    private Sentiment sentiment;
 
     @SuppressWarnings("unused")
     @JsonProperty("source")

server/src/main/java/com/stockr/server/news/NewsController.java

@@ -1,5 +1,6 @@
 package com.stockr.server.news;
 
+import com.stockr.server.sentiment.SentimentService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
@@ -11,8 +12,12 @@ public class NewsController {
     @Autowired
     NewsService ns;
 
+    SentimentService ss = new SentimentService();
+
     @GetMapping// root
-    public ArrayList<Article> getAllArticles(@RequestParam("query") String query){
-        return ns.getAllArticles(query);
+    public ArrayList<Article> getAllArticles(@RequestParam("query") String query) throws Exception {
+        ArrayList<Article> articles = ns.getAllArticles(query);
+        ArrayList<Article> sentimentArticles = ss.getAllSentiments(articles);
+        return sentimentArticles;
     }
 }

server/src/main/java/com/stockr/server/news/NewsService.java

@@ -41,7 +41,7 @@ public class NewsService {
         return n;
     }
 
-    ArrayList<Article> getAllArticles(String query) {
+    public ArrayList<Article> getAllArticles(String query) {
         return getNews(query)
                 .getArticles();
     }
@@ -50,6 +50,6 @@ public class NewsService {
         return  "https://newsapi.org/v2/everything?q=" + query +
                 "&language=en" +
                 "&sources=bloomberg,business-insider,cnbc,the-wall-street-journal" +
-                "&pageSize=100";
+                "&pageSize=25";
     }
 }

server/src/main/java/com/stockr/server/sentiment/Sentiment.java

@@ -0,0 +1,28 @@
+package com.stockr.server.sentiment;
+
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.util.Map;
+
+@NoArgsConstructor
+@Getter @Setter
+@JsonIgnoreProperties(ignoreUnknown = true)
+public class Sentiment {
+    @JsonProperty("sentiment")
+    String likely;
+    double positive;
+    double neutral;
+    double negative;
+
+    @SuppressWarnings("unused")
+    @JsonProperty("probabilities")
+    private void unpackSource(Map<String, Object> source) {
+        this.positive = (double)source.get("positive");
+        this.neutral = (double)source.get("neutral");
+        this.negative = (double)source.get("negative");
+    }
+}

server/src/main/java/com/stockr/server/sentiment/SentimentService.java

@@ -0,0 +1,90 @@
+package com.stockr.server.sentiment;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.paralleldots.paralleldots.App;
+import com.stockr.server.news.Article;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Bean;
+import org.springframework.core.task.TaskExecutor;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;
+import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.lang.reflect.Array;
+import java.util.*;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.Future;
+import java.util.concurrent.PriorityBlockingQueue;
+import java.util.stream.Collectors;
+
+@Service
+public class SentimentService {
+    App pd = new App("ksfXrGlQnbn5jrJQBiGvxS0gdFVI8oHm6S3ZAxGz9EM");
+    ObjectMapper om = new ObjectMapper();
+
+    public Sentiment getSentiment(String text) throws Exception {
+        String json = pd.sentiment(text);
+        Sentiment sentiment = om.readValue(json, Sentiment.class);
+        return sentiment;
+    }
+
+    public ArrayList<Article> getAllSentiments(ArrayList<Article> articles) throws Exception {
+        ArrayList<Article> sentimentArticles = new ArrayList<>();
+        for (Article article : articles) {
+            Sentiment sentiment = getSentiment(article.getDescription());
+            article.setSentiment(sentiment);
+            sentimentArticles.add(article);
+        }
+        return sentimentArticles;
+    }
+
+    @Bean
+    public TaskExecutor exec() {
+        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
+        executor.setCorePoolSize(10);
+        executor.setMaxPoolSize(10);
+        executor.setQueueCapacity(500);
+        executor.setThreadNamePrefix("GithubLookup-");
+        executor.initialize();
+        return executor;
+    }
+
+    @Async(value = "exec")
+    public CompletableFuture<Sentiment> gs(String text) {
+        return CompletableFuture.supplyAsync(() -> {
+            String json = null;
+            try {
+                json = pd.sentiment(text);
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+            Sentiment sentiment = null;
+            try {
+                sentiment = om.readValue(json, Sentiment.class);
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+            return sentiment;
+        });
+    }
+
+    public List<Sentiment> gas(ArrayList<Article> articles) throws Exception {
+        System.out.println(System.currentTimeMillis());
+        List<CompletableFuture<Sentiment>> sentimentArticles = articles.stream()
+                .map(article -> gs(article.getDescription()))
+                .collect(Collectors.toList());
+
+        CompletableFuture<Void> allFutures = CompletableFuture.allOf(
+                sentimentArticles.toArray(new CompletableFuture[sentimentArticles.size()])
+        );
+
+        CompletableFuture<List<Sentiment>> sentimentFutures = allFutures.thenApply(v -> {
+            return sentimentArticles.stream().map(x -> x.join()).collect(Collectors.toList());
+        });
+
+        List<Sentiment> fin = sentimentFutures.get();
+        System.out.println(System.currentTimeMillis());
+        return fin;
+    }
+}

server/src/main/java/com/stockr/server/sentiment/SentimentThread.java

@@ -0,0 +1,19 @@
+package com.stockr.server.sentiment;
+
+import com.stockr.server.news.Article;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.scheduling.annotation.AsyncResult;
+
+import java.util.ArrayList;
+import java.util.concurrent.Future;
+
+public class SentimentThread {
+    SentimentService ss = new SentimentService();
+
+    @Async
+    public Future<Article> getSentimentAsync(Article article) throws Exception {
+        Sentiment sentiment = ss.getSentiment(article.getDescription());
+        article.setSentiment(sentiment);
+        return new AsyncResult<>(article);
+    }
+}

server/src/main/java/com/stockr/server/stocks/Gainer.java

@@ -0,0 +1,26 @@
+package com.stockr.server.stocks;
+
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import pl.zankowski.iextrading4j.api.stocks.Quote;
+
+import java.math.BigDecimal;
+
+@NoArgsConstructor
+@Getter @Setter
+@JsonIgnoreProperties
+public class Gainer {
+    String symbol;
+    String companyName;
+    BigDecimal close;
+    BigDecimal changePercent;
+
+    Gainer(Quote quote) {
+        this.symbol = quote.getSymbol();
+        this.companyName = quote.getCompanyName();
+        this.close = quote.getClose();
+        this.changePercent = quote.getChangePercent();
+    }
+}

server/src/main/java/com/stockr/server/stocks/StocksController.java

@@ -6,6 +6,8 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.util.List;
+
 @RestController
 @RequestMapping("stocks")
 public class StocksController {
@@ -16,4 +18,9 @@ public class StocksController {
     public Stocks getStocks(@RequestParam("ticker") String ticker) {
         return stocksService.getStocks(ticker);
     }
+
+    @GetMapping("/gainers")
+    public List<Gainer> getGainers() {
+        return stocksService.getGainers();
+    }
 }

server/src/main/java/com/stockr/server/stocks/StocksService.java

@@ -3,9 +3,16 @@ package com.stockr.server.stocks;
 import org.springframework.context.annotation.Bean;
 import org.springframework.stereotype.Service;
 import pl.zankowski.iextrading4j.api.stocks.BatchStocks;
+import pl.zankowski.iextrading4j.api.stocks.Quote;
 import pl.zankowski.iextrading4j.client.IEXTradingClient;
+import pl.zankowski.iextrading4j.client.rest.manager.RestRequest;
 import pl.zankowski.iextrading4j.client.rest.request.stocks.BatchStocksRequestBuilder;
 import pl.zankowski.iextrading4j.client.rest.request.stocks.BatchStocksType;
+import pl.zankowski.iextrading4j.client.rest.request.stocks.ListRequestBuilder;
+import pl.zankowski.iextrading4j.client.rest.request.stocks.ListType;
+
+import java.util.List;
+import java.util.stream.Collectors;
 
 @Service
 public class StocksService {
@@ -15,6 +22,18 @@ public class StocksService {
         return new Stocks(getBatchFromTicker(ticker));
     }
 
+    // https://api.iextrading.com/1.0/stock/market/list/gainers
+    public List<Gainer> getGainers() {
+        List<Quote> quotes = iex.executeRequest(new ListRequestBuilder()
+                .withListType(ListType.GAINERS)
+                .build());
+
+        return quotes
+                .stream()
+                .map(Gainer::new)
+                .collect(Collectors.toList());
+    }
+
     private BatchStocks getBatchFromTicker(String ticker) {
         return iex.executeRequest(new BatchStocksRequestBuilder()
                 .withSymbol(ticker)

server/src/test/java/com/stockr/server/news/ArticleTest.java

@@ -2,8 +2,10 @@ package com.stockr.server.news;
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 import org.junit.Test;
+import org.springframework.boot.web.client.RestTemplateBuilder;
 
 import java.io.IOException;
+import java.util.List;
 
 import static org.junit.Assert.*;
 
@@ -20,4 +22,11 @@ public class ArticleTest {
         assertEquals("ID", a.getSourceId());
         assertEquals("NAME", a.getSourceName());
     }
+
+    @Test
+    public void sentiment_ShouldBeNull() throws IOException {
+        NewsService ns = new NewsService(new RestTemplateBuilder());
+        List<Article> n = ns.getAllArticles("tesla");
+        assertNull(n.get(0).getSentiment());
+    }
 }

server/src/test/java/com/stockr/server/paralleldots/ParallelDotsApiTest.java

@@ -0,0 +1,19 @@
+package com.stockr.server.paralleldots;
+
+import com.paralleldots.paralleldots.App;
+import org.junit.Before;
+import org.junit.Test;
+
+public class ParallelDotsApiTest {
+    App pd;
+    @Before
+    public void setUp() {
+        pd = new App("ksfXrGlQnbn5jrJQBiGvxS0gdFVI8oHm6S3ZAxGz9EM");
+    }
+
+    @Test
+    public void sentiment_ShouldReturnSentiment_GivenString() throws Exception {
+        String s = pd.sentiment("I am very happy today.");
+        System.out.println(s);
+    }
+}

server/src/test/java/com/stockr/server/sentiment/SentimentServiceTest.java

@@ -0,0 +1,31 @@
+package com.stockr.server.sentiment;
+
+import com.stockr.server.news.Article;
+import com.stockr.server.news.NewsService;
+import org.junit.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.web.client.RestTemplateBuilder;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import static org.junit.Assert.*;
+
+public class SentimentServiceTest {
+    NewsService ns = new NewsService(new RestTemplateBuilder());
+
+    SentimentService ss = new SentimentService();
+
+    @Test
+    public void sentiment_Async() throws Exception {
+        ArrayList<Article> articles = ns.getAllArticles("tesla");
+        List<Sentiment> sentimentArticles = ss.gas(articles);
+        sentimentArticles.stream().forEach(x -> System.out.println(x.getLikely()));
+    }
+
+    @Test
+    public void sentiment_Nonasync() throws Exception {
+        ArrayList<Article> articles = ns.getAllArticles("tesla");
+        List<Article> sentimentArticles = ss.getAllSentiments(articles);
+    }
+}

server/src/test/java/com/stockr/server/sentiment/SentimentTest.java

@@ -0,0 +1,22 @@
+package com.stockr.server.sentiment;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.paralleldots.paralleldots.App;
+import org.junit.Test;
+
+import static org.junit.Assert.*;
+
+public class SentimentTest {
+    @Test
+    public void constructor_ShouldFillInFields_GivenJsonString() throws Exception {
+        App pd = new App("ksfXrGlQnbn5jrJQBiGvxS0gdFVI8oHm6S3ZAxGz9EM");
+        String json = pd.sentiment("test");
+
+        Sentiment sentiment = new ObjectMapper().readValue(json, Sentiment.class);
+        assertNotNull(sentiment.getLikely());
+        assertNotNull(sentiment.getNegative());
+        assertNotNull(sentiment.getNeutral());
+        assertNotNull(sentiment.getPositive());
+    }
+
+}

server/src/test/java/com/stockr/server/stocks/GainerTest.java

@@ -0,0 +1,29 @@
+package com.stockr.server.stocks;
+
+import org.junit.Assert;
+import org.junit.Test;
+import pl.zankowski.iextrading4j.api.stocks.Quote;
+import pl.zankowski.iextrading4j.client.IEXTradingClient;
+import pl.zankowski.iextrading4j.client.rest.request.stocks.ListRequestBuilder;
+import pl.zankowski.iextrading4j.client.rest.request.stocks.ListType;
+
+import java.util.List;
+
+import static org.junit.Assert.*;
+
+public class GainerTest {
+    @Test
+    public void constructor_ShouldFillInFields_GivenQuote() {
+        IEXTradingClient iex = IEXTradingClient.create();
+        List<Quote> quotes = iex.executeRequest(new ListRequestBuilder()
+                .withListType(ListType.GAINERS)
+                .build());
+
+        Gainer gainer = new Gainer(quotes.get(0));
+
+        assertNotNull(gainer.getCompanyName());
+        assertNotNull(gainer.getChangePercent());
+        assertNotNull(gainer.getClose());
+        assertNotNull(gainer.getSymbol());
+    }
+}

server/src/test/java/com/stockr/server/stocks/StocksControllerTest.java

@@ -44,4 +44,13 @@ public class StocksControllerTest {
                 .andDo(print())
                 .andExpect(status().isBadRequest());
     }
+
+    @Test
+    public void gainers_ShouldUseMethod_getGainers() throws Exception {
+        when(service.getStocks("test")).thenReturn(new Stocks());
+        this.mockMvc.perform(get("/stocks/gainers"))
+                .andDo(print())
+                .andExpect(status().isOk())
+                .andExpect(handler().methodName("getGainers"));
+    }
 }

server/src/test/java/com/stockr/server/stocks/StocksServiceTest.java

@@ -13,4 +13,11 @@ public class StocksServiceTest {
         Stocks s = ss.getStocks("tsla");
         assertEquals(s.getCompany().getCompanyName(), "Tesla Inc.");
     }
+
+    // get market gainers
+    // https://api.iextrading.com/1.0/stock/market/list/gainers
+    @Test
+    public void getGainers_ShouldReceiveCorrectCompanyName() {
+        System.out.println(ss.getGainers().get(0).getCompanyName());
+    }
 }

server/src/test/java/com/stockr/server/stocks/StocksTest.java

@@ -12,7 +12,7 @@ import static org.junit.Assert.*;
 
 public class StocksTest {
     @Test
-    public void constructor_ShouldFillFields() {
+    public void constructor_ShouldFillFields_GivenBatchStocks() {
         // TODO mock this...
         IEXTradingClient iex = IEXTradingClient.create();
         BatchStocks bs = iex.executeRequest(new BatchStocksRequestBuilder()