From 857e29fc19eb9889220cfeed900410efb1040d5c Mon Sep 17 00:00:00 2001
From: Patrick Sun <patrick@lawipac.com>
Date: Thu, 4 Mar 2021 21:01:37 +1100
Subject: [PATCH] monthly value chart ready

---
 ...st-year-monthly-performance.component.html |  6 +-
 ...past-year-monthly-performance.component.ts | 63 +++++++++----------
 src/app/models/PastYearMonthly.model.ts       | 11 ++++
 3 files changed, 44 insertions(+), 36 deletions(-)
 create mode 100644 src/app/models/PastYearMonthly.model.ts

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
index 9b4b83f..671ed49 100644
--- 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
@@ -1,8 +1,8 @@
-<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>
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
index 69d3223..ab8f333 100644
--- 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
@@ -1,4 +1,9 @@
 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',
@@ -6,42 +11,34 @@ import { Component, OnInit } from '@angular/core';
   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;
@@ -52,7 +49,7 @@ export class ChartPastYearMonthlyPerformanceComponent implements OnInit {
     if (point.value > 0) {
       return 'green';
     } else {
-      return 'red';
+      return 'lightyellow';
     }
   }
 }
diff --git a/src/app/models/PastYearMonthly.model.ts b/src/app/models/PastYearMonthly.model.ts
new file mode 100644
index 0000000..b5b9471
--- /dev/null
+++ b/src/app/models/PastYearMonthly.model.ts
@@ -0,0 +1,11 @@
+
+
+
+export  class PastYearMonthlyData {
+  Period: string;
+  Month: number;
+  Year: number;
+  Amount: number;
+  Trail: number;
+  Summary: string;
+}