Add monthly savings ratio to expense page
This commit is contained in:
parent
0eb6be48fd
commit
c08b2e25ca
|
@ -9,6 +9,7 @@ import {
|
||||||
forEachMonth,
|
forEachMonth,
|
||||||
formatFixedWidthFloat,
|
formatFixedWidthFloat,
|
||||||
formatCurrency,
|
formatCurrency,
|
||||||
|
formatPercentage,
|
||||||
formatCurrencyCrude,
|
formatCurrencyCrude,
|
||||||
Posting,
|
Posting,
|
||||||
restName,
|
restName,
|
||||||
|
@ -189,6 +190,14 @@ function renderSelectedMonth(
|
||||||
setHtml("current-month-tax", sum(taxes), COLORS.lossText);
|
setHtml("current-month-tax", sum(taxes), COLORS.lossText);
|
||||||
setHtml("current-month-expenses", sum(expenses), COLORS.lossText);
|
setHtml("current-month-expenses", sum(expenses), COLORS.lossText);
|
||||||
setHtml("current-month-investment", sum(investments), COLORS.secondary);
|
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) {
|
function sum(postings: Posting[], sign = 1) {
|
||||||
|
|
|
@ -236,6 +236,21 @@ export function formatFloat(value, precision = 2) {
|
||||||
return sprintf(`%.${precision}f`, value);
|
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) {
|
export function formatFixedWidthFloat(value, width, precision = 2) {
|
||||||
if (obscure) {
|
if (obscure) {
|
||||||
value = 0;
|
value = 0;
|
||||||
|
|
|
@ -411,6 +411,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
|
|
Loading…
Reference in New Issue