Skip to content

Conversation

@andrewhumble
Copy link

@andrewhumble andrewhumble commented Nov 4, 2025

Fixes #1716

Add Sankey diagram report with three view modes (budgeted, spent, difference) to visualize money flow through categories.

Budgeted — Shows how income flows into your budget and is allocated across categories.

Screenshot 2025-11-04 at 10 34 34 AM

 
Spent — Displays actual spending by category from transactions.

Screenshot 2025-11-04 at 10 35 44 AM

 
Difference — Highlights budget vs. actual variance, showing overspent categories in red and unspent amounts. For a successfully zero-based budget, this should have no outgoing budget streams by the end of the month (i.e., $budgeted - spent = 0$ for each category).

Screenshot 2025-11-04 at 10 36 01 AM

@netlify
Copy link

netlify bot commented Nov 4, 2025

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 8168528
🔍 Latest deploy log https://app.netlify.com/projects/actualbudget/deploys/690a27a2ee98100008389d05
😎 Deploy Preview https://deploy-preview-6068.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
25 13.66 MB → 13.74 MB (+86.34 kB) +0.62%
Changeset
File Δ Size
node_modules/recharts/es6/chart/Sankey.js 🆕 +23.32 kB 0 B → 23.32 kB
src/components/reports/reports/Sankey.tsx 🆕 +15.06 kB 0 B → 15.06 kB
src/components/reports/graphs/SankeyGraph.tsx 🆕 +12.67 kB 0 B → 12.67 kB
src/components/reports/spreadsheets/sankey-spreadsheet.ts 🆕 +9.06 kB 0 B → 9.06 kB
src/components/reports/reports/SankeyCard.tsx 🆕 +5.3 kB 0 B → 5.3 kB
node_modules/recharts/es6/component/responsiveContainerUtils.js 🆕 +3.18 kB 0 B → 3.18 kB
node_modules/es-toolkit/dist/function/debounce.js 🆕 +2 kB 0 B → 2 kB
node_modules/es-toolkit/dist/compat/function/debounce.js 🆕 +1.63 kB 0 B → 1.63 kB
node_modules/es-toolkit/dist/compat/math/sumBy.js 🆕 +931 B 0 B → 931 B
node_modules/es-toolkit/dist/array/maxBy.js 🆕 +722 B 0 B → 722 B
node_modules/es-toolkit/dist/compat/math/maxBy.js 🆕 +641 B 0 B → 641 B
node_modules/es-toolkit/dist/compat/function/throttle.js 🆕 +612 B 0 B → 612 B
node_modules/es-toolkit/compat/throttle.js 🆕 +222 B 0 B → 222 B
node_modules/es-toolkit/compat/maxBy.js 🆕 +192 B 0 B → 192 B
node_modules/es-toolkit/compat/sumBy.js 🆕 +192 B 0 B → 192 B
node_modules/es-toolkit/compat/throttle.js?commonjs-es-import 🆕 +126 B 0 B → 126 B
node_modules/es-toolkit/compat/maxBy.js?commonjs-es-import 🆕 +114 B 0 B → 114 B
node_modules/es-toolkit/compat/sumBy.js?commonjs-es-import 🆕 +114 B 0 B → 114 B
node_modules/es-toolkit/dist/compat/function/throttle.js?commonjs-exports 🆕 +20 B 0 B → 20 B
node_modules/es-toolkit/dist/compat/function/debounce.js?commonjs-exports 🆕 +20 B 0 B → 20 B
node_modules/es-toolkit/dist/function/debounce.js?commonjs-exports 🆕 +18 B 0 B → 18 B
node_modules/es-toolkit/dist/compat/math/maxBy.js?commonjs-exports 🆕 +17 B 0 B → 17 B
node_modules/es-toolkit/dist/compat/math/sumBy.js?commonjs-exports 🆕 +17 B 0 B → 17 B
node_modules/es-toolkit/dist/array/maxBy.js?commonjs-exports 🆕 +17 B 0 B → 17 B
node_modules/recharts/es6/component/ResponsiveContainer.js 📈 +8.29 kB (+4268.34%) 199 B → 8.49 kB
node_modules/recharts/es6/context/chartDataContext.js 📈 +301 B (+56.47%) 533 B → 834 B
src/components/reports/ReportRouter.tsx 📈 +538 B (+12.95%) 4.06 kB → 4.58 kB
src/hooks/useFeatureFlag.ts 📈 +22 B (+5.95%) 370 B → 392 B
node_modules/recharts/es6/context/chartLayoutContext.js 📈 +210 B (+4.22%) 4.86 kB → 5.06 kB
src/components/reports/Overview.tsx 📈 +560 B (+2.95%) 18.55 kB → 19.09 kB
src/components/settings/Experimental.tsx 📈 +241 B (+2.61%) 9 kB → 9.24 kB
node_modules/lodash/debounce.js?commonjs-es-import 📈 +2 B (+1.75%) 114 B → 116 B
src/undo/index.ts 📈 +6 B (+1.07%) 560 B → 566 B
node_modules/recharts/es6/chart/PolarChart.js 📈 +20 B (+0.52%) 3.77 kB → 3.79 kB
node_modules/recharts/es6/cartesian/Line.js 📈 +46 B (+0.21%) 21.66 kB → 21.7 kB
node_modules/react-i18next/dist/es/utils.js 📈 +4 B (+0.19%) 2.03 kB → 2.04 kB
node_modules/lodash/debounce.js 📈 +8 B (+0.12%) 6.27 kB → 6.28 kB
node_modules/recharts/es6/cartesian/XAxis.js 📈 +4 B (+0.07%) 5.69 kB → 5.69 kB
node_modules/react-i18next/dist/es/TransWithoutContext.js 📈 +6 B (+0.05%) 12.16 kB → 12.16 kB
src/components/reports/spreadsheets/net-worth-spreadsheet.ts 📈 +2 B (+0.04%) 5.37 kB → 5.37 kB
src/components/reports/reports/NetWorthCard.tsx 📈 +2 B (+0.02%) 8.01 kB → 8.01 kB
src/components/reports/reports/NetWorth.tsx 📈 +2 B (+0.02%) 10.19 kB → 10.19 kB
node_modules/downshift/dist/downshift.esm.js 📈 +8 B (+0.02%) 41.46 kB → 41.47 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/ReportRouter.js 1.08 MB → 1.15 MB (+69.25 kB) +6.26%
static/js/index.js 8.88 MB → 8.9 MB (+17.09 kB) +0.19%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/indexeddb-main-thread-worker-e59fee74.js 12.94 kB 0%
static/js/workbox-window.prod.es5.js 5.64 kB 0%
static/js/da.js 110.51 kB 0%
static/js/de.js 164.01 kB 0%
static/js/en-GB.js 6.84 kB 0%
static/js/en.js 147.65 kB 0%
static/js/fr.js 170.93 kB 0%
static/js/it.js 163.83 kB 0%
static/js/nl.js 99.96 kB 0%
static/js/pl.js 90.35 kB 0%
static/js/pt-BR.js 147.15 kB 0%
static/js/ru.js 112.31 kB 0%
static/js/sv.js 72.07 kB 0%
static/js/th.js 187.53 kB 0%
static/js/uk.js 212.83 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/BackgroundImage.js 120.48 kB 0%
static/js/narrow.js 600.86 kB 0%
static/js/TransactionList.js 19.63 kB 0%
static/js/wide.js 185.47 kB 0%
static/js/usePayeeRuleCounts.js 11.79 kB 0%
static/js/useTransactionBatchActions.js 12.98 kB 0%
static/js/FormulaEditor.js 1.08 MB 0%

@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 5.78 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.BiiUNv9h.js 5.78 MB 0%

@andrewhumble andrewhumble changed the title Implement Sankey graph report [WIP] Implement Sankey graph report Nov 4, 2025
Auto-generated by VRT workflow

PR: actualbudget#6068
@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

✅ VRT screenshots have been automatically updated.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

✅ VRT screenshots have been automatically updated.

@YesWeCandrew
Copy link

Hi @andrewhumble

This is such an awesome feature, thank you for working on it. The three modes are very useful, especially the 'Difference' option. Not many of the other chart options can present progress to budget as well as this one can.

I know this is a WIP, so please feel free to ignore this suggestion, but I found the word 'Budget' here a little confusing, because the value it's referring to is labelled as 'Available Funds' in the budget view. Perhaps we should rename that to Available Funds?

image

IMO, this looks like a great feature and could be released as is, but if you are looking to expand it out with some more features, I'd be keen to see:

  • More date options (so you can see the Sankey over last year, last x months etc)
  • The Spend option still include the income information, as this helps complete the picture more and would show people their savings for the period
  • Super stretch goal: If we could overlay the spend information on top of the budget one, by using perhaps shading or colour to indicate how spent the category is, that would be amazing.

Sorry to be chucking loads of ideas at you - feel free to ignore me completely. I don't know TypeScript much but if I can help at all with testing / ideating, very happy to!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Report - Sankey diagram from group categories and categories

2 participants