[goals] show total investment

Author: ananthakumaran

internal/server/goal/retirement.go

@@ -49,6 +49,8 @@ func getRetirementDetail(db *gorm.DB, conf config.RetirementGoal) gin.H {
 	savingsWithCapitalGains := accounting.FilterByGlob(query.Init(db).Like("Assets:%", "Income:CapitalGains:%").All(), conf.Savings)
 	savingsWithCapitalGains = service.PopulateMarketPrice(db, savingsWithCapitalGains)
 	savingsTotal := accounting.CurrentBalance(savings)
+	investmentTotal := accounting.CostBalance(savings)
+	gainsTotal := savingsTotal.Sub(investmentTotal)
 
 	yearlyExpenses := decimal.NewFromFloat(conf.YearlyExpenses)
 	if !(yearlyExpenses.GreaterThan(decimal.Zero)) {
@@ -63,6 +65,8 @@ func getRetirementDetail(db *gorm.DB, conf config.RetirementGoal) gin.H {
 		"icon":            conf.Icon,
 		"savingsTimeline": accounting.RunningBalance(db, savings),
 		"savingsTotal":    savingsTotal,
+		"investmentTotal": investmentTotal,
+		"gainTotal":       gainsTotal,
 		"swr":             conf.SWR,
 		"yearlyExpense":   yearlyExpenses,
 		"xirr":            service.XIRR(db, savingsWithCapitalGains),

internal/server/goal/savings.go

@@ -32,6 +32,7 @@ func getSavingsDetail(db *gorm.DB, conf config.SavingsGoal) gin.H {
 	savings := accounting.FilterByGlob(query.Init(db).Like("Assets:%").All(), conf.Accounts)
 	savings = service.PopulateMarketPrice(db, savings)
 	savingsTotal := accounting.CurrentBalance(savings)
+	investmentTotal := accounting.CostBalance(savings)
 
 	savingsWithCapitalGains := accounting.FilterByGlob(query.Init(db).Like("Assets:%", "Income:CapitalGains:%").All(), conf.Accounts)
 	savingsWithCapitalGains = service.PopulateMarketPrice(db, savingsWithCapitalGains)
@@ -42,8 +43,10 @@ func getSavingsDetail(db *gorm.DB, conf config.SavingsGoal) gin.H {
 		"type":             "savings",
 		"name":             conf.Name,
 		"icon":             conf.Icon,
-		"savingsTimeline":  accounting.RunningBalance(db, savings),
+		"investmentTotal":  investmentTotal,
 		"savingsTotal":     savingsTotal,
+		"gainTotal":        savingsTotal.Sub(investmentTotal),
+		"savingsTimeline":  accounting.RunningBalance(db, savings),
 		"target":           decimal.NewFromFloat(conf.Target),
 		"targetDate":       conf.TargetDate,
 		"rate":             conf.Rate,

src/app.scss

@@ -441,7 +441,13 @@ svg text {
 }
 
 .weekdays-grid {
-  border-radius: $radius-small;
+  div:first-child {
+    border-radius: $radius-small 0 0 $radius-small !important;
+  }
+
+  div:last-child {
+    border-radius: 0 $radius-small $radius-small 0 !important;
+  }
 
   div {
     padding: 2px 0;
@@ -525,10 +531,13 @@ nav.level.grid-2 {
 }
 
 .navbar {
-  background-color: $white-bis !important;
+  background-color: $white !important;
   color: rgba(0, 0, 0, 0.7);
-}
 
+  a.navbar-item {
+    background-color: $white !important;
+  }
+}
 .cm-editor {
   .cm-gutters {
     background-color: $white-ter;
@@ -1044,6 +1053,19 @@ textarea:invalid {
   border-color: $danger;
 }
 
+.dropdown-trigger.dropdown-icon {
+  button {
+    height: 2rem;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  button:hover {
+    color: $link;
+  }
+}
+
 .nested.has-dropdown {
   &:hover > .dropdown-menu {
     display: block;

src/lib/components/Actions.svelte

@@ -5,14 +5,10 @@
   import { obscure } from "../../persisted_store";
   import { goto } from "$app/navigation";
 
-  let isLoading = false;
-
   async function syncWithLoader(request: Record<string, any>) {
-    isLoading = true;
     try {
       await sync(request);
     } finally {
-      isLoading = false;
       refresh();
     }
   }
@@ -33,11 +29,11 @@
   let showLogout = isLoggedIn();
 </script>
 
-<div class="dropdown {isMobile() ? 'is-left' : 'is-right'}" class:is-hoverable={!isLoading}>
-  <div class="dropdown-trigger">
-    <button class:is-loading={isLoading} class="button is-small" aria-haspopup="true">
-      <span class="icon is-small">
-        <i class="fas fa-caret-down" />
+<div class="dropdown ml-2 is-hoverable {isMobile() ? 'is-left' : 'is-right'}">
+  <div class="dropdown-trigger dropdown-icon">
+    <button class="button is-large" aria-haspopup="true">
+      <span class="icon">
+        <i class="fas fa-ellipsis-vertical" />
       </span>
     </button>
   </div>

src/lib/components/CreditCardCard.svelte

@@ -59,7 +59,7 @@
         href="/liabilities/credit_cards/{encodeURIComponent(creditCard.account)}"
       >
         <span class="custom-icon">{iconText(creditCard.account)}</span>
-        <span class="ml-1">{restName(restName(creditCard.account))}</span>
+        <span>{restName(restName(creditCard.account))}</span>
       </a>
     </div>
   </div>

src/lib/components/GoalSummaryCard.svelte

@@ -63,7 +63,7 @@
       {small}
       narrow
       title="Target"
-      color={COLORS.secondary}
+      color={COLORS.primary}
       value={formatCurrency(goal.target)}
     />
   </nav>

src/lib/components/Navbar.svelte

@@ -310,7 +310,7 @@
   </div>
 </nav>
 
-<div class="mt-2 px-3 is-flex is-justify-content-space-between">
+<div class="mt-3 px-3 is-flex is-justify-content-space-between">
   {#if selectedLink}
     <nav
       style="margin-left: 0.73rem;"

src/lib/goals.ts

@@ -180,7 +180,7 @@ export function renderProgress(
   const lineScale = d3
     .scaleOrdinal<string>()
     .domain(lineKeys)
-    .range([COLORS.gainText, COLORS.secondary]);
+    .range([COLORS.secondary, COLORS.primary]);
 
   const x = d3.scaleTime().range([0, width]).domain([start, end]),
     y = d3
@@ -391,7 +391,7 @@ export function renderInvestmentTimeline(postings: Posting[], element: Element,
   if (pmt > 0) {
     g.append("line")
       .attr("fill", "none")
-      .attr("stroke", COLORS.secondary)
+      .attr("stroke", COLORS.primary)
       .attr("x1", 0)
       .attr("x2", width)
       .attr("y1", y(pmt))
@@ -406,7 +406,7 @@ export function renderInvestmentTimeline(postings: Posting[], element: Element,
       .attr("dy", "0.3em")
       .attr("x", width)
       .attr("y", y(pmt))
-      .attr("fill", COLORS.secondary)
+      .attr("fill", COLORS.primary)
       .text(formatCurrencyCrude(pmt));
   }
 
@@ -415,9 +415,9 @@ export function renderInvestmentTimeline(postings: Posting[], element: Element,
     .data(points)
     .enter()
     .append("rect")
-    .attr("stroke", (p) => (p.total <= 0 ? COLORS.lossText : COLORS.gainText))
-    .attr("fill", (p) => (p.total <= 0 ? COLORS.lossText : COLORS.gainText))
-    .attr("fill-opacity", 0.6)
+    .attr("stroke", (p) => (p.total <= 0 ? COLORS.tertiary : COLORS.secondary))
+    .attr("fill", (p) => (p.total <= 0 ? COLORS.tertiary : COLORS.secondary))
+    .attr("fill-opacity", 0.5)
     .attr("data-tippy-content", (p) => {
       const group = groupSumBy(p.postings, (p) => p.account);
       return tooltip(

src/lib/utils.ts

@@ -356,6 +356,8 @@ export interface AccountBudget {
 
 export interface RetirementGoalProgress {
   savingsTotal: number;
+  investmentTotal: number;
+  gainTotal: number;
   savingsTimeline: Point[];
   swr: number;
   yearlyExpense: number;
@@ -368,6 +370,8 @@ export interface RetirementGoalProgress {
 }
 
 export interface SavingsGoalProgress {
+  investmentTotal: number;
+  gainTotal: number;
   savingsTotal: number;
   savingsTimeline: Point[];
   target: number;

src/routes/(app)/+page.svelte

@@ -228,7 +228,7 @@
                 <strong>Oops!</strong> You have not made any transactions in the last 3 months.
               </ZeroState>
 
-              <LegendCard legends={cashflowLegends} clazz="mb-2 overflow-x-scroll" />
+              <LegendCard legends={cashflowLegends} clazz="mb-2 overflow-x-auto" />
 
               <svg
                 class:is-not-visible={_.isEmpty(cashFlows)}