Fix: ensure campaign goal progress percentage is an integer and does not exceed 100

[jonwaldstein]

Resolves GIVE-2174

Description

This updates the goal progress percentage calculation so we can goal progress is an integer and does not exceed 100.

Affects

The goal progress widget

Visuals

Testing Instructions

Zip: https://github.com/impress-org/givewp/actions/runs/13374370469

• Create a campaign with a small goal of amount
• Make several donations with varying float amounts
• Make sure the goal progress percentage is a whole number and does not exceed 100

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

Honest question: Why can’t the progress percentage exceed 100%? IMHO, it would be nice to see that my campaign was a success and reached 200% of my original goal.

[jonwaldstein]

@pauloiankoski that's a great question and something I contemplated myself.

My thought process was that this is a high level goal progress widget that visually shows the percentage of your goal progress in relative terms to the UI (circle progress bar). Since that UI for the progress goes up to 100% (a single circle) I feel that we should only be presenting that max percentage amount. In other terms, the percentage we display is a label for the visual progress bar. This is consistent with our other goal progress bars in GiveWP.

However, if the UI had a way to show progress past 100% (like extra circle rings or something), then I would agree it would be valuable to display that extra progress.

There is also going to be a more full fledged reporting tab in the future that should be able to display more in-depth details about the fundraising stats.

cc: @jdghinson

[pauloiankoski]

👍🏻

[jdghinson]

@jonwaldstein Actually I did a design for this scenario, we just didn't surface it in our scope conversations.

Cc: @pauloiankoski

[jonwaldstein]

@jdghinson ah good to know! that's pretty consistent with my reasoning to have some kind of way to show progress past 100. However, I would still raise the question if a circle bar is even appropriate for showing values over 100 as the UI is always going to show a max of a 100 due to the nature of a circle.

[jdghinson]

@jonwaldstein There's no UI that will well represent over 100% unless the max is infinite, which doesn't match our use case because there will always be a target goal. That's why in the design, you have the actual goal progress being represented with the percentage and number, and also a supporting text, that makes it clear that you've exceeded your target goal.

[jonwaldstein]

@jdghinson Thanks for your insight. I do believe there are other forms of UI that could show progress past 100%, for example: a bar graph. However, I understand the nuance and think this is a great UX discussion to have offline from here 😄.

[rickalday]

Passed manual QA tests.