diff --git a/.editorconfig b/.editorconfig index e89330a..b585a76 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,7 @@ root = true [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true diff --git a/src/app/app.component.html b/src/app/app.component.html index 5226d57..6d7fc73 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,19 @@ -
-

- Welcome to {{ title }}! -

- Angular Logo + + ETF Demo + + + +
+ +
-

Here are some links to help you start:

- + diff --git a/src/app/app.component.scss b/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 63c268b..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'ETFDemo'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('ETFDemo'); - }); - - it('should render title in a h1 tag', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to ETFDemo!'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 29b9f55..6ea220f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,52 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: 'app-root', + templateUrl: './app.component.html' }) export class AppComponent { - title = 'ETFDemo'; + chartResults; // This is where the chart reads the data from + chartHeight = '100%'; + + // ngx-charts requires a different data structure than the hash map we built so I will use a setter to handle converting it when we go to save the processed data. + private _data; + get data() { return this._data; } + set data(data) { + this._data = data; + this.chartHeight = `${Object.keys(data).length * 100}px`; + this.chartResults = Object.keys(data).map(key => ({name: key, series: data[key].map((val, i) => ({name: i, value: val}))})); + } + + constructor() { } + + upload(fileList: FileList) { + // Because we enabled uploading multiple files at once we need to process each one individually + const files: File[] = Array.from(fileList); + files.forEach(file => { + // Process CSV + const reader = new FileReader(); + reader.onload = (e: ProgressEvent) => { + // Split the file into lines + const lines = ((e.target).result as string).split('\n'); + + // Use regex to grab the holding name and its % market value + this.data = lines.map(text => { + const parse = /^(.+),.+?(\d+\.\d+)%/gm.exec(text); + if(parse) return parse.slice(1); + }).reduce((acc, line) => { + // The regex will turn lines that don't match into null values so lets filter those out here + if(!line) return acc; + + // Add the parsed data into our data set + if(!acc[line[0]]) acc[line[0]] = []; + acc[line[0]].push(Number(line[1])); + + return acc; + }, this.data || {}); + }; + reader.readAsText(file); + }); + } + + format(text) { return `${text} %`} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..517c7dd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,24 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {AppComponent} from './app.component'; +import {MatButtonModule, MatIconModule, MatToolbarModule} from '@angular/material'; +import {NgxChartsModule} from '@swimlane/ngx-charts'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] + declarations: [ + AppComponent + ], + imports: [ + BrowserAnimationsModule, + BrowserModule, + MatButtonModule, + MatIconModule, + MatToolbarModule, + NgxChartsModule, + ], + providers: [], + bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/index.html b/src/index.html index f7d49ee..3573ba0 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,15 @@ - - ETFDemo - + + ETFDemo + - - + + + - + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..57d28e4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,11 @@ -/* You can add global styles to this file, and also import other style files */ +@import url('https://fonts.googleapis.com/css?family=Archivo|Material+Icons'); +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +html, body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + + font-family: 'Archivo', sans-serif; +}