[allocation] add tabulated values

internal/server/allocation.go

@@ -20,7 +20,6 @@ import (
 type Aggregate struct {
 	Date         time.Time       `json:"date"`
 	Account      string          `json:"account"`
-	Amount       decimal.Decimal `json:"amount"`
 	MarketAmount decimal.Decimal `json:"market_amount"`
 }
 
@@ -88,11 +87,9 @@ func computeAggregateTimeline(db *gorm.DB, postings []posting.Posting) []map[str
 		result := make(map[string]Aggregate)
 
 		for account, rsByAccount := range accumulator {
-			amount := decimal.Zero
 			marketAmount := decimal.Zero
 
 			for commodity, rs := range rsByAccount {
-				amount = amount.Add(rs.cost)
 				if utils.IsCurrency(commodity) {
 					marketAmount = marketAmount.Add(rs.cost)
 				} else {
@@ -105,7 +102,7 @@ func computeAggregateTimeline(db *gorm.DB, postings []posting.Posting) []map[str
 				}
 			}
 
-			result[account] = Aggregate{Date: start, Account: account, Amount: amount, MarketAmount: marketAmount}
+			result[account] = Aggregate{Date: start, Account: account, MarketAmount: marketAmount}
 
 		}
 
@@ -151,9 +148,8 @@ func computeAggregate(db *gorm.DB, postings []posting.Posting, date time.Time) m
 			result[parent] = Aggregate{Account: parent}
 		}
 
-		amount := accounting.CostSum(ps)
 		marketAmount := accounting.CurrentBalanceOn(db, ps, date)
-		result[account] = Aggregate{Date: date, Account: account, Amount: amount, MarketAmount: marketAmount}
+		result[account] = Aggregate{Date: date, Account: account, MarketAmount: marketAmount}
 
 	}
 	return result

src/lib/allocation.ts

@@ -280,7 +280,7 @@ function renderPartition(
     .attr("data-tippy-content", (d) => {
       return tooltip([
         ["Account", [d.id, "has-text-right"]],
-        ["MarketAmount", [formatCurrency(d.value), "has-text-weight-bold has-text-right"]],
+        ["Market Value", [formatCurrency(d.value), "has-text-weight-bold has-text-right"]],
         ["Percentage", [percent(d), "has-text-weight-bold has-text-right"]]
       ]);
     })
@@ -309,13 +309,12 @@ export function renderAllocationTimeline(
   const timeline = _.map(aggregatesTimeline, (aggregates) => {
     return _.chain(aggregates)
       .values()
-      .filter((a) => a.amount != 0)
+      .filter((a) => a.market_amount != 0)
       .groupBy((a) => secondName(a.account))
       .map((aggregates, group) => {
         return {
           date: aggregates[0].date,
           account: group,
-          amount: _.sum(_.map(aggregates, (a) => a.amount)),
           market_amount: _.sum(_.map(aggregates, (a) => a.market_amount)),
           timestamp: aggregates[0].date
         };

src/lib/utils.ts

@@ -183,8 +183,10 @@ export interface LiabilityBreakdown {
 export interface Aggregate {
   date: dayjs.Dayjs;
   account: string;
-  amount: number;
   market_amount: number;
+
+  // computed
+  percent: number;
 }
 
 export interface CommodityBreakdown {

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

@@ -4,16 +4,49 @@
     renderAllocationTarget,
     renderAllocationTimeline
   } from "$lib/allocation";
-  import { generateColorScheme } from "$lib/colors";
+  import COLORS, { generateColorScheme } from "$lib/colors";
   import BoxLabel from "$lib/components/BoxLabel.svelte";
   import LegendCard from "$lib/components/LegendCard.svelte";
-  import { ajax, type Legend } from "$lib/utils";
+  import Table from "$lib/components/Table.svelte";
+  import { accountName, nonZeroCurrency } from "$lib/table_formatters";
+  import { ajax, formatPercentage, rem, type Aggregate, type Legend } from "$lib/utils";
   import _ from "lodash";
   import { onMount, tick } from "svelte";
+  import type { ColumnDefinition, ProgressBarParams } from "tabulator-tables";
 
   let showAllocation = false;
   let depth = 2;
   let allocationTimelineLegends: Legend[] = [];
+  let aggregateLeafNodes: Aggregate[] = [];
+  let total = 0;
+
+  const columns: ColumnDefinition[] = [
+    { title: "Account", field: "account", formatter: accountName },
+    {
+      title: "Market Value",
+      field: "market_amount",
+      hozAlign: "right",
+      formatter: nonZeroCurrency
+    },
+    {
+      title: "Percent",
+      field: "percent",
+      hozAlign: "right",
+      formatter: (cell) => formatPercentage(cell.getValue() / 100, 2)
+    },
+    {
+      title: "%",
+      field: "percent",
+      hozAlign: "right",
+      formatter: "progress",
+      cssClass: "has-text-left",
+      minWidth: rem(250),
+      formatterParams: {
+        color: COLORS.assets,
+        min: 0
+      }
+    }
+  ];
 
   onMount(async () => {
     const {
@@ -22,6 +55,14 @@
       allocation_targets: allocationTargets
     } = await ajax("/api/allocation");
     const accounts = _.keys(aggregates);
+    aggregateLeafNodes = _.filter(_.values(aggregates), (a) => a.market_amount > 0);
+    total = _.sumBy(aggregateLeafNodes, (a) => a.market_amount);
+    aggregateLeafNodes = _.map(aggregateLeafNodes, (a) => {
+      a.percent = (a.market_amount / total) * 100;
+      return a;
+    });
+    const max = _.max(_.map(aggregateLeafNodes, (a) => a.percent)) || 100;
+    (_.last(columns).formatterParams as ProgressBarParams).max = max;
     const color = generateColorScheme(accounts);
     depth = _.max(_.map(accounts, (account) => account.split(":").length));
 
@@ -82,3 +123,13 @@
     <BoxLabel text="Allocation Timeline" />
   </div>
 </section>
+<section class="section tab-allocation">
+  <div class="container is-fluid">
+    <div class="columns">
+      <div class="column is-12">
+        <Table data={aggregateLeafNodes} tree {columns} />
+      </div>
+    </div>
+    <BoxLabel text="Allocation Table" />
+  </div>
+</section>