diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1713593..08ff4fb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -66,7 +66,8 @@ export class AppComponent implements OnInit , OnDestroy {
setTimeout(() => {
const specialCommand = 'send dummy string for 500 times';
- this.wsService.sendMessage(specialCommand);
+ this.wsService.sendMessage(specialCommand + " cancelled");
+
}, 2000);
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 285f596..c2e9128 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,8 @@ import { TransTailsComponent } from './trans-details/trans-tails/trans-tails.com
import {AuthHttpInterceptor} from './auth/auth-http-interceptor.service';
import {WebSocketService} from './websocket';
import { ChartTypeOfLoansComponent } from './chart-type-of-loans/chart-type-of-loans.component';
+import { ChartAmountOfLoansComponent } from './chart-amount-of-loans/chart-amount-of-loans.component';
+import { ChartPastYearMonthlyPerformanceComponent } from './chart-past-year-monthly-performance/chart-past-year-monthly-performance.component';
@@ -64,7 +66,9 @@ import { ChartTypeOfLoansComponent } from './chart-type-of-loans/chart-type-of-l
RatingComponent,
TransDetailsComponent,
TransTailsComponent,
- ChartTypeOfLoansComponent
+ ChartTypeOfLoansComponent,
+ ChartAmountOfLoansComponent,
+ ChartPastYearMonthlyPerformanceComponent
],
imports: [
BrowserModule,
diff --git a/src/app/chart-amount-of-loans/chart-amount-of-loans.component.html b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.html
new file mode 100644
index 0000000..0bb5ff3
--- /dev/null
+++ b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/chart-amount-of-loans/chart-amount-of-loans.component.scss b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/chart-amount-of-loans/chart-amount-of-loans.component.spec.ts b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.spec.ts
new file mode 100644
index 0000000..60baee5
--- /dev/null
+++ b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartAmountOfLoansComponent } from './chart-amount-of-loans.component';
+
+describe('ChartAmountOfLoansComponent', () => {
+ let component: ChartAmountOfLoansComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ChartAmountOfLoansComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChartAmountOfLoansComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/chart-amount-of-loans/chart-amount-of-loans.component.ts b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.ts
new file mode 100644
index 0000000..8c1f156
--- /dev/null
+++ b/src/app/chart-amount-of-loans/chart-amount-of-loans.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import {Observable} from 'rxjs';
+import {TypeOfLoansModel} from '../models/type-of-loans.model';
+import {AuthService} from '../service/auth.service';
+import {HttpClient} from '@angular/common/http';
+
+@Component({
+ selector: 'app-chart-amount-of-loans',
+ templateUrl: './chart-amount-of-loans.component.html',
+ styleUrls: ['./chart-amount-of-loans.component.scss']
+})
+export class ChartAmountOfLoansComponent implements OnInit {
+
+ public autoFit = true;
+ public data: Observable;
+
+ public label = ['Q1', 'Q2', 'Q3', 'Q4'];
+ public amount = [87, 154, 210, 215];
+ public share = [87, 154, 210, 215];
+ public count = [87, 154, 210, 215];
+
+ constructor(private auth: AuthService, private http: HttpClient) { }
+
+ ngOnInit(): void {
+ this.getAmountOfLoans();
+ }
+
+
+ // tslint:disable-next-line:typedef
+ public getAmountOfLoans() {
+ this.http.get(this.auth.getUrl('chart/amount-of-loans')).subscribe(
+ resp => {
+ this.buildChart(resp);
+ }
+ );
+ }
+
+ // tslint:disable-next-line:typedef
+ public buildChart(items: TypeOfLoansModel[]) {
+ this.amount =[];
+ this.share = [];
+ this.label = [];
+ this.count = [];
+ items.forEach( (value, index) =>{
+ this.label.push(value.Kind);
+ this.amount.push(value.Amount / 1000000);
+ this.share.push(value.Share);
+ this.count.push(value.Count);
+ });
+ }
+
+}
diff --git a/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.html b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.html
new file mode 100644
index 0000000..9b4b83f
--- /dev/null
+++ b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.scss b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.spec.ts b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.spec.ts
new file mode 100644
index 0000000..ba5bf5d
--- /dev/null
+++ b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartPastYearMontnlyPerformanceComponent } from './chart-past-year-monthly-performance.component';
+
+describe('ChartPastYearMontnlyPerformanceComponent', () => {
+ let component: ChartPastYearMontnlyPerformanceComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ChartPastYearMontnlyPerformanceComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChartPastYearMontnlyPerformanceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.ts b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.ts
new file mode 100644
index 0000000..69d3223
--- /dev/null
+++ b/src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-chart-past-year-monthly-performance',
+ templateUrl: './chart-past-year-monthly-performance.component.html',
+ styleUrls: ['./chart-past-year-monthly-performance.component.scss']
+})
+export class ChartPastYearMonthlyPerformanceComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+ public cashFlowData = [{
+ period: 'beginning',
+ amount: 50000
+ }, {
+ period: 'Jan',
+ amount: 17000
+ }, {
+ period: 'Feb',
+ amount: 14000
+ }, {
+ period: 'Mar',
+ amount: -12000
+ }, {
+ period: 'Q1',
+ summary: 'runningTotal'
+ }, {
+ period: 'Apr',
+ amount: -22000
+ }, {
+ period: 'May',
+ amount: -18000
+ }, {
+ period: 'Jun',
+ amount: 10000
+ }, {
+ period: 'Q2',
+ summary: 'runningTotal'
+ }, {
+ period: 'Ending',
+ summary: 'total'
+ }];
+
+ public pointColor(point: any): string {
+ const summary = point.dataItem.summary;
+ if (summary) {
+ return summary === 'total' ? '#555' : 'gray';
+ }
+
+ if (point.value > 0) {
+ return 'green';
+ } else {
+ return 'red';
+ }
+ }
+}
diff --git a/src/app/chart-type-of-loans/chart-type-of-loans.component.html b/src/app/chart-type-of-loans/chart-type-of-loans.component.html
new file mode 100644
index 0000000..20e8381
--- /dev/null
+++ b/src/app/chart-type-of-loans/chart-type-of-loans.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/chart-type-of-loans/chart-type-of-loans.component.scss b/src/app/chart-type-of-loans/chart-type-of-loans.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/chart-type-of-loans/chart-type-of-loans.component.spec.ts b/src/app/chart-type-of-loans/chart-type-of-loans.component.spec.ts
new file mode 100644
index 0000000..14805d9
--- /dev/null
+++ b/src/app/chart-type-of-loans/chart-type-of-loans.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartTypeOfLoansComponent } from './chart-type-of-loans.component';
+
+describe('ChartTypeOfLoansComponent', () => {
+ let component: ChartTypeOfLoansComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ChartTypeOfLoansComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChartTypeOfLoansComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/chart-type-of-loans/chart-type-of-loans.component.ts b/src/app/chart-type-of-loans/chart-type-of-loans.component.ts
new file mode 100644
index 0000000..4b95b40
--- /dev/null
+++ b/src/app/chart-type-of-loans/chart-type-of-loans.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import {Observable} from 'rxjs';
+import {TypeOfLoansModel} from '../models/type-of-loans.model';
+import {HttpClient} from '@angular/common/http';
+import {AuthService} from '../service/auth.service';
+import {map} from 'rxjs/operators';
+
+@Component({
+ selector: 'app-chart-type-of-loans',
+ templateUrl: './chart-type-of-loans.component.html',
+ styleUrls: ['./chart-type-of-loans.component.scss']
+})
+export class ChartTypeOfLoansComponent implements OnInit {
+ public autoFit = true;
+ public data: Observable;
+
+ constructor(private auth: AuthService, private http: HttpClient) { }
+
+ ngOnInit(): void {
+ this.data = this.getTypeOfLoans();
+ }
+
+ public labelContent(e: any): string {
+ return e.category;
+ }
+
+ public getTypeOfLoans(): Observable {
+ return this.http.get(this.auth.getUrl('chart/type-of-loans')).pipe(
+ map(
+ input => {
+ let ret = [];
+ input.forEach( (value, index) =>{
+ ret.push({
+ Kind: value.Kind + ' ' + (value.Share * 100) + '%',
+ Count: value.Count,
+ Share: value.Share,
+ Amount: value.Amount
+ }); });
+ return ret;
+ }
+ )
+ );
+ }
+
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 380220a..8e63ad7 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
- Daily summary
+ Loan overview
+
-
-
-
-
+
+
+ Past 12 Month Performance
+
-
-
-
-
-
-
-
-
-
+
diff --git a/src/app/models/type-of-loans.model.ts b/src/app/models/type-of-loans.model.ts
index 3844fa2..e06d1e8 100644
--- a/src/app/models/type-of-loans.model.ts
+++ b/src/app/models/type-of-loans.model.ts
@@ -1,6 +1,8 @@
export class TypeOfLoansModel{
- kind: string;
- share: number;
+ Kind: string;
+ Count: number;
+ Amount: number;
+ Share: number;
}