ztimson/etf-demo
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
Show Stats 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 --> <!-- Input for selecting holdings -->
<div class="p-3"> <div class="p-3">
<mat-form-field class="w-50" appearance="fill"> <mat-form-field class="w-50" appearance="fill">
<mat-label>Add Holding</mat-label>
<mat-chip-list #chipList> <mat-chip-list #chipList>
<mat-chip *ngFor="let holding of graphHoldings; let i = index" [removable]="true" (removed)="graphHoldings.splice(i, 1); updateGraph()"> <mat-chip *ngFor="let holding of graphHoldings; let i = index" [removable]="true" (removed)="graphHoldings.splice(i, 1); updateGraph()">
{{holding}} {{holding}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input #holdingInput class="w-100" <input #holdingInput class="w-100"
placeholder="Add Holdings" placeholder="Search"
[matAutocomplete]="auto" [matAutocomplete]="auto"
[matChipInputFor]="chipList" [matChipInputFor]="chipList"
(keyup)="search($event.target.value)"> (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 {timer} from './timer';
import {colorScheme} from './colorScheme'; import {colorScheme} from './colorScheme';
import {BehaviorSubject} from 'rxjs';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html' templateUrl: './app.component.html'
}) })
export class AppComponent { export class AppComponent {
@ViewChild('fileUploader') fileUploader: ElementRef;
@ViewChild('holdingInput') holdingInput: 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 colorScheme = colorScheme; // colors
chartResults = []; // This is where the chart reads the data from chartResults = []; // This is where the chart reads the data from
holdings: string[] = []; // All the merged holdings holdings: string[] = []; // All the merged holdings
@ -39,7 +41,7 @@ export class AppComponent {
this.autoCompleteList.next(this.holdings); this.autoCompleteList.next(this.holdings);
} }
constructor() { constructor(private ngZone: NgZone) {
// Hack to connect angular context to the native one // Hack to connect angular context to the native one
setInterval(() => this.timer = Math.round(window['timer'] * 10) / 10, 250); setInterval(() => this.timer = Math.round(window['timer'] * 10) / 10, 250);
} }
@ -50,7 +52,7 @@ export class AppComponent {
this.data = Object.assign({}, this.data); 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 // Filter the holdings list by the text and push it through the async pipe
if(!text) this.autoCompleteList.next(this.holdings); if(!text) this.autoCompleteList.next(this.holdings);
this.autoCompleteList.next(this.holdings.filter(holding => holding.toLowerCase().indexOf(text) != -1)); this.autoCompleteList.next(this.holdings.filter(holding => holding.toLowerCase().indexOf(text) != -1));
@ -58,6 +60,8 @@ export class AppComponent {
@timer @timer
upload(fileList: FileList) { upload(fileList: FileList) {
if(!fileList || !fileList.length) return;
// Because we enabled uploading multiple fileNames at once we need to process each one individually // Because we enabled uploading multiple fileNames at once we need to process each one individually
const files: File[] = Array.from(fileList); const files: File[] = Array.from(fileList);
files.forEach(file => { files.forEach(file => {
@ -84,9 +88,11 @@ export class AppComponent {
}; };
reader.readAsText(file); reader.readAsText(file);
}); });
this.fileUploader.nativeElement.value = "";
} }
updateGraph(holding?: string) { updateGraph(holding?: string) {
// Add holding to chart
if(holding) { if(holding) {
this.graphHoldings.push(holding); this.graphHoldings.push(holding);
this.holdingInput.nativeElement.value = ''; this.holdingInput.nativeElement.value = '';

5
src/index.html
View File

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