Add monthly savings ratio to expense page
This commit is contained in:
parent
0eb6be48fd
commit
c08b2e25ca
|
@ -9,6 +9,7 @@ import {
|
|||
forEachMonth,
|
||||
formatFixedWidthFloat,
|
||||
formatCurrency,
|
||||
formatPercentage,
|
||||
formatCurrencyCrude,
|
||||
Posting,
|
||||
restName,
|
||||
|
@ -189,6 +190,14 @@ function renderSelectedMonth(
|
|||
setHtml("current-month-tax", sum(taxes), COLORS.lossText);
|
||||
setHtml("current-month-expenses", sum(expenses), COLORS.lossText);
|
||||
setHtml("current-month-investment", sum(investments), COLORS.secondary);
|
||||
setHtml(
|
||||
"current-month-savings-rate",
|
||||
formatPercentage(
|
||||
_.sumBy(investments, "amount") /
|
||||
(-1 * _.sumBy(incomes, "amount") - _.sumBy(taxes, "amount"))
|
||||
),
|
||||
COLORS.primary
|
||||
);
|
||||
}
|
||||
|
||||
function sum(postings: Posting[], sign = 1) {
|
||||
|
|
|
@ -236,6 +236,21 @@ export function formatFloat(value, precision = 2) {
|
|||
return sprintf(`%.${precision}f`, value);
|
||||
}
|
||||
|
||||
export function formatPercentage(value, precision = 0) {
|
||||
if (obscure) {
|
||||
return "00";
|
||||
}
|
||||
|
||||
if (!Number.isFinite(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
return Number(value).toLocaleString(undefined, {
|
||||
style: "percent",
|
||||
minimumFractionDigits: precision
|
||||
});
|
||||
}
|
||||
|
||||
export function formatFixedWidthFloat(value, width, precision = 2) {
|
||||
if (obscure) {
|
||||
value = 0;
|
||||
|
|
|
@ -411,6 +411,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-flex-wrap-wrap">
|
||||
<div class="column is-full">
|
||||
<div class="p-3">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Savings Rate</p>
|
||||
<p class="d3-current-month-savings-rate title"></p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="p-3">
|
||||
|
|
Loading…
Reference in New Issue