monthly value chart ready

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

-<kendo-chart [title]="{ text: 'Monthly Loan Value' }">
+<kendo-chart [title]="{ text: 'Monthly Loan Value (Kilo AUD)' }">
   <kendo-chart-series>
     <kendo-chart-series-item type="waterfall"
-                             [data]="cashFlowData" [color]="pointColor"
-                             field="amount" categoryField="period" summaryField="summary">
+                             [data]="pastYearData | async " [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>

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

 import { Component, OnInit } from '@angular/core';
+import {PastYearMonthlyData} from '../models/PastYearMonthly.model';
+import {Observable} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
+import {AuthService} from '../service/auth.service';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'app-chart-past-year-monthly-performance',
   styleUrls: ['./chart-past-year-monthly-performance.component.scss']
 })
 export class ChartPastYearMonthlyPerformanceComponent implements OnInit {
+  pastYearData: Observable<PastYearMonthlyData[]>;
 
-  constructor() { }
+  constructor(private http: HttpClient, private auth: AuthService) { }
 
   ngOnInit(): void {
+    this.pastYearData = this.getPastYearMonthly();
+  }
+
+  // tslint:disable-next-line:typedef
+  private getPastYearMonthly(): Observable<PastYearMonthlyData[]> {
+    return this.http.get<PastYearMonthlyData[]>(this.auth.getUrl('chart/past-year-monthly')).pipe(map(
+      data => {
+        let ret = [];
+        data.forEach( (value: PastYearMonthlyData , index: number ) => {
+          let a = {
+            Period: value.Period,
+            Amount: value.Amount / 1000,
+            Summary: '',
+          };
+          if (index > 0) {
+            a.Amount -= (data[index - 1].Amount / 1000);
+          }
+          ret.push(a);
+        });
+        return ret;
+      }
+    ));
   }
-  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 (point.value > 0) {
       return 'green';
     } else {
-      return 'red';
+      return 'lightyellow';
     }
   }
 }

src/app/models/PastYearMonthly.model.ts

+
+
+
+export  class PastYearMonthlyData {
+  Period: string;
+  Month: number;
+  Year: number;
+  Amount: number;
+  Trail: number;
+  Summary: string;
+}