[Feature] Show percentage on category and subcategory bars

[marcoinbig]

Hi,
I’ve forked the project and added a small feature: a percentage displayed over the category and subcategory bars.
Here are some screenshots:

[ulsklyc]

Nice one, and a PR is welcome. On the overview the bar length of a category is measured against the largest category, not against the total, so the share is information the page does not give today. I had a look at feat/budget-bars-with-percentage in your fork; the arithmetic is right (category against its block, subcategory against its category), and using getNumberFormat({ style: 'percent' }) with "<1 %" is better than what the app does elsewhere.

One thing I would change before it goes in: where the number sits. The Statistics tab already shows this share, as quiet text right after the amount (budget-bar-row__share in public/pages/budget-stats.js, styled in public/styles/budget.css). That form was a deliberate decision in an earlier design review, and with your branch the module would say the same thing in two ways. Text centred over the bar also has a contrast problem that the halo does not really solve: depending on the share it sits on the fill, on the track or across the edge, and the app's rule is that contrast is measured against the actual background in light and dark mode. Behind the amount that question does not come up, and the track can stay at its normal height.

So for the PR:

• Put the share after the amount with the existing budget-bar-row__share class, keep the track as it is.
• Move sharePercent() to one place that both budget.js and budget-stats.js use, so the Statistics tab gets your "<1 %" and the locale format too.
• Expenses only, like the Statistics tab. For income the share is rarely the question (one salary is most of it), and the two pages stay the same.
• CHANGELOG: your branch adds an empty line inside the already released ## [2.77.0] section, and npm run test:changelog fails on any change there. Keep only your entry under [Unreleased], and drop the sentence about the 20px track.
• Merge current main in (you are 3 commits behind), and adjust your tests to the new position. The existing check at test/test-budget-ui.js ("der Balken nennt seinen Anteil") shows the pattern.

No new translation keys are needed for this, which keeps it small. Thanks for building on your subcategory work from #1728.

[marcoinbig]

Thanks for the review and keep it up with your work. PR (#1968) just opened.

[ulsklyc]

Released in v2.77.2.