Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Spacing issues on Expenses screen #76

Open
sohamshanbhag opened this issue Oct 8, 2023 · 9 comments
Open

[Bug] Spacing issues on Expenses screen #76

sohamshanbhag opened this issue Oct 8, 2023 · 9 comments

Comments

@sohamshanbhag
Copy link

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:

  1. Create a main.ledger file as in Journal
  2. Go to Expenses > Monthly
  3. Check Monthly Expenses

Expected behavior
All expenses included, and some kind of wrapping for the container.

Screenshots

2023-10-08_21-38-21_screenshot

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
@ananthakumaran
Copy link
Owner

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.

@sohamshanbhag
Copy link
Author

sohamshanbhag commented Oct 8, 2023 •
edited

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):
2023-10-09_00-33-57_screenshot

Feel free to use this code if it helps you.

Edit: This should resize on number of Expenses change and handle word wrapping.

@ananthakumaran
Copy link
Owner

Don't worry about the implementation, just feedback from user's perspective is good enough.

@sohamshanbhag
Copy link
Author

Some minor notes:

  1. This issue is present on Assets > investment screen and Expenses > Yearly too.
  2. Probably just wrapping the labels with a horizontal scroll bar would work for usability purposes (clicking the expense for filtering)

@ananthakumaran
Copy link
Owner

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.

image

@ananthakumaran
Copy link
Owner

@sohamshanbhag could you check this on the latest release (0.6.3)

@sohamshanbhag
Copy link
Author

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:
2024-01-15_00-01-12_screenshot

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

@ananthakumaran
Copy link
Owner

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.

@sohamshanbhag
Copy link
Author

sohamshanbhag commented Jan 17, 2024 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ananthakumaran @sohamshanbhag