ztimson/etf-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Just a few changes

Browse Source
This commit is contained in:
Zakary Timson
2018-11-30 08:38:41 -05:00
parent 436792540d
commit 58b6b9d105
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.component.html
View File

@@ -27,13 +27,14 @@
<!-- Input for selecting holdings -->
<div class="p-3">
<mat-form-field class="w-50" appearance="fill">
<mat-label>Add Holding</mat-label>
<mat-chip-list #chipList>
<mat-chip *ngFor="let holding of graphHoldings; let i = index" [removable]="true" (removed)="graphHoldings.splice(i, 1); updateGraph()">
{{holding}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input #holdingInput class="w-100"
placeholder="Add Holdings"
placeholder="Search"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(keyup)="search($event.target.value)">

14
src/app/app.component.ts
View File

@@ -1,15 +1,17 @@
import {Component, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
import {timer} from './timer';
import {colorScheme} from './colorScheme';
import {BehaviorSubject} from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('fileUploader') fileUploader: ElementRef;
@ViewChild('holdingInput') holdingInput: ElementRef;
autoCompleteList = new EventEmitter<string[]>(); // Async pipe to provide autocomplete list after being filtered by the text input
autoCompleteList = new BehaviorSubject<string[]>([]); // Async pipe to provide autocomplete list after being filtered by the text input
colorScheme = colorScheme; // colors
chartResults = []; // This is where the chart reads the data from
holdings: string[] = []; // All the merged holdings
@@ -39,7 +41,7 @@ export class AppComponent {
this.autoCompleteList.next(this.holdings);
}
constructor() {
constructor(private ngZone: NgZone) {
// Hack to connect angular context to the native one
setInterval(() => this.timer = Math.round(window['timer'] * 10) / 10, 250);
}
@@ -50,7 +52,7 @@ export class AppComponent {
this.data = Object.assign({}, this.data);
}
search(text: string) {
search(text?: string) {
// Filter the holdings list by the text and push it through the async pipe
if(!text) this.autoCompleteList.next(this.holdings);
this.autoCompleteList.next(this.holdings.filter(holding => holding.toLowerCase().indexOf(text) != -1));
@@ -58,6 +60,8 @@ export class AppComponent {
@timer
upload(fileList: FileList) {
if(!fileList || !fileList.length) return;
// Because we enabled uploading multiple fileNames at once we need to process each one individually
const files: File[] = Array.from(fileList);
files.forEach(file => {
@@ -84,9 +88,11 @@ export class AppComponent {
};
reader.readAsText(file);
});
this.fileUploader.nativeElement.value = "";
}
updateGraph(holding?: string) {
// Add holding to chart
if(holding) {
this.graphHoldings.push(holding);
this.holdingInput.nativeElement.value = '';

5
src/index.html
View File

@@ -2,10 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>ETFDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ETF Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/logo.png">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>