starting to do monthly performance

src/app/app.component.ts

 
     setTimeout(() => {
       const specialCommand = 'send dummy string for 500 times';
-      this.wsService.sendMessage(specialCommand);
+      this.wsService.sendMessage(specialCommand + " cancelled");
+
     }, 2000);
   }
 

src/app/app.module.ts

 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';
 
 
 
     RatingComponent,
     TransDetailsComponent,
     TransTailsComponent,
-    ChartTypeOfLoansComponent
+    ChartTypeOfLoansComponent,
+    ChartAmountOfLoansComponent,
+    ChartPastYearMonthlyPerformanceComponent
   ],
   imports: [
     BrowserModule,

src/app/chart-amount-of-loans/chart-amount-of-loans.component.html

+
+<kendo-chart>
+  <kendo-chart-title text="Gross value of Loans (Million AUD)"></kendo-chart-title>
+  <kendo-chart-category-axis>
+    <kendo-chart-category-axis-item [categories]="label">
+    </kendo-chart-category-axis-item>
+  </kendo-chart-category-axis>
+  <kendo-chart-series>
+    <kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="amount">
+    </kendo-chart-series-item>
+<!--    <kendo-chart-series-item type="bar" [data]="share">-->
+<!--    </kendo-chart-series-item>-->
+<!--    <kendo-chart-series-item type="bar" [data]="count">-->
+<!--    </kendo-chart-series-item>-->
+  </kendo-chart-series>
+</kendo-chart>

src/app/chart-amount-of-loans/chart-amount-of-loans.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartAmountOfLoansComponent } from './chart-amount-of-loans.component';
+
+describe('ChartAmountOfLoansComponent', () => {
+  let component: ChartAmountOfLoansComponent;
+  let fixture: ComponentFixture<ChartAmountOfLoansComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChartAmountOfLoansComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartAmountOfLoansComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chart-amount-of-loans/chart-amount-of-loans.component.ts

+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<TypeOfLoansModel[]>;
+
+  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<TypeOfLoansModel[]>(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);
+    });
+  }
+
+}

src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.html

+<kendo-chart [title]="{ text: 'Monthly Loan Value' }">
+  <kendo-chart-series>
+    <kendo-chart-series-item type="waterfall"
+                             [data]="cashFlowData" [color]="pointColor"
+                             field="amount" categoryField="period" summaryField="summary">
+      <kendo-chart-series-item-labels format="C0" position="insideEnd">
+      </kendo-chart-series-item-labels>
+    </kendo-chart-series-item>
+  </kendo-chart-series>
+  <kendo-chart-value-axis>
+    <kendo-chart-value-axis-item [labels]="{ format: 'C0' }">
+    </kendo-chart-value-axis-item>
+  </kendo-chart-value-axis>
+</kendo-chart>

src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartPastYearMontnlyPerformanceComponent } from './chart-past-year-monthly-performance.component';
+
+describe('ChartPastYearMontnlyPerformanceComponent', () => {
+  let component: ChartPastYearMontnlyPerformanceComponent;
+  let fixture: ComponentFixture<ChartPastYearMontnlyPerformanceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChartPastYearMontnlyPerformanceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartPastYearMontnlyPerformanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chart-past-year-monthly-performance/chart-past-year-monthly-performance.component.ts

+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';
+    }
+  }
+}

src/app/chart-type-of-loans/chart-type-of-loans.component.html

+
+<kendo-chart  [transitions]="true">
+  <kendo-chart-title text="Stages of Loans"></kendo-chart-title>
+  <kendo-chart-series>
+    <kendo-chart-series-item
+      [autoFit]="autoFit"
+      type="donut" [data]="data | async"
+      categoryField="Kind" field="Share">
+      <kendo-chart-series-item-labels
+        position="outsideEnd"
+        color="#000"
+        [content]="labelContent">
+      </kendo-chart-series-item-labels>
+    </kendo-chart-series-item>
+  </kendo-chart-series>
+  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
+</kendo-chart>
+
+

src/app/chart-type-of-loans/chart-type-of-loans.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartTypeOfLoansComponent } from './chart-type-of-loans.component';
+
+describe('ChartTypeOfLoansComponent', () => {
+  let component: ChartTypeOfLoansComponent;
+  let fixture: ComponentFixture<ChartTypeOfLoansComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChartTypeOfLoansComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartTypeOfLoansComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chart-type-of-loans/chart-type-of-loans.component.ts

+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<TypeOfLoansModel[]>;
+
+  constructor(private auth: AuthService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.data = this.getTypeOfLoans();
+  }
+
+  public labelContent(e: any): string {
+    return e.category;
+  }
+
+  public getTypeOfLoans(): Observable<TypeOfLoansModel[]> {
+    return this.http.get<TypeOfLoansModel[]>(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;
+        }
+      )
+    );
+  }
+
+}

src/app/dashboard/dashboard.component.html

   <div class="container inner">
     <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
     <bkp-divider>
-      <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Daily summary
+      <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Loan overview
     </bkp-divider>
 
     <div class="row">
         <app-chart-type-of-loans></app-chart-type-of-loans>
       </div>
       <div class="col-sm-6">
-        <kendo-chart>
-          <kendo-chart-title text="Units sold"></kendo-chart-title>
+        <app-chart-amount-of-loans></app-chart-amount-of-loans>
+      </div>
+    </div>
 
-          <kendo-chart-category-axis>
-            <kendo-chart-category-axis-item [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
-              [title]="{ text: 'type' }">
-            </kendo-chart-category-axis-item>
-          </kendo-chart-category-axis>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <bkp-divider>
+      <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Past 12 Month Performance
+    </bkp-divider>
 
-          <kendo-chart-series>
-            <kendo-chart-series-item type="bar" [data]="[123, 276, 310, 212, 240, 156, 98]">
-            </kendo-chart-series-item>
-            <kendo-chart-series-item type="bar" [data]="[165, 210, 287, 144, 190, 167, 212]">
-            </kendo-chart-series-item>
-            <kendo-chart-series-item type="bar" [data]="[56, 140, 195, 46, 123, 78, 95]">
-            </kendo-chart-series-item>
-          </kendo-chart-series>
-        </kendo-chart>
+    <div class="row">
+      <div class="col-sm-12">
+        <app-chart-past-year-monthly-performance></app-chart-past-year-monthly-performance>
       </div>
     </div>
     <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>

src/app/models/type-of-loans.model.ts

 
 
 export class TypeOfLoansModel{
-  kind: string;
-  share: number;
+  Kind: string;
+  Count: number;
+  Amount: number;
+  Share: number;
 }