-
Notifications
You must be signed in to change notification settings - Fork 127
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[asset] add support for sorting table
- Loading branch information
1 parent
26fb761
commit de0ba74
Showing
11 changed files
with
345 additions
and
127 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,65 @@ | ||
| <script lang="ts"> | ||
| import { iconText } from "$lib/icon"; | ||
| import { | ||
| type AssetBreakdown, | ||
| depth, | ||
| lastName, | ||
| isZero, | ||
| formatCurrency, | ||
| formatFloat, | ||
| formatPercentage | ||
| } from "$lib/utils"; | ||
| import { type AssetBreakdown, buildTree } from "$lib/utils"; | ||
| import _ from "lodash"; | ||
| import Table from "./Table.svelte"; | ||
| import type { ColumnDefinition } from "tabulator-tables"; | ||
| import { | ||
| accountName, | ||
| formatCurrencyChange, | ||
| indendedAssetAccountName, | ||
| nonZeroCurrency, | ||
| nonZeroFloatChange, | ||
| nonZeroPercentageChange | ||
| } from "$lib/table_formatters"; | ||
| export let breakdowns: Record<string, AssetBreakdown>; | ||
| export let indent = true; | ||
| function calculateChangeClass(gain: number) { | ||
| let changeClass = ""; | ||
| if (gain > 0) { | ||
| changeClass = "has-text-success"; | ||
| } else if (gain < 0) { | ||
| changeClass = "has-text-danger"; | ||
| const columns: ColumnDefinition[] = [ | ||
| { | ||
| title: "Account", | ||
| field: "group", | ||
| formatter: indent ? indendedAssetAccountName : accountName, | ||
| frozen: true | ||
| }, | ||
| { | ||
| title: "Investment Amount", | ||
| field: "investmentAmount", | ||
| hozAlign: "right", | ||
| vertAlign: "middle", | ||
| formatter: nonZeroCurrency | ||
| }, | ||
| { | ||
| title: "Withdrawal Amount", | ||
| field: "withdrawalAmount", | ||
| hozAlign: "right", | ||
| formatter: nonZeroCurrency | ||
| }, | ||
| { | ||
| title: "Balance Units", | ||
| field: "balanceUnits", | ||
| hozAlign: "right", | ||
| formatter: nonZeroCurrency | ||
| }, | ||
| { title: "Market Value", field: "marketAmount", hozAlign: "right", formatter: nonZeroCurrency }, | ||
| { title: "Change", field: "gainAmount", hozAlign: "right", formatter: formatCurrencyChange }, | ||
| { title: "XIRR", field: "xirr", hozAlign: "right", formatter: nonZeroFloatChange }, | ||
| { | ||
| title: "Absolute Return", | ||
| field: "absoluteReturn", | ||
| hozAlign: "right", | ||
| formatter: nonZeroPercentageChange | ||
| } | ||
| return changeClass; | ||
| ]; | ||
| let tree: AssetBreakdown[] = []; | ||
| $: if (breakdowns) { | ||
| tree = buildTree(Object.values(breakdowns), (i) => i.group); | ||
| } | ||
| </script> | ||
|
|
||
| <div class="box overflow-x-auto max-h-screen max-w-fit pt-0"> | ||
| <table class="table is-narrow is-hoverable is-light-border has-sticky-header"> | ||
| <thead> | ||
| <tr> | ||
| <th class="py-2">Account</th> | ||
| <th class="py-2 has-text-right">Investment Amount</th> | ||
| <th class="py-2 has-text-right">Withdrawal Amount</th> | ||
| <th class="py-2 has-text-right">Balance Units</th> | ||
| <th class="py-2 has-text-right">Market Value</th> | ||
| <th class="py-2 has-text-right">Change</th> | ||
| <th class="py-2 has-text-right">XIRR</th> | ||
| <th class="py-2 has-text-right">Absolute Return</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="has-text-grey-dark"> | ||
| {#each Object.values(breakdowns) as b} | ||
| {@const indentWidth = indent ? _.repeat("  ", depth(b.group) - 1) : ""} | ||
| {@const gain = b.gainAmount} | ||
| {@const changeClass = calculateChangeClass(gain)} | ||
| <tr> | ||
| <td | ||
| class="whitespace-nowrap has-text-left" | ||
| style="max-width: max(15rem, 33.33vw); overflow: hidden;" | ||
| >{@html indentWidth}<span class="has-text-grey custom-icon">{iconText(b.group)}</span> | ||
| <a href="/assets/gain/{b.group}">{indent ? lastName(b.group) : b.group}</a></td | ||
| > | ||
| <td class="has-text-right" | ||
| >{!isZero(b.investmentAmount) ? formatCurrency(b.investmentAmount) : ""}</td | ||
| > | ||
| <td class="has-text-right" | ||
| >{!isZero(b.withdrawalAmount) ? formatCurrency(b.withdrawalAmount) : ""}</td | ||
| > | ||
| <td class="has-text-right">{b.balanceUnits > 0 ? formatFloat(b.balanceUnits, 4) : ""}</td> | ||
| <td class="has-text-right" | ||
| >{!isZero(b.marketAmount) ? formatCurrency(b.marketAmount) : ""}</td | ||
| > | ||
| <td class="{changeClass} has-text-right" | ||
| >{!isZero(b.investmentAmount) && !isZero(gain) ? formatCurrency(gain) : ""}</td | ||
| > | ||
| <td class="{changeClass} has-text-right">{!isZero(b.xirr) ? formatFloat(b.xirr) : ""}</td> | ||
| <td class="{changeClass} has-text-right" | ||
| >{!isZero(b.absoluteReturn) ? formatPercentage(b.absoluteReturn, 2) : ""}</td | ||
| > | ||
| </tr> | ||
| {/each} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| {#if indent} | ||
| <Table data={tree} tree {columns} /> | ||
| {:else} | ||
| <Table data={Object.values(breakdowns)} {columns} /> | ||
| {/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <script lang="ts"> | ||
| import { rem } from "$lib/utils"; | ||
| import { onMount } from "svelte"; | ||
| import { TabulatorFull as Tabulator, type ColumnDefinition } from "tabulator-tables"; | ||
| export let data: any[]; | ||
| export let columns: ColumnDefinition[]; | ||
| export let tree = false; | ||
| let tableComponent: HTMLElement; | ||
| let tabulator: Tabulator; | ||
| $: if (data.length > 0) { | ||
| build(); | ||
| } | ||
| async function build() { | ||
| if (data.length === 0) { | ||
| return; | ||
| } | ||
| if (tabulator) { | ||
| tabulator.replaceData(data); | ||
| } else { | ||
| tabulator = new Tabulator(tableComponent, { | ||
| dataTree: tree, | ||
| dataTreeStartExpanded: [true, true, false], | ||
| dataTreeBranchElement: false, | ||
| dataTreeChildIndent: rem(30), | ||
| dataTreeCollapseElement: | ||
| "<span class='has-text-link icon is-small mr-3'><i class='fas fa-angle-up'></i></span>", | ||
| dataTreeExpandElement: | ||
| "<span class='has-text-link icon is-small mr-3'><i class='fas fa-angle-down'></i></span>", | ||
| data: data, | ||
| columns: columns, | ||
| maxHeight: "100vh", | ||
| layout: "fitDataTable" | ||
| }); | ||
| } | ||
| } | ||
| onMount(async () => { | ||
| build(); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="overflow-x-auto box py-0" style="max-width: 100%;" bind:this={tableComponent}></div> |
Oops, something went wrong.