Skip to content

feat(reports): add money-flow sankey chart, unify monthly report date selector - #579

Merged
algirdasc merged 13 commits into
mainfrom
feature/reports-sankey-chart
Aug 16, 2026
Merged

feat(reports): add money-flow sankey chart, unify monthly report date selector#579
algirdasc merged 13 commits into
mainfrom
feature/reports-sankey-chart

Conversation

@algirdasc

@algirdasc algirdasc commented Aug 16, 2026

Copy link
Copy Markdown
Owner

Summary

  1. Sankey diagram on the Reports page visualizing money flow for the selected period:
    • Income categories flow into an Income hub node, out to expense categories, unspent remainder to Saved
    • Link colors use category colors (gradient mode), matching the existing category chart
  2. Monthly income & expense now uses the same period selector + date range display as the other reports (was: year prev/next buttons). Bar labels derive from each balance's balanceAt, so arbitrary ranges render correctly. Default stays "this year".

Implementation

  • New dependency: chartjs-chart-sankey — a chart.js controller plugin, staying on the existing chart.js 4 + ng2-charts stack. No second chart engine, no wrapper.
  • SankeyExpensesComponent extends AbstractReportComponent like the other reports — reuses the existing categoryExpenses query, period selector, and date-range UI. No backend changes.
  • Flow-building logic extracted to a pure buildSankeyFlows() function with unit tests.
  • Monthly report: net -42 lines, same template structure as daily/category reports.

Verification

  • tsc --noEmit clean, eslint clean
  • npm test: 92/92 pass (4 new specs)
  • npm run build (production) succeeds

Adds a sankey diagram report visualizing income categories flowing
through the Income node into expense categories, with the unspent
remainder shown as Saved. Built on chartjs-chart-sankey to stay on
the existing chart.js/ng2-charts stack. Reuses the category-expenses
report endpoint, so no backend changes.
Replaces the year prev/next navigation with the period selector and
date-range display used by the other reports. Bar labels are now built
from each balance's balanceAt ('MMM', or 'MMM yyyy' when the range
spans years or is open-ended), so arbitrary ranges render correctly.
Default period is 'this year', preserving the previous default view.
@algirdasc algirdasc changed the title feat(reports): add money-flow sankey chart feat(reports): add money-flow sankey chart, unify monthly report date selector Aug 16, 2026
Adds a disabledPeriods input to the shared period selector and disables
Lifetime and Custom for the monthly income & expense report, where
open-ended or arbitrary ranges do not make sense for a monthly series.
Nebular's nbButtonToggle does not reliably suppress the group
valueChange for disabled buttons, so guard onPeriodChange itself.
- Renames the hub node to 'Budget' (net change as its sum), income
  categories on the left, expense categories and the Saved remainder
  on the right
- Node labels now include the short-number sum, e.g. 'Rent (700.00)'
- Label color is read from the host element's computed style and
  re-resolved on Nebular theme changes, so labels stay readable in
  both light and dark themes
Forces the Saved node one column past the expense categories via the
sankey column option, so the unspent remainder reads as its own branch
instead of blending into the expense list.
Default modeX 'edge' relocates every sink node (all expense
categories) to the last column, which nullified the forced Saved
column. 'even' keeps sinks in their BFS column so Saved stays a
separate branch.
… expense"

This reverts commit 6028d26, restoring the year prev/next navigation.
@algirdasc
algirdasc merged commit 05d37de into main Aug 16, 2026
4 checks passed
@algirdasc
algirdasc deleted the feature/reports-sankey-chart branch August 16, 2026 12:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant