wip add interest rate changes

hristop · Apr 7, 2023 · 8a3995b · 8a3995b
1 parent bdfea9e
commit 8a3995b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Loan Calculator</title>
   </head>
-  <body data-ui5-compact-size>
+  <body>
     <main id="app">
       <ui5-title level="H1">Loan Calculator</ui5-title>
       <ui5-panel

diff --git a/src/css/style.css b/src/css/style.css
@@ -43,9 +43,16 @@ main {
 
 form > div {
   text-align: center;
+  vertical-align: baseline;
+  margin-bottom: 0.5rem;
 }
 
-ui5-panel {
+form > div > * {
+  vertical-align: middle;
+  vertical-align: -webkit-baseline-middle;
+}
+
+main > ui5-panel {
   width: 100%;
   margin: 0.5rem auto 0.5rem auto;
 }
@@ -111,11 +118,13 @@ ui5-table#interestChangesTable {
 div#lineChart {
   height: 400px;
   max-width: 100%;
+  overflow: hidden;
 }
 
 div#pieChart {
   height: 400px;
   max-width: 100%;
+  overflow: hidden;
 }
 
 /* ---------- LARGER SCREENS -------------- */
@@ -149,7 +158,7 @@ div#pieChart {
     justify-content: center;
     align-items: normal;
     align-content: normal;
-    row-gap: 1rem;
+    row-gap: 0;
   }
 
   form > div {

diff --git a/src/js/calcLoan.js b/src/js/calcLoan.js
@@ -8,7 +8,7 @@ import { gatherInterestChanges } from "./interestChanges";
 import moment from 'moment';
 
 export function setUpCalc(element) {
-    const calcVariableMonthlyPayment = (loanAmount, monthlyInterest, loanTerm) => {
+    const calcFixedMonthlyPayment = (loanAmount, monthlyInterest, loanTerm) => {
         return (loanAmount * monthlyInterest) / (1 - Math.pow(1 + monthlyInterest, -loanTerm));
     };
 
@@ -28,7 +28,7 @@ export function setUpCalc(element) {
         let fixedPrincipalPayment = loanData.loanAmount / loanData.loanTerm;
 
         // Fixed monthly payment
-        let variableMonthlyPayment = calcVariableMonthlyPayment(loanData.loanAmount, monthlyInterestRate, loanData.loanTerm);
+        let fixedMonthlyPayment = calcFixedMonthlyPayment(loanData.loanAmount, monthlyInterestRate, loanData.loanTerm);
             // (loanData.loanAmount * monthlyInterestRate) /
             // (1 - Math.pow(1 + monthlyInterestRate, -loanData.loanTerm));
 
@@ -41,6 +41,7 @@ export function setUpCalc(element) {
             let addMonthPayment = 0;
             let monthlyPrincipal = 0;
             let monthlyPayment = 0;
+            const remainingMonths = loanData.fixedPrincipal ? Math.ceil(remainingPrincipal / fixedPrincipalPayment) : Math.ceil(remainingPrincipal / fixedMonthlyPayment)
             index ++;
 
             loanData.interestRateChanges.forEach(interestRateChange => {
@@ -55,7 +56,13 @@ export function setUpCalc(element) {
                     // - the remaining loan principal
                     // - the new interest rate
                     // - the remaining time
-                    // variableMonthlyPayment = calcVariableMonthlyPayment(remainingPrincipal, monthlyInterestRate, Math.abs(loanData.loanTerm - index));
+                    // payment = remainingBalance * (monthlyInterestRate * (Math.pow(1 + monthlyInterestRate, numberOfPayments - i + 1))) / ((Math.pow(1 + monthlyInterestRate, numberOfPayments - i + 1)) - 1);
+                    fixedMonthlyPayment = remainingPrincipal * (monthlyInterestRate * (Math.pow(1 + monthlyInterestRate, remainingMonths + 1))) / ((Math.pow(1 + monthlyInterestRate, remainingMonths + 1)) - 1);
+                    //if (newPayment > fixedMonthlyPayment) {
+                    //    fixedMonthlyPayment = newPayment;
+                    //}
+                    //console.log(fixedMonthlyPayment);
+                    // fixedMonthlyPayment = calcfixedMonthlyPayment(remainingPrincipal, monthlyInterestRate, Math.abs(loanData.loanTerm - index));
                 }
             })
 
@@ -100,7 +107,7 @@ export function setUpCalc(element) {
             } else {
                 // Payment for each month may vary if there is additional payment made
                 // or the remaining principal is less than the payment itself
-                monthlyPayment = variableMonthlyPayment
+                monthlyPayment = fixedMonthlyPayment
 
                 // Calculate monthly payment
                 monthlyPayment += addMonthPayment
@@ -124,7 +131,7 @@ export function setUpCalc(element) {
             if (newFixedPart) {
                 loanData.fixedPrincipal ?
                     fixedPrincipalPayment = newFixedPart :
-                    variableMonthlyPayment = newFixedPart;
+                    fixedMonthlyPayment = newFixedPart;
             }
 
             // Log payment details for this month
@@ -226,7 +233,6 @@ export function setUpCalc(element) {
         // Gather additional payments
         const additionalPayments = gatherAdditionalPayments();
         const interestChanges = gatherInterestChanges();
-        console.log(interestChanges);
 
         if (!validInput(loanAmount, interestRate, loanTerm) || !validateAdditionalPayments(loanTerm, additionalPayments)) {
             return;
@@ -262,7 +268,6 @@ export function setUpCalc(element) {
         // Charts
         drawLineChart(data.lineChartData);
         drawPieChart(data.pieChartData);
-
         data.destroy();
     }
 

diff --git a/src/js/charts.js b/src/js/charts.js
@@ -1,4 +1,5 @@
 import HighCharts from 'highcharts';
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 
 const extractToLineChartSeries = (data, seriesName, index) => {
     const seriesData = data.map(dataPoint => ({
@@ -14,11 +15,15 @@ const extractToLineChartSeries = (data, seriesName, index) => {
 const drawLineChart = lineChartData => {
     const remainingPrincipal = extractToLineChartSeries(lineChartData, "Principal", 1);
     const totalInterest = extractToLineChartSeries(lineChartData, "Interest", 2);
+    const bPhone = isPhone();
 
     remainingPrincipal.color = '#0070f2';
     totalInterest.color = '#aa0808';
 
     const options = {
+        chart: {
+            animation: !bPhone
+        },
         title: {
             text: 'Loan Payment Schedule'
         },
@@ -52,11 +57,20 @@ const drawLineChart = lineChartData => {
         }
     };
 
-    HighCharts.chart('lineChart', options);
+    console.log(options);
+
+    const chart = HighCharts.chart('lineChart', options);
+    if (bPhone) {
+        setTimeout(() => {chart.reflow();}, 10);
+    }
 };
 
 const drawPieChart = pieChartData => {
+    const bPhone = isPhone();
     const options = {
+        chart: {
+            animation: !bPhone
+        },
         title: {
             text: 'Loan Payment'
         },
@@ -66,6 +80,7 @@ const drawPieChart = pieChartData => {
         ],
         series: [{
             type: 'pie',
+            animation: !bPhone,
             data: [
                 {
                     name: pieChartData[0][0],
@@ -95,7 +110,10 @@ const drawPieChart = pieChartData => {
         }
     };
 
-    HighCharts.chart('pieChart', options);
+    const chart = HighCharts.chart('pieChart', options);
+    if (bPhone) {
+        setTimeout(() => {chart.reflow();}, 20);
+    }
 };
 
 export {

diff --git a/src/js/main.js b/src/js/main.js
@@ -28,6 +28,11 @@ import "@ui5/webcomponents-icons/dist/delete";
 
 //import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+
+if (isDesktop()) {
+    document.querySelector('body').setAttribute('data-ui5-compact-size', '');
+}
 
 //setLanguage("es");
 setTheme("sap_horizon");