Goal Exceeded Success Block for React

Nothing was saved. The amounts are typed in GOALS in cents, and Set the next target only changes the live line to say it was set in this demo. To wire it, build GOALS from your own targets and bookings, save the chosen raise from the button's handler, and rename the quarter and dates.

From the amounts. The whole quarter is the sum of the three sub-goals, each percentage is rounded from its own two amounts, and each difference is the booked amount minus the target, signed, so the heading, the chart and the rows always agree. The next target is the old one plus the chosen percent, rounded to a thousand dollars.

The bars are drawings hidden from assistive technology; every figure is also written as text ("$540,000 of $500,000", "112% of $250,000", "+$30,000 over"). The tick sits at 100% on a scale that runs to 120%, so a result past the target has room to show.

Nothing visible: the burst is hidden for a visitor who asked for less motion, and the button still works. Otherwise it throws a short burst from where it was pressed, in the theme's own tones, once per press. It never loops.

Yes. The three raise buttons are one group with the arrow keys moving between them, and choosing one never moves focus. The two actions are ordinary buttons.