Add monthly savings ratio to expense page

web/src/expense.ts

@@ -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) {

web/src/utils.ts

@@ -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;

web/static/index.html

@@ -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">