[Feature Request?] Networth Ui Improvements

[geeosp]

Hello everyone,

I feel that Net Worth Report page is a little off.

I found the Evolution graph from the Net Worth page to be very misleading.
The way that Liabilities is placed in the graph bars is confusing. It is open to interpretation. My understanding is that it is implying either that the Liabilities are a value that contributes positively to the Net Worth, or it is a negative value being subtracted from the assets amount.
The first sounds very wrong, and the second just raised the question whether or not the assets part was being displayed correctly., because why would the liabilities only be subtracted from the assets, and not from the accounts too?

The same concept apply to the Composition pie chart.
Here the Liabilities clearly sums up to the 100% of the graph. What it communicates is that accounts+assets+liabilities = networth.

In addition to that, there is a missing information that I cannot find anywhere in Securo right now. This very simple question: "How much money did I earned, or lost, this month?"
The Net Worth page seems to be the place to show this info, and there is the graph that shows the snapshot, but we still have to do some math to get the difference between periods. All the other places are only considering accounts, or assets, or liabilities, but never all of them together, never the full picture.

[geeosp]

So, this is what I am thinking about what we can do to this page:

1. Networth - Over time graph:
   Add a waterfall chart overlay to the Networth over time that clearly states your net worth against the last period date. Want to know how much your net worth increased or decresed? Just mouse hover the bar.

2. Composition pie charts:
   I Separated the Liabilities from the same pie chart from Accounts and Assets, creating a second one. One represent values that add up to the net worth, other represent the ones that subtracts from it.

3. Evolution bar charts:
   Updated bars to grow to the negative values to the negative vertical axis of chart. This way it is clear that they contributes by subtracting from the total ammount.
   Then add the Networth graph overlay to reinforce the idea.

4. The Composition + pie charts.
   The composition + the pie chart were looking like they were related, but interacting with one did not affected the other. The "detailed / summary" toggle just affect one of them, while one showed the current composition, while the other showed the history.
   So I made the toggle to affect both of them.
   In detail mode, every asset/account/liability is now sorted by value inside its respective group, so its easy to understand which asset/account contributes the most for the final result.
   I updated the colors so its easy to identify what asset/account/liability belong in which group.

Also,  added a new interaction, by clicking in a bar on the evolution graph, the composition bar update to show info about the current bar selected. By clicking again, it deselect the bar and fallback for the default state, which is to show the composition of the today's net worth. By not interacting with the graph, it haves the same behavior as before. 

Screencast.From.2026-05-21.19-18-41.mp4

[geeosp]

Hi Everyone, I polished my earlier suggestions, I believe I was able to increase both usability and readability of the changes I was proposing, while still being very close to the current design.

So I will break down them one by one

1. Networth chart: I didnt changed much, maintained the waterfall chart in addition to our line chart. It shows the increase(green) or decrease(red) in that specific snapshot of time.
   What is new is that created a toggle to show or hide the variation bars. They tend to merge with the line graph when a bigger date density is selected and became redundant or hard to identify. For instance, when you set it to day-to-day in a 2 year period. So to solve this I set the to be off by default, matching the current behavior. It is now an Opt-in feature.

20260530-0115-33.6498028.mp4

2. Evolution Chart: I maintained the separation between Assets, Accounts and Liabilities, but stop splitting them down. Passed negative values such as liabilities to grow to the negative vertical axis of the chart. Also, replicated the netwworth line graph on top of the bars as a traced line. Both changes are a tentative to make extremely clear that liabilities influences negatively to the total networth.
   When testing this feature, I discovered a bug in our current implementation. In this report graph, accounts with negative balance are being totally ignored. I believe this behavior is wrong and they should be included in the networth reports. In Brazil, banks can allow account users to transfer or withdraw values bigger than the current account balance. This system is called "Cheque Especial", which is just like a small credit limit to debit and checking accounts. For instance, if i have R$10 in my checking account, some banks allow me to withdraw or transfer R$50, resulting in a balance of -R$40.
   My solution was to move those accounts to liabilities. They grow to the negative axis while also started to show up in the liabilities pie chart

20260530-0117-33.0242109.mp4

3. On the composition pie chart, I killed the separation between the summary and detailed states, while rolled back my first suggestion of separated pie charts at the same time.
   Summary and Detailed modes are now clearly represented in the same pie, without the need to shift between then. The pies always shows the detailed view while the summary is represented by a small width inner ring.
   Changed which colors to use. Before I had suggested to use a gradient based on asset amount inside the ring, which may lead to readability issues if you have many assets. I rollback to the current securo implementation, where we show wallets instead of individual assets. The pie shows every account and asset wallet you own, but any one that represent less than 2 % of the total is being grouped as "others".
   I now that each wallet have its own color that can be defined by the user in the assets page, but I choose to not use them since accounts didn't had one. Instead I created a palette that still represented if an entity was a asset wallet or a bank account, while still clearly differentiate between neighbors in the pie.
   The breakdown asset/asset is still there, but as info in the tooltip panel. If you over with the mouse any Wallet section, it will show the most representative assets in that wallet.
   We still have 2 pie charts, but only one is shown at a time. The toggle now differs between assets that contributes positively, to assets that contribute negatively to networth.
   The toggle originally started as "Assets & Accounts" vs "Liabilities"

• But now accounts could appear in Liabilities, when they had negative balance, then it would be "Assets & Accounts" vs "Liabiliites and Accounts"
• Both names have a lot of characters, felt too big to put in a toggle,
  I solved both problems called them by using the terms "You Own" and "You owe".
  They pass clearly the intent I was going for, but I keep asking myself if are there better financial terms that we could use. This is the better I could come up with, but I would love to know if anyone have other suggestions.

20260530-0119-11.4410590.mp4

4. I united both evolution chart and composition into one widget, creating a clear relationship between them. By selecting a bar in the evolution chart, the composition pie updates to show the data of that snapshot in time.

20260530-0128-16.7529620.mp4

This is the whole page experience:
https://github.com/user-attachments/assets/a729191d-e40d-4ef5-8d83-e5b37c51ad0c

@tassionoronha , I would love to have 1 and 2 as features in securo, I see them as low-risk/high-value additions to the networth page.
3 I am uncertain about the financial terms for You Own and You Owe
4 I know that clicking a bar is a new interaction in the chart that are not present anywhere else in securo, so I wonder if the the users would know this feature exists.

I have all this implemented in a branch (https://github.com/geeosp/securo/tree/networth-ui-improvements), but I messed with it too much, I wouldn't advise to merge them as is.
I would prefer to implement those features one by one in their own PRs if we agree to go forward.