[Bug] Spacing issues on Expenses screen
sohamshanbhag opened this issue · 9 comments
Describe your Environment
OS: Ubuntu
Paisa Version: 0.5.4
App Variant: Desktop or CLI
Describe the bug
Expenses > Monthly view > d3-monthly-expense-timeline has overlapping names and doesn't show all expenses when number of expense categories > 10
To Reproduce
Steps to reproduce the behavior:
- Create a main.ledger file as in Journal
- Go to Expenses > Monthly
- Check Monthly Expenses
Expected behavior
All expenses included, and some kind of wrapping for the container.
Screenshots
Journal
2023/10/01 Init
Assets:Checking 1000 INR
Equity:Opening
2023/10/05 Buy
Expenses:Abcdefghi asfdsadfsa safdsadfsafas 1 INR
Expenses:B ffasdfsafda 1 INR
Expenses:C 1 INR
Expenses:D 1 INR
Expenses:E 1 INR
Expenses:F 1 INR
Expenses:G 1 INR
Expenses:H 1 INR
Expenses:I 1 INR
Expenses:J 1 INR
Expenses:K 1 INR
Expenses:L 1 INR
Expenses:M 1 INR
Assets:Checking
I am currently doing the legend in SVG, it's easy to render the rectangle, etc, but the layout is really hard to do. I am planning to move the legend outside the SVG and it should help with this issue. Applying truncation etc would be easier once moved outside of SVG.
I'm not a developer so this code may be horrible, but I hacked together a quick page which shows what I mean using some basic html and css.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: baseline;
align-content: space-around;
gap: 10px;
}
.child {
width: 15%;
min-height: 100px;
text-align: center;
overflow-wrap: break-word;
padding: 10px;
}
.icon {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> Abcdefghi asfdsadfsa safdsadfsafas </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> B ffasdfsafda </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> C </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> D </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> E </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> F </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> G </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> H </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> I </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> J </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> K </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> L </div>
<div class="child"><span class="fa-solid fa-wallet icon"></span><br> M </div>
</div>
</body>
</html>
This looks like this(I added the borders for the screenshot):
Feel free to use this code if it helps you.
Edit: This should resize on number of Expenses change and handle word wrapping.
Don't worry about the implementation, just feedback from user's perspective is good enough.
Some minor notes:
- This issue is present on Assets > investment screen and Expenses > Yearly too.
- Probably just wrapping the labels with a horizontal scroll bar would work for usability purposes (clicking the expense for filtering)
The first iteration of the fix is now available on master. Earlier it would use a fixed width for all legends, now I have switched to variable width based on the label size. I haven't tested with extreme cases yet, but it should at least improve your current situation.
@sohamshanbhag could you check this on the latest release (0.6.3)
Seems like that issue has been solved, but now if the number of categories is high the list goes out of the page. A nonsensical example of the same is as follows:
I've created the example to show that this happens, since it happens with my actual ledger.
Ledger file:
2023/10/01 Init
Assets:Checking 1000 INR
Equity:Opening
2023/10/05 Buy
Expenses:Abcdefghi asfdsadfsa safdsadfsafas 1 INR
Expenses:B ffasdfsafda 1 INR
Expenses:C fasfasfasfasf 1 INR
Expenses:D fasfasfasfasf 1 INR
Expenses:E fasfasfasfasf 1 INR
Expenses:Ffsafasfasdasfasf 1 INR
Expenses:Gfsafasfasdasfasf 1 INR
Expenses:Hfsafasfasdasfasf 1 INR
Expenses:Ifsafasfasdasfasf 1 INR
Expenses:J 1 INR
Expenses:K 1 INR
Expenses:L 1 INR
Expenses:M 1 INR
Assets:Checking
The legend will break at some point, then the question is how common these issues are. I can think of a few fixes, but they will likely come with their tradeoffs (scrolling, truncation, etc).
The current recommendation is to keep <= 12 accounts at each level and add more accounts next level if you want more granularity. I will improve support for sub-accounts soon, so you will be able to expand and focus on one account and it's sub accounts.
I think scrolling would be my suggested solution, especially due to the fact that the labels are used for filtering the expenses in the plot. Restricting to 12 accounts has a problem that one cannot filter based on the expense in a sub-heading.
Also, I've transitioned to beancount and fava due to familiarity with python, so I don't actively use paisa now. Since the issue mentioned in this bug report is solved, feel free to close this issue.
Edit: Disregard this comment. I missed your point about sub-accounts in the previous message. I'll keep this issue open so that you can track the open bugs in paisa.