search

ananthakumaran / paisa

Paisa – Personal Finance Manager. https://paisa.fyi demo: https://demo.paisa.fyi
https://paisa.fyi
GNU Affero General Public License v3.0
2.34k stars 117 forks source link

[Bug] Spacing issues on Expenses screen #76

Open sohamshanbhag opened 10 months ago

sohamshanbhag commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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

sohamshanbhag commented 10 months ago

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 commented 7 months ago

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 commented 7 months ago

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

sohamshanbhag commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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.