// Loan visualization: BalanceChart (bank vs accelerated balance overlay) and APRCurveChart.
// --- BalanceChart -----------------------------------------------------------
// Two balance curves on one axis. The vertical gap between them is the savings.
// Optional balloon marker if hasBalloon = true.
function BalanceChart({ scheduleBank, scheduleAccel, principal, hasBalloon, balloonMonth, payoffMonthAccel, savingsLabel }) {
if (!scheduleBank || scheduleBank.length === 0) return null;
const w = 640;
const h = 260;
const padL = 64, padR = 24, padT = 18, padB = 36;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
// X-axis spans the bank's full payoff (so accel curve sits inside the same frame).
const totalMonths = scheduleBank.length;
const totalYears = totalMonths / 12;
const maxY = principal;
const x = (m) => padL + ((m - 1) / Math.max(1, totalMonths - 1)) * innerW;
const y = (v) => padT + (1 - v / maxY) * innerH;
// Bank balance line (always full width).
const bankPath = scheduleBank.map((s, i) =>
`${i === 0 ? 'M' : 'L'} ${x(s.month)} ${y(s.balance)}`
).join(' ');
// Accelerated balance line (may stop short).
const accelPath = scheduleAccel.map((s, i) =>
`${i === 0 ? 'M' : 'L'} ${x(s.month)} ${y(s.balance)}`
).join(' ');
// The "savings" region — area between the two curves up to the accel payoff.
const accelEnd = scheduleAccel[scheduleAccel.length - 1].month;
const savingsRegion = (() => {
let path = '';
// Top edge: bank balance forward from month 1 to accelEnd
scheduleBank.slice(0, accelEnd).forEach((s, i) => {
path += `${i === 0 ? 'M' : 'L'} ${x(s.month)} ${y(s.balance)}`;
});
// Bottom edge: accel balance backward from accelEnd to month 1
for (let i = scheduleAccel.length - 1; i >= 0; i--) {
const s = scheduleAccel[i];
path += ` L ${x(s.month)} ${y(s.balance)}`;
}
path += ' Z';
return path;
})();
// Year ticks
const yearTicks = [];
const tickStep = Math.max(1, Math.ceil(totalYears / 6));
for (let yr = 0; yr <= totalYears; yr += tickStep) {
yearTicks.push(yr);
}
if (yearTicks[yearTicks.length - 1] !== Math.round(totalYears)) {
yearTicks.push(Math.round(totalYears));
}
const balloonX = hasBalloon ? x(balloonMonth) : null;
const accelPayoffX = x(payoffMonthAccel);
return (
);
}
// Plots effective APR if you exited at each month. With financed fees, this
// curve starts above the stated rate and decays toward it as the term progresses.
function APRCurveChart({ aprCurve, statedRate }) {
if (!aprCurve || aprCurve.length === 0) return null;
const w = 640;
const h = 180;
const padL = 64, padR = 24, padT = 18, padB = 32;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
const n = aprCurve.length;
// Y range — clamp absurd month-1 spikes for readability.
const aprs = aprCurve.map((p) => p.apr).filter((v) => isFinite(v));
let maxApr = Math.max(statedRate * 2.2, ...aprs.slice(Math.floor(n * 0.05)));
if (!isFinite(maxApr) || maxApr <= 0) maxApr = statedRate * 2;
let minApr = Math.min(statedRate * 0.85, ...aprs);
if (!isFinite(minApr) || minApr < 0) minApr = 0;
const x = (m) => padL + ((m - 1) / Math.max(1, n - 1)) * innerW;
const y = (v) => {
const clamped = Math.max(minApr, Math.min(maxApr, v));
return padT + (1 - (clamped - minApr) / (maxApr - minApr)) * innerH;
};
const path = aprCurve.map((p, i) => {
const yv = isFinite(p.apr) ? p.apr : statedRate;
return `${i === 0 ? 'M' : 'L'} ${x(p.month)} ${y(yv)}`;
}).join(' ');
// Stated-rate reference line.
const refY = y(statedRate);
// Year ticks
const totalYears = n / 12;
const yearTicks = [];
const tickStep = Math.max(1, Math.ceil(totalYears / 6));
for (let yr = 0; yr <= totalYears; yr += tickStep) yearTicks.push(yr);
if (yearTicks[yearTicks.length - 1] !== Math.round(totalYears)) {
yearTicks.push(Math.round(totalYears));
}
// Y axis ticks — round-ish numbers
const yTicks = [];
const range = maxApr - minApr;
const step = range > 8 ? 4 : range > 4 ? 2 : 1;
for (let v = Math.ceil(minApr); v <= maxApr; v += step) yTicks.push(v);
return (
);
}
window.BalanceChart = BalanceChart;
window.APRCurveChart = APRCurveChart;