diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c2e9128..c67e870 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,6 +48,8 @@ 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'; +import { ChartRecentTenLoansComponent } from './chart-recent-ten-loans/chart-recent-ten-loans.component'; +import { ChartTopBrokersComponent } from './chart-top-brokers/chart-top-brokers.component'; @@ -68,7 +70,9 @@ import { ChartPastYearMonthlyPerformanceComponent } from './chart-past-year-mont TransTailsComponent, ChartTypeOfLoansComponent, ChartAmountOfLoansComponent, - ChartPastYearMonthlyPerformanceComponent + ChartPastYearMonthlyPerformanceComponent, + ChartRecentTenLoansComponent, + ChartTopBrokersComponent ], imports: [ BrowserModule, diff --git a/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.html b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.html new file mode 100644 index 0000000..b590021 --- /dev/null +++ b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.html @@ -0,0 +1,60 @@ + + + + + + {{ dataItem.Amount | currency }} + + + + + + + {{dataItem.Settlement | date: 'yyyy-MM-dd'}} + + + + + + + + + + + {{ dataItem.Balance | currency }} + + + + + + {{ dataItem.OffsetBalance | currency }} + + + + + + + + + + + + + + + + diff --git a/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.scss b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.scss new file mode 100644 index 0000000..efc1480 --- /dev/null +++ b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.scss @@ -0,0 +1,23 @@ +.customer-name { + display: inline-block; + vertical-align: middle; + line-height: 32px; + padding-left: 10px; +} + +.red { + color: #d9534f; +} + +.green { + color: #06580f; +} + + +.text-bold { + font-weight: 600; +} + +.fullheight_grid { + height: calc(100vh - 48px) !important; +} diff --git a/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.spec.ts b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.spec.ts new file mode 100644 index 0000000..604eb44 --- /dev/null +++ b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChartRecentTenLoansComponent } from './chart-recent-ten-loans.component'; + +describe('ChartRecentTenLoansComponent', () => { + let component: ChartRecentTenLoansComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ChartRecentTenLoansComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ChartRecentTenLoansComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.ts b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.ts new file mode 100644 index 0000000..26fdf0a --- /dev/null +++ b/src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import {Observable} from 'rxjs'; +import {Recent10LoansData} from '../models/recent-ten-loans.model'; +import {HttpClient} from '@angular/common/http'; +import {AuthService} from '../service/auth.service'; +import {map} from 'rxjs/operators'; + +@Component({ + selector: 'app-chart-recent-ten-loans', + templateUrl: './chart-recent-ten-loans.component.html', + styleUrls: ['./chart-recent-ten-loans.component.scss'] +}) +export class ChartRecentTenLoansComponent implements OnInit { + + gridData: Observable; + constructor(private http: HttpClient, private auth: AuthService) { } + + ngOnInit(): void { + this.gridData = this.http.get(this.auth.getUrl('chart/recent-10-loans')).pipe(map( + data => { + data.forEach((value, index) => { + const strPercentage = (100 * value.OffsetBalance / value.Balance).toFixed(1); + value.Percentage = parseFloat(strPercentage); + }); + return data; + } + )); + } +} diff --git a/src/app/chart-top-brokers/chart-top-brokers.component.html b/src/app/chart-top-brokers/chart-top-brokers.component.html new file mode 100644 index 0000000..0d01813 --- /dev/null +++ b/src/app/chart-top-brokers/chart-top-brokers.component.html @@ -0,0 +1,26 @@ + + + + + +
+
{{ dataItem.First }} , {{ dataItem.Last }}
+ + + + + + + + + + + {{ dataItem.TotalReward | currency }} + + + + + {{ dataItem.TotalLoanValue | currency }} + + + diff --git a/src/app/chart-top-brokers/chart-top-brokers.component.scss b/src/app/chart-top-brokers/chart-top-brokers.component.scss new file mode 100644 index 0000000..54cb6d6 --- /dev/null +++ b/src/app/chart-top-brokers/chart-top-brokers.component.scss @@ -0,0 +1,31 @@ +.customer-photo { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + background-size: 32px 35px; + background-position: center center; + vertical-align: middle; + line-height: 32px; + box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); + margin-left: 5px; +} + +.customer-name { + display: inline-block; + vertical-align: middle; + line-height: 32px; + padding-left: 10px; +} + +.red { + color: #d9534f; +} + +.text-bold { + font-weight: 600; +} + +.fullheight_grid { + height: calc(100vh - 48px) !important; +} diff --git a/src/app/chart-top-brokers/chart-top-brokers.component.spec.ts b/src/app/chart-top-brokers/chart-top-brokers.component.spec.ts new file mode 100644 index 0000000..100e332 --- /dev/null +++ b/src/app/chart-top-brokers/chart-top-brokers.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChartTopBrokersComponent } from './chart-top-brokers.component'; + +describe('ChartTopBrokersComponent', () => { + let component: ChartTopBrokersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ChartTopBrokersComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ChartTopBrokersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chart-top-brokers/chart-top-brokers.component.ts b/src/app/chart-top-brokers/chart-top-brokers.component.ts new file mode 100644 index 0000000..660aafe --- /dev/null +++ b/src/app/chart-top-brokers/chart-top-brokers.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import {Observable} from 'rxjs'; +import {TopBrokerModel} from '../models/top-broker.model'; +import {HttpClient} from '@angular/common/http'; +import {AuthService} from '../service/auth.service'; + +@Component({ + selector: 'app-chart-top-brokers', + templateUrl: './chart-top-brokers.component.html', + styleUrls: ['./chart-top-brokers.component.scss'] +}) +export class ChartTopBrokersComponent implements OnInit { + + gridData: Observable; + constructor(private http: HttpClient, private auth: AuthService) { } + + ngOnInit(): void { + this.gridData = this.http.get(this.auth.getUrl('chart/top-broker')); + } + + private photoURL(dataItem: any): string { + return "url('data:image/jpeg;base64,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')"; + } +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8e63ad7..8c0d667 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -26,27 +26,11 @@   Recent - Transactions + Settlement
- - - - - - - - - - - - - - - - - +
@@ -55,23 +39,7 @@
- - - - - - - - - - - - - - - - - +
diff --git a/src/app/models/recent-ten-loans.model.ts b/src/app/models/recent-ten-loans.model.ts new file mode 100644 index 0000000..1fcb29e --- /dev/null +++ b/src/app/models/recent-ten-loans.model.ts @@ -0,0 +1,13 @@ + + +export class Recent10LoansData { + Rank: number; + Id: string; + Amount: number; + Item: string; + Settlement: Date; + Rating: number; + Balance: number; + OffsetBalance: number; + Percentage?:number; +} diff --git a/src/app/models/top-broker.model.ts b/src/app/models/top-broker.model.ts new file mode 100644 index 0000000..5ca64f7 --- /dev/null +++ b/src/app/models/top-broker.model.ts @@ -0,0 +1,15 @@ + + + +export class TopBrokerModel { + Rank: number; + Id: string; + First: string; + Last: string; + + NumOfLoans: number; + NumOfSettledLoans: number; + NumOfUnSettledLoans: number; + TotalReward: number; + TotalLoanValue: number; +}