Revenue Breakdown Dashboard Block for Vue

Edit SOURCES. Each source has a name, a tone and three lines; each line holds this month's revenue, last month's and the same month a year ago. A source's amount is the sum of its lines, so the bar, the table, the shares and the points are all worked out from the lines and never typed twice.

A source's change divided by the previous period's total revenue, in percentage points of growth. They add up to the total growth, which is why they differ from each source's own change: a small source can grow fast and still add little. The tenths are rounded so the column sums to the total exactly. The note under the lines says which period they are measured against.

Each segment of the bar and each source name in the table is a real button with aria-pressed, so Tab reaches them and Enter or Space picks. The chosen source is underlined in the bar, tinted in the table, and a polite line says how many of the points it added.

Everything: the amounts are typed and nothing is read from a ledger. To make it real, group your revenue by source and by line for the two periods you compare and pass the same shape.

The bar stays full width, the table keeps the source, the amount and the points, and drops the share and change columns, and the lines of the picked source follow underneath.