[PR #7839] [AI] Cash Flow: interval-grouped bars + transaction list #131534

Open
opened 2026-06-16 00:11:47 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7839
Author: @junyuanz1
Created: 5/14/2026
Status: 🔄 Open

Base: masterHead: junyuanz/improvecashflowreport


📝 Commits (2)

  • 0783e4d update
  • cb1ab2e Merge branch 'master' into junyuanz/improvecashflowreport

📊 Changes

16 files changed (+563 additions, -291 deletions)

View changed files

📝 packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx (+34 -12)
📝 packages/desktop-client/src/components/reports/reports/CashFlow.tsx (+279 -83)
📝 packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx (+38 -127)
packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.test.ts (+160 -0)
📝 packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx (+45 -69)
📝 packages/loot-core/src/types/models/dashboard.ts (+1 -0)
upcoming-release-notes/7839.md (+6 -0)

📄 Description

Description

This PR addresses two pain points in the Cash Flow report:

  1. The dashboard card previously rendered only two aggregated bars (total income, total expenses) for the whole date range — there was no way to see month-over-month trends from the dashboard.
  2. The detail page showed only the chart; users who wanted to inspect the underlying transactions for a date range had to navigate away to an account view.

Main changes:

  • Add an optional interval: 'Daily' | 'Monthly' | 'Yearly' field to CashFlowWidget's meta, defaulting to Monthly. Weekly is intentionally omitted for now — AQL has no $week transform, so it would need separate backend work.
  • The dashboard card now reuses the detail page's CashFlowGraph and renders interval-grouped bars (mirroring BudgetAnalysisCard's pattern) instead of two summary bars.
  • Widen the default time frame from "current month" to "last 6 months". The old default was fine for two summary bars but useless for an interval bar chart. New dashboards now show a real trend on first paint; widgets with a saved meta.timeFrame are unchanged.
  • Add a transaction list below the chart on the detail page, scoped to the same date range and filter conditions. Reuses the Calendar report's provider stack and useTransactions hook. Mobile uses inline scroll instead of Calendar's bottom-sheet drag for simplicity.
  • Rename cashFlowByDate's isConcise: boolean to a granularity enum and add the Yearly query branch. Delete the now-unused simpleCashFlow function.
  • Export recalculate and add unit tests covering each granularity's bucketing, starting-balance accumulation, transfer/income split, and totalChange.

Compatibility: widget meta is JSON-stored and the new field is optional, so no DB migration is required. Existing widgets implicitly default to Monthly, preserving prior behavior.

Note for reviewers: the dashboard card's "Change" number shifts slightly for users with intra-budget transfers, because cashFlowByDate keeps transfers as a separate series while the old simpleCashFlow filtered them out entirely. The detail page already had this behavior; the card just now matches it.

image image

No related issue.

Testing

Automated:

  • yarn lage typecheck — all workspaces pass
  • yarn lint — 0 errors (remaining warnings are pre-existing in the repo)
  • New unit test file cash-flow-spreadsheet.test.ts (7 cases) — all pass

Manual (yarn start → "Don't use a server" → "View demo" to load the seeded sample budget):

  1. Dashboard Cash Flow card: shows the last 6 months as monthly bars by default; balance line visible; tooltip shows per-month numbers.
  2. Click into the detail page: chart and totals render; the transaction list appears below the chart, scoped to the current date range and filters.
  3. Switch the date range (1 month / 3 months / 1 year / etc.): chart and transaction list both update.
  4. Toggle "Hide balance" and Save widget: the card on the dashboard honors the saved setting.
  5. Add a Filter (e.g. by payee): chart and list filter together; persists after Save widget.
  6. Resize the browser to a mobile width: card and detail page both render; mobile transaction list uses inline scroll.
  7. Privacy mode (eye icon): bars, line, summary numbers, and transaction-list amounts are all blurred.
  8. Empty state: pick a window/filter with no transactions — chart shows zero-value bars and the list shows "No transactions".

Checklist

  • Release notes added (see link above)
  • No obvious regressions in affected areas
  • Self-review has been performed - I understand what each change in the code does and why it is needed

Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 37 14.14 MB → 14.14 MB (+1.45 kB) +0.01%
loot-core 1 5.28 MB 0%
api 2 3.87 MB 0%
cli 1 7.97 MB 0%
crdt 1 11.12 kB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
37 14.14 MB → 14.14 MB (+1.45 kB) +0.01%
Changeset
File Δ Size
src/components/reports/reports/CashFlow.tsx 📈 +4.92 kB (+53.10%) 9.27 kB → 14.19 kB
src/components/reports/graphs/CashFlowGraph.tsx 📈 +247 B (+2.69%) 8.98 kB → 9.22 kB
src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx 📉 -374 B (-6.16%) 5.93 kB → 5.56 kB
src/components/reports/reports/CashFlowCard.tsx 📉 -3.34 kB (-32.04%) 10.44 kB → 7.09 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.27 MB → 1.27 MB (+1.45 kB) +0.11%

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
static/js/index.js 1.6 MB 0%
static/js/BackgroundImage.js 121.09 kB 0%
static/js/FormulaEditor.js 962.55 kB 0%
static/js/ManageRules.js 46.63 kB 0%
static/js/PayeeRuleCountLabel.js 7.33 kB 0%
static/js/ScheduleEditForm.js 146.57 kB 0%
static/js/SchedulesTable.js 206.3 kB 0%
static/js/TransactionEdit.js 90.63 kB 0%
static/js/TransactionList.js 85.81 kB 0%
static/js/Value.js 5.08 MB 0%
static/js/_baseIsEqual.js 98.38 kB 0%
static/js/ca.js 185.63 kB 0%
static/js/client.js 451.37 kB 0%
static/js/da.js 100.19 kB 0%
static/js/de.js 182.38 kB 0%
static/js/en-GB.js 9.25 kB 0%
static/js/en.js 201.71 kB 0%
static/js/es.js 177.58 kB 0%
static/js/extends.js 508.79 kB 0%
static/js/fr.js 177.35 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.46 kB 0%
static/js/it.js 163.93 kB 0%
static/js/narrow.js 365.05 kB 0%
static/js/nb-NO.js 147.07 kB 0%
static/js/nl.js 119.71 kB 0%
static/js/pt-BR.js 187.34 kB 0%
static/js/resize-observer.js 18.06 kB 0%
static/js/th.js 173.33 kB 0%
static/js/theme.js 31.88 kB 0%
static/js/toString.js 705.18 kB 0%
static/js/uk.js 216.7 kB 0%
static/js/useFormatList.js 2.52 kB 0%
static/js/useTransactionBatchActions.js 9.71 kB 0%
static/js/wide.js 298.88 kB 0%
static/js/workbox-window.prod.es5.js 7.33 kB 0%
static/js/zh-Hans.js 116.44 kB 0%

loot-core

Total

Files count Total bundle size % Changed
1 5.28 MB 0%
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.Co0zOyQO.js 5.28 MB 0%

api

Total

Files count Total bundle size % Changed
2 3.87 MB 0%
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
index.js 3.87 MB 0%
models.js 0 B 0%

cli

Total

Files count Total bundle size % Changed
1 7.97 MB 0%
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
cli.js 7.97 MB 0%

crdt

Total

Files count Total bundle size % Changed
1 11.12 kB 0%
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
index.js 11.12 kB 0%

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/7839 **Author:** [@junyuanz1](https://github.com/junyuanz1) **Created:** 5/14/2026 **Status:** 🔄 Open **Base:** `master` ← **Head:** `junyuanz/improvecashflowreport` --- ### 📝 Commits (2) - [`0783e4d`](https://github.com/actualbudget/actual/commit/0783e4dfeb92d247554932f14b41807c5912eee6) update - [`cb1ab2e`](https://github.com/actualbudget/actual/commit/cb1ab2e8d43518417cd3c926acef9fd248a395c0) Merge branch 'master' into junyuanz/improvecashflowreport ### 📊 Changes **16 files changed** (+563 additions, -291 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/command-bar.test.ts-snapshots/Command-bar-Check-the-command-bar-search-works-correctly-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx` (+34 -12) 📝 `packages/desktop-client/src/components/reports/reports/CashFlow.tsx` (+279 -83) 📝 `packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx` (+38 -127) ➕ `packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.test.ts` (+160 -0) 📝 `packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx` (+45 -69) 📝 `packages/loot-core/src/types/models/dashboard.ts` (+1 -0) ➕ `upcoming-release-notes/7839.md` (+6 -0) </details> ### 📄 Description <!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://actualbudget.org/docs/contributing/#writing-good-release-notes. Try running yarn generate:release-notes *before* pushing your PR for an interactive experience. --> ## Description <!-- What does this PR do? Why is it needed? Please give context on the "why?": why do we need this change? What problem is it solving for you?--> This PR addresses two pain points in the Cash Flow report: 1. **The dashboard card** previously rendered only two aggregated bars (total income, total expenses) for the whole date range — there was no way to see month-over-month trends from the dashboard. 2. **The detail page** showed only the chart; users who wanted to inspect the underlying transactions for a date range had to navigate away to an account view. Main changes: - Add an optional `interval: 'Daily' | 'Monthly' | 'Yearly'` field to `CashFlowWidget`'s `meta`, defaulting to `Monthly`. Weekly is intentionally omitted for now — AQL has no `$week` transform, so it would need separate backend work. - The dashboard card now reuses the detail page's `CashFlowGraph` and renders interval-grouped bars (mirroring `BudgetAnalysisCard`'s pattern) instead of two summary bars. - Widen the default time frame from "current month" to "last 6 months". The old default was fine for two summary bars but useless for an interval bar chart. New dashboards now show a real trend on first paint; widgets with a saved `meta.timeFrame` are unchanged. - Add a transaction list below the chart on the detail page, scoped to the same date range and filter conditions. Reuses the Calendar report's provider stack and `useTransactions` hook. Mobile uses inline scroll instead of Calendar's bottom-sheet drag for simplicity. - Rename `cashFlowByDate`'s `isConcise: boolean` to a `granularity` enum and add the Yearly query branch. Delete the now-unused `simpleCashFlow` function. - Export `recalculate` and add unit tests covering each granularity's bucketing, starting-balance accumulation, transfer/income split, and `totalChange`. Compatibility: widget meta is JSON-stored and the new field is optional, so no DB migration is required. Existing widgets implicitly default to `Monthly`, preserving prior behavior. Note for reviewers: the dashboard card's "Change" number shifts slightly for users with intra-budget transfers, because `cashFlowByDate` keeps transfers as a separate series while the old `simpleCashFlow` filtered them out entirely. The detail page already had this behavior; the card just now matches it. <img width="965" height="470" alt="image" src="https://github.com/user-attachments/assets/7070dd9c-8521-4695-acf1-41402eae1755" /> <img width="1306" height="827" alt="image" src="https://github.com/user-attachments/assets/b643ca16-8ed4-4f14-a3d0-4bac2834e8ee" /> ## Related issue(s) <!-- e.g. Fixes #123, Relates to #456 --> No related issue. ## Testing <!-- What did you test? How can we reproduce the issue you are fixing or how can we test the feature you built? --> **Automated:** - `yarn lage typecheck` — all workspaces pass - `yarn lint` — 0 errors (remaining warnings are pre-existing in the repo) - New unit test file `cash-flow-spreadsheet.test.ts` (7 cases) — all pass **Manual** (`yarn start` → "Don't use a server" → "View demo" to load the seeded sample budget): 1. Dashboard Cash Flow card: shows the last 6 months as monthly bars by default; balance line visible; tooltip shows per-month numbers. 2. Click into the detail page: chart and totals render; the transaction list appears below the chart, scoped to the current date range and filters. 3. Switch the date range (1 month / 3 months / 1 year / etc.): chart and transaction list both update. 4. Toggle "Hide balance" and Save widget: the card on the dashboard honors the saved setting. 5. Add a Filter (e.g. by payee): chart and list filter together; persists after Save widget. 6. Resize the browser to a mobile width: card and detail page both render; mobile transaction list uses inline scroll. 7. Privacy mode (eye icon): bars, line, summary numbers, and transaction-list amounts are all blurred. 8. Empty state: pick a window/filter with no transactions — chart shows zero-value bars and the list shows "No transactions". ## Checklist - [x] Release notes added (see link above) - [x] No obvious regressions in affected areas - [x] Self-review has been performed - I understand what each change in the code does and why it is needed <!--- actual-bot-sections ---> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 37 | 14.14 MB → 14.14 MB (+1.45 kB) | +0.01% loot-core | 1 | 5.28 MB | 0% api | 2 | 3.87 MB | 0% cli | 1 | 7.97 MB | 0% crdt | 1 | 11.12 kB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 37 | 14.14 MB → 14.14 MB (+1.45 kB) | +0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/components/reports/reports/CashFlow.tsx` | 📈 +4.92 kB (+53.10%) | 9.27 kB → 14.19 kB `src/components/reports/graphs/CashFlowGraph.tsx` | 📈 +247 B (+2.69%) | 8.98 kB → 9.22 kB `src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx` | 📉 -374 B (-6.16%) | 5.93 kB → 5.56 kB `src/components/reports/reports/CashFlowCard.tsx` | 📉 -3.34 kB (-32.04%) | 10.44 kB → 7.09 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/ReportRouter.js | 1.27 MB → 1.27 MB (+1.45 kB) | +0.11% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 1.6 MB | 0% static/js/BackgroundImage.js | 121.09 kB | 0% static/js/FormulaEditor.js | 962.55 kB | 0% static/js/ManageRules.js | 46.63 kB | 0% static/js/PayeeRuleCountLabel.js | 7.33 kB | 0% static/js/ScheduleEditForm.js | 146.57 kB | 0% static/js/SchedulesTable.js | 206.3 kB | 0% static/js/TransactionEdit.js | 90.63 kB | 0% static/js/TransactionList.js | 85.81 kB | 0% static/js/Value.js | 5.08 MB | 0% static/js/_baseIsEqual.js | 98.38 kB | 0% static/js/ca.js | 185.63 kB | 0% static/js/client.js | 451.37 kB | 0% static/js/da.js | 100.19 kB | 0% static/js/de.js | 182.38 kB | 0% static/js/en-GB.js | 9.25 kB | 0% static/js/en.js | 201.71 kB | 0% static/js/es.js | 177.58 kB | 0% static/js/extends.js | 508.79 kB | 0% static/js/fr.js | 177.35 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 163.93 kB | 0% static/js/narrow.js | 365.05 kB | 0% static/js/nb-NO.js | 147.07 kB | 0% static/js/nl.js | 119.71 kB | 0% static/js/pt-BR.js | 187.34 kB | 0% static/js/resize-observer.js | 18.06 kB | 0% static/js/th.js | 173.33 kB | 0% static/js/theme.js | 31.88 kB | 0% static/js/toString.js | 705.18 kB | 0% static/js/uk.js | 216.7 kB | 0% static/js/useFormatList.js | 2.52 kB | 0% static/js/useTransactionBatchActions.js | 9.71 kB | 0% static/js/wide.js | 298.88 kB | 0% static/js/workbox-window.prod.es5.js | 7.33 kB | 0% static/js/zh-Hans.js | 116.44 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 5.28 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **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.Co0zOyQO.js | 5.28 MB | 0% </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 2 | 3.87 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **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 ----- | --------- | --------- index.js | 3.87 MB | 0% models.js | 0 B | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 7.97 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **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 ----- | --------- | --------- cli.js | 7.97 MB | 0% </div> </details> --- #### crdt **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 11.12 kB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **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 ----- | --------- | --------- index.js | 11.12 kB | 0% </div> </details> </details> <!--- bundlestats-action-comment key:combined end ---> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-06-16 00:11:47 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#131534