From 8a3995baf33f1da2697d3605d0039235bf502b26 Mon Sep 17 00:00:00 2001 From: Hristo Petrov Date: Fri, 7 Apr 2023 17:43:23 +0300 Subject: [PATCH] wip add interest rate changes --- index.html | 2 +- src/css/style.css | 13 +++++++++++-- src/js/calcLoan.js | 19 ++++++++++++------- src/js/charts.js | 22 ++++++++++++++++++++-- src/js/main.js | 5 +++++ 5 files changed, 49 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 42da1fc..b1f395e 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Loan Calculator - +
Loan Calculator 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 index de38e84..f461e08 100644 --- 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 index b73df25..284a11b 100644 --- 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 index fabfbff..4bf7a34 100644 --- 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");