Render Each Category's Share of Spending

Open these files:

client/src/components/CategoryBreakdown.jsx
client/src/lib/finance.js

The category breakdown needs two pieces of information for every visible category:

1. How much was spent in that category.
2. What fraction of all expense spending that amount represents.

Start by adding every expense amount to its category total. Then add the category totals together to get totalExpenseCents.

const totalExpense = Object.values(totals)
  .reduce((sum, amount) => sum + amount, 0);

For each category, calculate its share like this:

pct: totalExpense > 0
  ? (totals[category.name] || 0) / totalExpense
  : 0

What the percentage means

Suppose the expense totals are:

Housing       $1,150.00
Food             $84.50
Utilities        $62.00
Transport        $46.00
Entertainment    $24.00

The total expense is $1,366.50. Housing therefore represents about 84% of all expenses:

1,150 / 1,366.50 ≈ 0.842

The component turns that decimal into a bar width by multiplying by 100:

style={{ width: `${category.pct * 100}%` }}

This is different from the old approach where the largest category was always 100%. In the new calculation, the percentage has a real meaning: share of total expenses.

The calculation should return the categories sorted by total spending so the largest expense appears first. The current starter uses amount because we have not introduced the integer-cent storage change yet; that conversion happens later without changing what this calculation means.

Test it

Open the Ledger with the sample data and look at spending by category.

Housing should be the longest bar, with a value close to 84%. The other bars should be much shorter because each represents its actual share of the total expense amount.

Add a new expense in a different category later and observe that both that category’s amount and its share change.

Checkpoint

Every displayed category bar represents its actual share of total expense spending, and the list is ordered from highest spending to lowest.