Add category spending report #1382
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded
Removed
Bigger
Smaller
Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller
Unchanged
|
|
Cool idea! What do you think about changing this from a line graph to barcharts? And each bar segment would represent a category. Upon opening the report - all categories would show up, but then you get the option to remove some if you prefer that. This would also solve the homepage problem. We could just show a barchart of the current month there.
|
|
I think that's a good idea, though I'm not sure how to really represent this well in the UI. It would mean that Filter->Category is actually meaningful again and so we could use that filter, but the other filters are still meaningless for this chart, and having to click a drop-down with a single alternative feels weird. But maybe just re-using the category filter entry and making that a top-level button would work? Not sure what a good name for it would be then though. |
|
Maybe the filter options could filter the list of transactions that the report sees, and then a separate UI could make it easy to see category totals (or something??) and quickly toggle on/off different categories or focus on just one at a time? |
|
If we change this to actually look at arbitrary subsets of transactions then this isn't really a category spending report anymore, just an arbitrary spent-per-month (but also not even that if you do date filtering) that happens to show it grouped by category. I feel like it would make it conceptually a very strange report unless it was made even more general and you could select other things to group by, which... would be significantly more complex and something I'm not up for implementing. I rather liked being able to simplify the logic into just being able to look at the actual budget values. 😅 |
|
That makes sense! I don’t feel super strongly about filtering, so it would be fine to avoid it for now and see if it’s something that’s frequently requested. |
Rendering negative spent columns, which is what we'd normally expect for most categories, would be easy enough for a bar chart in that we just have to flip the sign and then render them as bar charts. But how do we handle categories with positive spent amounts? It feels like it'd look very confusing to have some categories positive and some negative for the same month in a bar chart version of this. |
|
Hey, I'd love a bar chart colored by expenses. Regarding categories with positive amounts: If a category turns positive, we could show it as a negative value in the axis. I made a crude example of how it could look like: |
|
I think that looks super confusing personally. 😅 @MatissJanis @j-f1 Do you want me to implement it like that? While I'm not a fan of that positive spent behavior, I'd be fine with implementing it if it's what you want. |
|
Maybe I'm missing something, but how can an expense (or spent amount if we call it that way) be a positive number? For inspiration: here's what YNAB does: |
Well, it's not just expenses, it's the actual category "spent" column. Simple case is when you get a refund the month after the purchase. Or someone sends you money for a specific purpose and you inflow it directly into the category rather than having it misleadingly categorized as income. |
|
Ok, I see. That makes sense. I'm ok with either making it zero-based (meaning inflow in a category shows up as "0" spend) or to implement @ovbm suggestion. Either way I find this to likely be a edge case that the majority of users won't experience in their usual workflows. |
|
I don't remember how YNAB handles it, but to prevent the above case of an "expense" category being positive - which can happen if e.g. you get a refund on clothing items - one could filter all positive transactions (refunds, advances, etc.) and label the chart as "Spending per Category and Month". This would eliminate the need to display the axis in my example. With the caveat that it doesn't reflect true expenses of those categories in aggregate. In my opinion, showing expense categories with positive monthly cashflows in the opposite axis is more useful for the user, because they can more easily see if spending spikes in one months (e.g. buying lots of clothes) in a category are followed by a correction (e.g. returning some of them) in the next. Edit: sry this took a while to write, feel free to ignore if you've already made a decision. Think it's great that we're getting an expense chart regardless of implementation - thanks a lot! |
|
Slowly getting there, though I'm still rather unsure how to rig up a decent UI for selecting which categories to show. YNAB's version has the advantage of for starters first showing only category groups and then letting you click on the group to then show categories in that group, but that's too advanced for my first implementation of this. The two things I can think of is either:
I also have a feeling that the compact view of all categories would break down for pretty much any use of Actual, but we might be able to just select the first X categories for that one. |
|
Thanks for working on this, in my view is one of the most important things actual is missing. For positive values a good idea could be to implement a toggle that excludes them.
I think option 2 is better. |
|
If anyone who's interested in seeing this finished is better at UI stuff than I then I'd really appreciate some help with two things:
|
|
I can give it a shot in the next couple of days.
|
|
Did some crude test with the category selection. The current CategorySelector can only handle one category, which is not sufficient for this use case. So I built a custom one - currently just as a list of categories. Could be extended to work within a selector. test.UI.actual.movLet me know if that's something you'd want to build upon, then I can clean up my code a bit. Would be nice if users could assign colors to categories. |
|
I feel like always showing the list of categories would take up too much of the available screen width, especially if you don't have the menu collapsed. But other than that I think it's a good start! |
|
Yeah it's not optimal. Just saw that the Autocomplete component supports Multiselect. Will investigate that. |
|
The multiselect is what you get if you go to Filter -> Category -> "one of". It wouldn't be a good UI for this since they for one wouldn't be separated by category group, and would be a rather busy UI if we enable all by default. |
|
I really like what you have there @ovbm! Maybe with a button to show/hide that column so that people can get the full width if needed? But your example chart doesn’t particularly feel horizontal space constrained. |
|
@ovbm's changes have been added now and it's looking pretty great! One thing though, while I like having more colors available I don't really feel like the ones we switched to now fit in with the other colors in the Actual UI. I looked up the built-in color scales and the
|
|
No preferences on my side, I was just playing around and left some palettes in I experimented with. One thought regarding averages: While using it I didn't understand what the averages were useful for. Showing rolling averages as monthly bars doesn't really make sense in my mind because the bar chart is meant to show specific spending latterns per month. And averages blur those patterns. If the averages stay in I'd suggest showing them as line or area charts. |
I think that's funny, because the rolling averages is the only thing I was interested in and the no-average option was a late addition, and this was a line chart until I was asked to change it to a bar chart. :p |
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
kyrias
force-pushed
the
category-average
branch
from
ed3eafc
to
fd12490
Compare
trafico-bot
bot
added
🔍 Ready for Review
and removed
⚠️ Changes requested
I think that make sense, though I'm not really sure what would be a reasonable calculation for this. If you have a suggestion I can plug it in. (It'll just involve changing the 5 here.)
The |
width > 760 ? 12 : 5 ... This felt appropriate, though it's a bit subjective so a little more or less would be ok I think. |
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
Signed-off-by: Johannes Löthberg <[email protected]>
kyrias
force-pushed
the
category-average
branch
from
dcad2fa
to
d5f44d0
Compare
Signed-off-by: Johannes Löthberg <[email protected]>
kyrias
force-pushed
the
category-average
branch
from
d5f44d0
to
dfb148a
Compare
trafico-bot
bot
added
✨ Merged
This PR adds a report for showing the budget category spending over time, including the ability to select between no averaging and averaging by 3, 6, or 12 months, or since the first transaction in the category.
Testing appreciated!
TODO