Merge pull request #1 from surgeforward/task_1_fix_issues

[bugfix] Fix issue with incorrectly chart data to chart component.

apps/stocks/src/environments/environment.ts

@@ -6,7 +6,7 @@ import { StocksAppConfig } from '@coding-challenge/stocks/data-access-app-config
 
 export const environment: StocksAppConfig = {
   production: false,
-  apiKey: '',
+  apiKey: 'Tpk_8b73e788272d4aec8139350afd684aa9',
   apiURL: 'https://sandbox.iexapis.com'
 };
 

libs/shared/ui/chart/src/lib/chart/chart.component.html

@@ -1,9 +1,9 @@
 <google-chart
   *ngIf="data"
-  [title]="chart.title"
-  [type]="chart.type"
-  [data]="chartData"
-  [columnNames]="chart.columnNames"
-  [options]="chart.options"
+  [title]="title"
+  [type]="type"
+  [data]="data"
+  [columnNames]="columnNames"
+  [options]="options"
 >
 </google-chart>

libs/shared/ui/chart/src/lib/chart/chart.component.ts

@@ -1,39 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'coding-challenge-chart',
   templateUrl: './chart.component.html',
-  styleUrls: ['./chart.component.css']
+  styleUrls: ['./chart.component.css'],
 })
-export class ChartComponent implements OnInit {
-  @Input() data$: Observable<any>;
-  chartData: any;
-
-  chart: {
-    title: string;
-    type: string;
-    data: any;
-    columnNames: string[];
-    options: any;
-  };
-  constructor(private cd: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this.chart = {
-      title: '',
-      type: 'LineChart',
-      data: [],
-      columnNames: ['period', 'close'],
-      options: { title: `Stock price`, width: '600', height: '400' }
-    };
-
-    this.data$.subscribe(newData => (this.chartData = newData));
-  }
+export class ChartComponent {
+  @Input() data: (string | number)[][] = [];
+  @Input() title = '';
+  @Input() type = 'LineChart';
+  @Input() columnNames: string[];
+  @Input() options: any = { width: '600', height: '400' };
 }

libs/stocks/feature-shell/src/lib/stocks/stocks.component.css

@@ -1,3 +1,7 @@
+form {
+  margin-bottom: 20px;
+}
+
 mat-form-field {
   display: block;
 }

libs/stocks/feature-shell/src/lib/stocks/stocks.component.html

@@ -32,4 +32,9 @@
   <button (click)="fetchQuote()" mat-raised-button>Go</button>
 </form>
 
-<coding-challenge-chart [data$]="quotes$"></coding-challenge-chart>
+<coding-challenge-chart
+  [type]="'LineChart'"
+  [title]="'Stock Prices'"
+  [columnNames]="['period', 'close']"
+  [data]="quotes$ | async"
+></coding-challenge-chart>

libs/stocks/feature-shell/src/lib/stocks/stocks.component.ts

@@ -1,16 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { PriceQueryFacade } from '@coding-challenge/stocks/data-access-price-query';
 
 @Component({
   selector: 'coding-challenge-stocks',
   templateUrl: './stocks.component.html',
-  styleUrls: ['./stocks.component.css']
+  styleUrls: ['./stocks.component.css'],
 })
-export class StocksComponent implements OnInit {
+export class StocksComponent {
   stockPickerForm: FormGroup;
   symbol: string;
-  period: string;
 
   quotes$ = this.priceQuery.priceQueries$;
 
@@ -22,18 +21,16 @@ export class StocksComponent implements OnInit {
     { viewValue: 'Year-to-date', value: 'ytd' },
     { viewValue: 'Six months', value: '6m' },
     { viewValue: 'Three months', value: '3m' },
-    { viewValue: 'One month', value: '1m' }
+    { viewValue: 'One month', value: '1m' },
   ];
 
   constructor(private fb: FormBuilder, private priceQuery: PriceQueryFacade) {
     this.stockPickerForm = fb.group({
       symbol: [null, Validators.required],
-      period: [null, Validators.required]
+      period: [null, Validators.required],
     });
   }
 
-  ngOnInit() {}
-
   fetchQuote() {
     if (this.stockPickerForm.valid) {
       const { symbol, period } = this.stockPickerForm.value;

package.json

@@ -9,24 +9,24 @@
     "serve:stocks-api": "ng run stocks-api:serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "./node_modules/.bin/nx lint && ng lint",
+    "lint": "nx lint && ng lint",
     "e2e": "ng e2e",
-    "affected:apps": "./node_modules/.bin/nx affected:apps",
-    "affected:libs": "./node_modules/.bin/nx affected:libs",
-    "affected:build": "./node_modules/.bin/nx affected:build",
-    "affected:e2e": "./node_modules/.bin/nx affected:e2e",
-    "affected:test": "./node_modules/.bin/nx affected:test",
-    "affected:lint": "./node_modules/.bin/nx affected:lint",
-    "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph",
-    "affected": "./node_modules/.bin/nx affected",
-    "format": "./node_modules/.bin/nx format:write",
-    "format:write": "./node_modules/.bin/nx format:write",
-    "format:check": "./node_modules/.bin/nx format:check",
+    "affected:apps": "nx affected:apps",
+    "affected:libs": "nx affected:libs",
+    "affected:build": "nx affected:build",
+    "affected:e2e": "nx affected:e2e",
+    "affected:test": "nx affected:test",
+    "affected:lint": "nx affected:lint",
+    "affected:dep-graph": "nx affected:dep-graph",
+    "affected": "nx affected",
+    "format": "nx format:write",
+    "format:write": "nx format:write",
+    "format:check": "nx format:check",
     "update": "ng update @nrwl/schematics",
     "update:check": "ng update",
-    "workspace-schematic": "./node_modules/.bin/nx workspace-schematic",
-    "dep-graph": "./node_modules/.bin/nx dep-graph",
-    "help": "./node_modules/.bin/nx help"
+    "workspace-schematic": "nx workspace-schematic",
+    "dep-graph": "nx dep-graph",
+    "help": "nx help"
   },
   "private": true,
   "dependencies": {