Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@gurbindersingh
gurbindersingh committed Nov 17, 2024
2 parents fd83d9d + fc72502 commit 1c06484
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 42 deletions.
1 change: 1 addition & 0 deletions src/chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function createChart(plotData: PlotData[]) {
datasets: createDatasets([])
},
options: {
animation: false,
datasets: {
line: {
borderWidth: 2,
Expand Down
82 changes: 51 additions & 31 deletions src/inputs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ interface Inputs {
isValid: () => boolean;
min: number;
max: number;
addon?: string;
additionalSetup?: () => void;
steps: number;
addon?: () => string;
/**
* Any additional setup that is specific to this input.
*/
runOnChange?: () => void;
}

const inputs: Inputs[] = [
Expand All @@ -25,7 +29,8 @@ const inputs: Inputs[] = [
id: "current-age",
isValid: () => settings.currentAge <= settings.retirementAge,
min: 0,
max: 100
max: 100,
steps: 1
},
{
label: "Retirement Age",
Expand All @@ -36,7 +41,8 @@ const inputs: Inputs[] = [
id: "retirement-age",
isValid: () => settings.retirementAge < settings.lifeExpectancy,
min: 0,
max: 100
max: 100,
steps: 1
},
{
label: "Life Expectancy",
Expand All @@ -47,7 +53,8 @@ const inputs: Inputs[] = [
id: "life-expectancy",
isValid: () => settings.retirementAge < settings.lifeExpectancy,
min: 0,
max: 100
max: 100,
steps: 1
},
{
label: "Annual Net Salary",
Expand All @@ -57,11 +64,13 @@ const inputs: Inputs[] = [
id: "net-salary",
isValid: () => true,
min: 0,
// If you are making so much money and you are probably not using this tool.
max: 1_000_000_000,
additionalSetup: () => {
steps: 10,
runOnChange: () => {
inputs
.filter((input) => input.id === "savings-percentage")
.forEach((input) => input.additionalSetup && input.additionalSetup());
.filter((input) => input.id === "monthly-savings")
.forEach((input) => input.runOnChange && input.runOnChange());
}
},
{
Expand All @@ -80,7 +89,8 @@ const inputs: Inputs[] = [
which is approximately 3.23%.`,
isValid: () => true,
min: 0,
max: 100
max: 100,
steps: 0.1
},
{
label: "Current Savings",
Expand All @@ -92,38 +102,43 @@ const inputs: Inputs[] = [
return as specified above.`,
isValid: () => true,
min: 0,
max: 1_000_000_000
max: 1_000_000_000,
steps: 10
},
{
label: "Current Savings Contributions (in %)",
description: `The percentage of your salary that goes towards savings`,
isPercentage: true,
settingsKey: "savingsPercentage",
id: "savings-percentage",
label: "Savings contributions",
description: "What you typically save in a month",
isPercentage: false,
settingsKey: "monthlySavings",
id: "monthly-savings",
footnote: `This is what you currently contribute towards your savings or
investments. It is also used to determine the current living costs by
subtracting the amount from your salary. Any further saving
contributions are calculated by subtracting the living costs from the
salary.`,
isValid: () => true,
min: -100,
max: 100,
addon: `<p class="control">
min: -1_000_000_000,
max: 1_000_000_000,
steps: 10,
addon: () => `<p class="control">
<span class="button is-static">
=
<span id="absolut-savings-contributions" class="mx-1">${Math.round(
(settings.netSalary * settings.savingsPercentage) / 12
)}
<span id="absolut-savings-contributions" class="mx-1">
${(
(100 * settings.monthlySavings) /
(settings.netSalary / 12)
).toFixed(1)}
</span>
/ month
%
</span>
</p>`,
additionalSetup: () => {
runOnChange: () => {
// Update the percentage display
document.getElementById(
"absolut-savings-contributions"
)!.innerHTML = `${Math.round(
(settings.netSalary * settings.savingsPercentage) / 12
)}`;
)!.innerHTML = `${(
(100 * settings.monthlySavings) / (settings.netSalary / 12)
).toFixed(1)}`;
}
},
{
Expand All @@ -134,7 +149,8 @@ const inputs: Inputs[] = [
id: "average-inflation",
isValid: () => true,
min: -100,
max: 100
max: 100,
steps: 0.1
},
{
label: "Annual Retirement Income",
Expand All @@ -144,7 +160,8 @@ const inputs: Inputs[] = [
id: "retirement-income",
isValid: () => true,
min: 0,
max: 1_000_000_000
max: 1_000_000_000,
steps: 10
},
{
label: "Retirement Income Increase (in %)",
Expand All @@ -157,7 +174,8 @@ const inputs: Inputs[] = [
leave this value at 0.`,
isValid: () => true,
min: 0,
max: 100
max: 100,
steps: 0.1
},
{
label: "Rate of Return (in %)",
Expand All @@ -167,7 +185,8 @@ const inputs: Inputs[] = [
id: "rate-of-return",
isValid: () => true,
min: 0,
max: 100
max: 100,
steps: 0.1
},
{
label: "Tax on Investments (in %)",
Expand All @@ -179,7 +198,8 @@ const inputs: Inputs[] = [
is typically the capital gains tax.`,
isValid: () => true,
min: 0,
max: 100
max: 100,
steps: 0.1
}
];

Expand Down
2 changes: 1 addition & 1 deletion src/projection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { settings } from "./settings";
* @returns An array containing the initialized data points.
*/
function initializeDataStructure(): PlotData[] {
settings.livingCosts = settings.netSalary * (1 - settings.savingsPercentage);
settings.livingCosts = settings.netSalary - (12 * settings.monthlySavings);

const data: PlotData[] = Array(settings.lifeExpectancy - settings.currentAge + 1)
.fill(0)
Expand Down
7 changes: 4 additions & 3 deletions src/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ function renderControls() {
id,
footnote,
min,
max
max,
steps
} = input;
const value = settingsMap.get(settingsKey)!;

Expand All @@ -39,7 +40,7 @@ function renderControls() {
<div class="control is-expanded">
<input
value="${isPercentage ? (100 * value).toPrecision(3) : value}"
step="${isPercentage ? 0.1 : 1}"
step="${steps}"
aria-label="${label}"
id="${id}"
class="input"
Expand All @@ -49,7 +50,7 @@ function renderControls() {
/>
</div>
${
input.addon ? input.addon : ""
input.addon ? input.addon() : ""
}
</div>
${helpText}
Expand Down
12 changes: 6 additions & 6 deletions src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ interface Settings {
lifeExpectancy: number;
netSalary: number;
salaryIncrease: number;
savingsPercentage: number;
monthlySavings: number;
currentSavings: number;
livingCosts: number;
averageInflation: number;
Expand All @@ -14,28 +14,28 @@ interface Settings {
tax: number;
}

const defaults = {
const getDefaults: () => Settings = () => ({
currentAge: 30,
retirementAge: 65,
lifeExpectancy: 80,
netSalary: 30000,
salaryIncrease: 0.02,
savingsPercentage: 0.15,
monthlySavings: 375,
currentSavings: 0,
livingCosts: 0,
averageInflation: 0.03,
retirementIncome: 50000,
retirementIncomeIncrease: 0,
rateOfReturn: 0.05,
tax: 0.275
};
});

let settings: Settings = window.localStorage.getItem("settings")
? JSON.parse(window.localStorage.getItem("settings")!)
: defaults;
: getDefaults;

function resetSettings() {
settings = defaults;
settings = getDefaults();
saveSettings();
}

Expand Down
2 changes: 1 addition & 1 deletion src/setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function setupEventListeners() {
} else {
toggleInputErrorHints(input.id, input.isValid());
}
if (input.additionalSetup) input.additionalSetup();
if (input.runOnChange) input.runOnChange();
})
);

Expand Down

0 comments on commit 1c06484

Please sign in to comment.